From f3712f41b7698000c32bed01558aba8a87297962 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 23 Dec 2025 02:18:11 +0000
Subject: [PATCH 1/7] Add API documentation for Storybook components

Add Api.mdx files with PropsTable for the following components:
- Checkbox: props including colors, checked state, onChange callback
- Textbox (Input): props including error states, allowClear, icon support
- Toggle: props including variant (default/switch), colors, onChange
- Stepper: compound component documentation with Stepper, Container, Buttons, Input
- Radio: props including variant (default/button), RadioGroup API included
- Select: compound component documentation with Trigger, Container, Option, Divider
---
 .../components/[component]/checkbox/Api.mdx   |  46 +++++
 .../components/[component]/radio/Api.mdx      | 133 +++++++++++++
 .../components/[component]/select/Api.mdx     | 183 ++++++++++++++++++
 .../components/[component]/stepper/Api.mdx    |  72 +++++++
 .../components/[component]/textbox/Api.mdx    |  70 +++++++
 .../components/[component]/toggle/Api.mdx     |  70 +++++++
 6 files changed, 574 insertions(+)

diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
index e69de29b..9ad52408 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
+++ b/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`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
index e69de29b..2e8383fe 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
@@ -0,0 +1,133 @@
+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`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
index e69de29b..2bfdbb43 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
@@ -0,0 +1,183 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+The Select component is a compound component that consists of multiple parts.
+
+###### Select
+
+The root component that provides context for the select.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The select content (Trigger, Container, Options)',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'value',
+      description: 'The controlled value of the select',
+      type: '`string | string[]`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the select (uncontrolled)',
+      type: '`string | string[]`',
+      default: '`undefined`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the selected value changes',
+      type: '`(value: string) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'open',
+      description: 'Whether the select dropdown is open (controlled)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultOpen',
+      description: 'Whether the select dropdown is open by default',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'onOpenChange',
+      description: 'Callback when the open state changes',
+      type: '`(open: boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'type',
+      description: 'The selection mode of the select',
+      type: "`'default' | 'radio' | 'checkbox'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'typography',
+      description: 'Typography style key from the theme',
+      type: '`DevupThemeTypographyKeys`',
+      default: '`undefined`',
+    },
+    {
+      property: 'options',
+      description: 'Shorthand for defining options without using compound components',
+      type: '```{ label?: string; disabled?: boolean; value: string; showCheck?: boolean; onClick?: (value, e) => void }[]```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the select',
+      type: '```{<br>  primary?: string<br>  border?: string<br>  inputBackground?: string<br>  inputDisabledBackground?: string<br>  inputDisabledText?: string<br>  base10?: string<br>  title?: string<br>  selectDisabled?: string<br>  primaryBg?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
+
+###### SelectTrigger
+
+The button that triggers the dropdown to open/close.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The trigger content',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'asChild',
+      description: 'Render as the child element instead of a Button',
+      type: '`boolean`',
+      default: '`false`',
+    },
+  ]}
+/>
+
+###### SelectContainer
+
+The dropdown container that holds the options.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The container content (Options)',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'showConfirmButton',
+      description: 'Whether to show a confirm button (for checkbox type)',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'confirmButtonText',
+      description: 'Text for the confirm button',
+      type: '`string`',
+      default: "`'DĖ'`",
+    },
+    {
+      property: 'x',
+      description: 'Horizontal offset for the dropdown position',
+      type: '`number`',
+      default: '`0`',
+    },
+    {
+      property: 'y',
+      description: 'Vertical offset for the dropdown position',
+      type: '`number`',
+      default: '`0`',
+    },
+  ]}
+/>
+
+###### SelectOption
+
+An individual option within the select dropdown.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The option content',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'value',
+      description: 'The value of the option',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the option is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'showCheck',
+      description: 'Whether to show a check icon when selected',
+      type: '`boolean`',
+      default: '`true`',
+    },
+    {
+      property: 'onClick',
+      description: 'Custom click handler for the option',
+      type: '`(value: string | undefined, e?: React.MouseEvent) => void`',
+      default: '`undefined`',
+    },
+  ]}
+/>
+
+###### SelectDivider
+
+A visual divider between options.
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
index e69de29b..8cbabd45 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
@@ -0,0 +1,72 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+The Stepper component is a compound component that consists of multiple parts.
+
+###### Stepper
+
+The root component that provides context for the stepper.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The stepper content (Container, Buttons, Input)',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'value',
+      description: 'The controlled value of the stepper',
+      type: '`number`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the stepper (uncontrolled)',
+      type: '`number`',
+      default: '`0`',
+    },
+    {
+      property: 'onValueChange',
+      description: 'Callback when the stepper value changes',
+      type: '`(value: number) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'min',
+      description: 'The minimum value allowed',
+      type: '`number`',
+      default: '`0`',
+    },
+    {
+      property: 'max',
+      description: 'The maximum value allowed',
+      type: '`number`',
+      default: '`100`',
+    },
+    {
+      property: 'type',
+      description: 'Whether the value is editable via input or displayed as text',
+      type: "`'input' | 'text'`",
+      default: "`'input'`",
+    },
+  ]}
+/>
+
+###### StepperContainer
+
+A flex container that wraps the stepper elements.
+
+###### StepperDecreaseButton
+
+Button to decrease the stepper value by 1. Automatically disabled when value reaches min.
+
+###### StepperIncreaseButton
+
+Button to increase the stepper value by 1. Automatically disabled when value reaches max.
+
+###### StepperInput
+
+Displays the current value. When type is 'input', users can edit the value directly.
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
index e69de29b..fb136c57 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
@@ -0,0 +1,70 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Input` props extends the input HTML attributes (except `type`).
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'type',
+      description: 'The type of the input (excludes file type)',
+      type: "`Exclude<InputType, 'file'>`",
+      default: '`undefined`',
+    },
+    {
+      property: 'typography',
+      description: 'Typography style key from the theme',
+      type: '`keyof DevupThemeTypography`',
+      default: '`undefined`',
+    },
+    {
+      property: 'error',
+      description: 'Whether the input is in an error state',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'errorMessage',
+      description: 'Error message to display below the input',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'allowClear',
+      description: 'Whether to show a clear button when input has value',
+      type: '`boolean`',
+      default: '`true`',
+    },
+    {
+      property: 'onClear',
+      description: 'Callback when the clear button is clicked',
+      type: '`() => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'icon',
+      description: 'Icon to display on the left side of the input',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the input is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  container?: string<br>  input?: string<br>  icon?: string<br>  errorMessage?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the input',
+      type: '```{<br>  primary?: string<br>  error?: string<br>  text?: string<br>  base?: string<br>  iconBold?: string<br>  border?: string<br>  inputBackground?: string<br>  primaryFocus?: string<br>  negative20?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
index e69de29b..87d813ee 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
@@ -0,0 +1,70 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Toggle` component props.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'value',
+      description: 'The controlled value of the toggle',
+      type: '`boolean | null`',
+      default: '`null`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the toggle (uncontrolled)',
+      type: '`boolean | null`',
+      default: '`null`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the toggle value changes',
+      type: '`(value: boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the toggle is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'variant',
+      description: 'The visual variant of the toggle',
+      type: "`'default' | 'switch'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'className',
+      description: 'Additional class name for the toggle container',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'style',
+      description: 'Inline styles for the toggle container',
+      type: '`React.CSSProperties`',
+      default: '`undefined`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  toggle?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'styles',
+      description: 'Custom inline styles for inner elements',
+      type: '```{<br>  toggle?: React.CSSProperties<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the toggle',
+      type: '```{<br>  primary?: string<br>  bg?: string<br>  hoverBg?: string<br>  primaryHoverBg?: string<br>  disabledBg?: string<br>  switchHoverOutline?: string<br>  switchShadow?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>

From 115c5ba615918bb0968b7ca70159cbfe560bf504 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 23 Dec 2025 04:26:59 +0000
Subject: [PATCH 2/7] Add demo examples for Storybook components

Add interactive demo files for the following components:
- Checkbox: Default, Checked, Disabled, Colors
- Textbox (Input): Default, Error, Disabled, WithIcon
- Toggle: Default, Switch variant, Disabled, Colors
- Stepper: Default, TextType, MinMax
- Radio: Default, ButtonVariant, Column, Disabled
- Select: Default, Radio type, Checkbox type, WithOptions
---
 .../[component]/checkbox/demo/Checked.tsx     |  7 ++++
 .../[component]/checkbox/demo/Colors.tsx      | 11 ++++++
 .../[component]/checkbox/demo/Default.tsx     |  7 ++++
 .../[component]/checkbox/demo/Disabled.tsx    | 15 ++++++++
 .../[component]/radio/demo/ButtonVariant.tsx  | 17 ++++++++++
 .../[component]/radio/demo/Column.tsx         | 17 ++++++++++
 .../[component]/radio/demo/Default.tsx        | 16 +++++++++
 .../[component]/radio/demo/Disabled.tsx       | 17 ++++++++++
 .../[component]/select/demo/Checkbox.tsx      | 34 +++++++++++++++++++
 .../[component]/select/demo/Default.tsx       | 21 ++++++++++++
 .../[component]/select/demo/Radio.tsx         | 24 +++++++++++++
 .../[component]/select/demo/WithOptions.tsx   | 17 ++++++++++
 .../[component]/stepper/demo/Default.tsx      | 21 ++++++++++++
 .../[component]/stepper/demo/MinMax.tsx       | 21 ++++++++++++
 .../[component]/stepper/demo/TextType.tsx     | 21 ++++++++++++
 .../[component]/textbox/demo/Default.tsx      |  7 ++++
 .../[component]/textbox/demo/Disabled.tsx     |  7 ++++
 .../[component]/textbox/demo/Error.tsx        |  7 ++++
 .../[component]/textbox/demo/WithIcon.tsx     | 21 ++++++++++++
 .../[component]/toggle/demo/Colors.tsx        |  7 ++++
 .../[component]/toggle/demo/Default.tsx       |  7 ++++
 .../[component]/toggle/demo/Disabled.tsx      | 13 +++++++
 .../[component]/toggle/demo/Switch.tsx        |  7 ++++
 23 files changed, 342 insertions(+)
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx

diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
new file mode 100644
index 00000000..e9ad267d
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Checkbox } from '@devup-ui/components'
+
+export default function Checked() {
+  return <Checkbox defaultChecked>Checked by default</Checkbox>
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
new file mode 100644
index 00000000..7ed4cad9
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { Checkbox } from '@devup-ui/components'
+
+export default function Colors() {
+  return (
+    <Checkbox colors={{ primary: '#10B981' }} defaultChecked>
+      Custom primary color
+    </Checkbox>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
new file mode 100644
index 00000000..d9961bc4
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Checkbox } from '@devup-ui/components'
+
+export default function Default() {
+  return <Checkbox>Agree to terms and conditions</Checkbox>
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
new file mode 100644
index 00000000..8a7f3fc0
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { VStack } from '@devup-ui/react'
+import { Checkbox } from '@devup-ui/components'
+
+export default function Disabled() {
+  return (
+    <VStack gap="8px">
+      <Checkbox disabled>Disabled unchecked</Checkbox>
+      <Checkbox defaultChecked disabled>
+        Disabled checked
+      </Checkbox>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
new file mode 100644
index 00000000..05a77c88
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { RadioGroup } from '@devup-ui/components'
+
+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"
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
new file mode 100644
index 00000000..923baf4b
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { RadioGroup } from '@devup-ui/components'
+
+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' },
+      ]}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
new file mode 100644
index 00000000..2bcf52fc
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { RadioGroup } from '@devup-ui/components'
+
+export default function Default() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
new file mode 100644
index 00000000..da4e453b
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { RadioGroup } from '@devup-ui/components'
+
+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' },
+      ]}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
new file mode 100644
index 00000000..7960f774
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Select,
+  SelectContainer,
+  SelectOption,
+  SelectTrigger,
+} from '@devup-ui/components'
+
+export default function Checkbox() {
+  const [value, setValue] = useState<string[]>([])
+
+  const handleChange = (nextValue: string) => {
+    if (value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
+  return (
+    <Select onChange={handleChange} type="checkbox" value={value}>
+      <SelectTrigger>
+        {value.length > 0 ? value.join(', ') : 'Select options'}
+      </SelectTrigger>
+      <SelectContainer showConfirmButton>
+        <SelectOption value="option1">Option 1</SelectOption>
+        <SelectOption value="option2">Option 2</SelectOption>
+        <SelectOption value="option3">Option 3</SelectOption>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
new file mode 100644
index 00000000..d4c2aa2a
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import {
+  Select,
+  SelectContainer,
+  SelectOption,
+  SelectTrigger,
+} from '@devup-ui/components'
+
+export default function Default() {
+  return (
+    <Select>
+      <SelectTrigger>Select an option</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="option1">Option 1</SelectOption>
+        <SelectOption value="option2">Option 2</SelectOption>
+        <SelectOption value="option3">Option 3</SelectOption>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
new file mode 100644
index 00000000..02b0d659
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Select,
+  SelectContainer,
+  SelectOption,
+  SelectTrigger,
+} from '@devup-ui/components'
+
+export default function Radio() {
+  const [value, setValue] = useState('')
+
+  return (
+    <Select onChange={setValue} type="radio" value={value}>
+      <SelectTrigger>{value || 'Select an option'}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="option1">Option 1</SelectOption>
+        <SelectOption value="option2">Option 2</SelectOption>
+        <SelectOption value="option3">Option 3</SelectOption>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
new file mode 100644
index 00000000..bf8a7a04
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Select } from '@devup-ui/components'
+
+export default function WithOptions() {
+  return (
+    <Select
+      options={[
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3', disabled: true },
+      ]}
+    >
+      Select with options prop
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
new file mode 100644
index 00000000..3661c341
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '@devup-ui/components'
+
+export default function Default() {
+  return (
+    <Stepper>
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
new file mode 100644
index 00000000..5d77ee7a
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '@devup-ui/components'
+
+export default function MinMax() {
+  return (
+    <Stepper defaultValue={5} max={10} min={0}>
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
new file mode 100644
index 00000000..3056b828
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '@devup-ui/components'
+
+export default function TextType() {
+  return (
+    <Stepper defaultValue={5} type="text">
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
new file mode 100644
index 00000000..e8877fa1
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Input } from '@devup-ui/components'
+
+export default function Default() {
+  return <Input placeholder="Enter text here" />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
new file mode 100644
index 00000000..78f80bd1
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Input } from '@devup-ui/components'
+
+export default function Disabled() {
+  return <Input disabled placeholder="Disabled input" />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
new file mode 100644
index 00000000..3235c750
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Input } from '@devup-ui/components'
+
+export default function Error() {
+  return <Input error errorMessage="This field is required" placeholder="Enter text" />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
new file mode 100644
index 00000000..2a7f88da
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Input } from '@devup-ui/components'
+
+function SearchIcon() {
+  return (
+    <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  )
+}
+
+export default function WithIcon() {
+  return <Input icon={<SearchIcon />} placeholder="Search..." />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
new file mode 100644
index 00000000..00abccc9
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Toggle } from '@devup-ui/components'
+
+export default function Colors() {
+  return <Toggle colors={{ primary: '#10B981' }} defaultValue />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
new file mode 100644
index 00000000..448ad8bb
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Toggle } from '@devup-ui/components'
+
+export default function Default() {
+  return <Toggle />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
new file mode 100644
index 00000000..e119cb75
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { Flex } from '@devup-ui/react'
+import { Toggle } from '@devup-ui/components'
+
+export default function Disabled() {
+  return (
+    <Flex gap="16px">
+      <Toggle disabled />
+      <Toggle defaultValue disabled />
+    </Flex>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
new file mode 100644
index 00000000..3bf52878
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Toggle } from '@devup-ui/components'
+
+export default function Switch() {
+  return <Toggle variant="switch" />
+}

From 9226ab8d4bd2686accf2a6a0c7365fc03e29d82c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 15:55:28 +0000
Subject: [PATCH 3/7] Add descriptions to demo examples

Add JSDoc-style comments to all demo files that are displayed as
documentation in the component pages. Each demo now includes:
- A title (e.g., ## Default, ## Colors)
- A description explaining the feature and usage

Components updated:
- Checkbox: Default, Checked, Disabled, Colors
- Textbox: Default, Error, Disabled, WithIcon
- Toggle: Default, Switch, Disabled, Colors
- Stepper: Default, TextType, MinMax
- Radio: Default, ButtonVariant, Column, Disabled
- Select: Default, Radio, Checkbox, WithOptions
---
 .../components/[component]/checkbox/demo/Checked.tsx         | 5 +++++
 .../(detail)/components/[component]/checkbox/demo/Colors.tsx | 5 +++++
 .../components/[component]/checkbox/demo/Default.tsx         | 4 ++++
 .../components/[component]/checkbox/demo/Disabled.tsx        | 5 +++++
 .../components/[component]/radio/demo/ButtonVariant.tsx      | 5 +++++
 .../(detail)/components/[component]/radio/demo/Column.tsx    | 5 +++++
 .../(detail)/components/[component]/radio/demo/Default.tsx   | 5 +++++
 .../(detail)/components/[component]/radio/demo/Disabled.tsx  | 5 +++++
 .../(detail)/components/[component]/select/demo/Checkbox.tsx | 5 +++++
 .../(detail)/components/[component]/select/demo/Default.tsx  | 5 +++++
 .../(detail)/components/[component]/select/demo/Radio.tsx    | 5 +++++
 .../components/[component]/select/demo/WithOptions.tsx       | 5 +++++
 .../(detail)/components/[component]/stepper/demo/Default.tsx | 5 +++++
 .../(detail)/components/[component]/stepper/demo/MinMax.tsx  | 5 +++++
 .../components/[component]/stepper/demo/TextType.tsx         | 5 +++++
 .../(detail)/components/[component]/textbox/demo/Default.tsx | 4 ++++
 .../components/[component]/textbox/demo/Disabled.tsx         | 5 +++++
 .../(detail)/components/[component]/textbox/demo/Error.tsx   | 5 +++++
 .../components/[component]/textbox/demo/WithIcon.tsx         | 5 +++++
 .../(detail)/components/[component]/toggle/demo/Colors.tsx   | 5 +++++
 .../(detail)/components/[component]/toggle/demo/Default.tsx  | 5 +++++
 .../(detail)/components/[component]/toggle/demo/Disabled.tsx | 5 +++++
 .../(detail)/components/[component]/toggle/demo/Switch.tsx   | 5 +++++
 23 files changed, 113 insertions(+)

diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
index e9ad267d..c4ac81a8 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Checked
+ * Use `defaultChecked` prop to set the initial checked state for uncontrolled usage,
+ * or use `checked` prop for controlled state management.
+ */
 'use client'
 
 import { Checkbox } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
index 7ed4cad9..9c813f70 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Colors
+ * Pass an object containing color tokens into `colors` prop. You can customize the checkbox
+ * appearance using `primary`, `border`, `text`, `inputBg`, and `checkIcon` color values.
+ */
 'use client'
 
 import { Checkbox } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
index d9961bc4..3f83cb0f 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
@@ -1,3 +1,7 @@
+/**
+ * ## Default
+ * Basic checkbox with a label. Users can click to toggle the checked state.
+ */
 'use client'
 
 import { Checkbox } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
index 8a7f3fc0..84078263 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Disabled
+ * Set `disabled` prop to prevent user interaction. The checkbox will have a muted appearance
+ * and cannot be toggled.
+ */
 'use client'
 
 import { VStack } from '@devup-ui/react'
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
index 05a77c88..ca78b1a5 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Button Variant
+ * Set `variant="button"` to display radio options as a segmented button group.
+ * Options are displayed inline with connected borders.
+ */
 'use client'
 
 import { RadioGroup } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
index 923baf4b..b5ac060a 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Column Direction
+ * Set `direction="column"` to stack radio buttons vertically.
+ * Default direction is `"row"` which displays options horizontally.
+ */
 'use client'
 
 import { RadioGroup } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
index 2bcf52fc..4784c1b7 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Default
+ * Use `RadioGroup` with an `options` array to create a group of radio buttons.
+ * Only one option can be selected at a time.
+ */
 'use client'
 
 import { RadioGroup } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
index da4e453b..aac9d1d9 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Disabled
+ * Set `disabled` prop to prevent user interaction with all radio options.
+ * All radios will have a muted appearance and cannot be selected.
+ */
 'use client'
 
 import { RadioGroup } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
index 7960f774..763de24e 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Checkbox Type
+ * Set `type="checkbox"` for multiple selection mode. Users can select multiple options,
+ * and use `showConfirmButton` on the container to add a confirm button.
+ */
 'use client'
 
 import { useState } from 'react'
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
index d4c2aa2a..84d8aa33 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Default
+ * Compound component with trigger and dropdown. Use `SelectTrigger` to create the button,
+ * `SelectContainer` for the dropdown, and `SelectOption` for each option.
+ */
 'use client'
 
 import {
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
index 02b0d659..543cb1ae 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Radio Type
+ * Set `type="radio"` for single selection mode. The selected option is highlighted
+ * with a check icon, and the dropdown closes after selection.
+ */
 'use client'
 
 import { useState } from 'react'
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
index bf8a7a04..fe96d8dc 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## With Options Prop
+ * Use the `options` prop as a shorthand to define options without compound components.
+ * Each option can have `label`, `value`, `disabled`, and `onClick` properties.
+ */
 'use client'
 
 import { Select } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
index 3661c341..ca721ed7 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Default
+ * Compound component with editable input. Use `StepperContainer` to wrap the buttons and input,
+ * and compose with `StepperDecreaseButton`, `StepperInput`, and `StepperIncreaseButton`.
+ */
 'use client'
 
 import {
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
index 5d77ee7a..d640bd9b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Min/Max
+ * Set `min` and `max` props to limit the value range. The decrease button is disabled
+ * at min value, and the increase button is disabled at max value.
+ */
 'use client'
 
 import {
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
index 3056b828..be69b1fd 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Text Type
+ * Set `type="text"` to display the value as read-only text instead of an editable input.
+ * Users can only change the value using the increase/decrease buttons.
+ */
 'use client'
 
 import {
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
index e8877fa1..0ce58bc2 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
@@ -1,3 +1,7 @@
+/**
+ * ## Default
+ * Basic text input with placeholder. Includes a clear button that appears when the input has value.
+ */
 'use client'
 
 import { Input } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
index 78f80bd1..fe77c879 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Disabled
+ * Set `disabled` prop to prevent user interaction. The input will have a muted appearance
+ * and the clear button will be hidden.
+ */
 'use client'
 
 import { Input } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
index 3235c750..95b10da1 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Error
+ * Set `error` prop to display the input in an error state with a red border.
+ * Use `errorMessage` prop to show a validation message below the input.
+ */
 'use client'
 
 import { Input } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
index 2a7f88da..32384354 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## With Icon
+ * Pass a React node to the `icon` prop to display an icon on the left side of the input.
+ * Useful for search fields or inputs with visual context.
+ */
 'use client'
 
 import { Input } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
index 00abccc9..e8585696 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Colors
+ * Pass an object containing color tokens into `colors` prop. Customize the toggle appearance
+ * using `primary`, `bg`, `hoverBg`, `primaryHoverBg`, `disabledBg`, and more.
+ */
 'use client'
 
 import { Toggle } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
index 448ad8bb..52ab057d 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Default
+ * Basic toggle switch. Click to toggle between on and off states.
+ * Use `value` or `defaultValue` to control the toggle state.
+ */
 'use client'
 
 import { Toggle } from '@devup-ui/components'
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
index e119cb75..64b6a19e 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Disabled
+ * Set `disabled` prop to prevent user interaction. The toggle will have a muted appearance
+ * and cannot be toggled.
+ */
 'use client'
 
 import { Flex } from '@devup-ui/react'
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
index 3bf52878..665ac559 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
@@ -1,3 +1,8 @@
+/**
+ * ## Switch Variant
+ * Set `variant="switch"` for an alternative visual style with a smaller track
+ * and a floating knob with hover outline effect.
+ */
 'use client'
 
 import { Toggle } from '@devup-ui/components'

From 429d765d030ca6ab8d5822369cbfdc09fb65fd97 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 16:03:16 +0000
Subject: [PATCH 4/7] Refactor demo files to match Button demo format

Update all demo files to follow the Button demo structure:
- Move imports before JSDoc comments
- Use **Title** format instead of ## Title
- Remove unnecessary 'use client' directives (keep only for useState usage)
- Improve demo examples with more visual variations

Components updated:
- Checkbox: Default, Checked, Disabled, Colors
- Textbox: Default, Error, Disabled, WithIcon
- Toggle: Default, Switch, Disabled, Colors
- Stepper: Default, TextType, MinMax
- Radio: Default, ButtonVariant, Column, Disabled
- Select: Default, Radio, Checkbox, WithOptions
---
 .../[component]/checkbox/demo/Checked.tsx     | 11 +++-----
 .../[component]/checkbox/demo/Colors.tsx      | 26 ++++++++++++-------
 .../[component]/checkbox/demo/Default.tsx     |  8 +++---
 .../[component]/checkbox/demo/Disabled.tsx    | 13 ++++------
 .../[component]/radio/demo/ButtonVariant.tsx  | 11 +++-----
 .../[component]/radio/demo/Column.tsx         | 11 +++-----
 .../[component]/radio/demo/Default.tsx        | 11 +++-----
 .../[component]/radio/demo/Disabled.tsx       | 11 +++-----
 .../[component]/select/demo/Checkbox.tsx      |  9 +++----
 .../[component]/select/demo/Default.tsx       | 11 +++-----
 .../[component]/select/demo/Radio.tsx         |  9 +++----
 .../[component]/select/demo/WithOptions.tsx   | 11 +++-----
 .../[component]/stepper/demo/Default.tsx      | 11 +++-----
 .../[component]/stepper/demo/MinMax.tsx       | 11 +++-----
 .../[component]/stepper/demo/TextType.tsx     | 11 +++-----
 .../[component]/textbox/demo/Default.tsx      |  8 +++---
 .../[component]/textbox/demo/Disabled.tsx     | 11 +++-----
 .../[component]/textbox/demo/Error.tsx        | 15 +++++------
 .../[component]/textbox/demo/WithIcon.tsx     | 19 ++++++++------
 .../[component]/toggle/demo/Colors.tsx        | 20 ++++++++------
 .../[component]/toggle/demo/Default.tsx       | 11 +++-----
 .../[component]/toggle/demo/Disabled.tsx      | 13 ++++------
 .../[component]/toggle/demo/Switch.tsx        | 11 +++-----
 23 files changed, 122 insertions(+), 161 deletions(-)

diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
index c4ac81a8..cd7f042b 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Checked
- * Use `defaultChecked` prop to set the initial checked state for uncontrolled usage,
- * or use `checked` prop for controlled state management.
- */
-'use client'
-
 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>
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
index 9c813f70..d58363d1 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
@@ -1,16 +1,22 @@
-/**
- * ## Colors
- * Pass an object containing color tokens into `colors` prop. You can customize the checkbox
- * appearance using `primary`, `border`, `text`, `inputBg`, and `checkIcon` color values.
- */
-'use client'
-
 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 (
-    <Checkbox colors={{ primary: '#10B981' }} defaultChecked>
-      Custom primary color
-    </Checkbox>
+    <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>
   )
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
index 3f83cb0f..a4947e25 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
@@ -1,11 +1,9 @@
+import { Checkbox } from '@devup-ui/components'
+
 /**
- * ## Default
+ * **Default**
  * Basic checkbox with a label. Users can click to toggle the checked state.
  */
-'use client'
-
-import { Checkbox } from '@devup-ui/components'
-
 export default function Default() {
   return <Checkbox>Agree to terms and conditions</Checkbox>
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
index 84078263..a60cc500 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
@@ -1,13 +1,10 @@
-/**
- * ## Disabled
- * Set `disabled` prop to prevent user interaction. The checkbox will have a muted appearance
- * and cannot be toggled.
- */
-'use client'
-
-import { VStack } from '@devup-ui/react'
 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">
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
index ca78b1a5..b590abf2 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Button Variant
- * Set `variant="button"` to display radio options as a segmented button group.
- * Options are displayed inline with connected borders.
- */
-'use client'
-
 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
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
index b5ac060a..8a3dacb1 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Column Direction
- * Set `direction="column"` to stack radio buttons vertically.
- * Default direction is `"row"` which displays options horizontally.
- */
-'use client'
-
 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
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
index 4784c1b7..43793e54 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Default
- * Use `RadioGroup` with an `options` array to create a group of radio buttons.
- * Only one option can be selected at a time.
- */
-'use client'
-
 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
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
index aac9d1d9..e354b5c4 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Disabled
- * Set `disabled` prop to prevent user interaction with all radio options.
- * All radios will have a muted appearance and cannot be selected.
- */
-'use client'
-
 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
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
index 763de24e..9a4e2133 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
@@ -1,8 +1,3 @@
-/**
- * ## Checkbox Type
- * Set `type="checkbox"` for multiple selection mode. Users can select multiple options,
- * and use `showConfirmButton` on the container to add a confirm button.
- */
 'use client'
 
 import { useState } from 'react'
@@ -13,6 +8,10 @@ import {
   SelectTrigger,
 } from '@devup-ui/components'
 
+/**
+ * **Checkbox Type**
+ * Use `type="checkbox"` for multiple selection mode. Users can select multiple options, and use `showConfirmButton` on the container to add a confirm button.
+ */
 export default function Checkbox() {
   const [value, setValue] = useState<string[]>([])
 
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
index 84d8aa33..adcd7e2f 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
@@ -1,10 +1,3 @@
-/**
- * ## Default
- * Compound component with trigger and dropdown. Use `SelectTrigger` to create the button,
- * `SelectContainer` for the dropdown, and `SelectOption` for each option.
- */
-'use client'
-
 import {
   Select,
   SelectContainer,
@@ -12,6 +5,10 @@ import {
   SelectTrigger,
 } from '@devup-ui/components'
 
+/**
+ * **Default**
+ * Compound component with trigger and dropdown. Use `SelectTrigger` to create the button, `SelectContainer` for the dropdown, and `SelectOption` for each option.
+ */
 export default function Default() {
   return (
     <Select>
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
index 543cb1ae..ea28ba4e 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
@@ -1,8 +1,3 @@
-/**
- * ## Radio Type
- * Set `type="radio"` for single selection mode. The selected option is highlighted
- * with a check icon, and the dropdown closes after selection.
- */
 'use client'
 
 import { useState } from 'react'
@@ -13,6 +8,10 @@ import {
   SelectTrigger,
 } from '@devup-ui/components'
 
+/**
+ * **Radio Type**
+ * Use `type="radio"` for single selection mode. The selected option is highlighted with a check icon, and the dropdown closes after selection.
+ */
 export default function Radio() {
   const [value, setValue] = useState('')
 
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
index fe96d8dc..bee969e9 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
@@ -1,12 +1,9 @@
-/**
- * ## With Options Prop
- * Use the `options` prop as a shorthand to define options without compound components.
- * Each option can have `label`, `value`, `disabled`, and `onClick` properties.
- */
-'use client'
-
 import { Select } from '@devup-ui/components'
 
+/**
+ * **Options**
+ * Use the `options` prop as a shorthand to define options without compound components. Each option can have `label`, `value`, `disabled`, and `onClick` properties.
+ */
 export default function WithOptions() {
   return (
     <Select
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
index ca721ed7..4b64d9ba 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
@@ -1,10 +1,3 @@
-/**
- * ## Default
- * Compound component with editable input. Use `StepperContainer` to wrap the buttons and input,
- * and compose with `StepperDecreaseButton`, `StepperInput`, and `StepperIncreaseButton`.
- */
-'use client'
-
 import {
   Stepper,
   StepperContainer,
@@ -13,6 +6,10 @@ import {
   StepperInput,
 } from '@devup-ui/components'
 
+/**
+ * **Default**
+ * Compound component with editable input. Use `StepperContainer` to wrap the buttons and input, and compose with `StepperDecreaseButton`, `StepperInput`, and `StepperIncreaseButton`.
+ */
 export default function Default() {
   return (
     <Stepper>
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
index d640bd9b..4be36b10 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
@@ -1,10 +1,3 @@
-/**
- * ## Min/Max
- * Set `min` and `max` props to limit the value range. The decrease button is disabled
- * at min value, and the increase button is disabled at max value.
- */
-'use client'
-
 import {
   Stepper,
   StepperContainer,
@@ -13,6 +6,10 @@ import {
   StepperInput,
 } from '@devup-ui/components'
 
+/**
+ * **Min & Max**
+ * Use `min` and `max` props to limit the value range. The decrease button is disabled at min value, and the increase button is disabled at max value.
+ */
 export default function MinMax() {
   return (
     <Stepper defaultValue={5} max={10} min={0}>
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
index be69b1fd..325f8915 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
@@ -1,10 +1,3 @@
-/**
- * ## Text Type
- * Set `type="text"` to display the value as read-only text instead of an editable input.
- * Users can only change the value using the increase/decrease buttons.
- */
-'use client'
-
 import {
   Stepper,
   StepperContainer,
@@ -13,6 +6,10 @@ import {
   StepperInput,
 } from '@devup-ui/components'
 
+/**
+ * **Type**
+ * Use `type="text"` to display the value as read-only text instead of an editable input. Users can only change the value using the increase/decrease buttons.
+ */
 export default function TextType() {
   return (
     <Stepper defaultValue={5} type="text">
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
index 0ce58bc2..e2c71cb6 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
@@ -1,11 +1,9 @@
+import { Input } from '@devup-ui/components'
+
 /**
- * ## Default
+ * **Default**
  * Basic text input with placeholder. Includes a clear button that appears when the input has value.
  */
-'use client'
-
-import { Input } from '@devup-ui/components'
-
 export default function Default() {
   return <Input placeholder="Enter text here" />
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
index fe77c879..3debcb0e 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Disabled
- * Set `disabled` prop to prevent user interaction. The input will have a muted appearance
- * and the clear button will be hidden.
- */
-'use client'
-
 import { Input } from '@devup-ui/components'
 
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction. The input will have a muted appearance and the clear button will be hidden.
+ */
 export default function Disabled() {
   return <Input disabled placeholder="Disabled input" />
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
index 95b10da1..55e9daa8 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
@@ -1,12 +1,11 @@
-/**
- * ## Error
- * Set `error` prop to display the input in an error state with a red border.
- * Use `errorMessage` prop to show a validation message below the input.
- */
-'use client'
-
 import { Input } from '@devup-ui/components'
 
+/**
+ * **Error**
+ * Use `error` prop to display the input in an error state with a red border. Use `errorMessage` prop to show a validation message below the input.
+ */
 export default function Error() {
-  return <Input error errorMessage="This field is required" placeholder="Enter text" />
+  return (
+    <Input error errorMessage="This field is required" placeholder="Enter text" />
+  )
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
index 32384354..9e8997cc 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
@@ -1,15 +1,14 @@
-/**
- * ## With Icon
- * Pass a React node to the `icon` prop to display an icon on the left side of the input.
- * Useful for search fields or inputs with visual context.
- */
-'use client'
-
 import { Input } from '@devup-ui/components'
 
 function SearchIcon() {
   return (
-    <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
         stroke="currentColor"
@@ -21,6 +20,10 @@ function SearchIcon() {
   )
 }
 
+/**
+ * **Icon**
+ * Pass a React node to the `icon` prop to display an icon on the left side of the input. Useful for search fields or inputs with visual context.
+ */
 export default function WithIcon() {
   return <Input icon={<SearchIcon />} placeholder="Search..." />
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
index e8585696..6596dedf 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
@@ -1,12 +1,16 @@
-/**
- * ## Colors
- * Pass an object containing color tokens into `colors` prop. Customize the toggle appearance
- * using `primary`, `bg`, `hoverBg`, `primaryHoverBg`, `disabledBg`, and more.
- */
-'use client'
-
 import { Toggle } from '@devup-ui/components'
+import { Flex } from '@devup-ui/react'
 
+/**
+ * **Colors**
+ * Pass in an object containing color tokens into `colors` prop. Customize the toggle appearance using `primary`, `bg`, `hoverBg`, `primaryHoverBg`, `disabledBg`, and more.
+ */
 export default function Colors() {
-  return <Toggle colors={{ primary: '#10B981' }} defaultValue />
+  return (
+    <Flex gap="16px">
+      <Toggle colors={{ primary: '#10B981' }} defaultValue />
+      <Toggle colors={{ primary: 'orange' }} defaultValue />
+      <Toggle colors={{ primary: 'steelblue' }} defaultValue />
+    </Flex>
+  )
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
index 52ab057d..24328a79 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Default
- * Basic toggle switch. Click to toggle between on and off states.
- * Use `value` or `defaultValue` to control the toggle state.
- */
-'use client'
-
 import { Toggle } from '@devup-ui/components'
 
+/**
+ * **Default**
+ * Basic toggle switch. Click to toggle between on and off states. Use `value` or `defaultValue` to control the toggle state.
+ */
 export default function Default() {
   return <Toggle />
 }
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
index 64b6a19e..20147152 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
@@ -1,13 +1,10 @@
-/**
- * ## Disabled
- * Set `disabled` prop to prevent user interaction. The toggle will have a muted appearance
- * and cannot be toggled.
- */
-'use client'
-
-import { Flex } from '@devup-ui/react'
 import { Toggle } from '@devup-ui/components'
+import { Flex } from '@devup-ui/react'
 
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction. The toggle will have a muted appearance and cannot be toggled.
+ */
 export default function Disabled() {
   return (
     <Flex gap="16px">
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
index 665ac559..fd29a3a2 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
@@ -1,12 +1,9 @@
-/**
- * ## Switch Variant
- * Set `variant="switch"` for an alternative visual style with a smaller track
- * and a floating knob with hover outline effect.
- */
-'use client'
-
 import { Toggle } from '@devup-ui/components'
 
+/**
+ * **Variant**
+ * Use `variant="switch"` for an alternative visual style with a smaller track and a floating knob with hover outline effect.
+ */
 export default function Switch() {
   return <Toggle variant="switch" />
 }

From ab2129acbbe1c77c2e935e6ccc051313bf6ffbdd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 16:08:28 +0000
Subject: [PATCH 5/7] Reorder demo files with numeric prefixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add numeric prefixes to demo filenames to ensure proper ordering:
- 1_Default always comes first
- Followed by feature-specific demos (Variant, Type, etc.)
- Disabled/Colors typically come last

File ordering:
- Checkbox: Default → Checked → Disabled → Colors
- Textbox: Default → Error → Disabled → Icon
- Toggle: Default → Variant → Disabled → Colors
- Stepper: Default → Type → MinMax
- Radio: Default → Variant → Direction → Disabled
- Select: Default → Radio → Checkbox → Options
---
 .../[component]/checkbox/demo/{Default.tsx => 1_Default.tsx}      | 0
 .../[component]/checkbox/demo/{Checked.tsx => 2_Checked.tsx}      | 0
 .../[component]/checkbox/demo/{Disabled.tsx => 3_Disabled.tsx}    | 0
 .../[component]/checkbox/demo/{Colors.tsx => 4_Colors.tsx}        | 0
 .../[component]/radio/demo/{Default.tsx => 1_Default.tsx}         | 0
 .../[component]/radio/demo/{ButtonVariant.tsx => 2_Variant.tsx}   | 0
 .../[component]/radio/demo/{Column.tsx => 3_Direction.tsx}        | 0
 .../[component]/radio/demo/{Disabled.tsx => 4_Disabled.tsx}       | 0
 .../[component]/select/demo/{Default.tsx => 1_Default.tsx}        | 0
 .../components/[component]/select/demo/{Radio.tsx => 2_Radio.tsx} | 0
 .../[component]/select/demo/{Checkbox.tsx => 3_Checkbox.tsx}      | 0
 .../[component]/select/demo/{WithOptions.tsx => 4_Options.tsx}    | 0
 .../[component]/stepper/demo/{Default.tsx => 1_Default.tsx}       | 0
 .../[component]/stepper/demo/{TextType.tsx => 2_Type.tsx}         | 0
 .../[component]/stepper/demo/{MinMax.tsx => 3_MinMax.tsx}         | 0
 .../[component]/textbox/demo/{Default.tsx => 1_Default.tsx}       | 0
 .../[component]/textbox/demo/{Error.tsx => 2_Error.tsx}           | 0
 .../[component]/textbox/demo/{Disabled.tsx => 3_Disabled.tsx}     | 0
 .../[component]/textbox/demo/{WithIcon.tsx => 4_Icon.tsx}         | 0
 .../[component]/toggle/demo/{Default.tsx => 1_Default.tsx}        | 0
 .../[component]/toggle/demo/{Switch.tsx => 2_Variant.tsx}         | 0
 .../[component]/toggle/demo/{Disabled.tsx => 3_Disabled.tsx}      | 0
 .../[component]/toggle/demo/{Colors.tsx => 4_Colors.tsx}          | 0
 23 files changed, 0 insertions(+), 0 deletions(-)
 rename apps/landing/src/app/(detail)/components/[component]/checkbox/demo/{Default.tsx => 1_Default.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/checkbox/demo/{Checked.tsx => 2_Checked.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/checkbox/demo/{Disabled.tsx => 3_Disabled.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/checkbox/demo/{Colors.tsx => 4_Colors.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/radio/demo/{Default.tsx => 1_Default.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/radio/demo/{ButtonVariant.tsx => 2_Variant.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/radio/demo/{Column.tsx => 3_Direction.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/radio/demo/{Disabled.tsx => 4_Disabled.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/select/demo/{Default.tsx => 1_Default.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/select/demo/{Radio.tsx => 2_Radio.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/select/demo/{Checkbox.tsx => 3_Checkbox.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/select/demo/{WithOptions.tsx => 4_Options.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/stepper/demo/{Default.tsx => 1_Default.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/stepper/demo/{TextType.tsx => 2_Type.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/stepper/demo/{MinMax.tsx => 3_MinMax.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/textbox/demo/{Default.tsx => 1_Default.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/textbox/demo/{Error.tsx => 2_Error.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/textbox/demo/{Disabled.tsx => 3_Disabled.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/textbox/demo/{WithIcon.tsx => 4_Icon.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/toggle/demo/{Default.tsx => 1_Default.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/toggle/demo/{Switch.tsx => 2_Variant.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/toggle/demo/{Disabled.tsx => 3_Disabled.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/toggle/demo/{Colors.tsx => 4_Colors.tsx} (100%)

diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/1_Default.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Default.tsx
rename to apps/landing/src/app/(detail)/components/[component]/checkbox/demo/1_Default.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/2_Checked.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Checked.tsx
rename to apps/landing/src/app/(detail)/components/[component]/checkbox/demo/2_Checked.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/3_Disabled.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Disabled.tsx
rename to apps/landing/src/app/(detail)/components/[component]/checkbox/demo/3_Disabled.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/4_Colors.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/checkbox/demo/Colors.tsx
rename to apps/landing/src/app/(detail)/components/[component]/checkbox/demo/4_Colors.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/1_Default.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/radio/demo/Default.tsx
rename to apps/landing/src/app/(detail)/components/[component]/radio/demo/1_Default.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/2_Variant.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/radio/demo/ButtonVariant.tsx
rename to apps/landing/src/app/(detail)/components/[component]/radio/demo/2_Variant.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/3_Direction.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/radio/demo/Column.tsx
rename to apps/landing/src/app/(detail)/components/[component]/radio/demo/3_Direction.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/4_Disabled.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/radio/demo/Disabled.tsx
rename to apps/landing/src/app/(detail)/components/[component]/radio/demo/4_Disabled.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/1_Default.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/select/demo/Default.tsx
rename to apps/landing/src/app/(detail)/components/[component]/select/demo/1_Default.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/select/demo/Radio.tsx
rename to apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/select/demo/Checkbox.tsx
rename to apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/4_Options.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/select/demo/WithOptions.tsx
rename to apps/landing/src/app/(detail)/components/[component]/select/demo/4_Options.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/1_Default.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/stepper/demo/Default.tsx
rename to apps/landing/src/app/(detail)/components/[component]/stepper/demo/1_Default.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/2_Type.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/stepper/demo/TextType.tsx
rename to apps/landing/src/app/(detail)/components/[component]/stepper/demo/2_Type.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/3_MinMax.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/stepper/demo/MinMax.tsx
rename to apps/landing/src/app/(detail)/components/[component]/stepper/demo/3_MinMax.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/1_Default.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/textbox/demo/Default.tsx
rename to apps/landing/src/app/(detail)/components/[component]/textbox/demo/1_Default.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/textbox/demo/Error.tsx
rename to apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/3_Disabled.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/textbox/demo/Disabled.tsx
rename to apps/landing/src/app/(detail)/components/[component]/textbox/demo/3_Disabled.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/4_Icon.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/textbox/demo/WithIcon.tsx
rename to apps/landing/src/app/(detail)/components/[component]/textbox/demo/4_Icon.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/1_Default.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/toggle/demo/Default.tsx
rename to apps/landing/src/app/(detail)/components/[component]/toggle/demo/1_Default.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/2_Variant.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/toggle/demo/Switch.tsx
rename to apps/landing/src/app/(detail)/components/[component]/toggle/demo/2_Variant.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/3_Disabled.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/toggle/demo/Disabled.tsx
rename to apps/landing/src/app/(detail)/components/[component]/toggle/demo/3_Disabled.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/4_Colors.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/toggle/demo/Colors.tsx
rename to apps/landing/src/app/(detail)/components/[component]/toggle/demo/4_Colors.tsx

From 533ef53a22279b19672be6767e8fd95437bcae81 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 16:17:29 +0000
Subject: [PATCH 6/7] Add numeric prefixes to Button demos and fix lint errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename Button demo files with numeric prefixes for consistent ordering:
  1_Variants → 2_Icon → 3_Danger → 4_Disabled → 5_Colors
- Fix ESLint errors in demo files
---
 .../button/demo/{Variants.tsx => 1_Variants.tsx}            | 0
 .../[component]/button/demo/{Icon.tsx => 2_Icon.tsx}        | 0
 .../[component]/button/demo/{Danger.tsx => 3_Danger.tsx}    | 0
 .../button/demo/{Disabled.tsx => 4_Disabled.tsx}            | 0
 .../[component]/button/demo/{Colors.tsx => 5_Colors.tsx}    | 0
 .../(detail)/components/[component]/select/demo/2_Radio.tsx | 2 +-
 .../components/[component]/select/demo/3_Checkbox.tsx       | 2 +-
 .../components/[component]/textbox/demo/2_Error.tsx         | 6 +++++-
 8 files changed, 7 insertions(+), 3 deletions(-)
 rename apps/landing/src/app/(detail)/components/[component]/button/demo/{Variants.tsx => 1_Variants.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/button/demo/{Icon.tsx => 2_Icon.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/button/demo/{Danger.tsx => 3_Danger.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/button/demo/{Disabled.tsx => 4_Disabled.tsx} (100%)
 rename apps/landing/src/app/(detail)/components/[component]/button/demo/{Colors.tsx => 5_Colors.tsx} (100%)

diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Variants.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/1_Variants.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Variants.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/1_Variants.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/2_Icon.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/2_Icon.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Danger.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/3_Danger.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Danger.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/3_Danger.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/4_Disabled.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Disabled.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/4_Disabled.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/5_Colors.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Colors.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/5_Colors.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
index ea28ba4e..a7e4af88 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { useState } from 'react'
 import {
   Select,
   SelectContainer,
   SelectOption,
   SelectTrigger,
 } from '@devup-ui/components'
+import { useState } from 'react'
 
 /**
  * **Radio Type**
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
index 9a4e2133..5d801786 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { useState } from 'react'
 import {
   Select,
   SelectContainer,
   SelectOption,
   SelectTrigger,
 } from '@devup-ui/components'
+import { useState } from 'react'
 
 /**
  * **Checkbox Type**
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
index 55e9daa8..234dcf8d 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
@@ -6,6 +6,10 @@ import { Input } from '@devup-ui/components'
  */
 export default function Error() {
   return (
-    <Input error errorMessage="This field is required" placeholder="Enter text" />
+    <Input
+      error
+      errorMessage="This field is required"
+      placeholder="Enter text"
+    />
   )
 }

From 6d9abb2e0571613dd1758461155748907a8ce479 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 16:23:28 +0000
Subject: [PATCH 7/7] Fix prettier formatting in Api.mdx files

---
 .../src/app/(detail)/components/[component]/radio/Api.mdx   | 6 ++++--
 .../src/app/(detail)/components/[component]/select/Api.mdx  | 5 +++--
 .../src/app/(detail)/components/[component]/stepper/Api.mdx | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
index 2e8383fe..402349c9 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
@@ -32,13 +32,15 @@ import { PropsTable } from '@/components/PropsTable'
     },
     {
       property: 'firstButton',
-      description: 'Whether this is the first button in a button group (only for button variant)',
+      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)',
+      description:
+        'Whether this is the last button in a button group (only for button variant)',
       type: '`boolean`',
       default: '`undefined`',
     },
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
index 2bfdbb43..d8623731 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
@@ -66,7 +66,8 @@ The root component that provides context for the select.
     },
     {
       property: 'options',
-      description: 'Shorthand for defining options without using compound components',
+      description:
+        'Shorthand for defining options without using compound components',
       type: '```{ label?: string; disabled?: boolean; value: string; showCheck?: boolean; onClick?: (value, e) => void }[]```',
       default: '`undefined`',
     },
@@ -122,7 +123,7 @@ The dropdown container that holds the options.
       property: 'confirmButtonText',
       description: 'Text for the confirm button',
       type: '`string`',
-      default: "`'DĖ'`",
+      default: "`'Dïŋ―'`",
     },
     {
       property: 'x',
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
index 8cbabd45..ab4c9205 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
@@ -48,7 +48,8 @@ The root component that provides context for the stepper.
     },
     {
       property: 'type',
-      description: 'Whether the value is editable via input or displayed as text',
+      description:
+        'Whether the value is editable via input or displayed as text',
       type: "`'input' | 'text'`",
       default: "`'input'`",
     },