ui-lab-registry 0.3.1 → 0.3.2

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,5 +1,5 @@
 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';
@@ -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>
       ),
     },

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

@@ -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/02-with-suggestions/index.tsx

@@ -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>

package/src/elements/AI/AIChatInput/variations.json

@@ -28,13 +28,13 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions.js';\n\nexport function AIChatInputWithSuggestions() {\n  const [prompt, setPrompt] = useState('');\n  const [selectedSuggestion, setSelectedSuggestion] = useState<string | null>(null);\n\n  const suggestions = [\n    'Explain this concept in simple terms',\n    'Write a code example',\n    'What are the best practices?',\n    'How do I debug this?',\n  ];\n\n  const handleSubmit = (value: string) => {\n    console.log('Prompt submitted:', value);\n    setPrompt('');\n    setSelectedSuggestion(null);\n  };\n\n  const handleSuggestionClick = (suggestion: string) => {\n    setSelectedSuggestion(suggestion);\n    setPrompt(suggestion);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-8\">Chat with AI</h1>\n\n        <div className=\"space-y-6\">\n          {prompt.length === 0 && (\n            <div>\n              <p className=\"text-sm text-foreground-400 mb-3\">Quick suggestions:</p>\n              <div className=\"grid grid-cols-2 gap-2\">\n                {suggestions.map((suggestion) => (\n                  <button\n                    key={suggestion}\n                    onClick={() => handleSuggestionClick(suggestion)}\n                    className=\"text-left px-3 py-2 bg-background-800 border border-background-700 rounded hover:border-accent-500 hover:bg-background-700/80 transition-colors text-sm text-foreground-300 hover:text-foreground-200\"\n                  >\n                    {suggestion}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <PromptInputWithSuggestions\n            value={prompt}\n            onChange={setPrompt}\n            onSubmit={handleSubmit}\n            placeholder=\"Enter your prompt or use a suggestion...\"\n          />\n\n          {selectedSuggestion && (\n            <div className=\"p-4 bg-background-800 border border-accent-500/30 rounded-md\">\n              <p className=\"text-xs text-foreground-400 mb-1\">Using suggestion:</p>\n              <p className=\"text-foreground-50\">{selectedSuggestion}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions.js';\n\nexport function AIChatInputWithSuggestions() {\n  const [prompt, setPrompt] = useState('');\n  const [selectedSuggestion, setSelectedSuggestion] = useState<string | null>(null);\n\n  const suggestions = [\n    'Explain this concept in simple terms',\n    'Write a code example',\n    'What are the best practices?',\n    'How do I debug this?',\n  ];\n\n  const handleSubmit = (value: string) => {\n    console.log('Prompt submitted:', value);\n    setPrompt('');\n    setSelectedSuggestion(null);\n  };\n\n  const handleSuggestionClick = (suggestion: string) => {\n    setSelectedSuggestion(suggestion);\n    setPrompt(suggestion);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto\">\n        <h1 className=\"text-3xl font-bold text-foreground-50 mb-8\">Chat with AI</h1>\n\n        <div className=\"space-y-6\">\n          {prompt.length === 0 && (\n            <div>\n              <p className=\"text-sm text-foreground-400 mb-3\">Quick suggestions:</p>\n              <div className=\"grid grid-cols-2 gap-2\">\n                {suggestions.map((suggestion) => (\n                  <button\n                    key={suggestion}\n                    onClick={() => handleSuggestionClick(suggestion)}\n                    className=\"text-left px-3 py-2 bg-background-800 border border-background-700 rounded hover:border-accent-500 hover:bg-background-700/80 transition-colors text-sm text-foreground-300 hover:text-foreground-200\"\n                  >\n                    {suggestion}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <PromptInputWithSuggestions\n            value={prompt}\n            onChange={setPrompt}\n            onSubmit={handleSubmit}\n            placeholder=\"Enter your prompt or use a suggestion...\"\n          />\n\n          {selectedSuggestion && (\n            <div className=\"p-4 bg-background-800 border border-accent-500/30 rounded-md\">\n              <p className=\"text-sm text-foreground-400 mb-1\">Using suggestion:</p>\n              <p className=\"text-foreground-50\">{selectedSuggestion}</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {
         "filename": "PromptInputWithSuggestions.tsx",
         "language": "typescript",
-        "code": "import React, { useRef, useEffect } from 'react';\n\ninterface PromptInputWithSuggestionsProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  placeholder?: string;\n}\n\nexport function PromptInputWithSuggestions({\n  value,\n  onChange,\n  onSubmit,\n  placeholder = 'Ask AI...',\n}: PromptInputWithSuggestionsProps) {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  useEffect(() => {\n    if (textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;\n    }\n  }, [value]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      if (value.trim()) {\n        onSubmit(value);\n      }\n    }\n  };\n\n  return (\n    <div className=\"flex gap-3 p-4 bg-background-800 border border-background-700 rounded-md\">\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        className=\"flex-1 bg-transparent border-0 text-foreground-50 placeholder-foreground-400 focus:outline-none resize-none\"\n        rows={1}\n      />\n      <div className=\"flex flex-col gap-2\">\n        <button\n          onClick={() => {\n            if (value.trim()) {\n              onSubmit(value);\n            }\n          }}\n          disabled={!value.trim()}\n          className=\"px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 text-sm\"\n        >\n          Send\n        </button>\n        <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\">\n          ⌘K\n        </button>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "import React, { useRef, useEffect } from 'react';\n\ninterface PromptInputWithSuggestionsProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSubmit: (value: string) => void;\n  placeholder?: string;\n}\n\nexport function PromptInputWithSuggestions({\n  value,\n  onChange,\n  onSubmit,\n  placeholder = 'Ask AI...',\n}: PromptInputWithSuggestionsProps) {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  useEffect(() => {\n    if (textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;\n    }\n  }, [value]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      if (value.trim()) {\n        onSubmit(value);\n      }\n    }\n  };\n\n  return (\n    <div className=\"flex gap-3 p-4 bg-background-800 border border-background-700 rounded-md\">\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        className=\"flex-1 bg-transparent border-0 text-foreground-50 placeholder-foreground-400 focus:outline-none resize-none\"\n        rows={1}\n      />\n      <div className=\"flex flex-col gap-2\">\n        <button\n          onClick={() => {\n            if (value.trim()) {\n              onSubmit(value);\n            }\n          }}\n          disabled={!value.trim()}\n          className=\"px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 text-sm\"\n        >\n          Send\n        </button>\n        <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\">\n          ⌘K\n        </button>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": false
       }
     ]

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

