ui-lab-registry 0.3.0 → 0.3.2

package/src/components/Path/index.tsx

@@ -3,7 +3,7 @@ import { Path, PathItem } 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';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-path', Component: Example1, metadata: metadata1 },
@@ -68,4 +68,4 @@ export const pathDetail: ComponentDetail = {
   ],
 };
 
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Popover/index.tsx

@@ -3,7 +3,7 @@ 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';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaQuestion } from 'react-icons/fa6';
 
 const TAIL_WIDTH = 18;
@@ -120,4 +120,4 @@ export const popoverDetail: ComponentDetail = {
 };
 
 export { popoverControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Progress/index.tsx

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

package/src/components/Radio/index.tsx

@@ -1,10 +1,10 @@
 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';
-import Example2, { metadata as metadata2 } from './examples/02-radio-with-descriptions';
+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';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-radio', Component: Example1, metadata: metadata1 },
@@ -67,7 +67,7 @@ export const radioDetail: ComponentDetail = {
         The Radio component is a form control for capturing a single choice from a set of mutually exclusive options. Radio buttons are ideal when users need to select one option from a group.
       </p>
       <p>
-        The component supports labels, descriptions, helper text, and various visual states including checked, unchecked, disabled, and error states. Use the compound component pattern with <code className="text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-xs">Radio.Group</code> and <code className="text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-xs">Radio.Item</code> for automatic group management, or use individual <code className="text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-xs">Radio</code> components for standalone use.
+        The component supports labels, descriptions, helper text, and various visual states including checked, unchecked, disabled, and error states. Use the compound component pattern with <code className="text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-sm">Radio.Group</code> and <code className="text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-sm">Radio.Item</code> for automatic group management, or use individual <code className="text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-sm">Radio</code> components for standalone use.
       </p>
     </div>
   ),
