ui-lab-registry 0.3.45 → 0.3.46

package/src/components/Button/examples/06-icons.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Button, Flex } from 'ui-lab-components'
-import { FaArrowRight, FaDownload, FaEllipsisVertical, FaPlus } from 'react-icons/fa6'
-
-export const metadata = {
-  title: 'Icons',
-  description: 'Left, right, and icon-only button patterns.'
-};
-
-export default function Example() {
-  return (
-    <Flex gap="xs" align="center" justify="center" wrap="wrap">
-      <Button variant="primary" icon={{ left: <FaPlus /> }}>
-        New Project
-      </Button>
-      <Button variant="outline" icon={{ right: <FaArrowRight /> }}>
-        Continue
-      </Button>
-      <Button variant="secondary" icon={<FaDownload />}>
-        Download
-      </Button>
-      <Button size="icon" variant="ghost" aria-label="More actions" icon={<FaEllipsisVertical />} />
-    </Flex>
-  )
-}

package/src/components/Button/examples/07-split-button.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import React, { useState } from 'react'
-import { Button, Divider, Flex, Group, Select } from 'ui-lab-components'
-import { FaChevronDown } from 'react-icons/fa6'
-
-const splitActions = [
-  { value: "publish", label: "Publish now" },
-  { value: "schedule", label: "Schedule publish" },
-  { value: "save", label: "Save draft" },
-] as const;
-
-export const metadata = {
-  title: 'Split Button',
-  description: 'Group + Select primitives for a classic split button with a primary action and a separate menu trigger.'
-};
-
-export default function Example() {
-  const [action, setAction] = useState<string | number | null>(splitActions[0].value);
-  const selectedAction = splitActions.find((item) => item.value === action) ?? splitActions[0];
-
-  return (
-    <Flex direction="column" gap="sm" align="center">
-      <Group orientation="horizontal">
-        <Group.Select className="w-full" selectedKey={action} onSelectionChange={setAction}>
-          <Select.Value>
-            <Button variant="primary">{selectedAction.label}</Button>
-          </Select.Value>
-          <Divider />
-          <Select.Trigger
-            chevron={<FaChevronDown className="h-3.5 w-3.5" />}
-            aria-label="Choose split action"
-          />
-          <Select.Content>
-            <Select.List>
-              {splitActions.map((item) => (
-                <Select.Item key={item.value} value={item.value} textValue={item.label}>
-                  {item.label}
-                </Select.Item>
-              ))}
-            </Select.List>
-          </Select.Content>
-        </Group.Select>
-      </Group>
-    </Flex>
-  )
-}

package/src/components/Button/examples/08-button-group.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import React, { useState } from 'react'
-import { Button, Divider, Group } from 'ui-lab-components'
-import { FaGrip, FaList, FaTable } from 'react-icons/fa6'
-
-export const metadata = {
-  title: 'Button Group',
-  description: 'Joined view switcher using the Group compound component with active state.'
-};
-
-export default function Example() {
-  const [viewMode, setViewMode] = useState("list");
-
-  return (
-    <Group orientation="horizontal" spacing="xs">
-      <Group.Button active={viewMode === "list"} onPress={() => setViewMode("list")}>
-        <FaList className="mr-1.5 text-foreground-400" /> List
-      </Group.Button>
-      <Divider orientation="vertical" />
-      <Group.Button active={viewMode === "grid"} onPress={() => setViewMode("grid")}>
-        <FaGrip className="mr-1.5 text-foreground-400" /> Grid
-      </Group.Button>
-      <Divider orientation="vertical" />
-      <Group.Button active={viewMode === "table"} onPress={() => setViewMode("table")}>
-        <FaTable className="mr-1.5 text-foreground-400" /> Table
-      </Group.Button>
-    </Group>
-  )
-}

package/src/components/Button/examples.json

