ui-lab-registry 0.3.1 → 0.3.2

package/dist/components/Tabs/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui-lab-components';
+import { Tabs } from 'ui-lab-components';
 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' };
@@ -32,12 +32,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>
   );
 }`;
@@ -52,9 +52,9 @@ export const tabsDetail = {
             title: "Preview",
             description: "Adjust props to customize the component",
             code: tabsBasicCode,
-            preview: (_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
+            preview: (_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" }), _jsx(Tabs.Trigger, { value: "tab3", children: "Tab 3" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(Tabs.Content, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
             controls: tabsControls,
-            renderPreview: (props) => (_jsxs(Tabs, { defaultValue: "tab1", variant: props.variant, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", disabled: props.disabled, children: "Tab 2" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
+            renderPreview: (props) => (_jsxs(Tabs, { defaultValue: "tab1", variant: props.variant, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", disabled: props.disabled, children: "Tab 2" }), _jsx(Tabs.Trigger, { value: "tab3", children: "Tab 3" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(Tabs.Content, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
         },
         ...loadComponentExamples(examplesData, examplesJson),
     ],
@@ -64,14 +64,14 @@ export const tabsDetail = {
             name: "Default",
             description: "Standard boxed tabs with active state highlighting.",
             code: tabsBasicCode,
-            preview: (_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
+            preview: (_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
         },
         {
             id: "underline",
             name: "Underline",
             description: "Minimal underline tabs for a cleaner appearance.",
             code: `<Tabs variant="underline">...</Tabs>`,
-            preview: (_jsxs(Tabs, { defaultValue: "tab1", variant: "underline", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" })] }), _jsx(TabsContent, { value: "tab1", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(TabsContent, { value: "tab2", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
+            preview: (_jsxs(Tabs, { defaultValue: "tab1", variant: "underline", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(Tabs.Content, { value: "tab2", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
         },
     ],
 };

package/dist/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}

package/dist/elements/AI/AIChatInput/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsxs("div", { className: "flex items-center gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: [_jsx("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", readOnly: true }), _jsx("button", { className: "px-2 py-1 bg-accent-500 text-foreground-50 rounded text-xs font-medium hover:bg-accent-600", children: "\u2192" })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: [_jsx("input", { type: "text", placeholder: "Ask AI...", className: "flex-1 bg-background-800 border border-background-700 rounded px-2 py-1 text-sm text-foreground-400 placeholder-foreground-400", readOnly: true }), _jsx("button", { className: "px-2 py-1 bg-accent-500 text-foreground-50 rounded text-sm font-medium hover:bg-accent-600", children: "\u2192" })] }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/index.js

@@ -20,6 +20,6 @@ export function AIChatInputWithSuggestions() {
         setSelectedSuggestion(suggestion);
         setPrompt(suggestion);
     };
-    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsxs("div", { className: "max-w-2xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-foreground-50 mb-8", children: "Chat with AI" }), _jsxs("div", { className: "space-y-6", children: [prompt.length === 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-sm text-foreground-400 mb-3", children: "Quick suggestions:" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: suggestions.map((suggestion) => (_jsx("button", { onClick: () => handleSuggestionClick(suggestion), 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", children: suggestion }, suggestion))) })] })), _jsx(PromptInputWithSuggestions, { value: prompt, onChange: setPrompt, onSubmit: handleSubmit, placeholder: "Enter your prompt or use a suggestion..." }), selectedSuggestion && (_jsxs("div", { className: "p-4 bg-background-800 border border-accent-500/30 rounded-md", children: [_jsx("p", { className: "text-xs text-foreground-400 mb-1", children: "Using suggestion:" }), _jsx("p", { className: "text-foreground-50", children: selectedSuggestion })] }))] })] }) }));
+    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsxs("div", { className: "max-w-2xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-foreground-50 mb-8", children: "Chat with AI" }), _jsxs("div", { className: "space-y-6", children: [prompt.length === 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-sm text-foreground-400 mb-3", children: "Quick suggestions:" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: suggestions.map((suggestion) => (_jsx("button", { onClick: () => handleSuggestionClick(suggestion), 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", children: suggestion }, suggestion))) })] })), _jsx(PromptInputWithSuggestions, { value: prompt, onChange: setPrompt, onSubmit: handleSubmit, placeholder: "Enter your prompt or use a suggestion..." }), selectedSuggestion && (_jsxs("div", { className: "p-4 bg-background-800 border border-accent-500/30 rounded-md", children: [_jsx("p", { className: "text-sm text-foreground-400 mb-1", children: "Using suggestion:" }), _jsx("p", { className: "text-foreground-50", children: selectedSuggestion })] }))] })] }) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.js

@@ -20,6 +20,6 @@ export function PromptInputWithSuggestions({ value, onChange, onSubmit, placehol
                             if (value.trim()) {
                                 onSubmit(value);
                             }
-                        }, disabled: !value.trim(), 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", children: "Send" }), _jsx("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", children: "\u2318K" })] })] }));
+                        }, disabled: !value.trim(), 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", children: "Send" }), _jsx("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", children: "\u2318K" })] })] }));
 }
 //# sourceMappingURL=PromptInputWithSuggestions.js.map

package/dist/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/dist/elements/AI/ChainOfThought/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsx("div", { className: "flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("div", { className: "space-y-2 text-xs", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "1." }), _jsx("div", { className: "text-foreground-400", children: "Analyzing the problem" })] }), _jsxs("div", { className: "flex items-start gap-2 ml-2 text-foreground-400", children: [_jsx("span", { children: "\u2192" }), _jsx("div", { children: "Breaking down requirements" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "2." }), _jsx("div", { className: "text-foreground-400", children: "Evaluating options" })] })] }) }));
+    return (_jsx("div", { className: "flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "1." }), _jsx("div", { className: "text-foreground-400", children: "Analyzing the problem" })] }), _jsxs("div", { className: "flex items-start gap-2 ml-2 text-foreground-400", children: [_jsx("span", { children: "\u2192" }), _jsx("div", { children: "Breaking down requirements" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-accent-500 font-bold", children: "2." }), _jsx("div", { className: "text-foreground-400", children: "Evaluating options" })] })] }) }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/AI/Chat/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsxs("div", { className: "flex flex-col h-full w-full bg-background-900 rounded-sm border border-background-700 overflow-hidden", children: [_jsxs("div", { className: "flex-1 overflow-y-auto space-y-3 p-3", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400", children: "Hello, how can I help?" }) }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "bg-accent-500 rounded px-3 py-2 max-w-xs text-xs text-foreground-50", children: "I need some assistance" }) }), _jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-xs text-foreground-400", children: "I'm here to help!" }) })] }), _jsx("div", { className: "border-t border-background-700 p-2 bg-background-800", children: _jsx("div", { className: "h-6 bg-background-700 rounded text-xs flex items-center px-2 text-foreground-400", children: "Type a message..." }) })] }));
+    return (_jsxs("div", { className: "flex flex-col h-full w-full bg-background-900 rounded-sm border border-background-700 overflow-hidden", children: [_jsxs("div", { className: "flex-1 overflow-y-auto space-y-3 p-3", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400", children: "Hello, how can I help?" }) }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "bg-accent-500 rounded px-3 py-2 max-w-xs text-sm text-foreground-50", children: "I need some assistance" }) }), _jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "bg-background-700 rounded px-3 py-2 max-w-xs text-sm text-foreground-400", children: "I'm here to help!" }) })] }), _jsx("div", { className: "border-t border-background-700 p-2 bg-background-800", children: _jsx("div", { className: "h-6 bg-background-700 rounded text-sm flex items-center px-2 text-foreground-400", children: "Type a message..." }) })] }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/AI/Chat/variations/02-with-actions/index.js

@@ -34,6 +34,6 @@ export function ChatWithActions() {
         };
         setMessages([...messages, actionMessage]);
     };
-    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsx("div", { className: "max-w-2xl mx-auto h-96", children: _jsxs(ChatContainerWithActions, { children: [_jsx("div", { className: "flex-1 overflow-y-auto space-y-4 p-4", children: messages.map((message) => (_jsx(ChatMessage, { message: message.content, sender: message.sender }, message.id))) }), _jsxs("div", { className: "border-t border-background-700 p-4 bg-background-700/50", children: [_jsxs("div", { className: "flex gap-2 mb-3 flex-wrap", children: [_jsx("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", children: "\uD83D\uDCCB Copy" }), _jsx("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", children: "\uD83D\uDCA1 Explain" }), _jsx("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", children: "\u2728 Refactor" })] }), _jsx(ChatInputWithActions, { onSendMessage: handleSendMessage })] })] }) }) }));
+    return (_jsx("div", { className: "min-h-screen bg-background-950 p-8", children: _jsx("div", { className: "max-w-2xl mx-auto h-96", children: _jsxs(ChatContainerWithActions, { children: [_jsx("div", { className: "flex-1 overflow-y-auto space-y-4 p-4", children: messages.map((message) => (_jsx(ChatMessage, { message: message.content, sender: message.sender }, message.id))) }), _jsxs("div", { className: "border-t border-background-700 p-4 bg-background-700/50", children: [_jsxs("div", { className: "flex gap-2 mb-3 flex-wrap", children: [_jsx("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-sm transition-colors", children: "\uD83D\uDCCB Copy" }), _jsx("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-sm transition-colors", children: "\uD83D\uDCA1 Explain" }), _jsx("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-sm transition-colors", children: "\u2728 Refactor" })] }), _jsx(ChatInputWithActions, { onSendMessage: handleSendMessage })] })] }) }) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/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/dist/elements/Documentation/CopyPage/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsx("div", { className: "flex items-center justify-center w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("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", children: [_jsx("span", { children: "\uD83D\uDCCB" }), "Copy"] }) }));
+    return (_jsx("div", { className: "flex items-center justify-center w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("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", children: [_jsx("span", { children: "\uD83D\uDCCB" }), "Copy"] }) }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/Documentation/NextArticle/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsxs("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", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs text-foreground-400 mb-1", children: "Next Article" }), _jsx("div", { className: "text-sm font-medium text-foreground-200", children: "Advanced Setup Guide" })] }), _jsx("div", { className: "text-foreground-400", children: "\u2192" })] }));
+    return (_jsxs("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", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm text-foreground-400 mb-1", children: "Next Article" }), _jsx("div", { className: "text-sm font-medium text-foreground-200", children: "Advanced Setup Guide" })] }), _jsx("div", { className: "text-foreground-400", children: "\u2192" })] }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function NextArticleCard({ title, description, href }) {
-    return (_jsx("a", { href: href, 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", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-xs text-foreground-400 mb-1", children: "Next Article" }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0", children: "\u2192" })] }) }));
+    return (_jsx("a", { href: href, 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", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm text-foreground-400 mb-1", children: "Next Article" }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0", children: "\u2192" })] }) }));
 }
 //# sourceMappingURL=NextArticleCard.js.map

package/dist/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function NextArticleWithIconCard({ icon, title, description, category, href, }) {
-    return (_jsxs("a", { href: href, 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", children: [_jsx("div", { className: "text-3xl flex-shrink-0 mt-1", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-xs text-accent-400 font-medium mb-1", children: category }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg", children: "\u2192" })] }));
+    return (_jsxs("a", { href: href, 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", children: [_jsx("div", { className: "text-3xl flex-shrink-0 mt-1", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm text-accent-400 font-medium mb-1", children: category }), _jsx("h3", { className: "text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors", children: title }), _jsx("p", { className: "text-sm text-foreground-400", children: description })] }), _jsx("div", { className: "text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg", children: "\u2192" })] }));
 }
 //# sourceMappingURL=NextArticleWithIconCard.js.map

package/dist/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/dist/elements/Documentation/TOC/index.js

@@ -23,7 +23,7 @@ const elementMetadata = {
     })),
 };
 export function getPreview() {
-    return (_jsx("div", { className: "flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("div", { className: "space-y-2 text-xs", children: [_jsx("div", { className: "font-semibold text-foreground-200 mb-2", children: "Contents" }), _jsx("div", { className: "text-foreground-400", children: "\u2022 Introduction" }), _jsx("div", { className: "ml-3 text-foreground-400 text-xs", children: "\u25E6 Overview" }), _jsx("div", { className: "ml-3 text-foreground-400 text-xs", children: "\u25E6 Getting Started" }), _jsx("div", { className: "text-foreground-400", children: "\u2022 Installation" }), _jsx("div", { className: "text-foreground-400", children: "\u2022 Usage" }), _jsx("div", { className: "ml-3 text-foreground-400 text-xs", children: "\u25E6 Basic" })] }) }));
+    return (_jsx("div", { className: "flex flex-col gap-2 w-full h-full p-3 bg-background-900 rounded-sm border border-background-700", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsx("div", { className: "font-semibold text-foreground-200 mb-2", children: "Contents" }), _jsx("div", { className: "text-foreground-400", children: "\u2022 Introduction" }), _jsx("div", { className: "ml-3 text-foreground-400 text-sm", children: "\u25E6 Overview" }), _jsx("div", { className: "ml-3 text-foreground-400 text-sm", children: "\u25E6 Getting Started" }), _jsx("div", { className: "text-foreground-400", children: "\u2022 Installation" }), _jsx("div", { className: "text-foreground-400", children: "\u2022 Usage" }), _jsx("div", { className: "ml-3 text-foreground-400 text-sm", children: "\u25E6 Basic" })] }) }));
 }
 export const metadata = baseMetadata;
 export default elementMetadata;

package/dist/generated-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generated-data.d.ts","sourceRoot":"","sources":["../src/generated-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAktJrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAsC3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAoMnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoLxE,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAIxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAGzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAE7B,CAAC"}
+{"version":3,"file":"generated-data.d.ts","sourceRoot":"","sources":["../src/generated-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAo/HrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAsC3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAoMnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoLxE,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAIxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAGzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAE7B,CAAC"}