ui-lab-registry 0.3.44 → 0.3.45

package/src/components/Tabs/examples/03-underline-tabs.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from 'react';
+import { Tabs } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Underline Variant',
+  description: 'Horizontal tabs with underline indicator. Great for documentation sites.'
+};
+
+export default function Example() {
+  const [selected, setSelected] = useState("tab1");
+
+  return (
+    <Tabs value={selected} onValueChange={setSelected} variant="underline" className="w-fit">
+      <Tabs.List aria-label="Tab options">
+        <Tabs.Trigger value="tab1">Install</Tabs.Trigger>
+        <Tabs.Trigger value="tab2">Usage</Tabs.Trigger>
+        <Tabs.Trigger value="tab3">API</Tabs.Trigger>
+      </Tabs.List>
+    </Tabs>
+  );
+}

package/src/components/Tabs/examples/04-vertical-underline-tabs.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from 'react';
+import { Tabs } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Vertical Underline',
+  description: 'Vertical tabs with underline variant indicator.'
+};
+
+export default function Example() {
+  const [selected, setSelected] = useState("tab1");
+
+  return (
+    <Tabs value={selected} onValueChange={setSelected} variant="underline" orientation="vertical" className="flex w-fit gap-4">
+      <Tabs.List aria-label="Tab options" className="flex flex-col w-fit">
+        <Tabs.Trigger value="tab1">Profile</Tabs.Trigger>
+        <Tabs.Trigger value="tab2">Billing</Tabs.Trigger>
+        <Tabs.Trigger value="tab3">Team</Tabs.Trigger>
+      </Tabs.List>
+    </Tabs>
+  );
+}

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

@@ -2,3 +2,7 @@ export { default as Example1 } from './01-basic-tabs.js';
 export { metadata as metadata1 } from './01-basic-tabs.js';
 export { default as Example2 } from './02-vertical-tabs.js';
 export { metadata as metadata2 } from './02-vertical-tabs.js';
+export { default as Example3 } from './03-underline-tabs.js';
+export { metadata as metadata3 } from './03-underline-tabs.js';
+export { default as Example4 } from './04-vertical-underline-tabs.js';
+export { metadata as metadata4 } from './04-vertical-underline-tabs.js';

package/src/components/Tabs/examples.json

@@ -8,5 +8,15 @@
     "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, 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 default=\"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}"
+  },
+  "03-underline-tabs": {
+    "title": "Underline Variant",
+    "description": "Horizontal tabs with underline indicator. Great for documentation sites.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n  const [selected, setSelected] = useState(\"tab1\");\n\n  return (\n    <Tabs value={selected} onValueChange={setSelected} variant=\"underline\" className=\"w-fit\">\n      <Tabs.List aria-label=\"Tab options\">\n        <Tabs.Trigger value=\"tab1\">Install</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\">Usage</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\">API</Tabs.Trigger>\n      </Tabs.List>\n    </Tabs>\n  );\n}"
+  },
+  "04-vertical-underline-tabs": {
+    "title": "Vertical Underline",
+    "description": "Vertical tabs with underline variant indicator.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n  const [selected, setSelected] = useState(\"tab1\");\n\n  return (\n    <Tabs value={selected} onValueChange={setSelected} variant=\"underline\" orientation=\"vertical\" className=\"flex w-fit gap-4\">\n      <Tabs.List aria-label=\"Tab options\" className=\"flex flex-col w-fit\">\n        <Tabs.Trigger value=\"tab1\">Profile</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\">Billing</Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\">Team</Tabs.Trigger>\n      </Tabs.List>\n    </Tabs>\n  );\n}"
   }
 }

package/src/components/Tabs/index.tsx

@@ -3,6 +3,8 @@ import { Tabs } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-tabs.js';
 import Example2, { metadata as metadata2 } from './examples/02-vertical-tabs.js';
+import Example3, { metadata as metadata3 } from './examples/03-underline-tabs.js';
+import Example4, { metadata as metadata4 } from './examples/04-vertical-underline-tabs.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
@@ -10,6 +12,8 @@ import { loadComponentExamples } from '../../utils/load-component-examples.js';
 const examplesData = [
   { id: '01-basic-tabs', Component: Example1, metadata: metadata1 },
   { id: '02-vertical-tabs', Component: Example2, metadata: metadata2 },
+  { id: '03-underline-tabs', Component: Example3, metadata: metadata3 },
+  { id: '04-vertical-underline-tabs', Component: Example4, metadata: metadata4 },
 ];
 
 

package/src/components/Textarea/examples/01-basic-textarea.tsx