@@ -1,42 +0,0 @@
-{
-  "01-variants": {
-    "title": "Button Variants",
-    "description": "All available button variants side by side in a single row.",
-    "code": "import React from 'react'\nimport { Button, Flex } from 'ui-lab-components'\n\nconst buttonVariants = [\n  { label: \"Primary\", variant: \"primary\" },\n  { label: \"Default\", variant: \"default\" },\n  { label: \"Secondary\", variant: \"secondary\" },\n  { label: \"Outline\", variant: \"outline\" },\n  { label: \"Ghost\", variant: \"ghost\" },\n  { label: \"Danger\", variant: \"danger\" },\n] as const;\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"nowrap\">\n      {buttonVariants.map((button) => (\n        <Button key={button.variant} variant={button.variant}>\n          {button.label}\n        </Button>\n      ))}\n    </Flex>\n  )\n}"
-  },
-  "02-multi-actions": {
-    "title": "Multiple Actions",
-    "description": "A primary action button grouped with secondary actions and an options menu.",
-    "code": "\"use client\";\n\nimport { Button, Flex } from 'ui-lab-components'\nimport { FaEllipsisVertical } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" className=\"w-110 *:not-last:flex-1\">\n      <Button size=\"sm\" variant=\"primary\" >Subscribe</Button>\n      <Button size=\"sm\" >Message</Button>\n      <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} />\n    </Flex>\n  );\n}"
-  },
-  "03-joined-toggle": {
-    "title": "Joined Toggle Buttons",
-    "description": "Multiple buttons grouped together for view/mode selection with active state indication.",
-    "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Group, Divider, Input, Flex } from 'ui-lab-components'\nimport { FaList, FaGrip, FaTable, FaPlus } from \"react-icons/fa6\";\nimport { LuSearch } from \"react-icons/lu\";\n\nexport default function Example() {\n  const [viewMode, setViewMode] = useState(\"list\");\n  return (\n    <Flex className=\"w-110\" gap=\"xs\" align=\"center\">\n      <Input\n        placeholder=\"Search items...\"\n        icon={<LuSearch />}\n        className=\"w-full\"\n      />\n      <Group orientation=\"horizontal\" value={viewMode} onChange={setViewMode}>\n        <Group.Button size=\"icon\" value=\"list\"><FaList /></Group.Button>\n        <Divider orientation=\"vertical\" />\n        <Group.Button size=\"icon\" value=\"grid\"><FaGrip /></Group.Button>\n        <Divider orientation=\"vertical\" />\n        <Group.Button size=\"icon\" value=\"table\"><FaTable /></Group.Button>\n      </Group>\n      <Button size=\"sm\" icon={{ left: <FaPlus size={12} /> }} >New</Button>\n    </Flex>\n  );\n}"
-  },
-  "04-sub-stack-actions": {
-    "title": "Sub Stack Actions",
-    "description": "A collection of buttons and inputs arranged horizontally for grouped actions and filtering.",
-    "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Group, Input, Badge, Flex } from 'ui-lab-components'\nimport { FaList, FaGrip, FaPlus } from \"react-icons/fa6\";\nimport { LuSearch } from \"react-icons/lu\";\n\nexport default function Example() {\n  const [viewMode, setViewMode] = useState(\"list\");\n  return (\n    <Flex align=\"center\" gap=\"xs\" className=\"w-110\">\n      <Group orientation=\"horizontal\" spacing=\"xs\" value={viewMode} onChange={setViewMode}>\n        <Group.Button size=\"icon\" value=\"list\"><FaList /></Group.Button>\n        <Group.Button size=\"icon\" value=\"grid\"><FaGrip /></Group.Button>\n      </Group>\n      <Input\n        placeholder=\"Search...\"\n        icon={<LuSearch />}\n        hint={<Badge variant=\"secondary\" >Ctrl+K</Badge>}\n      />\n      <Button size=\"sm\" icon={{ right: <FaPlus size={12} /> }} >Upload</Button>\n    </Flex>\n  );\n}"
-  },
-  "05-split-action-button": {
-    "title": "Split Action Button",
-    "description": "A split button for bulk actions with dynamic icons, variants, and async feedback while keeping the primary action easy to repeat.",
-    "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Select, Badge, Flex } from 'ui-lab-components'\nimport { FaBox, FaSpinner, FaCheck, FaEllipsisVertical, FaCopy, FaTags, FaTrash } from \"react-icons/fa6\";\n\ntype BulkAction = \"archive\" | \"duplicate\" | \"tag\" | \"delete\";\n\nconst selectedCount: number = 12;\n\nconst bulkActions: Record<BulkAction, {\n  label: string;\n  loadingLabel: string;\n  successLabel: string;\n  variant: \"primary\" | \"outline\" | \"danger\";\n  icon: React.ReactNode;\n}> = {\n  archive: {\n    label: \"Archive\",\n    loadingLabel: \"Archiving...\",\n    successLabel: \"Archived\",\n    variant: \"primary\",\n    icon: <FaBox />,\n  },\n  duplicate: {\n    label: \"Duplicate\",\n    loadingLabel: \"Duplicating...\",\n    successLabel: \"Duplicated\",\n    variant: \"outline\",\n    icon: <FaCopy />,\n  },\n  tag: {\n    label: \"Add Tags\",\n    loadingLabel: \"Applying tags...\",\n    successLabel: \"Tagged\",\n    variant: \"outline\",\n    icon: <FaTags />,\n  },\n  delete: {\n    label: \"Delete\",\n    loadingLabel: \"Deleting...\",\n    successLabel: \"Deleted\",\n    variant: \"danger\",\n    icon: <FaTrash />,\n  },\n};\n\nexport default function Example() {\n  const [action, setAction] = useState<BulkAction>(\"archive\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n  const cfg = bulkActions[action];\n  const itemsLabel = `${selectedCount} ${selectedCount === 1 ? \"item\" : \"items\"}`;\n\n  const handleExecute = () => {\n    setStatus(\"loading\");\n    setTimeout(() => {\n      setStatus(\"done\");\n      setTimeout(() => setStatus(\"idle\"), 2000);\n    }, 1500);\n  };\n\n  const leftIcon = status === \"loading\" ? <FaSpinner className=\"animate-spin\" /> : status === \"done\" ? <FaCheck /> : cfg.icon;\n  const label = status === \"loading\" ? cfg.loadingLabel : status === \"done\" ? cfg.successLabel : `${cfg.label} ${itemsLabel}`;\n\n  return (\n    <Flex gap=\"xs\" className=\"w-110\" align=\"center\">\n      <Badge variant=\"secondary\">{selectedCount} selected</Badge>\n      <Select className=\"flex h-10\" selectedKey={action} onSelectionChange={(key) => setAction(key as BulkAction)} isDisabled={status !== \"idle\"}>\n        <Button\n          onPress={handleExecute}\n          variant={cfg.variant}\n          size=\"sm\"\n          className=\"w-full rounded-none justify-start\"\n          isDisabled={status !== \"idle\" || selectedCount === 0}\n          icon={leftIcon}\n        >\n          {label}\n        </Button>\n        <Divider orientation=\"vertical\" spacing=\"none\" />\n        <Select.Trigger aria-label=\"Choose a bulk action\" />\n        <Select.Content>\n          <Select.Item value=\"archive\" textValue=\"Archive\" icon={<FaBox className=\"h-3 w-3\" />}>Archive</Select.Item>\n          <Select.Item value=\"duplicate\" textValue=\"Duplicate\" icon={<FaCopy className=\"h-3 w-3\" />}>Duplicate</Select.Item>\n          <Select.Item value=\"tag\" textValue=\"Add Tags\" icon={<FaTags className=\"h-3 w-3\" />}>Add Tags</Select.Item>\n          <Select.Item value=\"delete\" textValue=\"Delete\" icon={<FaTrash className=\"h-3 w-3\" />}>Delete</Select.Item>\n        </Select.Content>\n      </Select>\n      <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} aria-label=\"More bulk actions\" />\n    </Flex>\n  );\n}"
-  },
-  "06-icons": {
-    "title": "Icons",
-    "description": "Left, right, and icon-only button patterns.",
-    "code": "import React from 'react'\nimport { Button, Flex } from 'ui-lab-components'\nimport { FaArrowRight, FaDownload, FaEllipsisVertical, FaPlus } from 'react-icons/fa6'\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Button variant=\"primary\" icon={{ left: <FaPlus /> }}>\n        New Project\n      </Button>\n      <Button variant=\"outline\" icon={{ right: <FaArrowRight /> }}>\n        Continue\n      </Button>\n      <Button variant=\"secondary\" icon={<FaDownload />}>\n        Download\n      </Button>\n      <Button size=\"icon\" variant=\"ghost\" aria-label=\"More actions\" icon={<FaEllipsisVertical />} />\n    </Flex>\n  )\n}"
-  },
-  "07-split-button": {
-    "title": "Split Button",
-    "description": "Group + Select primitives for a classic split button with a primary action and a separate menu trigger.",
-    "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Flex, Group, Select } from 'ui-lab-components'\nimport { FaChevronDown } from 'react-icons/fa6'\n\nconst splitActions = [\n  { value: \"publish\", label: \"Publish now\" },\n  { value: \"schedule\", label: \"Schedule publish\" },\n  { value: \"save\", label: \"Save draft\" },\n] as const;\n\nexport default function Example() {\n  const [action, setAction] = useState<string | number | null>(splitActions[0].value);\n  const selectedAction = splitActions.find((item) => item.value === action) ?? splitActions[0];\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" align=\"center\">\n      <Group orientation=\"horizontal\">\n        <Group.Select className=\"w-full\" selectedKey={action} onSelectionChange={setAction}>\n          <Select.Value>\n            <Button variant=\"primary\">{selectedAction.label}</Button>\n          </Select.Value>\n          <Divider />\n          <Select.Trigger\n            chevron={<FaChevronDown className=\"h-3.5 w-3.5\" />}\n            aria-label=\"Choose split action\"\n          />\n          <Select.Content>\n            <Select.List>\n              {splitActions.map((item) => (\n                <Select.Item key={item.value} value={item.value} textValue={item.label}>\n                  {item.label}\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Content>\n        </Group.Select>\n      </Group>\n    </Flex>\n  )\n}"
-  },
-  "08-button-group": {
-    "title": "Button Group",
-    "description": "Joined view switcher using the Group compound component with active state.",
-    "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Group } from 'ui-lab-components'\nimport { FaGrip, FaList, FaTable } from 'react-icons/fa6'\n\nexport default function Example() {\n  const [viewMode, setViewMode] = useState(\"list\");\n\n  return (\n    <Group orientation=\"horizontal\" spacing=\"xs\">\n      <Group.Button active={viewMode === \"list\"} onPress={() => setViewMode(\"list\")}>\n        <FaList className=\"mr-1.5 text-foreground-400\" /> List\n      </Group.Button>\n      <Divider orientation=\"vertical\" />\n      <Group.Button active={viewMode === \"grid\"} onPress={() => setViewMode(\"grid\")}>\n        <FaGrip className=\"mr-1.5 text-foreground-400\" /> Grid\n      </Group.Button>\n      <Divider orientation=\"vertical\" />\n      <Group.Button active={viewMode === \"table\"} onPress={() => setViewMode(\"table\")}>\n        <FaTable className=\"mr-1.5 text-foreground-400\" /> Table\n      </Group.Button>\n    </Group>\n  )\n}"
-  }
-}

