ui-lab-registry 0.3.44 → 0.3.45

package/src/components/Group/examples/02-create-project.tsx

@@ -0,0 +1,19 @@
+import { Divider, Group } from "ui-lab-components";
+import { FaPlus } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Create Project",
+  description: "A primary grouped action for creating a named item.",
+};
+
+export default function Example() {
+  return (
+    <Group variant="primary" orientation="horizontal" spacing="xs">
+      <Group.Input aria-label="Project name" placeholder="Untitled project" className="w-56" />
+      <Divider orientation="vertical" />
+      <Group.Button>
+        <FaPlus className="mr-1.5" /> Create
+      </Group.Button>
+    </Group>
+  );
+}

package/src/components/Group/examples/03-filter-bar.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import { Divider, Group, Select } from "ui-lab-components";
+import { FaMagnifyingGlass, FaFilter } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Filter Bar with Selects",
+  description: "Horizontal group combining Select dropdowns with action buttons for filtering interfaces.",
+};
+
+export default function Example() {
+  const [status, setStatus] = useState<string | number | null>("active");
+
+  return (
+    <Group variant="default" orientation="horizontal">
+      <Group.Input icon={<FaMagnifyingGlass />} placeholder="Search...">
+      </Group.Input>
+      <Divider />
+      <Group.Select selectedKey={status} onSelectionChange={setStatus} className="w-36">
+        <Select.Trigger><Select.Value placeholder="Status" /></Select.Trigger>
+        <Select.Content>
+          <Select.List>
+            <Select.Item value="active" textValue="Active">Active</Select.Item>
+            <Select.Item value="inactive" textValue="Inactive">Inactive</Select.Item>
+            <Select.Item value="pending" textValue="Pending">Pending</Select.Item>
+          </Select.List>
+        </Select.Content>
+      </Group.Select>
+      <Divider />
+      <Group.Button size="md"><FaFilter className="mr-1.5" /> Apply</Group.Button>
+    </Group>
+  );
+}

package/src/components/Group/examples/04-documentation-search.tsx

@@ -0,0 +1,21 @@
+import { Divider, Group } from "ui-lab-components";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Documentation Search",
+  description: "A search input with an icon prefix and joined submit button.",
+};
+
+export default function Example() {
+  return (
+    <Group variant="secondary">
+      <div className="bg-background-800 flex items-center px-3 text-foreground-400">
+        <FaMagnifyingGlass />
+      </div>
+      <Divider />
+      <Group.Input placeholder="Search documentation..." className="w-64" />
+      <Divider />
+      <Group.Button className="w-full">Search</Group.Button>
+    </Group>
+  );
+}

package/src/components/Group/examples/05-email-signup.tsx

@@ -0,0 +1,21 @@
+import { Divider, Group } from "ui-lab-components";
+import { FaEnvelope } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Email Signup",
+  description: "An email input with a joined subscription action.",
+};
+
+export default function Example() {
+  return (
+    <Group variant="outline">
+      <div className="bg-background-800 flex items-center px-3 text-foreground-400">
+        <FaEnvelope />
+      </div>
+      <Divider />
+      <Group.Input placeholder="you@example.com" type="email" className="w-64" />
+      <Divider />
+      <Group.Button>Subscribe</Group.Button>
+    </Group>
+  );
+}

package/src/components/Group/examples/06-copy-command.tsx

@@ -0,0 +1,17 @@
+import { Divider, Group } from "ui-lab-components";
+import { FaCopy } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Copy Command",
+  description: "A read-only command field with a joined copy action.",
+};
+
+export default function Example() {
+  return (
+    <Group>
+      <Group.Input defaultValue="npm install ui-lab" readOnly className="w-full font-mono text-sm" />
+      <Divider />
+      <Group.Button icon={{ left: <FaCopy className="mr-1.5 text-foreground-400" /> }} />
+    </Group>
+  );
+}

package/src/components/Group/examples/07-delete-confirmation.tsx

