ui-lab-registry 0.3.44 → 0.3.45

package/src/components/Checkbox/examples.json

@@ -1,12 +1,32 @@
 {
-  "01-basic-checkbox": {
-    "title": "Basic Checkbox",
-    "description": "A simple checkbox with a label. Use this as the standard checkbox input in your forms.",
-    "code": "'use client';\n\nimport React from 'react';\nimport { Checkbox } from 'ui-lab-components';\n\nexport default function Example() {\n  const [checked, setChecked] = React.useState(false);\n\n  return (\n    <Checkbox\n      checked={checked}\n      onChange={(e) => setChecked(e.target.checked)}\n      label=\"Accept terms and conditions\"\n    />\n  );\n}"
-  },
-  "02-checkbox-group-with-descriptions": {
-    "title": "Checkbox Group with Descriptions",
-    "description": "Multiple checkboxes grouped together as a settings panel. Each checkbox includes a label and helper text for context.",
-    "code": "'use client';\n\nimport React from 'react';\nimport { Checkbox, Card, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    push: false,\n    sms: false,\n    marketing: false,\n  });\n\n  const handleChange = (key: keyof typeof notifications) => (e: React.ChangeEvent<HTMLInputElement>) => {\n    setNotifications(prev => ({ ...prev, [key]: e.target.checked }));\n  };\n\n  return (\n    <Card>\n      <Card.Header>\n        <h3 className=\"text-lg font-medium text-foreground-100\">Notification Preferences</h3>\n        <p className=\"text-sm text-foreground-400\">Choose how you want to be notified.</p>\n      </Card.Header>\n      <Card.Body>\n        <Flex direction=\"column\" gap=\"lg\">\n          <Checkbox\n            checked={notifications.email}\n            onChange={handleChange('email')}\n            label=\"Email notifications\"\n            helperText=\"Receive updates about your account activity via email.\"\n          />\n          <Checkbox\n            checked={notifications.push}\n            onChange={handleChange('push')}\n            label=\"Push notifications\"\n            helperText=\"Get instant alerts on your device for important updates.\"\n          />\n          <Checkbox\n            checked={notifications.sms}\n            onChange={handleChange('sms')}\n            label=\"SMS notifications\"\n            helperText=\"Receive text messages for critical alerts and reminders.\"\n          />\n          <Checkbox\n            checked={notifications.marketing}\n            onChange={handleChange('marketing')}\n            label=\"Marketing emails\"\n            helperText=\"Stay informed about new features, tips, and special offers.\"\n          />\n        </Flex>\n      </Card.Body>\n    </Card>\n  );\n}"
+  "01-basic-states": {
+    "title": "Basic States",
+    "description": "The default checkbox states: unchecked, checked, disabled, and disabled checked.",
+    "code": "import { Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 280 }}>\n      <Checkbox id=\"basic-unchecked\" label=\"Unchecked\" />\n      <Checkbox id=\"basic-checked\" label=\"Checked\" defaultChecked />\n      <Checkbox id=\"basic-disabled\" label=\"Disabled\" disabled />\n      <Checkbox id=\"basic-disabled-checked\" label=\"Disabled checked\" disabled defaultChecked />\n    </Flex>\n  );\n}"
+  },
+  "02-helper-text": {
+    "title": "Helper and Error Text",
+    "description": "A labeled checkbox can include supporting text and an invalid state for form feedback.",
+    "code": "import { Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"lg\" style={{ width: 320 }}>\n      <Checkbox\n        id=\"helper-release-notes\"\n        label=\"Release notes\"\n        helper=\"Get a short product update when a new version ships.\"\n        defaultChecked\n      />\n      <Checkbox\n        id=\"helper-terms\"\n        label=\"Accept terms\"\n        helper=\"You must accept the terms before continuing.\"\n        helperTextError\n        aria-invalid=\"true\"\n      />\n    </Flex>\n  );\n}"
+  },
+  "03-controlled": {
+    "title": "Controlled",
+    "description": "Use checked and onChange when checkbox state is owned by the surrounding interface.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Button, Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [checked, setChecked] = useState(true);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <Checkbox\n        id=\"controlled-email\"\n        label=\"Email notifications\"\n        helper={checked ? 'Notifications are enabled.' : 'Notifications are paused.'}\n        checked={checked}\n        onChange={(event) => setChecked(event.currentTarget.checked)}\n      />\n      <Button variant=\"secondary\" onClick={() => setChecked((value) => !value)}>\n        {checked ? 'Turn off' : 'Turn on'}\n      </Button>\n    </Flex>\n  );\n}"
+  },
+  "04-group": {
+    "title": "Checkbox Group",
+    "description": "Use a small group when a user can select any number of related options.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Checkbox, Flex } from 'ui-lab-components';\n\nconst subscriptionOptions = [\n  'Product updates',\n  'Security alerts',\n  'Billing reminders',\n];\n\nexport default function Example() {\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(['Product updates', 'Security alerts'])\n  );\n\n  const toggleOption = (option: string) => {\n    setSelected((current) => {\n      const next = new Set(current);\n      next.has(option) ? next.delete(option) : next.add(option);\n      return next;\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <div>\n        <p className=\"text-sm font-medium text-foreground-100\">Subscriptions</p>\n        <p className=\"text-xs text-foreground-400\">Choose the emails this workspace receives.</p>\n      </div>\n      <Flex direction=\"column\" gap=\"sm\">\n        {subscriptionOptions.map((option) => (\n          <Checkbox\n            key={option}\n            id={`subscription-${option.toLowerCase().replace(/ /g, '-')}`}\n            label={option}\n            checked={selected.has(option)}\n            onChange={() => toggleOption(option)}\n          />\n        ))}\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "05-indeterminate": {
+    "title": "Indeterminate",
+    "description": "A parent checkbox can show partial selection when only some child options are checked.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Checkbox, Divider, Flex } from 'ui-lab-components';\n\nconst tableColumns = ['Name', 'Email', 'Role', 'Last active'];\n\nexport default function Example() {\n  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(\n    new Set(['Name', 'Email'])\n  );\n\n  const allSelected = visibleColumns.size === tableColumns.length;\n  const isIndeterminate = visibleColumns.size > 0 && !allSelected;\n\n  const toggleAll = () => {\n    setVisibleColumns(allSelected ? new Set() : new Set(tableColumns));\n  };\n\n  const toggleColumn = (column: string) => {\n    setVisibleColumns((current) => {\n      const next = new Set(current);\n      next.has(column) ? next.delete(column) : next.add(column);\n      return next;\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 280 }}>\n      <Checkbox\n        id=\"columns-all\"\n        label=\"Show all columns\"\n        checked={allSelected}\n        isIndeterminate={isIndeterminate}\n        onChange={toggleAll}\n      />\n      <Divider />\n      <Flex direction=\"column\" gap=\"sm\" styles={{ root: 'pl-8' }}>\n        {tableColumns.map((column) => (\n          <Checkbox\n            key={column}\n            id={`column-${column.toLowerCase().replace(/ /g, '-')}`}\n            label={column}\n            checked={visibleColumns.has(column)}\n            onChange={() => toggleColumn(column)}\n          />\n        ))}\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "06-consent-form": {
+    "title": "Consent Form",
+    "description": "A required checkbox can gate a form action while optional choices remain independent.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Button, Checkbox, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [accepted, setAccepted] = useState(false);\n  const [updates, setUpdates] = useState(false);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 320 }}>\n      <Checkbox\n        id=\"consent-terms\"\n        label=\"I agree to the terms\"\n        helper=\"Required to create a workspace.\"\n        checked={accepted}\n        onChange={(event) => setAccepted(event.currentTarget.checked)}\n      />\n      <Checkbox\n        id=\"consent-updates\"\n        label=\"Send product updates\"\n        checked={updates}\n        onChange={(event) => setUpdates(event.currentTarget.checked)}\n      />\n      <Button variant=\"primary\" isDisabled={!accepted} styles={{ root: 'w-full' }}>\n        Continue\n      </Button>\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Checkbox/index.tsx

@@ -1,29 +1,26 @@
 import React from 'react';
 import { Checkbox } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-checkbox.js';
-import Example2, { metadata as metadata2 } from './examples/02-checkbox-group-with-descriptions.js';
+import Example1, { metadata as metadata1 } from './examples/01-basic-states.js';
+import Example2, { metadata as metadata2 } from './examples/02-helper-text.js';
+import Example3, { metadata as metadata3 } from './examples/03-controlled.js';
+import Example4, { metadata as metadata4 } from './examples/04-group.js';
+import Example5, { metadata as metadata5 } from './examples/05-indeterminate.js';
+import Example6, { metadata as metadata6 } from './examples/06-consent-form.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaCheck } from 'react-icons/fa6';
 
 const examplesData = [
-  { id: '01-basic-checkbox', Component: Example1, metadata: metadata1 },
-  { id: '02-checkbox-group-with-descriptions', Component: Example2, metadata: metadata2 },
+  { id: '01-basic-states', Component: Example1, metadata: metadata1 },
+  { id: '02-helper-text', Component: Example2, metadata: metadata2 },
+  { id: '03-controlled', Component: Example3, metadata: metadata3 },
+  { id: '04-group', Component: Example4, metadata: metadata4 },
+  { id: '05-indeterminate', Component: Example5, metadata: metadata5 },
+  { id: '06-consent-form', Component: Example6, metadata: metadata6 },
 ];
 
 const checkboxControls: ControlDef[] = [
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: [
-      { label: 'Small', value: 'sm' },
-      { label: 'Medium', value: 'md' },
-      { label: 'Large', value: 'lg' },
-    ],
-    defaultValue: 'md',
-  },
   {
     name: 'checked',
     label: 'Checked',
@@ -80,7 +77,6 @@ export const checkboxDetail: ComponentDetail = {
       controls: checkboxControls,
       renderPreview: (props: any) => (
         <Checkbox
-          size={props.size as any}
           checked={props.checked ?? false}
           onChange={(e) => props.handleControlChange('checked', e.target.checked)}
           disabled={props.disabled}

package/src/components/Color/examples/01-basic-color-picker.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Color } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Color Trigger',
+  description: 'An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.',
+};
+
+export default function Example() {
+  return (
+    <div className="flex items-center justify-center">
+      <Color defaultValue="#3b82f6" size="md">
+        <Color.Trigger aria-label="Choose color" />
+      </Color>
+    </div>
+  );
+}

package/src/components/Color/examples/02-color-picker-opacity.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from 'react';
+import { Color } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Controlled Color Trigger',
+  description: 'A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.',
+};
+
+export default function Example() {
+  const [color, setColor] = useState('#ef4444');
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <Color
+        value={color}
+        onChange={setColor}
+        showOpacity={true}
+        size="md"
+      >
+        <Color.Trigger aria-label="Choose accent color" />
+      </Color>
+      <div className="text-sm text-foreground-400">
+        Selected: {color}
+      </div>
+    </div>
+  );
+}

package/src/components/Color/examples/03-color-picker-preview.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useState } from 'react';
+import { Color } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Inline Color Area',
+  description: 'Color.Area can be composed directly inside Color when the picker should stay visible.',
+};
+
+export default function Example() {
+  const [color, setColor] = useState('#8b5cf6');
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <Color
+        value={color}
+        onChange={setColor}
+        showPreview={true}
+        format="hex"
+        size="md"
+      >
+        <Color.Area />
+      </Color>
+    </div>
+  );
+}

