Claude/add component docs o scl o

apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx

@@ -0,0 +1,46 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Checkbox` props extends the input HTML attributes (except `type` and `onChange`).
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The label content of the checkbox',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'checked',
+      description: 'Whether the checkbox is checked (controlled)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultChecked',
+      description: 'Whether the checkbox is checked by default (uncontrolled)',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the checkbox is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the checked state changes',
+      type: '`(checked: boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the checkbox',
+      type: '```{<br>  primary?: string<br>  border?: string<br>  text?: string<br>  inputBg?: string<br>  checkIcon?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>

apps/landing/src/app/(detail)/components/[component]/checkbox/demo/1_Default.tsx

@@ -0,0 +1,9 @@
+import { Checkbox } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Basic checkbox with a label. Users can click to toggle the checked state.
+ */
+export default function Default() {
+  return <Checkbox>Agree to terms and conditions</Checkbox>
+}

apps/landing/src/app/(detail)/components/[component]/checkbox/demo/2_Checked.tsx

@@ -0,0 +1,9 @@
+import { Checkbox } from '@devup-ui/components'
+
+/**
+ * **Checked**
+ * Use `defaultChecked` prop to set the initial checked state for uncontrolled usage, or use `checked` prop for controlled state management.
+ */
+export default function Checked() {
+  return <Checkbox defaultChecked>Checked by default</Checkbox>
+}

apps/landing/src/app/(detail)/components/[component]/checkbox/demo/3_Disabled.tsx

@@ -0,0 +1,17 @@
+import { Checkbox } from '@devup-ui/components'
+import { VStack } from '@devup-ui/react'
+
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction. The checkbox will have a muted appearance and cannot be toggled.
+ */
+export default function Disabled() {
+  return (
+    <VStack gap="8px">
+      <Checkbox disabled>Disabled unchecked</Checkbox>
+      <Checkbox defaultChecked disabled>
+        Disabled checked
+      </Checkbox>
+    </VStack>
+  )
+}

apps/landing/src/app/(detail)/components/[component]/checkbox/demo/4_Colors.tsx

@@ -0,0 +1,22 @@
+import { Checkbox } from '@devup-ui/components'
+import { Flex } from '@devup-ui/react'
+
+/**
+ * **Colors**
+ * Pass in an object containing color tokens into `colors` prop. You can customize the checkbox appearance using `primary`, `border`, `text`, `inputBg`, and `checkIcon` color values.
+ */
+export default function Colors() {
+  return (
+    <Flex flexWrap="wrap" gap="16px">
+      <Checkbox colors={{ primary: '#10B981' }} defaultChecked>
+        Green
+      </Checkbox>
+      <Checkbox colors={{ primary: 'orange' }} defaultChecked>
+        Orange
+      </Checkbox>
+      <Checkbox colors={{ primary: 'steelblue' }} defaultChecked>
+        Steel Blue
+      </Checkbox>
+    </Flex>
+  )
+}

apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx

@@ -0,0 +1,135 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Radio` props extends the input HTML attributes (except `type`).
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The label content of the radio',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'checked',
+      description: 'Whether the radio is checked',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the radio is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'variant',
+      description: 'The visual variant of the radio',
+      type: "`'default' | 'button'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'firstButton',
+      description:
+        'Whether this is the first button in a button group (only for button variant)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'lastButton',
+      description:
+        'Whether this is the last button in a button group (only for button variant)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  label?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'styles',
+      description: 'Custom inline styles for inner elements',
+      type: '```{<br>  label?: React.CSSProperties<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the radio',
+      type: '```{<br>  primary?: string<br>  border?: string<br>  text?: string<br>  bg?: string<br>  hoverBg?: string<br>  hoverBorder?: string<br>  hoverColor?: string<br>  checkedBg?: string<br>  checkedBorder?: string<br>  checkedColor?: string<br>  disabledBg?: string<br>  disabledColor?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
+
+###### RadioGroup API
+
+`RadioGroup` component for managing a group of radio buttons.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'options',
+      description: 'Array of options for the radio group',
+      type: '```{ value: string | number | boolean; label: React.ReactNode }[]```',
+      default: '-',
+    },
+    {
+      property: 'value',
+      description: 'The controlled value of the radio group',
+      type: '`string | number | boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the radio group (uncontrolled)',
+      type: '`string | number | boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the selected value changes',
+      type: '`(value: string | number | boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether all radios in the group are disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'direction',
+      description: 'The layout direction of the radio group',
+      type: "`'row' | 'column'`",
+      default: "`'row'`",
+    },
+    {
+      property: 'variant',
+      description: 'The visual variant of the radio buttons',
+      type: "`'default' | 'button'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables (same as Radio colors)',
+      type: '`RadioColors`',
+      default: '`undefined`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  label?: string<br>  container?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'styles',
+      description: 'Custom inline styles for inner elements',
+      type: '```{<br>  label?: React.CSSProperties<br>  container?: React.CSSProperties<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>

apps/landing/src/app/(detail)/components/[component]/radio/demo/1_Default.tsx

@@ -0,0 +1,18 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Use `RadioGroup` with an `options` array to create a group of radio buttons. Only one option can be selected at a time.
+ */
+export default function Default() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}

apps/landing/src/app/(detail)/components/[component]/radio/demo/2_Variant.tsx

@@ -0,0 +1,19 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Variant**
+ * Use `variant="button"` to display radio options as a segmented button group. Options are displayed inline with connected borders.
+ */
+export default function ButtonVariant() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+      variant="button"
+    />
+  )
+}

apps/landing/src/app/(detail)/components/[component]/radio/demo/3_Direction.tsx

@@ -0,0 +1,19 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Direction**
+ * Use `direction="column"` to stack radio buttons vertically. Default direction is `"row"` which displays options horizontally.
+ */
+export default function Column() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      direction="column"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}

apps/landing/src/app/(detail)/components/[component]/radio/demo/4_Disabled.tsx

@@ -0,0 +1,19 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction with all radio options. All radios will have a muted appearance and cannot be selected.
+ */
+export default function Disabled() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      disabled
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}