ui-lab-registry 0.3.44 → 0.3.45

package/src/components/Scroll/index.tsx

@@ -3,11 +3,15 @@ import { Divider, Scroll } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import { FaComputerMouse } from 'react-icons/fa6';
 import Example1, { metadata as metadata1 } from './examples/01-basic-scroll.js';
+import Example2, { metadata as metadata2 } from './examples/02-settings-panel.js';
+import Example3, { metadata as metadata3 } from './examples/03-horizontal-tags.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-scroll', Component: Example1, metadata: metadata1 },
+  { id: '02-settings-panel', Component: Example2, metadata: metadata2 },
+  { id: '03-horizontal-tags', Component: Example3, metadata: metadata3 },
 ];
 
 

package/src/components/Select/examples/03-country-select.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from 'react';
+import { Select, Searchable } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Country Selector',
+  description: 'Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.'
+};
+
+const countries = [
+  { value: "us", label: "United States", flag: "🇺🇸", code: "+1" },
+  { value: "gb", label: "United Kingdom", flag: "🇬🇧", code: "+44" },
+  { value: "de", label: "Germany", flag: "🇩🇪", code: "+49" },
+  { value: "fr", label: "France", flag: "🇫🇷", code: "+33" },
+  { value: "jp", label: "Japan", flag: "🇯🇵", code: "+81" },
+  { value: "kr", label: "South Korea", flag: "🇰🇷", code: "+82" },
+  { value: "cn", label: "China", flag: "🇨🇳", code: "+86" },
+  { value: "in", label: "India", flag: "🇮🇳", code: "+91" },
+  { value: "br", label: "Brazil", flag: "🇧🇷", code: "+55" },
+  { value: "au", label: "Australia", flag: "🇦🇺", code: "+61" },
+  { value: "ca", label: "Canada", flag: "🇨🇦", code: "+1" },
+  { value: "mx", label: "Mexico", flag: "🇲🇽", code: "+52" },
+];
+
+export default function Example() {
+  const [country, setCountry] = useState<string | number | null>("us");
+  const selected = countries.find(c => c.value === country);
+
+  return (
+    <Select
+      selectedKey={country}
+      valueLabel={selected?.label}
+      onSelectionChange={setCountry}
+      className="w-72"
+    >
+      <Select.Trigger>
+        <Select.Value
+          placeholder="Choose a country..."
+          icon={selected && <span className="text-sm">{selected.flag}</span>}
+        />
+      </Select.Trigger>
+      <Searchable.Content searchPlaceholder="Search countries...">
+        {countries.map((c) => (
+          <Select.Item key={c.value} value={c.value} textValue={c.label} icon={<span className="text-md">{c.flag}</span>}>
+            <div className="flex items-center justify-between w-full">
+              <span>{c.label}</span>
+              <span className="ml-2 text-sm text-foreground-400">{c.code}</span>
+            </div>
+          </Select.Item>
+        ))}
+      </Searchable.Content>
+    </Select>
+  );
+}

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

@@ -2,3 +2,5 @@ export { default as Example1 } from './01-basic-select.js';
 export { metadata as metadata1 } from './01-basic-select.js';
 export { default as Example2 } from './02-searchable-select.js';
 export { metadata as metadata2 } from './02-searchable-select.js';
+export { default as Example3 } from './03-country-select.js';
+export { metadata as metadata3 } from './03-country-select.js';

package/src/components/Select/examples.json