package/src/components/Color/examples/04-color-slider-primitive.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from 'react';
+import { Color } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Standalone Color Slider',
+  description: 'Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.',
+};
+
+export default function Example() {
+  const [hue, setHue] = useState(215);
+  const [opacity, setOpacity] = useState(0.72);
+
+  const baseColor = `hsl(${hue} 100% 50%)`;
+  const previewColor = `hsl(${hue} 100% 50% / ${opacity})`;
+
+  return (
+    <div className="w-72 space-y-4">
+      <div className="flex items-center gap-3">
+        <div
+          className="h-10 w-10 rounded-sm border border-background-700"
+          style={{ backgroundColor: previewColor }}
+          aria-hidden="true"
+        />
+        <div className="min-w-0 flex-1 text-sm text-foreground-300">
+          <div>Hue {Math.round(hue)} deg</div>
+          <div>Opacity {Math.round(opacity * 100)}%</div>
+        </div>
+      </div>
+
+      <Color.Slider
+        aria-label="Accent hue"
+        value={hue}
+        onChange={setHue}
+      />
+
+      <Color.Slider
+        type="opacity"
+        aria-label="Accent opacity"
+        value={opacity}
+        onChange={setOpacity}
+        color={baseColor}
+      />
+    </div>
+  );
+}

package/src/components/Color/examples/index.ts

