@kjaniec-dev/ui-mcp 0.9.2 → 1.0.0

package/data/components.json

@@ -143,7 +143,7 @@
         "variant": "info"
       }
     },
-    "usageSnippet": "<Alert variant=\"info\" icon={InfoIcon} title=\"Information\">A short informational message for the user.</Alert>"
+    "usageSnippet": "<Alert variant=\"info\" icon={InfoIcon} title=\"Information\">\n  A short informational message for the user.\n</Alert>"
   },
   {
     "name": "Spinner",
@@ -275,7 +275,7 @@
       }
     ],
     "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>"
+    "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) => <span style={{ fontSize: 14, fontWeight: \"bold\" }}>{val} / 5</span>}\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",
@@ -669,7 +669,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<ToggleGroup options={options} value={value} onChange={setValue} aria-label=\"Text formatting\" />"
+    "usageSnippet": "<ToggleGroup\n  options={options}\n  value={value}\n  onChange={setValue}\n  aria-label=\"Text formatting\"\n/>"
   },
   {
     "name": "Card",
@@ -699,7 +699,7 @@
       }
     ],
     "cva": null,
-    "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>"
+    "usageSnippet": "<Card>\n  <CardHeader>\n    <Badge variant=\"primary\" className=\"self-start\">\n      Pro\n    </Badge>\n    <CardTitle>Team Workspace</CardTitle>\n    <CardDescription>\n      Unlimited projects, roles and activity history for your whole team.\n    </CardDescription>\n  </CardHeader>\n  <CardFooter>\n    <Button size=\"sm\">Choose plan</Button>\n    <Button size=\"sm\" variant=\"ghost\">\n      Details\n    </Button>\n  </CardFooter>\n</Card>"
   },
   {
     "name": "CardHeader",
@@ -707,7 +707,7 @@
     "description": "React component CardHeader.",
     "props": [],
     "cva": null,
-    "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>"
+    "usageSnippet": "<CardHeader>\n  <Badge variant=\"primary\" className=\"self-start\">\n    Pro\n  </Badge>\n  <CardTitle>Team Workspace</CardTitle>\n  <CardDescription>\n    Unlimited projects, roles and activity history for your whole team.\n  </CardDescription>\n</CardHeader>"
   },
   {
     "name": "CardTitle",
@@ -723,7 +723,7 @@
     "description": "React component CardDescription.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<CardDescription>Unlimited projects, roles and activity history for your whole team.</CardDescription>"
+    "usageSnippet": "<CardDescription>\n  Unlimited projects, roles and activity history for your whole team.\n</CardDescription>"
   },
   {
     "name": "CardContent",
@@ -739,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\">\n    Details\n  </Button>\n</CardFooter>"
   },
   {
     "name": "Stat",
@@ -909,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\">\n    Workspace preferences, permissions and integrations.\n  </TabsContent>\n</Tabs>"
   },
   {
     "name": "TabsList",
@@ -972,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\">\n    <AccordionTrigger>How does billing work?</AccordionTrigger>\n    <AccordionContent>\n      Monthly or annually — the annual plan includes two months free.\n    </AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"b\">\n    <AccordionTrigger>Can I change my plan later?</AccordionTrigger>\n    <AccordionContent>Yes, at any time. The difference is prorated.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"c\">\n    <AccordionTrigger>What payment methods are supported?</AccordionTrigger>\n    <AccordionContent>Visa, Mastercard and Apple Pay.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
   },
   {
     "name": "AccordionItem",
@@ -988,7 +988,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<AccordionItem value=\"a\"><AccordionTrigger>How does billing work?</AccordionTrigger><AccordionContent>Monthly or annually — the annual plan includes two months free.</AccordionContent></AccordionItem>"
+    "usageSnippet": "<AccordionItem value=\"a\">\n  <AccordionTrigger>How does billing work?</AccordionTrigger>\n  <AccordionContent>\n    Monthly or annually — the annual plan includes two months free.\n  </AccordionContent>\n</AccordionItem>"
   },
   {
     "name": "AccordionTrigger",
@@ -1004,7 +1004,7 @@
     "description": "React component AccordionContent.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<AccordionContent>Monthly or annually — the annual plan includes two months free.</AccordionContent>"
+    "usageSnippet": "<AccordionContent>\n  Monthly or annually — the annual plan includes two months free.\n</AccordionContent>"
   },
   {
     "name": "DropdownMenu",
@@ -1205,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>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <Avatar size=\"sm\" tone=\"primary\">\n            AK\n          </Avatar>\n          Anna Kowalski\n        </div>\n      </TableCell>\n      <TableCell>Administrator</TableCell>\n      <TableCell>\n        <Badge variant=\"success\" dot>\n          Active\n        </Badge>\n      </TableCell>\n      <TableCell numeric>24</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <Avatar size=\"sm\">MR</Avatar>Michael Rutkowski\n        </div>\n      </TableCell>\n      <TableCell>Editor</TableCell>\n      <TableCell>\n        <Badge variant=\"warning\" dot>\n          Invited\n        </Badge>\n      </TableCell>\n      <TableCell numeric>12</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <Avatar size=\"sm\" tone=\"info\">\n            JN\n          </Avatar>\n          Julia Nowak\n        </div>\n      </TableCell>\n      <TableCell>Viewer</TableCell>\n      <TableCell>\n        <Badge>Inactive</Badge>\n      </TableCell>\n      <TableCell numeric>3</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
   },
   {
     "name": "TableWrap",
@@ -1213,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>\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n            <Avatar size=\"sm\" tone=\"primary\">\n              AK\n            </Avatar>\n            Anna Kowalski\n          </div>\n        </TableCell>\n        <TableCell>Administrator</TableCell>\n        <TableCell>\n          <Badge variant=\"success\" dot>\n            Active\n          </Badge>\n        </TableCell>\n        <TableCell numeric>24</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n            <Avatar size=\"sm\">MR</Avatar>Michael Rutkowski\n          </div>\n        </TableCell>\n        <TableCell>Editor</TableCell>\n        <TableCell>\n          <Badge variant=\"warning\" dot>\n            Invited\n          </Badge>\n        </TableCell>\n        <TableCell numeric>12</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n            <Avatar size=\"sm\" tone=\"info\">\n              JN\n            </Avatar>\n            Julia Nowak\n          </div>\n        </TableCell>\n        <TableCell>Viewer</TableCell>\n        <TableCell>\n          <Badge>Inactive</Badge>\n        </TableCell>\n        <TableCell numeric>3</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</TableWrap>"
   },
   {
     "name": "TableHeader",
@@ -1229,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>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n        <Avatar size=\"sm\" tone=\"primary\">\n          AK\n        </Avatar>\n        Anna Kowalski\n      </div>\n    </TableCell>\n    <TableCell>Administrator</TableCell>\n    <TableCell>\n      <Badge variant=\"success\" dot>\n        Active\n      </Badge>\n    </TableCell>\n    <TableCell numeric>24</TableCell>\n  </TableRow>\n  <TableRow>\n    <TableCell>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n        <Avatar size=\"sm\">MR</Avatar>Michael Rutkowski\n      </div>\n    </TableCell>\n    <TableCell>Editor</TableCell>\n    <TableCell>\n      <Badge variant=\"warning\" dot>\n        Invited\n      </Badge>\n    </TableCell>\n    <TableCell numeric>12</TableCell>\n  </TableRow>\n  <TableRow>\n    <TableCell>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n        <Avatar size=\"sm\" tone=\"info\">\n          JN\n        </Avatar>\n        Julia Nowak\n      </div>\n    </TableCell>\n    <TableCell>Viewer</TableCell>\n    <TableCell>\n      <Badge>Inactive</Badge>\n    </TableCell>\n    <TableCell numeric>3</TableCell>\n  </TableRow>\n</TableBody>"
   },
   {
     "name": "TableRow",
@@ -1261,7 +1261,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>"
+    "usageSnippet": "<TableCell>\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n    <Avatar size=\"sm\" tone=\"primary\">\n      AK\n    </Avatar>\n    Anna Kowalski\n  </div>\n</TableCell>"
   },
   {
     "name": "Tooltip",
@@ -1342,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>\n    This action cannot be undone. All files and activity history will be permanently\n    deleted.\n  </ModalDescription>\n  <ModalActions>\n    <Button variant=\"ghost\" onClick={() => setOpen(false)}>\n      Cancel\n    </Button>\n    <Button variant=\"danger\" onClick={() => setOpen(false)}>\n      Delete project\n    </Button>\n  </ModalActions>\n</Modal>"
   },
   {
     "name": "ModalTitle",
@@ -1358,7 +1358,7 @@
     "description": "React component ModalDescription.",
     "props": [],
     "cva": null,
-    "usageSnippet": "<ModalDescription>This action cannot be undone. All files and activity history will be permanently deleted.</ModalDescription>"
+    "usageSnippet": "<ModalDescription>\n  This action cannot be undone. All files and activity history will be permanently\n  deleted.\n</ModalDescription>"
   },
   {
     "name": "ModalActions",
@@ -1366,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)}>\n    Cancel\n  </Button>\n  <Button variant=\"danger\" onClick={() => setOpen(false)}>\n    Delete project\n  </Button>\n</ModalActions>"
   },
   {
     "name": "ToastProvider",
@@ -1773,6 +1773,13 @@
         "defaultValue": "\"rectangular\"",
         "description": ""
       },