@@ -8,5 +8,10 @@
     "title": "Searchable Select",
     "description": "A filterable select component with search input. Type to filter through a large list of options.",
     "code": "import React from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n  { value: 'us', label: 'United States' },\n  { value: 'ca', label: 'Canada' },\n  { value: 'mx', label: 'Mexico' },\n  { value: 'br', label: 'Brazil' },\n  { value: 'ar', label: 'Argentina' },\n  { value: 'uk', label: 'United Kingdom' },\n  { value: 'fr', label: 'France' },\n  { value: 'de', label: 'Germany' },\n  { value: 'it', label: 'Italy' },\n  { value: 'es', label: 'Spain' },\n  { value: 'pt', label: 'Portugal' },\n  { value: 'nl', label: 'Netherlands' },\n  { value: 'be', label: 'Belgium' },\n  { value: 'ch', label: 'Switzerland' },\n  { value: 'at', label: 'Austria' },\n  { value: 'se', label: 'Sweden' },\n  { value: 'no', label: 'Norway' },\n  { value: 'dk', label: 'Denmark' },\n  { value: 'fi', label: 'Finland' },\n  { value: 'pl', label: 'Poland' },\n  { value: 'jp', label: 'Japan' },\n  { value: 'cn', label: 'China' },\n  { value: 'kr', label: 'South Korea' },\n  { value: 'in', label: 'India' },\n  { value: 'au', label: 'Australia' },\n  { value: 'nz', label: 'New Zealand' },\n];\n\nexport default function Example() {\n  return (\n    <Select>\n      <Searchable.Input placeholder=\"Search countries...\" />\n      <Searchable.Content searchPlaceholder=\"Type to filter...\">\n        {countries.map((country) => (\n          <Select.Item key={country.value} value={country.value} textValue={country.label}>\n            {country.label}\n          </Select.Item>\n        ))}\n      </Searchable.Content>\n    </Select>\n  );\n}"
+  },
+  "03-country-select": {
+    "title": "Country Selector",
+    "description": "Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n  { value: \"us\", label: \"United States\", flag: \"🇺🇸\", code: \"+1\" },\n  { value: \"gb\", label: \"United Kingdom\", flag: \"🇬🇧\", code: \"+44\" },\n  { value: \"de\", label: \"Germany\", flag: \"🇩🇪\", code: \"+49\" },\n  { value: \"fr\", label: \"France\", flag: \"🇫🇷\", code: \"+33\" },\n  { value: \"jp\", label: \"Japan\", flag: \"🇯🇵\", code: \"+81\" },\n  { value: \"kr\", label: \"South Korea\", flag: \"🇰🇷\", code: \"+82\" },\n  { value: \"cn\", label: \"China\", flag: \"🇨🇳\", code: \"+86\" },\n  { value: \"in\", label: \"India\", flag: \"🇮🇳\", code: \"+91\" },\n  { value: \"br\", label: \"Brazil\", flag: \"🇧🇷\", code: \"+55\" },\n  { value: \"au\", label: \"Australia\", flag: \"🇦🇺\", code: \"+61\" },\n  { value: \"ca\", label: \"Canada\", flag: \"🇨🇦\", code: \"+1\" },\n  { value: \"mx\", label: \"Mexico\", flag: \"🇲🇽\", code: \"+52\" },\n];\n\nexport default function Example() {\n  const [country, setCountry] = useState<string | number | null>(\"us\");\n  const selected = countries.find(c => c.value === country);\n\n  return (\n    <Select\n      selectedKey={country}\n      valueLabel={selected?.label}\n      onSelectionChange={setCountry}\n      className=\"w-72\"\n    >\n      <Select.Trigger>\n        <Select.Value\n          placeholder=\"Choose a country...\"\n          icon={selected && <span className=\"text-sm\">{selected.flag}</span>}\n        />\n      </Select.Trigger>\n      <Searchable.Content searchPlaceholder=\"Search countries...\">\n        {countries.map((c) => (\n          <Select.Item key={c.value} value={c.value} textValue={c.label} icon={<span className=\"text-md\">{c.flag}</span>}>\n            <div className=\"flex items-center justify-between w-full\">\n              <span>{c.label}</span>\n              <span className=\"ml-2 text-sm text-foreground-400\">{c.code}</span>\n            </div>\n          </Select.Item>\n        ))}\n      </Searchable.Content>\n    </Select>\n  );\n}"
   }
 }

package/src/components/Select/index.tsx

@@ -3,6 +3,7 @@ import { Select, Searchable } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-select.js';
 import Example2, { metadata as metadata2 } from './examples/02-searchable-select.js';