@@ -1,3 +1,11 @@
-export { default as BasicColor } from './01-basic-color.js';
-export { default as OpacitySlider } from './02-opacity-slider.js';
-export { default as FormatSwitching } from './03-format-switching.js';
+export { default as Example1 } from './01-basic-color-picker.js';
+export { metadata as metadata1 } from './01-basic-color-picker.js';
+
+export { default as Example2 } from './02-color-picker-opacity.js';
+export { metadata as metadata2 } from './02-color-picker-opacity.js';
+
+export { default as Example3 } from './03-color-picker-preview.js';
+export { metadata as metadata3 } from './03-color-picker-preview.js';
+
+export { default as Example4 } from './04-color-slider-primitive.js';
+export { metadata as metadata4 } from './04-color-slider-primitive.js';

package/src/components/Color/examples.json

@@ -1,12 +1,22 @@
 {
-  "01-basic-color": {
-    "title": "Basic Color",
-    "description": "A simple color component with default configuration showing hex format.",
-    "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#FF6B6B');\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n        <Color\n          value={color}\n          onChange={setColor}\n          format=\"hex\"\n          defaultValue=\"#FF6B6B\"\n        />\n      </div>\n    </div>\n  );\n}"
+  "01-basic-color-picker": {
+    "title": "Color Trigger",
+    "description": "An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.",
+    "code": "\"use client\";\n\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Color defaultValue=\"#3b82f6\" size=\"md\">\n        <Color.Trigger aria-label=\"Choose color\" />\n      </Color>\n    </div>\n  );\n}"
   },
-  "02-opacity-slider": {
-    "title": "Opacity Slider",
-    "description": "Color picker with opacity/alpha slider enabled for transparent color selection.",
-    "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n        <Color\n          value={color}\n          onChange={setColor}\n          showOpacity\n          format=\"rgb\"\n          defaultValue=\"rgba(106, 90, 205, 0.75)\"\n        />\n      </div>\n    </div>\n  );\n}"
+  "02-color-picker-opacity": {
+    "title": "Controlled Color Trigger",
+    "description": "A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#ef4444');\n\n  return (\n    <div className=\"flex flex-col gap-4 items-center\">\n      <Color\n        value={color}\n        onChange={setColor}\n        showOpacity={true}\n        size=\"md\"\n      >\n        <Color.Trigger aria-label=\"Choose accent color\" />\n      </Color>\n      <div className=\"text-sm text-foreground-400\">\n        Selected: {color}\n      </div>\n    </div>\n  );\n}"
+  },
+  "03-color-picker-preview": {
+    "title": "Inline Color Area",
+    "description": "Color.Area can be composed directly inside Color when the picker should stay visible.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#8b5cf6');\n\n  return (\n    <div className=\"flex flex-col gap-4 items-center\">\n      <Color\n        value={color}\n        onChange={setColor}\n        showPreview={true}\n        format=\"hex\"\n        size=\"md\"\n      >\n        <Color.Area />\n      </Color>\n    </div>\n  );\n}"
+  },
+  "04-color-slider-primitive": {
+    "title": "Standalone Color Slider",
+    "description": "Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [hue, setHue] = useState(215);\n  const [opacity, setOpacity] = useState(0.72);\n\n  const baseColor = `hsl(${hue} 100% 50%)`;\n  const previewColor = `hsl(${hue} 100% 50% / ${opacity})`;\n\n  return (\n    <div className=\"w-72 space-y-4\">\n      <div className=\"flex items-center gap-3\">\n        <div\n          className=\"h-10 w-10 rounded-sm border border-background-700\"\n          style={{ backgroundColor: previewColor }}\n          aria-hidden=\"true\"\n        />\n        <div className=\"min-w-0 flex-1 text-sm text-foreground-300\">\n          <div>Hue {Math.round(hue)} deg</div>\n          <div>Opacity {Math.round(opacity * 100)}%</div>\n        </div>\n      </div>\n\n      <Color.Slider\n        aria-label=\"Accent hue\"\n        value={hue}\n        onChange={setHue}\n      />\n\n      <Color.Slider\n        type=\"opacity\"\n        aria-label=\"Accent opacity\"\n        value={opacity}\n        onChange={setOpacity}\n        color={baseColor}\n      />\n    </div>\n  );\n}"
   }
 }

package/src/components/Color/index.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import { Color } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-color.js';
-import Example2, { metadata as metadata2 } from './examples/02-opacity-slider.js';
+import Example1, { metadata as metadata1 } from './examples/01-basic-color-picker.js';
+import Example2, { metadata as metadata2 } from './examples/02-color-picker-opacity.js';
+import Example3, { metadata as metadata3 } from './examples/03-color-picker-preview.js';
+import Example4, { metadata as metadata4 } from './examples/04-color-slider-primitive.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 // Define examplesData locally
 const examplesData = [
-  { id: '01-basic-color', Component: Example1, metadata: metadata1 },
-  { id: '02-opacity-slider', Component: Example2, metadata: metadata2 },
+  { id: '01-basic-color-picker', Component: Example1, metadata: metadata1 },
+  { id: '02-color-picker-opacity', Component: Example2, metadata: metadata2 },
+  { id: '03-color-picker-preview', Component: Example3, metadata: metadata3 },
+  { id: '04-color-slider-primitive', Component: Example4, metadata: metadata4 },
 ];
 
 const colorControls: ControlDef[] = [

package/src/components/Expand/examples/01-basic.tsx

@@ -0,0 +1,18 @@
+import { Expand } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Basic',
+  description: 'Preset mode using the title prop — the simplest way to render a labeled expandable section.',
+};
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700">
+      <Expand title="What is UI Lab?">
+        <p className="text-sm text-foreground-400 px-3 py-3">
+          UI Lab is a component library built for building beautiful, accessible interfaces with a consistent design system.
+        </p>
+      </Expand>
+    </div>
+  );
+}