@@ -0,0 +1,19 @@
+import { Divider, Group } from "ui-lab-components";
+import { FaTrash } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Delete Confirmation",
+  description: "A danger variant group for destructive confirmation flows.",
+};
+
+export default function Example() {
+  return (
+    <Group variant="danger">
+      <Group.Input aria-label="Confirmation" placeholder="Type DELETE" className="w-48" />
+      <Divider />
+      <Group.Button>
+        <FaTrash className="mr-1.5" /> Delete
+      </Group.Button>
+    </Group>
+  );
+}

package/src/components/Group/examples/08-slider-integration.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+import { Group, Slider } from "ui-lab-components";
+import { FaPercent } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Slider with Input Group",
+  description: "Numeric input synced with a slider for precise value selection.",
+};
+
+export default function Example() {
+  const [sliderValue, setSliderValue] = useState<number[]>([45]);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = parseInt(e.target.value);
+    if (!isNaN(val)) setSliderValue([Math.min(Math.max(val, 0), 100)]);
+  };
+
+  return (
+    <div className="space-y-4 w-64">
+      <Group>
+        <Group.Input type="number" min={0} max={100} value={sliderValue[0]} onChange={handleInputChange} className="w-full" />
+        <div className="bg-background-800 flex items-center px-3 text-foreground-400 text-sm font-medium">
+          <FaPercent />
+        </div>
+      </Group>
+      <Slider.Root value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />
+    </div>
+  );
+}

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

@@ -1,2 +1,16 @@
 export { default as Example1 } from './01-basic-group.js';
 export { metadata as metadata1 } from './01-basic-group.js';
+export { default as Example2 } from './02-create-project.js';
+export { metadata as metadata2 } from './02-create-project.js';
+export { default as Example3 } from './03-filter-bar.js';
+export { metadata as metadata3 } from './03-filter-bar.js';
+export { default as Example4 } from './04-documentation-search.js';
+export { metadata as metadata4 } from './04-documentation-search.js';
+export { default as Example5 } from './05-email-signup.js';
+export { metadata as metadata5 } from './05-email-signup.js';
+export { default as Example6 } from './06-copy-command.js';
+export { metadata as metadata6 } from './06-copy-command.js';
+export { default as Example7 } from './07-delete-confirmation.js';
+export { metadata as metadata7 } from './07-delete-confirmation.js';
+export { default as Example8 } from './08-slider-integration.js';
+export { metadata as metadata8 } from './08-slider-integration.js';

package/src/components/Group/examples.json

@@ -3,5 +3,40 @@
     "title": "Basic Group",
     "description": "A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.",
     "code": "import { Group } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Group>\n      <Group.Button>First</Group.Button>\n      <Group.Button>Second</Group.Button>\n      <Group.Button>Third</Group.Button>\n    </Group>\n  );\n}"