+import Example3, { metadata as metadata3 } from './examples/03-country-select.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaChevronDown } from 'react-icons/fa6';
@@ -10,6 +11,7 @@ import { FaChevronDown } from 'react-icons/fa6';
 const examplesData = [
   { id: '01-basic-select', Component: Example1, metadata: metadata1 },
   { id: '02-searchable-select', Component: Example2, metadata: metadata2 },
+  { id: '03-country-select', Component: Example3, metadata: metadata3 },
 ];
 
 const selectControls: ControlDef[] = [

package/src/components/Slider/examples/01-basic-slider.tsx

@@ -1,11 +1,26 @@
-import React from 'react';
+"use client";
+
+import { useState } from 'react';
 import { Slider } from 'ui-lab-components';
 
 export const metadata = {
-  title: 'Basic Slider',
-  description: 'A simple range slider with a default value. Perfect for adjusting values within a range like volume or brightness.'
+  title: 'Volume Control',
+  description: 'Horizontal slider with a label and live numeric readout.'
 };
 
 export default function Example() {
-  return <Slider.Root min={0} max={100} defaultValue={[50]} />;
+  const [volume, setVolume] = useState(60);
+
+  return (
+    <div className="flex items-center gap-4 w-72">
+      <span className="text-sm text-muted-foreground w-16">Volume</span>
+      <Slider
+        aria-label="Volume"
+        value={volume}
+        onValueChange={([v]) => setVolume(v)}
+        className="flex-1"
+      />
+      <span className="text-sm tabular-nums w-8 text-right">{volume}</span>
+    </div>
+  );
 }

package/src/components/Slider/examples/02-settings-panel.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from 'react';
+import { Slider } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Settings Panel',
+  description: 'Multiple sliders in a settings list with dividers.'
+};
+
+export default function Example() {
+  const [brightness, setBrightness] = useState(80);
+  const [contrast, setContrast] = useState(50);
+  const [saturation, setSaturation] = useState(40);
+
+  const settings = [
+    { id: "brightness", label: "Brightness", value: brightness, onChange: (v: number[]) => setBrightness(v[0]) },
+    { id: "contrast", label: "Contrast", value: contrast, onChange: (v: number[]) => setContrast(v[0]) },
+    { id: "saturation", label: "Saturation", value: saturation, onChange: (v: number[]) => setSaturation(v[0]) },
+  ];
+
+  return (
+    <div className="w-80 divide-y divide-border divide-background-700">
+      {settings.map(({ id, label, value, onChange }) => (
+        <div key={id} className="flex items-center gap-4 py-3">
+          <span className="text-sm w-24 shrink-0">{label}</span>
+          <Slider aria-label={label} value={value} onValueChange={onChange} className="flex-1" />
+          <span className="text-sm tabular-nums w-8 text-right text-muted-foreground">{value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Slider/examples/03-price-range.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from 'react';
+import { Slider } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Price Range',
+  description: 'Range slider with two thumbs for min/max filtering.'
+};
+
+export default function Example() {
+  const [range, setRange] = useState([200, 800]);
+
+  return (
+    <div className="w-80 flex flex-col gap-4">
+      <div className="flex justify-between text-sm text-muted-foreground">
+        <span>Price range</span>
+        <span>${range[0]} – ${range[1]}</span>
+      </div>
+      <Slider
+        aria-label="Price range"
+        value={range}
+        min={0}
+        max={1000}
+        step={10}
+        onValueChange={setRange}
+      />
+      <div className="flex justify-between text-xs text-muted-foreground">
+        <span>$0</span>
+        <span>$1,000</span>
+      </div>
+    </div>
+  );
+}

package/src/components/Slider/examples/04-step-slider.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from 'react';
+import { Slider } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Step Slider',
+  description: 'Slider constrained to discrete steps with tick labels.'
+};
+
+export default function Example() {
+  const [rating, setRating] = useState(3);
+
+  return (
+    <div className="flex flex-col gap-3 w-64">
+      <div className="flex justify-between items-center">
+        <label className="text-sm">Quality rating</label>
+        <span className="text-sm font-medium">{rating} / 5</span>
+      </div>
+      <Slider
+        aria-label="Quality rating"
+        value={rating}
+        min={1}
+        max={5}
+        step={1}
+        onValueChange={([v]) => setRating(v)}
+      />
+      <div className="flex justify-between text-xs text-muted-foreground">
+        {[1, 2, 3, 4, 5].map((n) => (
+          <span key={n}>{n}</span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/Slider/examples/05-disabled-state.tsx

@@ -0,0 +1,21 @@
+import { Slider } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Disabled State',
+  description: 'Active and disabled sliders side by side.'
+};
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-4 w-64">
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground w-20">Active</span>
+        <Slider aria-label="Active slider" defaultValue={40} className="flex-1" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground w-20">Disabled</span>
+        <Slider aria-label="Disabled slider" defaultValue={40} disabled className="flex-1" />
+      </div>
+    </div>
+  );
+}

package/src/components/Slider/examples/06-vertical-mixer.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from 'react';
+import { Slider } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Vertical Mixer',
+  description: 'Vertical orientation for audio-style channel controls.'
+};
+
+export default function Example() {
+  const [channels, setChannels] = useState([70, 50, 80, 40]);
+
+  return (
+    <div className="flex items-end gap-6 h-40">
+      {["CH1", "CH2", "CH3", "CH4"].map((label, i) => (
+        <div key={label} className="flex flex-col items-center gap-2">
+          <Slider
+            aria-label={label}
+            value={channels[i]}
+            orientation="vertical"
+            onValueChange={([v]) => {
+              const next = [...channels];
+              next[i] = v;
+              setChannels(next);
+            }}
+            style={{ height: 120 }}
+          />
+          <span className="text-xs text-muted-foreground">{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -1,2 +1,12 @@
 export { default as Example1 } from './01-basic-slider.js';
 export { metadata as metadata1 } from './01-basic-slider.js';
+export { default as Example2 } from './02-settings-panel.js';
+export { metadata as metadata2 } from './02-settings-panel.js';
+export { default as Example3 } from './03-price-range.js';
+export { metadata as metadata3 } from './03-price-range.js';
+export { default as Example4 } from './04-step-slider.js';
+export { metadata as metadata4 } from './04-step-slider.js';
+export { default as Example5 } from './05-disabled-state.js';
+export { metadata as metadata5 } from './05-disabled-state.js';
+export { default as Example6 } from './06-vertical-mixer.js';
+export { metadata as metadata6 } from './06-vertical-mixer.js';

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

@@ -2,11 +2,21 @@ 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 Example2, { metadata as metadata2 } from './examples/02-settings-panel.js';
+import Example3, { metadata as metadata3 } from './examples/03-price-range.js';
+import Example4, { metadata as metadata4 } from './examples/04-step-slider.js';
+import Example5, { metadata as metadata5 } from './examples/05-disabled-state.js';
+import Example6, { metadata as metadata6 } from './examples/06-vertical-mixer.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 },
+  { id: '02-settings-panel', Component: Example2, metadata: metadata2 },
+  { id: '03-price-range', Component: Example3, metadata: metadata3 },
+  { id: '04-step-slider', Component: Example4, metadata: metadata4 },
+  { id: '05-disabled-state', Component: Example5, metadata: metadata5 },
+  { id: '06-vertical-mixer', Component: Example6, metadata: metadata6 },
 ];
 
 const sliderControls: ControlDef[] = [

package/src/components/Switch/examples/01-basic-switch.tsx

@@ -1,11 +1,27 @@
-import React from 'react';
+"use client";
+
+import { useState } from 'react';
 import { Switch } from 'ui-lab-components';
 
 export const metadata = {
-  title: 'Basic Switch',
-  description: 'A simple toggle switch component. Use for binary on/off states like enabling features or toggling settings.'
+  title: 'Inline Form Field',
+  description: 'Switch paired with a label in a horizontal form row.'
 };
 
 export default function Example() {
-  return <Switch />;
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <div className="flex items-center justify-between gap-4 w-64">
+      <label htmlFor="marketing" className="text-sm">
+        Marketing emails
+      </label>
+      <Switch
+        id="marketing"
+        aria-label="Marketing emails"
+        isSelected={enabled}
+        onChange={setEnabled}
+      />
+    </div>
+  );
 }

package/src/components/Switch/examples/02-settings-panel.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from 'react';
+import { Switch } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Settings Panel',
+  description: 'A list of toggleable settings with dividers.'
+};
+
+export default function Example() {
+  const [notifications, setNotifications] = useState(true);
+  const [sounds, setSounds] = useState(false);
+  const [badge, setBadge] = useState(true);
+
+  const settings = [
+    { id: "notifications", label: "Push notifications", value: notifications, onChange: setNotifications },
+    { id: "sounds", label: "Sound effects", value: sounds, onChange: setSounds },
+    { id: "badge", label: "App badge", value: badge, onChange: setBadge },
+  ];
+
+  return (
+    <div className="w-72 divide-y divide-border">
+      {settings.map(({ id, label, value, onChange }) => (
+        <div key={id} className="flex items-center justify-between py-3">
+          <span className="text-sm">{label}</span>
+          <Switch aria-label={label} isSelected={value} onChange={onChange} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Switch/examples/03-disabled-state.tsx

@@ -0,0 +1,21 @@
+import { Switch } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Disabled State',
+  description: 'Switch in both on and off disabled states.'
+};
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <Switch aria-label="Off disabled" isDisabled defaultSelected={false} />
+        <span className="text-sm text-muted-foreground">Disabled off</span>
+      </div>
+      <div className="flex items-center gap-3">
+        <Switch aria-label="On disabled" isDisabled defaultSelected={true} />
+        <span className="text-sm text-muted-foreground">Disabled on</span>
+      </div>
+    </div>
+  );
+}

package/src/components/Switch/examples/04-small-size.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from 'react';
+import { Switch } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Small Size',
+  description: 'Compact switch for dense UIs.'
+};
+
+export default function Example() {
+  const [dense, setDense] = useState(false);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Switch
+        size="sm"
+        aria-label="Dense mode"
+        isSelected={dense}
+        onChange={setDense}
+      />
+      <span className="text-sm text-muted-foreground">Dense mode</span>
+    </div>
+  );
+}

package/src/components/Switch/examples/05-controlled-toggle.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from 'react';
+import { Switch } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Controlled Toggle',
+  description: 'Fully controlled switch with external state and reset.'
+};
+
+export default function Example() {
+  const [active, setActive] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <Switch
+        aria-label="Feature flag"
+        isSelected={active}
+        onChange={setActive}
+      />
+      <p className="text-xs text-muted-foreground">
+        Feature is <strong>{active ? "enabled" : "disabled"}</strong>
+      </p>
+      <button
+        className="text-xs underline text-muted-foreground"
+        onClick={() => setActive(false)}
+      >
+        Reset
+      </button>
+    </div>
+  );
+}

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

@@ -1,2 +1,10 @@
 export { default as Example1 } from './01-basic-switch.js';
 export { metadata as metadata1 } from './01-basic-switch.js';
+export { default as Example2 } from './02-settings-panel.js';
+export { metadata as metadata2 } from './02-settings-panel.js';
+export { default as Example3 } from './03-disabled-state.js';
+export { metadata as metadata3 } from './03-disabled-state.js';
+export { default as Example4 } from './04-small-size.js';
+export { metadata as metadata4 } from './04-small-size.js';
+export { default as Example5 } from './05-controlled-toggle.js';
+export { metadata as metadata5 } from './05-controlled-toggle.js';

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

@@ -2,11 +2,19 @@ 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 Example2, { metadata as metadata2 } from './examples/02-settings-panel.js';
+import Example3, { metadata as metadata3 } from './examples/03-disabled-state.js';
+import Example4, { metadata as metadata4 } from './examples/04-small-size.js';
+import Example5, { metadata as metadata5 } from './examples/05-controlled-toggle.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 },
+  { id: '02-settings-panel', Component: Example2, metadata: metadata2 },
+  { id: '03-disabled-state', Component: Example3, metadata: metadata3 },
+  { id: '04-small-size', Component: Example4, metadata: metadata4 },
+  { id: '05-controlled-toggle', Component: Example5, metadata: metadata5 },
 ];
 
 const switchControls: ControlDef[] = [

package/src/components/Table/index.tsx

@@ -1,4 +1,3 @@
-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';