package/src/components/Card/examples/01-notification.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Card, Button, Flex, Badge } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Notification Card',
-  description: 'A status-driven card with a badge, body copy, and a footer action. Caller controls read state.',
-};
-
-export default function Example() {
-  const [read, setRead] = useState(false);
-
-  return (
-    <Card style={{ width: 360, opacity: read ? 0.6 : 1, transition: 'opacity 0.2s' }}>
-      <Card.Header>
-        <Flex justify="between" align="center">
-          <span className="text-sm font-medium text-foreground-100">Deployment failed</span>
-          <Badge variant="destructive">Error</Badge>
-        </Flex>
-      </Card.Header>
-      <Card.Body>
-        <p className="text-sm text-foreground-400">
-          The production deploy of <span className="text-foreground-200">api-gateway</span> failed at step "Run tests". Check the logs for details.
-        </p>
-      </Card.Body>
-      <Card.Footer>
-        <Flex justify="between" align="center">
-          <span className="text-xs text-foreground-500">2 minutes ago</span>
-          <Button size="sm" variant="ghost" onPress={() => setRead(true)}>
-            Mark as read
-          </Button>
-        </Flex>
-      </Card.Footer>
-    </Card>
-  );
-}

package/src/components/Card/examples/02-settings-panel.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Card, Button, Flex, Switch } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Settings Panel',
-  description: 'Card used as a settings section with a list of toggle rows and save/cancel actions in the footer.',
-};
-
-const items = [
-  { label: 'Email alerts', description: 'Receive alerts via email' },
-  { label: 'Push notifications', description: 'Browser push notifications' },
-  { label: 'Weekly digest', description: 'Summary sent every Monday' },
-];
-
-export default function Example() {
-  const [enabled, setEnabled] = useState(true);
-
-  return (
-    <Card style={{ width: 360 }}>
-      <Card.Header>
-        <span className="text-sm font-medium text-foreground-100">Notifications</span>
-      </Card.Header>
-      <Card.Body className="space-y-4 py-4">
-        {items.map((item) => (
-          <Flex key={item.label} justify="between" align="center">
-            <div>
-              <p className="text-sm text-foreground-100">{item.label}</p>
-              <p className="text-xs text-foreground-500">{item.description}</p>
-            </div>
-            <Switch
-              isSelected={enabled}
-              onChange={setEnabled}
-              aria-label={item.label}
-            />
-          </Flex>
-        ))}
-      </Card.Body>
-      <Card.Footer>
-        <Flex justify="end" gap="xs">
-          <Button size="sm" variant="ghost">Cancel</Button>
-          <Button size="sm" variant="primary">Save</Button>
-        </Flex>
-      </Card.Footer>
-    </Card>
-  );
-}