+  },
+  "02-create-project": {
+    "title": "Create Project",
+    "description": "A primary grouped action for creating a named item.",
+    "code": "import { Divider, Group } from \"ui-lab-components\";\nimport { FaPlus } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Group variant=\"primary\" orientation=\"horizontal\" spacing=\"xs\">\n      <Group.Input aria-label=\"Project name\" placeholder=\"Untitled project\" className=\"w-56\" />\n      <Divider orientation=\"vertical\" />\n      <Group.Button>\n        <FaPlus className=\"mr-1.5\" /> Create\n      </Group.Button>\n    </Group>\n  );\n}"
+  },
+  "03-filter-bar": {
+    "title": "Filter Bar with Selects",
+    "description": "Horizontal group combining Select dropdowns with action buttons for filtering interfaces.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Divider, Group, Select } from \"ui-lab-components\";\nimport { FaMagnifyingGlass, FaFilter } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [status, setStatus] = useState<string | number | null>(\"active\");\n\n  return (\n    <Group variant=\"default\" orientation=\"horizontal\">\n      <Group.Input icon={<FaMagnifyingGlass />} placeholder=\"Search...\">\n      </Group.Input>\n      <Divider />\n      <Group.Select selectedKey={status} onSelectionChange={setStatus} className=\"w-36\">\n        <Select.Trigger><Select.Value placeholder=\"Status\" /></Select.Trigger>\n        <Select.Content>\n          <Select.List>\n            <Select.Item value=\"active\" textValue=\"Active\">Active</Select.Item>\n            <Select.Item value=\"inactive\" textValue=\"Inactive\">Inactive</Select.Item>\n            <Select.Item value=\"pending\" textValue=\"Pending\">Pending</Select.Item>\n          </Select.List>\n        </Select.Content>\n      </Group.Select>\n      <Divider />\n      <Group.Button size=\"md\"><FaFilter className=\"mr-1.5\" /> Apply</Group.Button>\n    </Group>\n  );\n}"
+  },
+  "04-documentation-search": {
+    "title": "Documentation Search",
+    "description": "A search input with an icon prefix and joined submit button.",
+    "code": "import { Divider, Group } from \"ui-lab-components\";\nimport { FaMagnifyingGlass } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Group variant=\"secondary\">\n      <div className=\"bg-background-800 flex items-center px-3 text-foreground-400\">\n        <FaMagnifyingGlass />\n      </div>\n      <Divider />\n      <Group.Input placeholder=\"Search documentation...\" className=\"w-64\" />\n      <Divider />\n      <Group.Button className=\"w-full\">Search</Group.Button>\n    </Group>\n  );\n}"
+  },
+  "05-email-signup": {
+    "title": "Email Signup",
+    "description": "An email input with a joined subscription action.",
+    "code": "import { Divider, Group } from \"ui-lab-components\";\nimport { FaEnvelope } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Group variant=\"outline\">\n      <div className=\"bg-background-800 flex items-center px-3 text-foreground-400\">\n        <FaEnvelope />\n      </div>\n      <Divider />\n      <Group.Input placeholder=\"you@example.com\" type=\"email\" className=\"w-64\" />\n      <Divider />\n      <Group.Button>Subscribe</Group.Button>\n    </Group>\n  );\n}"
+  },
+  "06-copy-command": {
+    "title": "Copy Command",
+    "description": "A read-only command field with a joined copy action.",
+    "code": "import { Divider, Group } from \"ui-lab-components\";\nimport { FaCopy } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Group>\n      <Group.Input defaultValue=\"npm install ui-lab\" readOnly className=\"w-full font-mono text-sm\" />\n      <Divider />\n      <Group.Button icon={{ left: <FaCopy className=\"mr-1.5 text-foreground-400\" /> }} />\n    </Group>\n  );\n}"
+  },
+  "07-delete-confirmation": {
+    "title": "Delete Confirmation",
+    "description": "A danger variant group for destructive confirmation flows.",
+    "code": "import { Divider, Group } from \"ui-lab-components\";\nimport { FaTrash } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Group variant=\"danger\">\n      <Group.Input aria-label=\"Confirmation\" placeholder=\"Type DELETE\" className=\"w-48\" />\n      <Divider />\n      <Group.Button>\n        <FaTrash className=\"mr-1.5\" /> Delete\n      </Group.Button>\n    </Group>\n  );\n}"
+  },
+  "08-slider-integration": {
+    "title": "Slider with Input Group",
+    "description": "Numeric input synced with a slider for precise value selection.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Group, Slider } from \"ui-lab-components\";\nimport { FaPercent } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [sliderValue, setSliderValue] = useState<number[]>([45]);\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = parseInt(e.target.value);\n    if (!isNaN(val)) setSliderValue([Math.min(Math.max(val, 0), 100)]);\n  };\n\n  return (\n    <div className=\"space-y-4 w-64\">\n      <Group>\n        <Group.Input type=\"number\" min={0} max={100} value={sliderValue[0]} onChange={handleInputChange} className=\"w-full\" />\n        <div className=\"bg-background-800 flex items-center px-3 text-foreground-400 text-sm font-medium\">\n          <FaPercent />\n        </div>\n      </Group>\n      <Slider.Root value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />\n    </div>\n  );\n}"
   }
 }

package/src/components/Group/index.tsx

@@ -2,11 +2,25 @@ import React from 'react';
 import { Divider, Group } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-group.js';
