@kjaniec-dev/ui-mcp 0.7.2 → 0.9.0

package/data/components.json

@@ -62,7 +62,7 @@
         "size": "md"
       }
     },
-    "usageSnippet": "<Button variant=\"primary\">Primary</Button>"
+    "usageSnippet": "<Button size=\"sm\">Get Started</Button>"
   },
   {
     "name": "Badge",
@@ -191,6 +191,136 @@
     "cva": null,
     "usageSnippet": "<Progress {...args} />"
   },
+  {
+    "name": "ProgressRing",
+    "importPath": "import { ProgressRing } from \"@kjaniec-dev/ui\";",
+    "description": "React component ProgressRing.",
+    "props": [
+      {
+        "name": "value",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "0",
+        "description": "Current progress value. Defaults to 0."
+      },
+      {
+        "name": "min",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "0",
+        "description": "Minimum progress value. Defaults to 0."
+      },
+      {
+        "name": "max",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "100",
+        "description": "Maximum progress value. Defaults to 100."
+      },
+      {
+        "name": "size",
+        "type": "ProgressRingSize",
+        "optional": true,
+        "defaultValue": "\"md\"",
+        "description": "Preset size of the ring. Defaults to \"md\"."
+      },
+      {
+        "name": "strokeWidth",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Override stroke thickness (in px)."
+      },
+      {
+        "name": "tone",
+        "type": "ProgressRingTone",
+        "optional": true,
+        "defaultValue": "\"primary\"",
+        "description": "Color tone of the progress indicator. Defaults to \"primary\"."
+      },
+      {
+        "name": "showValue",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Whether to show the percentage text inside the ring center if no children are provided. Defaults to false."
+      },
+      {
+        "name": "formatValue",
+        "type": "(value: number, percentage: number) => React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Optional formatter for the center percentage display."
+      },
+      {
+        "name": "trackClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Additional CSS class for the background track circle."
+      },
+      {
+        "name": "indicatorClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Additional CSS class for the progress indicator circle."
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Custom center content."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ProgressRing value={75} size=\"sm\" showValue />\n        <p style={{ marginTop: 8, fontSize: 12 }}>Small (sm)</p>\n      </div>\n      <div style={{ textAlign: \"center\" }}>\n        <ProgressRing value={75} size=\"md\" showValue />\n        <p style={{ marginTop: 8, fontSize: 12 }}>Medium (md)</p>\n      </div>\n      <div style={{ textAlign: \"center\" }}>\n        <ProgressRing value={75} size=\"lg\" showValue />\n        <p style={{ marginTop: 8, fontSize: 12 }}>Large (lg)</p>\n      </div>\n      <div style={{ textAlign: \"center\" }}>\n        <ProgressRing value={75} size=\"xl\" showValue />\n        <p style={{ marginTop: 8, fontSize: 12 }}>Extra Large (xl)</p>\n      </div>\n    </div>\n  ),\n};\n\nexport const Tones: Story = {\n  render: () => (\n    <div style={{ display: \"flex\", gap: 20, alignItems: \"center\", flexWrap: \"wrap\" }}>\n      <ProgressRing value={60} tone=\"primary\" showValue />\n      <ProgressRing value={60} tone=\"secondary\" showValue />\n      <ProgressRing value={60} tone=\"success\" showValue />\n      <ProgressRing value={60} tone=\"warning\" showValue />\n      <ProgressRing value={60} tone=\"danger\" showValue />\n      <ProgressRing value={60} tone=\"info\" showValue />\n    </div>\n  ),\n};\n\nexport const CustomFormatting: Story = {\n  render: () => (\n    <div style={{ display: \"flex\", gap: 24, alignItems: \"center\", flexWrap: \"wrap\" }}>\n      <ProgressRing\n        value={3}\n        max={5}\n        size=\"lg\"\n        tone=\"success\"\n        formatValue={(val) => (\n          <span style={{ fontSize: 14, fontWeight: \"bold\" }}>{val} / 5</span>\n        )}\n      />\n      <ProgressRing\n        value={80}\n        size=\"lg\"\n        tone=\"info\"\n        formatValue={(val) => (\n          <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n            <span style={{ fontSize: 16, fontWeight: \"bold\" }}>{val}GB</span>\n            <span style={{ fontSize: 10, opacity: 0.7 }}>of 100GB</span>\n          </div>\n        )}\n      />\n      <ProgressRing value={100} size=\"lg\" tone=\"success\">\n        <span style={{ fontSize: 20 }}>✓</span>\n      </ProgressRing>"
+  },
+  {
+    "name": "ProgressRingField",
+    "importPath": "import { ProgressRingField } from \"@kjaniec-dev/ui\";",
+    "description": "React component ProgressRingField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Field label text."
+      },
+      {
+        "name": "hint",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Helper hint text displayed beneath the control."
+      },
+      {
+        "name": "error",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Error message displayed beneath the control."
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Renders a required indicator (*)."
+      },
+      {
+        "name": "fieldClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Class name for the outer field wrapper div."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ProgressRingField\n  label=\"Storage Limit\"\n  hint=\"75% of your allocated disk storage used\"\n  value={75}\n  size=\"lg\"\n  tone=\"warning\"\n  showValue\n/>"
+  },
   {
     "name": "Input",
     "importPath": "import { Input } from \"@kjaniec-dev/ui\";",
@@ -305,7 +435,7 @@
     "description": "Vertical label + control + hint group.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<Field>\n      <Label required>Full name</Label>\n      <Input placeholder=\"Jane Doe\" />"
+    "usageSnippet": "<Field>\n  <Label required>Full name</Label>\n  <Input placeholder=\"Jane Doe\" />\n  <Hint>This is how your team will see you.</Hint>\n</Field>"
   },
   {
     "name": "Select",
@@ -321,7 +451,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Select>\n        <option>Personal Portfolio</option>\n        <option>B2B Landlord SaaS</option>\n        <option>Accounting App</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",
@@ -488,7 +618,58 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Segmented\n        value={v}\n        onChange={setV}\n        options={[\n          { value: \"day\", label: \"Day\" },\n          { value: \"week\", label: \"Week\" },\n          { value: \"month\", label: \"Month\" },\n        ]}\n      />"
+    "usageSnippet": "<Segmented\n  value={v}\n  onChange={setV}\n  options={[\n    { value: \"day\", label: \"Day\" },\n    { value: \"week\", label: \"Week\" },\n    { value: \"month\", label: \"Month\" },\n  ]}\n/>"
+  },
+  {
+    "name": "ToggleGroup",
+    "importPath": "import { ToggleGroup } from \"@kjaniec-dev/ui\";",
+    "description": "Multi-select toggle row. Always controlled — each button's pressed state is independent.",
+    "props": [
+      {
+        "name": "options",
+        "type": "ToggleGroupOption<T>[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "value",
+        "type": "T[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onChange",
+        "type": "(value: T[]) => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-label\"",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ToggleGroup options={options} value={value} onChange={setValue} aria-label=\"Text formatting\" />"
   },
   {
     "name": "Card",
@@ -518,7 +699,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Card elevated>\n      <CardContent style={{ paddingTop: \"1.35rem\" }}>\n        <CardTitle>Q3 Quarterly Report</CardTitle>\n        <CardDescription>A summary of results and key product metrics.</CardDescription>\n      </CardContent>\n    </Card>"
+    "usageSnippet": "<Card>\n  <CardHeader>\n    <Badge variant=\"primary\" className=\"self-start\">Pro</Badge>\n    <CardTitle>Team Workspace</CardTitle>\n    <CardDescription>Unlimited projects, roles and activity history for your whole team.</CardDescription>\n  </CardHeader>\n  <CardFooter>\n    <Button size=\"sm\">Choose plan</Button>\n    <Button size=\"sm\" variant=\"ghost\">Details</Button>\n  </CardFooter>\n</Card>"
   },
   {
     "name": "CardHeader",
@@ -526,7 +707,7 @@
     "description": "React component CardHeader.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<CardHeader>\n        <CardTitle>Semantic Article Card</CardTitle>\n        <CardDescription>This card renders as an &lt;article&gt; element.</CardDescription>\n      </CardHeader>"
+    "usageSnippet": "<CardHeader>\n  <Badge variant=\"primary\" className=\"self-start\">Pro</Badge>\n  <CardTitle>Team Workspace</CardTitle>\n  <CardDescription>Unlimited projects, roles and activity history for your whole team.</CardDescription>\n</CardHeader>"
   },
   {
     "name": "CardTitle",
@@ -550,7 +731,7 @@
     "description": "Body region with default padding.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<CardContent style={{ paddingTop: \"1.35rem\" }}>\n        <CardTitle>Q3 Quarterly Report</CardTitle>\n        <CardDescription>A summary of results and key product metrics.</CardDescription>\n      </CardContent>"
+    "usageSnippet": "<CardContent style={{ paddingTop: \"1.35rem\" }}>\n  <CardTitle>Q3 Quarterly Report</CardTitle>\n  <CardDescription>A summary of results and key product metrics.</CardDescription>\n</CardContent>"
   },
   {
     "name": "CardFooter",
@@ -558,7 +739,7 @@
     "description": "React component CardFooter.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<CardFooter>\n        <Button size=\"sm\">Choose plan</Button>\n        <Button size=\"sm\" variant=\"ghost\">Details</Button>\n      </CardFooter>"
+    "usageSnippet": "<CardFooter>\n  <Button size=\"sm\">Choose plan</Button>\n  <Button size=\"sm\" variant=\"ghost\">Details</Button>\n</CardFooter>"
   },
   {
     "name": "Stat",
@@ -698,7 +879,7 @@
         "tone": "secondary"
       }
     },
-    "usageSnippet": "<AvatarGroup>\n        <Avatar>AK</Avatar>\n        <Avatar tone=\"primary\">MR</Avatar>\n        <Avatar tone=\"info\">JN</Avatar>\n        <Avatar tone=\"muted\">+9</Avatar>\n      </AvatarGroup>"
+    "usageSnippet": "<AvatarGroup>\n  <Avatar>AK</Avatar>\n  <Avatar tone=\"primary\">MR</Avatar>\n  <Avatar tone=\"info\">JN</Avatar>\n  <Avatar tone=\"muted\">+9</Avatar>\n</AvatarGroup>"
   },
   {
     "name": "Tabs",
@@ -728,7 +909,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"overview\">A dashboard with key metrics and quick actions.</TabsContent>\n        <TabsContent value=\"activity\">An event timeline: sign-ins, edits and comments.</TabsContent>\n        <TabsContent value=\"settings\">Workspace preferences, permissions and integrations.</TabsContent>\n      </Tabs>"
+    "usageSnippet": "<Tabs defaultValue=\"overview\">\n  <TabsList>\n    <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n    <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n    <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">A dashboard with key metrics and quick actions.</TabsContent>\n  <TabsContent value=\"activity\">An event timeline: sign-ins, edits and comments.</TabsContent>\n  <TabsContent value=\"settings\">Workspace preferences, permissions and integrations.</TabsContent>\n</Tabs>"
   },
   {
     "name": "TabsList",
@@ -736,7 +917,7 @@
     "description": "React component TabsList.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>"
+    "usageSnippet": "<TabsList>\n  <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n  <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n  <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n</TabsList>"
   },
   {
     "name": "TabsTrigger",
@@ -791,7 +972,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Accordion type=\"single\" defaultValue={[\"a\"]}>\n        <AccordionItem value=\"a\"><AccordionTrigger>How does billing work?</AccordionTrigger><AccordionContent>Monthly or annually — the annual plan includes two months free.</AccordionContent></AccordionItem>\n        <AccordionItem value=\"b\"><AccordionTrigger>Can I change my plan later?</AccordionTrigger><AccordionContent>Yes, at any time. The difference is prorated.</AccordionContent></AccordionItem>\n        <AccordionItem value=\"c\"><AccordionTrigger>What payment methods are supported?</AccordionTrigger><AccordionContent>Visa, Mastercard and Apple Pay.</AccordionContent></AccordionItem>\n      </Accordion>"
+    "usageSnippet": "<Accordion type=\"single\" defaultValue={[\"a\"]}>\n  <AccordionItem value=\"a\"><AccordionTrigger>How does billing work?</AccordionTrigger><AccordionContent>Monthly or annually — the annual plan includes two months free.</AccordionContent></AccordionItem>\n  <AccordionItem value=\"b\"><AccordionTrigger>Can I change my plan later?</AccordionTrigger><AccordionContent>Yes, at any time. The difference is prorated.</AccordionContent></AccordionItem>\n  <AccordionItem value=\"c\"><AccordionTrigger>What payment methods are supported?</AccordionTrigger><AccordionContent>Visa, Mastercard and Apple Pay.</AccordionContent></AccordionItem>\n</Accordion>"
   },
   {
     "name": "AccordionItem",
@@ -839,7 +1020,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem>Edit</DropdownMenuItem>\n        <DropdownMenuItem>Duplicate</DropdownMenuItem>\n        <DropdownMenuSeparator />"
+    "usageSnippet": "<DropdownMenu>\n  <DropdownMenuTrigger>\n    <Button variant=\"outline\">Actions</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem>Edit</DropdownMenuItem>\n    <DropdownMenuItem>Duplicate</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem danger>Delete</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
   },
   {
     "name": "DropdownMenuTrigger",
@@ -847,7 +1028,7 @@
     "description": "React component DropdownMenuTrigger.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<DropdownMenuTrigger>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenuTrigger>"
+    "usageSnippet": "<DropdownMenuTrigger>\n  <Button variant=\"outline\">Actions</Button>\n</DropdownMenuTrigger>"
   },
   {
     "name": "DropdownMenuContent",
@@ -863,7 +1044,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<DropdownMenuContent>\n        <DropdownMenuItem>Edit</DropdownMenuItem>\n        <DropdownMenuItem>Duplicate</DropdownMenuItem>\n        <DropdownMenuSeparator />"
+    "usageSnippet": "<DropdownMenuContent>\n  <DropdownMenuItem>Edit</DropdownMenuItem>\n  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n  <DropdownMenuSeparator />\n  <DropdownMenuItem danger>Delete</DropdownMenuItem>\n</DropdownMenuContent>"
   },
   {
     "name": "DropdownMenuItem",
@@ -910,7 +1091,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Breadcrumb>\n      <BreadcrumbItem href=\"#\">Workspace</BreadcrumbItem>\n      <BreadcrumbSeparator />"
+    "usageSnippet": "<Breadcrumb>\n  <BreadcrumbItem href=\"#\">Workspace</BreadcrumbItem>\n  <BreadcrumbSeparator />\n  <BreadcrumbItem href=\"#\">Projects</BreadcrumbItem>\n  <BreadcrumbSeparator />\n  <BreadcrumbItem current>Q3 Launch</BreadcrumbItem>\n</Breadcrumb>"
   },
   {
     "name": "BreadcrumbItem",
@@ -1010,64 +1191,6 @@
     "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\";",
@@ -1082,7 +1205,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>User</TableHead>\n            <TableHead>Role</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead numeric>Projects</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n            <TableCell>Administrator</TableCell>\n            <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n            <TableCell numeric>24</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n            <TableCell>Editor</TableCell>\n            <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n            <TableCell numeric>12</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n            <TableCell>Viewer</TableCell>\n            <TableCell><Badge>Inactive</Badge></TableCell>\n            <TableCell numeric>3</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>"
+    "usageSnippet": "<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>User</TableHead>\n      <TableHead>Role</TableHead>\n      <TableHead>Status</TableHead>\n      <TableHead numeric>Projects</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n      <TableCell>Administrator</TableCell>\n      <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n      <TableCell numeric>24</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n      <TableCell>Editor</TableCell>\n      <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n      <TableCell numeric>12</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n      <TableCell>Viewer</TableCell>\n      <TableCell><Badge>Inactive</Badge></TableCell>\n      <TableCell numeric>3</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
   },
   {
     "name": "TableWrap",
@@ -1090,7 +1213,7 @@
     "description": "Rounded, bordered wrapper around a <Table>.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<TableWrap>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>User</TableHead>\n            <TableHead>Role</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead numeric>Projects</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n            <TableCell>Administrator</TableCell>\n            <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n            <TableCell numeric>24</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n            <TableCell>Editor</TableCell>\n            <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n            <TableCell numeric>12</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n            <TableCell>Viewer</TableCell>\n            <TableCell><Badge>Inactive</Badge></TableCell>\n            <TableCell numeric>3</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </TableWrap>"
+    "usageSnippet": "<TableWrap>\n  <Table>\n    <TableHeader>\n      <TableRow>\n        <TableHead>User</TableHead>\n        <TableHead>Role</TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead numeric>Projects</TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow>\n        <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n        <TableCell>Administrator</TableCell>\n        <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n        <TableCell numeric>24</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n        <TableCell>Editor</TableCell>\n        <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n        <TableCell numeric>12</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n        <TableCell>Viewer</TableCell>\n        <TableCell><Badge>Inactive</Badge></TableCell>\n        <TableCell numeric>3</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</TableWrap>"
   },
   {
     "name": "TableHeader",
@@ -1098,7 +1221,7 @@
     "description": "React component TableHeader.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<TableHeader>\n          <TableRow>\n            <TableHead>User</TableHead>\n            <TableHead>Role</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead numeric>Projects</TableHead>\n          </TableRow>\n        </TableHeader>"
+    "usageSnippet": "<TableHeader>\n  <TableRow>\n    <TableHead>User</TableHead>\n    <TableHead>Role</TableHead>\n    <TableHead>Status</TableHead>\n    <TableHead numeric>Projects</TableHead>\n  </TableRow>\n</TableHeader>"
   },
   {
     "name": "TableBody",
@@ -1106,7 +1229,7 @@
     "description": "React component TableBody.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<TableBody>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n            <TableCell>Administrator</TableCell>\n            <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n            <TableCell numeric>24</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n            <TableCell>Editor</TableCell>\n            <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n            <TableCell numeric>12</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n            <TableCell>Viewer</TableCell>\n            <TableCell><Badge>Inactive</Badge></TableCell>\n            <TableCell numeric>3</TableCell>\n          </TableRow>\n        </TableBody>"
+    "usageSnippet": "<TableBody>\n  <TableRow>\n    <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n    <TableCell>Administrator</TableCell>\n    <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n    <TableCell numeric>24</TableCell>\n  </TableRow>\n  <TableRow>\n    <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n    <TableCell>Editor</TableCell>\n    <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n    <TableCell numeric>12</TableCell>\n  </TableRow>\n  <TableRow>\n    <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n    <TableCell>Viewer</TableCell>\n    <TableCell><Badge>Inactive</Badge></TableCell>\n    <TableCell numeric>3</TableCell>\n  </TableRow>\n</TableBody>"
   },
   {
     "name": "TableRow",
@@ -1114,7 +1237,7 @@
     "description": "React component TableRow.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<TableRow>\n            <TableHead>User</TableHead>\n            <TableHead>Role</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead numeric>Projects</TableHead>\n          </TableRow>"
+    "usageSnippet": "<TableRow>\n  <TableHead>User</TableHead>\n  <TableHead>Role</TableHead>\n  <TableHead>Status</TableHead>\n  <TableHead numeric>Projects</TableHead>\n</TableRow>"
   },
   {
     "name": "TableHead",
@@ -1168,7 +1291,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Tooltip content=\"Contextual tooltip\">\n      <Button variant=\"outline\">Hover over me</Button>\n    </Tooltip>"
+    "usageSnippet": "<Tooltip content=\"Contextual tooltip\">\n  <Button variant=\"outline\">Hover over me</Button>\n</Tooltip>"
   },
   {
     "name": "Modal",
@@ -1219,7 +1342,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Modal open={open} onClose={() => setOpen(false)}>\n          <ModalTitle>Delete project “Q3 Launch”?</ModalTitle>\n          <ModalDescription>This action cannot be undone. All files and activity history will be permanently deleted.</ModalDescription>\n          <ModalActions>\n            <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n            <Button variant=\"danger\" onClick={() => setOpen(false)}>Delete project</Button>\n          </ModalActions>\n        </Modal>"
+    "usageSnippet": "<Modal open={open} onClose={() => setOpen(false)}>\n  <ModalTitle>Delete project “Q3 Launch”?</ModalTitle>\n  <ModalDescription>This action cannot be undone. All files and activity history will be permanently deleted.</ModalDescription>\n  <ModalActions>\n    <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n    <Button variant=\"danger\" onClick={() => setOpen(false)}>Delete project</Button>\n  </ModalActions>\n</Modal>"
   },
   {
     "name": "ModalTitle",
@@ -1243,7 +1366,7 @@
     "description": "React component ModalActions.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<ModalActions>\n            <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n            <Button variant=\"danger\" onClick={() => setOpen(false)}>Delete project</Button>\n          </ModalActions>"
+    "usageSnippet": "<ModalActions>\n  <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n  <Button variant=\"danger\" onClick={() => setOpen(false)}>Delete project</Button>\n</ModalActions>"
   },
   {
     "name": "ToastProvider",
@@ -1251,7 +1374,7 @@
     "description": "React component ToastProvider.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<ToastProvider>\n      <ToastDemo />"
+    "usageSnippet": "<ToastProvider>\n  <ToastDemo />\n</ToastProvider>"
   },
   {
     "name": "PageHeader",
@@ -1288,7 +1411,65 @@
       }
     ],
     "cva": null,
-    "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      />"
+    "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": "SectionHeader",
+    "importPath": "import { SectionHeader } from \"@kjaniec-dev/ui\";",
+    "description": "React component SectionHeader.",
+    "props": [
+      {
+        "name": "kicker",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "actions",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "align",
+        "type": "SectionHeaderAlign",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "headingLevel",
+        "type": "SectionHeaderHeadingLevel",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "divider",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SectionHeader align=\"center\" divider>\n  <SectionHeader.Kicker>Custom Section</SectionHeader.Kicker>\n  <SectionHeader.Title as=\"h3\">Custom Compound Layout</SectionHeader.Title>\n  <SectionHeader.Description>\n    Fully customized layout constructed using compound sub-components.\n  </SectionHeader.Description>\n  <SectionHeader.Actions className=\"justify-center mt-4\">\n    <Button variant=\"secondary\" size=\"sm\">\n      Learn More\n    </Button>\n  </SectionHeader.Actions>\n</SectionHeader>"
   },
   {
     "name": "EmptyState",
@@ -1325,7 +1506,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<EmptyState\n      title=\"No integrations active\"\n      description=\"Connect your Slack, GitHub, or Discord channel to start receiving automated notifications.\"\n      icon={\n        <svg fill=\"none\" stroke=\"currentColor\" strokeWidth={2} viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />"
+    "usageSnippet": "<EmptyState\ntitle=\"No integrations active\"\ndescription=\"Connect your Slack, GitHub, or Discord channel to start receiving automated notifications.\"\nicon={\n  <svg fill=\"none\" stroke=\"currentColor\" strokeWidth={2} viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />"
   },
   {
     "name": "MetricCard",
@@ -1376,7 +1557,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<MetricCard\n        title=\"Revenue\"\n        value=\"$48,259.00\"\n        trend=\"+8.2%\"\n        trendDirection=\"up\"\n        description=\"Total sales this quarter\"\n      />"
+    "usageSnippet": "<MetricCard\n  title=\"Revenue\"\n  value=\"$48,259.00\"\n  trend=\"+8.2%\"\n  trendDirection=\"up\"\n  description=\"Total sales this quarter\"\n/>"
   },
   {
     "name": "DataTable",
@@ -1500,85 +1681,34 @@
     "usageSnippet": "<DataTable columns={columns} data={sampleData} />"
   },
   {
-    "name": "DataTableColumn",
-    "importPath": "import { DataTableColumn } from \"@kjaniec-dev/ui\";",
-    "description": "React component DataTableColumn.",
+    "name": "FormField",
+    "importPath": "import { FormField } from \"@kjaniec-dev/ui\";",
+    "description": "React component FormField.",
     "props": [
       {
-        "name": "header",
-        "type": "React.ReactNode",
+        "name": "label",
+        "type": "string",
         "optional": false,
         "defaultValue": null,
         "description": ""
       },
       {
-        "name": "accessor",
-        "type": "(row: T) => React.ReactNode",
-        "optional": false,
+        "name": "hint",
+        "type": "string",
+        "optional": true,
         "defaultValue": null,
         "description": ""
       },
       {
-        "name": "className",
+        "name": "error",
         "type": "string",
         "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",
+        "name": "required",
+        "type": "boolean",
         "optional": true,
         "defaultValue": null,
         "description": ""
@@ -1592,7 +1722,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<FormField label=\"Full Name\">\n      <Input placeholder=\"John Doe\" />"
+    "usageSnippet": "<FormField label=\"Full Name\">\n  <Input placeholder=\"John Doe\" />\n</FormField>"
   },
   {
     "name": "ErrorState",
@@ -1629,7 +1759,7 @@
       }
     ],
     "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    />"
+    "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",
@@ -1717,7 +1847,7 @@
       }
     ],
     "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      />"
+    "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  />\n  <div className=\"border border-dashed border-border rounded-kj-lg h-96 grid place-items-center bg-surface\">\n    <span className=\"text-sm text-muted-foreground\">Main Content Canvas Area</span>\n  </div>\n</DashboardShell>"
   },
   {
     "name": "SettingsLayout",
@@ -1754,7 +1884,7 @@
       }
     ],
     "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=\"John\" />"
+    "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=\"John\" />\n      <TextField label=\"Last Name\" defaultValue=\"Doe\" />\n    </div>\n    <TextField label=\"Email Address\" defaultValue=\"john.doe@gmail.com\" />\n    <div className=\"flex justify-end pt-2\">\n      <Button size=\"sm\">Save profile</Button>\n    </div>\n  </Card>\n</SettingsLayout>"
   },
   {
     "name": "DetailPageLayout",
@@ -1819,7 +1949,7 @@
       }
     ],
     "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        </>"
+    "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    </>\n  }\n  aside={\n    <div className=\"space-y-4 text-sm\">\n      <h4 className=\"font-bold\">Payment Details</h4>\n      <div className=\"flex justify-between\">\n        <span className=\"text-muted-foreground\">Status</span>\n        <Badge variant=\"success\">Paid</Badge>\n      </div>\n      <div className=\"flex justify-between\">\n        <span className=\"text-muted-foreground\">Amount</span>\n        <span className=\"font-bold font-mono\">$1,450.00</span>\n      </div>\n    </div>\n  }\n>\n  <Card className=\"p-6\">\n    <h3 className=\"text-base font-bold mb-3\">Billing Address</h3>\n    <p className=\"text-sm text-muted-foreground leading-relaxed\">\n      John Doe<br />\n      ul. Marszałkowska 10/24<br />\n      00-001 Warszawa, Poland\n    </p>\n  </Card>\n</DetailPageLayout>"
   },
   {
     "name": "TableToolbar",
@@ -1935,7 +2065,7 @@
       }
     ],
     "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        />"
