@kjaniec-dev/ui-mcp 0.7.1 → 0.8.0
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 +353 -34
- package/package.json +5 -5
package/data/components.json
CHANGED
|
@@ -305,7 +305,7 @@
|
|
|
305
305
|
"description": "Vertical label + control + hint group.",
|
|
306
306
|
"props": [],
|
|
307
307
|
"cva": null,
|
|
308
|
-
"usageSnippet": "<Field>\n
|
|
308
|
+
"usageSnippet": "<Field>\n<Label required>Full name</Label>\n<Input placeholder=\"Jane Doe\" />"
|
|
309
309
|
},
|
|
310
310
|
{
|
|
311
311
|
"name": "Select",
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
}
|
|
322
322
|
],
|
|
323
323
|
"cva": null,
|
|
324
|
-
"usageSnippet": "<Select>\n
|
|
324
|
+
"usageSnippet": "<Select>\n <option>Personal Portfolio</option>\n <option>B2B Landlord SaaS</option>\n <option>Accounting App</option>\n</Select>"
|
|
325
325
|
},
|
|
326
326
|
{
|
|
327
327
|
"name": "SelectField",
|
|
@@ -488,7 +488,7 @@
|
|
|
488
488
|
}
|
|
489
489
|
],
|
|
490
490
|
"cva": null,
|
|
491
|
-
"usageSnippet": "<Segmented\n
|
|
491
|
+
"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
492
|
},
|
|
493
493
|
{
|
|
494
494
|
"name": "Card",
|
|
@@ -518,7 +518,7 @@
|
|
|
518
518
|
}
|
|
519
519
|
],
|
|
520
520
|
"cva": null,
|
|
521
|
-
"usageSnippet": "<Card elevated>\n
|
|
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>"
|
|
522
522
|
},
|
|
523
523
|
{
|
|
524
524
|
"name": "CardHeader",
|
|
@@ -526,7 +526,7 @@
|
|
|
526
526
|
"description": "React component CardHeader.",
|
|
527
527
|
"props": [],
|
|
528
528
|
"cva": null,
|
|
529
|
-
"usageSnippet": "<CardHeader>\n
|
|
529
|
+
"usageSnippet": "<CardHeader>\n <CardTitle>Semantic Article Card</CardTitle>\n <CardDescription>This card renders as an <article> element.</CardDescription>\n</CardHeader>"
|
|
530
530
|
},
|
|
531
531
|
{
|
|
532
532
|
"name": "CardTitle",
|
|
@@ -550,7 +550,7 @@
|
|
|
550
550
|
"description": "Body region with default padding.",
|
|
551
551
|
"props": [],
|
|
552
552
|
"cva": null,
|
|
553
|
-
"usageSnippet": "<CardContent style={{ paddingTop: \"1.35rem\" }}>\n
|
|
553
|
+
"usageSnippet": "<CardContent style={{ paddingTop: \"1.35rem\" }}>\n <CardTitle>Q3 Quarterly Report</CardTitle>\n <CardDescription>A summary of results and key product metrics.</CardDescription>\n</CardContent>"
|
|
554
554
|
},
|
|
555
555
|
{
|
|
556
556
|
"name": "CardFooter",
|
|
@@ -558,7 +558,7 @@
|
|
|
558
558
|
"description": "React component CardFooter.",
|
|
559
559
|
"props": [],
|
|
560
560
|
"cva": null,
|
|
561
|
-
"usageSnippet": "<CardFooter>\n
|
|
561
|
+
"usageSnippet": "<CardFooter>\n <Button size=\"sm\">Choose plan</Button>\n <Button size=\"sm\" variant=\"ghost\">Details</Button>\n</CardFooter>"
|
|
562
562
|
},
|
|
563
563
|
{
|
|
564
564
|
"name": "Stat",
|
|
@@ -698,7 +698,7 @@
|
|
|
698
698
|
"tone": "secondary"
|
|
699
699
|
}
|
|
700
700
|
},
|
|
701
|
-
"usageSnippet": "<AvatarGroup>\n
|
|
701
|
+
"usageSnippet": "<AvatarGroup>\n <Avatar>AK</Avatar>\n <Avatar tone=\"primary\">MR</Avatar>\n <Avatar tone=\"info\">JN</Avatar>\n <Avatar tone=\"muted\">+9</Avatar>\n</AvatarGroup>"
|
|
702
702
|
},
|
|
703
703
|
{
|
|
704
704
|
"name": "Tabs",
|
|
@@ -728,7 +728,7 @@
|
|
|
728
728
|
}
|
|
729
729
|
],
|
|
730
730
|
"cva": null,
|
|
731
|
-
"usageSnippet": "<Tabs defaultValue=\"overview\">\n
|
|
731
|
+
"usageSnippet": "<Tabs defaultValue=\"overview\">\n <TabsList>\n <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"overview\">A dashboard with key metrics and quick actions.</TabsContent>\n <TabsContent value=\"activity\">An event timeline: sign-ins, edits and comments.</TabsContent>\n <TabsContent value=\"settings\">Workspace preferences, permissions and integrations.</TabsContent>\n</Tabs>"
|
|
732
732
|
},
|
|
733
733
|
{
|
|
734
734
|
"name": "TabsList",
|
|
@@ -736,7 +736,7 @@
|
|
|
736
736
|
"description": "React component TabsList.",
|
|
737
737
|
"props": [],
|
|
738
738
|
"cva": null,
|
|
739
|
-
"usageSnippet": "<TabsList>\n
|
|
739
|
+
"usageSnippet": "<TabsList>\n <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n</TabsList>"
|
|
740
740
|
},
|
|
741
741
|
{
|
|
742
742
|
"name": "TabsTrigger",
|
|
@@ -791,7 +791,7 @@
|
|
|
791
791
|
}
|
|
792
792
|
],
|
|
793
793
|
"cva": null,
|
|
794
|
-
"usageSnippet": "<Accordion type=\"single\" defaultValue={[\"a\"]}>\n
|
|
794
|
+
"usageSnippet": "<Accordion type=\"single\" defaultValue={[\"a\"]}>\n <AccordionItem value=\"a\"><AccordionTrigger>How does billing work?</AccordionTrigger><AccordionContent>Monthly or annually — the annual plan includes two months free.</AccordionContent></AccordionItem>\n <AccordionItem value=\"b\"><AccordionTrigger>Can I change my plan later?</AccordionTrigger><AccordionContent>Yes, at any time. The difference is prorated.</AccordionContent></AccordionItem>\n <AccordionItem value=\"c\"><AccordionTrigger>What payment methods are supported?</AccordionTrigger><AccordionContent>Visa, Mastercard and Apple Pay.</AccordionContent></AccordionItem>\n</Accordion>"
|
|
795
795
|
},
|
|
796
796
|
{
|
|
797
797
|
"name": "AccordionItem",
|
|
@@ -839,7 +839,7 @@
|
|
|
839
839
|
}
|
|
840
840
|
],
|
|
841
841
|
"cva": null,
|
|
842
|
-
"usageSnippet": "<DropdownMenu>\n
|
|
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 />"
|
|
843
843
|
},
|
|
844
844
|
{
|
|
845
845
|
"name": "DropdownMenuTrigger",
|
|
@@ -847,7 +847,7 @@
|
|
|
847
847
|
"description": "React component DropdownMenuTrigger.",
|
|
848
848
|
"props": [],
|
|
849
849
|
"cva": null,
|
|
850
|
-
"usageSnippet": "<DropdownMenuTrigger>\n
|
|
850
|
+
"usageSnippet": "<DropdownMenuTrigger>\n <Button variant=\"outline\">Actions</Button>\n</DropdownMenuTrigger>"
|
|
851
851
|
},
|
|
852
852
|
{
|
|
853
853
|
"name": "DropdownMenuContent",
|
|
@@ -863,7 +863,7 @@
|
|
|
863
863
|
}
|
|
864
864
|
],
|
|
865
865
|
"cva": null,
|
|
866
|
-
"usageSnippet": "<DropdownMenuContent>\n
|
|
866
|
+
"usageSnippet": "<DropdownMenuContent>\n<DropdownMenuItem>Edit</DropdownMenuItem>\n<DropdownMenuItem>Duplicate</DropdownMenuItem>\n<DropdownMenuSeparator />"
|
|
867
867
|
},
|
|
868
868
|
{
|
|
869
869
|
"name": "DropdownMenuItem",
|
|
@@ -910,7 +910,7 @@
|
|
|
910
910
|
}
|
|
911
911
|
],
|
|
912
912
|
"cva": null,
|
|
913
|
-
"usageSnippet": "<Breadcrumb>\n
|
|
913
|
+
"usageSnippet": "<Breadcrumb>\n<BreadcrumbItem href=\"#\">Workspace</BreadcrumbItem>\n<BreadcrumbSeparator />"
|
|
914
914
|
},
|
|
915
915
|
{
|
|
916
916
|
"name": "BreadcrumbItem",
|
|
@@ -1082,7 +1082,7 @@
|
|
|
1082
1082
|
}
|
|
1083
1083
|
],
|
|
1084
1084
|
"cva": null,
|
|
1085
|
-
"usageSnippet": "<Table>\n
|
|
1085
|
+
"usageSnippet": "<Table>\n <TableHeader>\n <TableRow>\n <TableHead>User</TableHead>\n <TableHead>Role</TableHead>\n <TableHead>Status</TableHead>\n <TableHead numeric>Projects</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n <TableCell>Administrator</TableCell>\n <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n <TableCell numeric>24</TableCell>\n </TableRow>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n <TableCell>Editor</TableCell>\n <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n <TableCell numeric>12</TableCell>\n </TableRow>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n <TableCell>Viewer</TableCell>\n <TableCell><Badge>Inactive</Badge></TableCell>\n <TableCell numeric>3</TableCell>\n </TableRow>\n </TableBody>\n</Table>"
|
|
1086
1086
|
},
|
|
1087
1087
|
{
|
|
1088
1088
|
"name": "TableWrap",
|
|
@@ -1090,7 +1090,7 @@
|
|
|
1090
1090
|
"description": "Rounded, bordered wrapper around a <Table>.",
|
|
1091
1091
|
"props": [],
|
|
1092
1092
|
"cva": null,
|
|
1093
|
-
"usageSnippet": "<TableWrap>\n
|
|
1093
|
+
"usageSnippet": "<TableWrap>\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>User</TableHead>\n <TableHead>Role</TableHead>\n <TableHead>Status</TableHead>\n <TableHead numeric>Projects</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n <TableCell>Administrator</TableCell>\n <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n <TableCell numeric>24</TableCell>\n </TableRow>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n <TableCell>Editor</TableCell>\n <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n <TableCell numeric>12</TableCell>\n </TableRow>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n <TableCell>Viewer</TableCell>\n <TableCell><Badge>Inactive</Badge></TableCell>\n <TableCell numeric>3</TableCell>\n </TableRow>\n </TableBody>\n </Table>\n</TableWrap>"
|
|
1094
1094
|
},
|
|
1095
1095
|
{
|
|
1096
1096
|
"name": "TableHeader",
|
|
@@ -1098,7 +1098,7 @@
|
|
|
1098
1098
|
"description": "React component TableHeader.",
|
|
1099
1099
|
"props": [],
|
|
1100
1100
|
"cva": null,
|
|
1101
|
-
"usageSnippet": "<TableHeader>\n
|
|
1101
|
+
"usageSnippet": "<TableHeader>\n <TableRow>\n <TableHead>User</TableHead>\n <TableHead>Role</TableHead>\n <TableHead>Status</TableHead>\n <TableHead numeric>Projects</TableHead>\n </TableRow>\n</TableHeader>"
|
|
1102
1102
|
},
|
|
1103
1103
|
{
|
|
1104
1104
|
"name": "TableBody",
|
|
@@ -1106,7 +1106,7 @@
|
|
|
1106
1106
|
"description": "React component TableBody.",
|
|
1107
1107
|
"props": [],
|
|
1108
1108
|
"cva": null,
|
|
1109
|
-
"usageSnippet": "<TableBody>\n
|
|
1109
|
+
"usageSnippet": "<TableBody>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"primary\">AK</Avatar>Anna Kowalski</div></TableCell>\n <TableCell>Administrator</TableCell>\n <TableCell><Badge variant=\"success\" dot>Active</Badge></TableCell>\n <TableCell numeric>24</TableCell>\n </TableRow>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\">MR</Avatar>Michael Rutkowski</div></TableCell>\n <TableCell>Editor</TableCell>\n <TableCell><Badge variant=\"warning\" dot>Invited</Badge></TableCell>\n <TableCell numeric>12</TableCell>\n </TableRow>\n <TableRow>\n <TableCell><div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}><Avatar size=\"sm\" tone=\"info\">JN</Avatar>Julia Nowak</div></TableCell>\n <TableCell>Viewer</TableCell>\n <TableCell><Badge>Inactive</Badge></TableCell>\n <TableCell numeric>3</TableCell>\n </TableRow>\n</TableBody>"
|
|
1110
1110
|
},
|
|
1111
1111
|
{
|
|
1112
1112
|
"name": "TableRow",
|
|
@@ -1114,7 +1114,7 @@
|
|
|
1114
1114
|
"description": "React component TableRow.",
|
|
1115
1115
|
"props": [],
|
|
1116
1116
|
"cva": null,
|
|
1117
|
-
"usageSnippet": "<TableRow>\n
|
|
1117
|
+
"usageSnippet": "<TableRow>\n <TableHead>User</TableHead>\n <TableHead>Role</TableHead>\n <TableHead>Status</TableHead>\n <TableHead numeric>Projects</TableHead>\n</TableRow>"
|
|
1118
1118
|
},
|
|
1119
1119
|
{
|
|
1120
1120
|
"name": "TableHead",
|
|
@@ -1168,7 +1168,7 @@
|
|
|
1168
1168
|
}
|
|
1169
1169
|
],
|
|
1170
1170
|
"cva": null,
|
|
1171
|
-
"usageSnippet": "<Tooltip content=\"Contextual tooltip\">\n
|
|
1171
|
+
"usageSnippet": "<Tooltip content=\"Contextual tooltip\">\n <Button variant=\"outline\">Hover over me</Button>\n</Tooltip>"
|
|
1172
1172
|
},
|
|
1173
1173
|
{
|
|
1174
1174
|
"name": "Modal",
|
|
@@ -1219,7 +1219,7 @@
|
|
|
1219
1219
|
}
|
|
1220
1220
|
],
|
|
1221
1221
|
"cva": null,
|
|
1222
|
-
"usageSnippet": "<Modal open={open} onClose={() => setOpen(false)}>\n
|
|
1222
|
+
"usageSnippet": "<Modal open={open} onClose={() => setOpen(false)}>\n <ModalTitle>Delete project “Q3 Launch”?</ModalTitle>\n <ModalDescription>This action cannot be undone. All files and activity history will be permanently deleted.</ModalDescription>\n <ModalActions>\n <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n <Button variant=\"danger\" onClick={() => setOpen(false)}>Delete project</Button>\n </ModalActions>\n</Modal>"
|
|
1223
1223
|
},
|
|
1224
1224
|
{
|
|
1225
1225
|
"name": "ModalTitle",
|
|
@@ -1243,7 +1243,7 @@
|
|
|
1243
1243
|
"description": "React component ModalActions.",
|
|
1244
1244
|
"props": [],
|
|
1245
1245
|
"cva": null,
|
|
1246
|
-
"usageSnippet": "<ModalActions>\n
|
|
1246
|
+
"usageSnippet": "<ModalActions>\n <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n <Button variant=\"danger\" onClick={() => setOpen(false)}>Delete project</Button>\n</ModalActions>"
|
|
1247
1247
|
},
|
|
1248
1248
|
{
|
|
1249
1249
|
"name": "ToastProvider",
|
|
@@ -1251,7 +1251,7 @@
|
|
|
1251
1251
|
"description": "React component ToastProvider.",
|
|
1252
1252
|
"props": [],
|
|
1253
1253
|
"cva": null,
|
|
1254
|
-
"usageSnippet": "<ToastProvider>\n
|
|
1254
|
+
"usageSnippet": "<ToastProvider>\n<ToastDemo />"
|
|
1255
1255
|
},
|
|
1256
1256
|
{
|
|
1257
1257
|
"name": "PageHeader",
|
|
@@ -1288,7 +1288,7 @@
|
|
|
1288
1288
|
}
|
|
1289
1289
|
],
|
|
1290
1290
|
"cva": null,
|
|
1291
|
-
"usageSnippet": "<PageHeader\n
|
|
1291
|
+
"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
1292
|
},
|
|
1293
1293
|
{
|
|
1294
1294
|
"name": "EmptyState",
|
|
@@ -1325,7 +1325,7 @@
|
|
|
1325
1325
|
}
|
|
1326
1326
|
],
|
|
1327
1327
|
"cva": null,
|
|
1328
|
-
"usageSnippet": "<EmptyState\
|
|
1328
|
+
"usageSnippet": "<EmptyState\ntitle=\"No integrations active\"\ndescription=\"Connect your Slack, GitHub, or Discord channel to start receiving automated notifications.\"\nicon={\n <svg fill=\"none\" stroke=\"currentColor\" strokeWidth={2} viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />"
|
|
1329
1329
|
},
|
|
1330
1330
|
{
|
|
1331
1331
|
"name": "MetricCard",
|
|
@@ -1376,7 +1376,7 @@
|
|
|
1376
1376
|
}
|
|
1377
1377
|
],
|
|
1378
1378
|
"cva": null,
|
|
1379
|
-
"usageSnippet": "<MetricCard\n
|
|
1379
|
+
"usageSnippet": "<MetricCard\n title=\"Revenue\"\n value=\"$48,259.00\"\n trend=\"+8.2%\"\n trendDirection=\"up\"\n description=\"Total sales this quarter\"\n/>"
|
|
1380
1380
|
},
|
|
1381
1381
|
{
|
|
1382
1382
|
"name": "DataTable",
|
|
@@ -1592,7 +1592,7 @@
|
|
|
1592
1592
|
}
|
|
1593
1593
|
],
|
|
1594
1594
|
"cva": null,
|
|
1595
|
-
"usageSnippet": "<FormField label=\"Full Name\">\n
|
|
1595
|
+
"usageSnippet": "<FormField label=\"Full Name\">\n<Input placeholder=\"John Doe\" />"
|
|
1596
1596
|
},
|
|
1597
1597
|
{
|
|
1598
1598
|
"name": "ErrorState",
|
|
@@ -1629,7 +1629,7 @@
|
|
|
1629
1629
|
}
|
|
1630
1630
|
],
|
|
1631
1631
|
"cva": null,
|
|
1632
|
-
"usageSnippet": "<ErrorState\n
|
|
1632
|
+
"usageSnippet": "<ErrorState\n title=\"Failed to Load Invoices\"\n message=\"We encountered a temporary database error while retrieving your billing records.\"\n onRetry={() => alert(\"Retrying...\")}\n retryLabel=\"Reload Invoices\"\n/>"
|
|
1633
1633
|
},
|
|
1634
1634
|
{
|
|
1635
1635
|
"name": "Skeleton",
|
|
@@ -1717,7 +1717,7 @@
|
|
|
1717
1717
|
}
|
|
1718
1718
|
],
|
|
1719
1719
|
"cva": null,
|
|
1720
|
-
"usageSnippet": "<DashboardShell\n
|
|
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 />"
|
|
1721
1721
|
},
|
|
1722
1722
|
{
|
|
1723
1723
|
"name": "SettingsLayout",
|
|
@@ -1754,7 +1754,7 @@
|
|
|
1754
1754
|
}
|
|
1755
1755
|
],
|
|
1756
1756
|
"cva": null,
|
|
1757
|
-
"usageSnippet": "<SettingsLayout\n
|
|
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\" />"
|
|
1758
1758
|
},
|
|
1759
1759
|
{
|
|
1760
1760
|
"name": "DetailPageLayout",
|
|
@@ -1819,7 +1819,7 @@
|
|
|
1819
1819
|
}
|
|
1820
1820
|
],
|
|
1821
1821
|
"cva": null,
|
|
1822
|
-
"usageSnippet": "<DetailPageLayout\
|
|
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 </>"
|
|
1823
1823
|
},
|
|
1824
1824
|
{
|
|
1825
1825
|
"name": "TableToolbar",
|
|
@@ -1935,7 +1935,7 @@
|
|
|
1935
1935
|
}
|
|
1936
1936
|
],
|
|
1937
1937
|
"cva": null,
|
|
1938
|
-
"usageSnippet": "<ConfirmDialog\n
|
|
1938
|
+
"usageSnippet": "<ConfirmDialog\n open={open}\n onClose={() => setOpen(false)}\n title=\"Delete Workspace?\"\n description=\"This action cannot be undone. All database records and configs will be deleted.\"\n confirmLabel=\"Delete Workspace\"\n tone=\"danger\"\n loading={loading}\n onConfirm={() => {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n setOpen(false);\n }, 1000);\n }}\n/>"
|
|
1939
1939
|
},
|
|
1940
1940
|
{
|
|
1941
1941
|
"name": "Drawer",
|
|
@@ -1993,7 +1993,7 @@
|
|
|
1993
1993
|
}
|
|
1994
1994
|
],
|
|
1995
1995
|
"cva": null,
|
|
1996
|
-
"usageSnippet": "<Drawer\n
|
|
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\" />"
|
|
1997
1997
|
},
|
|
1998
1998
|
{
|
|
1999
1999
|
"name": "CommandPalette",
|
|
@@ -2193,5 +2193,324 @@
|
|
|
2193
2193
|
],
|
|
2194
2194
|
"cva": null,
|
|
2195
2195
|
"usageSnippet": "<SidebarNavGroup>\n <!-- Content -->\n</SidebarNavGroup>"
|
|
2196
|
+
},
|
|
2197
|
+
{
|
|
2198
|
+
"name": "Fab",
|
|
2199
|
+
"importPath": "import { Fab } from \"@kjaniec-dev/ui\";",
|
|
2200
|
+
"description": "React component Fab.",
|
|
2201
|
+
"props": [
|
|
2202
|
+
{
|
|
2203
|
+
"name": "icon",
|
|
2204
|
+
"type": "React.ReactNode",
|
|
2205
|
+
"optional": false,
|
|
2206
|
+
"defaultValue": null,
|
|
2207
|
+
"description": "Icon rendered inside the button."
|
|
2208
|
+
},
|
|
2209
|
+
{
|
|
2210
|
+
"name": "label",
|
|
2211
|
+
"type": "string",
|
|
2212
|
+
"optional": false,
|
|
2213
|
+
"defaultValue": null,
|
|
2214
|
+
"description": "Text label for accessibility (aria-label)."
|
|
2215
|
+
},
|
|
2216
|
+
{
|
|
2217
|
+
"name": "mobileOnly",
|
|
2218
|
+
"type": "boolean",
|
|
2219
|
+
"optional": true,
|
|
2220
|
+
"defaultValue": null,
|
|
2221
|
+
"description": "If true, the FAB will only be visible on mobile screens (< 768px)."
|
|
2222
|
+
},
|
|
2223
|
+
{
|
|
2224
|
+
"name": "loading",
|
|
2225
|
+
"type": "boolean",
|
|
2226
|
+
"optional": true,
|
|
2227
|
+
"defaultValue": null,
|
|
2228
|
+
"description": "Shows a spinner and disables interaction."
|
|
2229
|
+
},
|
|
2230
|
+
{
|
|
2231
|
+
"name": "variant",
|
|
2232
|
+
"type": "\"primary\" | \"secondary\" | \"outline\" | \"danger\"",
|
|
2233
|
+
"optional": true,
|
|
2234
|
+
"defaultValue": "\"primary\"",
|
|
2235
|
+
"description": "Style variant of the component: variant."
|
|
2236
|
+
},
|
|
2237
|
+
{
|
|
2238
|
+
"name": "size",
|
|
2239
|
+
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
2240
|
+
"optional": true,
|
|
2241
|
+
"defaultValue": "\"md\"",
|
|
2242
|
+
"description": "Style variant of the component: size."
|
|
2243
|
+
},
|
|
2244
|
+
{
|
|
2245
|
+
"name": "position",
|
|
2246
|
+
"type": "\"bottom-right\" | \"bottom-left\" | \"bottom-center\" | \"none\"",
|
|
2247
|
+
"optional": true,
|
|
2248
|
+
"defaultValue": "\"bottom-right\"",
|
|
2249
|
+
"description": "Style variant of the component: position."
|
|
2250
|
+
}
|
|
2251
|
+
],
|
|
2252
|
+
"cva": {
|
|
2253
|
+
"variants": {
|
|
2254
|
+
"variant": [
|
|
2255
|
+
"primary",
|
|
2256
|
+
"secondary",
|
|
2257
|
+
"outline",
|
|
2258
|
+
"danger"
|
|
2259
|
+
],
|
|
2260
|
+
"size": [
|
|
2261
|
+
"sm",
|
|
2262
|
+
"md",
|
|
2263
|
+
"lg"
|
|
2264
|
+
],
|
|
2265
|
+
"position": [
|
|
2266
|
+
"bottom-right",
|
|
2267
|
+
"bottom-left",
|
|
2268
|
+
"bottom-center",
|
|
2269
|
+
"none"
|
|
2270
|
+
]
|
|
2271
|
+
},
|
|
2272
|
+
"defaultVariants": {
|
|
2273
|
+
"variant": "primary",
|
|
2274
|
+
"size": "md",
|
|
2275
|
+
"position": "bottom-right"
|
|
2276
|
+
}
|
|
2277
|
+
},
|
|
2278
|
+
"usageSnippet": "<Fab {...args} variant=\"primary\" label=\"Primary variant\" />"
|
|
2279
|
+
},
|
|
2280
|
+
{
|
|
2281
|
+
"name": "BottomSheet",
|
|
2282
|
+
"importPath": "import { BottomSheet } from \"@kjaniec-dev/ui\";",
|
|
2283
|
+
"description": "React component BottomSheet.",
|
|
2284
|
+
"props": [
|
|
2285
|
+
{
|
|
2286
|
+
"name": "open",
|
|
2287
|
+
"type": "boolean",
|
|
2288
|
+
"optional": false,
|
|
2289
|
+
"defaultValue": null,
|
|
2290
|
+
"description": ""
|
|
2291
|
+
},
|
|
2292
|
+
{
|
|
2293
|
+
"name": "onClose",
|
|
2294
|
+
"type": "() => void",
|
|
2295
|
+
"optional": false,
|
|
2296
|
+
"defaultValue": null,
|
|
2297
|
+
"description": ""
|
|
2298
|
+
},
|
|
2299
|
+
{
|
|
2300
|
+
"name": "children",
|
|
2301
|
+
"type": "React.ReactNode",
|
|
2302
|
+
"optional": false,
|
|
2303
|
+
"defaultValue": null,
|
|
2304
|
+
"description": ""
|
|
2305
|
+
},
|
|
2306
|
+
{
|
|
2307
|
+
"name": "maxWidth",
|
|
2308
|
+
"type": "\"max-w-sm\" | \"max-w-md\" | \"max-w-lg\" | \"max-w-xl\" | \"max-w-2xl\"",
|
|
2309
|
+
"optional": true,
|
|
2310
|
+
"defaultValue": "\"max-w-lg\"",
|
|
2311
|
+
"description": ""
|
|
2312
|
+
},
|
|
2313
|
+
{
|
|
2314
|
+
"name": "className",
|
|
2315
|
+
"type": "string",
|
|
2316
|
+
"optional": true,
|
|
2317
|
+
"defaultValue": null,
|
|
2318
|
+
"description": ""
|
|
2319
|
+
},
|
|
2320
|
+
{
|
|
2321
|
+
"name": "showClose",
|
|
2322
|
+
"type": "boolean",
|
|
2323
|
+
"optional": true,
|
|
2324
|
+
"defaultValue": "true",
|
|
2325
|
+
"description": ""
|
|
2326
|
+
}
|
|
2327
|
+
],
|
|
2328
|
+
"cva": null,
|
|
2329
|
+
"usageSnippet": "<BottomSheet>\n <!-- Content -->\n</BottomSheet>"
|
|
2330
|
+
},
|
|
2331
|
+
{
|
|
2332
|
+
"name": "BottomSheetHeader",
|
|
2333
|
+
"importPath": "import { BottomSheetHeader } from \"@kjaniec-dev/ui\";",
|
|
2334
|
+
"description": "React component BottomSheetHeader.",
|
|
2335
|
+
"props": [],
|
|
2336
|
+
"cva": null,
|
|
2337
|
+
"usageSnippet": "<BottomSheetHeader>\n <!-- Content -->\n</BottomSheetHeader>"
|
|
2338
|
+
},
|
|
2339
|
+
{
|
|
2340
|
+
"name": "BottomSheetTitle",
|
|
2341
|
+
"importPath": "import { BottomSheetTitle } from \"@kjaniec-dev/ui\";",
|
|
2342
|
+
"description": "React component BottomSheetTitle.",
|
|
2343
|
+
"props": [],
|
|
2344
|
+
"cva": null,
|
|
2345
|
+
"usageSnippet": "<BottomSheetTitle>\n <!-- Content -->\n</BottomSheetTitle>"
|
|
2346
|
+
},
|
|
2347
|
+
{
|
|
2348
|
+
"name": "BottomSheetDescription",
|
|
2349
|
+
"importPath": "import { BottomSheetDescription } from \"@kjaniec-dev/ui\";",
|
|
2350
|
+
"description": "React component BottomSheetDescription.",
|
|
2351
|
+
"props": [],
|
|
2352
|
+
"cva": null,
|
|
2353
|
+
"usageSnippet": "<BottomSheetDescription>\n <!-- Content -->\n</BottomSheetDescription>"
|
|
2354
|
+
},
|
|
2355
|
+
{
|
|
2356
|
+
"name": "BottomSheetContent",
|
|
2357
|
+
"importPath": "import { BottomSheetContent } from \"@kjaniec-dev/ui\";",
|
|
2358
|
+
"description": "React component BottomSheetContent.",
|
|
2359
|
+
"props": [],
|
|
2360
|
+
"cva": null,
|
|
2361
|
+
"usageSnippet": "<BottomSheetContent>\n <!-- Content -->\n</BottomSheetContent>"
|
|
2362
|
+
},
|
|
2363
|
+
{
|
|
2364
|
+
"name": "BottomSheetFooter",
|
|
2365
|
+
"importPath": "import { BottomSheetFooter } from \"@kjaniec-dev/ui\";",
|
|
2366
|
+
"description": "React component BottomSheetFooter.",
|
|
2367
|
+
"props": [],
|
|
2368
|
+
"cva": null,
|
|
2369
|
+
"usageSnippet": "<BottomSheetFooter>\n <!-- Content -->\n</BottomSheetFooter>"
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
"name": "Kbd",
|
|
2373
|
+
"importPath": "import { Kbd } from \"@kjaniec-dev/ui\";",
|
|
2374
|
+
"description": "React component Kbd.",
|
|
2375
|
+
"props": [
|
|
2376
|
+
{
|
|
2377
|
+
"name": "keys",
|
|
2378
|
+
"type": "string[]",
|
|
2379
|
+
"optional": true,
|
|
2380
|
+
"defaultValue": null,
|
|
2381
|
+
"description": "Render one <kbd> chip per key (separated by a small gap); children are ignored."
|
|
2382
|
+
},
|
|
2383
|
+
{
|
|
2384
|
+
"name": "size",
|
|
2385
|
+
"type": "\"sm\" | \"md\"",
|
|
2386
|
+
"optional": true,
|
|
2387
|
+
"defaultValue": "\"sm\"",
|
|
2388
|
+
"description": "Style variant of the component: size."
|
|
2389
|
+
}
|
|
2390
|
+
],
|
|
2391
|
+
"cva": {
|
|
2392
|
+
"variants": {
|
|
2393
|
+
"size": [
|
|
2394
|
+
"sm",
|
|
2395
|
+
"md"
|
|
2396
|
+
]
|
|
2397
|
+
},
|
|
2398
|
+
"defaultVariants": {
|
|
2399
|
+
"size": "sm"
|
|
2400
|
+
}
|
|
2401
|
+
},
|
|
2402
|
+
"usageSnippet": "<Kbd keys={[\"⌘\", \"K\"]} />"
|
|
2403
|
+
},
|
|
2404
|
+
{
|
|
2405
|
+
"name": "CodeBlock",
|
|
2406
|
+
"importPath": "import { CodeBlock } from \"@kjaniec-dev/ui\";",
|
|
2407
|
+
"description": "React component CodeBlock.",
|
|
2408
|
+
"props": [
|
|
2409
|
+
{
|
|
2410
|
+
"name": "code",
|
|
2411
|
+
"type": "string",
|
|
2412
|
+
"optional": false,
|
|
2413
|
+
"defaultValue": null,
|
|
2414
|
+
"description": "The snippet text to display."
|
|
2415
|
+
},
|
|
2416
|
+
{
|
|
2417
|
+
"name": "language",
|
|
2418
|
+
"type": "string",
|
|
2419
|
+
"optional": true,
|
|
2420
|
+
"defaultValue": null,
|
|
2421
|
+
"description": "Language label shown in the header when no filename is set (e.g. \"tsx\")."
|
|
2422
|
+
},
|
|
2423
|
+
{
|
|
2424
|
+
"name": "filename",
|
|
2425
|
+
"type": "string",
|
|
2426
|
+
"optional": true,
|
|
2427
|
+
"defaultValue": null,
|
|
2428
|
+
"description": "Optional filename label shown in the header; takes precedence over language."
|
|
2429
|
+
},
|
|
2430
|
+
{
|
|
2431
|
+
"name": "copyable",
|
|
2432
|
+
"type": "boolean",
|
|
2433
|
+
"optional": true,
|
|
2434
|
+
"defaultValue": "true",
|
|
2435
|
+
"description": "Show the copy-to-clipboard button."
|
|
2436
|
+
},
|
|
2437
|
+
{
|
|
2438
|
+
"name": "maxHeight",
|
|
2439
|
+
"type": "number",
|
|
2440
|
+
"optional": true,
|
|
2441
|
+
"defaultValue": null,
|
|
2442
|
+
"description": "Max height in pixels; content scrolls vertically beyond it."
|
|
2443
|
+
}
|
|
2444
|
+
],
|
|
2445
|
+
"cva": null,
|
|
2446
|
+
"usageSnippet": "<CodeBlock>\n <!-- Content -->\n</CodeBlock>"
|
|
2447
|
+
},
|
|
2448
|
+
{
|
|
2449
|
+
"name": "Popover",
|
|
2450
|
+
"importPath": "import { Popover } from \"@kjaniec-dev/ui\";",
|
|
2451
|
+
"description": "React component Popover.",
|
|
2452
|
+
"props": [
|
|
2453
|
+
{
|
|
2454
|
+
"name": "children",
|
|
2455
|
+
"type": "React.ReactNode",
|
|
2456
|
+
"optional": false,
|
|
2457
|
+
"defaultValue": null,
|
|
2458
|
+
"description": "Trigger and content elements."
|
|
2459
|
+
},
|
|
2460
|
+
{
|
|
2461
|
+
"name": "className",
|
|
2462
|
+
"type": "string",
|
|
2463
|
+
"optional": true,
|
|
2464
|
+
"defaultValue": null,
|
|
2465
|
+
"description": "Additional classes for the positioning wrapper."
|
|
2466
|
+
},
|
|
2467
|
+
{
|
|
2468
|
+
"name": "open",
|
|
2469
|
+
"type": "boolean",
|
|
2470
|
+
"optional": true,
|
|
2471
|
+
"defaultValue": null,
|
|
2472
|
+
"description": "Controlled open state. Omit for uncontrolled behavior."
|
|
2473
|
+
},
|
|
2474
|
+
{
|
|
2475
|
+
"name": "onOpenChange",
|
|
2476
|
+
"type": "(open: boolean) => void",
|
|
2477
|
+
"optional": true,
|
|
2478
|
+
"defaultValue": null,
|
|
2479
|
+
"description": "Called whenever the open state should change."
|
|
2480
|
+
}
|
|
2481
|
+
],
|
|
2482
|
+
"cva": null,
|
|
2483
|
+
"usageSnippet": "<Popover>\n <PopoverTrigger asChild>\n <Button variant=\"outline\">Open popover</Button>\n </PopoverTrigger>\n <PopoverContent side=\"bottom\" align=\"start\" className=\"w-64\">\n <p className=\"m-0 mb-1 text-sm font-semibold\">Quick help</p>\n <p className=\"m-0 text-sm text-muted-foreground\">\n Popovers hold arbitrary content — filters, hints, pickers.\n </p>\n </PopoverContent>\n</Popover>"
|
|
2484
|
+
},
|
|
2485
|
+
{
|
|
2486
|
+
"name": "PopoverTrigger",
|
|
2487
|
+
"importPath": "import { PopoverTrigger } from \"@kjaniec-dev/ui\";",
|
|
2488
|
+
"description": "React component PopoverTrigger.",
|
|
2489
|
+
"props": [],
|
|
2490
|
+
"cva": null,
|
|
2491
|
+
"usageSnippet": "<PopoverTrigger asChild>\n <Button variant=\"outline\">Open popover</Button>\n</PopoverTrigger>"
|
|
2492
|
+
},
|
|
2493
|
+
{
|
|
2494
|
+
"name": "PopoverContent",
|
|
2495
|
+
"importPath": "import { PopoverContent } from \"@kjaniec-dev/ui\";",
|
|
2496
|
+
"description": "React component PopoverContent.",
|
|
2497
|
+
"props": [
|
|
2498
|
+
{
|
|
2499
|
+
"name": "side",
|
|
2500
|
+
"type": "\"top\" | \"bottom\" | \"left\" | \"right\"",
|
|
2501
|
+
"optional": true,
|
|
2502
|
+
"defaultValue": "\"bottom\"",
|
|
2503
|
+
"description": "Which side of the trigger the panel opens on."
|
|
2504
|
+
},
|
|
2505
|
+
{
|
|
2506
|
+
"name": "align",
|
|
2507
|
+
"type": "\"start\" | \"center\" | \"end\"",
|
|
2508
|
+
"optional": true,
|
|
2509
|
+
"defaultValue": "\"center\"",
|
|
2510
|
+
"description": "Alignment along the chosen side."
|
|
2511
|
+
}
|
|
2512
|
+
],
|
|
2513
|
+
"cva": null,
|
|
2514
|
+
"usageSnippet": "<PopoverContent side={side} align=\"center\" className=\"w-40\">\n <p className=\"m-0 text-sm\">side=\"{side}\"</p>\n</PopoverContent>"
|
|
2196
2515
|
}
|
|
2197
2516
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kjaniec-dev/ui-mcp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "MCP (Model Context Protocol) server for KJ Product Kit design system and UI components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "kjaniec-dev",
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@modelcontextprotocol/sdk": "^1.0.1",
|
|
35
|
-
"zod": "^
|
|
35
|
+
"zod": "^4.4.3"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@types/node": "^
|
|
38
|
+
"@types/node": "^26.1.0",
|
|
39
39
|
"tsup": "^8.3.0",
|
|
40
|
-
"tsx": "^4.
|
|
41
|
-
"typescript": "^
|
|
40
|
+
"tsx": "^4.23.0",
|
|
41
|
+
"typescript": "^6.0.3"
|
|
42
42
|
}
|
|
43
43
|
}
|