package/src/components/Card/examples/03-task-progress.tsx

@@ -1,43 +0,0 @@
-import { Card, Button, Flex, Progress } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Task Progress',
-  description: 'Card displaying a checklist with a progress bar in the header to summarize completion state.',
-};
-
-const tasks = [
-  { label: 'Design review', done: true },
-  { label: 'Write changelog', done: true },
-  { label: 'Update docs', done: false },
-  { label: 'Deploy to staging', done: false },
-];
-
-const completed = tasks.filter((t) => t.done).length;
-
-export default function Example() {
-  return (
-    <Card style={{ width: 360 }}>
-      <Card.Header>
-        <Flex justify="between" align="center">
-          <span className="text-sm font-medium text-foreground-100">Release v2.4.0</span>
-          <span className="text-xs text-foreground-500">{completed}/{tasks.length}</span>
-        </Flex>
-        <Progress value={(completed / tasks.length) * 100} className="mt-2" />
-      </Card.Header>
-      <Card.Body className="py-3">
-        <ul className="space-y-2">
-          {tasks.map((task) => (
-            <li key={task.label} className="flex items-center gap-2 text-sm">
-              <span className={task.done ? 'text-foreground-500 line-through' : 'text-foreground-200'}>
-                {task.label}
-              </span>
-            </li>
-          ))}
-        </ul>
-      </Card.Body>
-      <Card.Footer>
-        <Button size="sm" variant="outline" className="w-full">View milestone</Button>
-      </Card.Footer>
-    </Card>
-  );
-}