+import Example2, { metadata as metadata2 } from './examples/02-create-project.js';
+import Example3, { metadata as metadata3 } from './examples/03-filter-bar.js';
+import Example4, { metadata as metadata4 } from './examples/04-documentation-search.js';
+import Example5, { metadata as metadata5 } from './examples/05-email-signup.js';
+import Example6, { metadata as metadata6 } from './examples/06-copy-command.js';
+import Example7, { metadata as metadata7 } from './examples/07-delete-confirmation.js';
+import Example8, { metadata as metadata8 } from './examples/08-slider-integration.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-group', Component: Example1, metadata: metadata1 },
+  { id: '02-create-project', Component: Example2, metadata: metadata2 },
+  { id: '03-filter-bar', Component: Example3, metadata: metadata3 },
+  { id: '04-documentation-search', Component: Example4, metadata: metadata4 },
+  { id: '05-email-signup', Component: Example5, metadata: metadata5 },
+  { id: '06-copy-command', Component: Example6, metadata: metadata6 },
+  { id: '07-delete-confirmation', Component: Example7, metadata: metadata7 },
+  { id: '08-slider-integration', Component: Example8, metadata: metadata8 },
 ];
 
 

package/src/components/Input/examples/03-sign-in.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { Input, Flex, Button } from "ui-lab-components";
+import { FaEnvelope, FaLock, FaEye, FaEyeSlash } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Sign In Form",
+  description: "Email and password fields with a password visibility toggle — a common authentication pattern.",
+};
+
+export default function Example() {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 320 }}>
+      <Input
+        type="email"
+        icon={<FaEnvelope className="w-3.5 h-3.5 text-foreground-400" />}
+        placeholder="Email address"
+        autoComplete="email"
+      />
+      <Input
+        type={showPassword ? "text" : "password"}
+        icon={<FaLock className="w-3.5 h-3.5 text-foreground-400" />}
+        placeholder="Password"
+        autoComplete="current-password"
+        actions={[
+          {
+            icon: showPassword
+              ? <FaEyeSlash className="w-3.5 h-3.5" />
+              : <FaEye className="w-3.5 h-3.5" />,
+            title: showPassword ? "Hide password" : "Show password",
+            onClick: () => setShowPassword((v) => !v),
+          },
+        ]}
+      />
+      <Button variant="primary" className="w-full mt-1">Sign in</Button>
+    </Flex>
+  );
+}

package/src/components/Input/examples/04-search.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import { Input, Flex, Badge } from "ui-lab-components";
+import { FaMagnifyingGlass, FaXmark } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Search",
+  description: "Search input with a keyboard shortcut hint that switches to a clear action once the user types.",
+};
+
+export default function Example() {
+  const [query, setQuery] = useState("");
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 340 }}>
+      <Input
+        icon={<FaMagnifyingGlass className="w-3.5 h-3.5 text-foreground-400" />}
+        placeholder="Search components..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        hint={!query ? <Badge>⌘K</Badge> : undefined}
+        actions={
+          query
+            ? [{ icon: <FaXmark className="w-3.5 h-3.5" />, title: "Clear", onClick: () => setQuery("") }]
+            : []
+        }
+      />
+    </Flex>
+  );
+}

package/src/components/Input/examples/05-user-handle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { Input, Flex } from "ui-lab-components";
+import { FaAt, FaCopy, FaCheck } from "react-icons/fa6";
+
+export const metadata = {
+  title: "User Handle",
+  description: "Editable username field with an inline copy action.",
+};
+
+export default function Example() {
+  const [handle, setHandle] = useState("kyza");
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 320 }}>
+      <Input
+        icon={<FaAt className="w-3.5 h-3.5 text-foreground-400" />}
+        placeholder="username"
+        value={handle}
+        onChange={(e) => setHandle(e.target.value)}
+        actions={[
+          {
+            icon: copied
+              ? <FaCheck className="w-3.5 h-3.5 text-green-500" />
+              : <FaCopy className="w-3.5 h-3.5" />,
+            title: copied ? "Copied!" : "Copy handle",
+            onClick: handleCopy,
+          },
+        ]}
+      />
+    </Flex>
+  );
+}

