ui-lab-registry 0.3.44 → 0.3.46

package/src/components/Modal/examples.json

@@ -7,6 +7,21 @@
   "02-form-modal": {
     "title": "Form Modal",
     "description": "A modal dialog containing a form for editing user profile settings. Demonstrates using form inputs, labels, and action buttons within a modal.",
-    "code": "'use client';\n\nimport React from 'react';\nimport { Modal, Button, Input, Label, TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [formData, setFormData] = React.useState({\n    name: 'John Doe',\n    email: 'john.doe@example.com',\n    bio: 'Software developer passionate about building great user experiences.',\n  });\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    // Handle form submission\n    setIsOpen(false);\n  };\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Edit Profile</Button>\n      <Modal isOpen={isOpen} onOpenChange={setIsOpen} size=\"auto\">\n        <Modal.Header>Edit Profile</Modal.Header>\n        <Modal.Body>\n          <form id=\"profile-form\" onSubmit={handleSubmit}>\n            <Flex direction=\"column\" gap=\"md\">\n              <div>\n                <Label htmlFor=\"name\" required>\n                  Full Name\n                </Label>\n                <Input\n                  id=\"name\"\n                  value={formData.name}\n                  onChange={(e) =>\n                    setFormData({ ...formData, name: e.target.value })\n                  }\n                  placeholder=\"Enter your name\"\n                />\n              </div>\n              <div>\n                <Label htmlFor=\"email\" required>\n                  Email Address\n                </Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  value={formData.email}\n                  onChange={(e) =>\n                    setFormData({ ...formData, email: e.target.value })\n                  }\n                  placeholder=\"Enter your email\"\n                />\n              </div>\n              <div>\n                <Label htmlFor=\"bio\">Bio</Label>\n                <TextArea\n                  id=\"bio\"\n                  value={formData.bio}\n                  onChange={(e) =>\n                    setFormData({ ...formData, bio: e.target.value })\n                  }\n                  placeholder=\"Tell us about yourself\"\n                  rows={3}\n                />\n              </div>\n            </Flex>\n          </form>\n        </Modal.Body>\n        <Modal.Footer>\n          <Flex gap=\"sm\" justify=\"flex-end\">\n            <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"profile-form\">\n              Save Changes\n            </Button>\n          </Flex>\n        </Modal.Footer>\n      </Modal>\n    </>\n  );\n}"
+    "code": "'use client';\n\nimport React from 'react';\nimport { Modal, Button, Input, Label, TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [formData, setFormData] = React.useState({\n    name: 'John Doe',\n    email: 'john.doe@example.com',\n    bio: 'Software developer passionate about building great user experiences.',\n  });\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    // Handle form submission\n    setIsOpen(false);\n  };\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Edit Profile</Button>\n      <Modal isOpen={isOpen} onOpenChange={setIsOpen} size=\"auto\">\n        <Modal.Header>Edit Profile</Modal.Header>\n        <Modal.Body>\n          <form id=\"profile-form\" onSubmit={handleSubmit}>\n            <Flex direction=\"column\" gap=\"md\">\n              <div>\n                <Label htmlFor=\"name\" required>\n                  Full Name\n                </Label>\n                <Input\n                  id=\"name\"\n                  value={formData.name}\n                  onChange={(e) =>\n                    setFormData({ ...formData, name: e.target.value })\n                  }\n                  placeholder=\"Enter your name\"\n                />\n              </div>\n              <div>\n                <Label htmlFor=\"email\" required>\n                  Email Address\n                </Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  value={formData.email}\n                  onChange={(e) =>\n                    setFormData({ ...formData, email: e.target.value })\n                  }\n                  placeholder=\"Enter your email\"\n                />\n              </div>\n              <div>\n                <Label htmlFor=\"bio\">Bio</Label>\n                <TextArea\n                  id=\"bio\"\n                  value={formData.bio}\n                  onChange={(e) =>\n                    setFormData({ ...formData, bio: e.target.value })\n                  }\n                  placeholder=\"Tell us about yourself\"\n                  rows={3}\n                />\n              </div>\n            </Flex>\n          </form>\n        </Modal.Body>\n        <Modal.Footer>\n          <Flex gap=\"sm\" justify=\"end\">\n            <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"profile-form\">\n              Save Changes\n            </Button>\n          </Flex>\n        </Modal.Footer>\n      </Modal>\n    </>\n  );\n}"
+  },
+  "03-delete-confirmation": {
+    "title": "Delete Confirmation",
+    "description": "Destructive action dialog that blocks the user until they explicitly confirm or cancel.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Modal, Button } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button variant=\"destructive\" onClick={() => setIsOpen(true)}>\n        Delete workspace\n      </Button>\n\n      <Modal\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        title=\"Delete workspace\"\n        footer={\n          <>\n            <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button variant=\"destructive\" onClick={() => setIsOpen(false)}>\n              Delete\n            </Button>\n          </>\n        }\n      >\n        <p className=\"text-sm text-foreground-300\">\n          This will permanently delete <strong className=\"text-foreground-100\">acme-corp</strong> and all\n          its data. This action cannot be undone.\n        </p>\n      </Modal>\n    </>\n  );\n}"
+  },
+  "04-create-api-key": {
+    "title": "Create API Key",
+    "description": "Form modal with a single required input. The primary action stays disabled until the field has a value.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Modal, Button, Input, Label } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [name, setName] = useState(\"\");\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>New API key</Button>\n\n      <Modal\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        title=\"New API key\"\n        footer={\n          <>\n            <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              onClick={() => setIsOpen(false)}\n              isDisabled={!name.trim()}\n            >\n              Create\n            </Button>\n          </>\n        }\n      >\n        <div className=\"flex flex-col gap-4 px-6 py-4\">\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor=\"key-name\">Name</Label>\n            <Input\n              id=\"key-name\"\n              placeholder=\"e.g. CI deploy key\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n            />\n          </div>\n          <p className=\"text-xs text-foreground-400\">\n            The key will only be shown once after creation.\n          </p>\n        </div>\n      </Modal>\n    </>\n  );\n}"
+  },
+  "05-notification-settings": {
+    "title": "Notification Settings",
+    "description": "Settings panel using the compound Modal.Header / Modal.Body / Modal.Footer API with toggle rows.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Modal, Button, Switch } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [prefs, setPrefs] = useState({ email: true, push: false, marketing: false });\n\n  const toggle = (key: keyof typeof prefs) =>\n    setPrefs((p) => ({ ...p, [key]: !p[key] }));\n\n  return (\n    <>\n      <Button variant=\"ghost\" onClick={() => setIsOpen(true)}>\n        Notification settings\n      </Button>\n\n      <Modal isOpen={isOpen} onOpenChange={setIsOpen}>\n        <Modal.Header>\n          <span className=\"text-sm font-semibold text-foreground-100\">Notification preferences</span>\n        </Modal.Header>\n\n        <Modal.Body>\n          <div className=\"flex flex-col divide-y divide-border px-6\">\n            {(\n              [\n                { key: \"email\", label: \"Email notifications\", description: \"Receive updates and alerts by email\" },\n                { key: \"push\", label: \"Push notifications\", description: \"Browser and mobile push alerts\" },\n                { key: \"marketing\", label: \"Product updates\", description: \"New features and announcements\" },\n              ] as const\n            ).map(({ key, label, description }) => (\n              <div key={key} className=\"flex items-center justify-between py-4\">\n                <div className=\"flex flex-col gap-0.5\">\n                  <span className=\"text-sm text-foreground-100\">{label}</span>\n                  <span className=\"text-xs text-foreground-400\">{description}</span>\n                </div>\n                <Switch isSelected={prefs[key]} onChange={() => toggle(key)} />\n              </div>\n            ))}\n          </div>\n        </Modal.Body>\n\n        <Modal.Footer>\n          <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>\n            Cancel\n          </Button>\n          <Button onClick={() => setIsOpen(false)}>Save</Button>\n        </Modal.Footer>\n      </Modal>\n    </>\n  );\n}"
   }
 }