package/src/components/Checkbox/examples/01-basic-states.tsx

@@ -1,17 +0,0 @@
-import { Checkbox, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Basic States',
-  description: 'The default checkbox states: unchecked, checked, disabled, and disabled checked.',
-};
-
-export default function Example() {
-  return (
-    <Flex direction="column" gap="md" style={{ width: 280 }}>
-      <Checkbox id="basic-unchecked" label="Unchecked" />
-      <Checkbox id="basic-checked" label="Checked" defaultChecked />
-      <Checkbox id="basic-disabled" label="Disabled" disabled />
-      <Checkbox id="basic-disabled-checked" label="Disabled checked" disabled defaultChecked />
-    </Flex>
-  );
-}

package/src/components/Checkbox/examples/02-helper-text.tsx

@@ -1,26 +0,0 @@
-import { Checkbox, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Helper and Error Text',
-  description: 'A labeled checkbox can include supporting text and an invalid state for form feedback.',
-};
-
-export default function Example() {
-  return (
-    <Flex direction="column" gap="lg" style={{ width: 320 }}>
-      <Checkbox
-        id="helper-release-notes"
-        label="Release notes"
-        helper="Get a short product update when a new version ships."
-        defaultChecked
-      />
-      <Checkbox
-        id="helper-terms"
-        label="Accept terms"
-        helper="You must accept the terms before continuing."
-        helperTextError
-        aria-invalid="true"
-      />
-    </Flex>
-  );
-}

