@kjaniec-dev/ui-mcp 0.8.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/data/components.json +2137 -274
  2. package/dist/index.js +4 -2
  3. package/dist/index.js.map +1 -1
  4. package/package.json +5 -3
package/data/components.json CHANGED
@@ -62,7 +62,7 @@
62
62
  "size": "md"
63
63
  }
64
64
  },
65
- "usageSnippet": "<Button variant=\"primary\">Primary</Button>"
65
+ "usageSnippet": "<Button size=\"sm\">Get Started</Button>"
66
66
  },
67
67
  {
68
68
  "name": "Badge",
@@ -191,6 +191,136 @@
191
191
  "cva": null,
192
192
  "usageSnippet": "<Progress {...args} />"
193
193
  },
194
+ {
195
+ "name": "ProgressRing",
196
+ "importPath": "import { ProgressRing } from \"@kjaniec-dev/ui\";",
197
+ "description": "React component ProgressRing.",
198
+ "props": [
199
+ {
200
+ "name": "value",
201
+ "type": "number",
202
+ "optional": true,
203
+ "defaultValue": "0",
204
+ "description": "Current progress value. Defaults to 0."
205
+ },
206
+ {
207
+ "name": "min",
208
+ "type": "number",
209
+ "optional": true,
210
+ "defaultValue": "0",
211
+ "description": "Minimum progress value. Defaults to 0."
212
+ },
213
+ {
214
+ "name": "max",
215
+ "type": "number",
216
+ "optional": true,
217
+ "defaultValue": "100",
218
+ "description": "Maximum progress value. Defaults to 100."
219
+ },
220
+ {
221
+ "name": "size",
222
+ "type": "ProgressRingSize",
223
+ "optional": true,
224
+ "defaultValue": "\"md\"",
225
+ "description": "Preset size of the ring. Defaults to \"md\"."
226
+ },
227
+ {
228
+ "name": "strokeWidth",
229
+ "type": "number",
230
+ "optional": true,
231
+ "defaultValue": null,
232
+ "description": "Override stroke thickness (in px)."
233
+ },
234
+ {
235
+ "name": "tone",
236
+ "type": "ProgressRingTone",
237
+ "optional": true,
238
+ "defaultValue": "\"primary\"",
239
+ "description": "Color tone of the progress indicator. Defaults to \"primary\"."
240
+ },
241
+ {
242
+ "name": "showValue",
243
+ "type": "boolean",
244
+ "optional": true,
245
+ "defaultValue": "false",
246
+ "description": "Whether to show the percentage text inside the ring center if no children are provided. Defaults to false."
247
+ },
248
+ {
249
+ "name": "formatValue",
250
+ "type": "(value: number, percentage: number) => React.ReactNode",
251
+ "optional": true,
252
+ "defaultValue": null,
253
+ "description": "Optional formatter for the center percentage display."
254
+ },
255
+ {
256
+ "name": "trackClassName",
257
+ "type": "string",
258
+ "optional": true,
259
+ "defaultValue": null,
260
+ "description": "Additional CSS class for the background track circle."
261
+ },
262
+ {
263
+ "name": "indicatorClassName",
264
+ "type": "string",
265
+ "optional": true,
266
+ "defaultValue": null,
267
+ "description": "Additional CSS class for the progress indicator circle."
268
+ },
269
+ {
270
+ "name": "children",
271
+ "type": "React.ReactNode",
272
+ "optional": true,
273
+ "defaultValue": null,
274
+ "description": "Custom center content."
275
+ }
276
+ ],
277
+ "cva": null,
278
+ "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>"
279
+ },
280
+ {
281
+ "name": "ProgressRingField",
282
+ "importPath": "import { ProgressRingField } from \"@kjaniec-dev/ui\";",
283
+ "description": "React component ProgressRingField.",
284
+ "props": [
285
+ {
286
+ "name": "label",
287
+ "type": "string",
288
+ "optional": false,
289
+ "defaultValue": null,
290
+ "description": "Field label text."
291
+ },
292
+ {
293
+ "name": "hint",
294
+ "type": "string",
295
+ "optional": true,
296
+ "defaultValue": null,
297
+ "description": "Helper hint text displayed beneath the control."
298
+ },
299
+ {
300
+ "name": "error",
301
+ "type": "string",
302
+ "optional": true,
303
+ "defaultValue": null,
304
+ "description": "Error message displayed beneath the control."
305
+ },
306
+ {
307
+ "name": "required",
308
+ "type": "boolean",
309
+ "optional": true,
310
+ "defaultValue": null,
311
+ "description": "Renders a required indicator (*)."
312
+ },
313
+ {
314
+ "name": "fieldClassName",
315
+ "type": "string",
316
+ "optional": true,
317
+ "defaultValue": null,
318
+ "description": "Class name for the outer field wrapper div."
319
+ }
320
+ ],
321
+ "cva": null,
322
+ "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/>"
323
+ },
194
324
  {
195
325
  "name": "Input",
196
326
  "importPath": "import { Input } from \"@kjaniec-dev/ui\";",
@@ -305,7 +435,7 @@
305
435
  "description": "Vertical label + control + hint group.",
306
436
  "props": [],
307
437
  "cva": null,
308
- "usageSnippet": "<Field>\n<Label required>Full name</Label>\n<Input placeholder=\"Jane Doe\" />"
438
+ "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>"
309
439
  },
310
440
  {
311
441
  "name": "Select",
@@ -490,6 +620,57 @@
490
620
  "cva": null,
491
621
  "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/>"
492
622
  },
623
+ {
624
+ "name": "ToggleGroup",
625
+ "importPath": "import { ToggleGroup } from \"@kjaniec-dev/ui\";",
626
+ "description": "Multi-select toggle row. Always controlled — each button's pressed state is independent.",
627
+ "props": [
628
+ {
629
+ "name": "options",
630
+ "type": "ToggleGroupOption<T>[]",
631
+ "optional": false,
632
+ "defaultValue": null,
633
+ "description": ""
634
+ },
635
+ {
636
+ "name": "value",
637
+ "type": "T[]",
638
+ "optional": false,
639
+ "defaultValue": null,
640
+ "description": ""
641
+ },
642
+ {
643
+ "name": "onChange",
644
+ "type": "(value: T[]) => void",
645
+ "optional": false,
646
+ "defaultValue": null,
647
+ "description": ""
648
+ },
649
+ {
650
+ "name": "disabled",
651
+ "type": "boolean",
652
+ "optional": true,
653
+ "defaultValue": null,
654
+ "description": ""
655
+ },
656
+ {
657
+ "name": "className",
658
+ "type": "string",
659
+ "optional": true,
660
+ "defaultValue": null,
661
+ "description": ""
662
+ },
663
+ {
664
+ "name": "\"aria-label\"",
665
+ "type": "string",
666
+ "optional": false,
667
+ "defaultValue": null,
668
+ "description": ""
669
+ }
670
+ ],
671
+ "cva": null,
672
+ "usageSnippet": "<ToggleGroup options={options} value={value} onChange={setValue} aria-label=\"Text formatting\" />"
673
+ },
493
674
  {
494
675
  "name": "Card",
495
676
  "importPath": "import { Card } from \"@kjaniec-dev/ui\";",
@@ -518,7 +699,7 @@
518
699
  }
519
700
  ],
520
701
  "cva": null,
521
- "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>"
702
+ "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>"
522
703
  },
523
704
  {
524
705
  "name": "CardHeader",
@@ -526,7 +707,7 @@
526
707
  "description": "React component CardHeader.",
527
708
  "props": [],
528
709
  "cva": null,
529
- "usageSnippet": "<CardHeader>\n <CardTitle>Semantic Article Card</CardTitle>\n <CardDescription>This card renders as an &lt;article&gt; element.</CardDescription>\n</CardHeader>"
710
+ "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>"
530
711
  },
531
712
  {
532
713
  "name": "CardTitle",
@@ -839,7 +1020,7 @@
839
1020
  }
840
1021
  ],
841
1022
  "cva": null,
842
- "usageSnippet": "<DropdownMenu>\n<DropdownMenuTrigger>\n <Button variant=\"outline\">Actions</Button>\n</DropdownMenuTrigger>\n<DropdownMenuContent>\n <DropdownMenuItem>Edit</DropdownMenuItem>\n <DropdownMenuItem>Duplicate</DropdownMenuItem>\n <DropdownMenuSeparator />"
1023
+ "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>"
843
1024
  },
844
1025
  {
845
1026
  "name": "DropdownMenuTrigger",
@@ -863,7 +1044,7 @@
863
1044
  }
864
1045
  ],
865
1046
  "cva": null,
866
- "usageSnippet": "<DropdownMenuContent>\n<DropdownMenuItem>Edit</DropdownMenuItem>\n<DropdownMenuItem>Duplicate</DropdownMenuItem>\n<DropdownMenuSeparator />"
1047
+ "usageSnippet": "<DropdownMenuContent>\n <DropdownMenuItem>Edit</DropdownMenuItem>\n <DropdownMenuItem>Duplicate</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem danger>Delete</DropdownMenuItem>\n</DropdownMenuContent>"
867
1048
  },
868
1049
  {
869
1050
  "name": "DropdownMenuItem",
@@ -910,7 +1091,7 @@
910
1091
  }
911
1092
  ],
912
1093
  "cva": null,
913
- "usageSnippet": "<Breadcrumb>\n<BreadcrumbItem href=\"#\">Workspace</BreadcrumbItem>\n<BreadcrumbSeparator />"
1094
+ "usageSnippet": "<Breadcrumb>\n <BreadcrumbItem href=\"#\">Workspace</BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem href=\"#\">Projects</BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem current>Q3 Launch</BreadcrumbItem>\n</Breadcrumb>"
914
1095
  },
915
1096
  {
916
1097
  "name": "BreadcrumbItem",
@@ -1010,64 +1191,6 @@
1010
1191
  "cva": null,
1011
1192
  "usageSnippet": "<BottomNavigation items={navItems} fixed={false} showLabels=\"always\" />"
1012
1193
  },