package/src/components/Modal/index.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import { Modal, Button } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import { FaWindowRestore, FaX } from 'react-icons/fa6';
-import Example1, { metadata as metadata1 } from './examples/01-basic-modal.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-basic-modal', Component: Example1, metadata: metadata1 },
-];
 
 const modalControls: ControlDef[] = [
   {
@@ -83,8 +77,7 @@ export const modalDetail: ComponentDetail = {
           </>
         );
       },
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -103,4 +96,3 @@ export const modalDetail: ComponentDetail = {
 };
 
 export { modalControls };
-export * from './examples/index.js';

package/src/components/Modal/metadata.json

@@ -25,5 +25,45 @@
       "Keyboard dismissal",
       "ARIA dialog role"
     ]
+  },
+  "usage": {
+    "summary": "Use Modal for short, focused dialog tasks that need a dedicated overlay surface and clear dismissal path.",
+    "whenToUse": [
+      "Interruptive tasks that need focused attention",
+      "Short forms, confirmations, or contextual workflows that should not navigate away",
+      "Situations where the dialog itself should provide the only surfaced container"
+    ],
+    "whenNotToUse": [
+      "Long, browse-heavy, or primary page flows",
+      "Cases where inline expansion or a dedicated page would be clearer",
+      "Layouts that require another nested surface just to hold the content"
+    ],
+    "rules": [
+      {
+        "type": "do",
+        "title": "Let Modal be the surface",
+        "description": "Use the modal shell, title, content area, and footer as the dialog structure instead of wrapping the body in another surface component."
+      },
+      {
+        "type": "avoid",
+        "title": "Avoid nested surfaced containers",
+        "description": "Do not place Card or other panel-like surfaces inside the modal body unless there is a strong semantic need for a distinct sub-region.",
+        "relatedComponents": [
+          "card",
+          "panel",
+          "confirm"
+        ]
+      },
+      {
+        "type": "prefer",
+        "title": "Prefer direct content plus layout primitives",
+        "description": "Arrange modal content with Flex, Grid, Group, and Modal footer slots so the hierarchy stays shallow and the dialog reads as a single unit.",
+        "relatedComponents": [
+          "flex",
+          "grid",
+          "group"
+        ]
+      }
+    ]
   }