package/src/components/Expand/examples/02-accordion.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from 'react';
+import { Expand } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Accordion',
+  description: 'Controlled expand group where only one item can be open at a time.',
+};
+
+const items = [
+  {
+    id: 'shipping',
+    title: 'Shipping & Delivery',
+    content: 'Standard shipping takes 3–5 business days. Express options are available at checkout for next-day delivery.',
+  },
+  {
+    id: 'returns',
+    title: 'Returns & Refunds',
+    content: 'Items can be returned within 30 days of purchase. Refunds are processed within 5–7 business days after we receive the item.',
+  },
+  {
+    id: 'warranty',
+    title: 'Warranty',
+    content: 'All products include a 12-month manufacturer warranty. Extended coverage can be purchased at checkout.',
+  },
+];
+
+export default function Example() {
+  const [open, setOpen] = useState<string | null>('shipping');
+
+  return (
+    <div className="w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700">
+      {items.map((item) => (
+        <Expand
+          key={item.id}
+          title={item.title}
+          isExpanded={open === item.id}
+          onExpandedChange={(expanded) => setOpen(expanded ? item.id : null)}
+        >
+          <p className="text-sm text-foreground-400 px-3 py-3">{item.content}</p>
+        </Expand>
+      ))}
+    </div>
+  );
+}