package/src/components/Input/examples/06-api-key.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { Input, Flex } from "ui-lab-components";
+import { FaKey, FaEye, FaEyeSlash, FaCopy, FaCheck } from "react-icons/fa6";
+
+export const metadata = {
+  title: "API Key",
+  description: "Read-only secret field with reveal and copy actions — suitable for credentials and tokens.",
+};
+
+export default function Example() {
+  const [revealed, setRevealed] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const key = "sk-proj-a8f2c1d9e4b7";
+
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 360 }}>
+      <Input
+        type={revealed ? "text" : "password"}
+        icon={<FaKey className="w-3.5 h-3.5 text-foreground-400" />}
+        value={key}
+        readOnly
+        actions={[
+          {
+            icon: revealed
+              ? <FaEyeSlash className="w-3.5 h-3.5" />
+              : <FaEye className="w-3.5 h-3.5" />,
+            title: revealed ? "Hide key" : "Reveal key",
+            onClick: () => setRevealed((v) => !v),
+          },
+          {
+            icon: copied
+              ? <FaCheck className="w-3.5 h-3.5 text-green-500" />
+              : <FaCopy className="w-3.5 h-3.5" />,
+            title: copied ? "Copied!" : "Copy key",
+            onClick: handleCopy,
+          },
+        ]}
+      />
+    </Flex>
+  );
+}

package/src/components/Input/examples/07-url-validation.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { Input, Flex } from "ui-lab-components";
+import { FaLink, FaCircleExclamation, FaCheck } from "react-icons/fa6";
+
+export const metadata = {
+  title: "URL with Validation",
+  description: "URL field that shows a success or error icon in the suffix slot based on the input value.",
+};
+
+export default function Example() {
+  const [url, setUrl] = useState("");
+
+  const isValid = url.length === 0 || /^https?:\/\/.+\..+/.test(url);
+  const showError = url.length > 0 && !isValid;
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 340 }}>
+      <Input
+        placeholder="https://example.com"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        error={showError}
+        icon={{
+          prefix: <FaLink className="w-3.5 h-3.5 text-foreground-400" />,
+          suffix: showError
+            ? <FaCircleExclamation className="w-3.5 h-3.5 text-red-500" />
+            : url.length > 0
+            ? <FaCheck className="w-3.5 h-3.5 text-green-500" />
+            : undefined,
+        }}
+      />
+    </Flex>
+  );
+}

package/src/components/Input/examples/08-quantity.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from "react";
+import { Input, Flex } from "ui-lab-components";
+
+export const metadata = {
+  title: "Quantity",
+  description: "Number input with native spin controls for selecting a bounded quantity.",
+};
+
+export default function Example() {
+  const [qty, setQty] = useState(1);
+
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 200 }}>
+      <Input
+        type="number"
+        placeholder="Qty"
+        value={qty}
+        min={1}
+        max={99}
+        onChange={(e) => setQty(Number(e.target.value))}
+      />
+    </Flex>
+  );
+}

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

@@ -2,3 +2,15 @@ export { default as Example1 } from './01-basic-input.js';
 export { metadata as metadata1 } from './01-basic-input.js';
 export { default as Example2 } from './02-validation.js';
 export { metadata as metadata2 } from './02-validation.js';
+export { default as Example3 } from './03-sign-in.js';
+export { metadata as metadata3 } from './03-sign-in.js';
+export { default as Example4 } from './04-search.js';
+export { metadata as metadata4 } from './04-search.js';
+export { default as Example5 } from './05-user-handle.js';
+export { metadata as metadata5 } from './05-user-handle.js';
+export { default as Example6 } from './06-api-key.js';
+export { metadata as metadata6 } from './06-api-key.js';
+export { default as Example7 } from './07-url-validation.js';
+export { metadata as metadata7 } from './07-url-validation.js';
+export { default as Example8 } from './08-quantity.js';
+export { metadata as metadata8 } from './08-quantity.js';

package/src/components/Input/examples.json

