ui-lab-registry 0.3.44 → 0.3.46

package/src/components/Banner/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { Banner } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-banner.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaInfoCircle } from 'react-icons/fa';
 
-const examplesData = [
-  { id: '01-basic-banner', Component: Example1, metadata: metadata1 },
-];
 
 const bannerControls: ControlDef[] = [
   {
@@ -24,17 +18,6 @@ const bannerControls: ControlDef[] = [
     ],
     defaultValue: 'note',
   },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: [
-      { label: 'Small', value: 'sm' },
-      { label: 'Medium', value: 'md' },
-      { label: 'Large', value: 'lg' },
-    ],
-    defaultValue: 'md',
-  },
   {
     name: 'dismissible',
     label: 'Dismissible',
@@ -47,7 +30,7 @@ const bannerBasicCode = `import { Banner } from "ui-lab-components";
 
 export function Example() {
   return (
-    <Banner variant="note" size="md">
+    <Banner variant="note">
       This is an informational banner.
     </Banner>
   );
@@ -76,7 +59,7 @@ export const bannerDetail: ComponentDetail = {
       description: 'Adjust props to customize the banner',
       code: bannerBasicCode,
       preview: (
-        <Banner variant="note" size="md">
+        <Banner variant="note">
           This is an informational banner.
         </Banner>
       ),
@@ -84,16 +67,13 @@ export const bannerDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Banner
           variant={props.variant as any}
-          size={props.size as any}
           isDismissible={props.dismissible}
         >
           This is a {props.variant} banner.
         </Banner>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { bannerControls };
-export * from './examples/index.js';

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

@@ -1,10 +1 @@
-export { default as Example1 } from './01-variants.js'
-export { metadata as metadata1 } from './01-variants.js'
-export { default as Example2 } from './02-multi-actions.js'
-export { metadata as metadata2 } from './02-multi-actions.js'
-export { default as Example3 } from './03-joined-toggle.js'
-export { metadata as metadata3 } from './03-joined-toggle.js'
-export { default as Example4 } from './04-sub-stack-actions.js'
-export { metadata as metadata4 } from './04-sub-stack-actions.js'
-export { default as Example5 } from './05-split-action-button.js'
-export { metadata as metadata5 } from './05-split-action-button.js'
+// Button examples are served from @ui-lab-core/library (private registry)

package/src/components/Button/index.tsx

@@ -1,22 +1,6 @@
 import React from 'react';
 import { Button } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-variants.js';
-import Example2, { metadata as metadata2 } from './examples/02-multi-actions.js';
-import Example3, { metadata as metadata3 } from './examples/03-joined-toggle.js';
-import Example4, { metadata as metadata4 } from './examples/04-sub-stack-actions.js';
-import Example5, { metadata as metadata5 } from './examples/05-split-action-button.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-// Define examplesData locally
-const examplesData = [
-  { id: '01-variants', Component: Example1, metadata: metadata1 },
-  { id: '02-multi-actions', Component: Example2, metadata: metadata2 },
-  { id: '03-joined-toggle', Component: Example3, metadata: metadata3 },
-  { id: '04-sub-stack-actions', Component: Example4, metadata: metadata4 },
-  { id: '05-split-action-button', Component: Example5, metadata: metadata5 },
-];
 
 const buttonControls: ControlDef[] = [
   {
@@ -97,9 +81,7 @@ export const buttonDetail: ComponentDetail = {
         </Button>
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
 };
 
 export { buttonControls };
-export * from './examples/index.js';

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

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-card.js';
-export { metadata as metadata1 } from './01-basic-card.js';
+// Card examples are served from @ui-lab-core/library (private registry)

package/src/components/Card/examples.json

@@ -1,7 +1,17 @@
 {
-  "01-basic-card": {
-    "title": "Basic Card",
-    "description": "A simple card container with header, body, and footer sections. Use this to group related content in your interface.",
-    "code": "import { Card } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Card>\n      <Card.Header>\n        <h3>Card Title</h3>\n      </Card.Header>\n      <Card.Body>\n        <p>This is the card content area where you can place any information or components.</p>\n      </Card.Body>\n      <Card.Footer>\n        <p>Footer content</p>\n      </Card.Footer>\n    </Card>\n  );\n}"
+  "01-notification": {
+    "title": "Notification Card",
+    "description": "A status-driven card with a badge, body copy, and a footer action. Caller controls read state.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Card, Button, Flex, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  const [read, setRead] = useState(false);\n\n  return (\n    <Card style={{ width: 360, opacity: read ? 0.6 : 1, transition: 'opacity 0.2s' }}>\n      <Card.Header>\n        <Flex justify=\"between\" align=\"center\">\n          <span className=\"text-sm font-medium text-foreground-100\">Deployment failed</span>\n          <Badge variant=\"destructive\">Error</Badge>\n        </Flex>\n      </Card.Header>\n      <Card.Body>\n        <p className=\"text-sm text-foreground-400\">\n          The production deploy of <span className=\"text-foreground-200\">api-gateway</span> failed at step \"Run tests\". Check the logs for details.\n        </p>\n      </Card.Body>\n      <Card.Footer>\n        <Flex justify=\"between\" align=\"center\">\n          <span className=\"text-xs text-foreground-500\">2 minutes ago</span>\n          <Button size=\"sm\" variant=\"ghost\" onPress={() => setRead(true)}>\n            Mark as read\n          </Button>\n        </Flex>\n      </Card.Footer>\n    </Card>\n  );\n}"
+  },
+  "02-settings-panel": {
+    "title": "Settings Panel",
+    "description": "Card used as a settings section with a list of toggle rows and save/cancel actions in the footer.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Card, Button, Flex, Switch } from 'ui-lab-components';\n\nconst items = [\n  { label: 'Email alerts', description: 'Receive alerts via email' },\n  { label: 'Push notifications', description: 'Browser push notifications' },\n  { label: 'Weekly digest', description: 'Summary sent every Monday' },\n];\n\nexport default function Example() {\n  const [enabled, setEnabled] = useState(true);\n\n  return (\n    <Card style={{ width: 360 }}>\n      <Card.Header>\n        <span className=\"text-sm font-medium text-foreground-100\">Notifications</span>\n      </Card.Header>\n      <Card.Body className=\"space-y-4 py-4\">\n        {items.map((item) => (\n          <Flex key={item.label} justify=\"between\" align=\"center\">\n            <div>\n              <p className=\"text-sm text-foreground-100\">{item.label}</p>\n              <p className=\"text-xs text-foreground-500\">{item.description}</p>\n            </div>\n            <Switch\n              isSelected={enabled}\n              onChange={setEnabled}\n              aria-label={item.label}\n            />\n          </Flex>\n        ))}\n      </Card.Body>\n      <Card.Footer>\n        <Flex justify=\"end\" gap=\"xs\">\n          <Button size=\"sm\" variant=\"ghost\">Cancel</Button>\n          <Button size=\"sm\" variant=\"primary\">Save</Button>\n        </Flex>\n      </Card.Footer>\n    </Card>\n  );\n}"
+  },
+  "03-task-progress": {
+    "title": "Task Progress",
+    "description": "Card displaying a checklist with a progress bar in the header to summarize completion state.",
+    "code": "import { Card, Button, Flex, Progress } from 'ui-lab-components';\n\nconst tasks = [\n  { label: 'Design review', done: true },\n  { label: 'Write changelog', done: true },\n  { label: 'Update docs', done: false },\n  { label: 'Deploy to staging', done: false },\n];\n\nconst completed = tasks.filter((t) => t.done).length;\n\nexport default function Example() {\n  return (\n    <Card style={{ width: 360 }}>\n      <Card.Header>\n        <Flex justify=\"between\" align=\"center\">\n          <span className=\"text-sm font-medium text-foreground-100\">Release v2.4.0</span>\n          <span className=\"text-xs text-foreground-500\">{completed}/{tasks.length}</span>\n        </Flex>\n        <Progress value={(completed / tasks.length) * 100} className=\"mt-2\" />\n      </Card.Header>\n      <Card.Body className=\"py-3\">\n        <ul className=\"space-y-2\">\n          {tasks.map((task) => (\n            <li key={task.label} className=\"flex items-center gap-2 text-sm\">\n              <span className={task.done ? 'text-foreground-500 line-through' : 'text-foreground-200'}>\n                {task.label}\n              </span>\n            </li>\n          ))}\n        </ul>\n      </Card.Body>\n      <Card.Footer>\n        <Button size=\"sm\" variant=\"outline\" className=\"w-full\">View milestone</Button>\n      </Card.Footer>\n    </Card>\n  );\n}"
   }
 }

package/src/components/Card/index.tsx

@@ -1,13 +1,7 @@
 import React from 'react';
 import { Card } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-card.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-basic-card', Component: Example1, metadata: metadata1 },
-];
 
 const cardControls: ControlDef[] = [];
 
@@ -73,10 +67,8 @@ export const cardDetail: ComponentDetail = {
           </Card.Body>
         </Card>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { cardControls };
-export * from './examples/index.js';

package/src/components/Card/metadata.json

@@ -23,5 +23,47 @@
       "Semantic HTML structure",
       "Proper heading hierarchy"
     ]
+  },
+  "usage": {
+    "summary": "Use Card as a top-level surface that groups related content into a single visual panel.",
+    "whenToUse": [
+      "Page sections that need their own surface boundary",
+      "Standalone panels such as summaries, settings sections, and detail blocks",
+      "Collections of related content that benefit from header/body/footer structure"
+    ],
+    "whenNotToUse": [
+      "Inside other surfaced overlays like Modal, Popover, Confirm, or Menu",
+      "For simple internal spacing inside an existing surfaced component",
+      "As a generic replacement for every padded container"
+    ],
+    "rules": [
+      {
+        "type": "do",
+        "title": "Reserve Card for top-level surfaces",
+        "description": "Treat Card as the main boundary for a section or standalone block, not as a default inner wrapper."
+      },
+      {
+        "type": "avoid",
+        "title": "Do not nest Card inside overlay surfaces",
+        "description": "Avoid putting Card inside Modal, Popover, Confirm, or Menu because it creates double-surface chrome and weakens hierarchy.",
+        "relatedComponents": [
+          "modal",
+          "popover",
+          "confirm",
+          "menu"
+        ]
+      },
+      {
+        "type": "prefer",
+        "title": "Prefer layout primitives for internal grouping",
+        "description": "When content already sits inside a surfaced component, use Flex, Grid, Group, or the host component's slots to structure it instead of adding another Card.",
+        "relatedComponents": [
+          "flex",
+          "grid",
+          "group",
+          "modal"
+        ]
+      }
+    ]
   }
 }

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

@@ -1,5 +1 @@
-export { default as Example1 } from './01-basic-checkbox.js';
-export { metadata as metadata1 } from './01-basic-checkbox.js';
-
-export { default as Example2 } from './02-checkbox-group-with-descriptions.js';
-export { metadata as metadata2 } from './02-checkbox-group-with-descriptions.js';
+// Checkbox examples are served from @ui-lab-core/library (private registry)

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,8 @@
 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 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 },
-];
 
 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 +59,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}
@@ -88,7 +66,6 @@ export const checkboxDetail: ComponentDetail = {
         />
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
   variants: [
     {
@@ -109,4 +86,3 @@ export const checkboxDetail: ComponentDetail = {
 };
 
 export { checkboxControls };
-export * from './examples/index.js';

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

@@ -1,3 +1 @@
-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';
+// Color examples are served from @ui-lab-core/library (private registry)

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,16 +1,8 @@
 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 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 },
-];
 
 const colorControls: ControlDef[] = [
   {
@@ -96,10 +88,8 @@ export const colorDetail: ComponentDetail = {
           disabled={props.disabled}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { colorControls };
-export * from './examples/index.js';

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

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-command.js';
-export { metadata as metadata1 } from './01-basic-command.js';
+// Command examples are served from @ui-lab-core/library (private registry)

package/src/components/Command/index.tsx

@@ -1,13 +1,7 @@
 import React, { useState } from 'react';
 import { Command, Button, type Command as CommandType } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-command.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-basic-command', Component: Example1, metadata: metadata1 },
-];
 
 const commandControls: ControlDef[] = [
   {
@@ -191,8 +185,7 @@ export const commandDetail: ComponentDetail = {
       preview: <CommandPreview />,
       controls: commandControls,
       renderPreview: CommandRenderPreview,
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -206,4 +199,3 @@ export const commandDetail: ComponentDetail = {
 };
 
 export { commandControls };
-export * from './examples/index.js';

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

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-confirm.js';
-export { metadata as metadata1 } from './01-basic-confirm.js';
+// Confirm examples are served from @ui-lab-core/library (private registry)

package/src/components/Confirm/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { Confirm } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-confirm.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaCheck, FaX } from 'react-icons/fa6';
 
-const examplesData = [
-  { id: '01-basic-confirm', Component: Example1, metadata: metadata1 },
-];
 
 const confirmControls: ControlDef[] = [
   {
@@ -90,8 +84,7 @@ export const confirmDetail: ComponentDetail = {
           onCancel={() => console.log('Cancelled')}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -115,4 +108,3 @@ export const confirmDetail: ComponentDetail = {
 };
 
 export { confirmControls };
-export * from './examples/index.js';

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

@@ -1,11 +1 @@
-export { default as Example1 } from './01-basic-date.js'
-export { metadata as metadata1 } from './01-basic-date.js'
-
-export { default as Example2 } from './02-with-disabled-dates.js'
-export { metadata as metadata2 } from './02-with-disabled-dates.js'
-
-export { default as Example3 } from './03-controlled-mode.js'
-export { metadata as metadata3 } from './03-controlled-mode.js'
-
-export { default as Example4 } from './04-date-range.js'
-export { metadata as metadata4 } from './04-date-range.js'
+// Date examples are served from @ui-lab-core/library (private registry)

package/src/components/Date/index.tsx

@@ -1,15 +1,6 @@
 import React from 'react'
 import { Date } from 'ui-lab-components'
 import { ControlDef, ComponentDetail } from '@/types'
-import Example1, { metadata as metadata1 } from './examples/01-basic-date.js'
-import Example2, { metadata as metadata2 } from './examples/02-with-disabled-dates.js'
-import examplesJson from './examples.json' with { type: 'json' }
-import { loadComponentExamples } from '../../utils/load-component-examples.js'
-
-const examplesData = [
-  { id: '01-basic-date', Component: Example1, metadata: metadata1 },
-  { id: '02-with-disabled-dates', Component: Example2, metadata: metadata2 },
-]
 
 const dateControls: ControlDef[] = []
 
@@ -46,7 +37,6 @@ export const dateDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Date />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 }

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

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-divider.js';
-export { metadata as metadata1 } from './01-basic-divider.js';
+// Divider examples are served from @ui-lab-core/library (private registry)

package/src/components/Divider/index.tsx

@@ -1,24 +1,6 @@
 import React from 'react';
 import { Divider } from "ui-lab-components";
 import { ControlDef, ComponentDetail } from "@/types";
-import Example1, {
-  metadata as metadata1,
-} from "./examples/01-basic-divider.js";
-import Example2, {
-  metadata as metadata2,
-} from "./examples/02-pattern-variants.js";
-import Example3, {
-  metadata as metadata3,
-} from "./examples/03-vertical-divider.js";
-import examplesJson from "./examples.json";
-import { loadComponentExamples } from "../../utils/load-component-examples.js";
-
-// Define examplesData locally
-const examplesData = [
-  { id: "01-basic-divider", Component: Example1, metadata: metadata1 },
-  { id: "02-pattern-variants", Component: Example2, metadata: metadata2 },
-  { id: "03-vertical-divider", Component: Example3, metadata: metadata3 },
-];
 
 const dividerControls: ControlDef[] = [
   {
@@ -79,8 +61,7 @@ export const dividerDetail: ComponentDetail = {
           orientation={props.orientation as any}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -107,4 +88,3 @@ export const dividerDetail: ComponentDetail = {
 };
 
 export { dividerControls };
-export * from "./examples/index.js";

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

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-expand.js';
-export { metadata as metadata1 } from './01-basic-expand.js';
+// Expand examples are served from @ui-lab-core/library (private registry)