Merge pull request #522 from dev-five-git/claude/add-component-docs-oSclO

Claude/add component docs o scl o

Author: owjs3901

…nts/[component]/button/demo/Variants.tsx …s/[component]/button/demo/1_Variants.tsxapps/landing/src/app/(detail)/components/[component]/button/demo/Variants.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/1_Variants.tsx apps/landing/src/app/(detail)/components/[component]/button/demo/Variants.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/1_Variants.tsx

@@ -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`',
+    },
+  ]}
+/>

…ponents/[component]/button/demo/Icon.tsx …nents/[component]/button/demo/2_Icon.tsxapps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/2_Icon.tsx apps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/2_Icon.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>
+}

…nents/[component]/button/demo/Danger.tsx …nts/[component]/button/demo/3_Danger.tsxapps/landing/src/app/(detail)/components/[component]/button/demo/Danger.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/3_Danger.tsx apps/landing/src/app/(detail)/components/[component]/button/demo/Danger.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/3_Danger.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>
+}

…nts/[component]/button/demo/Disabled.tsx …s/[component]/button/demo/4_Disabled.tsxapps/landing/src/app/(detail)/components/[component]/button/demo/Disabled.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/4_Disabled.tsx apps/landing/src/app/(detail)/components/[component]/button/demo/Disabled.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/4_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>
+  )
+}

…nents/[component]/button/demo/Colors.tsx …nts/[component]/button/demo/5_Colors.tsxapps/landing/src/app/(detail)/components/[component]/button/demo/Colors.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/5_Colors.tsx apps/landing/src/app/(detail)/components/[component]/button/demo/Colors.tsx renamed to apps/landing/src/app/(detail)/components/[component]/button/demo/5_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>
+  )
+}