@@ -8,5 +8,35 @@
     "title": "Validation States",
     "description": "Input fields with error and success validation states, including helper text for user feedback.",
     "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n      {/* Error State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label error helperText=\"Please enter a valid email address\" helperTextError>\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          error\n          defaultValue=\"invalid-email\"\n          icon={{ suffix: <FaCircleExclamation className=\"text-danger-600\" size={14} /> }}\n        />\n      </div>\n\n      {/* Success State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label helperText=\"Email address is available\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          defaultValue=\"user@example.com\"\n          icon={{ suffix: <FaCircleCheck className=\"text-success-600\" size={14} /> }}\n          className=\"border-success-600 focus:border-success-600\"\n        />\n      </div>\n\n      {/* Default State with Helper Text */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label required helperText=\"We'll never share your email with anyone else.\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n        />\n      </div>\n    </div>\n  );\n}"
+  },
+  "03-sign-in": {
+    "title": "Sign In Form",
+    "description": "Email and password fields with a password visibility toggle — a common authentication pattern.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex, Button } from \"ui-lab-components\";\nimport { FaEnvelope, FaLock, FaEye, FaEyeSlash } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 320 }}>\n      <Input\n        type=\"email\"\n        icon={<FaEnvelope className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Email address\"\n        autoComplete=\"email\"\n      />\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        icon={<FaLock className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Password\"\n        autoComplete=\"current-password\"\n        actions={[\n          {\n            icon: showPassword\n              ? <FaEyeSlash className=\"w-3.5 h-3.5\" />\n              : <FaEye className=\"w-3.5 h-3.5\" />,\n            title: showPassword ? \"Hide password\" : \"Show password\",\n            onClick: () => setShowPassword((v) => !v),\n          },\n        ]}\n      />\n      <Button variant=\"primary\" className=\"w-full mt-1\">Sign in</Button>\n    </Flex>\n  );\n}"
+  },
+  "04-search": {
+    "title": "Search",
+    "description": "Search input with a keyboard shortcut hint that switches to a clear action once the user types.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex, Badge } from \"ui-lab-components\";\nimport { FaMagnifyingGlass, FaXmark } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [query, setQuery] = useState(\"\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 340 }}>\n      <Input\n        icon={<FaMagnifyingGlass className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Search components...\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        hint={!query ? <Badge>⌘K</Badge> : undefined}\n        actions={\n          query\n            ? [{ icon: <FaXmark className=\"w-3.5 h-3.5\" />, title: \"Clear\", onClick: () => setQuery(\"\") }]\n            : []\n        }\n      />\n    </Flex>\n  );\n}"
+  },
+  "05-user-handle": {
+    "title": "User Handle",
+    "description": "Editable username field with an inline copy action.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaAt, FaCopy, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [handle, setHandle] = useState(\"kyza\");\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 320 }}>\n      <Input\n        icon={<FaAt className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"username\"\n        value={handle}\n        onChange={(e) => setHandle(e.target.value)}\n        actions={[\n          {\n            icon: copied\n              ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n              : <FaCopy className=\"w-3.5 h-3.5\" />,\n            title: copied ? \"Copied!\" : \"Copy handle\",\n            onClick: handleCopy,\n          },\n        ]}\n      />\n    </Flex>\n  );\n}"
+  },
+  "06-api-key": {
+    "title": "API Key",
+    "description": "Read-only secret field with reveal and copy actions — suitable for credentials and tokens.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaKey, FaEye, FaEyeSlash, FaCopy, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [revealed, setRevealed] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const key = \"sk-proj-a8f2c1d9e4b7\";\n\n  const handleCopy = () => {\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 360 }}>\n      <Input\n        type={revealed ? \"text\" : \"password\"}\n        icon={<FaKey className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        value={key}\n        readOnly\n        actions={[\n          {\n            icon: revealed\n              ? <FaEyeSlash className=\"w-3.5 h-3.5\" />\n              : <FaEye className=\"w-3.5 h-3.5\" />,\n            title: revealed ? \"Hide key\" : \"Reveal key\",\n            onClick: () => setRevealed((v) => !v),\n          },\n          {\n            icon: copied\n              ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n              : <FaCopy className=\"w-3.5 h-3.5\" />,\n            title: copied ? \"Copied!\" : \"Copy key\",\n            onClick: handleCopy,\n          },\n        ]}\n      />\n    </Flex>\n  );\n}"
+  },
+  "07-url-validation": {
+    "title": "URL with Validation",
+    "description": "URL field that shows a success or error icon in the suffix slot based on the input value.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaLink, FaCircleExclamation, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [url, setUrl] = useState(\"\");\n\n  const isValid = url.length === 0 || /^https?:\\/\\/.+\\..+/.test(url);\n  const showError = url.length > 0 && !isValid;\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 340 }}>\n      <Input\n        placeholder=\"https://example.com\"\n        value={url}\n        onChange={(e) => setUrl(e.target.value)}\n        error={showError}\n        icon={{\n          prefix: <FaLink className=\"w-3.5 h-3.5 text-foreground-400\" />,\n          suffix: showError\n            ? <FaCircleExclamation className=\"w-3.5 h-3.5 text-red-500\" />\n            : url.length > 0\n            ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n            : undefined,\n        }}\n      />\n    </Flex>\n  );\n}"
+  },
+  "08-quantity": {
+    "title": "Quantity",
+    "description": "Number input with native spin controls for selecting a bounded quantity.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [qty, setQty] = useState(1);\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 200 }}>\n      <Input\n        type=\"number\"\n        placeholder=\"Qty\"\n        value={qty}\n        min={1}\n        max={99}\n        onChange={(e) => setQty(Number(e.target.value))}\n      />\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Input/index.tsx

@@ -3,12 +3,24 @@ import { Input } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-input.js';
 import Example2, { metadata as metadata2 } from './examples/02-validation.js';
+import Example3, { metadata as metadata3 } from './examples/03-sign-in.js';
+import Example4, { metadata as metadata4 } from './examples/04-search.js';
+import Example5, { metadata as metadata5 } from './examples/05-user-handle.js';
+import Example6, { metadata as metadata6 } from './examples/06-api-key.js';
+import Example7, { metadata as metadata7 } from './examples/07-url-validation.js';
+import Example8, { metadata as metadata8 } from './examples/08-quantity.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-input', Component: Example1, metadata: metadata1 },
   { id: '02-validation', Component: Example2, metadata: metadata2 },