@@ -111,4 +111,4 @@ export const radioDetail: ComponentDetail = {
 };
 
 export { radioControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Scroll/index.tsx

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

package/src/components/Select/examples/02-searchable-select.tsx

@@ -38,7 +38,7 @@ const countries = [
 export default function Example() {
   return (
     <Select>
-      <Searchable.Trigger placeholder="Search countries..." />
+      <Searchable.Input placeholder="Search countries..." />
       <Searchable.Content searchPlaceholder="Type to filter...">
         {countries.map((country) => (
           <Select.Item key={country.value} value={country.value} textValue={country.label}>

package/src/components/Select/examples.json

@@ -7,6 +7,6 @@
   "02-searchable-select": {
     "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.Trigger 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}"
+    "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}"
   }
 }

package/src/components/Select/index.tsx

@@ -4,7 +4,7 @@ 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';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaChevronDown } from 'react-icons/fa6';
 
 const examplesData = [
@@ -109,4 +109,4 @@ export const selectDetail: ComponentDetail = {
 };
 
 export { selectControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Slider/index.tsx

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

package/src/components/Switch/index.tsx

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

package/src/components/Table/index.tsx

@@ -3,7 +3,7 @@ import { Table } from "ui-lab-components";
 import { ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-table.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 // Define examplesData locally
 const examplesData = [
@@ -105,4 +105,4 @@ export const tableDetail: ComponentDetail = {
   ],
 };
 
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Tabs/examples/01-basic-tabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from 'ui-lab-components';
+import { Tabs } from 'ui-lab-components';
 
 export const metadata = {
   title: 'Basic Tabs',
@@ -9,20 +9,20 @@ export const metadata = {
 export default function Example() {
   return (
     <Tabs defaultValue="overview">
-      <TabsList aria-label="Content sections">
-        <TabsTrigger value="overview">Overview</TabsTrigger>
-        <TabsTrigger value="details">Details</TabsTrigger>
-        <TabsTrigger value="settings">Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview">
+      <Tabs.List aria-label="Content sections">
+        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+        <Tabs.Trigger value="details">Details</Tabs.Trigger>
+        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="overview">
         <p>Overview content goes here.</p>
-      </TabsContent>
-      <TabsContent value="details">
+      </Tabs.Content>
+      <Tabs.Content value="details">
         <p>Details content goes here.</p>
-      </TabsContent>
-      <TabsContent value="settings">
+      </Tabs.Content>
+      <Tabs.Content value="settings">
         <p>Settings content goes here.</p>
-      </TabsContent>
+      </Tabs.Content>
     </Tabs>
   );
 }

package/src/components/Tabs/examples/02-vertical-tabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs, TabsList, TabsTrigger, TabsContent, Card } from 'ui-lab-components';
+import { Tabs, Card } from 'ui-lab-components';
 import { User, Settings, Bell, Shield } from 'lucide-react';
 
 export const metadata = {
@@ -13,27 +13,27 @@ export default function Example() {
       <Card className="w-full max-w-2xl">
         <Tabs defaultValue="profile" className="flex flex-row">
           {/* Vertical tab list - styled as sidebar */}
-          <TabsList
+          <Tabs.List
             aria-label="Settings sections"
             className="flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2"
           >
-            <TabsTrigger value="profile" icon={<User className="w-4 h-4" />} className="justify-start">
+            <Tabs.Trigger value="profile" icon={<User className="w-4 h-4" />} className="justify-start">
               Profile
-            </TabsTrigger>
-            <TabsTrigger value="notifications" icon={<Bell className="w-4 h-4" />} className="justify-start">
+            </Tabs.Trigger>
+            <Tabs.Trigger value="notifications" icon={<Bell className="w-4 h-4" />} className="justify-start">
               Notifications
-            </TabsTrigger>
-            <TabsTrigger value="security" icon={<Shield className="w-4 h-4" />} className="justify-start">
+            </Tabs.Trigger>
+            <Tabs.Trigger value="security" icon={<Shield className="w-4 h-4" />} className="justify-start">
               Security
-            </TabsTrigger>
-            <TabsTrigger value="preferences" icon={<Settings className="w-4 h-4" />} className="justify-start">
+            </Tabs.Trigger>
+            <Tabs.Trigger value="preferences" icon={<Settings className="w-4 h-4" />} className="justify-start">
               Preferences
-            </TabsTrigger>
-          </TabsList>
+            </Tabs.Trigger>
+          </Tabs.List>
 
           {/* Content panels */}
           <div className="flex-1 p-6">
-            <TabsContent value="profile" className="mt-0">
+            <Tabs.Content value="profile" className="mt-0">
               <h3 className="text-lg font-semibold text-foreground-100 mb-2">Profile Settings</h3>
               <p className="text-foreground-400 text-sm mb-4">
                 Manage your personal information and how others see you on the platform.
@@ -43,9 +43,9 @@ export default function Example() {
                 <div className="h-10 w-full bg-background-800 rounded border border-background-700" />
                 <div className="h-10 w-2/3 bg-background-800 rounded border border-background-700" />
               </div>
-            </TabsContent>
+            </Tabs.Content>
 
-            <TabsContent value="notifications" className="mt-0">
+            <Tabs.Content value="notifications" className="mt-0">
               <h3 className="text-lg font-semibold text-foreground-100 mb-2">Notification Preferences</h3>
               <p className="text-foreground-400 text-sm mb-4">
                 Control how and when you receive alerts and updates.
@@ -64,9 +64,9 @@ export default function Example() {
                   <div className="h-4 w-28 bg-background-800 rounded" />
                 </div>
               </div>
-            </TabsContent>
+            </Tabs.Content>
 
-            <TabsContent value="security" className="mt-0">
+            <Tabs.Content value="security" className="mt-0">
               <h3 className="text-lg font-semibold text-foreground-100 mb-2">Security Settings</h3>
               <p className="text-foreground-400 text-sm mb-4">
                 Protect your account with passwords, two-factor authentication, and more.
@@ -81,9 +81,9 @@ export default function Example() {
                   <div className="h-3 w-40 bg-background-700/50 rounded" />
                 </div>
               </div>
-            </TabsContent>
+            </Tabs.Content>
 
-            <TabsContent value="preferences" className="mt-0">
+            <Tabs.Content value="preferences" className="mt-0">
               <h3 className="text-lg font-semibold text-foreground-100 mb-2">General Preferences</h3>
               <p className="text-foreground-400 text-sm mb-4">
                 Customize your experience with theme, language, and display options.
@@ -94,7 +94,7 @@ export default function Example() {
                 <div className="h-20 bg-background-800 rounded border border-background-700" />
                 <div className="h-20 bg-background-800 rounded border border-background-700" />
               </div>
-            </TabsContent>
+            </Tabs.Content>
           </div>
         </Tabs>
       </Card>

package/src/components/Tabs/examples.json

@@ -2,11 +2,11 @@
   "01-basic-tabs": {
     "title": "Basic Tabs",
     "description": "A simple tabbed interface with content switching. Use this to organize related content into separate views.",
-    "code": "import React from 'react';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Tabs defaultValue=\"overview\">\n      <TabsList aria-label=\"Content sections\">\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"details\">Details</TabsTrigger>\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\">\n        <p>Overview content goes here.</p>\n      </TabsContent>\n      <TabsContent value=\"details\">\n        <p>Details content goes here.</p>\n      </TabsContent>\n      <TabsContent value=\"settings\">\n        <p>Settings content goes here.</p>\n      </TabsContent>\n    </Tabs>\n  );\n}"
+    "code": "import React from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Tabs defaultValue=\"overview\">\n      <Tabs.List aria-label=\"Content sections\">\n        <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n        <Tabs.Trigger value=\"details\">Details</Tabs.Trigger>\n        <Tabs.Trigger value=\"settings\">Settings</Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"overview\">\n        <p>Overview content goes here.</p>\n      </Tabs.Content>\n      <Tabs.Content value=\"details\">\n        <p>Details content goes here.</p>\n      </Tabs.Content>\n      <Tabs.Content value=\"settings\">\n        <p>Settings content goes here.</p>\n      </Tabs.Content>\n    </Tabs>\n  );\n}"
   },
   "02-vertical-tabs": {
     "title": "Vertical Tabs (Sidebar)",
     "description": "A vertical tab layout ideal for settings pages or sidebar navigation. Tabs are stacked vertically with content panels beside them.",
-    "code": "import React from 'react';\nimport { Tabs, TabsList, TabsTrigger, TabsContent, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n      <Card className=\"w-full max-w-2xl\">\n        <Tabs defaultValue=\"profile\" className=\"flex flex-row\">\n          {/* Vertical tab list - styled as sidebar */}\n          <TabsList\n            aria-label=\"Settings sections\"\n            className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n          >\n            <TabsTrigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n              Profile\n            </TabsTrigger>\n            <TabsTrigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n              Notifications\n            </TabsTrigger>\n            <TabsTrigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n              Security\n            </TabsTrigger>\n            <TabsTrigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n              Preferences\n            </TabsTrigger>\n          </TabsList>\n\n          {/* Content panels */}\n          <div className=\"flex-1 p-6\">\n            <TabsContent value=\"profile\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Manage your personal information and how others see you on the platform.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"notifications\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Control how and when you receive alerts and updates.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-32 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-background-700 rounded\" />\n                  <div className=\"h-4 w-40 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-28 bg-background-800 rounded\" />\n                </div>\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"security\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Protect your account with passwords, two-factor authentication, and more.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n                </div>\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n                </div>\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"preferences\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Customize your experience with theme, language, and display options.\n              </p>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </TabsContent>\n          </div>\n        </Tabs>\n      </Card>\n    </div>\n  );\n}"
+    "code": "import React from 'react';\nimport { Tabs, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n      <Card className=\"w-full max-w-2xl\">\n        <Tabs defaultValue=\"profile\" className=\"flex flex-row\">\n          {/* Vertical tab list - styled as sidebar */}\n          <Tabs.List\n            aria-label=\"Settings sections\"\n            className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n          >\n            <Tabs.Trigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n              Notifications\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n              Security\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n              Preferences\n            </Tabs.Trigger>\n          </Tabs.List>\n\n          {/* Content panels */}\n          <div className=\"flex-1 p-6\">\n            <Tabs.Content value=\"profile\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Manage your personal information and how others see you on the platform.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"notifications\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Control how and when you receive alerts and updates.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-32 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-background-700 rounded\" />\n                  <div className=\"h-4 w-40 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-28 bg-background-800 rounded\" />\n                </div>\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"security\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Protect your account with passwords, two-factor authentication, and more.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n                </div>\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n                </div>\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"preferences\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Customize your experience with theme, language, and display options.\n              </p>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </Tabs.Content>\n          </div>\n        </Tabs>\n      </Card>\n    </div>\n  );\n}"
   }
 }

package/src/components/Tabs/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui-lab-components';
+import { Tabs } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-tabs.js';
 import Example2, { metadata as metadata2 } from './examples/02-vertical-tabs.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 // Define examplesData locally
 const examplesData = [
@@ -37,12 +37,12 @@ const tabsBasicCode = `import { Tabs } from "ui-lab-components";
 export function Example() {
   return (
     <Tabs defaultValue="tab1">
-      <TabsList>
-        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-      </TabsList>
-      <TabsContent value="tab1">Content 1</TabsContent>
-      <TabsContent value="tab2">Content 2</TabsContent>
+      <Tabs.List>
+        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="tab1">Content 1</Tabs.Content>
+      <Tabs.Content value="tab2">Content 2</Tabs.Content>
     </Tabs>
   );
 }`;
@@ -70,39 +70,39 @@ export const tabsDetail: ComponentDetail = {
       code: tabsBasicCode,
       preview: (
         <Tabs defaultValue="tab1">
-          <TabsList>
-            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1">
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
             <p className="text-foreground-300">Content for Tab 1</p>
-          </TabsContent>
-          <TabsContent value="tab2">
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
             <p className="text-foreground-300">Content for Tab 2</p>
-          </TabsContent>
-          <TabsContent value="tab3">
+          </Tabs.Content>
+          <Tabs.Content value="tab3">
             <p className="text-foreground-300">Content for Tab 3</p>
-          </TabsContent>
+          </Tabs.Content>
         </Tabs>
       ),
       controls: tabsControls,
       renderPreview: (props: any) => (
         <Tabs defaultValue="tab1" variant={props.variant}>
-          <TabsList>
-            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-            <TabsTrigger value="tab2" disabled={props.disabled}>Tab 2</TabsTrigger>
-            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1">
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2" disabled={props.disabled}>Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
             <p className="text-foreground-300">Content for Tab 1</p>
-          </TabsContent>
-          <TabsContent value="tab2">
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
             <p className="text-foreground-300">Content for Tab 2</p>
-          </TabsContent>
-          <TabsContent value="tab3">
+          </Tabs.Content>
+          <Tabs.Content value="tab3">
             <p className="text-foreground-300">Content for Tab 3</p>
-          </TabsContent>
+          </Tabs.Content>
         </Tabs>
       ),
     },
@@ -117,16 +117,16 @@ export const tabsDetail: ComponentDetail = {
       code: tabsBasicCode,
       preview: (
         <Tabs defaultValue="tab1">
-          <TabsList>
-            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1">
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
             <p className="text-foreground-300">Content 1</p>
-          </TabsContent>
-          <TabsContent value="tab2">
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
             <p className="text-foreground-300">Content 2</p>
-          </TabsContent>
+          </Tabs.Content>
         </Tabs>
       ),
     },
@@ -137,16 +137,16 @@ export const tabsDetail: ComponentDetail = {
       code: `<Tabs variant="underline">...</Tabs>`,
       preview: (
         <Tabs defaultValue="tab1" variant="underline">
-          <TabsList>
-            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1" className="mt-6">
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1" className="mt-6">
             <p className="text-foreground-300">Content 1</p>
-          </TabsContent>
-          <TabsContent value="tab2" className="mt-6">
+          </Tabs.Content>
+          <Tabs.Content value="tab2" className="mt-6">
             <p className="text-foreground-300">Content 2</p>
-          </TabsContent>
+          </Tabs.Content>
         </Tabs>
       ),
     },
@@ -154,4 +154,4 @@ export const tabsDetail: ComponentDetail = {
 };
 
 export { tabsControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Textarea/index.tsx

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

package/src/components/Toast/index.tsx

@@ -10,7 +10,7 @@ import Example3, { metadata as metadata3 } from './examples/03-danger-toast.js';
 import Example4, { metadata as metadata4 } from './examples/04-info-toast.js';
 import Example5, { metadata as metadata5 } from './examples/05-warning-toast.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaInfoCircle } from 'react-icons/fa';
 
 // Define examplesData locally
@@ -125,4 +125,4 @@ export const toastDetail: ComponentDetail = {
 };
 
 export { toastControls };
-export * from './examples/index';
+export * from './examples/index.js';

package/src/components/Tooltip/index.tsx

@@ -4,7 +4,7 @@ import { ControlDef, ComponentDetail } from '@/types';
 import { FaQuestion } from 'react-icons/fa6';
 import Example1, { metadata as metadata1 } from './examples/01-basic-tooltip.js';
 import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples';
+import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const TAIL_WIDTH = 18;
 const TAIL_PATH = "M 0.00 0.00 C 3.00 0.00 7.50 -6.00 9.00 -6.00 C 10.50 -6.00 13.50 0.00 18.00 0.00";
@@ -134,4 +134,4 @@ export const tooltipDetail: ComponentDetail = {
 };
 
 export { tooltipControls };
-export * from './examples/index';
+export * from './examples/index.js';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ElementMetadata } from '../../../types';
+import type { ElementMetadata } from '../../../types.js';
 import variationsData from './variations.json' with { type: 'json' };
 
 const baseMetadata = {
@@ -32,10 +32,10 @@ export function getPreview(): React.ReactNode {
       <input
         type="text"
         placeholder="Ask AI..."
-        className="flex-1 bg-background-800 border border-background-700 rounded px-2 py-1 text-xs text-foreground-400 placeholder-foreground-400"
+        className="flex-1 bg-background-800 border border-background-700 rounded px-2 py-1 text-sm text-foreground-400 placeholder-foreground-400"
         readOnly
       />
-      <button className="px-2 py-1 bg-accent-500 text-foreground-50 rounded text-xs font-medium hover:bg-accent-600">
+      <button className="px-2 py-1 bg-accent-500 text-foreground-50 rounded text-sm font-medium hover:bg-accent-600">
         →
       </button>
     </div>

package/src/elements/AI/AIChatInput/variations/01-basic/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { useState } from 'react';
-import { PromptInput } from './layout/PromptInput';
+import { PromptInput } from './layout/PromptInput.js';
 
 export function BasicAIChatInput() {
   const [prompt, setPrompt] = useState('');

package/src/elements/AI/AIChatInput/variations/02-with-suggestions/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React, { useState } from 'react';
-import { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions';
+import { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions.js';
 
 export function AIChatInputWithSuggestions() {
   const [prompt, setPrompt] = useState('');
@@ -56,7 +56,7 @@ export function AIChatInputWithSuggestions() {
 
           {selectedSuggestion && (
             <div className="p-4 bg-background-800 border border-accent-500/30 rounded-md">
-              <p className="text-xs text-foreground-400 mb-1">Using suggestion:</p>
+              <p className="text-sm text-foreground-400 mb-1">Using suggestion:</p>
               <p className="text-foreground-50">{selectedSuggestion}</p>
             </div>
           )}

package/src/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.tsx

@@ -54,7 +54,7 @@ export function PromptInputWithSuggestions({
         >
           Send
         </button>
-        <button className="px-2 py-1 text-foreground-400 hover:text-foreground-200 text-xs rounded border border-background-700 hover:border-background-600 transition-colors">
+        <button className="px-2 py-1 text-foreground-400 hover:text-foreground-200 text-sm rounded border border-background-700 hover:border-background-600 transition-colors">
           ⌘K
         </button>
       </div>