+      {
+        "name": "animation",
+        "type": "\"shimmer\" | \"pulse\" | \"none\"",
+        "optional": true,
+        "defaultValue": "\"shimmer\"",
+        "description": ""
+      },
       {
         "name": "width",
         "type": "string | number",
@@ -1847,7 +1854,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  />\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>"
+    "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\n          href=\"#\"\n          className=\"text-sm font-medium text-foreground hover:text-primary transition-colors\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\"\n        >\n          Projects\n        </a>\n        <a\n          href=\"#\"\n          className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\"\n        >\n          Invoices\n        </a>\n        <a\n          href=\"#\"\n          className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\"\n        >\n          Settings\n        </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\">\n        Profile\n      </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",
@@ -1884,7 +1891,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-1 sm: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>"
+    "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\">\n        General\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\" className=\"justify-start text-muted-foreground\">\n        Team\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\" className=\"justify-start text-muted-foreground\">\n        Billing\n      </Button>\n    </div>\n  }\n>\n  <Card className=\"p-6 space-y-4\">\n    <div className=\"grid grid-cols-1 sm: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",
@@ -1949,7 +1956,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    </>\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>"
+    "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\">\n        Refund\n      </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\n      <br />\n      ul. Marszałkowska 10/24\n      <br />\n      00-001 Warszawa, Poland\n    </p>\n  </Card>\n</DetailPageLayout>"
   },
   {
     "name": "TableToolbar",
@@ -2123,7 +2130,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\" />\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>"
+    "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)}>\n        Cancel\n      </Button>\n      <Button size=\"sm\" onClick={() => setOpen(false)}>\n        Save Changes\n      </Button>\n    </div>\n  </div>\n</Drawer>"
   },
   {
     "name": "CommandPalette",
@@ -2562,7 +2569,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<Combobox options={frameworks} value={value} onChange={setValue} placeholder=\"Select a framework…\" />"
+    "usageSnippet": "<Combobox\n  options={frameworks}\n  value={value}\n  onChange={setValue}\n  placeholder=\"Select a framework…\"\n/>"
   },
   {
     "name": "ComboboxField",
@@ -2786,7 +2793,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<DatePickerField label=\"Due date\" required hint=\"Weekdays only.\" value={value} onChange={setValue} disabledDates={(d) => d.getDay() === 0 || d.getDay() === 6} />"
+    "usageSnippet": "<DatePickerField\n  label=\"Due date\"\n  required\n  hint=\"Weekdays only.\"\n  value={value}\n  onChange={setValue}\n  disabledDates={(d) => d.getDay() === 0 || d.getDay() === 6}\n/>"
   },
   {
     "name": "RangeCalendar",
@@ -3195,7 +3202,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<FileUpload value={items} onChange={setItems} accept=\"image/*,.pdf\" maxSize={5 * 1024 * 1024} />"
+    "usageSnippet": "<FileUpload\n  value={items}\n  onChange={setItems}\n  accept=\"image/*,.pdf\"\n  maxSize={5 * 1024 * 1024}\n/>"
   },
   {
     "name": "FileUploadField",
@@ -3575,7 +3582,7 @@
       }
     ],
     "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>"