1013
- {
1014
- "name": "BottomNavigationItem",
1015
- "importPath": "import { BottomNavigationItem } from \"@kjaniec-dev/ui\";",
1016
- "description": "React component BottomNavigationItem.",
1017
- "props": [
1018
- {
1019
- "name": "id",
1020
- "type": "string",
1021
- "optional": false,
1022
- "defaultValue": null,
1023
- "description": ""
1024
- },
1025
- {
1026
- "name": "label",
1027
- "type": "string",
1028
- "optional": false,
1029
- "defaultValue": null,
1030
- "description": ""
1031
- },
1032
- {
1033
- "name": "href",
1034
- "type": "string",
1035
- "optional": true,
1036
- "defaultValue": null,
1037
- "description": ""
1038
- },
1039
- {
1040
- "name": "onClick",
1041
- "type": "() => void",
1042
- "optional": true,
1043
- "defaultValue": null,
1044
- "description": ""
1045
- },
1046
- {
1047
- "name": "icon",
1048
- "type": "React.ReactNode",
1049
- "optional": false,
1050
- "defaultValue": null,
1051
- "description": ""
1052
- },
1053
- {
1054
- "name": "active",
1055
- "type": "boolean",
1056
- "optional": true,
1057
- "defaultValue": null,
1058
- "description": ""
1059
- },
1060
- {
1061
- "name": "badge",
1062
- "type": "React.ReactNode",
1063
- "optional": true,
1064
- "defaultValue": null,
1065
- "description": ""
1066
- }
1067
- ],
1068
- "cva": null,
1069
- "usageSnippet": "<BottomNavigationItem>\n <!-- Content -->\n</BottomNavigationItem>"
1070
- },
1071
1194
  {
1072
1195
  "name": "Table",
1073
1196
  "importPath": "import { Table } from \"@kjaniec-dev/ui\";",
@@ -1251,7 +1374,7 @@
1251
1374
  "description": "React component ToastProvider.",
1252
1375
  "props": [],
1253
1376
  "cva": null,
1254
- "usageSnippet": "<ToastProvider>\n<ToastDemo />"
1377
+ "usageSnippet": "<ToastProvider>\n <ToastDemo />\n</ToastProvider>"
1255
1378
  },
1256
1379
  {
1257
1380
  "name": "PageHeader",
@@ -1290,6 +1413,64 @@
1290
1413
  "cva": null,
1291
1414
  "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/>"
1292
1415
  },
1416
+ {
1417
+ "name": "SectionHeader",
1418
+ "importPath": "import { SectionHeader } from \"@kjaniec-dev/ui\";",
1419
+ "description": "React component SectionHeader.",
1420
+ "props": [
1421
+ {
1422
+ "name": "kicker",
1423
+ "type": "React.ReactNode",
1424
+ "optional": true,
1425
+ "defaultValue": null,
1426
+ "description": ""
1427
+ },
1428
+ {
1429
+ "name": "title",
1430
+ "type": "React.ReactNode",
1431
+ "optional": true,
1432
+ "defaultValue": null,
1433
+ "description": ""
1434
+ },
1435
+ {
1436
+ "name": "description",
1437
+ "type": "React.ReactNode",
1438
+ "optional": true,
1439
+ "defaultValue": null,
1440
+ "description": ""
1441
+ },
1442
+ {
1443
+ "name": "actions",
1444
+ "type": "React.ReactNode",
1445
+ "optional": true,
1446
+ "defaultValue": null,
1447
+ "description": ""
1448
+ },
1449
+ {
1450
+ "name": "align",
1451
+ "type": "SectionHeaderAlign",
1452
+ "optional": true,
1453
+ "defaultValue": null,
1454
+ "description": ""
1455
+ },
1456
+ {
1457
+ "name": "headingLevel",
1458
+ "type": "SectionHeaderHeadingLevel",
1459
+ "optional": true,
1460
+ "defaultValue": null,
1461
+ "description": ""
1462
+ },
1463
+ {
1464
+ "name": "divider",
1465
+ "type": "boolean",
1466
+ "optional": true,
1467
+ "defaultValue": null,
1468
+ "description": ""
1469
+ }
1470
+ ],
1471
+ "cva": null,
1472
+ "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>"
1473
+ },
1293
1474
  {
1294
1475
  "name": "EmptyState",
1295
1476
  "importPath": "import { EmptyState } from \"@kjaniec-dev/ui\";",
@@ -1500,85 +1681,34 @@
1500
1681
  "usageSnippet": "<DataTable columns={columns} data={sampleData} />"
1501
1682
  },
1502
1683
  {
1503
- "name": "DataTableColumn",
1504
- "importPath": "import { DataTableColumn } from \"@kjaniec-dev/ui\";",
1505
- "description": "React component DataTableColumn.",
1684
+ "name": "FormField",
1685
+ "importPath": "import { FormField } from \"@kjaniec-dev/ui\";",
1686
+ "description": "React component FormField.",
1506
1687
  "props": [
1507
1688
  {
1508
- "name": "header",
1509
- "type": "React.ReactNode",
1689
+ "name": "label",
1690
+ "type": "string",
1510
1691
  "optional": false,
1511
1692
  "defaultValue": null,
1512
1693
  "description": ""
1513
1694
  },
1514
1695
  {
1515
- "name": "accessor",
1516
- "type": "(row: T) => React.ReactNode",
1517
- "optional": false,
1696
+ "name": "hint",
1697
+ "type": "string",
1698
+ "optional": true,
1518
1699
  "defaultValue": null,
1519
1700
  "description": ""
1520
1701
  },
1521
1702
  {
1522
- "name": "className",
1703
+ "name": "error",
1523
1704
  "type": "string",
1524
1705
  "optional": true,
1525
1706
  "defaultValue": null,
1526
1707
  "description": ""
1527
1708
  },
1528
1709
  {
1529
- "name": "align",
1530
- "type": "\"left\" | \"center\" | \"right\"",
1531
- "optional": true,
1532
- "defaultValue": null,
1533
- "description": ""
1534
- },
1535
- {
1536
- "name": "sortable",
1537
- "type": "boolean",
1538
- "optional": true,
1539
- "defaultValue": null,
1540
- "description": ""
1541
- },
1542
- {
1543
- "name": "sortKey",
1544
- "type": "string",
1545
- "optional": true,
1546
- "defaultValue": null,
1547
- "description": ""
1548
- }
1549
- ],
1550
- "cva": null,
1551
- "usageSnippet": "<DataTableColumn>\n <!-- Content -->\n</DataTableColumn>"
1552
- },
1553
- {
1554
- "name": "FormField",
1555
- "importPath": "import { FormField } from \"@kjaniec-dev/ui\";",
1556
- "description": "React component FormField.",
1557
- "props": [
1558
- {
1559
- "name": "label",
1560
- "type": "string",
1561
- "optional": false,
1562
- "defaultValue": null,
1563
- "description": ""
1564
- },
1565
- {
1566
- "name": "hint",
1567
- "type": "string",
1568
- "optional": true,
1569
- "defaultValue": null,
1570
- "description": ""
1571
- },
1572
- {
1573
- "name": "error",
1574
- "type": "string",
1575
- "optional": true,
1576
- "defaultValue": null,
1577
- "description": ""
1578
- },
1579
- {
1580
- "name": "required",
1581
- "type": "boolean",
1710
+ "name": "required",
1711
+ "type": "boolean",
1582
1712
  "optional": true,
1583
1713
  "defaultValue": null,
1584
1714
  "description": ""
@@ -1592,7 +1722,7 @@
1592
1722
  }
1593
1723
  ],
1594
1724
  "cva": null,
1595
- "usageSnippet": "<FormField label=\"Full Name\">\n<Input placeholder=\"John Doe\" />"
1725
+ "usageSnippet": "<FormField label=\"Full Name\">\n <Input placeholder=\"John Doe\" />\n</FormField>"
1596
1726
  },
1597
1727
  {
1598
1728
  "name": "ErrorState",
@@ -1717,7 +1847,7 @@
1717
1847
  }
1718
1848
  ],
1719
1849
  "cva": null,
1720
- "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 />"
1850
+ "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>"
1721
1851
  },
1722
1852
  {
1723
1853
  "name": "SettingsLayout",
@@ -1754,7 +1884,7 @@
1754
1884
  }
1755
1885
  ],
1756
1886
  "cva": null,
1757
- "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\" />"
1887
+ "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>"
1758
1888
  },
1759
1889
  {
1760
1890
  "name": "DetailPageLayout",
@@ -1819,7 +1949,7 @@
1819
1949
  }
1820
1950
  ],
1821
1951
  "cva": null,
1822
- "usageSnippet": "<DetailPageLayout\ntitle=\"Transaction #TRN-9022\"\ndescription=\"Captured via Stripe checkout flow.\"\nbackLabel=\"Back to payments\"\nonBackClick={() => alert(\"Back\")}\nactions={\n <>\n <Button variant=\"outline\" size=\"sm\">Refund</Button>\n <Button size=\"sm\">Receipt</Button>\n </>"
1952
+ "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>"
1823
1953
  },
1824
1954
  {
1825
1955
  "name": "TableToolbar",
@@ -1993,7 +2123,7 @@
1993
2123
  }
1994
2124
  ],
1995
2125
  "cva": null,
1996
- "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\" />"
2126
+ "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>"
1997
2127
  },
1998
2128
  {
1999
2129
  "name": "CommandPalette",
@@ -2032,64 +2162,6 @@
2032
2162
  "cva": null,
2033
2163
  "usageSnippet": "<CommandPalette open={open} onClose={() => setOpen(false)} items={items} />"
2034
2164
  },
2035
- {
2036
- "name": "CommandPaletteItem",
2037
- "importPath": "import { CommandPaletteItem } from \"@kjaniec-dev/ui\";",
2038
- "description": "React component CommandPaletteItem.",
2039
- "props": [
2040
- {
2041
- "name": "id",
2042
- "type": "string",
2043
- "optional": false,
2044
- "defaultValue": null,
2045
- "description": ""
2046
- },
2047
- {
2048
- "name": "title",
2049
- "type": "string",
2050
- "optional": false,
2051
- "defaultValue": null,
2052
- "description": ""
2053
- },
2054
- {
2055
- "name": "subtitle",
2056
- "type": "string",
2057
- "optional": true,
2058
- "defaultValue": null,
2059
- "description": ""
2060
- },
2061
- {
2062
- "name": "category",
2063
- "type": "string",
2064
- "optional": true,
2065
- "defaultValue": null,
2066
- "description": ""
2067
- },
2068
- {
2069
- "name": "shortcut",
2070
- "type": "string[]",
2071
- "optional": true,
2072
- "defaultValue": null,
2073
- "description": ""
2074
- },
2075
- {
2076
- "name": "action",
2077
- "type": "() => void",
2078
- "optional": false,
2079
- "defaultValue": null,
2080
- "description": ""
2081
- },
2082
- {
2083
- "name": "icon",
2084
- "type": "React.ReactNode",
2085
- "optional": true,
2086
- "defaultValue": null,
2087
- "description": ""
2088
- }
2089
- ],
2090
- "cva": null,
2091
- "usageSnippet": "<CommandPaletteItem>\n <!-- Content -->\n</CommandPaletteItem>"
2092
- },
2093
2165
  {
2094
2166
  "name": "SidebarNav",
2095
2167
  "importPath": "import { SidebarNav } from \"@kjaniec-dev/ui\";",
@@ -2113,87 +2185,6 @@
2113
2185
  "cva": null,
2114
2186
  "usageSnippet": "<SidebarNav>\n <!-- Content -->\n</SidebarNav>"
2115
2187
  },
