ui-lab-registry 0.3.0 → 0.3.2

package/src/components/Checkbox/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-checkbox.js';
 import Example2, { metadata as metadata2 } from './examples/02-checkbox-group-with-descriptions.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaCheck } from 'react-icons/fa6';
 
 const examplesData = [
@@ -109,4 +109,4 @@ export const checkboxDetail: ComponentDetail = {
 };
 
 export { checkboxControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Code/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "code",
   "name": "Code",
-  "description": "Syntax-highlighted code display with horizontal scroll, line expand, and copy button.",
+  "description": "Displays syntax-highlighted code with a built-in copy button.",
   "category": "display",
   "experimental": true,
   "source": {

package/src/components/Color/examples/03-format-switching.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Color } from 'ui-lab-components';
 
-export const metadata = {
+const metadata = {
   title: 'Format Switching',
   description: 'Color picker with format toggle between hex and RGB to copy colors in different formats.'
 };
@@ -23,7 +23,7 @@ export default function Example() {
           </p>
           <button
             onClick={handleFormatChange}
-            className="px-3 py-1 text-xs bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors"
+            className="px-3 py-1 text-sm bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors"
           >
             Format: {format.toUpperCase()}
           </button>
@@ -36,7 +36,7 @@ export default function Example() {
         />
       </div>
       <div className="mt-4 p-3 bg-foreground-400 rounded border border-foreground-400">
-        <p className="text-xs text-foreground-300">
+        <p className="text-sm text-foreground-300">
           <strong>Tip:</strong> Click the format button to switch between hex and RGB output formats.
           This is useful when you need to copy colors in different formats for different contexts.
         </p>

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

@@ -1,3 +1,3 @@
-export { default as BasicColor } from './01-basic-color';
-export { default as OpacitySlider } from './02-opacity-slider';
-export { default as FormatSwitching } from './03-format-switching';
+export { default as BasicColor } from './01-basic-color.js';
+export { default as OpacitySlider } from './02-opacity-slider.js';
+export { default as FormatSwitching } from './03-format-switching.js';

package/src/components/Color/examples.json

@@ -8,10 +8,5 @@
     "title": "Opacity Slider",
     "description": "Color picker with opacity/alpha slider enabled for transparent color selection.",
     "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n        <Color\n          value={color}\n          onChange={setColor}\n          showOpacity\n          format=\"rgb\"\n          defaultValue=\"rgba(106, 90, 205, 0.75)\"\n        />\n      </div>\n    </div>\n  );\n}"
-  },
-  "03-format-switching": {
-    "title": "Format Switching",
-    "description": "Color picker with format toggle between hex and RGB to copy colors in different formats.",
-    "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#3B82F6');\n  const [format, setFormat] = useState<'hex' | 'rgb'>('hex');\n\n  const handleFormatChange = () => {\n    setFormat(format === 'hex' ? 'rgb' : 'hex');\n  };\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <div className=\"flex items-center justify-between mb-3\">\n          <p className=\"text-sm text-foreground-300\">\n            Selected color: <code className=\"text-accent-500 font-mono\">{color}</code>\n          </p>\n          <button\n            onClick={handleFormatChange}\n            className=\"px-3 py-1 text-xs bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors\"\n          >\n            Format: {format.toUpperCase()}\n          </button>\n        </div>\n        <Color\n          value={color}\n          onChange={setColor}\n          format={format}\n          defaultValue=\"#3B82F6\"\n        />\n      </div>\n      <div className=\"mt-4 p-3 bg-foreground-400 rounded border border-foreground-400\">\n        <p className=\"text-xs text-foreground-300\">\n          <strong>Tip:</strong> Click the format button to switch between hex and RGB output formats.\n          This is useful when you need to copy colors in different formats for different contexts.\n        </p>\n      </div>\n    </div>\n  );\n}"
   }
 }

package/src/components/Color/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-color.js';
 import Example2, { metadata as metadata2 } from './examples/02-opacity-slider.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 // Define examplesData locally
 const examplesData = [
@@ -102,4 +102,4 @@ export const colorDetail: ComponentDetail = {
 };
 
 export { colorControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Command/examples/01-basic-command.tsx

@@ -45,7 +45,7 @@ export default function Example() {
         onOpenChange={setOpen}
         items={commands}
       >
-        <Command.SearchInput placeholder="Search commands..." />
+        <Command.Input placeholder="Search commands..." />
         <Command.List>
           <Command.Groups
             renderCategory={(category) =>

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

@@ -1,2 +1,2 @@
-export { default as Example1 } from './01-basic-command';
-export { metadata as metadata1 } from './01-basic-command';
+export { default as Example1 } from './01-basic-command.js';
+export { metadata as metadata1 } from './01-basic-command.js';

package/src/components/Command/examples.json

@@ -2,6 +2,6 @@
   "01-basic-command": {
     "title": "Basic Command Palette",
     "description": "A searchable command palette with keyboard shortcuts. Use Cmd+K (or Ctrl+K) to open.",
-    "code": "'use client';\n\nimport React from 'react';\nimport { Command, Button, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n\n  const commands = [\n    {\n      id: 'search',\n      label: 'Search',\n      description: 'Search documents',\n      shortcut: '⌘F',\n      action: () => console.log('Search'),\n    },\n    {\n      id: 'create',\n      label: 'Create new',\n      description: 'Create a new document',\n      shortcut: '⌘N',\n      action: () => console.log('Create'),\n    },\n    {\n      id: 'settings',\n      label: 'Settings',\n      description: 'Open application settings',\n      shortcut: '⌘,',\n      action: () => console.log('Settings'),\n    },\n  ];\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>\n        Open Palette (⌘K)\n      </Button>\n      <Command\n        open={open}\n        onOpenChange={setOpen}\n        items={commands}\n      >\n        <Command.SearchInput placeholder=\"Search commands...\" />\n        <Command.List>\n          <Command.Groups\n            renderCategory={(category) =>\n              category ? <Command.Category>{category}</Command.Category> : null\n            }\n            renderItem={(cmd) => (\n              <Command.Item\n                key={cmd.id}\n                value={cmd.id}\n                textValue={cmd.label}\n                action={cmd.action}\n                hint={cmd.shortcut}\n              >\n                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n                  <div>\n                    <div style={{ fontWeight: 500 }}>{cmd.label}</div>\n                    {cmd.description && (\n                      <div style={{ fontSize: '0.875em', opacity: 0.7 }}>\n                        {cmd.description}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </Command.Item>\n            )}\n          />\n        </Command.List>\n      </Command>\n    </>\n  );\n}"
+    "code": "'use client';\n\nimport React from 'react';\nimport { Command, Button, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n\n  const commands = [\n    {\n      id: 'search',\n      label: 'Search',\n      description: 'Search documents',\n      shortcut: '⌘F',\n      action: () => console.log('Search'),\n    },\n    {\n      id: 'create',\n      label: 'Create new',\n      description: 'Create a new document',\n      shortcut: '⌘N',\n      action: () => console.log('Create'),\n    },\n    {\n      id: 'settings',\n      label: 'Settings',\n      description: 'Open application settings',\n      shortcut: '⌘,',\n      action: () => console.log('Settings'),\n    },\n  ];\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>\n        Open Palette (⌘K)\n      </Button>\n      <Command\n        open={open}\n        onOpenChange={setOpen}\n        items={commands}\n      >\n        <Command.Input placeholder=\"Search commands...\" />\n        <Command.List>\n          <Command.Groups\n            renderCategory={(category) =>\n              category ? <Command.Category>{category}</Command.Category> : null\n            }\n            renderItem={(cmd) => (\n              <Command.Item\n                key={cmd.id}\n                value={cmd.id}\n                textValue={cmd.label}\n                action={cmd.action}\n                hint={cmd.shortcut}\n              >\n                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n                  <div>\n                    <div style={{ fontWeight: 500 }}>{cmd.label}</div>\n                    {cmd.description && (\n                      <div style={{ fontSize: '0.875em', opacity: 0.7 }}>\n                        {cmd.description}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </Command.Item>\n            )}\n          />\n        </Command.List>\n      </Command>\n    </>\n  );\n}"
   }
 }

package/src/components/Command/index.tsx

@@ -3,7 +3,7 @@ import { Command, Button, type Command as CommandType } from 'ui-lab-components'
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-command.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-command', Component: Example1, metadata: metadata1 },
@@ -51,7 +51,7 @@ export function Example() {
         onOpenChange={setOpen}
         items={commands}
       >
-        <Command.SearchInput placeholder="Search..." />
+        <Command.Input placeholder="Search..." />
         <Command.List>
           <Command.Groups
             renderItem={(cmd) => (
@@ -95,7 +95,7 @@ const CommandPreview = () => {
     <>
       <Button onClick={() => setOpen(true)}>Open Palette</Button>
       <Command open={open} onOpenChange={setOpen} items={commands}>
-        <Command.SearchInput placeholder="Search..." />
+        <Command.Input placeholder="Search..." />
         <Command.List>
           <Command.Groups
             renderItem={(cmd) => (
@@ -146,7 +146,7 @@ const CommandRenderPreview = (props: any) => {
         }}
         items={commands}
       >
-        <Command.SearchInput placeholder="Search..." />
+        <Command.Input placeholder="Search..." />
         <Command.List>
           <Command.Groups
             renderItem={(cmd) => (
@@ -206,4 +206,4 @@ export const commandDetail: ComponentDetail = {
 };
 
 export { commandControls };
-export * from './examples/index';
+export * from './examples/index.js';

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

@@ -1,2 +1,2 @@
-export { default as Example1 } from './01-basic-confirm';
-export { metadata as metadata1 } from './01-basic-confirm';
+export { default as Example1 } from './01-basic-confirm.js';
+export { metadata as metadata1 } from './01-basic-confirm.js';

package/src/components/Confirm/index.tsx

@@ -3,7 +3,7 @@ import { Confirm } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-confirm.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaCheck, FaX } from 'react-icons/fa6';
 
 const examplesData = [
@@ -115,4 +115,4 @@ export const confirmDetail: ComponentDetail = {
 };
 
 export { confirmControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Date/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types'
 import Example1, { metadata as metadata1 } from './examples/01-basic-date.js'
 import Example2, { metadata as metadata2 } from './examples/02-with-disabled-dates.js'
 import examplesJson from './examples.json' with { type: 'json' }
-import { loadComponentExamples } from '../../utils/load-component-examples'
+import { loadComponentExamples } from '../../utils/load-component-examples.js'
 
 const examplesData = [
   { id: '01-basic-date', Component: Example1, metadata: metadata1 },

package/src/components/Date/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "date",
   "name": "Date",
-  "description": "Minimal date picker with keyboard navigation and full accessibility support.",
+  "description": "Calendar date picker with keyboard navigation and accessibility.",
   "category": "input",
   "source": {
     "packageName": "ui-lab-components",

package/src/components/Divider/examples/02-pattern-variants.tsx

@@ -9,15 +9,15 @@ export default function Example() {
   return (
     <div className="space-y-6 w-full">
       <div className="space-y-2">
-        <span className="text-xs text-foreground-400">Solid</span>
+        <span className="text-sm text-foreground-400">Solid</span>
         <Divider variant="solid" />
       </div>
       <div className="space-y-2">
-        <span className="text-xs text-foreground-400">Dashed</span>
+        <span className="text-sm text-foreground-400">Dashed</span>
         <Divider variant="dashed" />
       </div>
       <div className="space-y-2">
-        <span className="text-xs text-foreground-400">Dotted</span>
+        <span className="text-sm text-foreground-400">Dotted</span>
         <Divider variant="dotted" />
       </div>
     </div>

package/src/components/Divider/examples.json

@@ -7,7 +7,7 @@
   "02-pattern-variants": {
     "title": "Pattern Variants",
     "description": "Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.",
-    "code": "import { Divider } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"space-y-6 w-full\">\n      <div className=\"space-y-2\">\n        <span className=\"text-xs text-foreground-400\">Solid</span>\n        <Divider variant=\"solid\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-xs text-foreground-400\">Dashed</span>\n        <Divider variant=\"dashed\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-xs text-foreground-400\">Dotted</span>\n        <Divider variant=\"dotted\" />\n      </div>\n    </div>\n  );\n}"
+    "code": "import { Divider } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"space-y-6 w-full\">\n      <div className=\"space-y-2\">\n        <span className=\"text-sm text-foreground-400\">Solid</span>\n        <Divider variant=\"solid\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-sm text-foreground-400\">Dashed</span>\n        <Divider variant=\"dashed\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-sm text-foreground-400\">Dotted</span>\n        <Divider variant=\"dotted\" />\n      </div>\n    </div>\n  );\n}"
   },
   "03-vertical-divider": {
     "title": "Vertical Orientation",

package/src/components/Divider/index.tsx

@@ -11,7 +11,7 @@ import Example3, {
   metadata as metadata3,
 } from "./examples/03-vertical-divider.js";
 import examplesJson from "./examples.json";
-import { loadComponentExamples } from "../../utils/load-component-examples";
+import { loadComponentExamples } from "../../utils/load-component-examples.js";
 
 // Define examplesData locally
 const examplesData = [
@@ -107,4 +107,4 @@ export const dividerDetail: ComponentDetail = {
 };
 
 export { dividerControls };
-export * from "./examples/index";
+export * from "./examples/index.js";

package/src/components/Expand/index.tsx

@@ -3,7 +3,7 @@ import { Expand } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-expand.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaChevronDown } from 'react-icons/fa6';
 
 // Define examplesData locally
@@ -99,4 +99,4 @@ export const expandDetail: ComponentDetail = {
 };
 
 export { expandControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Flex/index.tsx

@@ -3,7 +3,7 @@ import { Flex } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-flex.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 // Define examplesData locally
 const examplesData = [
@@ -159,4 +159,4 @@ export const flexDetail: ComponentDetail = {
 };
 
 export { flexControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Flex/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "flex",
   "name": "Flex",
-  "description": "Flexible layout component with container query support for responsive designs.",
+  "description": "Flexbox layout primitive with container query support for UIs.",
   "category": "layout",
   "source": {
     "packageName": "ui-lab-components",

package/src/components/Frame/index.tsx

@@ -5,7 +5,7 @@ import Example1, { metadata as metadata1 } from './examples/01-default-frame.js'
 import Example2, { metadata as metadata2 } from './examples/02-tooltip-example.js';
 import Example3, { metadata as metadata3 } from './examples/03-sidebar-tab.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-default-frame', Component: Example1, metadata: metadata1 },
@@ -88,4 +88,4 @@ export const frameDetail: ComponentDetail = {
 };
 
 export { frameControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Gallery/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import { FaImage } from 'react-icons/fa6';
 import Example1, { metadata as metadata1 } from './examples/01-basic-gallery.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-gallery', Component: Example1, metadata: metadata1 },
@@ -145,4 +145,4 @@ export const galleryDetail: ComponentDetail = {
 };
 
 export { galleryControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Gallery/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery",
   "name": "Gallery",
-  "description": "Responsive grid layout for displaying media content, images, videos, and product cards.",
+  "description": "Responsive grid layout for displaying images and media items.",
   "category": "layout",
   "source": {
     "packageName": "ui-lab-components",

package/src/components/Grid/examples/01-basic-grid.tsx

@@ -8,7 +8,7 @@ export const metadata = {
 
 export default function Example() {
   return (
-    <Grid columns="3" gap="md">
+    <Grid columns={3} gap="md">
       <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>
       <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>
       <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>

package/src/components/Grid/examples.json

@@ -2,6 +2,6 @@
   "01-basic-grid": {
     "title": "Basic Grid",
     "description": "A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.",
-    "code": "import React from 'react';\nimport { Grid } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Grid columns=\"3\" gap=\"md\">\n      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>\n      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>\n      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>\n      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>\n      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>\n      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>\n    </Grid>\n  );\n}"
+    "code": "import React from 'react';\nimport { Grid } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Grid columns={3} gap=\"md\">\n      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>\n      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>\n      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>\n      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>\n      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>\n      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>\n    </Grid>\n  );\n}"
   }
 }

package/src/components/Grid/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Divider, Grid } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-grid';
+import Example1, { metadata as metadata1 } from './examples/01-basic-grid.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-grid', Component: Example1, metadata: metadata1 },
@@ -82,7 +82,7 @@ const gridBasicCode = `import { Grid } from "ui-lab-components";
 
 export function Example() {
   return (
-    <Grid columns="3" gap="md">
+    <Grid columns={3} gap="md">
       <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">1</div>
       <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">2</div>
       <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">3</div>
@@ -147,7 +147,7 @@ export const gridDetail: ComponentDetail = {
       description: 'Standard grid with 3 columns and medium gap.',
       code: gridBasicCode,
       preview: (
-        <Grid columns="3" gap="md">
+        <Grid columns={3} gap="md">
           <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">1</div>
           <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">2</div>
           <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">3</div>
@@ -161,4 +161,4 @@ export const gridDetail: ComponentDetail = {
 };
 
 export { gridControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Group/index.tsx

@@ -3,7 +3,7 @@ import { Divider, Group } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-group.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-group', Component: Example1, metadata: metadata1 },
@@ -132,4 +132,4 @@ export const groupDetail: ComponentDetail = {
 };
 
 export { groupControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Group/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "group",
   "name": "Group",
-  "description": "Flexible container for grouping Button, Input, and Select components with unified styling.",
+  "description": "Groups Button, Input, and Select with unified border styling.",
   "category": "composition",
   "experimental": true,
   "source": {

package/src/components/Input/examples/02-validation.tsx

@@ -20,7 +20,7 @@ export default function Example() {
           placeholder="Enter your email"
           error
           defaultValue="invalid-email"
-          suffixIcon={<FaCircleExclamation className="text-danger-600" size={14} />}
+          icon={{ suffix: <FaCircleExclamation className="text-danger-600" size={14} /> }}
         />
       </div>
 
@@ -33,7 +33,7 @@ export default function Example() {
           type="email"
           placeholder="Enter your email"
           defaultValue="user@example.com"
-          suffixIcon={<FaCircleCheck className="text-success-600" size={14} />}
+          icon={{ suffix: <FaCircleCheck className="text-success-600" size={14} /> }}
           className="border-success-600 focus:border-success-600"
         />
       </div>

package/src/components/Input/examples.json

@@ -7,6 +7,6 @@
   "02-validation": {
     "title": "Validation States",
     "description": "Input fields with error and success validation states, including helper text for user feedback.",
-    "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n      {/* Error State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label error helperText=\"Please enter a valid email address\" helperTextError>\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          error\n          defaultValue=\"invalid-email\"\n          suffixIcon={<FaCircleExclamation className=\"text-danger-600\" size={14} />}\n        />\n      </div>\n\n      {/* Success State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label helperText=\"Email address is available\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          defaultValue=\"user@example.com\"\n          suffixIcon={<FaCircleCheck className=\"text-success-600\" size={14} />}\n          className=\"border-success-600 focus:border-success-600\"\n        />\n      </div>\n\n      {/* Default State with Helper Text */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label required helperText=\"We'll never share your email with anyone else.\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n        />\n      </div>\n    </div>\n  );\n}"
+    "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n      {/* Error State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label error helperText=\"Please enter a valid email address\" helperTextError>\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          error\n          defaultValue=\"invalid-email\"\n          icon={{ suffix: <FaCircleExclamation className=\"text-danger-600\" size={14} /> }}\n        />\n      </div>\n\n      {/* Success State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label helperText=\"Email address is available\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          defaultValue=\"user@example.com\"\n          icon={{ suffix: <FaCircleCheck className=\"text-success-600\" size={14} /> }}\n          className=\"border-success-600 focus:border-success-600\"\n        />\n      </div>\n\n      {/* Default State with Helper Text */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label required helperText=\"We'll never share your email with anyone else.\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n        />\n      </div>\n    </div>\n  );\n}"
   }
 }

package/src/components/Input/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-input.js';
 import Example2, { metadata as metadata2 } from './examples/02-validation.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-input', Component: Example1, metadata: metadata1 },
@@ -105,4 +105,4 @@ export const inputDetail: ComponentDetail = {
 };
 
 export { inputControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Label/index.tsx

@@ -3,7 +3,7 @@ import { Label } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-label.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaEnvelope } from 'react-icons/fa6';
 
 const examplesData = [
@@ -105,4 +105,4 @@ export const labelDetail: ComponentDetail = {
 };
 
 export { labelControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/List/index.tsx

@@ -3,7 +3,7 @@ import { List, Button } from 'ui-lab-components';
 import { ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic', Component: Example1, metadata: metadata1 },
@@ -202,4 +202,4 @@ export function Example() {
   ],
 };
 
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/List/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "list",
   "name": "List",
-  "description": "Compound component for displaying item collections with selection and actions.",
+  "description": "Displays item collections with built-in selection and actions.",
   "category": "composition",
   "experimental": true,
   "source": {

package/src/components/Mask/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-read-more-fade.js';
 import Example2, { metadata as metadata2 } from './examples/02-text-gradient.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-read-more-fade', Component: Example1, metadata: metadata1 },
@@ -126,4 +126,4 @@ export const maskDetail: ComponentDetail = {
 };
 
 export { maskControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Menu/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-menu.js';
 import Example2, { metadata as metadata2 } from './examples/02-nested-menu.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaArrowsRotate, FaStar, FaTrash } from 'react-icons/fa6';
 
 const examplesData = [
@@ -90,4 +90,4 @@ export const menuDetail: ComponentDetail = {
 };
 
 export { menuControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Modal/index.tsx

@@ -4,7 +4,7 @@ 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';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-modal', Component: Example1, metadata: metadata1 },
@@ -103,4 +103,4 @@ export const modalDetail: ComponentDetail = {
 };
 
 export { modalControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Page/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "page",
   "name": "Page",
-  "description": "A lightweight page container that provides page-level context, constraints, and semantic structure.",
+  "description": "Top-level page container with constraints and semantic structure.",
   "category": "container",
   "experimental": true,
   "source": {

package/src/components/Panel/metadata.json

@@ -1,8 +1,8 @@
 {
   "id": "panel",
   "name": "Panel",
-  "description": "A flexible region coordinator that manages header, footer, and content areas with responsive stacking behavior.",
-  "category": "composition",
+  "description": "Region container managing header, content, and footer areas.",
+  "category": "layout",
   "experimental": true,
   "source": {
     "packageName": "ui-lab-components",

package/src/components/Path/examples.json

@@ -1,9 +1,4 @@
 {
-  "01-basic-breadcrumbs": {
-    "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 { PathItem, Path } 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}"
-  },
   "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.",