package/src/components/Checkbox/examples/03-controlled.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Button, Checkbox, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Controlled',
-  description: 'Use checked and onChange when checkbox state is owned by the surrounding interface.',
-};
-
-export default function Example() {
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <Flex direction="column" gap="md" style={{ width: 300 }}>
-      <Checkbox
-        id="controlled-email"
-        label="Email notifications"
-        helper={checked ? 'Notifications are enabled.' : 'Notifications are paused.'}
-        checked={checked}
-        onChange={(event) => setChecked(event.currentTarget.checked)}
-      />
-      <Button variant="secondary" onClick={() => setChecked((value) => !value)}>
-        {checked ? 'Turn off' : 'Turn on'}
-      </Button>
-    </Flex>
-  );
-}

package/src/components/Checkbox/examples/04-group.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Checkbox, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Checkbox Group',
-  description: 'Use a small group when a user can select any number of related options.',
-};
-
-const subscriptionOptions = [
-  'Product updates',
-  'Security alerts',
-  'Billing reminders',
-];
-
-export default function Example() {
-  const [selected, setSelected] = useState<Set<string>>(
-    new Set(['Product updates', 'Security alerts'])
-  );
-
-  const toggleOption = (option: string) => {
-    setSelected((current) => {
-      const next = new Set(current);
-      next.has(option) ? next.delete(option) : next.add(option);
-      return next;
-    });
-  };
-
-  return (
-    <Flex direction="column" gap="md" style={{ width: 300 }}>
-      <div>
-        <p className="text-sm font-medium text-foreground-100">Subscriptions</p>
-        <p className="text-xs text-foreground-400">Choose the emails this workspace receives.</p>
-      </div>
-      <Flex direction="column" gap="sm">
-        {subscriptionOptions.map((option) => (
-          <Checkbox
-            key={option}
-            id={`subscription-${option.toLowerCase().replace(/ /g, '-')}`}
-            label={option}
-            checked={selected.has(option)}
-            onChange={() => toggleOption(option)}
-          />
-        ))}
-      </Flex>
-    </Flex>
-  );
-}

package/src/components/Checkbox/examples/05-indeterminate.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Checkbox, Divider, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Indeterminate',
-  description: 'A parent checkbox can show partial selection when only some child options are checked.',
-};
-
-const tableColumns = ['Name', 'Email', 'Role', 'Last active'];
-
-export default function Example() {
-  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(
-    new Set(['Name', 'Email'])
-  );
-
-  const allSelected = visibleColumns.size === tableColumns.length;
-  const isIndeterminate = visibleColumns.size > 0 && !allSelected;
-
-  const toggleAll = () => {
-    setVisibleColumns(allSelected ? new Set() : new Set(tableColumns));
-  };
-
-  const toggleColumn = (column: string) => {
-    setVisibleColumns((current) => {
-      const next = new Set(current);
-      next.has(column) ? next.delete(column) : next.add(column);
-      return next;
-    });
-  };
-
-  return (
-    <Flex direction="column" gap="sm" style={{ width: 280 }}>
-      <Checkbox
-        id="columns-all"
-        label="Show all columns"
-        checked={allSelected}
-        isIndeterminate={isIndeterminate}
-        onChange={toggleAll}
-      />
-      <Divider />
-      <Flex direction="column" gap="sm" styles={{ root: 'pl-8' }}>
-        {tableColumns.map((column) => (
-          <Checkbox
-            key={column}
-            id={`column-${column.toLowerCase().replace(/ /g, '-')}`}
-            label={column}
-            checked={visibleColumns.has(column)}
-            onChange={() => toggleColumn(column)}
-          />
-        ))}
-      </Flex>
-    </Flex>
-  );
-}