+  { id: '03-sign-in', Component: Example3, metadata: metadata3 },
+  { id: '04-search', Component: Example4, metadata: metadata4 },
+  { id: '05-user-handle', Component: Example5, metadata: metadata5 },
+  { id: '06-api-key', Component: Example6, metadata: metadata6 },
+  { id: '07-url-validation', Component: Example7, metadata: metadata7 },
+  { id: '08-quantity', Component: Example8, metadata: metadata8 },
 ];
 
 

package/src/components/List/examples/02-review-queue.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { List } from "ui-lab-components";
+
+export const metadata = {
+  title: "Review Queue",
+  description: "A compact checklist for work that can be completed directly from each row.",
+};
+
+const reviewItems = [
+  { id: "legal", title: "Legal review", desc: "Updated retention language" },
+  { id: "security", title: "Security review", desc: "New access scopes" },
+  { id: "billing", title: "Billing review", desc: "Invoice copy changes" },
+];
+
+export default function Example() {
+  const [checked, setChecked] = useState(() => new Set(["legal"]));
+
+  const setItem = (id: string, value: boolean) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      value ? next.add(id) : next.delete(id);
+      return next;
+    });
+  };
+
+  const toggleItem = (id: string) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+
+  return (
+    <List items={reviewItems} spacing="sm" style={{ width: 320 }}>
+      {reviewItems.map((item) => (
+        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>
+          <List.Checkbox
+            aria-label={`Mark ${item.title} reviewed`}
+            placement="start"
+            checked={checked.has(item.id)}
+            onCheckedChange={(value) => setItem(item.id, value)}
+          />
+          <div className="min-w-0 flex-1">
+            <List.Title>{item.title}</List.Title>
+            <List.Desc>{item.desc}</List.Desc>
+          </div>
+        </List.Item>
+      ))}
+    </List>
+  );
+}