-}
+}

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

@@ -0,0 +1 @@
+// Panel examples are served from @ui-lab-core/library (private registry)

package/src/components/Panel/examples.json

@@ -1 +1,7 @@
-{}
+{
+  "01-sidebar-toggle": {
+    "title": "Sidebar with Toggle",
+    "description": "Left sidebar that collapses and expands via a toggle button in the content area.",
+    "code": "import { Panel } from \"ui-lab-components\";\n\nexport default function Example() {\n  return (\n    <Panel style={{ height: \"400px\" }} className=\"w-full border border-background-700 rounded-lg bg-background-900\">\n      <Panel.Sidebar side=\"left\" defaultOpen width=\"200px\" collapsedWidth=\"0\">\n      </Panel.Sidebar>\n      <Panel.Content>\n        <Panel.Toggle>\n          <button>☰</button>\n        </Panel.Toggle>\n      </Panel.Content>\n    </Panel>\n  );\n}"
+  }
+}

package/src/components/Panel/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Panel } from 'ui-lab-components'
 import { ControlDef, ComponentDetail } from '@/types'
 
+
 const panelControls: ControlDef[] = [
   {
     name: 'spacing',
@@ -139,7 +140,7 @@ export const panelDetail: ComponentDetail = {
           </Panel>
         </div>
       ),
-    },
+    }
   ],
 }
 

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

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

package/src/components/Path/examples.json

@@ -2,6 +2,16 @@
   "01-basic-path": {
     "title": "Basic Path",
     "description": "A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.",
-    "code": "import { Path, PathItem } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Path>\n      <PathItem href=\"/\">Home</PathItem>\n      <PathItem href=\"/products\">Products</PathItem>\n      <PathItem href=\"/products/electronics\">Electronics</PathItem>\n      <PathItem>Laptop</PathItem>\n    </Path>\n  );\n}"
+    "code": "import { Path } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Path>\n      <Path.Item href=\"/\">Home</Path.Item>\n      <Path.Item href=\"/products\">Products</Path.Item>\n      <Path.Item href=\"/products/electronics\">Electronics</Path.Item>\n      <Path.Item>Laptop</Path.Item>\n    </Path>\n  );\n}"
+  },
+  "02-custom-separator": {
+    "title": "Custom Separator",
+    "description": "Pass any node via the separator prop to replace the default slash.",
+    "code": "import { Path } from \"ui-lab-components\";\nimport { FaChevronRight } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Path separator={<FaChevronRight className=\"w-3 h-3 text-foreground-400\" />}>\n      <Path.Item href=\"/projects\">Projects</Path.Item>\n      <Path.Item href=\"/projects/ui-lab\">ui-lab</Path.Item>\n      <Path.Item>components</Path.Item>\n    </Path>\n  );\n}"
+  },
+  "03-collapsed-breadcrumb": {
+    "title": "Collapsed Breadcrumb",
+    "description": "Deep paths collapse intermediate crumbs into an ellipsis menu — Path.Item wraps the Menu trigger directly.",
+    "code": "import { Path, Menu, Button } from \"ui-lab-components\";\nimport { FaEllipsis } from \"react-icons/fa6\";\n\nconst collapsed = [\n  { label: \"Projects\", href: \"/projects\" },\n  { label: \"ui-lab\", href: \"/projects/ui-lab\" },\n  { label: \"packages\", href: \"/projects/ui-lab/packages\" },\n];\n\nexport default function Example() {\n  return (\n    <Path>\n      <Path.Item href=\"/\">Home</Path.Item>\n      <Path.Item>\n        <Menu type=\"pop-over\">\n          <Menu.Trigger>\n            <Button icon={<FaEllipsis />} styles=\"p-2\" size=\"icon\" variant=\"ghost\" aria-label=\"Show collapsed path\" />\n          </Menu.Trigger>\n          <Menu.Content align=\"start\">\n            {collapsed.map((crumb) => (\n              <Menu.Item key={crumb.href} onSelect={() => {}}>\n                {crumb.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu>\n      </Path.Item>\n      <Path.Item href=\"/projects/ui-lab/packages/@ui\">@ui</Path.Item>\n      <Path.Item>Path.tsx</Path.Item>\n    </Path>\n  );\n}"
   }
 }