@@ -1,16 +1,29 @@
-import React from 'react';
-import { TextArea } from 'ui-lab-components';
+"use client";
+
+import { useState } from 'react';
+import { TextArea, Flex, Button } from 'ui-lab-components';
 
 export const metadata = {
-  title: 'Basic TextArea',
-  description: 'A simple multi-line text input field. Use this for collecting longer text input like comments or descriptions.'
+  title: 'Feedback Form',
+  description: 'TextArea with a character limit and submit button — disabled until the user types.'
 };
 
 export default function Example() {
+  const [value, setValue] = useState("");
+
   return (
-    <TextArea
-      placeholder="Enter your comments here..."
-      rows={4}
-    />
+    <Flex direction="column" gap="sm" style={{ width: 380 }}>
+      <TextArea
+        placeholder="Tell us what you think..."
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        showCharacterCount
+        maxCharacters={300}
+        rows={4}
+      />
+      <Button variant="primary" disabled={value.trim().length === 0} className="self-end">
+        Submit
+      </Button>
+    </Flex>
   );
 }

package/src/components/Textarea/examples/02-bio-settings.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from 'react';
+import { TextArea, Flex, Button } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Profile Bio',
+  description: 'Fixed-height settings textarea with a 160-character cap and save/clear actions.'
+};
+
+export default function Example() {
+  const [bio, setBio] = useState("UI designer & developer building minimal tools.");
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 380 }}>
+      <TextArea
+        value={bio}
+        onChange={(e) => setBio(e.target.value)}
+        showCharacterCount
+        maxCharacters={160}
+        rows={3}
+        resizable={false}
+      />
+      <Flex justify="end" gap="sm">
+        <Button size="sm" variant="ghost" onClick={() => setBio("")}>Clear</Button>
+        <Button size="sm" variant="primary">Save</Button>
+      </Flex>
+    </Flex>
+  );
+}

package/src/components/Textarea/examples/03-error-state.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from 'react';
+import { TextArea, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Validation Error',
+  description: 'Error styling triggered when the input is non-empty but below a minimum length.'
+};
+
+export default function Example() {
+  const [value, setValue] = useState("");
+  const hasError = value.trim().length > 0 && value.trim().length < 20;
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 380 }}>
+      <TextArea
+        placeholder="Describe the issue in detail..."
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        error={hasError}
+        rows={4}
+      />
+      {hasError && (
+        <span style={{ fontSize: "0.75rem", color: "var(--color-destructive)" }}>
+          Description must be at least 20 characters.
+        </span>
+      )}
+    </Flex>
+  );
+}

package/src/components/Textarea/examples/04-disabled-readonly.tsx

@@ -0,0 +1,25 @@
+import { TextArea, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Disabled & Read-only',
+  description: 'Side-by-side disabled and read-only states to compare their visual treatment.'
+};
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="md" style={{ width: 380 }}>
+      <TextArea
+        value="This field is disabled and cannot be edited."
+        disabled
+        rows={2}
+        resizable={false}
+      />
+      <TextArea
+        value="This is a read-only note visible to all team members."
+        readOnly
+        rows={2}
+        resizable={false}
+      />
+    </Flex>
+  );
+}

package/src/components/Textarea/examples/05-scrolling.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from 'react';
+import { TextArea, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Scrollable with maxHeight',
+  description: 'TextArea bounded by a max height — content scrolls once it overflows.'
+};
+
+export default function Example() {
+  const [value, setValue] = useState(
+    "Line 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8"
+  );
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 380 }}>
+      <TextArea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        maxHeight="120px"
+        resizable={false}
+      />
+    </Flex>
+  );
+}

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

@@ -1,2 +1,10 @@
 export { default as Example1 } from './01-basic-textarea.js';
 export { metadata as metadata1 } from './01-basic-textarea.js';
+export { default as Example2 } from './02-bio-settings.js';
+export { metadata as metadata2 } from './02-bio-settings.js';
+export { default as Example3 } from './03-error-state.js';
+export { metadata as metadata3 } from './03-error-state.js';
+export { default as Example4 } from './04-disabled-readonly.js';
+export { metadata as metadata4 } from './04-disabled-readonly.js';
+export { default as Example5 } from './05-scrolling.js';
+export { metadata as metadata5 } from './05-scrolling.js';