package/src/components/Expand/examples/03-custom-trigger.tsx

@@ -0,0 +1,30 @@
+import { Expand, Flex, Badge } from 'ui-lab-components';
+import { FaUser } from 'react-icons/fa6';
+
+export const metadata = {
+  title: 'Custom Trigger',
+  description: 'Compound mode with a fully composed trigger — custom icon, badge, and layout.',
+};
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-sm border border-background-700 rounded-sm">
+      <Expand>
+        <Expand.Trigger>
+          <Flex align="center" gap="xs" className="flex-1 px-3 py-2.5">
+            <FaUser className="text-foreground-400 text-xs shrink-0" />
+            <span className="text-sm font-medium">Account Settings</span>
+            <Badge className="ml-auto mr-2">New</Badge>
+          </Flex>
+          <Expand.Icon />
+        </Expand.Trigger>
+        <Expand.Divider />
+        <Expand.Content>
+          <Flex direction="column" gap="xs" className="px-3 py-3">
+            <p className="text-sm text-foreground-400">Manage your profile, password, and notification preferences.</p>
+          </Flex>
+        </Expand.Content>
+      </Expand>
+    </div>
+  );
+}

package/src/components/Expand/examples/04-directions.tsx

@@ -0,0 +1,33 @@
+import { Expand, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Reveal Directions',
+  description: 'Content can reveal from above or horizontally using the from prop on Expand.Content.',
+};
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="lg" className="w-full max-w-sm">
+      <div>
+        <p className="text-xs text-foreground-500 mb-2 px-1">from="above"</p>
+        <div className="border border-background-700 rounded-sm">
+          <Expand title="Reveal above">
+            <Expand.Content from="above">
+              <p className="text-sm text-foreground-400 px-3 py-3">This content slides in from above the trigger.</p>
+            </Expand.Content>
+          </Expand>
+        </div>
+      </div>
+      <div>
+        <p className="text-xs text-foreground-500 mb-2 px-1">from="right"</p>
+        <div className="border border-background-700 rounded-sm">
+          <Expand title="Reveal right">
+            <Expand.Content from="right">
+              <p className="text-sm text-foreground-400 px-3 py-3">Expands horizontally to the right.</p>
+            </Expand.Content>
+          </Expand>
+        </div>
+      </div>
+    </Flex>
+  );
+}