package/src/components/Path/index.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
-import { Path, PathItem } from 'ui-lab-components';
+import { Path } from 'ui-lab-components';
 import { ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-path.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-basic-path', Component: Example1, metadata: metadata1 },
-];
 
-const pathBasicCode = `import { Path, PathItem } from "ui-lab-components";
+const pathBasicCode = `import { Path } from "ui-lab-components";
 
 export function Example() {
   return (
     <Path>
-      <PathItem href="/">Home</PathItem>
-      <PathItem href="/products">Products</PathItem>
-      <PathItem>Electronics</PathItem>
+      <Path.Item href="/">Home</Path.Item>
+      <Path.Item href="/products">Products</Path.Item>
+      <Path.Item>Electronics</Path.Item>
     </Path>
   );
 }`;
@@ -43,13 +37,12 @@ export const pathDetail: ComponentDetail = {
       code: pathBasicCode,
       preview: (
         <Path>
-          <PathItem href="/">Home</PathItem>
-          <PathItem href="/products">Products</PathItem>
-          <PathItem>Electronics</PathItem>
+          <Path.Item href="/">Home</Path.Item>
+          <Path.Item href="/products">Products</Path.Item>
+          <Path.Item>Electronics</Path.Item>
         </Path>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -59,13 +52,12 @@ export const pathDetail: ComponentDetail = {
       code: pathBasicCode,
       preview: (
         <Path>
-          <PathItem href="/">Home</PathItem>
-          <PathItem href="/products">Products</PathItem>
-          <PathItem>Electronics</PathItem>
+          <Path.Item href="/">Home</Path.Item>
+          <Path.Item href="/products">Products</Path.Item>
+          <Path.Item>Electronics</Path.Item>
         </Path>
       ),
     },
   ],
 };
 
-export * from './examples/index.js';

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

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

package/src/components/Popover/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-popover": {
-    "title": "Basic Popover",
-    "description": "A simple popover with a trigger button. Use this to display contextual content or actions.",
-    "code": "import React from 'react';\nimport { Popover, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Popover content={<p className=\"text-sm\">This is popover content. It appears when you click the button.</p>}>\n      <Button>Click me</Button>\n    </Popover>\n  );\n}"
+    "title": "Basic",
+    "description": "Default popover with a short note and two clear actions.",
+    "code": "\"use client\";\n\nimport { Popover, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Popover\n      content={\n        <div className=\"w-64 space-y-3\">\n          <div className=\"space-y-1\">\n            <div className=\"text-sm font-medium\">Quick note</div>\n            <p>A popover works best when it adds one small piece of context, one simple choice, or one short action.</p>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"ghost\" size=\"sm\">\n              Dismiss\n            </Button>\n            <Button size=\"sm\">\n              Continue\n            </Button>\n          </div>\n        </div>\n      }\n    >\n      <Button>Show info</Button>\n    </Popover>\n  );\n}"
+  },
+  "02-toggleable-options": {
+    "title": "Toggleable Options",
+    "description": "Popover containing a list of toggleable options using List.Item and List.Switch.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Popover, Button, List } from 'ui-lab-components';\n\nconst toggleableItems = [\n  { id: \"notifications\", label: \"Notifications\", desc: \"Push and email alerts\" },\n  { id: \"autoSave\", label: \"Auto-save\", desc: \"Save changes automatically\" },\n  { id: \"darkMode\", label: \"Dark mode\", desc: \"Use dark color scheme\" },\n];\n\nexport default function Example() {\n  const [enabled, setEnabled] = useState<Set<string>>(\n    () => new Set([\"notifications\", \"darkMode\"])\n  );\n\n  const toggle = (id: string) =>\n    setEnabled((prev) => {\n      const next = new Set(prev);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n\n  return (\n    <Popover\n      position=\"bottom\"\n      content={\n        <List items={toggleableItems} spacing=\"sm\" style={{ width: 280 }}>\n          {toggleableItems.map((item) => (\n            <List.Item\n              key={item.id}\n              value={item.id}\n              interactive\n              onClick={() => toggle(item.id)}\n            >\n              <div className=\"min-w-0 flex-1\">\n                <List.Title>{item.label}</List.Title>\n                <List.Desc>{item.desc}</List.Desc>\n              </div>\n              <List.Switch\n                isSelected={enabled.has(item.id)}\n                onChange={() => toggle(item.id)}\n                aria-label={item.label}\n              />\n            </List.Item>\n          ))}\n        </List>\n      }\n    >\n      <Button>Options</Button>\n    </Popover>\n  );\n}"
+  },
+  "03-table-row-actions": {
+    "title": "Table Row Actions",
+    "description": "Per-row action menu in a data table, anchored to the overflow button.",
+    "code": "\"use client\";\n\nimport { Popover, Button, List } from 'ui-lab-components';\nimport { FaEllipsis } from 'react-icons/fa6';\n\nconst rows = [\n  { id: \"usr_1\", name: \"Alice\", role: \"Admin\", status: \"Active\" },\n  { id: \"usr_2\", name: \"Bob\", role: \"Member\", status: \"Invited\" },\n  { id: \"usr_3\", name: \"Carol\", role: \"Viewer\", status: \"Active\" },\n];\n\nexport default function Example() {\n  return (\n    <table className=\"w-full text-sm border-collapse\">\n      <thead>\n        <tr className=\"border-b border-background-700\">\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Name</th>\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Role</th>\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Status</th>\n          <th className=\"py-2 px-3\" />\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.id} className=\"border-b border-background-700 last:border-0\">\n            <td className=\"py-2 px-3\">{row.name}</td>\n            <td className=\"py-2 px-3 text-foreground-200\">{row.role}</td>\n            <td className=\"py-2 px-3 text-foreground-200\">{row.status}</td>\n            <td className=\"py-2 px-3 text-right\">\n              <Popover\n                position=\"left\"\n                content={\n                  <List gap=\"sm\" styles={{ root: \"w-full\" }}>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      styles={{ root: \"justify-start\" }}\n                    >\n                      Edit {row.name}\n                    </Button>\n                    <Button\n                      variant=\"danger\"\n                      size=\"sm\"\n                      styles={{ root: \"justify-start\" }}\n                    >\n                      Remove {row.name}\n                    </Button>\n                  </List>\n                }\n              >\n                <Button icon={<FaEllipsis />} styles=\"p-2\" size=\"icon\" variant=\"ghost\" aria-label={`Row actions for ${row.name}`} />\n              </Popover>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}"
+  },
+  "04-input-form": {
+    "title": "Input Form",
+    "description": "Popover containing a small form with labeled input fields and save/cancel actions.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Popover, Button, Flex, Label, Input } from 'ui-lab-components';\n\nexport default function Example() {\n  const [name, setName] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n\n  return (\n    <Popover\n      position=\"bottom\"\n      content={\n        <Flex direction=\"column\" gap=\"sm\" styles={{ root: \"w-80\" }}>\n          <Flex direction=\"column\" gap=\"xs\">\n            <Label htmlFor=\"contact-name\">Name</Label>\n            <Input\n              id=\"contact-name\"\n              type=\"text\"\n              value={name}\n              onChange={(e) => setName((e.target as HTMLInputElement).value)}\n              placeholder=\"Full name\"\n            />\n          </Flex>\n          <Flex direction=\"column\" gap=\"xs\">\n            <Label htmlFor=\"contact-email\">Email</Label>\n            <Input\n              id=\"contact-email\"\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail((e.target as HTMLInputElement).value)}\n              placeholder=\"name@example.com\"\n            />\n          </Flex>\n        </Flex>\n      }\n    >\n      <Button>Edit contact</Button>\n    </Popover>\n  );\n}"
+  },
+  "05-arrow-positions": {
+    "title": "Arrow & Positions",
+    "description": "Directional arrow enabled across all four placement options.",
+    "code": "\"use client\";\n\nimport { Popover, Button, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex align=\"center\">\n      {([\"top\", \"bottom\", \"left\", \"right\"] as const).map((position) => (\n        <Popover\n          key={position}\n          position={position}\n          showArrow\n          content={<span className=\"text-sm capitalize\">{position}</span>}\n        >\n          <Button variant=\"ghost\">\n            <span className=\"capitalize\">{position}</span>\n          </Button>\n        </Popover>\n      ))}\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Popover/index.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import { Button, Frame, Popover } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-popover.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaQuestion } from 'react-icons/fa6';
 
 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";
 
-const examplesData = [
-  { id: '01-basic-popover', Component: Example1, metadata: metadata1 },
-];
 
 const popoverControls: ControlDef[] = [
   {
@@ -76,8 +70,7 @@ export const popoverDetail: ComponentDetail = {
           <Button>Click me</Button>
         </Popover>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -120,4 +113,3 @@ export const popoverDetail: ComponentDetail = {
 };
 
 export { popoverControls };
-export * from './examples/index.js';

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

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

package/src/components/Progress/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-progress": {
-    "title": "Basic Progress",
-    "description": "A simple progress bar showing completion at 65%. Use this to display task or loading progress in your interface.",
-    "code": "import React from 'react';\nimport { Progress } from 'ui-lab-components';\n\nexport default function Example() {\n  return <Progress value={65} />;\n}"
+    "title": "File Upload",
+    "description": "Simulated upload progress with a label and live percentage — starts on button click.",
+    "code": "\"use client\";\n\nimport { useState, useEffect } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [progress, setProgress] = useState(0);\n  const [running, setRunning] = useState(false);\n\n  useEffect(() => {\n    if (!running) return;\n    if (progress >= 100) { setRunning(false); return; }\n    const t = setTimeout(() => setProgress((p) => Math.min(p + Math.random() * 12, 100)), 200);\n    return () => clearTimeout(t);\n  }, [running, progress]);\n\n  const reset = () => { setProgress(0); setRunning(false); };\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 340 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n          report-q4-2025.pdf\n        </span>\n        <Progress value={progress} label=\"Uploading\" showValue />\n      </Flex>\n      <Flex gap=\"sm\">\n        <Button variant=\"primary\" onClick={() => setRunning(true)} disabled={running || progress === 100}>\n          {progress === 100 ? \"Done\" : \"Upload\"}\n        </Button>\n        <Button variant=\"ghost\" onClick={reset}>Reset</Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "02-storage-quota": {
+    "title": "Storage Quota",
+    "description": "Fixed progress bar showing disk usage relative to a custom max value.",
+    "code": "import { Progress, Flex } from 'ui-lab-components';\n\nconst used = 7.4;\nconst total = 10;\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <Progress value={used} max={total} label=\"Storage\" showValue />\n        <span style={{ fontSize: \"var(--text-xs)\", color: \"var(--foreground-muted)\" }}>\n          {used} GB of {total} GB used\n        </span>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "03-onboarding-steps": {
+    "title": "Onboarding Steps",
+    "description": "Step tracker using value/max to represent wizard completion.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nconst steps = [\"Profile\", \"Preferences\", \"Integrations\", \"Invite team\"];\n\nexport default function Example() {\n  const [step, setStep] = useState(1);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 340 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <Progress value={step} max={steps.length} />\n        <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n          Step {step} of {steps.length} — {steps[step - 1]}\n        </span>\n      </Flex>\n      <Flex gap=\"sm\">\n        <Button variant=\"ghost\" onClick={() => setStep((s) => Math.max(1, s - 1))} disabled={step === 1}>\n          Back\n        </Button>\n        <Button variant=\"primary\" onClick={() => setStep((s) => Math.min(steps.length, s + 1))} disabled={step === steps.length}>\n          Next\n        </Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "04-indeterminate": {
+    "title": "Indeterminate Loading",
+    "description": "Animated bar for unknown-duration operations — switches to complete when done.",
+    "code": "\"use client\";\n\nimport { useState, useEffect } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    if (!loading) return;\n    const t = setTimeout(() => setLoading(false), 3000);\n    return () => clearTimeout(t);\n  }, [loading]);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 320 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n          {loading ? \"Fetching results…\" : \"Results loaded\"}\n        </span>\n        <Progress indeterminate={loading} value={loading ? 0 : 100} />\n      </Flex>\n      <Button variant=\"ghost\" onClick={() => setLoading(true)} disabled={loading}>\n        Reload\n      </Button>\n    </Flex>\n  );\n}"
+  },
+  "05-skill-levels": {
+    "title": "Skill Levels",
+    "description": "Stacked progress bars in a profile or stats context with labels and values.",
+    "code": "import { Progress, Flex } from 'ui-lab-components';\n\nconst skills = [\n  { name: \"TypeScript\", value: 92 },\n  { name: \"Rust\", value: 54 },\n  { name: \"Go\", value: 38 },\n];\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 300 }}>\n      {skills.map((s) => (\n        <Progress key={s.name} value={s.value} label={s.name} showValue />\n      ))}\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Progress/index.tsx

@@ -1,27 +1,8 @@
 import React from 'react';
 import { Progress } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-progress.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-const examplesData = [
-  { id: '01-basic-progress', Component: Example1, metadata: metadata1 },
-];
-
 
 const progressControls: ControlDef[] = [
-  {
-    name: "size",
-    label: "Size",
-    type: "select",
-    options: [
-      { label: "Small", value: "sm" },
-      { label: "Medium", value: "md" },
-      { label: "Large", value: "lg" },
-    ],
-    defaultValue: "md",
-  },
   {
     name: "variant",
     label: "Variant",
@@ -71,14 +52,14 @@ export const progressDetail: ComponentDetail = {
   id: "progress",
   name: "Progress",
   description:
-    "A horizontal progress bar with configurable value, variants, and sizes. Supports determinate and indeterminate states.",
+    "A horizontal progress bar with configurable value and variants. Supports determinate and indeterminate states.",
   overview: (
     <div className="space-y-4 text-foreground-300">
       <p>
         The Progress component displays a horizontal bar that fills based on a percentage value. It's ideal for showing loading states, upload progress, completion status, and other metrics.
       </p>
       <p>
-        Progress bars support multiple sizes, semantic color variants, and an indeterminate mode for unknown durations. Labels and percentage values can be displayed for additional context.
+        Progress bars support semantic color variants and an indeterminate mode for unknown durations. Labels and percentage values can be displayed for additional context.
       </p>
     </div>
   ),
@@ -94,14 +75,12 @@ export const progressDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Progress
           value={parseInt(props.value as string)}
-          size={props.size as any}
           variant={props.variant as any}
           indeterminate={props.indeterminate}
           showValue={props.showValue}
         />
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
 
   variants: [
@@ -123,4 +102,3 @@ export const progressDetail: ComponentDetail = {
 };
 
 export { progressControls };
-export * from './examples/index.js';

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

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

package/src/components/Radio/index.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import { Radio } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-radio.js';
-import Example2, { metadata as metadata2 } from './examples/02-radio-with-descriptions.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-basic-radio', Component: Example1, metadata: metadata1 },
-  { id: '02-radio-with-descriptions', Component: Example2, metadata: metadata2 },
-];
 
 
 const radioControls: ControlDef[] = [
@@ -88,8 +80,7 @@ export const radioDetail: ComponentDetail = {
           label={props.label}
         />
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -111,4 +102,3 @@ export const radioDetail: ComponentDetail = {
 };
 
 export { radioControls };
-export * from './examples/index.js';

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

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

package/src/components/Scroll/examples.json

@@ -1,7 +1,17 @@
 {
   "01-basic-scroll": {
-    "title": "Basic Scroll",
-    "description": "A simple scrollable container with fixed height. Use this to display overflow content in a constrained space.",
-    "code": "import { Scroll } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className='overflow-hidden' style={{ height: '200px', width: '300px' }}>\n      <Scroll>\n        <div>\n          <p>This is scrollable content.</p>\n          <p>Add more content here to see scrolling in action.</p>\n          <p>The Scroll component manages overflow elegantly.</p>\n          <p>You can scroll through all of this content.</p>\n          <p>Perfect for constrained layouts.</p>\n        </div>\n      </Scroll>\n    </div>\n  );\n}"
+    "title": "Log Viewer",
+    "description": "Vertically scrollable log output with fade mask to hint at overflow content.",
+    "code": "import { Scroll } from 'ui-lab-components';\n\nconst LOG_ENTRIES = [\n  { level: \"info\", msg: \"Server started on port 3000\" },\n  { level: \"info\", msg: \"Connected to database\" },\n  { level: \"warn\", msg: \"Slow query detected: users.findAll (342ms)\" },\n  { level: \"error\", msg: \"Failed to send email: SMTP timeout\" },\n  { level: \"info\", msg: \"Cache warmed: 1,204 keys loaded\" },\n  { level: \"info\", msg: \"Background job 'sync-orders' started\" },\n  { level: \"warn\", msg: \"Memory usage at 78%\" },\n  { level: \"info\", msg: \"Background job 'sync-orders' completed\" },\n  { level: \"error\", msg: \"Unhandled rejection: Cannot read property 'id' of undefined\" },\n  { level: \"info\", msg: \"Health check passed\" },\n  { level: \"warn\", msg: \"Rate limit reached for IP 192.168.1.42\" },\n  { level: \"info\", msg: \"User #4821 logged in\" },\n  { level: \"info\", msg: \"Deployment complete: v2.14.0\" },\n];\n\nexport default function Example() {\n  return (\n    <div style={{ width: 480, display: 'flex', flexDirection: 'column', gap: 4 }}>\n      <span style={{ fontSize: 11, color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>\n        Application Logs\n      </span>\n      <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, background: 'var(--color-background-900)', overflow: 'hidden' }}>\n        <Scroll maxHeight=\"200px\" fade-y fadeDistance={8} fadeSize={5}>\n          <div style={{ padding: '8px 0' }}>\n            {LOG_ENTRIES.map((entry, i) => (\n              <div key={i} style={{\n                display: 'flex',\n                gap: 10,\n                padding: '3px 12px',\n                fontSize: 12,\n                fontFamily: 'var(--font-mono, monospace)',\n                color: entry.level === 'error'\n                  ? 'var(--color-destructive)'\n                  : entry.level === 'warn'\n                    ? 'var(--color-warning, var(--color-muted))'\n                    : 'var(--color-foreground)',\n              }}>\n                <span style={{ color: 'var(--color-muted)', minWidth: 36 }}>{entry.level}</span>\n                <span>{entry.msg}</span>\n              </div>\n            ))}\n          </div>\n        </Scroll>\n      </div>\n    </div>\n  );\n}"
+  },
+  "02-settings-panel": {
+    "title": "Settings Panel",
+    "description": "Constrained-height settings list with a custom scrollbar shown on hover.",
+    "code": "import { Scroll } from 'ui-lab-components';\n\nconst SETTINGS_ITEMS = Array.from({ length: 18 }, (_, i) => ({\n  label: `Option ${i + 1}`,\n  description: `Configure behavior for setting ${i + 1}`,\n}));\n\nexport default function Example() {\n  return (\n    <div style={{ width: 320, border: '1px solid var(--color-border)', borderRadius: 8, overflow: 'hidden', background: 'var(--color-background)' }}>\n      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--color-border)', fontSize: 13, fontWeight: 500 }}>\n        Preferences\n      </div>\n      <Scroll maxHeight=\"240px\">\n        <div style={{ padding: '8px 0' }}>\n          {SETTINGS_ITEMS.map((item, i) => (\n            <div key={i} style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'center',\n              padding: '8px 16px',\n              fontSize: 13,\n              borderBottom: i < SETTINGS_ITEMS.length - 1 ? '1px solid var(--color-border)' : undefined,\n            }}>\n              <div>\n                <div style={{ color: 'var(--color-foreground)' }}>{item.label}</div>\n                <div style={{ fontSize: 11, color: 'var(--color-muted)', marginTop: 1 }}>{item.description}</div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </Scroll>\n    </div>\n  );\n}"
+  },
+  "03-horizontal-tags": {
+    "title": "Horizontal Tag List",
+    "description": "Horizontally scrollable row of filter tags that overflow their container.",
+    "code": "import { Scroll } from 'ui-lab-components';\n\nconst TAGS = [\n  \"authentication\", \"payments\", \"webhooks\", \"analytics\", \"notifications\",\n  \"billing\", \"user-management\", \"api-keys\", \"rate-limiting\", \"audit-logs\",\n  \"exports\", \"integrations\", \"search\", \"permissions\", \"reports\",\n];\n\nexport default function Example() {\n  return (\n    <div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 6 }}>\n      <span style={{ fontSize: 12, color: 'var(--color-muted)' }}>Filter by topic</span>\n      <Scroll direction=\"horizontal\" maxWidth=\"420px\" hide={false} inline>\n        <div style={{ display: 'flex', gap: 6, padding: '2px 0' }}>\n          {TAGS.map((tag) => (\n            <span key={tag} style={{\n              whiteSpace: 'nowrap',\n              padding: '3px 10px',\n              border: '1px solid var(--color-border)',\n              borderRadius: 4,\n              fontSize: 12,\n              color: 'var(--color-foreground)',\n              cursor: 'default',\n              background: 'var(--color-background-900)',\n            }}>\n              {tag}\n            </span>\n          ))}\n        </div>\n      </Scroll>\n    </div>\n  );\n}"
   }
 }

package/src/components/Scroll/index.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 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 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 },
-];
 
 
 const scrollControls: ControlDef[] = [
@@ -89,8 +83,7 @@ export const scrollDetail: ComponentDetail = {
           </div>
         </Scroll>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -125,4 +118,3 @@ export const scrollDetail: ComponentDetail = {
 };
 
 export { scrollControls };
-export * from './examples/index.js';

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

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

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

@@ -1,16 +1,8 @@
 import React from 'react';
 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 examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaChevronDown } from 'react-icons/fa6';
 
-const examplesData = [
-  { id: '01-basic-select', Component: Example1, metadata: metadata1 },
-  { id: '02-searchable-select', Component: Example2, metadata: metadata2 },
-];
 
 const selectControls: ControlDef[] = [
   { name: "placeholder", label: "Placeholder", type: "text", defaultValue: "Select an option" },
@@ -81,8 +73,7 @@ export const selectDetail: ComponentDetail = {
           </Select.Content>
         </Select>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
   variants: [
     {
@@ -109,4 +100,3 @@ export const selectDetail: ComponentDetail = {
 };
 
 export { selectControls };
-export * from './examples/index.js';

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

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