ui-lab-registry 0.3.44 → 0.3.46

package/src/components/Slider/examples.json

@@ -1,7 +1,32 @@
 {
   "01-basic-slider": {
-    "title": "Basic Slider",
-    "description": "A simple range slider with a default value. Perfect for adjusting values within a range like volume or brightness.",
-    "code": "import React from 'react';\nimport { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  return <Slider.Root min={0} max={100} defaultValue={[50]} />;\n}"
+    "title": "Volume Control",
+    "description": "Horizontal slider with a label and live numeric readout.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  const [volume, setVolume] = useState(60);\n\n  return (\n    <div className=\"flex items-center gap-4 w-72\">\n      <span className=\"text-sm text-muted-foreground w-16\">Volume</span>\n      <Slider\n        aria-label=\"Volume\"\n        value={volume}\n        onValueChange={([v]) => setVolume(v)}\n        className=\"flex-1\"\n      />\n      <span className=\"text-sm tabular-nums w-8 text-right\">{volume}</span>\n    </div>\n  );\n}"
+  },
+  "02-settings-panel": {
+    "title": "Settings Panel",
+    "description": "Multiple sliders in a settings list with dividers.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  const [brightness, setBrightness] = useState(80);\n  const [contrast, setContrast] = useState(50);\n  const [saturation, setSaturation] = useState(40);\n\n  const settings = [\n    { id: \"brightness\", label: \"Brightness\", value: brightness, onChange: (v: number[]) => setBrightness(v[0]) },\n    { id: \"contrast\", label: \"Contrast\", value: contrast, onChange: (v: number[]) => setContrast(v[0]) },\n    { id: \"saturation\", label: \"Saturation\", value: saturation, onChange: (v: number[]) => setSaturation(v[0]) },\n  ];\n\n  return (\n    <div className=\"w-80 divide-y divide-border divide-background-700\">\n      {settings.map(({ id, label, value, onChange }) => (\n        <div key={id} className=\"flex items-center gap-4 py-3\">\n          <span className=\"text-sm w-24 shrink-0\">{label}</span>\n          <Slider aria-label={label} value={value} onValueChange={onChange} className=\"flex-1\" />\n          <span className=\"text-sm tabular-nums w-8 text-right text-muted-foreground\">{value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}"
+  },
+  "03-price-range": {
+    "title": "Price Range",
+    "description": "Range slider with two thumbs for min/max filtering.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  const [range, setRange] = useState([200, 800]);\n\n  return (\n    <div className=\"w-80 flex flex-col gap-4\">\n      <div className=\"flex justify-between text-sm text-muted-foreground\">\n        <span>Price range</span>\n        <span>${range[0]} – ${range[1]}</span>\n      </div>\n      <Slider\n        aria-label=\"Price range\"\n        value={range}\n        min={0}\n        max={1000}\n        step={10}\n        onValueChange={setRange}\n      />\n      <div className=\"flex justify-between text-xs text-muted-foreground\">\n        <span>$0</span>\n        <span>$1,000</span>\n      </div>\n    </div>\n  );\n}"
+  },
+  "04-step-slider": {
+    "title": "Step Slider",
+    "description": "Slider constrained to discrete steps with tick labels.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  const [rating, setRating] = useState(3);\n\n  return (\n    <div className=\"flex flex-col gap-3 w-64\">\n      <div className=\"flex justify-between items-center\">\n        <label className=\"text-sm\">Quality rating</label>\n        <span className=\"text-sm font-medium\">{rating} / 5</span>\n      </div>\n      <Slider\n        aria-label=\"Quality rating\"\n        value={rating}\n        min={1}\n        max={5}\n        step={1}\n        onValueChange={([v]) => setRating(v)}\n      />\n      <div className=\"flex justify-between text-xs text-muted-foreground\">\n        {[1, 2, 3, 4, 5].map((n) => (\n          <span key={n}>{n}</span>\n        ))}\n      </div>\n    </div>\n  );\n}"
+  },
+  "05-disabled-state": {
+    "title": "Disabled State",
+    "description": "Active and disabled sliders side by side.",
+    "code": "import { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-4 w-64\">\n      <div className=\"flex items-center gap-4\">\n        <span className=\"text-sm text-muted-foreground w-20\">Active</span>\n        <Slider aria-label=\"Active slider\" defaultValue={40} className=\"flex-1\" />\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <span className=\"text-sm text-muted-foreground w-20\">Disabled</span>\n        <Slider aria-label=\"Disabled slider\" defaultValue={40} disabled className=\"flex-1\" />\n      </div>\n    </div>\n  );\n}"
+  },
+  "06-vertical-mixer": {
+    "title": "Vertical Mixer",
+    "description": "Vertical orientation for audio-style channel controls.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Slider } from 'ui-lab-components';\n\nexport default function Example() {\n  const [channels, setChannels] = useState([70, 50, 80, 40]);\n\n  return (\n    <div className=\"flex items-end gap-6 h-40\">\n      {[\"CH1\", \"CH2\", \"CH3\", \"CH4\"].map((label, i) => (\n        <div key={label} className=\"flex flex-col items-center gap-2\">\n          <Slider\n            aria-label={label}\n            value={channels[i]}\n            orientation=\"vertical\"\n            onValueChange={([v]) => {\n              const next = [...channels];\n              next[i] = v;\n              setChannels(next);\n            }}\n            style={{ height: 120 }}\n          />\n          <span className=\"text-xs text-muted-foreground\">{label}</span>\n        </div>\n      ))}\n    </div>\n  );\n}"
   }
 }

