@kjaniec-dev/ui-mcp 0.9.2 → 0.9.3
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.
- package/data/components.json +49 -42
- package/data/tokens.json +242 -102
- package/dist/index.js +73 -50
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/data/components.json
CHANGED
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
"variant": "info"
|
|
144
144
|
}
|
|
145
145
|
},
|
|
146
|
-
"usageSnippet": "<Alert variant=\"info\" icon={InfoIcon} title=\"Information\"
|
|
146
|
+
"usageSnippet": "<Alert variant=\"info\" icon={InfoIcon} title=\"Information\">\n A short informational message for the user.\n</Alert>"
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
"name": "Spinner",
|
|
@@ -275,7 +275,7 @@
|
|
|
275
275
|
}
|
|
276
276
|
],
|
|
277
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) =>
|
|
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) => <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>"
|
|
279
279
|
},
|
|
280
280
|
{
|
|
281
281
|
"name": "ProgressRingField",
|
|
@@ -669,7 +669,7 @@
|
|
|
669
669
|
}
|
|
670
670
|
],
|
|
671
671
|
"cva": null,
|
|
672
|
-
"usageSnippet": "<ToggleGroup
|
|
672
|
+
"usageSnippet": "<ToggleGroup\n options={options}\n value={value}\n onChange={setValue}\n aria-label=\"Text formatting\"\n/>"
|
|
673
673
|
},
|
|
674
674
|
{
|
|
675
675
|
"name": "Card",
|
|
@@ -699,7 +699,7 @@
|
|
|
699
699
|
}
|
|
700
700
|
],
|
|
701
701
|
"cva": null,
|
|
702
|
-
"usageSnippet": "<Card>\n <CardHeader>\n <Badge variant=\"primary\" className=\"self-start\"
|
|
702
|
+
"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>"
|
|
703
703
|
},
|
|
704
704
|
{
|
|
705
705
|
"name": "CardHeader",
|
|
@@ -707,7 +707,7 @@
|
|
|
707
707
|
"description": "React component CardHeader.",
|
|
708
708
|
"props": [],
|
|
709
709
|
"cva": null,
|
|
710
|
-
"usageSnippet": "<CardHeader>\n <Badge variant=\"primary\" className=\"self-start\"
|
|
710
|
+
"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>"
|
|
711
711
|
},
|
|
712
712
|
{
|
|
713
713
|
"name": "CardTitle",
|
|
@@ -723,7 +723,7 @@
|
|
|
723
723
|
"description": "React component CardDescription.",
|
|
724
724
|
"props": [],
|
|
725
725
|
"cva": null,
|
|
726
|
-
"usageSnippet": "<CardDescription
|
|
726
|
+
"usageSnippet": "<CardDescription>\n Unlimited projects, roles and activity history for your whole team.\n</CardDescription>"
|
|
727
727
|
},
|
|
728
728
|
{
|
|
729
729
|
"name": "CardContent",
|
|
@@ -739,7 +739,7 @@
|
|
|
739
739
|
"description": "React component CardFooter.",
|
|
740
740
|
"props": [],
|
|
741
741
|
"cva": null,
|
|
742
|
-
"usageSnippet": "<CardFooter>\n <Button size=\"sm\">Choose plan</Button>\n <Button size=\"sm\" variant=\"ghost\"
|
|
742
|
+
"usageSnippet": "<CardFooter>\n <Button size=\"sm\">Choose plan</Button>\n <Button size=\"sm\" variant=\"ghost\">\n Details\n </Button>\n</CardFooter>"
|
|
743
743
|
},
|
|
744
744
|
{
|
|
745
745
|
"name": "Stat",
|
|
@@ -909,7 +909,7 @@
|
|
|
909
909
|
}
|
|
910
910
|
],
|
|
911
911
|
"cva": null,
|
|
912
|
-
"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\"
|
|
912
|
+
"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>"
|
|
913
913
|
},
|
|
914
914
|
{
|
|
915
915
|
"name": "TabsList",
|
|
@@ -972,7 +972,7 @@
|
|
|
972
972
|
}
|
|
973
973
|
],
|
|
974
974
|
"cva": null,
|
|
975
|
-
"usageSnippet": "<Accordion type=\"single\" defaultValue={[\"a\"]}>\n <AccordionItem value=\"a\"
|
|
975
|
+
"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>"
|
|
976
976
|
},
|
|
977
977
|
{
|
|
978
978
|
"name": "AccordionItem",
|
|
@@ -988,7 +988,7 @@
|
|
|
988
988
|
}
|
|
989
989
|
],
|
|
990
990
|
"cva": null,
|
|
991
|
-
"usageSnippet": "<AccordionItem value=\"a\"
|
|
991
|
+
"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>"
|
|
992
992
|
},
|
|
993
993
|
{
|
|
994
994
|
"name": "AccordionTrigger",
|
|
@@ -1004,7 +1004,7 @@
|
|
|
1004
1004
|
"description": "React component AccordionContent.",
|
|
1005
1005
|
"props": [],
|
|
1006
1006
|
"cva": null,
|
|
1007
|
-
"usageSnippet": "<AccordionContent
|
|
1007
|
+
"usageSnippet": "<AccordionContent>\n Monthly or annually — the annual plan includes two months free.\n</AccordionContent>"
|
|
1008
1008
|
},
|
|
1009
1009
|
{
|
|
1010
1010
|
"name": "DropdownMenu",
|
|
@@ -1205,7 +1205,7 @@
|
|
|
1205
1205
|
}
|
|
1206
1206
|
],
|
|
1207
1207
|
"cva": null,
|
|
1208
|
-
"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
|
|
1208
|
+
"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>"
|
|
1209
1209
|
},
|
|
1210
1210
|
{
|
|
1211
1211
|
"name": "TableWrap",
|
|
@@ -1213,7 +1213,7 @@
|
|
|
1213
1213
|
"description": "Rounded, bordered wrapper around a <Table>.",
|
|
1214
1214
|
"props": [],
|
|
1215
1215
|
"cva": null,
|
|
1216
|
-
"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
|
|
1216
|
+
"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>"
|
|
1217
1217
|
},
|
|
1218
1218
|
{
|
|
1219
1219
|
"name": "TableHeader",
|
|
@@ -1229,7 +1229,7 @@
|
|
|
1229
1229
|
"description": "React component TableBody.",
|
|
1230
1230
|
"props": [],
|
|
1231
1231
|
"cva": null,
|
|
1232
|
-
"usageSnippet": "<TableBody>\n <TableRow>\n <TableCell
|
|
1232
|
+
"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>"
|
|
1233
1233
|
},
|
|
1234
1234
|
{
|
|
1235
1235
|
"name": "TableRow",
|
|
@@ -1261,7 +1261,7 @@
|
|
|
1261
1261
|
}
|
|
1262
1262
|
],
|
|
1263
1263
|
"cva": null,
|
|
1264
|
-
"usageSnippet": "<TableCell
|
|
1264
|
+
"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>"
|
|
1265
1265
|
},
|
|
1266
1266
|
{
|
|
1267
1267
|
"name": "Tooltip",
|
|
@@ -1342,7 +1342,7 @@
|
|
|
1342
1342
|
}
|
|
1343
1343
|
],
|
|
1344
1344
|
"cva": null,
|
|
1345
|
-
"usageSnippet": "<Modal open={open} onClose={() => setOpen(false)}>\n <ModalTitle>Delete project “Q3 Launch”?</ModalTitle>\n <ModalDescription
|
|
1345
|
+
"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>"
|
|
1346
1346
|
},
|
|
1347
1347
|
{
|
|
1348
1348
|
"name": "ModalTitle",
|
|
@@ -1358,7 +1358,7 @@
|
|
|
1358
1358
|
"description": "React component ModalDescription.",
|
|
1359
1359
|
"props": [],
|
|
1360
1360
|
"cva": null,
|
|
1361
|
-
"usageSnippet": "<ModalDescription
|
|
1361
|
+
"usageSnippet": "<ModalDescription>\n This action cannot be undone. All files and activity history will be permanently\n deleted.\n</ModalDescription>"
|
|
1362
1362
|
},
|
|
1363
1363
|
{
|
|
1364
1364
|
"name": "ModalActions",
|
|
@@ -1366,7 +1366,7 @@
|
|
|
1366
1366
|
"description": "React component ModalActions.",
|
|
1367
1367
|
"props": [],
|
|
1368
1368
|
"cva": null,
|
|
1369
|
-
"usageSnippet": "<ModalActions>\n <Button variant=\"ghost\" onClick={() => setOpen(false)}
|
|
1369
|
+
"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>"
|
|
1370
1370
|
},
|
|
1371
1371
|
{
|
|
1372
1372
|
"name": "ToastProvider",
|
|
@@ -1773,6 +1773,13 @@
|
|
|
1773
1773
|
"defaultValue": "\"rectangular\"",
|
|
1774
1774
|
"description": ""
|
|
1775
1775
|
},
|
|
1776
|
+
{
|
|
1777
|
+
"name": "animation",
|
|
1778
|
+
"type": "\"shimmer\" | \"pulse\" | \"none\"",
|
|
1779
|
+
"optional": true,
|
|
1780
|
+
"defaultValue": "\"shimmer\"",
|
|
1781
|
+
"description": ""
|
|
1782
|
+
},
|
|
1776
1783
|
{
|
|
1777
1784
|
"name": "width",
|
|
1778
1785
|
"type": "string | number",
|
|
@@ -1847,7 +1854,7 @@
|
|
|
1847
1854
|
}
|
|
1848
1855
|
],
|
|
1849
1856
|
"cva": null,
|
|
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
|
|
1857
|
+
"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>"
|
|
1851
1858
|
},
|
|
1852
1859
|
{
|
|
1853
1860
|
"name": "SettingsLayout",
|
|
@@ -1884,7 +1891,7 @@
|
|
|
1884
1891
|
}
|
|
1885
1892
|
],
|
|
1886
1893
|
"cva": null,
|
|
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\"
|
|
1894
|
+
"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>"
|
|
1888
1895
|
},
|
|
1889
1896
|
{
|
|
1890
1897
|
"name": "DetailPageLayout",
|
|
@@ -1949,7 +1956,7 @@
|
|
|
1949
1956
|
}
|
|
1950
1957
|
],
|
|
1951
1958
|
"cva": null,
|
|
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\"
|
|
1959
|
+
"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>"
|
|
1953
1960
|
},
|
|
1954
1961
|
{
|
|
1955
1962
|
"name": "TableToolbar",
|
|
@@ -2123,7 +2130,7 @@
|
|
|
2123
2130
|
}
|
|
2124
2131
|
],
|
|
2125
2132
|
"cva": null,
|
|
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)}
|
|
2133
|
+
"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>"
|
|
2127
2134
|
},
|
|
2128
2135
|
{
|
|
2129
2136
|
"name": "CommandPalette",
|
|
@@ -2562,7 +2569,7 @@
|
|
|
2562
2569
|
}
|
|
2563
2570
|
],
|
|
2564
2571
|
"cva": null,
|
|
2565
|
-
"usageSnippet": "<Combobox
|
|
2572
|
+
"usageSnippet": "<Combobox\n options={frameworks}\n value={value}\n onChange={setValue}\n placeholder=\"Select a framework…\"\n/>"
|
|
2566
2573
|
},
|
|
2567
2574
|
{
|
|
2568
2575
|
"name": "ComboboxField",
|
|
@@ -2786,7 +2793,7 @@
|
|
|
2786
2793
|
}
|
|
2787
2794
|
],
|
|
2788
2795
|
"cva": null,
|
|
2789
|
-
"usageSnippet": "<DatePickerField
|
|
2796
|
+
"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/>"
|
|
2790
2797
|
},
|
|
2791
2798
|
{
|
|
2792
2799
|
"name": "RangeCalendar",
|
|
@@ -3195,7 +3202,7 @@
|
|
|
3195
3202
|
}
|
|
3196
3203
|
],
|
|
3197
3204
|
"cva": null,
|
|
3198
|
-
"usageSnippet": "<FileUpload
|
|
3205
|
+
"usageSnippet": "<FileUpload\n value={items}\n onChange={setItems}\n accept=\"image/*,.pdf\"\n maxSize={5 * 1024 * 1024}\n/>"
|
|
3199
3206
|
},
|
|
3200
3207
|
{
|
|
3201
3208
|
"name": "FileUploadField",
|
|
@@ -3575,7 +3582,7 @@
|
|
|
3575
3582
|
}
|
|
3576
3583
|
],
|
|
3577
3584
|
"cva": null,
|
|
3578
|
-
"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\"
|
|
3585
|
+
"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>"
|
|
3579
3586
|
},
|
|
3580
3587
|
{
|
|
3581
3588
|
"name": "AppShellBanner",
|
|
@@ -4427,14 +4434,14 @@
|
|
|
4427
4434
|
"name": "triggerText",
|
|
4428
4435
|
"type": "string",
|
|
4429
4436
|
"optional": true,
|
|
4430
|
-
"defaultValue": "
|
|
4437
|
+
"defaultValue": "\"Wybierz Paczkomat®\"",
|
|
4431
4438
|
"description": "Trigger button label. Default 'Wybierz Paczkomat®'."
|
|
4432
4439
|
},
|
|
4433
4440
|
{
|
|
4434
4441
|
"name": "modalTitle",
|
|
4435
4442
|
"type": "string",
|
|
4436
4443
|
"optional": true,
|
|
4437
|
-
"defaultValue": "
|
|
4444
|
+
"defaultValue": "\"Wybierz punkt odbioru InPost\"",
|
|
4438
4445
|
"description": "Modal header title. Default 'Wybierz punkt odbioru InPost'."
|
|
4439
4446
|
},
|
|
4440
4447
|
{
|
|
@@ -4469,21 +4476,21 @@
|
|
|
4469
4476
|
"name": "className",
|
|
4470
4477
|
"type": "string",
|
|
4471
4478
|
"optional": true,
|
|
4472
|
-
"defaultValue": "
|
|
4479
|
+
"defaultValue": "\"\"",
|
|
4473
4480
|
"description": "Outer container CSS class name."
|
|
4474
4481
|
},
|
|
4475
4482
|
{
|
|
4476
4483
|
"name": "buttonVariant",
|
|
4477
|
-
"type": "
|
|
4484
|
+
"type": "\"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\"",
|
|
4478
4485
|
"optional": true,
|
|
4479
|
-
"defaultValue": "
|
|
4486
|
+
"defaultValue": "\"outline\"",
|
|
4480
4487
|
"description": "Trigger button style variant ('primary', 'secondary', 'outline', 'ghost', 'danger'). Default 'outline'."
|
|
4481
4488
|
},
|
|
4482
4489
|
{
|
|
4483
4490
|
"name": "buttonSize",
|
|
4484
|
-
"type": "
|
|
4491
|
+
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
4485
4492
|
"optional": true,
|
|
4486
|
-
"defaultValue": "
|
|
4493
|
+
"defaultValue": "\"md\"",
|
|
4487
4494
|
"description": "Trigger button size ('sm', 'md', 'lg'). Default 'md'."
|
|
4488
4495
|
},
|
|
4489
4496
|
{
|
|
@@ -4530,7 +4537,7 @@
|
|
|
4530
4537
|
}
|
|
4531
4538
|
],
|
|
4532
4539
|
"cva": null,
|
|
4533
|
-
"usageSnippet": "<InPostGeowidget
|
|
4540
|
+
"usageSnippet": "<InPostGeowidget sandbox={true} onPointSelect={(point) => setSelectedPoint(point)} />"
|
|
4534
4541
|
},
|
|
4535
4542
|
{
|
|
4536
4543
|
"name": "InPostGeowidgetModal",
|
|
@@ -4555,14 +4562,14 @@
|
|
|
4555
4562
|
"name": "triggerText",
|
|
4556
4563
|
"type": "string",
|
|
4557
4564
|
"optional": true,
|
|
4558
|
-
"defaultValue": "
|
|
4565
|
+
"defaultValue": "\"Wybierz Paczkomat®\"",
|
|
4559
4566
|
"description": "Trigger button label. Default 'Wybierz Paczkomat®'."
|
|
4560
4567
|
},
|
|
4561
4568
|
{
|
|
4562
4569
|
"name": "modalTitle",
|
|
4563
4570
|
"type": "string",
|
|
4564
4571
|
"optional": true,
|
|
4565
|
-
"defaultValue": "
|
|
4572
|
+
"defaultValue": "\"Wybierz punkt odbioru InPost\"",
|
|
4566
4573
|
"description": "Modal header title. Default 'Wybierz punkt odbioru InPost'."
|
|
4567
4574
|
},
|
|
4568
4575
|
{
|
|
@@ -4597,21 +4604,21 @@
|
|
|
4597
4604
|
"name": "className",
|
|
4598
4605
|
"type": "string",
|
|
4599
4606
|
"optional": true,
|
|
4600
|
-
"defaultValue": "
|
|
4607
|
+
"defaultValue": "\"\"",
|
|
4601
4608
|
"description": "Outer container CSS class name."
|
|
4602
4609
|
},
|
|
4603
4610
|
{
|
|
4604
4611
|
"name": "buttonVariant",
|
|
4605
|
-
"type": "
|
|
4612
|
+
"type": "\"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\"",
|
|
4606
4613
|
"optional": true,
|
|
4607
|
-
"defaultValue": "
|
|
4614
|
+
"defaultValue": "\"outline\"",
|
|
4608
4615
|
"description": "Trigger button style variant ('primary', 'secondary', 'outline', 'ghost', 'danger'). Default 'outline'."
|
|
4609
4616
|
},
|
|
4610
4617
|
{
|
|
4611
4618
|
"name": "buttonSize",
|
|
4612
|
-
"type": "
|
|
4619
|
+
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
4613
4620
|
"optional": true,
|
|
4614
|
-
"defaultValue": "
|
|
4621
|
+
"defaultValue": "\"md\"",
|
|
4615
4622
|
"description": "Trigger button size ('sm', 'md', 'lg'). Default 'md'."
|
|
4616
4623
|
},
|
|
4617
4624
|
{
|
|
@@ -4658,6 +4665,6 @@
|
|
|
4658
4665
|
}
|
|
4659
4666
|
],
|
|
4660
4667
|
"cva": null,
|
|
4661
|
-
"usageSnippet": "<InPostGeowidgetModal
|
|
4668
|
+
"usageSnippet": "<InPostGeowidgetModal sandbox={true} value={point} onSelect={(p) => setPoint(p)} />"
|
|
4662
4669
|
}
|
|
4663
4670
|
]
|