+    "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\">\n          Features\n        </a>\n        <a href=\"#\" className=\"hover:text-foreground\">\n          Docs\n        </a>\n        <a href=\"#\" className=\"hover:text-foreground\">\n          Pricing\n        </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\">\n        Features\n      </a>\n      <a href=\"#\" className=\"hover:text-foreground\">\n        Docs\n      </a>\n      <a href=\"#\" className=\"hover:text-foreground\">\n        Pricing\n      </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\">\n          Privacy\n        </a>\n        <a href=\"#\" className=\"hover:text-foreground\">\n          Terms\n        </a>\n        <a href=\"#\" className=\"hover:text-foreground\">\n          GitHub\n        </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\n      developer portfolios.\n    </p>\n  </div>\n</AppShell>"
   },
   {
     "name": "AppShellBanner",
@@ -4427,14 +4434,14 @@
         "name": "triggerText",
         "type": "string",
         "optional": true,
-        "defaultValue": "'Wybierz Paczkomat®'",
+        "defaultValue": "\"Wybierz Paczkomat®\"",
         "description": "Trigger button label. Default 'Wybierz Paczkomat®'."
       },
       {
         "name": "modalTitle",
         "type": "string",
         "optional": true,
-        "defaultValue": "'Wybierz punkt odbioru InPost'",
+        "defaultValue": "\"Wybierz punkt odbioru InPost\"",
         "description": "Modal header title. Default 'Wybierz punkt odbioru InPost'."
       },
       {
@@ -4469,21 +4476,21 @@
         "name": "className",
         "type": "string",
         "optional": true,
-        "defaultValue": "''",
+        "defaultValue": "\"\"",
         "description": "Outer container CSS class name."
       },
       {
         "name": "buttonVariant",
-        "type": "'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'",
+        "type": "\"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\"",
         "optional": true,
-        "defaultValue": "'outline'",
+        "defaultValue": "\"outline\"",
         "description": "Trigger button style variant ('primary', 'secondary', 'outline', 'ghost', 'danger'). Default 'outline'."
       },
       {
         "name": "buttonSize",
-        "type": "'sm' | 'md' | 'lg'",
+        "type": "\"sm\" | \"md\" | \"lg\"",
         "optional": true,
-        "defaultValue": "'md'",
+        "defaultValue": "\"md\"",
         "description": "Trigger button size ('sm', 'md', 'lg'). Default 'md'."
       },
       {
@@ -4530,7 +4537,7 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<InPostGeowidget\n  sandbox={true}\n  onPointSelect={(point) => setSelectedPoint(point)}\n/>"
+    "usageSnippet": "<InPostGeowidget sandbox={true} onPointSelect={(point) => setSelectedPoint(point)} />"
   },
   {
     "name": "InPostGeowidgetModal",
@@ -4555,14 +4562,14 @@
         "name": "triggerText",
         "type": "string",
         "optional": true,
-        "defaultValue": "'Wybierz Paczkomat®'",
+        "defaultValue": "\"Wybierz Paczkomat®\"",
         "description": "Trigger button label. Default 'Wybierz Paczkomat®'."
       },
       {
         "name": "modalTitle",
         "type": "string",
         "optional": true,
-        "defaultValue": "'Wybierz punkt odbioru InPost'",
+        "defaultValue": "\"Wybierz punkt odbioru InPost\"",
         "description": "Modal header title. Default 'Wybierz punkt odbioru InPost'."
       },
       {
@@ -4597,21 +4604,21 @@
         "name": "className",
         "type": "string",
         "optional": true,
-        "defaultValue": "''",
+        "defaultValue": "\"\"",
         "description": "Outer container CSS class name."
       },
       {
         "name": "buttonVariant",
-        "type": "'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'",
+        "type": "\"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\"",
         "optional": true,
-        "defaultValue": "'outline'",
+        "defaultValue": "\"outline\"",
         "description": "Trigger button style variant ('primary', 'secondary', 'outline', 'ghost', 'danger'). Default 'outline'."
       },
       {
         "name": "buttonSize",
-        "type": "'sm' | 'md' | 'lg'",
+        "type": "\"sm\" | \"md\" | \"lg\"",
         "optional": true,
-        "defaultValue": "'md'",
+        "defaultValue": "\"md\"",
         "description": "Trigger button size ('sm', 'md', 'lg'). Default 'md'."
       },
       {
@@ -4658,6 +4665,1228 @@
       }
     ],
     "cva": null,