package/src/components/Slider/index.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import { Slider } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-slider.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-const examplesData = [
-  { id: '01-basic-slider', Component: Example1, metadata: metadata1 },
-];
 
 const sliderControls: ControlDef[] = [
   {
@@ -55,7 +48,6 @@ export const sliderDetail: ComponentDetail = {
         />
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
   variants: [
     {
@@ -76,4 +68,3 @@ export const sliderDetail: ComponentDetail = {
 };
 
 export { sliderControls };
-export * from './examples/index.js';

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

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

package/src/components/Switch/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-switch": {
-    "title": "Basic Switch",
-    "description": "A simple toggle switch component. Use for binary on/off states like enabling features or toggling settings.",
-    "code": "import React from 'react';\nimport { Switch } from 'ui-lab-components';\n\nexport default function Example() {\n  return <Switch />;\n}"
+    "title": "Inline Form Field",
+    "description": "Switch paired with a label in a horizontal form row.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Switch } from 'ui-lab-components';\n\nexport default function Example() {\n  const [enabled, setEnabled] = useState(false);\n\n  return (\n    <div className=\"flex items-center justify-between gap-4 w-64\">\n      <label htmlFor=\"marketing\" className=\"text-sm\">\n        Marketing emails\n      </label>\n      <Switch\n        id=\"marketing\"\n        aria-label=\"Marketing emails\"\n        isSelected={enabled}\n        onChange={setEnabled}\n      />\n    </div>\n  );\n}"
+  },
+  "02-settings-panel": {
+    "title": "Settings Panel",
+    "description": "A list of toggleable settings with dividers.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Switch } from 'ui-lab-components';\n\nexport default function Example() {\n  const [notifications, setNotifications] = useState(true);\n  const [sounds, setSounds] = useState(false);\n  const [badge, setBadge] = useState(true);\n\n  const settings = [\n    { id: \"notifications\", label: \"Push notifications\", value: notifications, onChange: setNotifications },\n    { id: \"sounds\", label: \"Sound effects\", value: sounds, onChange: setSounds },\n    { id: \"badge\", label: \"App badge\", value: badge, onChange: setBadge },\n  ];\n\n  return (\n    <div className=\"w-72 divide-y divide-border\">\n      {settings.map(({ id, label, value, onChange }) => (\n        <div key={id} className=\"flex items-center justify-between py-3\">\n          <span className=\"text-sm\">{label}</span>\n          <Switch aria-label={label} isSelected={value} onChange={onChange} />\n        </div>\n      ))}\n    </div>\n  );\n}"
+  },
+  "03-disabled-state": {
+    "title": "Disabled State",
+    "description": "Switch in both on and off disabled states.",
+    "code": "import { Switch } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <Switch aria-label=\"Off disabled\" isDisabled defaultSelected={false} />\n        <span className=\"text-sm text-muted-foreground\">Disabled off</span>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <Switch aria-label=\"On disabled\" isDisabled defaultSelected={true} />\n        <span className=\"text-sm text-muted-foreground\">Disabled on</span>\n      </div>\n    </div>\n  );\n}"
+  },
+  "04-small-size": {
+    "title": "Small Size",
+    "description": "Compact switch for dense UIs.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Switch } from 'ui-lab-components';\n\nexport default function Example() {\n  const [dense, setDense] = useState(false);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Switch\n        size=\"sm\"\n        aria-label=\"Dense mode\"\n        isSelected={dense}\n        onChange={setDense}\n      />\n      <span className=\"text-sm text-muted-foreground\">Dense mode</span>\n    </div>\n  );\n}"
+  },
+  "05-controlled-toggle": {
+    "title": "Controlled Toggle",
+    "description": "Fully controlled switch with external state and reset.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Switch } from 'ui-lab-components';\n\nexport default function Example() {\n  const [active, setActive] = useState(false);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <Switch\n        aria-label=\"Feature flag\"\n        isSelected={active}\n        onChange={setActive}\n      />\n      <p className=\"text-xs text-muted-foreground\">\n        Feature is <strong>{active ? \"enabled\" : \"disabled\"}</strong>\n      </p>\n      <button\n        className=\"text-xs underline text-muted-foreground\"\n        onClick={() => setActive(false)}\n      >\n        Reset\n      </button>\n    </div>\n  );\n}"
   }
 }

package/src/components/Switch/index.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import { Switch } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-switch.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-const examplesData = [
-  { id: '01-basic-switch', Component: Example1, metadata: metadata1 },
-];
 
 const switchControls: ControlDef[] = [
   {
@@ -72,7 +65,6 @@ export const switchDetail: ComponentDetail = {
         />
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
   variants: [
     {
@@ -93,4 +85,3 @@ export const switchDetail: ComponentDetail = {
 };
 
 export { switchControls };
-export * from './examples/index.js';

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

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

package/src/components/Table/index.tsx

@@ -1,14 +1,7 @@
-import React from 'react';
 import { Table } from "ui-lab-components";
 import { ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-table.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-table', Component: Example1, metadata: metadata1 },
-];
 
 interface SampleData {
   id: number;
@@ -82,8 +75,7 @@ export const tableDetail: ComponentDetail = {
           ]}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -105,4 +97,3 @@ export const tableDetail: ComponentDetail = {
   ],
 };
 
-export * from './examples/index.js';

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

@@ -1,4 +1 @@
-export { default as Example1 } from './01-basic-tabs.js';
-export { metadata as metadata1 } from './01-basic-tabs.js';
-export { default as Example2 } from './02-vertical-tabs.js';
-export { metadata as metadata2 } from './02-vertical-tabs.js';
+// Tabs examples are served from @ui-lab-core/library (private registry)

package/src/components/Tabs/examples.json

@@ -8,5 +8,15 @@
     "title": "Vertical Tabs (Sidebar)",
     "description": "A vertical tab layout ideal for settings pages or sidebar navigation. Tabs are stacked vertically with content panels beside them.",
     "code": "import React from 'react';\nimport { Tabs, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n      <Card className=\"w-full max-w-2xl\">\n        <Tabs default=\"profile\" className=\"flex flex-row\">\n          {/* Vertical tab list - styled as sidebar */}\n          <Tabs.List\n            aria-label=\"Settings sections\"\n            className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n          >\n            <Tabs.Trigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n              Notifications\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n              Security\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n              Preferences\n            </Tabs.Trigger>\n          </Tabs.List>\n\n          {/* Content panels */}\n          <div className=\"flex-1 p-6\">\n            <Tabs.Content value=\"profile\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Manage your personal information and how others see you on the platform.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"notifications\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Control how and when you receive alerts and updates.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-32 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-background-700 rounded\" />\n                  <div className=\"h-4 w-40 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-28 bg-background-800 rounded\" />\n                </div>\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"security\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Protect your account with passwords, two-factor authentication, and more.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n                </div>\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n                </div>\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"preferences\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Customize your experience with theme, language, and display options.\n              </p>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </Tabs.Content>\n          </div>\n        </Tabs>\n      </Card>\n    </div>\n  );\n}"
+  },
+  "03-underline-tabs": {
+    "title": "Underline Variant",
+    "description": "Horizontal tabs with underline indicator. Great for documentation sites.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n  const [selected, setSelected] = useState(\"tab1\");\n\n  return (\n    <Tabs value={selected} onValueChange={setSelected} variant=\"underline\" className=\"w-fit\">\n      <Tabs.List aria-label=\"Tab options\">\n        <Tabs.Trigger value=\"tab1\">Install</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\">Usage</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\">API</Tabs.Trigger>\n      </Tabs.List>\n    </Tabs>\n  );\n}"
+  },
+  "04-vertical-underline-tabs": {
+    "title": "Vertical Underline",
+    "description": "Vertical tabs with underline variant indicator.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n  const [selected, setSelected] = useState(\"tab1\");\n\n  return (\n    <Tabs value={selected} onValueChange={setSelected} variant=\"underline\" orientation=\"vertical\" className=\"flex w-fit gap-4\">\n      <Tabs.List aria-label=\"Tab options\" className=\"flex flex-col w-fit\">\n        <Tabs.Trigger value=\"tab1\">Profile</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\">Billing</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\">Team</Tabs.Trigger>\n      </Tabs.List>\n    </Tabs>\n  );\n}"
   }
 }

package/src/components/Tabs/index.tsx

@@ -1,16 +1,8 @@
 import React from 'react';
 import { Tabs } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-tabs.js';
-import Example2, { metadata as metadata2 } from './examples/02-vertical-tabs.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-tabs', Component: Example1, metadata: metadata1 },
-  { id: '02-vertical-tabs', Component: Example2, metadata: metadata2 },
-];
 
 
 const tabsControls: ControlDef[] = [
@@ -105,8 +97,7 @@ export const tabsDetail: ComponentDetail = {
           </Tabs.Content>
         </Tabs>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -154,4 +145,3 @@ export const tabsDetail: ComponentDetail = {
 };
 
 export { tabsControls };
-export * from './examples/index.js';

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

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

package/src/components/Textarea/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-textarea": {
-    "title": "Basic TextArea",
-    "description": "A simple multi-line text input field. Use this for collecting longer text input like comments or descriptions.",
-    "code": "import React from 'react';\nimport { TextArea } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <TextArea\n      placeholder=\"Enter your comments here...\"\n      rows={4}\n    />\n  );\n}"
+    "title": "Feedback Form",
+    "description": "TextArea with a character limit and submit button — disabled until the user types.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        placeholder=\"Tell us what you think...\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        showCharacterCount\n        maxCharacters={300}\n        rows={4}\n      />\n      <Button variant=\"primary\" disabled={value.trim().length === 0} className=\"self-end\">\n        Submit\n      </Button>\n    </Flex>\n  );\n}"
+  },
+  "02-bio-settings": {
+    "title": "Profile Bio",
+    "description": "Fixed-height settings textarea with a 160-character cap and save/clear actions.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [bio, setBio] = useState(\"UI designer & developer building minimal tools.\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        value={bio}\n        onChange={(e) => setBio(e.target.value)}\n        showCharacterCount\n        maxCharacters={160}\n        rows={3}\n        resizable={false}\n      />\n      <Flex justify=\"end\" gap=\"sm\">\n        <Button size=\"sm\" variant=\"ghost\" onClick={() => setBio(\"\")}>Clear</Button>\n        <Button size=\"sm\" variant=\"primary\">Save</Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "03-error-state": {
+    "title": "Validation Error",
+    "description": "Error styling triggered when the input is non-empty but below a minimum length.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [value, setValue] = useState(\"\");\n  const hasError = value.trim().length > 0 && value.trim().length < 20;\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        placeholder=\"Describe the issue in detail...\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        error={hasError}\n        rows={4}\n      />\n      {hasError && (\n        <span style={{ fontSize: \"0.75rem\", color: \"var(--color-destructive)\" }}>\n          Description must be at least 20 characters.\n        </span>\n      )}\n    </Flex>\n  );\n}"
+  },
+  "04-disabled-readonly": {
+    "title": "Disabled & Read-only",
+    "description": "Side-by-side disabled and read-only states to compare their visual treatment.",
+    "code": "import { TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 380 }}>\n      <TextArea\n        value=\"This field is disabled and cannot be edited.\"\n        disabled\n        rows={2}\n        resizable={false}\n      />\n      <TextArea\n        value=\"This is a read-only note visible to all team members.\"\n        readOnly\n        rows={2}\n        resizable={false}\n      />\n    </Flex>\n  );\n}"
+  },
+  "05-scrolling": {
+    "title": "Scrollable with maxHeight",
+    "description": "TextArea bounded by a max height — content scrolls once it overflows.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [value, setValue] = useState(\n    \"Line 1\\nLine 2\\nLine 3\\nLine 4\\nLine 5\\nLine 6\\nLine 7\\nLine 8\"\n  );\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        maxHeight=\"120px\"\n        resizable={false}\n      />\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Textarea/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { TextArea } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-textarea.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-textarea', Component: Example1, metadata: metadata1 },
-];
 
 const textareaControls: ControlDef[] = [
   {
@@ -71,10 +65,8 @@ export const textareaDetail: ComponentDetail = {
           disabled={props.disabled}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { textareaControls };
-export * from './examples/index.js';

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

@@ -1,10 +1 @@
-export { default as Example1 } from './01-basic-toast.js';
-export { metadata as metadata1 } from './01-basic-toast.js';
-export { default as Example2 } from './02-success-toast.js';
-export { metadata as metadata2 } from './02-success-toast.js';
-export { default as Example3 } from './03-danger-toast.js';
-export { metadata as metadata3 } from './03-danger-toast.js';
-export { default as Example4 } from './04-info-toast.js';
-export { metadata as metadata4 } from './04-info-toast.js';
-export { default as Example5 } from './05-warning-toast.js';
-export { metadata as metadata5 } from './05-warning-toast.js';
+// Toast examples are served from @ui-lab-core/library (private registry)

package/src/components/Toast/index.tsx

@@ -1,26 +1,9 @@
 'use client';
 
-import React from 'react';
 import { Button, toast, Toaster } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import { FaBell, FaX } from 'react-icons/fa6';
-import Example1, { metadata as metadata1 } from './examples/01-basic-toast.js';
-import Example2, { metadata as metadata2 } from './examples/02-success-toast.js';
-import Example3, { metadata as metadata3 } from './examples/03-danger-toast.js';
-import Example4, { metadata as metadata4 } from './examples/04-info-toast.js';
-import Example5, { metadata as metadata5 } from './examples/05-warning-toast.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-import { FaInfoCircle } from 'react-icons/fa';
 
 // Define examplesData locally
-const examplesData = [
-  { id: '01-basic-toast', Component: Example1, metadata: metadata1 },
-  { id: '02-success-toast', Component: Example2, metadata: metadata2 },
-  { id: '03-danger-toast', Component: Example3, metadata: metadata3 },
-  { id: '04-info-toast', Component: Example4, metadata: metadata4 },
-  { id: '05-warning-toast', Component: Example5, metadata: metadata5 },
-];
 
 const toastControls: ControlDef[] = [
   {
@@ -30,7 +13,7 @@ const toastControls: ControlDef[] = [
     options: [
       { label: 'Default', value: 'default' },
       { label: 'Success', value: 'success' },
-      { label: 'danger', value: 'danger' },
+      { label: 'Danger', value: 'danger' },
       { label: 'Info', value: 'info' },
       { label: 'Warning', value: 'warning' },
     ],
@@ -119,10 +102,8 @@ export const toastDetail: ComponentDetail = {
           <Toaster />
         </>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { toastControls };
-export * from './examples/index.js';

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

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

package/src/components/Tooltip/index.tsx

@@ -2,17 +2,11 @@ import React from 'react';
 import { Button, Frame, Tooltip } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import { FaQuestion } from 'react-icons/fa6';
-import Example1, { metadata as metadata1 } from './examples/01-basic-tooltip.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const TAIL_WIDTH = 18;
 const TAIL_PATH = "M 0.00 0.00 C 3.00 0.00 7.50 -6.00 9.00 -6.00 C 10.50 -6.00 13.50 0.00 18.00 0.00";
 
 // Define examplesData locally
-const examplesData = [
-  { id: '01-basic-tooltip', Component: Example1, metadata: metadata1 },
-];
 
 
 const tooltipControls: ControlDef[] = [
@@ -99,8 +93,7 @@ export const tooltipDetail: ComponentDetail = {
           </Tooltip>
         </div>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -134,4 +127,3 @@ export const tooltipDetail: ComponentDetail = {
 };
 
 export { tooltipControls };
-export * from './examples/index.js';

package/src/demo-registry.ts

@@ -5,46 +5,16 @@ export type DemoComponent = React.ComponentType<object>;
 
 // Lazy-loaded element demos - dynamic() called on demand
 const elementDemoLoaders: Record<string, () => DemoComponent> = {
-  'aichatinput-basic': () => dynamic(() => import('./elements/AI/AIChatInput/variations/01-basic').then(m => ({ default: m.BasicAIChatInput }))),
-  'aichatinput-with-suggestions': () => dynamic(() => import('./elements/AI/AIChatInput/variations/02-with-suggestions').then(m => ({ default: m.AIChatInputWithSuggestions }))),
-  'chainofthought-basic': () => dynamic(() => import('./elements/AI/ChainOfThought/variations/01-basic').then(m => ({ default: m.BasicChainOfThought }))),
-  'chainofthought-with-details': () => dynamic(() => import('./elements/AI/ChainOfThought/variations/02-with-details').then(m => ({ default: m.ChainOfThoughtWithDetails }))),
-  'chat-basic': () => dynamic(() => import('./elements/AI/Chat/variations/01-basic').then(m => ({ default: m.BasicChat }))),
-  'chat-with-actions': () => dynamic(() => import('./elements/AI/Chat/variations/02-with-actions').then(m => ({ default: m.ChatWithActions }))),
-  'copypage-basic': () => dynamic(() => import('./elements/Documentation/CopyPage/variations/01-basic').then(m => ({ default: m.BasicCopyPage }))),
-  'copypage-with-success': () => dynamic(() => import('./elements/Documentation/CopyPage/variations/02-with-success').then(m => ({ default: m.CopyPageWithSuccess }))),
-  'nextarticle-basic': () => dynamic(() => import('./elements/Documentation/NextArticle/variations/01-basic').then(m => ({ default: m.BasicNextArticle }))),
-  'nextarticle-with-icon': () => dynamic(() => import('./elements/Documentation/NextArticle/variations/02-with-icon').then(m => ({ default: m.NextArticleWithIcon }))),
-  'toc-basic': () => dynamic(() => import('./elements/Documentation/TOC/variations/01-basic').then(m => ({ default: m.BasicTOC }))),
-  'toc-expanded': () => dynamic(() => import('./elements/Documentation/TOC/variations/02-expanded').then(m => ({ default: m.ExpandedTOC }))),
-  'carousel-basic': () => dynamic(() => import('./elements/Elements/Carousel/variations/01-basic').then(m => ({ default: m.BasicCarousel }))),
-  'rating-basic': () => dynamic(() => import('./elements/Elements/Rating/variations/01-basic').then(m => ({ default: m.BasicRating }))),
-  'timeline-basic': () => dynamic(() => import('./elements/Elements/Timeline/variations/01-basic').then(m => ({ default: m.BasicTimeline }))),
-  'treeview-basic': () => dynamic(() => import('./elements/Elements/TreeView/variations/01-basic').then(m => ({ default: m.BasicTreeView }))),
-  'header-basic': () => dynamic(() => import('./elements/foundation/Header/variations/01-basic').then(m => ({ default: m.BasicHeader }))),
-  'page-basic': () => dynamic(() => import('./elements/foundation/Page/variations/01-basic').then(m => ({ default: m.BasicPage }))),
-  'sidebar-basic': () => dynamic(() => import('./elements/foundation/Sidebar/variations/01-basic').then(m => ({ default: m.BasicSidebar }))),
+
 };
 
 // Lazy-loaded section previews - dynamic() called on demand
 const sectionPreviewLoaders: Record<string, () => DemoComponent> = {
   cta: () => dynamic(() => import('./sections/CTA').then(mod => ({ default: () => mod.getPreview() }))),
-  'cta-banner': () => dynamic(() => import('./sections/CTA/variations/01-banner').then(m => ({ default: m.BannerCTA }))),
-  'cta-split': () => dynamic(() => import('./sections/CTA/variations/02-split').then(m => ({ default: m.SplitCTA }))),
   features: () => dynamic(() => import('./sections/Features').then(mod => ({ default: () => mod.getPreview() }))),
-  'features-grid': () => dynamic(() => import('./sections/Features/variations/01-grid').then(m => ({ default: m.GridFeatures }))),
-  'features-list': () => dynamic(() => import('./sections/Features/variations/02-list').then(m => ({ default: m.FeatureList }))),
   hero: () => dynamic(() => import('./sections/Hero').then(mod => ({ default: () => mod.getPreview() }))),
-  'hero-simple': () => dynamic(() => import('./sections/Hero/variations/01-simple').then(m => ({ default: m.SimpleHero }))),
-  'hero-with-cta': () => dynamic(() => import('./sections/Hero/variations/02-with-cta').then(m => ({ default: m.HeroWithCTA }))),
-  'hero-with-stats': () => dynamic(() => import('./sections/Hero/variations/03-with-stats').then(m => ({ default: m.HeroWithStats }))),
-  'hero-with-features': () => dynamic(() => import('./sections/Hero/variations/04-with-features').then(m => ({ default: m.HeroWithFeatures }))),
   pricing: () => dynamic(() => import('./sections/Pricing').then(mod => ({ default: () => mod.getPreview() }))),
-  'pricing-cards': () => dynamic(() => import('./sections/Pricing/variations/01-cards').then(m => ({ default: m.PricingCards }))),
-  'pricing-comparison': () => dynamic(() => import('./sections/Pricing/variations/02-comparison').then(m => ({ default: m.PricingComparison }))),
   testimonials: () => dynamic(() => import('./sections/Testimonials').then(mod => ({ default: () => mod.getPreview() }))),
-  'testimonials-cards': () => dynamic(() => import('./sections/Testimonials/variations/01-cards').then(m => ({ default: m.CardTestimonials }))),
-  'testimonials-featured': () => dynamic(() => import('./sections/Testimonials/variations/02-featured').then(m => ({ default: m.FeaturedTestimonial }))),
 };
 
 // Lazy-loaded pattern demos - dynamic() called on demand

package/src/elements/AI/AIChatInput/index.tsx

@@ -45,7 +45,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicAIChatInput } from './variations/index.js';
-export type { AIChatInputVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/AI/ChainOfThought/index.tsx

@@ -50,7 +50,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicChainOfThought } from './variations/index.js';
-export type { ChainOfThoughtVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/AI/Chat/index.tsx

@@ -58,7 +58,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicChat } from './variations/index.js';
-export type { ChatVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Documentation/CopyPage/index.tsx

@@ -40,7 +40,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicCopyPage } from './variations/index.js';
-export type { CopyPageVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Documentation/NextArticle/index.tsx

@@ -41,7 +41,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicNextArticle } from './variations/index.js';
-export type { NextArticleVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Documentation/TOC/index.tsx

@@ -45,7 +45,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicTOC } from './variations/index.js';
-export type { TOCVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Elements/Carousel/index.tsx

@@ -39,7 +39,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicCarousel } from './variations/index.js';
-export type { CarouselVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Elements/Rating/index.tsx

@@ -39,7 +39,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicRating } from './variations/index.js';
-export type { RatingVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Elements/Timeline/index.tsx

@@ -39,7 +39,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicTimeline } from './variations/index.js';
-export type { TimelineVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Elements/TreeView/index.tsx

@@ -39,7 +39,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicTreeView } from './variations/index.js';
-export type { TreeViewVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/Elements/index.ts

@@ -5,30 +5,6 @@ import carouselElement from './Carousel/index.js';
 
 export { treeViewElement, ratingElement, timelineElement, carouselElement };
 
-export {
-  BasicTreeView,
-  type TreeViewVariations,
-  DEMO_MAP as TreeViewDemoMap,
-  variationComponentMap as treeViewVariationComponentMap,
-} from './TreeView/index.js';
 
-export {
-  BasicRating,
-  type RatingVariations,
-  DEMO_MAP as RatingDemoMap,
-  variationComponentMap as ratingVariationComponentMap,
-} from './Rating/index.js';
 
-export {
-  BasicTimeline,
-  type TimelineVariations,
-  DEMO_MAP as TimelineDemoMap,
-  variationComponentMap as timelineVariationComponentMap,
-} from './Timeline/index.js';
 
-export {
-  BasicCarousel,
-  type CarouselVariations,
-  DEMO_MAP as CarouselDemoMap,
-  variationComponentMap as carouselVariationComponentMap,
-} from './Carousel/index.js';

package/src/elements/foundation/Header/index.tsx

@@ -44,7 +44,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicHeader } from './variations/index.js';
-export type { HeaderVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/foundation/Page/index.tsx

@@ -43,7 +43,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicPage } from './variations/index.js';
-export type { PageVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';