+    "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",
@@ -1993,7 +2123,7 @@
       }
     ],
     "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\" />"
+    "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\" />\n    <CheckboxField label=\"Enable auto-backups daily\" defaultChecked />\n    <div className=\"flex gap-2 justify-end pt-4 border-t border-border\">\n      <Button variant=\"outline\" size=\"sm\" onClick={() => setOpen(false)}>Cancel</Button>\n      <Button size=\"sm\" onClick={() => setOpen(false)}>Save Changes</Button>\n    </div>\n  </div>\n</Drawer>"
   },
   {
     "name": "CommandPalette",
@@ -2033,165 +2163,2217 @@
     "usageSnippet": "<CommandPalette open={open} onClose={() => setOpen(false)} items={items} />"
   },
   {
-    "name": "CommandPaletteItem",
-    "importPath": "import { CommandPaletteItem } from \"@kjaniec-dev/ui\";",
-    "description": "React component CommandPaletteItem.",
+    "name": "SidebarNav",
+    "importPath": "import { SidebarNav } from \"@kjaniec-dev/ui\";",
+    "description": "React component SidebarNav.",
     "props": [
       {
-        "name": "id",
-        "type": "string",
+        "name": "groups",
+        "type": "SidebarNavGroup[]",
         "optional": false,
         "defaultValue": null,
         "description": ""
       },
       {
-        "name": "title",
+        "name": "currentHref",
         "type": "string",
-        "optional": false,
+        "optional": true,
         "defaultValue": null,
         "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<SidebarNav>\n  <!-- Content -->\n</SidebarNav>"
+  },
+  {
+    "name": "Fab",
+    "importPath": "import { Fab } from \"@kjaniec-dev/ui\";",
+    "description": "React component Fab.",
+    "props": [
+      {
+        "name": "icon",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Icon rendered inside the button."
       },
       {
-        "name": "subtitle",
+        "name": "label",
         "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Text label for accessibility (aria-label)."
+      },
+      {
+        "name": "mobileOnly",
+        "type": "boolean",
         "optional": true,
         "defaultValue": null,
-        "description": ""
+        "description": "If true, the FAB will only be visible on mobile screens (< 768px)."
       },
       {
-        "name": "category",
-        "type": "string",
+        "name": "loading",
+        "type": "boolean",
         "optional": true,
         "defaultValue": null,
-        "description": ""
+        "description": "Shows a spinner and disables interaction."
       },
       {
-        "name": "shortcut",
-        "type": "string[]",
+        "name": "variant",
+        "type": "\"primary\" | \"secondary\" | \"outline\" | \"danger\"",
+        "optional": true,
+        "defaultValue": "\"primary\"",
+        "description": "Style variant of the component: variant."
+      },
+      {
+        "name": "size",
+        "type": "\"sm\" | \"md\" | \"lg\"",
+        "optional": true,
+        "defaultValue": "\"md\"",
+        "description": "Style variant of the component: size."
+      },
+      {
+        "name": "position",
+        "type": "\"bottom-right\" | \"bottom-left\" | \"bottom-center\" | \"none\"",
         "optional": true,
+        "defaultValue": "\"bottom-right\"",
+        "description": "Style variant of the component: position."
+      }
+    ],
+    "cva": {
+      "variants": {
+        "variant": [
+          "primary",
+          "secondary",
+          "outline",
+          "danger"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "position": [
+          "bottom-right",
+          "bottom-left",
+          "bottom-center",
+          "none"
+        ]
+      },
+      "defaultVariants": {
+        "variant": "primary",
+        "size": "md",
+        "position": "bottom-right"
+      }
+    },
+    "usageSnippet": "<Fab {...args} variant=\"primary\" label=\"Primary variant\" />"
+  },
+  {
+    "name": "BottomSheet",
+    "importPath": "import { BottomSheet } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomSheet.",
+    "props": [
+      {
+        "name": "open",
+        "type": "boolean",
+        "optional": false,
         "defaultValue": null,
         "description": ""
       },
       {
-        "name": "action",
+        "name": "onClose",
         "type": "() => void",
         "optional": false,
         "defaultValue": null,
         "description": ""
       },
       {
-        "name": "icon",
+        "name": "children",
         "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "maxWidth",
+        "type": "\"max-w-sm\" | \"max-w-md\" | \"max-w-lg\" | \"max-w-xl\" | \"max-w-2xl\"",
+        "optional": true,
+        "defaultValue": "\"max-w-lg\"",
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
         "optional": true,
         "defaultValue": null,
         "description": ""
+      },
+      {
+        "name": "showClose",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
       }
     ],
     "cva": null,
-    "usageSnippet": "<CommandPaletteItem>\n  <!-- Content -->\n</CommandPaletteItem>"
+    "usageSnippet": "<BottomSheet>\n  <!-- Content -->\n</BottomSheet>"
   },
   {
-    "name": "SidebarNav",
-    "importPath": "import { SidebarNav } from \"@kjaniec-dev/ui\";",
-    "description": "React component SidebarNav.",
+    "name": "BottomSheetHeader",
+    "importPath": "import { BottomSheetHeader } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomSheetHeader.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<BottomSheetHeader>\n  <!-- Content -->\n</BottomSheetHeader>"
+  },
+  {
+    "name": "BottomSheetTitle",
+    "importPath": "import { BottomSheetTitle } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomSheetTitle.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<BottomSheetTitle>\n  <!-- Content -->\n</BottomSheetTitle>"
+  },
+  {
+    "name": "BottomSheetDescription",
+    "importPath": "import { BottomSheetDescription } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomSheetDescription.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<BottomSheetDescription>\n  <!-- Content -->\n</BottomSheetDescription>"
+  },
+  {
+    "name": "BottomSheetContent",
+    "importPath": "import { BottomSheetContent } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomSheetContent.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<BottomSheetContent>\n  <!-- Content -->\n</BottomSheetContent>"
+  },
+  {
+    "name": "BottomSheetFooter",
+    "importPath": "import { BottomSheetFooter } from \"@kjaniec-dev/ui\";",
+    "description": "React component BottomSheetFooter.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<BottomSheetFooter>\n  <!-- Content -->\n</BottomSheetFooter>"
+  },
+  {
+    "name": "Kbd",
+    "importPath": "import { Kbd } from \"@kjaniec-dev/ui\";",
+    "description": "React component Kbd.",
     "props": [
       {
-        "name": "groups",
-        "type": "SidebarNavGroup[]",
-        "optional": false,
+        "name": "keys",
+        "type": "string[]",
+        "optional": true,
         "defaultValue": null,
-        "description": ""
+        "description": "Render one <kbd> chip per key (separated by a small gap); children are ignored."
       },
       {
-        "name": "currentHref",
-        "type": "string",
+        "name": "size",
+        "type": "\"sm\" | \"md\"",
         "optional": true,
-        "defaultValue": null,
-        "description": ""
+        "defaultValue": "\"sm\"",
+        "description": "Style variant of the component: size."
       }
     ],
-    "cva": null,
-    "usageSnippet": "<SidebarNav>\n  <!-- Content -->\n</SidebarNav>"
+    "cva": {
+      "variants": {
+        "size": [
+          "sm",
+          "md"
+        ]
+      },
+      "defaultVariants": {
+        "size": "sm"
+      }
+    },
+    "usageSnippet": "<Kbd keys={[\"⌘\", \"K\"]} />\n<Kbd keys={[\"⌘\", \"Shift\", \"P\"]} size=\"md\" />\n<Kbd>Esc</Kbd>"
   },
   {
-    "name": "SidebarNavItem",
-    "importPath": "import { SidebarNavItem } from \"@kjaniec-dev/ui\";",
-    "description": "React component SidebarNavItem.",
+    "name": "CodeBlock",
+    "importPath": "import { CodeBlock } from \"@kjaniec-dev/ui\";",
+    "description": "React component CodeBlock.",
     "props": [
       {
-        "name": "id",
+        "name": "code",
         "type": "string",
         "optional": false,
         "defaultValue": null,
-        "description": ""
+        "description": "The snippet text to display."
       },
       {
-        "name": "label",
+        "name": "language",
         "type": "string",
-        "optional": false,
+        "optional": true,
         "defaultValue": null,
-        "description": ""
+        "description": "Language label shown in the header when no filename is set (e.g. \"tsx\")."
       },
       {
-        "name": "href",
+        "name": "filename",
         "type": "string",
         "optional": true,
         "defaultValue": null,
-        "description": ""
+        "description": "Optional filename label shown in the header; takes precedence over language."
       },
       {
-        "name": "onClick",
-        "type": "() => void",
+        "name": "copyable",
+        "type": "boolean",
         "optional": true,
-        "defaultValue": null,
-        "description": ""
+        "defaultValue": "true",
+        "description": "Show the copy-to-clipboard button."
       },
       {
-        "name": "active",
-        "type": "boolean",
+        "name": "maxHeight",
+        "type": "number",
         "optional": true,
         "defaultValue": null,
+        "description": "Max height in pixels; content scrolls vertically beyond it."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<CodeBlock>\n  <!-- Content -->\n</CodeBlock>"
+  },
+  {
+    "name": "Separator",
+    "importPath": "import { Separator } from \"@kjaniec-dev/ui\";",
+    "description": "Thin layout divider. Decorative by default; pass decorative={false} for a semantic role=\"separator\".",
+    "props": [
+      {
+        "name": "orientation",
+        "type": "\"horizontal\" | \"vertical\"",
+        "optional": true,
+        "defaultValue": "\"horizontal\"",
         "description": ""
       },
       {
-        "name": "icon",
-        "type": "React.ReactNode",
+        "name": "decorative",
+        "type": "boolean",
         "optional": true,
-        "defaultValue": null,
-        "description": ""
+        "defaultValue": "true",
+        "description": "Purely visual by default (role=\"none\", hidden from a11y tree). Set false for a semantically meaningful divider."
       },
       {
-        "name": "badge",
-        "type": "React.ReactNode",
+        "name": "className",
+        "type": "string",
         "optional": true,
         "defaultValue": null,
         "description": ""
       }
     ],
     "cva": null,
-    "usageSnippet": "<SidebarNavItem>\n  <!-- Content -->\n</SidebarNavItem>"
+    "usageSnippet": "<Separator className=\"my-3\" />"
   },
   {
-    "name": "SidebarNavGroup",
-    "importPath": "import { SidebarNavGroup } from \"@kjaniec-dev/ui\";",
-    "description": "React component SidebarNavGroup.",
+    "name": "Popover",
+    "importPath": "import { Popover } from \"@kjaniec-dev/ui\";",
+    "description": "React component Popover.",
     "props": [
       {
-        "name": "title",
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Trigger and content elements."
+      },
+      {
+        "name": "className",
         "type": "string",
         "optional": true,
         "defaultValue": null,
-        "description": ""
+        "description": "Additional classes for the positioning wrapper."
       },
       {
-        "name": "items",
-        "type": "SidebarNavItem[]",
-        "optional": false,
+        "name": "open",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Controlled open state. Omit for uncontrolled behavior."
+      },
+      {
+        "name": "onOpenChange",
+        "type": "(open: boolean) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Called whenever the open state should change."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Open popover</Button>\n  </PopoverTrigger>\n  <PopoverContent side=\"bottom\" align=\"start\" className=\"w-64\">\n    <p className=\"m-0 mb-1 text-sm font-semibold\">Quick help</p>\n    <p className=\"m-0 text-sm text-muted-foreground\">\n      Popovers hold arbitrary content — filters, hints, pickers.\n    </p>\n  </PopoverContent>\n</Popover>"
+  },
+  {
+    "name": "PopoverTrigger",
+    "importPath": "import { PopoverTrigger } from \"@kjaniec-dev/ui\";",
+    "description": "React component PopoverTrigger.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<PopoverTrigger asChild>\n  <Button variant=\"outline\">Open popover</Button>\n</PopoverTrigger>"
+  },
+  {
+    "name": "PopoverContent",
+    "importPath": "import { PopoverContent } from \"@kjaniec-dev/ui\";",
+    "description": "React component PopoverContent.",
+    "props": [
+      {
+        "name": "side",
+        "type": "\"top\" | \"bottom\" | \"left\" | \"right\"",
+        "optional": true,
+        "defaultValue": "\"bottom\"",
+        "description": "Which side of the trigger the panel opens on."
+      },
+      {
+        "name": "align",
+        "type": "\"start\" | \"center\" | \"end\"",
+        "optional": true,
+        "defaultValue": "\"center\"",
+        "description": "Alignment along the chosen side."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<PopoverContent side=\"bottom\" align=\"start\" className=\"w-64\">\n  <p className=\"m-0 mb-1 text-sm font-semibold\">Quick help</p>\n  <p className=\"m-0 text-sm text-muted-foreground\">\n    Popovers hold arbitrary content — filters, hints, pickers.\n  </p>\n</PopoverContent>"
+  },
+  {
+    "name": "Combobox",
+    "importPath": "import { Combobox } from \"@kjaniec-dev/ui\";",
+    "description": "React component Combobox.",
+    "props": [
+      {
+        "name": "value",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Combobox options={frameworks} value={value} onChange={setValue} placeholder=\"Select a framework…\" />"
+  },
+  {
+    "name": "ComboboxField",
+    "importPath": "import { ComboboxField } from \"@kjaniec-dev/ui\";",
+    "description": "React component ComboboxField.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<ComboboxField\n  options={frameworks}\n  label=\"Primary framework\"\n  required\n  hint=\"You can change this later.\"\n/>"
+  },
+  {
+    "name": "Calendar",
+    "importPath": "import { Calendar } from \"@kjaniec-dev/ui\";",
+    "description": "React component Calendar.",
+    "props": [
+      {
+        "name": "value",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "defaultValue",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onChange",
+        "type": "(date: Date) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "month",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Controlled displayed month. Omit for uncontrolled behavior."
+      },
+      {
+        "name": "defaultMonth",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Initial displayed month when uncontrolled. Defaults to `value` ?? today."
+      },
+      {
+        "name": "onMonthChange",
+        "type": "(month: Date) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "min",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "max",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabledDates",
+        "type": "(date: Date) => boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Calendar value={value} onChange={setValue} />"
+  },
+  {
+    "name": "DatePicker",
+    "importPath": "import { DatePicker } from \"@kjaniec-dev/ui\";",
+    "description": "React component DatePicker.",
+    "props": [
+      {
+        "name": "value",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "defaultValue",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onChange",
+        "type": "(date: Date) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "min",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "max",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabledDates",
+        "type": "(date: Date) => boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "placeholder",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Pick a date…\"",
+        "description": "Trigger text when nothing is selected. Default \"Pick a date…\"."
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Visual error state (red border + aria-invalid on the trigger)."
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Marks the trigger aria-required (buttons have no native `required` attribute)."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "id",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "name",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-describedby\"",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DatePicker value={value} onChange={setValue} />"
+  },
+  {
+    "name": "DatePickerField",
+    "importPath": "import { DatePickerField } from \"@kjaniec-dev/ui\";",
+    "description": "React component DatePickerField.",
+    "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": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DatePickerField label=\"Due date\" required hint=\"Weekdays only.\" value={value} onChange={setValue} disabledDates={(d) => d.getDay() === 0 || d.getDay() === 6} />"
+  },
+  {
+    "name": "RangeCalendar",
+    "importPath": "import { RangeCalendar } from \"@kjaniec-dev/ui\";",
+    "description": "React component RangeCalendar.",
+    "props": [
+      {
+        "name": "value",
+        "type": "DateRange",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "defaultValue",
+        "type": "DateRange",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onChange",
+        "type": "(range: DateRange) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "month",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Controlled left-month. The right month is always this + 1 (locked navigation)."
+      },
+      {
+        "name": "defaultMonth",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onMonthChange",
+        "type": "(month: Date) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "min",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "max",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabledDates",
+        "type": "(date: Date) => boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<RangeCalendar value={value} onChange={setValue} />"
+  },
+  {
+    "name": "DateRangePicker",
+    "importPath": "import { DateRangePicker } from \"@kjaniec-dev/ui\";",
+    "description": "React component DateRangePicker.",
+    "props": [
+      {
+        "name": "value",
+        "type": "DateRange",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "defaultValue",
+        "type": "DateRange",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onChange",
+        "type": "(range: DateRange) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "min",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "max",
+        "type": "Date",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabledDates",
+        "type": "(date: Date) => boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "placeholder",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Pick a date range…\"",
+        "description": "Trigger text when nothing is selected. Default \"Pick a date range…\"."
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Visual error state (red border + aria-invalid on the trigger)."
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Marks the trigger aria-required (buttons have no native `required` attribute)."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "id",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "name",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-describedby\"",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DateRangePicker value={value} onChange={setValue} />"
+  },
+  {
+    "name": "DateRangePickerField",
+    "importPath": "import { DateRangePickerField } from \"@kjaniec-dev/ui\";",
+    "description": "React component DateRangePickerField.",
+    "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": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DateRangePickerField\n  label=\"Booking dates\"\n  required\n  hint=\"Weekends are disabled.\"\n  value={value}\n  onChange={setValue}\n  disabledDates={(d) => d.getDay() === 0 || d.getDay() === 6}\n/>"
+  },
+  {
+    "name": "Dropzone",
+    "importPath": "import { Dropzone } from \"@kjaniec-dev/ui\";",
+    "description": "React component Dropzone.",
+    "props": [
+      {
+        "name": "onFiles",
+        "type": "(files: File[]) => void",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "accept",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Native picker filter hint. Real enforcement lives in FileUpload's validation."
+      },
+      {
+        "name": "multiple",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Overrides the default drop-region content."
+      },
+      {
+        "name": "id",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-describedby\"",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-invalid\"",
+        "type": "boolean | \"true\" | \"false\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-required\"",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Dropzone onFiles={(files) => setCount((c) => c + files.length)} />"
+  },
+  {
+    "name": "FileUpload",
+    "importPath": "import { FileUpload } from \"@kjaniec-dev/ui\";",
+    "description": "React component FileUpload.",
+    "props": [
+      {
+        "name": "value",
+        "type": "UploadItem[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "defaultValue",
+        "type": "UploadItem[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onChange",
+        "type": "(items: UploadItem[]) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onReject",
+        "type": "(rejections: FileRejection[]) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Called with files rejected by validation on a given drop/selection."
+      },
+      {
+        "name": "accept",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "maxSize",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "maxFiles",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "multiple",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Visual error state (danger border + aria-invalid on the dropzone)."
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "aria-required on the dropzone."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "id",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-describedby\"",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<FileUpload value={items} onChange={setItems} accept=\"image/*,.pdf\" maxSize={5 * 1024 * 1024} />"
+  },
+  {
+    "name": "FileUploadField",
+    "importPath": "import { FileUploadField } from \"@kjaniec-dev/ui\";",
+    "description": "React component FileUploadField.",
+    "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": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<FileUploadField\n  label=\"Attachments\"\n  hint=\"PDF or images, up to 5 MB each.\"\n  accept=\"image/*,.pdf\"\n  maxSize={5 * 1024 * 1024}\n  value={items}\n  onChange={setItems}\n/>"
+  },
+  {
+    "name": "Timeline",
+    "importPath": "import { Timeline } from \"@kjaniec-dev/ui\";",
+    "description": "React component Timeline.",
+    "props": [
+      {
+        "name": "align",
+        "type": "TimelineAlign",
+        "optional": true,
+        "defaultValue": "\"left\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Timeline>\n  <TimelineItem>\n    <TimelineSeparator>\n      <TimelineDot size=\"sm\" variant=\"success\" />\n      <TimelineConnector />\n    </TimelineSeparator>\n    <TimelineContent>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", width: \"100%\" }}>\n        <TimelineTitle>Database Migrated</TimelineTitle>\n        <TimelineTime>5m ago</TimelineTime>\n      </div>\n    </TimelineContent>\n  </TimelineItem>\n  <TimelineItem>\n    <TimelineSeparator>\n      <TimelineDot size=\"sm\" variant=\"primary\" />\n      <TimelineConnector />\n    </TimelineSeparator>\n    <TimelineContent>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", width: \"100%\" }}>\n        <TimelineTitle>Server Started</TimelineTitle>\n        <TimelineTime>15m ago</TimelineTime>\n      </div>\n    </TimelineContent>\n  </TimelineItem>\n  <TimelineItem>\n    <TimelineSeparator>\n      <TimelineDot size=\"sm\" />\n    </TimelineSeparator>\n    <TimelineContent>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", width: \"100%\" }}>\n        <TimelineTitle>Code Repository Created</TimelineTitle>\n        <TimelineTime>1h ago</TimelineTime>\n      </div>\n    </TimelineContent>\n  </TimelineItem>\n</Timeline>"
+  },
+  {
+    "name": "TimelineItem",
+    "importPath": "import { TimelineItem } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineItem.",
+    "props": [
+      {
+        "name": "index",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "0",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TimelineItem>\n  <TimelineSeparator>\n    <TimelineDot size=\"sm\" variant=\"success\" />\n    <TimelineConnector />\n  </TimelineSeparator>\n  <TimelineContent>\n    <div style={{ display: \"flex\", justifyContent: \"space-between\", width: \"100%\" }}>\n      <TimelineTitle>Database Migrated</TimelineTitle>\n      <TimelineTime>5m ago</TimelineTime>\n    </div>\n  </TimelineContent>\n</TimelineItem>"
+  },
+  {
+    "name": "TimelineSeparator",
+    "importPath": "import { TimelineSeparator } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineSeparator.",
+    "props": [
+      {
+        "name": "isEven",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "align",
+        "type": "TimelineAlign",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TimelineSeparator>\n  <TimelineDot size=\"sm\" variant=\"success\" />\n  <TimelineConnector />\n</TimelineSeparator>"
+  },
+  {
+    "name": "TimelineConnector",
+    "importPath": "import { TimelineConnector } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineConnector.",
+    "props": [
+      {
+        "name": "dashed",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TimelineConnector />"
+  },
+  {
+    "name": "TimelineDot",
+    "importPath": "import { TimelineDot } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineDot.",
+    "props": [
+      {
+        "name": "variant",
+        "type": "TimelineDotVariant",
+        "optional": true,
+        "defaultValue": "\"default\"",
+        "description": ""
+      },
+      {
+        "name": "size",
+        "type": "TimelineDotSize",
+        "optional": true,
+        "defaultValue": "\"md\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TimelineDot size=\"lg\" variant=\"success\">\n  ✓\n</TimelineDot>"
+  },
+  {
+    "name": "TimelineContent",
+    "importPath": "import { TimelineContent } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineContent.",
+    "props": [
+      {
+        "name": "isEven",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "align",
+        "type": "TimelineAlign",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<TimelineContent>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", width: \"100%\" }}>\n    <TimelineTitle>Database Migrated</TimelineTitle>\n    <TimelineTime>5m ago</TimelineTime>\n  </div>\n</TimelineContent>"
+  },
+  {
+    "name": "TimelineTitle",
+    "importPath": "import { TimelineTitle } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineTitle.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<TimelineTitle>Database Migrated</TimelineTitle>"
+  },
+  {
+    "name": "TimelineTime",
+    "importPath": "import { TimelineTime } from \"@kjaniec-dev/ui\";",
+    "description": "React component TimelineTime.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<TimelineTime>5m ago</TimelineTime>"
+  },
+  {
+    "name": "Stepper",
+    "importPath": "import { Stepper } from \"@kjaniec-dev/ui\";",
+    "description": "React component Stepper.",
+    "props": [
+      {
+        "name": "value",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "defaultValue",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onValueChange",
+        "type": "(value: number) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "orientation",
+        "type": "StepperOrientation",
+        "optional": true,
+        "defaultValue": "\"horizontal\"",
+        "description": ""
+      },
+      {
+        "name": "linear",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Stepper value={stepper.activeStep} onValueChange={stepper.setStep}>\n  <StepperList>\n    <StepperItem value={0}>\n      <StepperTrigger>\n        <StepperIndicator />\n        <div className=\"flex flex-col\">\n          <StepperTitle>Profile</StepperTitle>\n          <StepperDescription>User details</StepperDescription>\n        </div>\n      </StepperTrigger>\n    </StepperItem>\n    <StepperSeparator />\n    <StepperItem value={1}>\n      <StepperTrigger>\n        <StepperIndicator />\n        <div className=\"flex flex-col\">\n          <StepperTitle>Billing</StepperTitle>\n          <StepperDescription>Card info</StepperDescription>\n        </div>\n      </StepperTrigger>\n    </StepperItem>\n    <StepperSeparator />\n    <StepperItem value={2}>\n      <StepperTrigger>\n        <StepperIndicator />\n        <div className=\"flex flex-col\">\n          <StepperTitle>Review</StepperTitle>\n          <StepperDescription>Confirm</StepperDescription>\n        </div>\n      </StepperTrigger>\n    </StepperItem>\n  </StepperList>\n\n  <div className=\"p-4 bg-zinc-900 border border-zinc-800 rounded-lg min-h-[100px]\">\n    <StepperContent value={0}>\n      <p>Step 1 Form Content: Please input username.</p>\n    </StepperContent>\n    <StepperContent value={1}>\n      <p>Step 2 Form Content: Enter credit card details.</p>\n    </StepperContent>\n    <StepperContent value={2}>\n      <p>Step 3 Form Content: Review and click Submit.</p>\n    </StepperContent>\n  </div>\n\n  <div className=\"flex justify-between\">\n    <Button variant=\"secondary\" onClick={stepper.prevStep} disabled={stepper.isFirstStep}>\n      Back\n    </Button>\n    <Button onClick={stepper.isLastStep ? () => alert(\"Done\") : stepper.nextStep}>\n      {stepper.isLastStep ? \"Submit\" : \"Next\"}\n    </Button>\n  </div>\n</Stepper>"
+  },
+  {
+    "name": "StepperList",
+    "importPath": "import { StepperList } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperList.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<StepperList>\n  <StepperItem value={0}>\n    <StepperTrigger>\n      <StepperIndicator />\n      <div className=\"flex flex-col\">\n        <StepperTitle>Profile</StepperTitle>\n        <StepperDescription>User details</StepperDescription>\n      </div>\n    </StepperTrigger>\n  </StepperItem>\n  <StepperSeparator />\n  <StepperItem value={1}>\n    <StepperTrigger>\n      <StepperIndicator />\n      <div className=\"flex flex-col\">\n        <StepperTitle>Billing</StepperTitle>\n        <StepperDescription>Card info</StepperDescription>\n      </div>\n    </StepperTrigger>\n  </StepperItem>\n  <StepperSeparator />\n  <StepperItem value={2}>\n    <StepperTrigger>\n      <StepperIndicator />\n      <div className=\"flex flex-col\">\n        <StepperTitle>Review</StepperTitle>\n        <StepperDescription>Confirm</StepperDescription>\n      </div>\n    </StepperTrigger>\n  </StepperItem>\n</StepperList>"
+  },
+  {
+    "name": "StepperItem",
+    "importPath": "import { StepperItem } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperItem.",
+    "props": [
+      {
+        "name": "value",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<StepperItem value={0}>\n  <StepperTrigger>\n    <StepperIndicator />\n    <div className=\"flex flex-col\">\n      <StepperTitle>Profile</StepperTitle>\n      <StepperDescription>User details</StepperDescription>\n    </div>\n  </StepperTrigger>\n</StepperItem>"
+  },
+  {
+    "name": "StepperTrigger",
+    "importPath": "import { StepperTrigger } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperTrigger.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<StepperTrigger>\n  <StepperIndicator />\n  <div className=\"flex flex-col\">\n    <StepperTitle>Profile</StepperTitle>\n    <StepperDescription>User details</StepperDescription>\n  </div>\n</StepperTrigger>"
+  },
+  {
+    "name": "StepperIndicator",
+    "importPath": "import { StepperIndicator } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperIndicator.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<StepperIndicator />"
+  },
+  {
+    "name": "StepperTitle",
+    "importPath": "import { StepperTitle } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperTitle.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<StepperTitle>Profile</StepperTitle>"
+  },
+  {
+    "name": "StepperDescription",
+    "importPath": "import { StepperDescription } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperDescription.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<StepperDescription>User details</StepperDescription>"
+  },
+  {
+    "name": "StepperSeparator",
+    "importPath": "import { StepperSeparator } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperSeparator.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<StepperSeparator />"
+  },
+  {
+    "name": "StepperContent",
+    "importPath": "import { StepperContent } from \"@kjaniec-dev/ui\";",
+    "description": "React component StepperContent.",
+    "props": [
+      {
+        "name": "value",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<StepperContent value={0}>\n  <p>Step 1 Form Content: Please input username.</p>\n</StepperContent>"
+  },
+  {
+    "name": "AppShell",
+    "importPath": "import { AppShell } from \"@kjaniec-dev/ui\";",
+    "description": "React component AppShell.",
+    "props": [
+      {
+        "name": "banner",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "header",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "footer",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "contentWidth",
+        "type": "\"default\" | \"narrow\" | \"wide\" | \"full\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "headerPosition",
+        "type": "\"sticky\" | \"fixed\" | \"static\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "headerVariant",
+        "type": "\"glass\" | \"solid\" | \"transparent\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "paddedContent",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "mobileNav",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<AppShell\n  banner={<div>🚀 Announcement: KJ Product Kit v1.0 released!</div>}\n  header={\n    <div className=\"w-full flex items-center justify-between\">\n      <div className=\"font-bold text-xl tracking-tight\">KJ Product Kit</div>\n      <div className=\"hidden md:flex items-center gap-6 text-sm text-muted-foreground font-medium\">\n        <a href=\"#\" className=\"hover:text-foreground\">Features</a>\n        <a href=\"#\" className=\"hover:text-foreground\">Docs</a>\n        <a href=\"#\" className=\"hover:text-foreground\">Pricing</a>\n      </div>\n      <Button size=\"sm\">Get Started</Button>\n    </div>\n  }\n  mobileNav={\n    <div className=\"flex flex-col gap-4 text-sm font-medium\">\n      <a href=\"#\" className=\"hover:text-foreground\">Features</a>\n      <a href=\"#\" className=\"hover:text-foreground\">Docs</a>\n      <a href=\"#\" className=\"hover:text-foreground\">Pricing</a>\n    </div>\n  }\n  footer={\n    <div className=\"flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground\">\n      <div>© 2026 KJ Product Kit. All rights reserved.</div>\n      <div className=\"flex gap-6\">\n        <a href=\"#\" className=\"hover:text-foreground\">Privacy</a>\n        <a href=\"#\" className=\"hover:text-foreground\">Terms</a>\n        <a href=\"#\" className=\"hover:text-foreground\">GitHub</a>\n      </div>\n    </div>\n  }\n>\n  <div className=\"py-12 space-y-6\">\n    <h1 className=\"text-4xl font-extrabold tracking-tight\">Build faster with KJ UI</h1>\n    <p className=\"text-lg text-muted-foreground max-w-2xl\">\n      A modern, accessible design system tailored for developer tools, SaaS applications, and developer portfolios.\n    </p>\n  </div>\n</AppShell>"
+  },
+  {
+    "name": "AppShellBanner",
+    "importPath": "import { AppShellBanner } from \"@kjaniec-dev/ui\";",
+    "description": "React component AppShellBanner.",
+    "props": [
+      {
+        "name": "variant",
+        "type": "\"primary\" | \"accent\" | \"muted\"",
+        "optional": true,
+        "defaultValue": "\"primary\"",
+        "description": ""
+      },
+      {
+        "name": "closable",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onClose",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<AppShellBanner>\n  <!-- Content -->\n</AppShellBanner>"
+  },
+  {
+    "name": "AppShellHeader",
+    "importPath": "import { AppShellHeader } from \"@kjaniec-dev/ui\";",
+    "description": "React component AppShellHeader.",
+    "props": [
+      {
+        "name": "variant",
+        "type": "\"glass\" | \"solid\" | \"transparent\"",
+        "optional": true,
+        "defaultValue": "\"glass\"",
+        "description": ""
+      },
+      {
+        "name": "position",
+        "type": "\"sticky\" | \"fixed\" | \"static\"",
+        "optional": true,
+        "defaultValue": "\"sticky\"",
+        "description": ""
+      },
+      {
+        "name": "bordered",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "mobileNav",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<AppShellHeader>\n  <!-- Content -->\n</AppShellHeader>"
+  },
+  {
+    "name": "AppShellMain",
+    "importPath": "import { AppShellMain } from \"@kjaniec-dev/ui\";",
+    "description": "React component AppShellMain.",
+    "props": [
+      {
+        "name": "width",
+        "type": "\"default\" | \"narrow\" | \"wide\" | \"full\"",
+        "optional": true,
+        "defaultValue": "\"default\"",
+        "description": ""
+      },
+      {
+        "name": "padded",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<AppShellMain>\n  <!-- Content -->\n</AppShellMain>"
+  },
+  {
+    "name": "AppShellFooter",
+    "importPath": "import { AppShellFooter } from \"@kjaniec-dev/ui\";",
+    "description": "React component AppShellFooter.",
+    "props": [
+      {
+        "name": "bordered",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<AppShellFooter>\n  <!-- Content -->\n</AppShellFooter>"
+  },
+  {
+    "name": "Rating",
+    "importPath": "import { Rating } from \"@kjaniec-dev/ui\";",
+    "description": "React component Rating.",
+    "props": [
+      {
+        "name": "stars",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "count",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "percentage",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Rating>\n  <!-- Content -->\n</Rating>"
+  },
+  {
+    "name": "RatingField",
+    "importPath": "import { RatingField } from \"@kjaniec-dev/ui\";",
+    "description": "React component RatingField.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<RatingField>\n  <!-- Content -->\n</RatingField>"
+  },
+  {
+    "name": "RatingSummary",
+    "importPath": "import { RatingSummary } from \"@kjaniec-dev/ui\";",
+    "description": "React component RatingSummary.",
+    "props": [
+      {
+        "name": "average",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "totalCount",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "distribution",
+        "type": "RatingDistributionItem[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "max",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "5",
+        "description": ""
+      },
+      {
+        "name": "size",
+        "type": "RatingSize",
+        "optional": true,
+        "defaultValue": "\"md\"",
+        "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "RatingIconType | React.ComponentType<{ className?: string }>",
+        "optional": true,
+        "defaultValue": "\"star\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<RatingSummary>\n  <!-- Content -->\n</RatingSummary>"
+  },
+  {
+    "name": "PricingCard",
+    "importPath": "import { PricingCard } from \"@kjaniec-dev/ui\";",
+    "description": "React component PricingCard.",
+    "props": [
+      {
+        "name": "name",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "price",
+        "type": "string | number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "period",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "features",
+        "type": "PricingFeatureItem[]",
+        "optional": true,
+        "defaultValue": "[]",
+        "description": ""
+      },
+      {
+        "name": "variant",
+        "type": "\"default\" | \"featured\" | \"outline\"",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "badge",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "popular",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "ctaText",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Get Started\"",
+        "description": ""
+      },
+      {
+        "name": "onCtaClick",
+        "type": "React.MouseEventHandler<HTMLButtonElement>",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "ctaHref",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "cta",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<PricingCard>\n  <!-- Content -->\n</PricingCard>"
+  },
+  {
+    "name": "BlogCard",
+    "importPath": "import { BlogCard } from \"@kjaniec-dev/ui\";",
+    "description": "React component BlogCard.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "coverUrl",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "coverAlt",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "category",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "readTime",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "publishedAt",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "author",
+        "type": "BlogCardAuthor",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "orientation",
+        "type": "\"vertical\" | \"horizontal\"",
+        "optional": true,
+        "defaultValue": "\"vertical\"",
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<BlogCard>\n  <!-- Content -->\n</BlogCard>"
+  },
+  {
+    "name": "ProjectCard",
+    "importPath": "import { ProjectCard } from \"@kjaniec-dev/ui\";",
+    "description": "React component ProjectCard.",
+    "props": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "status",
+        "type": "ProjectCardStatus",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "techStack",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": "[]",
+        "description": ""
+      },
+      {
+        "name": "metrics",
+        "type": "ProjectCardMetric[]",
+        "optional": true,
+        "defaultValue": "[]",
+        "description": ""
+      },
+      {
+        "name": "updatedAt",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "actions",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ProjectCard>\n  <!-- Content -->\n</ProjectCard>"
+  },
+  {
+    "name": "InboxPopover",
+    "importPath": "import { InboxPopover } from \"@kjaniec-dev/ui\";",
+    "description": "React component InboxPopover.",
+    "props": [
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "open",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onOpenChange",
+        "type": "(open: boolean) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<InboxPopover>\n  <InboxTrigger unreadCount={unreadCount} />\n  <InboxContent\n    items={items}\n    onMarkAllRead={markAllRead}\n    onDismiss={dismiss}\n    viewAllHref=\"#\"\n  />\n</InboxPopover>"
+  },
+  {
+    "name": "InboxTrigger",
+    "importPath": "import { InboxTrigger } from \"@kjaniec-dev/ui\";",
+    "description": "React component InboxTrigger.",
+    "props": [
+      {
+        "name": "unreadCount",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Badge count. Hidden when 0 or undefined."
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Notifications\"",
+        "description": "Accessible label (default: \"Notifications\")."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<InboxTrigger unreadCount={unreadCount} />"
+  },
+  {
+    "name": "InboxContent",
+    "importPath": "import { InboxContent } from \"@kjaniec-dev/ui\";",
+    "description": "React component InboxContent.",
+    "props": [
+      {
+        "name": "items",
+        "type": "NotificationItemData[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onMarkAllRead",
+        "type": "() => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onDismiss",
+        "type": "(id: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "viewAllHref",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "viewAllLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"View all notifications\"",
+        "description": ""
+      },
+      {
+        "name": "emptyState",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "360",
+        "description": ""
+      },
+      {
+        "name": "maxHeight",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "320",
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<InboxContent\n  items={items}\n  onMarkAllRead={markAllRead}\n  onDismiss={dismiss}\n  viewAllHref=\"#\"\n/>"
+  },
+  {
+    "name": "NotificationItem",
+    "importPath": "import { NotificationItem } from \"@kjaniec-dev/ui\";",
+    "description": "React component NotificationItem.",
+    "props": [
+      {
+        "name": "item",
+        "type": "NotificationItemData",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onDismiss",
+        "type": "(id: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<NotificationItem>\n  <!-- Content -->\n</NotificationItem>"
+  },
+  {
+    "name": "ColorPicker",
+    "importPath": "import { ColorPicker } from \"@kjaniec-dev/ui\";",
+    "description": "React component ColorPicker.",
+    "props": [
+      {
+        "name": "value",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Current hex color value (controlled)."
+      },
+      {
+        "name": "defaultValue",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"#3B82F6\"",
+        "description": "Initial hex color value (uncontrolled). Defaults to \"#3B82F6\"."
+      },
+      {
+        "name": "onChange",
+        "type": "(hex: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Called when color changes."
+      },
+      {
+        "name": "swatches",
+        "type": "readonly string[] | string[]",
+        "optional": true,
+        "defaultValue": "DEFAULT_COLOR_SWATCHES",
+        "description": "Array of hex color strings for preset palette. Defaults to DEFAULT_COLOR_SWATCHES."
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Whether the picker is disabled."
+      },
+      {
+        "name": "showHexInput",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to show the manual Hex text input inside the popover. Defaults to true."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Additional class name for the container."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ColorPicker>\n  <!-- Content -->\n</ColorPicker>"
+  },
+  {
+    "name": "ColorPickerField",
+    "importPath": "import { ColorPickerField } from \"@kjaniec-dev/ui\";",
+    "description": "React component ColorPickerField.",
+    "props": [
+      {
+        "name": "label",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "hint",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "error",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "required",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ColorPickerField\n  label=\"Brand Primary Color\"\n  hint=\"Choose your main product accent color\"\n  defaultValue=\"#3B82F6\"\n/>"
+  },
+  {
+    "name": "ColorPickerSwatch",
+    "importPath": "import { ColorPickerSwatch } from \"@kjaniec-dev/ui\";",
+    "description": "React component ColorPickerSwatch.",
+    "props": [
+      {
+        "name": "color",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "selected",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "size",
+        "type": "\"sm\" | \"md\" | \"lg\"",
+        "optional": true,
+        "defaultValue": "\"md\"",
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ColorPickerSwatch>\n  <!-- Content -->\n</ColorPickerSwatch>"
+  },
+  {
+    "name": "DEFAULT_COLOR_SWATCHES",
+    "importPath": "import { DEFAULT_COLOR_SWATCHES } from \"@kjaniec-dev/ui\";",
+    "description": "React component DEFAULT_COLOR_SWATCHES.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<DEFAULT_COLOR_SWATCHES>\n  <!-- Content -->\n</DEFAULT_COLOR_SWATCHES>"
+  },
+  {
+    "name": "ImageGallery",
+    "importPath": "import { ImageGallery } from \"@kjaniec-dev/ui\";",
+    "description": "React component ImageGallery.",
+    "props": [
+      {
+        "name": "images",
+        "type": "GalleryImage[]",
+        "optional": false,
+        "defaultValue": "[]",
+        "description": ""
+      },
+      {
+        "name": "columns",
+        "type": "2 | 3 | 4 | 5",
+        "optional": true,
+        "defaultValue": "3",
+        "description": ""
+      },
+      {
+        "name": "aspectRatio",
+        "type": "\"square\" | \"video\" | \"4/3\" | \"auto\" | string",
+        "optional": true,
+        "defaultValue": "\"square\"",
+        "description": ""
+      },
+      {
+        "name": "maxVisible",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "thumbnailClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "lightboxClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onImageClick",
+        "type": "(index: number) => void",
+        "optional": true,
         "defaultValue": null,
         "description": ""
       }
     ],
     "cva": null,
-    "usageSnippet": "<SidebarNavGroup>\n  <!-- Content -->\n</SidebarNavGroup>"
+    "usageSnippet": "<ImageGallery images={sampleImages.slice(0, 4)} columns={2} />"
   }
 ]