@kjaniec-dev/ui-mcp 0.5.0 → 0.7.0

package/data/components.json

@@ -212,7 +212,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Input placeholder=\"Jane Doe\" />"
+    "usageSnippet": "<Input placeholder=\"Kamil Janiec\" />"
   },
   {
     "name": "Textarea",
@@ -230,6 +230,43 @@
     "cva": null,
     "usageSnippet": "<Textarea placeholder=\"What is this project about?\" />"
   },
+  {
+    "name": "TextField",
+    "importPath": "import { TextField } from \"@kjaniec-dev/ui\";",
+    "description": "React component TextField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "hint",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TextField label=\"Connection String\" defaultValue=\"postgresql://db.kjaniec.dev:5432\" />"
+  },
   {
     "name": "Label",
     "importPath": "import { Label } from \"@kjaniec-dev/ui\";",
@@ -284,7 +321,44 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Select>\n        <option>Administrator</option>\n        <option>Editor</option>\n        <option>View only</option>\n      </Select>"
+    "usageSnippet": "<Select>\n        <option>Personal Portfolio</option>\n        <option>B2B Landlord SaaS</option>\n        <option>Accounting App</option>\n      </Select>"
+  },
+  {
+    "name": "SelectField",
+    "importPath": "import { SelectField } from \"@kjaniec-dev/ui\";",
+    "description": "React component SelectField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "hint",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SelectField>\n  <!-- Content -->\n</SelectField>"
   },
   {
     "name": "Checkbox",
@@ -302,6 +376,36 @@
     "cva": null,
     "usageSnippet": "<Checkbox defaultChecked label=\"Email notifications\" />"
   },
+  {
+    "name": "CheckboxField",
+    "importPath": "import { CheckboxField } from \"@kjaniec-dev/ui\";",
+    "description": "React component CheckboxField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "hint",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<CheckboxField label=\"Enable auto-backups daily\" defaultChecked />"
+  },
   {
     "name": "Radio",
     "importPath": "import { Radio } from \"@kjaniec-dev/ui\";",
@@ -876,6 +980,94 @@
     "cva": null,
     "usageSnippet": "<Pagination page={page} pageCount={9} onPageChange={setPage} />"
   },