package/src/components/Expand/examples/05-settings-panel.tsx

@@ -0,0 +1,54 @@
+import { Expand, Flex } from 'ui-lab-components';
+import { FaGear, FaCode } from 'react-icons/fa6';
+
+export const metadata = {
+  title: 'Settings Panel',
+  description: 'Grouped settings sections using compound mode with icons, dividers, and a list of rows.',
+};
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700">
+      <Expand defaultExpanded>
+        <Expand.Trigger>
+          <Flex align="center" gap="xs" className="flex-1 px-3 py-2.5">
+            <FaGear className="text-foreground-400 text-xs" />
+            <span className="text-sm font-medium">General</span>
+          </Flex>
+          <Expand.Icon />
+        </Expand.Trigger>
+        <Expand.Divider />
+        <Expand.Content>
+          <Flex direction="column" className="divide-y divide-background-700">
+            {['Language', 'Timezone', 'Date format'].map((setting) => (
+              <Flex key={setting} justify="between" align="center" className="px-3 py-2.5">
+                <span className="text-sm text-foreground-300">{setting}</span>
+                <span className="text-xs text-foreground-500">Auto</span>
+              </Flex>
+            ))}
+          </Flex>
+        </Expand.Content>
+      </Expand>
+      <Expand>
+        <Expand.Trigger>
+          <Flex align="center" gap="xs" className="flex-1 px-3 py-2.5">
+            <FaCode className="text-foreground-400 text-xs" />
+            <span className="text-sm font-medium">Developer</span>
+          </Flex>
+          <Expand.Icon />
+        </Expand.Trigger>
+        <Expand.Divider />
+        <Expand.Content>
+          <Flex direction="column" className="divide-y divide-background-700">
+            {['API keys', 'Webhooks', 'Debug mode'].map((setting) => (
+              <Flex key={setting} justify="between" align="center" className="px-3 py-2.5">
+                <span className="text-sm text-foreground-300">{setting}</span>
+                <span className="text-xs text-foreground-500">Off</span>
+              </Flex>
+            ))}
+          </Flex>
+        </Expand.Content>
+      </Expand>
+    </div>
+  );
+}