2116
- {
2117
- "name": "SidebarNavItem",
2118
- "importPath": "import { SidebarNavItem } from \"@kjaniec-dev/ui\";",
2119
- "description": "React component SidebarNavItem.",
2120
- "props": [
2121
- {
2122
- "name": "id",
2123
- "type": "string",
2124
- "optional": false,
2125
- "defaultValue": null,
2126
- "description": ""
2127
- },
2128
- {
2129
- "name": "label",
2130
- "type": "string",
2131
- "optional": false,
2132
- "defaultValue": null,
2133
- "description": ""
2134
- },
2135
- {
2136
- "name": "href",
2137
- "type": "string",
2138
- "optional": true,
2139
- "defaultValue": null,
2140
- "description": ""
2141
- },
2142
- {
2143
- "name": "onClick",
2144
- "type": "() => void",
2145
- "optional": true,
2146
- "defaultValue": null,
2147
- "description": ""
2148
- },
2149
- {
2150
- "name": "active",
2151
- "type": "boolean",
2152
- "optional": true,
2153
- "defaultValue": null,
2154
- "description": ""
2155
- },
2156
- {
2157
- "name": "icon",
2158
- "type": "React.ReactNode",
2159
- "optional": true,
2160
- "defaultValue": null,
2161
- "description": ""
2162
- },
2163
- {
2164
- "name": "badge",
2165
- "type": "React.ReactNode",
2166
- "optional": true,
2167
- "defaultValue": null,
2168
- "description": ""
2169
- }
2170
- ],
2171
- "cva": null,
2172
- "usageSnippet": "<SidebarNavItem>\n <!-- Content -->\n</SidebarNavItem>"
2173
- },
2174
- {
2175
- "name": "SidebarNavGroup",
2176
- "importPath": "import { SidebarNavGroup } from \"@kjaniec-dev/ui\";",
2177
- "description": "React component SidebarNavGroup.",
2178
- "props": [
2179
- {
2180
- "name": "title",
2181
- "type": "string",
2182
- "optional": true,
2183
- "defaultValue": null,
2184
- "description": ""
2185
- },
2186
- {
2187
- "name": "items",
2188
- "type": "SidebarNavItem[]",
2189
- "optional": false,
2190
- "defaultValue": null,
2191
- "description": ""
2192
- }
2193
- ],
2194
- "cva": null,
2195
- "usageSnippet": "<SidebarNavGroup>\n <!-- Content -->\n</SidebarNavGroup>"
2196
- },
2197
2188
  {
2198
2189
  "name": "Fab",
2199
2190
  "importPath": "import { Fab } from \"@kjaniec-dev/ui\";",
@@ -2399,7 +2390,7 @@
2399
2390
  "size": "sm"
2400
2391
  }
2401
2392
  },
2402
- "usageSnippet": "<Kbd keys={[\"⌘\", \"K\"]} />"
2393
+ "usageSnippet": "<Kbd keys={[\"⌘\", \"K\"]} />\n<Kbd keys={[\"⌘\", \"Shift\", \"P\"]} size=\"md\" />\n<Kbd>Esc</Kbd>"
2403
2394
  },
2404
2395
  {
2405
2396
  "name": "CodeBlock",
@@ -2445,6 +2436,36 @@
2445
2436
  "cva": null,
2446
2437
  "usageSnippet": "<CodeBlock>\n <!-- Content -->\n</CodeBlock>"
2447
2438
  },
2439
+ {
2440
+ "name": "Separator",
2441
+ "importPath": "import { Separator } from \"@kjaniec-dev/ui\";",
2442
+ "description": "Thin layout divider. Decorative by default; pass decorative={false} for a semantic role=\"separator\".",
2443
+ "props": [
2444
+ {
2445
+ "name": "orientation",
2446
+ "type": "\"horizontal\" | \"vertical\"",
2447
+ "optional": true,
2448
+ "defaultValue": "\"horizontal\"",
2449
+ "description": ""
2450
+ },
2451
+ {
2452
+ "name": "decorative",
2453
+ "type": "boolean",
2454
+ "optional": true,
2455
+ "defaultValue": "true",
2456
+ "description": "Purely visual by default (role=\"none\", hidden from a11y tree). Set false for a semantically meaningful divider."
2457
+ },
2458
+ {
2459
+ "name": "className",
2460
+ "type": "string",
2461
+ "optional": true,
2462
+ "defaultValue": null,
2463
+ "description": ""
2464
+ }
2465
+ ],
2466
+ "cva": null,
2467
+ "usageSnippet": "<Separator className=\"my-3\" />"
2468
+ },
2448
2469
  {
2449
2470
  "name": "Popover",
2450
2471
  "importPath": "import { Popover } from \"@kjaniec-dev/ui\";",
@@ -2511,6 +2532,1848 @@
2511
2532
  }
2512
2533
  ],
2513
2534
  "cva": null,