package/src/components/Textarea/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-textarea": {
-    "title": "Basic TextArea",
-    "description": "A simple multi-line text input field. Use this for collecting longer text input like comments or descriptions.",
-    "code": "import React from 'react';\nimport { TextArea } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <TextArea\n      placeholder=\"Enter your comments here...\"\n      rows={4}\n    />\n  );\n}"
+    "title": "Feedback Form",
+    "description": "TextArea with a character limit and submit button — disabled until the user types.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        placeholder=\"Tell us what you think...\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        showCharacterCount\n        maxCharacters={300}\n        rows={4}\n      />\n      <Button variant=\"primary\" disabled={value.trim().length === 0} className=\"self-end\">\n        Submit\n      </Button>\n    </Flex>\n  );\n}"
+  },
+  "02-bio-settings": {
+    "title": "Profile Bio",
+    "description": "Fixed-height settings textarea with a 160-character cap and save/clear actions.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [bio, setBio] = useState(\"UI designer & developer building minimal tools.\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        value={bio}\n        onChange={(e) => setBio(e.target.value)}\n        showCharacterCount\n        maxCharacters={160}\n        rows={3}\n        resizable={false}\n      />\n      <Flex justify=\"end\" gap=\"sm\">\n        <Button size=\"sm\" variant=\"ghost\" onClick={() => setBio(\"\")}>Clear</Button>\n        <Button size=\"sm\" variant=\"primary\">Save</Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "03-error-state": {
+    "title": "Validation Error",
+    "description": "Error styling triggered when the input is non-empty but below a minimum length.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [value, setValue] = useState(\"\");\n  const hasError = value.trim().length > 0 && value.trim().length < 20;\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        placeholder=\"Describe the issue in detail...\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        error={hasError}\n        rows={4}\n      />\n      {hasError && (\n        <span style={{ fontSize: \"0.75rem\", color: \"var(--color-destructive)\" }}>\n          Description must be at least 20 characters.\n        </span>\n      )}\n    </Flex>\n  );\n}"
+  },
+  "04-disabled-readonly": {
+    "title": "Disabled & Read-only",
+    "description": "Side-by-side disabled and read-only states to compare their visual treatment.",
+    "code": "import { TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 380 }}>\n      <TextArea\n        value=\"This field is disabled and cannot be edited.\"\n        disabled\n        rows={2}\n        resizable={false}\n      />\n      <TextArea\n        value=\"This is a read-only note visible to all team members.\"\n        readOnly\n        rows={2}\n        resizable={false}\n      />\n    </Flex>\n  );\n}"
+  },
+  "05-scrolling": {
+    "title": "Scrollable with maxHeight",
+    "description": "TextArea bounded by a max height — content scrolls once it overflows.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { TextArea, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [value, setValue] = useState(\n    \"Line 1\\nLine 2\\nLine 3\\nLine 4\\nLine 5\\nLine 6\\nLine 7\\nLine 8\"\n  );\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 380 }}>\n      <TextArea\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        maxHeight=\"120px\"\n        resizable={false}\n      />\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Textarea/index.tsx

@@ -2,12 +2,20 @@ import React from 'react';
 import { TextArea } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-textarea.js';
+import Example2, { metadata as metadata2 } from './examples/02-bio-settings.js';
+import Example3, { metadata as metadata3 } from './examples/03-error-state.js';
+import Example4, { metadata as metadata4 } from './examples/04-disabled-readonly.js';
+import Example5, { metadata as metadata5 } from './examples/05-scrolling.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 // Define examplesData locally
 const examplesData = [
   { id: '01-basic-textarea', Component: Example1, metadata: metadata1 },
+  { id: '02-bio-settings', Component: Example2, metadata: metadata2 },
+  { id: '03-error-state', Component: Example3, metadata: metadata3 },
+  { id: '04-disabled-readonly', Component: Example4, metadata: metadata4 },
+  { id: '05-scrolling', Component: Example5, metadata: metadata5 },
 ];
 
 const textareaControls: ControlDef[] = [

package/src/components/Toast/index.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import React from 'react';
 import { Button, toast, Toaster } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import { FaBell, FaX } from 'react-icons/fa6';
 import Example1, { metadata as metadata1 } from './examples/01-basic-toast.js';
 import Example2, { metadata as metadata2 } from './examples/02-success-toast.js';
 import Example3, { metadata as metadata3 } from './examples/03-danger-toast.js';
@@ -11,7 +9,6 @@ import Example4, { metadata as metadata4 } from './examples/04-info-toast.js';
 import Example5, { metadata as metadata5 } from './examples/05-warning-toast.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
-import { FaInfoCircle } from 'react-icons/fa';
 
 // Define examplesData locally
 const examplesData = [
@@ -30,7 +27,7 @@ const toastControls: ControlDef[] = [
     options: [
       { label: 'Default', value: 'default' },
       { label: 'Success', value: 'success' },
-      { label: 'danger', value: 'danger' },
+      { label: 'Danger', value: 'danger' },
       { label: 'Info', value: 'info' },
       { label: 'Warning', value: 'warning' },
     ],