+  {
+    "name": "BottomNavigation",
+    "importPath": "import { BottomNavigation } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomNavigation.",
+    "props": [
+      {
+        "name": "items",
+        "type": "BottomNavigationItem[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "showLabels",
+        "type": "\"always\" | \"active\" | \"never\"",
+        "optional": true,
+        "defaultValue": "\"always\"",
+        "description": "Mode for displaying labels:\n- 'always': Always show labels for all items.\n- 'active': Only show label for the active item, hiding others.\n- 'never': Hide all labels (only show icons)."
+      },
+      {
+        "name": "fixed",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "If true, uses fixed positioning at the bottom of the viewport with backdrop-blur."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<BottomNavigation items={navItems} fixed={false} showLabels=\"always\" />"
+  },
+  {
+    "name": "BottomNavigationItem",
+    "importPath": "import { BottomNavigationItem } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomNavigationItem.",
+    "props": [
+      {
+        "name": "id",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onClick",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "active",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "badge",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<BottomNavigationItem>\n  <!-- Content -->\n</BottomNavigationItem>"
+  },
   {
     "name": "Table",
     "importPath": "import { Table } from \"@kjaniec-dev/ui\";",
@@ -1096,7 +1288,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<PageHeader\n      eyebrow=\"Open source\"\n      title=\"Projects\"\n      description=\"Things I've built and shipped.\"\n      actions={\n        <>\n          <Button size=\"sm\">View all</Button>\n          <Button size=\"sm\" variant=\"ghost\">GitHub</Button>\n        </>"
+    "usageSnippet": "<PageHeader\n        eyebrow=\"B2B SaaS\"\n        title=\"Dashboard Shell\"\n        description=\"The shell structure renders a responsive frame container with a sticky sidebar, topbar, and main canvas.\"\n        actions={<Button size=\"sm\">New Project</Button>}\n      />"
   },
   {
     "name": "EmptyState",
@@ -1239,6 +1431,69 @@
         "optional": true,
         "defaultValue": null,
         "description": ""
+      },
+      {
+        "name": "getRowKey",
+        "type": "(row: T, index: number) => React.Key",
+        "optional": true,
+        "defaultValue": null,
+        "description": "// Production-grade features"
+      },
+      {
+        "name": "onRowClick",
+        "type": "(row: T) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "toolbar",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "pagination",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "selectedRows",
+        "type": "Set<React.Key>",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onSelectionChange",
+        "type": "(selectedKeys: Set<React.Key>) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "sortBy",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "// Sorting props"
+      },
+      {
+        "name": "sortDirection",
+        "type": "\"asc\" | \"desc\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onSort",
+        "type": "(sortKey: string, direction: \"asc\" | \"desc\") => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
       }
     ],
     "cva": null,
@@ -1269,9 +1524,674 @@
         "optional": true,
         "defaultValue": null,
         "description": ""
+      },
+      {
+        "name": "align",
+        "type": "\"left\" | \"center\" | \"right\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "sortable",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "sortKey",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
       }
     ],
     "cva": null,
     "usageSnippet": "<DataTableColumn>\n  <!-- Content -->\n</DataTableColumn>"
+  },
+  {
+    "name": "FormField",
+    "importPath": "import { FormField } from \"@kjaniec-dev/ui\";",
+    "description": "React component FormField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "hint",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<FormField label=\"Full Name\">\n      <Input placeholder=\"Kamil Janiec\" />"
+  },
+  {
+    "name": "ErrorState",
+    "importPath": "import { ErrorState } from \"@kjaniec-dev/ui\";",
+    "description": "React component ErrorState.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Wystąpił błąd\"",
+        "description": ""
+      },
+      {
+        "name": "message",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onRetry",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "retryLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Spróbuj ponownie\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ErrorState\n      title=\"Failed to Load Invoices\"\n      message=\"We encountered a temporary database error while retrieving your billing records.\"\n      onRetry={() => alert(\"Retrying...\")}\n      retryLabel=\"Reload Invoices\"\n    />"
+  },
+  {
+    "name": "Skeleton",
+    "importPath": "import { Skeleton } from \"@kjaniec-dev/ui\";",
+    "description": "React component Skeleton.",
+    "props": [
+      {
+        "name": "variant",
+        "type": "\"text\" | \"circular\" | \"rectangular\"",
+        "optional": true,
+        "defaultValue": "\"rectangular\"",
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "string | number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "string | number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Skeleton variant=\"text\" width=\"60%\" />"
+  },
+  {
+    "name": "DashboardShell",
+    "importPath": "import { DashboardShell } from \"@kjaniec-dev/ui\";",
+    "description": "React component DashboardShell.",
+    "props": [
+      {
+        "name": "sidebar",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "topbar",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "sidebarWidth",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"md:w-64\"",
+        "description": ""
+      },
+      {
+        "name": "contentWidth",
+        "type": "\"default\" | \"wide\" | \"full\"",
+        "optional": true,
+        "defaultValue": "\"default\"",
+        "description": ""
+      },
+      {
+        "name": "stickyTopbar",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "mobileSidebar",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DashboardShell\n      sidebar={\n        <div className=\"p-6 flex flex-col gap-6 h-full bg-subtle\">\n          <div className=\"font-bold text-lg tracking-tight text-primary\">KJ Product Kit</div>\n          <nav className=\"flex flex-col gap-2\">\n            <a href=\"#\" className=\"text-sm font-medium text-foreground hover:text-primary transition-colors\">Dashboard</a>\n            <a href=\"#\" className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\">Projects</a>\n            <a href=\"#\" className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\">Invoices</a>\n            <a href=\"#\" className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\">Settings</a>\n          </nav>\n        </div>\n      }\n      topbar={\n        <div className=\"w-full flex items-center justify-between\">\n          <span className=\"text-sm font-medium text-muted-foreground\">Workspace / Personal</span>\n          <Button size=\"sm\" variant=\"ghost\">Profile</Button>\n        </div>\n      }\n    >\n      <PageHeader\n        eyebrow=\"B2B SaaS\"\n        title=\"Dashboard Shell\"\n        description=\"The shell structure renders a responsive frame container with a sticky sidebar, topbar, and main canvas.\"\n        actions={<Button size=\"sm\">New Project</Button>}\n      />"
+  },
+  {
+    "name": "SettingsLayout",
+    "importPath": "import { SettingsLayout } from \"@kjaniec-dev/ui\";",
+    "description": "React component SettingsLayout.",
+    "props": [
+      {
+        "name": "sidebar",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SettingsLayout\n      title=\"Profile Settings\"\n      description=\"Customize how your profile appears to other members.\"\n      sidebar={\n        <div className=\"flex flex-row lg:flex-col gap-1 w-full\">\n          <Button variant=\"ghost\" size=\"sm\" className=\"justify-start bg-primary/10 text-primary\">General</Button>\n          <Button variant=\"ghost\" size=\"sm\" className=\"justify-start text-muted-foreground\">Team</Button>\n          <Button variant=\"ghost\" size=\"sm\" className=\"justify-start text-muted-foreground\">Billing</Button>\n        </div>\n      }\n    >\n      <Card className=\"p-6 space-y-4\">\n        <div className=\"grid grid-cols-2 gap-4\">\n          <TextField label=\"First Name\" defaultValue=\"Kamil\" />"
+  },
+  {
+    "name": "DetailPageLayout",
+    "importPath": "import { DetailPageLayout } from \"@kjaniec-dev/ui\";",
+    "description": "React component DetailPageLayout.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "backHref",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "backLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Back\"",
+        "description": ""
+      },
+      {
+        "name": "onBackClick",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "actions",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "aside",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DetailPageLayout\n      title=\"Transaction #TRN-9022\"\n      description=\"Captured via Stripe checkout flow.\"\n      backLabel=\"Back to payments\"\n      onBackClick={() => alert(\"Back\")}\n      actions={\n        <>\n          <Button variant=\"outline\" size=\"sm\">Refund</Button>\n          <Button size=\"sm\">Receipt</Button>\n        </>"
+  },
+  {
+    "name": "TableToolbar",
+    "importPath": "import { TableToolbar } from \"@kjaniec-dev/ui\";",
+    "description": "React component TableToolbar.",
+    "props": [
+      {
+        "name": "searchQuery",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onSearchChange",
+        "type": "(query: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "searchPlaceholder",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Search...\"",
+        "description": ""
+      },
+      {
+        "name": "actions",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "filters",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TableToolbar>\n  <!-- Content -->\n</TableToolbar>"
+  },
+  {
+    "name": "ConfirmDialog",
+    "importPath": "import { ConfirmDialog } from \"@kjaniec-dev/ui\";",
+    "description": "React component ConfirmDialog.",
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onClose",
+        "type": "() => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onConfirm",
+        "type": "() => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "confirmLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Confirm\"",
+        "description": ""
+      },
+      {
+        "name": "cancelLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Cancel\"",
+        "description": ""
+      },
+      {
+        "name": "tone",
+        "type": "\"danger\" | \"primary\" | \"success\"",
+        "optional": true,
+        "defaultValue": "\"primary\"",
+        "description": ""
+      },
+      {
+        "name": "loading",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ConfirmDialog\n          open={open}\n          onClose={() => setOpen(false)}\n          title=\"Delete Workspace?\"\n          description=\"This action cannot be undone. All database records and configs will be deleted.\"\n          confirmLabel=\"Delete Workspace\"\n          tone=\"danger\"\n          loading={loading}\n          onConfirm={() => {\n            setLoading(true);\n            setTimeout(() => {\n              setLoading(false);\n              setOpen(false);\n            }, 1000);\n          }}\n        />"
+  },
+  {
+    "name": "Drawer",
+    "importPath": "import { Drawer } from \"@kjaniec-dev/ui\";",
+    "description": "React component Drawer.",
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onClose",
+        "type": "() => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"max-w-md\"",
+        "description": ""
+      },
+      {
+        "name": "side",
+        "type": "\"right\" | \"left\"",
+        "optional": true,
+        "defaultValue": "\"right\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Drawer\n          open={open}\n          onClose={() => setOpen(false)}\n          title=\"Edit Configuration\"\n          description=\"Manage property options and backup intervals.\"\n        >\n          <div className=\"space-y-6\">\n            <TextField label=\"Connection String\" defaultValue=\"postgresql://db.kjaniec.dev:5432\" />"
+  },
+  {
+    "name": "CommandPalette",
+    "importPath": "import { CommandPalette } from \"@kjaniec-dev/ui\";",
+    "description": "React component CommandPalette.",
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onClose",
+        "type": "() => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "items",
+        "type": "CommandPaletteItem[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "placeholder",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Type a command or search...\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<CommandPalette open={open} onClose={() => setOpen(false)} items={items} />"
+  },
+  {
+    "name": "CommandPaletteItem",
+    "importPath": "import { CommandPaletteItem } from \"@kjaniec-dev/ui\";",
+    "description": "React component CommandPaletteItem.",
+    "props": [
+      {
+        "name": "id",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "subtitle",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "category",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "shortcut",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "action",
+        "type": "() => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<CommandPaletteItem>\n  <!-- Content -->\n</CommandPaletteItem>"
+  },
+  {
+    "name": "SidebarNav",
+    "importPath": "import { SidebarNav } from \"@kjaniec-dev/ui\";",
+    "description": "React component SidebarNav.",
+    "props": [
+      {
+        "name": "groups",
+        "type": "SidebarNavGroup[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "currentHref",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SidebarNav>\n  <!-- Content -->\n</SidebarNav>"
+  },
+  {
+    "name": "SidebarNavItem",
+    "importPath": "import { SidebarNavItem } from \"@kjaniec-dev/ui\";",
+    "description": "React component SidebarNavItem.",
+    "props": [
+      {
+        "name": "id",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onClick",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "active",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "badge",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SidebarNavItem>\n  <!-- Content -->\n</SidebarNavItem>"
+  },
+  {
+    "name": "SidebarNavGroup",
+    "importPath": "import { SidebarNavGroup } from \"@kjaniec-dev/ui\";",
+    "description": "React component SidebarNavGroup.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "items",
+        "type": "SidebarNavItem[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SidebarNavGroup>\n  <!-- Content -->\n</SidebarNavGroup>"
   }
 ]

package/data/tokens.json

@@ -352,36 +352,36 @@
   {
     "name": "color.semantic.light.primary",
     "category": "color",
-    "light": "#f59e0b",
-    "dark": "#f59e0b",
+    "light": "#b45309",
+    "dark": "#b45309",
     "tailwind": ""
   },
   {
     "name": "color.semantic.light.primaryHover",
     "category": "color",
-    "light": "#d97706",
-    "dark": "#d97706",
+    "light": "#92400e",
+    "dark": "#92400e",
     "tailwind": ""
   },
   {
     "name": "color.semantic.light.primaryForeground",
     "category": "color",
-    "light": "#09090b",
-    "dark": "#09090b",
+    "light": "#ffffff",
+    "dark": "#ffffff",
     "tailwind": ""
   },
   {
     "name": "color.semantic.light.secondary",
     "category": "color",
-    "light": "#14b8a6",
-    "dark": "#14b8a6",
+    "light": "#0f766e",
+    "dark": "#0f766e",
     "tailwind": ""
   },
   {
     "name": "color.semantic.light.secondaryHover",
     "category": "color",
-    "light": "#0d9488",
-    "dark": "#0d9488",
+    "light": "#115e59",
+    "dark": "#115e59",
     "tailwind": ""
   },
   {
@@ -401,8 +401,8 @@
   {
     "name": "color.semantic.light.mutedForeground",
     "category": "color",
-    "light": "#71717a",
-    "dark": "#71717a",
+    "light": "#52525b",
+    "dark": "#52525b",
     "tailwind": ""
   },
   {
@@ -422,8 +422,8 @@
   {
     "name": "color.semantic.light.ring",
     "category": "color",
-    "light": "#f59e0b",
-    "dark": "#f59e0b",
+    "light": "#b45309",
+    "dark": "#b45309",
     "tailwind": ""
   },
   {
@@ -482,6 +482,76 @@
     "dark": "#f0f9ff",
     "tailwind": ""
   },
+  {
+    "name": "color.semantic.light.bgCanvas",
+    "category": "color",
+    "light": "#f4f4f5",
+    "dark": "#f4f4f5",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgSubtle",
+    "category": "color",
+    "light": "#fafafa",
+    "dark": "#fafafa",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgSurface",
+    "category": "color",
+    "light": "#ffffff",
+    "dark": "#ffffff",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgElevated",
+    "category": "color",
+    "light": "#ffffff",
+    "dark": "#ffffff",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.bgOverlay",
+    "category": "color",
+    "light": "rgba(9, 9, 11, 0.4)",
+    "dark": "rgba(9, 9, 11, 0.4)",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.borderSubtle",
+    "category": "color",
+    "light": "#f4f4f5",
+    "dark": "#f4f4f5",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.borderStrong",
+    "category": "color",
+    "light": "#e4e4e7",
+    "dark": "#e4e4e7",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.chart1",
+    "category": "color",
+    "light": "#f59e0b",
+    "dark": "#f59e0b",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.chart2",
+    "category": "color",
+    "light": "#14b8a6",
+    "dark": "#14b8a6",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.light.chart3",
+    "category": "color",
+    "light": "#0284c7",
+    "dark": "#0284c7",
+    "tailwind": ""
+  },
   {
     "name": "color.semantic.dark.background",
     "category": "color",
@@ -650,6 +720,76 @@
     "dark": "#082f49",
     "tailwind": ""
   },
+  {
+    "name": "color.semantic.dark.bgCanvas",
+    "category": "color",
+    "light": "#09090b",
+    "dark": "#09090b",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgSubtle",
+    "category": "color",
+    "light": "#121214",
+    "dark": "#121214",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgSurface",
+    "category": "color",
+    "light": "#18181b",
+    "dark": "#18181b",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgElevated",
+    "category": "color",
+    "light": "#27272a",
+    "dark": "#27272a",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.bgOverlay",
+    "category": "color",
+    "light": "rgba(9, 9, 11, 0.7)",
+    "dark": "rgba(9, 9, 11, 0.7)",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.borderSubtle",
+    "category": "color",
+    "light": "#1f1f23",
+    "dark": "#1f1f23",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.borderStrong",
+    "category": "color",
+    "light": "#27272a",
+    "dark": "#27272a",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.chart1",
+    "category": "color",
+    "light": "#fbbf24",
+    "dark": "#fbbf24",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.chart2",
+    "category": "color",
+    "light": "#2dd4bf",
+    "dark": "#2dd4bf",
+    "tailwind": ""
+  },
+  {
+    "name": "color.semantic.dark.chart3",
+    "category": "color",
+    "light": "#0ea5e9",
+    "dark": "#0ea5e9",
+    "tailwind": ""
+  },
   {
     "name": "typography.font.sans",
     "category": "typography",
@@ -915,5 +1055,47 @@
     "light": "1.18",
     "dark": "1.18",
     "tailwind": ""
+  },
+  {
+    "name": "motion.duration.fast",
+    "category": "motion",
+    "light": "120ms",
+    "dark": "120ms",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.duration.normal",
+    "category": "motion",
+    "light": "180ms",
+    "dark": "180ms",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.duration.slow",
+    "category": "motion",
+    "light": "280ms",
+    "dark": "280ms",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.ease.standard",
+    "category": "motion",
+    "light": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "dark": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.ease.out",
+    "category": "motion",
+    "light": "cubic-bezier(0, 0, 0.2, 1)",
+    "dark": "cubic-bezier(0, 0, 0.2, 1)",
+    "tailwind": ""
+  },
+  {
+    "name": "motion.ease.spring",
+    "category": "motion",
+    "light": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    "dark": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    "tailwind": ""
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjaniec-dev/ui-mcp",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "MCP (Model Context Protocol) server for KJ Product Kit design system and UI components",
   "license": "MIT",
   "author": "kjaniec-dev",