-    "usageSnippet": "<InPostGeowidgetModal\n  sandbox={true}\n  value={point}\n  onSelect={(p) => setPoint(p)}\n/>"
+    "usageSnippet": "<InPostGeowidgetModal sandbox={true} value={point} onSelect={(p) => setPoint(p)} />"
+  },
+  {
+    "name": "ChartContainer",
+    "importPath": "import { ChartContainer } from \"@kjaniec-dev/ui\";",
+    "description": "Responsive chart container managing SVG viewBox coordinate space and absolute HTML overlay slot.",
+    "props": [
+      {
+        "name": "width",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "viewBox",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "\"aria-label\"",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "overlay",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "svgClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "svgRef",
+        "type": "React.Ref<SVGSVGElement>",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "plotWrapperClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "plotWrapperStyle",
+        "type": "React.CSSProperties",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "children",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartContainer>\n  <!-- Content -->\n</ChartContainer>"
+  },
+  {
+    "name": "ChartGrid",
+    "importPath": "import { ChartGrid } from \"@kjaniec-dev/ui\";",
+    "description": "Background horizontal and vertical reference lines with custom tick intervals and dashing.",
+    "props": [
+      {
+        "name": "width",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "0",
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "0",
+        "description": ""
+      },
+      {
+        "name": "yTicks",
+        "type": "number[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "xTicks",
+        "type": "number[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "scaleY",
+        "type": "(value: number) => number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "scaleX",
+        "type": "(value: number) => number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "yDomain",
+        "type": "[number, number]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "yRange",
+        "type": "[number, number]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "xDomain",
+        "type": "[number, number]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "xRange",
+        "type": "[number, number]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "stroke",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"var(--kj-border-subtle, #e5e7eb)\"",
+        "description": ""
+      },
+      {
+        "name": "strokeDasharray",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"3 3\"",
+        "description": ""
+      },
+      {
+        "name": "strokeWidth",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "1",
+        "description": ""
+      },
+      {
+        "name": "strokeOpacity",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "1",
+        "description": ""
+      },
+      {
+        "name": "horizontal",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "vertical",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartGrid>\n  <!-- Content -->\n</ChartGrid>"
+  },
+  {
+    "name": "ChartXAxis",
+    "importPath": "import { ChartXAxis } from \"@kjaniec-dev/ui\";",
+    "description": "SVG horizontal axis ticks rendering aligned category or timestamp labels.",
+    "props": [
+      {
+        "name": "ticks",
+        "type": "ChartXAxisTick[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "y",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "formatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "textAnchor",
+        "type": "\"start\" | \"middle\" | \"end\"",
+        "optional": true,
+        "defaultValue": "\"middle\"",
+        "description": ""
+      },
+      {
+        "name": "dy",
+        "type": "string | number",
+        "optional": true,
+        "defaultValue": "\"1.2em\"",
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "tickClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartXAxis>\n  <!-- Content -->\n</ChartXAxis>"
+  },
+  {
+    "name": "ChartYAxis",
+    "importPath": "import { ChartYAxis } from \"@kjaniec-dev/ui\";",
+    "description": "SVG vertical axis ticks rendering numeric or value labels.",
+    "props": [
+      {
+        "name": "ticks",
+        "type": "ChartYAxisTick[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "x",
+        "type": "number",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "formatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "textAnchor",
+        "type": "\"start\" | \"middle\" | \"end\"",
+        "optional": true,
+        "defaultValue": "\"end\"",
+        "description": ""
+      },
+      {
+        "name": "dx",
+        "type": "string | number",
+        "optional": true,
+        "defaultValue": "\"-0.5em\"",
+        "description": ""
+      },
+      {
+        "name": "dominantBaseline",
+        "type": "\"auto\" | \"middle\" | \"central\" | \"hanging\" | \"alphabetic\"",
+        "optional": true,
+        "defaultValue": "\"middle\"",
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "tickClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartYAxis>\n  <!-- Content -->\n</ChartYAxis>"
+  },
+  {
+    "name": "ChartTooltip",
+    "importPath": "import { ChartTooltip } from \"@kjaniec-dev/ui\";",
+    "description": "Absolute-positioned HTML floating tooltip card with series indicators and crosshair line.",
+    "props": [
+      {
+        "name": "title",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "items",
+        "type": "ChartTooltipItem[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "x",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "y",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "open",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": ""
+      },
+      {
+        "name": "crosshairX",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "crosshairHeight",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "showCrosshair",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": ""
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: number) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "content",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartTooltip>\n  <!-- Content -->\n</ChartTooltip>"
+  },
+  {
+    "name": "ChartLegend",
+    "importPath": "import { ChartLegend } from \"@kjaniec-dev/ui\";",
+    "description": "Series labels list with colored indicator dots and optional click/keyboard toggling.",
+    "props": [
+      {
+        "name": "series",
+        "type": "ChartSeries[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "activeSeries",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "disabledSeries",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "onToggle",
+        "type": "(key: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "orientation",
+        "type": "\"horizontal\" | \"vertical\"",
+        "optional": true,
+        "defaultValue": "\"horizontal\"",
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "itemClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartLegend>\n  <!-- Content -->\n</ChartLegend>"
+  },
+  {
+    "name": "ChartA11yTable",
+    "importPath": "import { ChartA11yTable } from \"@kjaniec-dev/ui\";",
+    "description": "Screen reader accessible semantic table hidden with sr-only class complying with WCAG 2.1 AA.",
+    "props": [
+      {
+        "name": "caption",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "categories",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "series",
+        "type": "ChartSeries[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "data",
+        "type": "Array<Record<string, unknown>> | number[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "indexKey",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "index",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": ""
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<ChartA11yTable>\n  <!-- Content -->\n</ChartA11yTable>"
+  },
+  {
+    "name": "CHART_COLOR_VARS",
+    "importPath": "import { CHART_COLOR_VARS } from \"@kjaniec-dev/ui\";",
+    "description": "Map of chart token keys to CSS custom properties with fallback hex values.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<CHART_COLOR_VARS>\n  <!-- Content -->\n</CHART_COLOR_VARS>"
+  },
+  {
+    "name": "DEFAULT_CHART_COLORS",
+    "importPath": "import { DEFAULT_CHART_COLORS } from \"@kjaniec-dev/ui\";",
+    "description": "Default color sequence cycling through chart1 to chart6.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<DEFAULT_CHART_COLORS>\n  <!-- Content -->\n</DEFAULT_CHART_COLORS>"
+  },
+  {
+    "name": "Sparkline",
+    "importPath": "import { Sparkline } from \"@kjaniec-dev/ui\";",
+    "description": "Compact, lightweight data visualization sparkline for KPI cards, metric widgets, and data tables.",
+    "props": [
+      {
+        "name": "data",
+        "type": "Array<number | Record<string, unknown>>",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Numerical values or objects containing data points to plot."
+      },
+      {
+        "name": "dataKey",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Key to extract numeric values when `data` contains objects."
+      },
+      {
+        "name": "variant",
+        "type": "SparklineVariant",
+        "optional": true,
+        "defaultValue": "\"line\"",
+        "description": "Visual presentation mode: continuous line, gradient area, or discrete bars. Defaults to \"line\"."
+      },
+      {
+        "name": "curve",
+        "type": "SparklineCurve",
+        "optional": true,
+        "defaultValue": "\"smooth\"",
+        "description": "Interpolation method between data points. Defaults to \"smooth\"."
+      },
+      {
+        "name": "color",
+        "type": "ChartColor",
+        "optional": true,
+        "defaultValue": "\"chart1\"",
+        "description": "Theme token identifier or raw CSS color string for line, fill, and bars. Defaults to \"chart1\"."
+      },
+      {
+        "name": "strokeWidth",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "2",
+        "description": "Line stroke width in pixels for line and area variants. Defaults to 2."
+      },
+      {
+        "name": "showEndDot",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Whether to highlight the final data point with an accent dot. Defaults to false."
+      },
+      {
+        "name": "showGradient",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to apply a fading vertical gradient to area fills. Defaults to true."
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "36",
+        "description": "Overall component height in pixels. Defaults to 36."
+      },
+      {
+        "name": "width",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "\"100%\"",
+        "description": "Component width in pixels or CSS units. Defaults to \"100%\"."
+      },
+      {
+        "name": "barRadius",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "2",
+        "description": "Corner radius in pixels for bar rectangles. Defaults to 2."
+      },
+      {
+        "name": "barPadding",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "2",
+        "description": "Spacing between discrete bars in pixels. Defaults to 2."
+      },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Accessible label alias for assistive technologies."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<Sparkline data={sampleData} variant=\"line\" color=\"chart1\" showEndDot height={40} />"
+  },
+  {
+    "name": "LineChart",
+    "importPath": "import { LineChart } from \"@kjaniec-dev/ui\";",
+    "description": "Responsive multi-series LineChart with SVG rendering, background grid, nice-scale axes,\ninteractive HTML tooltip overlay with crosshair, toggleable legend, and WCAG AA accessible table.",
+    "props": [
+      {
+        "name": "data",
+        "type": "Array<Record<string, unknown>>",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Array of tabular data records to plot."
+      },
+      {
+        "name": "index",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Key identifying category or timestamp in each data item (e.g. \"date\", \"month\")."
+      },
+      {
+        "name": "series",
+        "type": "ChartSeries[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Series configurations defining data keys, labels, and color assignments."
+      },
+      {
+        "name": "variant",
+        "type": "LineChartVariant",
+        "optional": true,
+        "defaultValue": "\"line\"",
+        "description": "Visual presentation mode: continuous line or filled area. Defaults to \"line\"."
+      },
+      {
+        "name": "curve",
+        "type": "LineChartCurve",
+        "optional": true,
+        "defaultValue": "\"linear\"",
+        "description": "Interpolation method between data points: linear polyline, smooth cubic curve, or step lines. Defaults to \"linear\"."
+      },
+      {
+        "name": "showGrid",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render background horizontal reference grid lines. Defaults to true."
+      },
+      {
+        "name": "showXAxis",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render horizontal X-axis tick labels. Defaults to true."
+      },
+      {
+        "name": "showYAxis",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render vertical Y-axis numeric ticks. Defaults to true."
+      },
+      {
+        "name": "showLegend",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Whether to render series legend. Defaults to true when series.length > 1."
+      },
+      {
+        "name": "showTooltip",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to display interactive floating tooltip card on hover/touch. Defaults to true."
+      },
+      {
+        "name": "showDots",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Whether to render accent dots on data points. Defaults to false."
+      },
+      {
+        "name": "showGradient",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to apply a subtle vertical gradient to area fills. Defaults to true."
+      },
+      {
+        "name": "showA11yTable",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Whether to render a semantic hidden table for screen readers. Defaults to true when caption is provided."
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: number) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Value formatter for Y-axis labels and tooltip metrics."
+      },
+      {
+        "name": "indexFormatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Label formatter for X-axis ticks and tooltip header."
+      },
+      {
+        "name": "emptyMessage",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Brak danych do wyświetlenia\"",
+        "description": "Text to render when `data` is empty. Defaults to \"Brak danych do wyświetlenia\"."
+      },
+      {
+        "name": "height",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "280",
+        "description": "Height of the chart in pixels or CSS units. Defaults to 280."
+      },
+      {
+        "name": "width",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "\"100%\"",
+        "description": "Width of the chart in pixels or CSS units. Defaults to \"100%\"."
+      },
+      {
+        "name": "margin",
+        "type": "ChartMargin",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Inner chart margins in pixels."
+      },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Accessible label for screen readers."
+      },
+      {
+        "name": "caption",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Screen reader semantic table caption."
+      },
+      {
+        "name": "strokeWidth",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "2",
+        "description": "Stroke width in pixels for line paths. Defaults to 2."
+      },
+      {
+        "name": "activeSeries",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Controlled list of active series keys."
+      },
+      {
+        "name": "onSeriesToggle",
+        "type": "(key: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Callback fired when user clicks a legend item to toggle series visibility."
+      },
+      {
+        "name": "yTicksCount",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "5",
+        "description": "Number of Y-axis ticks to target in nice scale calculation. Defaults to 5."
+      },
+      {
+        "name": "yDomain",
+        "type": "[number, number]",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Explicit [min, max] domain override for Y-axis."
+      },
+      {
+        "name": "autoScale",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Whether Y-axis auto-scales to data minimum rather than anchoring at zero. Defaults to false."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<LineChart\n  data={monthlyData}\n  index=\"month\"\n  series={standardSeries}\n  curve=\"smooth\"\n  height={240}\n/>"
+  },
+  {
+    "name": "AreaChart",
+    "importPath": "import { AreaChart } from \"@kjaniec-dev/ui\";",
+    "description": "Specialized variant of LineChart with subtle SVG vertical gradient fills beneath lines.",
+    "props": [],
+    "cva": null,
+    "usageSnippet": "<AreaChart\n  data={monthlyData}\n  index=\"month\"\n  series={[\n    { key: \"revenue\", label: \"Przychód\", color: \"chart1\" },\n    { key: \"profit\", label: \"Zysk\", color: \"chart2\" },\n  ]}\n  curve=\"smooth\"\n  valueFormatter={(val) => `${(val / 1000).toFixed(0)}k zł`}\n  height={320}\n/>"
+  },
+  {
+    "name": "BarChart",
+    "importPath": "import { BarChart } from \"@kjaniec-dev/ui\";",
+    "description": "Responsive multi-series BarChart supporting grouped and stacked modes,\nvertical and horizontal orientations, rounded corners, tooltips, legend toggling,\nand WCAG AA accessibility table.",
+    "props": [
+      {
+        "name": "data",
+        "type": "Array<Record<string, unknown>>",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Array of tabular data records to plot."
+      },
+      {
+        "name": "index",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Key identifying category or timestamp in each data item (e.g. \"category\", \"month\")."
+      },
+      {
+        "name": "series",
+        "type": "ChartSeries[]",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Series configurations defining data keys, labels, and color assignments."
+      },
+      {
+        "name": "type",
+        "type": "BarChartType",
+        "optional": true,
+        "defaultValue": "\"grouped\"",
+        "description": "Mode of bar presentation: grouped side-by-side or stacked. Defaults to \"grouped\"."
+      },
+      {
+        "name": "layout",
+        "type": "BarChartLayout",
+        "optional": true,
+        "defaultValue": "\"vertical\"",
+        "description": "Orientation of bars: vertical columns or horizontal bars. Defaults to \"vertical\"."
+      },
+      {
+        "name": "radius",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "4",
+        "description": "Corner radius in pixels for rounded bar edges. Defaults to 4."
+      },
+      {
+        "name": "showGrid",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render background reference grid lines. Defaults to true."
+      },
+      {
+        "name": "showXAxis",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render horizontal X-axis tick labels. Defaults to true."
+      },
+      {
+        "name": "showYAxis",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render vertical Y-axis numeric or category ticks. Defaults to true."
+      },
+      {
+        "name": "showLegend",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Whether to render series legend. Defaults to true when series.length > 1."
+      },
+      {
+        "name": "showTooltip",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to display interactive floating tooltip card on bar hover/touch. Defaults to true."
+      },
+      {
+        "name": "showA11yTable",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Whether to render a semantic hidden table for screen readers. Defaults to true when caption is provided."
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: number) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Value formatter for numeric axis labels and tooltip metrics."
+      },
+      {
+        "name": "indexFormatter",
+        "type": "(value: unknown) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Label formatter for category axis ticks and tooltip header."
+      },
+      {
+        "name": "emptyMessage",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Brak danych do wyświetlenia\"",
+        "description": "Text to render when `data` is empty. Defaults to \"Brak danych do wyświetlenia\"."
+      },
+      {
+        "name": "height",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "280",
+        "description": "Height of the chart in pixels or CSS units. Defaults to 280."
+      },
+      {
+        "name": "width",
+        "type": "number | string",
+        "optional": true,
+        "defaultValue": "\"100%\"",
+        "description": "Width of the chart in pixels or CSS units. Defaults to \"100%\"."
+      },
+      {
+        "name": "margin",
+        "type": "ChartMargin",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Inner chart margins in pixels."
+      },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Accessible label for screen readers."
+      },
+      {
+        "name": "caption",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Screen reader semantic table caption."
+      },
+      {
+        "name": "activeSeries",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Controlled list of active series keys."
+      },
+      {
+        "name": "onSeriesToggle",
+        "type": "(key: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Callback fired when user clicks a legend item to toggle series visibility."
+      },
+      {
+        "name": "yTicksCount",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "5",
+        "description": "Number of numeric ticks to target in nice scale calculation. Defaults to 5."
+      },
+      {
+        "name": "yDomain",
+        "type": "[number, number]",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Explicit [min, max] domain override for the numeric value axis."
+      },
+      {
+        "name": "autoScale",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "false",
+        "description": "Whether numeric axis auto-scales to data minimum rather than anchoring at zero. Defaults to false."
+      },
+      {
+        "name": "barMaxWidth",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Maximum bar thickness in pixels."
+      },
+      {
+        "name": "groupPadding",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "0.2",
+        "description": "Fractional padding between category groups (0 to 1). Defaults to 0.2."
+      },
+      {
+        "name": "barPadding",
+        "type": "number",
+        "optional": true,
+        "defaultValue": "2",
+        "description": "Pixel gap between bars within a grouped category. Defaults to 2."
+      },
+      {
+        "name": "barClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Additional CSS class applied to each SVG bar rect."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<BarChart\n  data={[]}\n  index=\"month\"\n  series={standardSeries}\n  emptyMessage=\"Brak danych historycznych dla wybranego okresu\"\n  height={220}\n/>"
+  },
+  {
+    "name": "DonutChart",
+    "importPath": "import { DonutChart } from \"@kjaniec-dev/ui\";",
+    "description": "Responsive DonutChart component rendering SVG annular ring segments,\ncenter content slot, hover highlights, interactive legend toggling,\nfloating tooltip, and WCAG AA screen reader table.",
+    "props": [
+      {
+        "name": "data",
+        "type": "Array<Record<string, unknown>>",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Array of data records to plot."
+      },
+      {
+        "name": "category",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Key identifying category label in each data item (e.g. \"source\", \"name\")."
+      },
+      {
+        "name": "value",
+        "type": "string",
+        "optional": false,
+        "defaultValue": null,
+        "description": "Key identifying numeric value in each data item (e.g. \"visitors\", \"amount\")."
+      },
+      {
+        "name": "centerLabel",
+        "type": "React.ReactNode",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Custom label or metric element rendered in the center hole of the donut ring."
+      },
+      {
+        "name": "size",
+        "type": "DonutChartSize",
+        "optional": true,
+        "defaultValue": "\"md\"",
+        "description": "Chart diameter: predefined \"sm\" (160px), \"md\" (220px), \"lg\" (280px) or custom pixel number. Defaults to \"md\"."
+      },
+      {
+        "name": "innerRadius",
+        "type": "number",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Inner radius ratio (0 to 1, relative to outerRadius) or absolute pixel radius (> 1). Defaults to 0.65. Set to 0 for pie chart."
+      },
+      {
+        "name": "colors",
+        "type": "(ChartColor | string)[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Custom color palette or token sequence (e.g. [\"chart1\", \"chart2\"] or hex strings)."
+      },
+      {
+        "name": "showLegend",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to render series legend. Defaults to true."
+      },
+      {
+        "name": "showTooltip",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": "true",
+        "description": "Whether to display interactive floating tooltip card on slice hover/touch. Defaults to true."
+      },
+      {
+        "name": "showA11yTable",
+        "type": "boolean",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Whether to render a semantic hidden table for screen readers. Defaults to true when caption is provided."
+      },
+      {
+        "name": "valueFormatter",
+        "type": "(value: number) => string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Value formatter for numeric tooltip metrics and accessible table values."
+      },
+      {
+        "name": "emptyMessage",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Brak danych do wyświetlenia\"",
+        "description": "Text to render when `data` is empty. Defaults to \"Brak danych do wyświetlenia\"."
+      },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Accessible label for screen readers."
+      },
+      {
+        "name": "caption",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Screen reader semantic table caption."
+      },
+      {
+        "name": "valueLabel",
+        "type": "string",
+        "optional": true,
+        "defaultValue": "\"Wartość\"",
+        "description": "Column header label for numeric metric in screen reader table. Defaults to \"Wartość\"."
+      },
+      {
+        "name": "activeCategories",
+        "type": "string[]",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Controlled list of active category keys."
+      },
+      {
+        "name": "onCategoryToggle",
+        "type": "(category: string) => void",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Callback fired when user clicks a legend item to toggle category visibility."
+      },
+      {
+        "name": "sliceClassName",
+        "type": "string",
+        "optional": true,
+        "defaultValue": null,
+        "description": "Additional CSS class applied to each SVG path slice."
+      }
+    ],
+    "cva": null,
+    "usageSnippet": "<DonutChart\n  data={trafficSourcesData.slice(0, 3)}\n  category=\"source\"\n  value=\"visitors\"\n  size=\"sm\"\n  centerLabel={<span className=\"text-xs font-bold\">SM</span>}\n/>"
   }
 ]