package/src/components/Expand/examples/06-disabled.tsx

@@ -0,0 +1,19 @@
+import { Expand } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Disabled State',
+  description: 'An isDisabled section is visually dimmed and blocks interaction.',
+};
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-sm border border-background-700 rounded-sm divide-y divide-background-700">
+      <Expand title="Available section">
+        <p className="text-sm text-foreground-400 px-3 py-3">This section is accessible and can be expanded.</p>
+      </Expand>
+      <Expand title="Restricted section" isDisabled>
+        <p className="text-sm text-foreground-400 px-3 py-3">This content is not accessible.</p>
+      </Expand>
+    </div>
+  );
+}

package/src/components/Expand/examples/07-inline-info.tsx

@@ -0,0 +1,29 @@
+import { Expand, Flex } from 'ui-lab-components';
+import { FaCircleInfo } from 'react-icons/fa6';
+
+export const metadata = {
+  title: 'Inline Info',
+  description: 'A contextual disclosure pattern for surfacing supplementary information inline.',
+};
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-sm rounded-sm border border-background-700 bg-background-900">
+      <Expand>
+        <Expand.Trigger>
+          <Flex align="center" gap="xs" className="flex-1 px-3 py-2.5">
+            <FaCircleInfo className="text-foreground-400 text-xs shrink-0" />
+            <span className="text-sm font-medium text-foreground-200">Why do we collect this?</span>
+          </Flex>
+          <Expand.Icon />
+        </Expand.Trigger>
+        <Expand.Divider />
+        <Expand.Content>
+          <p className="text-sm text-foreground-400 px-3 py-3 leading-relaxed">
+            We use this information only to verify your identity and improve the service. It is never shared with third parties.
+          </p>
+        </Expand.Content>
+      </Expand>
+    </div>
+  );
+}

package/src/components/Expand/examples/index.ts

@@ -1,2 +1,20 @@
-export { default as Example1 } from './01-basic-expand.js';
-export { metadata as metadata1 } from './01-basic-expand.js';
+export { default as Example1 } from './01-basic.js';
+export { metadata as metadata1 } from './01-basic.js';
+
+export { default as Example2 } from './02-accordion.js';
+export { metadata as metadata2 } from './02-accordion.js';
+
+export { default as Example3 } from './03-custom-trigger.js';
+export { metadata as metadata3 } from './03-custom-trigger.js';
+
+export { default as Example4 } from './04-directions.js';
+export { metadata as metadata4 } from './04-directions.js';
+
+export { default as Example5 } from './05-settings-panel.js';
+export { metadata as metadata5 } from './05-settings-panel.js';
+
+export { default as Example6 } from './06-disabled.js';
+export { metadata as metadata6 } from './06-disabled.js';
+
+export { default as Example7 } from './07-inline-info.js';
+export { metadata as metadata7 } from './07-inline-info.js';