ui-lab-registry 0.3.45 → 0.3.46

package/src/components/Frame/examples/03-sidebar-tab.tsx

@@ -1,50 +0,0 @@
-export const metadata = {
-  title: 'Sidebar Tab Frame',
-  description: 'A frame with a tab extending from the side, perfect for active navigation states.'
-};
-
-import React from 'react';
-import { Frame } from 'ui-lab-components';
-
-const TAB_WIDTH = 120;
-const TAB_PATH = "M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0";
-
-const Example3 = () => {
-  return (
-    <div className="flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]">
-      {/* Mock Sidebar */}
-      <div className="flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64">
-        <div className="text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors">Dashboard</div>
-        <div className="text-accent-500 font-bold cursor-default">Settings</div>
-        <div className="text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors">Profile</div>
-      </div>
-
-      {/* Frame content - visually connecting to "Settings" */}
-      <div className="-ml-[1.5px]"> {/* Overlap border slightly to merge visual connection */}
-        <Frame
-          side="left"
-          shapeMode="extend"
-          path={TAB_PATH}
-          pathWidth={TAB_WIDTH}
-          className="w-80 h-64 p-6"
-          style={{
-            "--frame-fill": "var(--color-background-900)",
-            "--frame-radius": "16px",
-            color: "var(--background-700)",
-          } as React.CSSProperties}
-        >
-          <div className="h-full flex flex-col justify-center">
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Settings</h2>
-            <div className="space-y-3">
-              <div className="h-2 w-2/3 bg-background-800 rounded"></div>
-              <div className="h-2 w-1/2 bg-background-800 rounded"></div>
-              <div className="h-2 w-3/4 bg-background-800 rounded"></div>
-            </div>
-          </div>
-        </Frame>
-      </div>
-    </div>
-  );
-};
-
-export default Example3;

package/src/components/Grid/examples/01-basic-grid.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Grid } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Grid',
-  description: 'A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.'
-};
-
-export default function Example() {
-  return (
-    <Grid columns={3} gap="md">
-      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>
-      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>
-      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>
-      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>
-      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>
-      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>
-    </Grid>
-  );
-}

package/src/components/Group/examples/01-basic-group.tsx

@@ -1,16 +0,0 @@
-import { Group } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Group',
-  description: 'A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.'
-};
-
-export default function Example() {
-  return (
-    <Group>
-      <Group.Button>First</Group.Button>
-      <Group.Button>Second</Group.Button>
-      <Group.Button>Third</Group.Button>
-    </Group>
-  );
-}

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

@@ -1,19 +0,0 @@
-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

@@ -1,34 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,30 +0,0 @@
-"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/examples.json

@@ -1,10 +0,0 @@
-{
-  "examples": [
-    {
-      "id": "01-basic-group",
-      "title": "Basic Group",
-      "description": "A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.",
-      "file": "01-basic-group.tsx"
-    }
-  ]
-}

package/src/components/Group/examples.json

@@ -1,42 +0,0 @@
-{
-  "01-basic-group": {
-    "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/Input/examples/01-basic-input.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Input } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Input',
-  description: 'A simple text input field with default styling. Use this as the standard input element for collecting user text input.'
-};
-
-export default function Example() {
-  return <Input placeholder="Enter text..." />;
-}

package/src/components/Input/examples/02-validation.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Input, Label } from 'ui-lab-components';
-import { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';
-
-export const metadata = {
-  title: 'Validation States',
-  description: 'Input fields with error and success validation states, including helper text for user feedback.'
-};
-
-export default function Example() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-sm">
-      {/* Error State */}
-      <div className="flex flex-col gap-1.5">
-        <Label error helperText="Please enter a valid email address" helperTextError>
-          Email
-        </Label>
-        <Input
-          type="email"
-          placeholder="Enter your email"
-          error
-          defaultValue="invalid-email"
-          icon={{ suffix: <FaCircleExclamation className="text-danger-600" size={14} /> }}
-        />
-      </div>
-
-      {/* Success State */}
-      <div className="flex flex-col gap-1.5">
-        <Label helperText="Email address is available">
-          Email
-        </Label>
-        <Input
-          type="email"
-          placeholder="Enter your email"
-          defaultValue="user@example.com"
-          icon={{ suffix: <FaCircleCheck className="text-success-600" size={14} /> }}
-          className="border-success-600 focus:border-success-600"
-        />
-      </div>
-
-      {/* Default State with Helper Text */}
-      <div className="flex flex-col gap-1.5">
-        <Label required helperText="We'll never share your email with anyone else.">
-          Email
-        </Label>
-        <Input
-          type="email"
-          placeholder="Enter your email"
-        />
-      </div>
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-"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

@@ -1,31 +0,0 @@
-"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

@@ -1,40 +0,0 @@
-"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

@@ -1,48 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-"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/examples.json

@@ -1,16 +0,0 @@
-{
-  "examples": [
-    {
-      "id": "01-basic-input",
-      "title": "Basic Input",
-      "description": "A simple text input field with default styling. Use this as the standard input element for collecting user text input.",
-      "file": "01-basic-input.tsx"
-    },
-    {
-      "id": "02-validation",
-      "title": "Validation States",
-      "description": "Input fields with error and success validation states, including helper text for user feedback.",
-      "file": "02-validation.tsx"
-    }
-  ]
-}

package/src/components/Label/examples/01-basic-label.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Label, Input } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic Label',
-  description: 'A simple label component associated with a form input. Use this to provide accessible labels for form elements.'
-};
-
-export default function Example() {
-  return (
-    <div>
-      <Label htmlFor="name">Name</Label>
-      <Input id="name" placeholder="Enter your name" />
-    </div>
-  );
-}