package/src/components/Checkbox/examples/06-consent-form.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Button, Checkbox, Flex } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Consent Form',
-  description: 'A required checkbox can gate a form action while optional choices remain independent.',
-};
-
-export default function Example() {
-  const [accepted, setAccepted] = useState(false);
-  const [updates, setUpdates] = useState(false);
-
-  return (
-    <Flex direction="column" gap="md" style={{ width: 320 }}>
-      <Checkbox
-        id="consent-terms"
-        label="I agree to the terms"
-        helper="Required to create a workspace."
-        checked={accepted}
-        onChange={(event) => setAccepted(event.currentTarget.checked)}
-      />
-      <Checkbox
-        id="consent-updates"
-        label="Send product updates"
-        checked={updates}
-        onChange={(event) => setUpdates(event.currentTarget.checked)}
-      />
-      <Button variant="primary" isDisabled={!accepted} styles={{ root: 'w-full' }}>
-        Continue
-      </Button>
-    </Flex>
-  );
-}

package/src/components/Color/examples/01-basic-color-picker.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { Color } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Color Trigger',
-  description: 'An uncontrolled color picker using Color as the provider and Color.Trigger to open the picker area in a popover.',
-};
-
-export default function Example() {
-  return (
-    <div className="flex items-center justify-center">
-      <Color defaultValue="#3b82f6" size="md">
-        <Color.Trigger aria-label="Choose color" />
-      </Color>
-    </div>
-  );
-}

package/src/components/Color/examples/02-color-picker-opacity.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Color } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Controlled Color Trigger',
-  description: 'A controlled color picker with alpha support, using Color.Trigger to keep the picker area in a popover.',
-};
-
-export default function Example() {
-  const [color, setColor] = useState('#ef4444');
-
-  return (
-    <div className="flex flex-col gap-4 items-center">
-      <Color
-        value={color}
-        onChange={setColor}
-        showOpacity={true}
-        size="md"
-      >
-        <Color.Trigger aria-label="Choose accent color" />
-      </Color>
-      <div className="text-sm text-foreground-400">
-        Selected: {color}
-      </div>
-    </div>
-  );
-}

package/src/components/Color/examples/03-color-picker-preview.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Color } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Inline Color Area',
-  description: 'Color.Area can be composed directly inside Color when the picker should stay visible.',
-};
-
-export default function Example() {
-  const [color, setColor] = useState('#8b5cf6');
-
-  return (
-    <div className="flex flex-col gap-4 items-center">
-      <Color
-        value={color}
-        onChange={setColor}
-        showPreview={true}
-        format="hex"
-        size="md"
-      >
-        <Color.Area />
-      </Color>
-    </div>
-  );
-}

package/src/components/Color/examples/04-color-slider-primitive.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { useState } from 'react';
-import { Color } from 'ui-lab-components';
-
-export const metadata = {
-  title: 'Standalone Color Slider',
-  description: 'Color.Slider can be used on its own for hue and opacity control without rendering the full color picker.',
-};
-
-export default function Example() {
-  const [hue, setHue] = useState(215);
-  const [opacity, setOpacity] = useState(0.72);
-
-  const baseColor = `hsl(${hue} 100% 50%)`;
-  const previewColor = `hsl(${hue} 100% 50% / ${opacity})`;
-
-  return (
-    <div className="w-72 space-y-4">
-      <div className="flex items-center gap-3">
-        <div
-          className="h-10 w-10 rounded-sm border border-background-700"
-          style={{ backgroundColor: previewColor }}
-          aria-hidden="true"
-        />
-        <div className="min-w-0 flex-1 text-sm text-foreground-300">
-          <div>Hue {Math.round(hue)} deg</div>
-          <div>Opacity {Math.round(opacity * 100)}%</div>
-        </div>
-      </div>
-
-      <Color.Slider
-        aria-label="Accent hue"
-        value={hue}
-        onChange={setHue}
-      />
-
-      <Color.Slider
-        type="opacity"
-        aria-label="Accent opacity"
-        value={opacity}
-        onChange={setOpacity}
-        color={baseColor}
-      />
-    </div>
-  );
-}