2514
- "usageSnippet": "<PopoverContent side={side} align=\"center\" className=\"w-40\">\n <p className=\"m-0 text-sm\">side=\"{side}\"</p>\n</PopoverContent>"
2535
+ "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>"
2536
+ },
2537
+ {
2538
+ "name": "Combobox",
2539
+ "importPath": "import { Combobox } from \"@kjaniec-dev/ui\";",
2540
+ "description": "React component Combobox.",
2541
+ "props": [
2542
+ {
2543
+ "name": "value",
2544
+ "type": "string",
2545
+ "optional": false,
2546
+ "defaultValue": null,
2547
+ "description": ""
2548
+ },
2549
+ {
2550
+ "name": "label",
2551
+ "type": "string",
2552
+ "optional": false,
2553
+ "defaultValue": null,
2554
+ "description": ""
2555
+ },
2556
+ {
2557
+ "name": "disabled",
2558
+ "type": "boolean",
2559
+ "optional": true,
2560
+ "defaultValue": null,
2561
+ "description": ""
2562
+ }
2563
+ ],
2564
+ "cva": null,
2565
+ "usageSnippet": "<Combobox options={frameworks} value={value} onChange={setValue} placeholder=\"Select a framework…\" />"
2566
+ },
2567
+ {
2568
+ "name": "ComboboxField",
2569
+ "importPath": "import { ComboboxField } from \"@kjaniec-dev/ui\";",
2570
+ "description": "React component ComboboxField.",
2571
+ "props": [],
2572
+ "cva": null,
2573
+ "usageSnippet": "<ComboboxField\n options={frameworks}\n label=\"Primary framework\"\n required\n hint=\"You can change this later.\"\n/>"
2574
+ },
2575
+ {
2576
+ "name": "Calendar",
2577
+ "importPath": "import { Calendar } from \"@kjaniec-dev/ui\";",
2578
+ "description": "React component Calendar.",
2579
+ "props": [
2580
+ {
2581
+ "name": "value",
2582
+ "type": "Date",
2583
+ "optional": true,
2584
+ "defaultValue": null,
2585
+ "description": ""
2586
+ },
2587
+ {
2588
+ "name": "defaultValue",
2589
+ "type": "Date",
2590
+ "optional": true,
2591
+ "defaultValue": null,
2592
+ "description": ""
2593
+ },
2594
+ {
2595
+ "name": "onChange",
2596
+ "type": "(date: Date) => void",
2597
+ "optional": true,
2598
+ "defaultValue": null,
2599
+ "description": ""
2600
+ },
2601
+ {
2602
+ "name": "month",
2603
+ "type": "Date",
2604
+ "optional": true,
2605
+ "defaultValue": null,
2606
+ "description": "Controlled displayed month. Omit for uncontrolled behavior."
2607
+ },
2608
+ {
2609
+ "name": "defaultMonth",
2610
+ "type": "Date",
2611
+ "optional": true,
2612
+ "defaultValue": null,
2613
+ "description": "Initial displayed month when uncontrolled. Defaults to `value` ?? today."
2614
+ },
2615
+ {
2616
+ "name": "onMonthChange",
2617
+ "type": "(month: Date) => void",
2618
+ "optional": true,
2619
+ "defaultValue": null,
2620
+ "description": ""
2621
+ },
2622
+ {
2623
+ "name": "min",
2624
+ "type": "Date",
2625
+ "optional": true,
2626
+ "defaultValue": null,
2627
+ "description": ""
2628
+ },
2629
+ {
2630
+ "name": "max",
2631
+ "type": "Date",
2632
+ "optional": true,
2633
+ "defaultValue": null,
2634
+ "description": ""
2635
+ },
2636
+ {
2637
+ "name": "disabledDates",
2638
+ "type": "(date: Date) => boolean",
2639
+ "optional": true,
2640
+ "defaultValue": null,
2641
+ "description": ""
2642
+ },
2643
+ {
2644
+ "name": "className",
2645
+ "type": "string",
2646
+ "optional": true,
2647
+ "defaultValue": null,
2648
+ "description": ""
2649
+ }
2650
+ ],
2651
+ "cva": null,
2652
+ "usageSnippet": "<Calendar value={value} onChange={setValue} />"
2653
+ },
2654
+ {
2655
+ "name": "DatePicker",
2656
+ "importPath": "import { DatePicker } from \"@kjaniec-dev/ui\";",
2657
+ "description": "React component DatePicker.",
2658
+ "props": [
2659
+ {
2660
+ "name": "value",
2661
+ "type": "Date",
2662
+ "optional": true,
2663
+ "defaultValue": null,
2664
+ "description": ""
2665
+ },
2666
+ {
2667
+ "name": "defaultValue",
2668
+ "type": "Date",
2669
+ "optional": true,
2670
+ "defaultValue": null,
2671
+ "description": ""
2672
+ },
2673
+ {
2674
+ "name": "onChange",
2675
+ "type": "(date: Date) => void",
2676
+ "optional": true,
2677
+ "defaultValue": null,
2678
+ "description": ""
2679
+ },
2680
+ {
2681
+ "name": "min",
2682
+ "type": "Date",
2683
+ "optional": true,
2684
+ "defaultValue": null,
2685
+ "description": ""
2686
+ },
2687
+ {
2688
+ "name": "max",
2689
+ "type": "Date",
2690
+ "optional": true,
2691
+ "defaultValue": null,
2692
+ "description": ""
2693
+ },
2694
+ {
2695
+ "name": "disabledDates",
2696
+ "type": "(date: Date) => boolean",
2697
+ "optional": true,
2698
+ "defaultValue": null,
2699
+ "description": ""
2700
+ },
2701
+ {
2702
+ "name": "placeholder",
2703
+ "type": "string",
2704
+ "optional": true,
2705
+ "defaultValue": "\"Pick a date…\"",
2706
+ "description": "Trigger text when nothing is selected. Default \"Pick a date…\"."
2707
+ },
2708
+ {
2709
+ "name": "disabled",
2710
+ "type": "boolean",
2711
+ "optional": true,
2712
+ "defaultValue": "false",
2713
+ "description": ""
2714
+ },
2715
+ {
2716
+ "name": "error",
2717
+ "type": "boolean",
2718
+ "optional": true,
2719
+ "defaultValue": "false",
2720
+ "description": "Visual error state (red border + aria-invalid on the trigger)."
2721
+ },
2722
+ {
2723
+ "name": "required",
2724
+ "type": "boolean",
2725
+ "optional": true,
2726
+ "defaultValue": "false",
2727
+ "description": "Marks the trigger aria-required (buttons have no native `required` attribute)."
2728
+ },
2729
+ {
2730
+ "name": "className",
2731
+ "type": "string",
2732
+ "optional": true,
2733
+ "defaultValue": null,
2734
+ "description": ""
2735
+ },
2736
+ {
2737
+ "name": "id",
2738
+ "type": "string",
2739
+ "optional": true,
2740
+ "defaultValue": null,
2741
+ "description": ""
2742
+ },
2743
+ {
2744
+ "name": "name",
2745
+ "type": "string",
2746
+ "optional": true,
2747
+ "defaultValue": null,
2748
+ "description": ""
2749
+ },
2750
+ {
2751
+ "name": "\"aria-describedby\"",
2752
+ "type": "string",
2753
+ "optional": true,
2754
+ "defaultValue": null,
2755
+ "description": ""
2756
+ }
2757
+ ],
2758
+ "cva": null,
2759
+ "usageSnippet": "<DatePicker value={value} onChange={setValue} />"
2760
+ },
2761
+ {
2762
+ "name": "DatePickerField",
2763
+ "importPath": "import { DatePickerField } from \"@kjaniec-dev/ui\";",
2764
+ "description": "React component DatePickerField.",
2765
+ "props": [
2766
+ {
2767
+ "name": "label",
2768
+ "type": "string",
2769
+ "optional": false,
2770
+ "defaultValue": null,
2771
+ "description": ""
2772
+ },
2773
+ {
2774
+ "name": "hint",
2775
+ "type": "string",
2776
+ "optional": true,
2777
+ "defaultValue": null,
2778
+ "description": ""
2779
+ },
2780
+ {
2781
+ "name": "error",
2782
+ "type": "string",
2783
+ "optional": true,
2784
+ "defaultValue": null,
2785
+ "description": ""
2786
+ }
2787
+ ],
2788
+ "cva": null,
2789
+ "usageSnippet": "<DatePickerField label=\"Due date\" required hint=\"Weekdays only.\" value={value} onChange={setValue} disabledDates={(d) => d.getDay() === 0 || d.getDay() === 6} />"
2790
+ },
2791
+ {
2792
+ "name": "RangeCalendar",
2793
+ "importPath": "import { RangeCalendar } from \"@kjaniec-dev/ui\";",
2794
+ "description": "React component RangeCalendar.",
2795
+ "props": [
2796
+ {
2797
+ "name": "value",
2798
+ "type": "DateRange",
2799
+ "optional": true,
2800
+ "defaultValue": null,
2801
+ "description": ""
2802
+ },
2803
+ {
2804
+ "name": "defaultValue",
2805
+ "type": "DateRange",
2806
+ "optional": true,
2807
+ "defaultValue": null,
2808
+ "description": ""
2809
+ },
2810
+ {
2811
+ "name": "onChange",
2812
+ "type": "(range: DateRange) => void",
2813
+ "optional": true,
2814
+ "defaultValue": null,
2815
+ "description": ""
2816
+ },
2817
+ {
2818
+ "name": "month",
2819
+ "type": "Date",
2820
+ "optional": true,
2821
+ "defaultValue": null,
2822
+ "description": "Controlled left-month. The right month is always this + 1 (locked navigation)."
2823
+ },
2824
+ {
2825
+ "name": "defaultMonth",
2826
+ "type": "Date",
2827
+ "optional": true,
2828
+ "defaultValue": null,
2829
+ "description": ""
2830
+ },
2831
+ {
2832
+ "name": "onMonthChange",
2833
+ "type": "(month: Date) => void",
2834
+ "optional": true,
2835
+ "defaultValue": null,
2836
+ "description": ""
2837
+ },
2838
+ {
2839
+ "name": "min",
2840
+ "type": "Date",
2841
+ "optional": true,
2842
+ "defaultValue": null,
2843
+ "description": ""
2844
+ },
2845
+ {
2846
+ "name": "max",
2847
+ "type": "Date",
2848
+ "optional": true,
2849
+ "defaultValue": null,
2850
+ "description": ""
2851
+ },
2852
+ {
2853
+ "name": "disabledDates",
2854
+ "type": "(date: Date) => boolean",
2855
+ "optional": true,
2856
+ "defaultValue": null,
2857
+ "description": ""
2858
+ },
2859
+ {
2860
+ "name": "className",
2861
+ "type": "string",
2862
+ "optional": true,
2863
+ "defaultValue": null,
2864
+ "description": ""
2865
+ }
2866
+ ],
2867
+ "cva": null,
2868
+ "usageSnippet": "<RangeCalendar value={value} onChange={setValue} />"
2869
+ },
2870
+ {
2871
+ "name": "DateRangePicker",
2872
+ "importPath": "import { DateRangePicker } from \"@kjaniec-dev/ui\";",
2873
+ "description": "React component DateRangePicker.",
2874
+ "props": [
2875
+ {
2876
+ "name": "value",
2877
+ "type": "DateRange",
2878
+ "optional": true,
2879
+ "defaultValue": null,
2880
+ "description": ""
2881
+ },
2882
+ {
2883
+ "name": "defaultValue",
2884
+ "type": "DateRange",
2885
+ "optional": true,
2886
+ "defaultValue": null,
2887
+ "description": ""
2888
+ },
2889
+ {
2890
+ "name": "onChange",
2891
+ "type": "(range: DateRange) => void",
2892
+ "optional": true,
2893
+ "defaultValue": null,
2894
+ "description": ""
2895
+ },
2896
+ {
2897
+ "name": "min",
2898
+ "type": "Date",
2899
+ "optional": true,
2900
+ "defaultValue": null,
2901
+ "description": ""
2902
+ },
2903
+ {
2904
+ "name": "max",
2905
+ "type": "Date",
2906
+ "optional": true,
2907
+ "defaultValue": null,
2908
+ "description": ""
2909
+ },
2910
+ {
2911
+ "name": "disabledDates",
2912
+ "type": "(date: Date) => boolean",
2913
+ "optional": true,
2914
+ "defaultValue": null,
2915
+ "description": ""
2916
+ },
2917
+ {
2918
+ "name": "placeholder",
2919
+ "type": "string",
2920
+ "optional": true,
2921
+ "defaultValue": "\"Pick a date range…\"",
2922
+ "description": "Trigger text when nothing is selected. Default \"Pick a date range…\"."
2923
+ },
2924
+ {
2925
+ "name": "disabled",
2926
+ "type": "boolean",
2927
+ "optional": true,
2928
+ "defaultValue": "false",
2929
+ "description": ""
2930
+ },
2931
+ {
2932
+ "name": "error",
2933
+ "type": "boolean",
2934
+ "optional": true,
2935
+ "defaultValue": "false",
2936
+ "description": "Visual error state (red border + aria-invalid on the trigger)."
2937
+ },
2938
+ {
2939
+ "name": "required",
2940
+ "type": "boolean",
2941
+ "optional": true,
2942
+ "defaultValue": "false",
2943
+ "description": "Marks the trigger aria-required (buttons have no native `required` attribute)."
2944
+ },
2945
+ {
2946
+ "name": "className",
2947
+ "type": "string",
2948
+ "optional": true,
2949
+ "defaultValue": null,
2950
+ "description": ""
2951
+ },
2952
+ {
2953
+ "name": "id",
2954
+ "type": "string",
2955
+ "optional": true,
2956
+ "defaultValue": null,
2957
+ "description": ""
2958
+ },
2959
+ {
2960
+ "name": "name",
2961
+ "type": "string",
2962
+ "optional": true,
2963
+ "defaultValue": null,
2964
+ "description": ""
2965
+ },
2966
+ {
2967
+ "name": "\"aria-describedby\"",
2968
+ "type": "string",
2969
+ "optional": true,
2970
+ "defaultValue": null,
2971
+ "description": ""
2972
+ }
2973
+ ],
2974
+ "cva": null,
2975
+ "usageSnippet": "<DateRangePicker value={value} onChange={setValue} />"
2976
+ },
2977
+ {
2978
+ "name": "DateRangePickerField",
2979
+ "importPath": "import { DateRangePickerField } from \"@kjaniec-dev/ui\";",
2980
+ "description": "React component DateRangePickerField.",
2981
+ "props": [
2982
+ {
2983
+ "name": "label",
2984
+ "type": "string",
2985
+ "optional": false,
2986
+ "defaultValue": null,
2987
+ "description": ""
2988
+ },
2989
+ {
2990
+ "name": "hint",
2991
+ "type": "string",
2992
+ "optional": true,
2993
+ "defaultValue": null,
2994
+ "description": ""
2995
+ },
2996
+ {
2997
+ "name": "error",
2998
+ "type": "string",
2999
+ "optional": true,
3000
+ "defaultValue": null,
3001
+ "description": ""
3002
+ }
3003
+ ],
3004
+ "cva": null,
3005
+ "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/>"
3006
+ },
3007
+ {
3008
+ "name": "Dropzone",
3009
+ "importPath": "import { Dropzone } from \"@kjaniec-dev/ui\";",
3010
+ "description": "React component Dropzone.",
3011
+ "props": [
3012
+ {
3013
+ "name": "onFiles",
3014
+ "type": "(files: File[]) => void",
3015
+ "optional": false,
3016
+ "defaultValue": null,
3017
+ "description": ""
3018
+ },
3019
+ {
3020
+ "name": "accept",
3021
+ "type": "string",
3022
+ "optional": true,
3023
+ "defaultValue": null,
3024
+ "description": "Native picker filter hint. Real enforcement lives in FileUpload's validation."
3025
+ },
3026
+ {
3027
+ "name": "multiple",
3028
+ "type": "boolean",
3029
+ "optional": true,
3030
+ "defaultValue": "true",
3031
+ "description": ""
3032
+ },
3033
+ {
3034
+ "name": "disabled",
3035
+ "type": "boolean",
3036
+ "optional": true,
3037
+ "defaultValue": "false",
3038
+ "description": ""
3039
+ },
3040
+ {
3041
+ "name": "className",
3042
+ "type": "string",
3043
+ "optional": true,
3044
+ "defaultValue": null,
3045
+ "description": ""
3046
+ },
3047
+ {
3048
+ "name": "children",
3049
+ "type": "React.ReactNode",
3050
+ "optional": true,
3051
+ "defaultValue": null,
3052
+ "description": "Overrides the default drop-region content."
3053
+ },
3054
+ {
3055
+ "name": "id",
3056
+ "type": "string",
3057
+ "optional": true,
3058
+ "defaultValue": null,
3059
+ "description": ""
3060
+ },
3061
+ {
3062
+ "name": "\"aria-describedby\"",
3063
+ "type": "string",
3064
+ "optional": true,
3065
+ "defaultValue": null,
3066
+ "description": ""
3067
+ },
3068
+ {
3069
+ "name": "\"aria-invalid\"",
3070
+ "type": "boolean | \"true\" | \"false\"",
3071
+ "optional": true,
3072
+ "defaultValue": null,
3073
+ "description": ""
3074
+ },
3075
+ {
3076
+ "name": "\"aria-required\"",
3077
+ "type": "boolean",
3078
+ "optional": true,
3079
+ "defaultValue": null,
3080
+ "description": ""
3081
+ }
3082
+ ],
3083
+ "cva": null,
3084
+ "usageSnippet": "<Dropzone onFiles={(files) => setCount((c) => c + files.length)} />"
3085
+ },
3086
+ {
3087
+ "name": "FileUpload",
3088
+ "importPath": "import { FileUpload } from \"@kjaniec-dev/ui\";",
3089
+ "description": "React component FileUpload.",
3090
+ "props": [
3091
+ {
3092
+ "name": "value",
3093
+ "type": "UploadItem[]",
3094
+ "optional": true,
3095
+ "defaultValue": null,
3096
+ "description": ""
3097
+ },
3098
+ {
3099
+ "name": "defaultValue",
3100
+ "type": "UploadItem[]",
3101
+ "optional": true,
3102
+ "defaultValue": null,
3103
+ "description": ""
3104
+ },
3105
+ {
3106
+ "name": "onChange",
3107
+ "type": "(items: UploadItem[]) => void",
3108
+ "optional": true,
3109
+ "defaultValue": null,
3110
+ "description": ""
3111
+ },
3112
+ {
3113
+ "name": "onReject",
3114
+ "type": "(rejections: FileRejection[]) => void",
3115
+ "optional": true,
3116
+ "defaultValue": null,
3117
+ "description": "Called with files rejected by validation on a given drop/selection."
3118
+ },
3119
+ {
3120
+ "name": "accept",
3121
+ "type": "string",
3122
+ "optional": true,
3123
+ "defaultValue": null,
3124
+ "description": ""
3125
+ },
3126
+ {
3127
+ "name": "maxSize",
3128
+ "type": "number",
3129
+ "optional": true,
3130
+ "defaultValue": null,
3131
+ "description": ""
3132
+ },
3133
+ {
3134
+ "name": "maxFiles",
3135
+ "type": "number",
3136
+ "optional": true,
3137
+ "defaultValue": null,
3138
+ "description": ""
3139
+ },
3140
+ {
3141
+ "name": "multiple",
3142
+ "type": "boolean",
3143
+ "optional": true,
3144
+ "defaultValue": "true",
3145
+ "description": ""
3146
+ },
3147
+ {
3148
+ "name": "disabled",
3149
+ "type": "boolean",
3150
+ "optional": true,
3151
+ "defaultValue": "false",
3152
+ "description": ""
3153
+ },
3154
+ {
3155
+ "name": "error",
3156
+ "type": "boolean",
3157
+ "optional": true,
3158
+ "defaultValue": "false",
3159
+ "description": "Visual error state (danger border + aria-invalid on the dropzone)."
3160
+ },
3161
+ {
3162
+ "name": "required",
3163
+ "type": "boolean",
3164
+ "optional": true,
3165
+ "defaultValue": "false",
3166
+ "description": "aria-required on the dropzone."
3167
+ },
3168
+ {
3169
+ "name": "className",
3170
+ "type": "string",
3171
+ "optional": true,
3172
+ "defaultValue": null,
3173
+ "description": ""
3174
+ },
3175
+ {
3176
+ "name": "id",
3177
+ "type": "string",
3178
+ "optional": true,
3179
+ "defaultValue": null,
3180
+ "description": ""
3181
+ },
3182
+ {
3183
+ "name": "\"aria-describedby\"",
3184
+ "type": "string",
3185
+ "optional": true,
3186
+ "defaultValue": null,
3187
+ "description": ""
3188
+ }
3189
+ ],
3190
+ "cva": null,
3191
+ "usageSnippet": "<FileUpload value={items} onChange={setItems} accept=\"image/*,.pdf\" maxSize={5 * 1024 * 1024} />"
3192
+ },
3193
+ {
3194
+ "name": "FileUploadField",
3195
+ "importPath": "import { FileUploadField } from \"@kjaniec-dev/ui\";",
3196
+ "description": "React component FileUploadField.",
3197
+ "props": [
3198
+ {
3199
+ "name": "label",
3200
+ "type": "string",
3201
+ "optional": false,
3202
+ "defaultValue": null,
3203
+ "description": ""
3204
+ },
3205
+ {
3206
+ "name": "hint",
3207
+ "type": "string",
3208
+ "optional": true,
3209
+ "defaultValue": null,
3210
+ "description": ""
3211
+ },
3212
+ {
3213
+ "name": "error",
3214
+ "type": "string",
3215
+ "optional": true,
3216
+ "defaultValue": null,
3217
+ "description": ""
3218
+ }
3219
+ ],
3220
+ "cva": null,
3221
+ "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/>"
3222
+ },
3223
+ {
3224
+ "name": "Timeline",
3225
+ "importPath": "import { Timeline } from \"@kjaniec-dev/ui\";",
3226
+ "description": "React component Timeline.",
3227
+ "props": [
3228
+ {
3229
+ "name": "align",
3230
+ "type": "TimelineAlign",
3231
+ "optional": true,
3232
+ "defaultValue": "\"left\"",
3233
+ "description": ""
3234
+ }
3235
+ ],
3236
+ "cva": null,
3237
+ "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>"
3238
+ },
3239
+ {
3240
+ "name": "TimelineItem",
3241
+ "importPath": "import { TimelineItem } from \"@kjaniec-dev/ui\";",
3242
+ "description": "React component TimelineItem.",
3243
+ "props": [
3244
+ {
3245
+ "name": "index",
3246
+ "type": "number",
3247
+ "optional": true,
3248
+ "defaultValue": "0",
3249
+ "description": ""
3250
+ }
3251
+ ],
3252
+ "cva": null,
3253
+ "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>"
3254
+ },
3255
+ {
3256
+ "name": "TimelineSeparator",
3257
+ "importPath": "import { TimelineSeparator } from \"@kjaniec-dev/ui\";",
3258
+ "description": "React component TimelineSeparator.",
3259
+ "props": [
3260
+ {
3261
+ "name": "isEven",
3262
+ "type": "boolean",
3263
+ "optional": true,
3264
+ "defaultValue": null,
3265
+ "description": ""
3266
+ },
3267
+ {
3268
+ "name": "align",
3269
+ "type": "TimelineAlign",
3270
+ "optional": true,
3271
+ "defaultValue": null,
3272
+ "description": ""
3273
+ }
3274
+ ],
3275
+ "cva": null,
3276
+ "usageSnippet": "<TimelineSeparator>\n <TimelineDot size=\"sm\" variant=\"success\" />\n <TimelineConnector />\n</TimelineSeparator>"
3277
+ },
3278
+ {
3279
+ "name": "TimelineConnector",
3280
+ "importPath": "import { TimelineConnector } from \"@kjaniec-dev/ui\";",
3281
+ "description": "React component TimelineConnector.",
3282
+ "props": [
3283
+ {
3284
+ "name": "dashed",
3285
+ "type": "boolean",
3286
+ "optional": true,
3287
+ "defaultValue": null,
3288
+ "description": ""
3289
+ }
3290
+ ],
3291
+ "cva": null,
3292
+ "usageSnippet": "<TimelineConnector />"
3293
+ },
3294
+ {
3295
+ "name": "TimelineDot",
3296
+ "importPath": "import { TimelineDot } from \"@kjaniec-dev/ui\";",
3297
+ "description": "React component TimelineDot.",
3298
+ "props": [
3299
+ {
3300
+ "name": "variant",
3301
+ "type": "TimelineDotVariant",
3302
+ "optional": true,
3303
+ "defaultValue": "\"default\"",
3304
+ "description": ""
3305
+ },
3306
+ {
3307
+ "name": "size",
3308
+ "type": "TimelineDotSize",
3309
+ "optional": true,
3310
+ "defaultValue": "\"md\"",
3311
+ "description": ""
3312
+ }
3313
+ ],
3314
+ "cva": null,
3315
+ "usageSnippet": "<TimelineDot size=\"lg\" variant=\"success\">\n ✓\n</TimelineDot>"
3316
+ },
3317
+ {
3318
+ "name": "TimelineContent",
3319
+ "importPath": "import { TimelineContent } from \"@kjaniec-dev/ui\";",
3320
+ "description": "React component TimelineContent.",
3321
+ "props": [
3322
+ {
3323
+ "name": "isEven",
3324
+ "type": "boolean",
3325
+ "optional": true,
3326
+ "defaultValue": null,
3327
+ "description": ""
3328
+ },
3329
+ {
3330
+ "name": "align",
3331
+ "type": "TimelineAlign",
3332
+ "optional": true,
3333
+ "defaultValue": null,
3334
+ "description": ""
3335
+ }
3336
+ ],
3337
+ "cva": null,
3338
+ "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>"
3339
+ },
3340
+ {
3341
+ "name": "TimelineTitle",
3342
+ "importPath": "import { TimelineTitle } from \"@kjaniec-dev/ui\";",
3343
+ "description": "React component TimelineTitle.",
3344
+ "props": [],
3345
+ "cva": null,
3346
+ "usageSnippet": "<TimelineTitle>Database Migrated</TimelineTitle>"
3347
+ },
3348
+ {
3349
+ "name": "TimelineTime",
3350
+ "importPath": "import { TimelineTime } from \"@kjaniec-dev/ui\";",
3351
+ "description": "React component TimelineTime.",
3352
+ "props": [],
3353
+ "cva": null,
3354
+ "usageSnippet": "<TimelineTime>5m ago</TimelineTime>"
3355
+ },
3356
+ {
3357
+ "name": "Stepper",
3358
+ "importPath": "import { Stepper } from \"@kjaniec-dev/ui\";",
3359
+ "description": "React component Stepper.",
3360
+ "props": [
3361
+ {
3362
+ "name": "value",
3363
+ "type": "number",
3364
+ "optional": true,
3365
+ "defaultValue": null,
3366
+ "description": ""
3367
+ },
3368
+ {
3369
+ "name": "defaultValue",
3370
+ "type": "number",
3371
+ "optional": true,
3372
+ "defaultValue": null,
3373
+ "description": ""
3374
+ },
3375
+ {
3376
+ "name": "onValueChange",
3377
+ "type": "(value: number) => void",
3378
+ "optional": true,
3379
+ "defaultValue": null,
3380
+ "description": ""
3381
+ },
3382
+ {
3383
+ "name": "orientation",
3384
+ "type": "StepperOrientation",
3385
+ "optional": true,
3386
+ "defaultValue": "\"horizontal\"",
3387
+ "description": ""
3388
+ },
3389
+ {
3390
+ "name": "linear",
3391
+ "type": "boolean",
3392
+ "optional": true,
3393
+ "defaultValue": "true",
3394
+ "description": ""
3395
+ }
3396
+ ],
3397
+ "cva": null,
3398
+ "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>"
3399
+ },
3400
+ {
3401
+ "name": "StepperList",
3402
+ "importPath": "import { StepperList } from \"@kjaniec-dev/ui\";",
3403
+ "description": "React component StepperList.",
3404
+ "props": [],
3405
+ "cva": null,
3406
+ "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>"
3407
+ },
3408
+ {
3409
+ "name": "StepperItem",
3410
+ "importPath": "import { StepperItem } from \"@kjaniec-dev/ui\";",
3411
+ "description": "React component StepperItem.",
3412
+ "props": [
3413
+ {
3414
+ "name": "value",
3415
+ "type": "number",
3416
+ "optional": false,
3417
+ "defaultValue": null,
3418
+ "description": ""
3419
+ },
3420
+ {
3421
+ "name": "disabled",
3422
+ "type": "boolean",
3423
+ "optional": true,
3424
+ "defaultValue": "false",
3425
+ "description": ""
3426
+ }
3427
+ ],
3428
+ "cva": null,
3429
+ "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>"
3430
+ },
3431
+ {
3432
+ "name": "StepperTrigger",
3433
+ "importPath": "import { StepperTrigger } from \"@kjaniec-dev/ui\";",
3434
+ "description": "React component StepperTrigger.",
3435
+ "props": [],
3436
+ "cva": null,
3437
+ "usageSnippet": "<StepperTrigger>\n <StepperIndicator />\n <div className=\"flex flex-col\">\n <StepperTitle>Profile</StepperTitle>\n <StepperDescription>User details</StepperDescription>\n </div>\n</StepperTrigger>"
3438
+ },
3439
+ {
3440
+ "name": "StepperIndicator",
3441
+ "importPath": "import { StepperIndicator } from \"@kjaniec-dev/ui\";",
3442
+ "description": "React component StepperIndicator.",
3443
+ "props": [],
3444
+ "cva": null,
3445
+ "usageSnippet": "<StepperIndicator />"
3446
+ },
3447
+ {
3448
+ "name": "StepperTitle",
3449
+ "importPath": "import { StepperTitle } from \"@kjaniec-dev/ui\";",
3450
+ "description": "React component StepperTitle.",
3451
+ "props": [],
3452
+ "cva": null,
3453
+ "usageSnippet": "<StepperTitle>Profile</StepperTitle>"
3454
+ },
3455
+ {
3456
+ "name": "StepperDescription",
3457
+ "importPath": "import { StepperDescription } from \"@kjaniec-dev/ui\";",
3458
+ "description": "React component StepperDescription.",
3459
+ "props": [],
3460
+ "cva": null,
3461
+ "usageSnippet": "<StepperDescription>User details</StepperDescription>"
3462
+ },
3463
+ {
3464
+ "name": "StepperSeparator",
3465
+ "importPath": "import { StepperSeparator } from \"@kjaniec-dev/ui\";",
3466
+ "description": "React component StepperSeparator.",
3467
+ "props": [],
3468
+ "cva": null,
3469
+ "usageSnippet": "<StepperSeparator />"
3470
+ },
3471
+ {
3472
+ "name": "StepperContent",
3473
+ "importPath": "import { StepperContent } from \"@kjaniec-dev/ui\";",
3474
+ "description": "React component StepperContent.",
3475
+ "props": [
3476
+ {
3477
+ "name": "value",
3478
+ "type": "number",
3479
+ "optional": false,
3480
+ "defaultValue": null,
3481
+ "description": ""
3482
+ }
3483
+ ],
3484
+ "cva": null,
3485
+ "usageSnippet": "<StepperContent value={0}>\n <p>Step 1 Form Content: Please input username.</p>\n</StepperContent>"
3486
+ },
3487
+ {
3488
+ "name": "AppShell",
3489
+ "importPath": "import { AppShell } from \"@kjaniec-dev/ui\";",
3490
+ "description": "React component AppShell.",
3491
+ "props": [
3492
+ {
3493
+ "name": "banner",
3494
+ "type": "React.ReactNode",
3495
+ "optional": true,
3496
+ "defaultValue": null,
3497
+ "description": ""
3498
+ },
3499
+ {
3500
+ "name": "header",
3501
+ "type": "React.ReactNode",
3502
+ "optional": true,
3503
+ "defaultValue": null,
3504
+ "description": ""
3505
+ },
3506
+ {
3507
+ "name": "children",
3508
+ "type": "React.ReactNode",
3509
+ "optional": true,
3510
+ "defaultValue": null,
3511
+ "description": ""
3512
+ },
3513
+ {
3514
+ "name": "footer",
3515
+ "type": "React.ReactNode",
3516
+ "optional": true,
3517
+ "defaultValue": null,
3518
+ "description": ""
3519
+ },
3520
+ {
3521
+ "name": "contentWidth",
3522
+ "type": "\"default\" | \"narrow\" | \"wide\" | \"full\"",
3523
+ "optional": true,
3524
+ "defaultValue": null,
3525
+ "description": ""
3526
+ },
3527
+ {
3528
+ "name": "headerPosition",
3529
+ "type": "\"sticky\" | \"fixed\" | \"static\"",
3530
+ "optional": true,
3531
+ "defaultValue": null,
3532
+ "description": ""
3533
+ },
3534
+ {
3535
+ "name": "headerVariant",
3536
+ "type": "\"glass\" | \"solid\" | \"transparent\"",
3537
+ "optional": true,
3538
+ "defaultValue": null,
3539
+ "description": ""
3540
+ },
3541
+ {
3542
+ "name": "paddedContent",
3543
+ "type": "boolean",
3544
+ "optional": true,
3545
+ "defaultValue": null,
3546
+ "description": ""
3547
+ },
3548
+ {
3549
+ "name": "mobileNav",
3550
+ "type": "React.ReactNode",
3551
+ "optional": true,
3552
+ "defaultValue": null,
3553
+ "description": ""
3554
+ }
3555
+ ],
3556
+ "cva": null,
3557
+ "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>"
3558
+ },
3559
+ {
3560
+ "name": "AppShellBanner",
3561
+ "importPath": "import { AppShellBanner } from \"@kjaniec-dev/ui\";",
3562
+ "description": "React component AppShellBanner.",
3563
+ "props": [
3564
+ {
3565
+ "name": "variant",
3566
+ "type": "\"primary\" | \"accent\" | \"muted\"",
3567
+ "optional": true,
3568
+ "defaultValue": "\"primary\"",
3569
+ "description": ""
3570
+ },
3571
+ {
3572
+ "name": "closable",
3573
+ "type": "boolean",
3574
+ "optional": true,
3575
+ "defaultValue": null,
3576
+ "description": ""
3577
+ },
3578
+ {
3579
+ "name": "onClose",
3580
+ "type": "() => void",
3581
+ "optional": true,
3582
+ "defaultValue": null,
3583
+ "description": ""
3584
+ },
3585
+ {
3586
+ "name": "children",
3587
+ "type": "React.ReactNode",
3588
+ "optional": false,
3589
+ "defaultValue": null,
3590
+ "description": ""
3591
+ }
3592
+ ],
3593
+ "cva": null,
3594
+ "usageSnippet": "<AppShellBanner>\n <!-- Content -->\n</AppShellBanner>"
3595
+ },
3596
+ {
3597
+ "name": "AppShellHeader",
3598
+ "importPath": "import { AppShellHeader } from \"@kjaniec-dev/ui\";",
3599
+ "description": "React component AppShellHeader.",
3600
+ "props": [
3601
+ {
3602
+ "name": "variant",
3603
+ "type": "\"glass\" | \"solid\" | \"transparent\"",
3604
+ "optional": true,
3605
+ "defaultValue": "\"glass\"",
3606
+ "description": ""
3607
+ },
3608
+ {
3609
+ "name": "position",
3610
+ "type": "\"sticky\" | \"fixed\" | \"static\"",
3611
+ "optional": true,
3612
+ "defaultValue": "\"sticky\"",
3613
+ "description": ""
3614
+ },
3615
+ {
3616
+ "name": "bordered",
3617
+ "type": "boolean",
3618
+ "optional": true,
3619
+ "defaultValue": "true",
3620
+ "description": ""
3621
+ },
3622
+ {
3623
+ "name": "children",
3624
+ "type": "React.ReactNode",
3625
+ "optional": true,
3626
+ "defaultValue": null,
3627
+ "description": ""
3628
+ },
3629
+ {
3630
+ "name": "mobileNav",
3631
+ "type": "React.ReactNode",
3632
+ "optional": true,
3633
+ "defaultValue": null,
3634
+ "description": ""
3635
+ }
3636
+ ],
3637
+ "cva": null,
3638
+ "usageSnippet": "<AppShellHeader>\n <!-- Content -->\n</AppShellHeader>"
3639
+ },
3640
+ {
3641
+ "name": "AppShellMain",
3642
+ "importPath": "import { AppShellMain } from \"@kjaniec-dev/ui\";",
3643
+ "description": "React component AppShellMain.",
3644
+ "props": [
3645
+ {
3646
+ "name": "width",
3647
+ "type": "\"default\" | \"narrow\" | \"wide\" | \"full\"",
3648
+ "optional": true,
3649
+ "defaultValue": "\"default\"",
3650
+ "description": ""
3651
+ },
3652
+ {
3653
+ "name": "padded",
3654
+ "type": "boolean",
3655
+ "optional": true,
3656
+ "defaultValue": "true",
3657
+ "description": ""
3658
+ },
3659
+ {
3660
+ "name": "children",
3661
+ "type": "React.ReactNode",
3662
+ "optional": false,
3663
+ "defaultValue": null,
3664
+ "description": ""
3665
+ }
3666
+ ],
3667
+ "cva": null,
3668
+ "usageSnippet": "<AppShellMain>\n <!-- Content -->\n</AppShellMain>"
3669
+ },
3670
+ {
3671
+ "name": "AppShellFooter",
3672
+ "importPath": "import { AppShellFooter } from \"@kjaniec-dev/ui\";",
3673
+ "description": "React component AppShellFooter.",
3674
+ "props": [
3675
+ {
3676
+ "name": "bordered",
3677
+ "type": "boolean",
3678
+ "optional": true,
3679
+ "defaultValue": "true",
3680
+ "description": ""
3681
+ },
3682
+ {
3683
+ "name": "children",
3684
+ "type": "React.ReactNode",
3685
+ "optional": false,
3686
+ "defaultValue": null,
3687
+ "description": ""
3688
+ }
3689
+ ],
3690
+ "cva": null,
3691
+ "usageSnippet": "<AppShellFooter>\n <!-- Content -->\n</AppShellFooter>"
3692
+ },
3693
+ {
3694
+ "name": "Rating",
3695
+ "importPath": "import { Rating } from \"@kjaniec-dev/ui\";",
3696
+ "description": "React component Rating.",
3697
+ "props": [
3698
+ {
3699
+ "name": "stars",
3700
+ "type": "number",
3701
+ "optional": false,
3702
+ "defaultValue": null,
3703
+ "description": ""
3704
+ },
3705
+ {
3706
+ "name": "count",
3707
+ "type": "number",
3708
+ "optional": false,
3709
+ "defaultValue": null,
3710
+ "description": ""
3711
+ },
3712
+ {
3713
+ "name": "percentage",
3714
+ "type": "number",
3715
+ "optional": false,
3716
+ "defaultValue": null,
3717
+ "description": ""
3718
+ }
3719
+ ],
3720
+ "cva": null,
3721
+ "usageSnippet": "<Rating>\n <!-- Content -->\n</Rating>"
3722
+ },
3723
+ {
3724
+ "name": "RatingField",
3725
+ "importPath": "import { RatingField } from \"@kjaniec-dev/ui\";",
3726
+ "description": "React component RatingField.",
3727
+ "props": [],
3728
+ "cva": null,
3729
+ "usageSnippet": "<RatingField>\n <!-- Content -->\n</RatingField>"
3730
+ },
3731
+ {
3732
+ "name": "RatingSummary",
3733
+ "importPath": "import { RatingSummary } from \"@kjaniec-dev/ui\";",
3734
+ "description": "React component RatingSummary.",
3735
+ "props": [
3736
+ {
3737
+ "name": "average",
3738
+ "type": "number",
3739
+ "optional": false,
3740
+ "defaultValue": null,
3741
+ "description": ""
3742
+ },
3743
+ {
3744
+ "name": "totalCount",
3745
+ "type": "number",
3746
+ "optional": false,
3747
+ "defaultValue": null,
3748
+ "description": ""
3749
+ },
3750
+ {
3751
+ "name": "distribution",
3752
+ "type": "RatingDistributionItem[]",
3753
+ "optional": false,
3754
+ "defaultValue": null,
3755
+ "description": ""
3756
+ },
3757
+ {
3758
+ "name": "max",
3759
+ "type": "number",
3760
+ "optional": true,
3761
+ "defaultValue": "5",
3762
+ "description": ""
3763
+ },
3764
+ {
3765
+ "name": "size",
3766
+ "type": "RatingSize",
3767
+ "optional": true,
3768
+ "defaultValue": "\"md\"",
3769
+ "description": ""
3770
+ },
3771
+ {
3772
+ "name": "icon",
3773
+ "type": "RatingIconType | React.ComponentType<{ className?: string }>",
3774
+ "optional": true,
3775
+ "defaultValue": "\"star\"",
3776
+ "description": ""
3777
+ }
3778
+ ],
3779
+ "cva": null,
3780
+ "usageSnippet": "<RatingSummary>\n <!-- Content -->\n</RatingSummary>"
3781
+ },
3782
+ {
3783
+ "name": "PricingCard",
3784
+ "importPath": "import { PricingCard } from \"@kjaniec-dev/ui\";",
3785
+ "description": "React component PricingCard.",
3786
+ "props": [
3787
+ {
3788
+ "name": "name",
3789
+ "type": "string",
3790
+ "optional": false,
3791
+ "defaultValue": null,
3792
+ "description": ""
3793
+ },
3794
+ {
3795
+ "name": "price",
3796
+ "type": "string | number",
3797
+ "optional": false,
3798
+ "defaultValue": null,
3799
+ "description": ""
3800
+ },
3801
+ {
3802
+ "name": "period",
3803
+ "type": "string",
3804
+ "optional": true,
3805
+ "defaultValue": null,
3806
+ "description": ""
3807
+ },
3808
+ {
3809
+ "name": "description",
3810
+ "type": "string",
3811
+ "optional": true,
3812
+ "defaultValue": null,
3813
+ "description": ""
3814
+ },
3815
+ {
3816
+ "name": "features",
3817
+ "type": "PricingFeatureItem[]",
3818
+ "optional": true,
3819
+ "defaultValue": "[]",
3820
+ "description": ""
3821
+ },
3822
+ {
3823
+ "name": "variant",
3824
+ "type": "\"default\" | \"featured\" | \"outline\"",
3825
+ "optional": true,
3826
+ "defaultValue": null,
3827
+ "description": ""
3828
+ },
3829
+ {
3830
+ "name": "badge",
3831
+ "type": "string",
3832
+ "optional": true,
3833
+ "defaultValue": null,
3834
+ "description": ""
3835
+ },
3836
+ {
3837
+ "name": "popular",
3838
+ "type": "boolean",
3839
+ "optional": true,
3840
+ "defaultValue": "false",
3841
+ "description": ""
3842
+ },
3843
+ {
3844
+ "name": "ctaText",
3845
+ "type": "string",
3846
+ "optional": true,
3847
+ "defaultValue": "\"Get Started\"",
3848
+ "description": ""
3849
+ },
3850
+ {
3851
+ "name": "onCtaClick",
3852
+ "type": "React.MouseEventHandler<HTMLButtonElement>",
3853
+ "optional": true,
3854
+ "defaultValue": null,
3855
+ "description": ""
3856
+ },
3857
+ {
3858
+ "name": "ctaHref",
3859
+ "type": "string",
3860
+ "optional": true,
3861
+ "defaultValue": null,
3862
+ "description": ""
3863
+ },
3864
+ {
3865
+ "name": "cta",
3866
+ "type": "React.ReactNode",
3867
+ "optional": true,
3868
+ "defaultValue": null,
3869
+ "description": ""
3870
+ },
3871
+ {
3872
+ "name": "disabled",
3873
+ "type": "boolean",
3874
+ "optional": true,
3875
+ "defaultValue": "false",
3876
+ "description": ""
3877
+ }
3878
+ ],
3879
+ "cva": null,
3880
+ "usageSnippet": "<PricingCard>\n <!-- Content -->\n</PricingCard>"
3881
+ },
3882
+ {
3883
+ "name": "BlogCard",
3884
+ "importPath": "import { BlogCard } from \"@kjaniec-dev/ui\";",
3885
+ "description": "React component BlogCard.",
3886
+ "props": [
3887
+ {
3888
+ "name": "title",
3889
+ "type": "string",
3890
+ "optional": false,
3891
+ "defaultValue": null,
3892
+ "description": ""
3893
+ },
3894
+ {
3895
+ "name": "description",
3896
+ "type": "string",
3897
+ "optional": true,
3898
+ "defaultValue": null,
3899
+ "description": ""
3900
+ },
3901
+ {
3902
+ "name": "coverUrl",
3903
+ "type": "string",
3904
+ "optional": true,
3905
+ "defaultValue": null,
3906
+ "description": ""
3907
+ },
3908
+ {
3909
+ "name": "coverAlt",
3910
+ "type": "string",
3911
+ "optional": true,
3912
+ "defaultValue": null,
3913
+ "description": ""
3914
+ },
3915
+ {
3916
+ "name": "category",
3917
+ "type": "string",
3918
+ "optional": true,
3919
+ "defaultValue": null,
3920
+ "description": ""
3921
+ },
3922
+ {
3923
+ "name": "readTime",
3924
+ "type": "string",
3925
+ "optional": true,
3926
+ "defaultValue": null,
3927
+ "description": ""
3928
+ },
3929
+ {
3930
+ "name": "publishedAt",
3931
+ "type": "string",
3932
+ "optional": true,
3933
+ "defaultValue": null,
3934
+ "description": ""
3935
+ },
3936
+ {
3937
+ "name": "author",
3938
+ "type": "BlogCardAuthor",
3939
+ "optional": true,
3940
+ "defaultValue": null,
3941
+ "description": ""
3942
+ },
3943
+ {
3944
+ "name": "orientation",
3945
+ "type": "\"vertical\" | \"horizontal\"",
3946
+ "optional": true,
3947
+ "defaultValue": "\"vertical\"",
3948
+ "description": ""
3949
+ },
3950
+ {
3951
+ "name": "href",
3952
+ "type": "string",
3953
+ "optional": true,
3954
+ "defaultValue": null,
3955
+ "description": ""
3956
+ }
3957
+ ],
3958
+ "cva": null,
3959
+ "usageSnippet": "<BlogCard>\n <!-- Content -->\n</BlogCard>"
3960
+ },
3961
+ {
3962
+ "name": "ProjectCard",
3963
+ "importPath": "import { ProjectCard } from \"@kjaniec-dev/ui\";",
3964
+ "description": "React component ProjectCard.",
3965
+ "props": [
3966
+ {
3967
+ "name": "title",
3968
+ "type": "string",
3969
+ "optional": false,
3970
+ "defaultValue": null,
3971
+ "description": ""
3972
+ },
3973
+ {
3974
+ "name": "description",
3975
+ "type": "string",
3976
+ "optional": true,
3977
+ "defaultValue": null,
3978
+ "description": ""
3979
+ },
3980
+ {
3981
+ "name": "status",
3982
+ "type": "ProjectCardStatus",
3983
+ "optional": true,
3984
+ "defaultValue": null,
3985
+ "description": ""
3986
+ },
3987
+ {
3988
+ "name": "techStack",
3989
+ "type": "string[]",
3990
+ "optional": true,
3991
+ "defaultValue": "[]",
3992
+ "description": ""
3993
+ },
3994
+ {
3995
+ "name": "metrics",
3996
+ "type": "ProjectCardMetric[]",
3997
+ "optional": true,
3998
+ "defaultValue": "[]",
3999
+ "description": ""
4000
+ },
4001
+ {
4002
+ "name": "updatedAt",
4003
+ "type": "string",
4004
+ "optional": true,
4005
+ "defaultValue": null,
4006
+ "description": ""
4007
+ },
4008
+ {
4009
+ "name": "actions",
4010
+ "type": "React.ReactNode",
4011
+ "optional": true,
4012
+ "defaultValue": null,
4013
+ "description": ""
4014
+ }
4015
+ ],
4016
+ "cva": null,
4017
+ "usageSnippet": "<ProjectCard>\n <!-- Content -->\n</ProjectCard>"
4018
+ },
4019
+ {
4020
+ "name": "InboxPopover",
4021
+ "importPath": "import { InboxPopover } from \"@kjaniec-dev/ui\";",
4022
+ "description": "React component InboxPopover.",
4023
+ "props": [
4024
+ {
4025
+ "name": "children",
4026
+ "type": "React.ReactNode",
4027
+ "optional": false,
4028
+ "defaultValue": null,
4029
+ "description": ""
4030
+ },
4031
+ {
4032
+ "name": "open",
4033
+ "type": "boolean",
4034
+ "optional": true,
4035
+ "defaultValue": null,
4036
+ "description": ""
4037
+ },
4038
+ {
4039
+ "name": "onOpenChange",
4040
+ "type": "(open: boolean) => void",
4041
+ "optional": true,
4042
+ "defaultValue": null,
4043
+ "description": ""
4044
+ },
4045
+ {
4046
+ "name": "className",
4047
+ "type": "string",
4048
+ "optional": true,
4049
+ "defaultValue": null,
4050
+ "description": ""
4051
+ }
4052
+ ],
4053
+ "cva": null,
4054
+ "usageSnippet": "<InboxPopover>\n <InboxTrigger unreadCount={unreadCount} />\n <InboxContent\n items={items}\n onMarkAllRead={markAllRead}\n onDismiss={dismiss}\n viewAllHref=\"#\"\n />\n</InboxPopover>"
4055
+ },
4056
+ {
4057
+ "name": "InboxTrigger",
4058
+ "importPath": "import { InboxTrigger } from \"@kjaniec-dev/ui\";",
4059
+ "description": "React component InboxTrigger.",
4060
+ "props": [
4061
+ {
4062
+ "name": "unreadCount",
4063
+ "type": "number",
4064
+ "optional": true,
4065
+ "defaultValue": null,
4066
+ "description": "Badge count. Hidden when 0 or undefined."
4067
+ },
4068
+ {
4069
+ "name": "label",
4070
+ "type": "string",
4071
+ "optional": true,
4072
+ "defaultValue": "\"Notifications\"",
4073
+ "description": "Accessible label (default: \"Notifications\")."
4074
+ }
4075
+ ],
4076
+ "cva": null,
4077
+ "usageSnippet": "<InboxTrigger unreadCount={unreadCount} />"
4078
+ },
4079
+ {
4080
+ "name": "InboxContent",
4081
+ "importPath": "import { InboxContent } from \"@kjaniec-dev/ui\";",
4082
+ "description": "React component InboxContent.",
4083
+ "props": [
4084
+ {
4085
+ "name": "items",
4086
+ "type": "NotificationItemData[]",
4087
+ "optional": false,
4088
+ "defaultValue": null,
4089
+ "description": ""
4090
+ },
4091
+ {
4092
+ "name": "onMarkAllRead",
4093
+ "type": "() => void",
4094
+ "optional": true,
4095
+ "defaultValue": null,
4096
+ "description": ""
4097
+ },
4098
+ {
4099
+ "name": "onDismiss",
4100
+ "type": "(id: string) => void",
4101
+ "optional": true,
4102
+ "defaultValue": null,
4103
+ "description": ""
4104
+ },
4105
+ {
4106
+ "name": "viewAllHref",
4107
+ "type": "string",
4108
+ "optional": true,
4109
+ "defaultValue": null,
4110
+ "description": ""
4111
+ },
4112
+ {
4113
+ "name": "viewAllLabel",
4114
+ "type": "string",
4115
+ "optional": true,
4116
+ "defaultValue": "\"View all notifications\"",
4117
+ "description": ""
4118
+ },
4119
+ {
4120
+ "name": "emptyState",
4121
+ "type": "React.ReactNode",
4122
+ "optional": true,
4123
+ "defaultValue": null,
4124
+ "description": ""
4125
+ },
4126
+ {
4127
+ "name": "width",
4128
+ "type": "number | string",
4129
+ "optional": true,
4130
+ "defaultValue": "360",
4131
+ "description": ""
4132
+ },
4133
+ {
4134
+ "name": "maxHeight",
4135
+ "type": "number | string",
4136
+ "optional": true,
4137
+ "defaultValue": "320",
4138
+ "description": ""
4139
+ },
4140
+ {
4141
+ "name": "className",
4142
+ "type": "string",
4143
+ "optional": true,
4144
+ "defaultValue": null,
4145
+ "description": ""
4146
+ }
4147
+ ],
4148
+ "cva": null,
4149
+ "usageSnippet": "<InboxContent\n items={items}\n onMarkAllRead={markAllRead}\n onDismiss={dismiss}\n viewAllHref=\"#\"\n/>"
4150
+ },
4151
+ {
4152
+ "name": "NotificationItem",
4153
+ "importPath": "import { NotificationItem } from \"@kjaniec-dev/ui\";",
4154
+ "description": "React component NotificationItem.",
4155
+ "props": [
4156
+ {
4157
+ "name": "item",
4158
+ "type": "NotificationItemData",
4159
+ "optional": false,
4160
+ "defaultValue": null,
4161
+ "description": ""
4162
+ },
4163
+ {
4164
+ "name": "onDismiss",
4165
+ "type": "(id: string) => void",
4166
+ "optional": true,
4167
+ "defaultValue": null,
4168
+ "description": ""
4169
+ },
4170
+ {
4171
+ "name": "className",
4172
+ "type": "string",
4173
+ "optional": true,
4174
+ "defaultValue": null,
4175
+ "description": ""
4176
+ }
4177
+ ],
4178
+ "cva": null,
4179
+ "usageSnippet": "<NotificationItem>\n <!-- Content -->\n</NotificationItem>"
4180
+ },
4181
+ {
4182
+ "name": "ColorPicker",
4183
+ "importPath": "import { ColorPicker } from \"@kjaniec-dev/ui\";",
4184
+ "description": "React component ColorPicker.",
4185
+ "props": [
4186
+ {
4187
+ "name": "value",
4188
+ "type": "string",
4189
+ "optional": true,
4190
+ "defaultValue": null,
4191
+ "description": "Current hex color value (controlled)."
4192
+ },
4193
+ {
4194
+ "name": "defaultValue",
4195
+ "type": "string",
4196
+ "optional": true,
4197
+ "defaultValue": "\"#3B82F6\"",
4198
+ "description": "Initial hex color value (uncontrolled). Defaults to \"#3B82F6\"."
4199
+ },
4200
+ {
4201
+ "name": "onChange",
4202
+ "type": "(hex: string) => void",
4203
+ "optional": true,
4204
+ "defaultValue": null,
4205
+ "description": "Called when color changes."
4206
+ },
4207
+ {
4208
+ "name": "swatches",
4209
+ "type": "readonly string[] | string[]",
4210
+ "optional": true,
4211
+ "defaultValue": "DEFAULT_COLOR_SWATCHES",
4212
+ "description": "Array of hex color strings for preset palette. Defaults to DEFAULT_COLOR_SWATCHES."
4213
+ },
4214
+ {
4215
+ "name": "disabled",
4216
+ "type": "boolean",
4217
+ "optional": true,
4218
+ "defaultValue": "false",
4219
+ "description": "Whether the picker is disabled."
4220
+ },
4221
+ {
4222
+ "name": "showHexInput",
4223
+ "type": "boolean",
4224
+ "optional": true,
4225
+ "defaultValue": "true",
4226
+ "description": "Whether to show the manual Hex text input inside the popover. Defaults to true."
4227
+ },
4228
+ {
4229
+ "name": "className",
4230
+ "type": "string",
4231
+ "optional": true,
4232
+ "defaultValue": null,
4233
+ "description": "Additional class name for the container."
4234
+ }
4235
+ ],
4236
+ "cva": null,
4237
+ "usageSnippet": "<ColorPicker>\n <!-- Content -->\n</ColorPicker>"
4238
+ },
4239
+ {
4240
+ "name": "ColorPickerField",
4241
+ "importPath": "import { ColorPickerField } from \"@kjaniec-dev/ui\";",
4242
+ "description": "React component ColorPickerField.",
4243
+ "props": [
4244
+ {
4245
+ "name": "label",
4246
+ "type": "React.ReactNode",
4247
+ "optional": true,
4248
+ "defaultValue": null,
4249
+ "description": ""
4250
+ },
4251
+ {
4252
+ "name": "hint",
4253
+ "type": "React.ReactNode",
4254
+ "optional": true,
4255
+ "defaultValue": null,
4256
+ "description": ""
4257
+ },
4258
+ {
4259
+ "name": "error",
4260
+ "type": "React.ReactNode",
4261
+ "optional": true,
4262
+ "defaultValue": null,
4263
+ "description": ""
4264
+ },
4265
+ {
4266
+ "name": "required",
4267
+ "type": "boolean",
4268
+ "optional": true,
4269
+ "defaultValue": null,
4270
+ "description": ""
4271
+ }
4272
+ ],
4273
+ "cva": null,
4274
+ "usageSnippet": "<ColorPickerField\n label=\"Brand Primary Color\"\n hint=\"Choose your main product accent color\"\n defaultValue=\"#3B82F6\"\n/>"
4275
+ },
4276
+ {
4277
+ "name": "ColorPickerSwatch",
4278
+ "importPath": "import { ColorPickerSwatch } from \"@kjaniec-dev/ui\";",
4279
+ "description": "React component ColorPickerSwatch.",
4280
+ "props": [
4281
+ {
4282
+ "name": "color",
4283
+ "type": "string",
4284
+ "optional": false,
4285
+ "defaultValue": null,
4286
+ "description": ""
4287
+ },
4288
+ {
4289
+ "name": "selected",
4290
+ "type": "boolean",
4291
+ "optional": true,
4292
+ "defaultValue": "false",
4293
+ "description": ""
4294
+ },
4295
+ {
4296
+ "name": "size",
4297
+ "type": "\"sm\" | \"md\" | \"lg\"",
4298
+ "optional": true,
4299
+ "defaultValue": "\"md\"",
4300
+ "description": ""
4301
+ }
4302
+ ],
4303
+ "cva": null,
4304
+ "usageSnippet": "<ColorPickerSwatch>\n <!-- Content -->\n</ColorPickerSwatch>"
4305
+ },
4306
+ {
4307
+ "name": "DEFAULT_COLOR_SWATCHES",
4308
+ "importPath": "import { DEFAULT_COLOR_SWATCHES } from \"@kjaniec-dev/ui\";",
4309
+ "description": "React component DEFAULT_COLOR_SWATCHES.",
4310
+ "props": [],
4311
+ "cva": null,
4312
+ "usageSnippet": "<DEFAULT_COLOR_SWATCHES>\n <!-- Content -->\n</DEFAULT_COLOR_SWATCHES>"
4313
+ },
4314
+ {
4315
+ "name": "ImageGallery",
4316
+ "importPath": "import { ImageGallery } from \"@kjaniec-dev/ui\";",
4317
+ "description": "React component ImageGallery.",
4318
+ "props": [
4319
+ {
4320
+ "name": "images",
4321
+ "type": "GalleryImage[]",
4322
+ "optional": false,
4323
+ "defaultValue": "[]",
4324
+ "description": ""
4325
+ },
4326
+ {
4327
+ "name": "columns",
4328
+ "type": "2 | 3 | 4 | 5",
4329
+ "optional": true,
4330
+ "defaultValue": "3",
4331
+ "description": ""
4332
+ },
4333
+ {
4334
+ "name": "aspectRatio",
4335
+ "type": "\"square\" | \"video\" | \"4/3\" | \"auto\" | string",
4336
+ "optional": true,
4337
+ "defaultValue": "\"square\"",
4338
+ "description": ""
4339
+ },
4340
+ {
4341
+ "name": "maxVisible",
4342
+ "type": "number",
4343
+ "optional": true,
4344
+ "defaultValue": null,
4345
+ "description": ""
4346
+ },
4347
+ {
4348
+ "name": "className",
4349
+ "type": "string",
4350
+ "optional": true,
4351
+ "defaultValue": null,
4352
+ "description": ""
4353
+ },
4354
+ {
4355
+ "name": "thumbnailClassName",
4356
+ "type": "string",
4357
+ "optional": true,
4358
+ "defaultValue": null,
4359
+ "description": ""
4360
+ },
4361
+ {
4362
+ "name": "lightboxClassName",
4363
+ "type": "string",
4364
+ "optional": true,
4365
+ "defaultValue": null,
4366
+ "description": ""
4367
+ },
4368
+ {
4369
+ "name": "onImageClick",
4370
+ "type": "(index: number) => void",
4371
+ "optional": true,
4372
+ "defaultValue": null,
4373
+ "description": ""
4374
+ }
4375
+ ],
4376
+ "cva": null,
4377
+ "usageSnippet": "<ImageGallery images={sampleImages.slice(0, 4)} columns={2} />"
2515
4378
  }
2516
4379
  ]