@@ -29,7 +29,7 @@ const elementMetadata: ElementMetadata = {
 export function getPreview(): React.ReactNode {
   return (
     <div className="flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700">
-      <div className="space-y-2 text-xs">
+      <div className="space-y-2 text-sm">
         <div className="flex items-start gap-2">
           <span className="text-accent-500 font-bold">1.</span>
           <div className="text-foreground-400">Analyzing the problem</div>

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

@@ -31,23 +31,23 @@ export function getPreview(): React.ReactNode {
     <div className="flex flex-col h-full w-full bg-background-900 rounded-sm border border-background-700 overflow-hidden">
       <div className="flex-1 overflow-y-auto space-y-3 p-3">
         <div className="flex justify-start">
-          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400">
+          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400">
             Hello, how can I help?
           </div>
         </div>
         <div className="flex justify-end">
-          <div className="bg-accent-500 rounded px-3 py-2 max-w-xs text-xs text-foreground-50">
+          <div className="bg-accent-500 rounded px-3 py-2 max-w-xs text-sm text-foreground-50">
             I need some assistance
           </div>
         </div>
         <div className="flex justify-start">
-          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400">
+          <div className="bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400">
             I'm here to help!
           </div>
         </div>
       </div>
       <div className="border-t border-background-700 p-2 bg-background-800">
-        <div className="h-6 bg-background-700 rounded text-xs flex items-center px-2 text-foreground-400">
+        <div className="h-6 bg-background-700 rounded text-sm flex items-center px-2 text-foreground-400">
           Type a message...
         </div>
       </div>

package/src/elements/AI/Chat/variations/02-with-actions/index.tsx

@@ -57,19 +57,19 @@ export function ChatWithActions() {
             <div className="flex gap-2 mb-3 flex-wrap">
               <button
                 onClick={() => handleAction('Copy code')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors"
+                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
               >
                 📋 Copy
               </button>
               <button
                 onClick={() => handleAction('Explain')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors"
+                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
               >
                 💡 Explain
               </button>
               <button
                 onClick={() => handleAction('Refactor')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors"
+                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
               >
                 ✨ Refactor
               </button>

package/src/elements/AI/Chat/variations.json

@@ -40,7 +40,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ChatContainerWithActions } from './layout/ChatContainerWithActions.js';\nimport { ChatMessage } from './layout/ChatMessage.js';\nimport { ChatInputWithActions } from './layout/ChatInputWithActions.js';\n\ninterface Message {\n  id: string;\n  content: string;\n  sender: 'ai' | 'user';\n}\n\nexport function ChatWithActions() {\n  const [messages, setMessages] = useState<Message[]>([\n    { id: '1', content: 'Hello! I can help you with questions or tasks.', sender: 'ai' },\n    { id: '2', content: 'Can you help me with debugging?', sender: 'user' },\n    { id: '3', content: 'Absolutely! I can help you debug your code. What issue are you facing?', sender: 'ai' },\n  ]);\n\n  const handleSendMessage = (content: string) => {\n    const userMessage = {\n      id: String(messages.length + 1),\n      content,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, userMessage]);\n\n    setTimeout(() => {\n      const aiMessage = {\n        id: String(messages.length + 2),\n        content: 'I can help with that. Let me analyze your code.',\n        sender: 'ai' as const,\n      };\n      setMessages((prev) => [...prev, aiMessage]);\n    }, 500);\n  };\n\n  const handleAction = (action: string) => {\n    const actionMessage = {\n      id: String(messages.length + 1),\n      content: `[Action: ${action}]`,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, actionMessage]);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto h-96\">\n        <ChatContainerWithActions>\n          <div className=\"flex-1 overflow-y-auto space-y-4 p-4\">\n            {messages.map((message) => (\n              <ChatMessage key={message.id} message={message.content} sender={message.sender} />\n            ))}\n          </div>\n          <div className=\"border-t border-background-700 p-4 bg-background-700/50\">\n            <div className=\"flex gap-2 mb-3 flex-wrap\">\n              <button\n                onClick={() => handleAction('Copy code')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors\"\n              >\n                📋 Copy\n              </button>\n              <button\n                onClick={() => handleAction('Explain')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors\"\n              >\n                💡 Explain\n              </button>\n              <button\n                onClick={() => handleAction('Refactor')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-xs transition-colors\"\n              >\n                ✨ Refactor\n              </button>\n            </div>\n            <ChatInputWithActions onSendMessage={handleSendMessage} />\n          </div>\n        </ChatContainerWithActions>\n      </div>\n    </div>\n  );\n}\n",
+        "code": "\"use client\"\nimport React, { useState } from 'react';\nimport { ChatContainerWithActions } from './layout/ChatContainerWithActions.js';\nimport { ChatMessage } from './layout/ChatMessage.js';\nimport { ChatInputWithActions } from './layout/ChatInputWithActions.js';\n\ninterface Message {\n  id: string;\n  content: string;\n  sender: 'ai' | 'user';\n}\n\nexport function ChatWithActions() {\n  const [messages, setMessages] = useState<Message[]>([\n    { id: '1', content: 'Hello! I can help you with questions or tasks.', sender: 'ai' },\n    { id: '2', content: 'Can you help me with debugging?', sender: 'user' },\n    { id: '3', content: 'Absolutely! I can help you debug your code. What issue are you facing?', sender: 'ai' },\n  ]);\n\n  const handleSendMessage = (content: string) => {\n    const userMessage = {\n      id: String(messages.length + 1),\n      content,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, userMessage]);\n\n    setTimeout(() => {\n      const aiMessage = {\n        id: String(messages.length + 2),\n        content: 'I can help with that. Let me analyze your code.',\n        sender: 'ai' as const,\n      };\n      setMessages((prev) => [...prev, aiMessage]);\n    }, 500);\n  };\n\n  const handleAction = (action: string) => {\n    const actionMessage = {\n      id: String(messages.length + 1),\n      content: `[Action: ${action}]`,\n      sender: 'user' as const,\n    };\n    setMessages([...messages, actionMessage]);\n  };\n\n  return (\n    <div className=\"min-h-screen bg-background-950 p-8\">\n      <div className=\"max-w-2xl mx-auto h-96\">\n        <ChatContainerWithActions>\n          <div className=\"flex-1 overflow-y-auto space-y-4 p-4\">\n            {messages.map((message) => (\n              <ChatMessage key={message.id} message={message.content} sender={message.sender} />\n            ))}\n          </div>\n          <div className=\"border-t border-background-700 p-4 bg-background-700/50\">\n            <div className=\"flex gap-2 mb-3 flex-wrap\">\n              <button\n                onClick={() => handleAction('Copy code')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors\"\n              >\n                📋 Copy\n              </button>\n              <button\n                onClick={() => handleAction('Explain')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors\"\n              >\n                💡 Explain\n              </button>\n              <button\n                onClick={() => handleAction('Refactor')}\n                className=\"px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors\"\n              >\n                ✨ Refactor\n              </button>\n            </div>\n            <ChatInputWithActions onSendMessage={handleSendMessage} />\n          </div>\n        </ChatContainerWithActions>\n      </div>\n    </div>\n  );\n}\n",
         "isEntryPoint": true
       },
       {

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

@@ -29,7 +29,7 @@ const elementMetadata: ElementMetadata = {
 export function getPreview(): React.ReactNode {
   return (
     <div className="flex items-center justify-center w-full h-full p-3 bg-background-900 rounded-sm border border-background-700">
-      <button className="px-3 py-2 bg-accent-500 text-foreground-50 text-xs font-medium rounded hover:bg-accent-600 transition-colors flex items-center gap-2">
+      <button className="px-3 py-2 bg-accent-500 text-foreground-50 text-sm font-medium rounded hover:bg-accent-600 transition-colors flex items-center gap-2">
         <span>📋</span>
         Copy
       </button>

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

@@ -30,7 +30,7 @@ export function getPreview(): React.ReactNode {
   return (
     <div className="flex items-center justify-between w-full h-full p-4 bg-background-900 rounded-sm border border-background-700 cursor-pointer hover:bg-background-800 transition-colors">
       <div className="flex-1">
-        <div className="text-xs text-foreground-400 mb-1">Next Article</div>
+        <div className="text-sm text-foreground-400 mb-1">Next Article</div>
         <div className="text-sm font-medium text-foreground-200">Advanced Setup Guide</div>
       </div>
       <div className="text-foreground-400">→</div>

package/src/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.tsx

@@ -12,7 +12,7 @@ export function NextArticleCard({ title, description, href }: NextArticleCardPro
     >
       <div className="flex items-center justify-between">
         <div className="flex-1">
-          <div className="text-xs text-foreground-400 mb-1">Next Article</div>
+          <div className="text-sm text-foreground-400 mb-1">Next Article</div>
           <h3 className="text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors">
             {title}
           </h3>

package/src/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.tsx

@@ -20,7 +20,7 @@ export function NextArticleWithIconCard({
     >
       <div className="text-3xl flex-shrink-0 mt-1">{icon}</div>
       <div className="flex-1 min-w-0">
-        <div className="text-xs text-accent-400 font-medium mb-1">{category}</div>
+        <div className="text-sm text-accent-400 font-medium mb-1">{category}</div>
         <h3 className="text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors">
           {title}
         </h3>

package/src/elements/Documentation/NextArticle/variations.json

@@ -14,7 +14,7 @@
       {
         "filename": "NextArticleCard.tsx",
         "language": "typescript",
-        "code": "interface NextArticleCardProps {\n  title: string;\n  description: string;\n  href: string;\n}\n\nexport function NextArticleCard({ title, description, href }: NextArticleCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"block bg-background-700 border border-background-600 rounded-md p-4 hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex-1\">\n          <div className=\"text-xs text-foreground-400 mb-1\">Next Article</div>\n          <h3 className=\"text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors\">\n            {title}\n          </h3>\n          <p className=\"text-sm text-foreground-400\">{description}</p>\n        </div>\n        <div className=\"ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0\">\n          →\n        </div>\n      </div>\n    </a>\n  );\n}\n",
+        "code": "interface NextArticleCardProps {\n  title: string;\n  description: string;\n  href: string;\n}\n\nexport function NextArticleCard({ title, description, href }: NextArticleCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"block bg-background-700 border border-background-600 rounded-md p-4 hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex-1\">\n          <div className=\"text-sm text-foreground-400 mb-1\">Next Article</div>\n          <h3 className=\"text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors\">\n            {title}\n          </h3>\n          <p className=\"text-sm text-foreground-400\">{description}</p>\n        </div>\n        <div className=\"ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0\">\n          →\n        </div>\n      </div>\n    </a>\n  );\n}\n",
         "isEntryPoint": false
       }
     ]
@@ -34,7 +34,7 @@
       {
         "filename": "NextArticleWithIconCard.tsx",
         "language": "typescript",
-        "code": "interface NextArticleWithIconCardProps {\n  icon: string;\n  title: string;\n  description: string;\n  category: string;\n  href: string;\n}\n\nexport function NextArticleWithIconCard({\n  icon,\n  title,\n  description,\n  category,\n  href,\n}: NextArticleWithIconCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"flex items-start gap-4 p-4 bg-background-700 border border-background-600 rounded-md hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"text-3xl flex-shrink-0 mt-1\">{icon}</div>\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"text-xs text-accent-400 font-medium mb-1\">{category}</div>\n        <h3 className=\"text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors\">\n          {title}\n        </h3>\n        <p className=\"text-sm text-foreground-400\">{description}</p>\n      </div>\n      <div className=\"text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg\">\n        →\n      </div>\n    </a>\n  );\n}\n",
+        "code": "interface NextArticleWithIconCardProps {\n  icon: string;\n  title: string;\n  description: string;\n  category: string;\n  href: string;\n}\n\nexport function NextArticleWithIconCard({\n  icon,\n  title,\n  description,\n  category,\n  href,\n}: NextArticleWithIconCardProps) {\n  return (\n    <a\n      href={href}\n      className=\"flex items-start gap-4 p-4 bg-background-700 border border-background-600 rounded-md hover:border-accent-500 hover:bg-background-700/80 transition-colors group\"\n    >\n      <div className=\"text-3xl flex-shrink-0 mt-1\">{icon}</div>\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"text-sm text-accent-400 font-medium mb-1\">{category}</div>\n        <h3 className=\"text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors\">\n          {title}\n        </h3>\n        <p className=\"text-sm text-foreground-400\">{description}</p>\n      </div>\n      <div className=\"text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg\">\n        →\n      </div>\n    </a>\n  );\n}\n",
         "isEntryPoint": false
       }
     ]

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

@@ -29,14 +29,14 @@ const elementMetadata: ElementMetadata = {
 export function getPreview(): React.ReactNode {
   return (
     <div className="flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700">
-      <div className="space-y-2 text-xs">
+      <div className="space-y-2 text-sm">
         <div className="font-semibold text-foreground-200 mb-2">Contents</div>
         <div className="text-foreground-400">• Introduction</div>
-        <div className="ml-3 text-foreground-400 text-xs">◦ Overview</div>
-        <div className="ml-3 text-foreground-400 text-xs">◦ Getting Started</div>
+        <div className="ml-3 text-foreground-400 text-sm">◦ Overview</div>
+        <div className="ml-3 text-foreground-400 text-sm">◦ Getting Started</div>
         <div className="text-foreground-400">• Installation</div>
         <div className="text-foreground-400">• Usage</div>
-        <div className="ml-3 text-foreground-400 text-xs">◦ Basic</div>
+        <div className="ml-3 text-foreground-400 text-sm">◦ Basic</div>
       </div>
     </div>
   );