@robr0/design-system 0.7.0 → 0.9.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.
Files changed (109) hide show
  1. package/README.md +4 -4
  2. package/components/Accordion/Accordion.js +1 -0
  3. package/components/AgentPlan/AgentPlan.css +231 -0
  4. package/components/AgentPlan/AgentPlan.d.ts +41 -0
  5. package/components/AgentPlan/AgentPlan.js +100 -0
  6. package/components/AgentStatus/AgentStatus.js +1 -0
  7. package/components/AiButton/AiButton.js +1 -0
  8. package/components/AlertDialog/AlertDialog.js +1 -0
  9. package/components/AnchorNav/AnchorNav.css +63 -0
  10. package/components/AnchorNav/AnchorNav.d.ts +33 -0
  11. package/components/AnchorNav/AnchorNav.js +82 -0
  12. package/components/AppLayout/AppLayout.js +1 -0
  13. package/components/AppSidebar/AppSidebar.js +1 -0
  14. package/components/Avatar/Avatar.js +1 -0
  15. package/components/Button/Button.js +1 -0
  16. package/components/Card/Card.js +1 -0
  17. package/components/Carousel/Carousel.js +1 -0
  18. package/components/ChatThread/ChatThread.js +1 -0
  19. package/components/Checkbox/Checkbox.js +1 -0
  20. package/components/CodeBlock/CodeBlock.js +1 -0
  21. package/components/CodeDiff/CodeDiff.css +175 -0
  22. package/components/CodeDiff/CodeDiff.d.ts +58 -0
  23. package/components/CodeDiff/CodeDiff.js +114 -0
  24. package/components/ColorPicker/ColorPicker.js +1 -0
  25. package/components/Combobox/Combobox.js +1 -0
  26. package/components/CommandPalette/CommandPalette.js +1 -0
  27. package/components/Composer/Composer.js +1 -0
  28. package/components/ContactCard/ContactCard.js +1 -0
  29. package/components/ContextMenu/ContextMenu.js +1 -0
  30. package/components/DataTable/DataTable.css +105 -0
  31. package/components/DataTable/DataTable.d.ts +81 -0
  32. package/components/DataTable/DataTable.js +236 -0
  33. package/components/DateInput/DateInput.js +1 -0
  34. package/components/DatePicker/DatePicker.js +1 -0
  35. package/components/Dialog/Dialog.js +1 -0
  36. package/components/Drawer/Drawer.js +1 -0
  37. package/components/Dropdown/Dropdown.js +1 -0
  38. package/components/DropdownMenu/DropdownMenu.css +1 -1
  39. package/components/DropdownMenu/DropdownMenu.js +1 -0
  40. package/components/EventCalendar/EventCalendar.css +328 -0
  41. package/components/EventCalendar/EventCalendar.d.ts +51 -0
  42. package/components/EventCalendar/EventCalendar.js +214 -0
  43. package/components/Field/Field.js +1 -0
  44. package/components/Field/FieldContext.js +1 -0
  45. package/components/FileInput/FileInput.js +1 -0
  46. package/components/Input/Input.js +1 -0
  47. package/components/InterruptCard/InterruptCard.css +11 -21
  48. package/components/InterruptCard/InterruptCard.d.ts +5 -6
  49. package/components/MessageCard/MessageCard.css +1 -2
  50. package/components/ModelPicker/ModelPicker.css +240 -0
  51. package/components/ModelPicker/ModelPicker.d.ts +60 -0
  52. package/components/ModelPicker/ModelPicker.js +218 -0
  53. package/components/NavList/NavList.js +1 -0
  54. package/components/NotificationCenter/NotificationCenter.css +262 -0
  55. package/components/NotificationCenter/NotificationCenter.d.ts +72 -0
  56. package/components/NotificationCenter/NotificationCenter.js +129 -0
  57. package/components/NumberInput/NumberInput.css +154 -0
  58. package/components/NumberInput/NumberInput.d.ts +44 -0
  59. package/components/NumberInput/NumberInput.js +147 -0
  60. package/components/Pagination/Pagination.js +1 -0
  61. package/components/PinInput/PinInput.css +92 -0
  62. package/components/PinInput/PinInput.d.ts +46 -0
  63. package/components/PinInput/PinInput.js +161 -0
  64. package/components/Popover/Popover.css +5 -6
  65. package/components/Popover/Popover.js +1 -0
  66. package/components/RadioButton/RadioButton.js +1 -0
  67. package/components/Reasoning/Reasoning.js +1 -0
  68. package/components/SegmentedControl/SegmentedControl.js +1 -0
  69. package/components/SelectionCard/SelectionCard.js +1 -0
  70. package/components/ShaderField/ShaderField.js +1 -0
  71. package/components/ShaderField/field.glsl.d.ts +11 -5
  72. package/components/ShaderField/field.glsl.js +4 -3
  73. package/components/ShaderField/useShaderField.d.ts +19 -2
  74. package/components/ShaderField/useShaderField.js +18 -3
  75. package/components/Slider/Slider.js +1 -0
  76. package/components/Sparkline/Sparkline.css +52 -0
  77. package/components/Sparkline/Sparkline.d.ts +49 -0
  78. package/components/Sparkline/Sparkline.js +86 -0
  79. package/components/Stepper/Stepper.css +207 -0
  80. package/components/Stepper/Stepper.d.ts +41 -0
  81. package/components/Stepper/Stepper.js +61 -0
  82. package/components/Tabs/Tabs.js +1 -0
  83. package/components/TagInput/TagInput.css +160 -0
  84. package/components/TagInput/TagInput.d.ts +43 -0
  85. package/components/TagInput/TagInput.js +137 -0
  86. package/components/Textarea/Textarea.js +1 -0
  87. package/components/TimePicker/TimePicker.css +230 -0
  88. package/components/TimePicker/TimePicker.d.ts +46 -0
  89. package/components/TimePicker/TimePicker.js +246 -0
  90. package/components/Timeline/Timeline.css +17 -0
  91. package/components/Timeline/Timeline.d.ts +2 -0
  92. package/components/Timeline/Timeline.js +1 -0
  93. package/components/Toast/Toast.js +1 -0
  94. package/components/ToggleGroup/ToggleGroup.js +1 -0
  95. package/components/ToggleSwitch/ToggleSwitch.js +1 -0
  96. package/components/ToolCall/ToolCall.css +7 -11
  97. package/components/ToolCall/ToolCall.js +1 -0
  98. package/components/Tooltip/Tooltip.js +1 -0
  99. package/components/TreeView/TreeView.css +119 -0
  100. package/components/TreeView/TreeView.d.ts +45 -0
  101. package/components/TreeView/TreeView.js +232 -0
  102. package/components/registry.d.ts +22 -6
  103. package/components/registry.js +3 -1
  104. package/components/registry.json +246 -20
  105. package/components/registry.json.d.ts +246 -20
  106. package/components/registry.json.js +2 -2
  107. package/index.d.ts +16 -2
  108. package/index.js +32 -1
  109. package/package.json +1 -1
@@ -1,15 +1,56 @@
1
1
  declare const _default: {
2
2
  "$comment": "SINGLE SOURCE OF TRUTH for the public component count. Every folder in src/components must appear in exactly one of these lists; scripts/validate-component-registry.mjs enforces this at build time. Import COMPONENT_COUNT from src/components/registry.ts wherever a count is displayed - never hardcode the number.",
3
3
  "categories": [
4
- "actions",
5
- "ai",
6
- "charts",
7
- "data-display",
8
- "feedback",
9
- "forms",
10
- "layout",
11
- "navigation",
12
- "overlays"
4
+ {
5
+ "id": "actions",
6
+ "label": "Actions",
7
+ "description": "Buttons, button groups, and toggles for triggering actions and switching modes."
8
+ },
9
+ {
10
+ "id": "ai",
11
+ "label": "AI",
12
+ "description": "Chat, agent, and model surfaces for building AI products, from the composer to the reasoning trace and the diff an agent proposes."
13
+ },
14
+ {
15
+ "id": "charts",
16
+ "label": "Charts",
17
+ "description": "Data visualisation components for plotting series and activity over time."
18
+ },
19
+ {
20
+ "id": "data-display",
21
+ "label": "Data display",
22
+ "description": "Cards, tables, lists, and badges for presenting structured content."
23
+ },
24
+ {
25
+ "id": "effects",
26
+ "label": "Effects",
27
+ "description": "Ambient and decorative surfaces that sit behind or around the interface."
28
+ },
29
+ {
30
+ "id": "feedback",
31
+ "label": "Feedback",
32
+ "description": "Alerts, toasts, progress, and empty states that tell people what is happening."
33
+ },
34
+ {
35
+ "id": "forms",
36
+ "label": "Forms",
37
+ "description": "Inputs, pickers, and selection controls for collecting and editing values."
38
+ },
39
+ {
40
+ "id": "layout",
41
+ "label": "Layout",
42
+ "description": "Page scaffolding: app shells, sidebars, dividers, and section headings."
43
+ },
44
+ {
45
+ "id": "navigation",
46
+ "label": "Navigation",
47
+ "description": "Top bars, breadcrumbs, tabs, steppers, and pagination for moving through a product."
48
+ },
49
+ {
50
+ "id": "overlays",
51
+ "label": "Overlays",
52
+ "description": "Dialogs, drawers, menus, and tooltips that float above the page."
53
+ }
13
54
  ],
14
55
  "components": [
15
56
  {
@@ -20,6 +61,14 @@ declare const _default: {
20
61
  "category": "data-display",
21
62
  "client": true
22
63
  },
64
+ {
65
+ "name": "AgentPlan",
66
+ "label": "Agent plan",
67
+ "slug": "agent-plan",
68
+ "description": "A collapsible checklist of an agent's task, with live step states and a progress readout.",
69
+ "category": "ai",
70
+ "client": true
71
+ },
23
72
  {
24
73
  "name": "AgentStatus",
25
74
  "label": "Agent status",
@@ -52,6 +101,14 @@ declare const _default: {
52
101
  "category": "overlays",
53
102
  "client": true
54
103
  },
104
+ {
105
+ "name": "AnchorNav",
106
+ "label": "Anchor nav",
107
+ "slug": "anchor-nav",
108
+ "description": "An on-page list of anchor links that tracks the reader's position and jumps between sections.",
109
+ "category": "navigation",
110
+ "client": true
111
+ },
55
112
  {
56
113
  "name": "AppLayout",
57
114
  "label": "App layout",
@@ -68,6 +125,15 @@ declare const _default: {
68
125
  "category": "layout",
69
126
  "client": true
70
127
  },
128
+ {
129
+ "name": "AreaChart",
130
+ "label": "Area chart",
131
+ "slug": "area-chart",
132
+ "description": "Filled area chart for showing volume over time, with stacked and single-series variants.",
133
+ "category": "charts",
134
+ "client": false,
135
+ "folder": "Chart"
136
+ },
71
137
  {
72
138
  "name": "Avatar",
73
139
  "label": "Avatar",
@@ -84,6 +150,15 @@ declare const _default: {
84
150
  "category": "data-display",
85
151
  "client": false
86
152
  },
153
+ {
154
+ "name": "BarChart",
155
+ "label": "Bar chart",
156
+ "slug": "bar-chart",
157
+ "description": "Vertical bars for comparing values across categories or time, with summary stats and tooltips.",
158
+ "category": "charts",
159
+ "client": false,
160
+ "folder": "Chart"
161
+ },
87
162
  {
88
163
  "name": "Breadcrumb",
89
164
  "label": "Breadcrumb",
@@ -124,14 +199,6 @@ declare const _default: {
124
199
  "category": "data-display",
125
200
  "client": true
126
201
  },
127
- {
128
- "name": "Chart",
129
- "label": "Chart",
130
- "slug": "chart",
131
- "description": "Data visualisation components built on Recharts. Includes bar, line, pie, and radial chart types with design-system token integration.",
132
- "category": "charts",
133
- "client": false
134
- },
135
202
  {
136
203
  "name": "ChatHeader",
137
204
  "label": "Chat header",
@@ -196,6 +263,14 @@ declare const _default: {
196
263
  "category": "data-display",
197
264
  "client": true
198
265
  },
266
+ {
267
+ "name": "CodeDiff",
268
+ "label": "Code diff",
269
+ "slug": "code-diff",
270
+ "description": "Unified diff view for code changes, with added, removed, and context lines.",
271
+ "category": "ai",
272
+ "client": false
273
+ },
199
274
  {
200
275
  "name": "ColorPicker",
201
276
  "label": "Colour picker",
@@ -252,6 +327,14 @@ declare const _default: {
252
327
  "category": "charts",
253
328
  "client": false
254
329
  },
330
+ {
331
+ "name": "DataTable",
332
+ "label": "Data table",
333
+ "slug": "data-table",
334
+ "description": "The wired table: sorting, search, row selection, and pagination assembled around Table.",
335
+ "category": "data-display",
336
+ "client": true
337
+ },
255
338
  {
256
339
  "name": "DateInput",
257
340
  "label": "Date input",
@@ -332,6 +415,14 @@ declare const _default: {
332
415
  "category": "data-display",
333
416
  "client": false
334
417
  },
418
+ {
419
+ "name": "EventCalendar",
420
+ "label": "Event calendar",
421
+ "slug": "event-calendar",
422
+ "description": "A month grid with event pills, overflow counts, and month navigation.",
423
+ "category": "data-display",
424
+ "client": true
425
+ },
335
426
  {
336
427
  "name": "Field",
337
428
  "label": "Field",
@@ -388,6 +479,15 @@ declare const _default: {
388
479
  "category": "data-display",
389
480
  "client": false
390
481
  },
482
+ {
483
+ "name": "LineChart",
484
+ "label": "Line chart",
485
+ "slug": "line-chart",
486
+ "description": "Multi-series line chart for trends over time, with per-series colours and a summary row.",
487
+ "category": "charts",
488
+ "client": false,
489
+ "folder": "Chart"
490
+ },
391
491
  {
392
492
  "name": "LinkList",
393
493
  "label": "Link list",
@@ -412,10 +512,18 @@ declare const _default: {
412
512
  "category": "ai",
413
513
  "client": false
414
514
  },
515
+ {
516
+ "name": "ModelPicker",
517
+ "label": "Model picker",
518
+ "slug": "model-picker",
519
+ "description": "A model selector for chat surfaces, with per-model descriptions and an optional effort row.",
520
+ "category": "ai",
521
+ "client": true
522
+ },
415
523
  {
416
524
  "name": "Nav",
417
- "label": "Navigation",
418
- "slug": "navigation",
525
+ "label": "Nav",
526
+ "slug": "nav",
419
527
  "description": "Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.",
420
528
  "category": "navigation",
421
529
  "client": false
@@ -428,6 +536,22 @@ declare const _default: {
428
536
  "category": "navigation",
429
537
  "client": true
430
538
  },
539
+ {
540
+ "name": "NotificationCenter",
541
+ "label": "Notification centre",
542
+ "slug": "notification-center",
543
+ "description": "A persistent notification inbox with unread count, filter tabs, and per-item actions.",
544
+ "category": "feedback",
545
+ "client": true
546
+ },
547
+ {
548
+ "name": "NumberInput",
549
+ "label": "Number input",
550
+ "slug": "number-input",
551
+ "description": "Numeric field with increment and decrement steppers and min/max clamping.",
552
+ "category": "forms",
553
+ "client": true
554
+ },
431
555
  {
432
556
  "name": "Pagination",
433
557
  "label": "Pagination",
@@ -436,6 +560,23 @@ declare const _default: {
436
560
  "category": "navigation",
437
561
  "client": true
438
562
  },
563
+ {
564
+ "name": "PieChart",
565
+ "label": "Pie chart",
566
+ "slug": "pie-chart",
567
+ "description": "Proportional share of a whole as a pie or donut, with per-slice colours.",
568
+ "category": "charts",
569
+ "client": false,
570
+ "folder": "Chart"
571
+ },
572
+ {
573
+ "name": "PinInput",
574
+ "label": "Pin input",
575
+ "slug": "pin-input",
576
+ "description": "Segmented one-time-code input with auto-advance, paste support, and completion callback.",
577
+ "category": "forms",
578
+ "client": true
579
+ },
439
580
  {
440
581
  "name": "Popover",
441
582
  "label": "Popover",
@@ -476,6 +617,24 @@ declare const _default: {
476
617
  "category": "data-display",
477
618
  "client": false
478
619
  },
620
+ {
621
+ "name": "RadarChart",
622
+ "label": "Radar chart",
623
+ "slug": "radar-chart",
624
+ "description": "Multi-axis comparison of series across categories on a radial grid.",
625
+ "category": "charts",
626
+ "client": false,
627
+ "folder": "Chart"
628
+ },
629
+ {
630
+ "name": "RadialChart",
631
+ "label": "Radial chart",
632
+ "slug": "radial-chart",
633
+ "description": "Concentric progress rings for completion and KPI readouts.",
634
+ "category": "charts",
635
+ "client": false,
636
+ "folder": "Chart"
637
+ },
479
638
  {
480
639
  "name": "RadioButton",
481
640
  "label": "Radio button",
@@ -492,6 +651,15 @@ declare const _default: {
492
651
  "category": "ai",
493
652
  "client": true
494
653
  },
654
+ {
655
+ "name": "ScatterChart",
656
+ "label": "Scatter chart",
657
+ "slug": "scatter-chart",
658
+ "description": "Plots point clusters across two axes to show correlation and distribution.",
659
+ "category": "charts",
660
+ "client": false,
661
+ "folder": "Chart"
662
+ },
495
663
  {
496
664
  "name": "SectionTitle",
497
665
  "label": "Section title",
@@ -521,7 +689,7 @@ declare const _default: {
521
689
  "label": "Shader field",
522
690
  "slug": "shader-field",
523
691
  "description": "An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.",
524
- "category": "layout",
692
+ "category": "effects",
525
693
  "client": true
526
694
  },
527
695
  {
@@ -548,6 +716,14 @@ declare const _default: {
548
716
  "category": "ai",
549
717
  "client": false
550
718
  },
719
+ {
720
+ "name": "Sparkline",
721
+ "label": "Sparkline",
722
+ "slug": "sparkline",
723
+ "description": "Inline trend line for stats and table cells, drawn without axes or chrome.",
724
+ "category": "charts",
725
+ "client": false
726
+ },
551
727
  {
552
728
  "name": "Spinner",
553
729
  "label": "Spinner",
@@ -556,6 +732,15 @@ declare const _default: {
556
732
  "category": "feedback",
557
733
  "client": false
558
734
  },
735
+ {
736
+ "name": "StackedBarChart",
737
+ "label": "Stacked bar chart",
738
+ "slug": "stacked-bar-chart",
739
+ "description": "Bars split into stacked segments to compare totals and their composition.",
740
+ "category": "charts",
741
+ "client": false,
742
+ "folder": "Chart"
743
+ },
559
744
  {
560
745
  "name": "Stat",
561
746
  "label": "Stat",
@@ -564,6 +749,14 @@ declare const _default: {
564
749
  "category": "data-display",
565
750
  "client": false
566
751
  },
752
+ {
753
+ "name": "Stepper",
754
+ "label": "Stepper",
755
+ "slug": "stepper",
756
+ "description": "Step-by-step progress indicator for wizards and multi-stage flows.",
757
+ "category": "navigation",
758
+ "client": true
759
+ },
567
760
  {
568
761
  "name": "Swatch",
569
762
  "label": "Swatch",
@@ -588,6 +781,14 @@ declare const _default: {
588
781
  "category": "navigation",
589
782
  "client": true
590
783
  },
784
+ {
785
+ "name": "TagInput",
786
+ "label": "Tag input",
787
+ "slug": "tag-input",
788
+ "description": "Multi-value text input with entries held as removable tags.",
789
+ "category": "forms",
790
+ "client": true
791
+ },
591
792
  {
592
793
  "name": "Textarea",
593
794
  "label": "Textarea",
@@ -596,6 +797,14 @@ declare const _default: {
596
797
  "category": "forms",
597
798
  "client": true
598
799
  },
800
+ {
801
+ "name": "TimePicker",
802
+ "label": "Time picker",
803
+ "slug": "time-picker",
804
+ "description": "Time-of-day field with a dropdown list of selectable times.",
805
+ "category": "forms",
806
+ "client": true
807
+ },
599
808
  {
600
809
  "name": "Timeline",
601
810
  "label": "Timeline",
@@ -643,6 +852,23 @@ declare const _default: {
643
852
  "description": "Contextual text label that appears on hover or focus with position and delay options.",
644
853
  "category": "overlays",
645
854
  "client": true
855
+ },
856
+ {
857
+ "name": "TreeView",
858
+ "label": "Tree view",
859
+ "slug": "tree-view",
860
+ "description": "Collapsible hierarchy for files, folders, and nested structures.",
861
+ "category": "data-display",
862
+ "client": true
863
+ },
864
+ {
865
+ "name": "Treemap",
866
+ "label": "Treemap",
867
+ "slug": "treemap",
868
+ "description": "Nested rectangles sized by value for part-to-whole breakdowns.",
869
+ "category": "charts",
870
+ "client": false,
871
+ "folder": "Chart"
646
872
  }
647
873
  ],
648
874
  "docOnlyHelpers": [
@@ -1,5 +1,5 @@
1
- const categories = ["actions", "ai", "charts", "data-display", "feedback", "forms", "layout", "navigation", "overlays"];
2
- const components = /* @__PURE__ */ JSON.parse(`[{"name":"Accordion","label":"Accordion","slug":"accordion","description":"Collapsible content sections for organising related information.","category":"data-display","client":true},{"name":"AgentStatus","label":"Agent status","slug":"agent-status","description":"A dot-matrix indicator and status line reporting what an agent is doing right now.","category":"ai","client":true},{"name":"AiButton","label":"AI button","slug":"ai-button","description":"The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.","category":"ai","client":true},{"name":"Alert","label":"Alert","slug":"alert","description":"Contextual feedback with status variants, optional dismiss, and compact sizing.","category":"feedback","client":false},{"name":"AlertDialog","label":"Alert dialog","slug":"alert-dialog","description":"Modal confirmation overlay with title, description, and confirm / cancel actions.","category":"overlays","client":true},{"name":"AppLayout","label":"App layout","slug":"app-layout","description":"Full-page template pairing the collapsible App sidebar with a centred content area.","category":"layout","client":true},{"name":"AppSidebar","label":"App sidebar","slug":"app-sidebar","description":"Collapsible navigation rail with accordion sub-items, category headings, and profile section.","category":"layout","client":true},{"name":"Avatar","label":"Avatar","slug":"avatar","description":"User profile image with initials and icon fallback, status indicator, and multiple sizes.","category":"data-display","client":true},{"name":"Badge","label":"Badge","slug":"badge","description":"Small inline status labels with info, positive, warning, error, and neutral variants.","category":"data-display","client":false},{"name":"Breadcrumb","label":"Breadcrumb","slug":"breadcrumb","description":"Hierarchical navigation trail showing the user's location within the site.","category":"navigation","client":false},{"name":"Button","label":"Button","slug":"button","description":"Primary and secondary button variants in default and compact sizes, with icon support and multiple states.","category":"actions","client":true},{"name":"ButtonGroup","label":"Button group","slug":"button-group","description":"Horizontal and vertical button group layouts for related actions and navigation patterns.","category":"actions","client":false},{"name":"Card","label":"Card","slug":"card","description":"Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.","category":"data-display","client":true},{"name":"Carousel","label":"Carousel","slug":"carousel","description":"Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.","category":"data-display","client":true},{"name":"Chart","label":"Chart","slug":"chart","description":"Data visualisation components built on Recharts. Includes bar, line, pie, and radial chart types with design-system token integration.","category":"charts","client":false},{"name":"ChatHeader","label":"Chat header","slug":"chat-header","description":"The top row of a chat surface, with the conversation title and its controls.","category":"ai","client":false},{"name":"ChatMarker","label":"Chat marker","slug":"chat-marker","description":"An inline conversation separator for date breaks and system notes.","category":"ai","client":false},{"name":"ChatMessage","label":"Chat message","slug":"chat-message","description":"A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.","category":"ai","client":false},{"name":"ChatThread","label":"Chat thread","slug":"chat-thread","description":"A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.","category":"ai","client":true},{"name":"Checkbox","label":"Checkbox","slug":"checkbox","description":"Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.","category":"forms","client":true},{"name":"Chip","label":"Chip","slug":"chip","description":"Compact pills for attributes, filters, and inline metadata.","category":"data-display","client":false},{"name":"CircularButton","label":"Circular button","slug":"circular-button","description":"Round icon button with primary and secondary variants, default and compact sizes.","category":"actions","client":false},{"name":"CodeBlock","label":"Code block","slug":"code-block","description":"Monospace code with a header and one-click copy.","category":"data-display","client":true},{"name":"ColorPicker","label":"Colour picker","slug":"color-picker","description":"Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.","category":"forms","client":true},{"name":"Combobox","label":"Combobox","slug":"combobox","description":"A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.","category":"forms","client":true},{"name":"CommandPalette","label":"Command palette","slug":"command-palette","description":"A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.","category":"overlays","client":true},{"name":"Composer","label":"Composer","slug":"composer","description":"An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.","category":"ai","client":true},{"name":"ContactCard","label":"Contact card","slug":"contact-card","description":"Linked contact method with icon, label, and value.","category":"data-display","client":true},{"name":"ContextMenu","label":"Context menu","slug":"context-menu","description":"Right-click menu at the pointer with groups, sub-menus, and shortcut hints.","category":"overlays","client":true},{"name":"ContributionGraph","label":"Contribution graph","slug":"contribution-graph","description":"A year of activity, one cell per day.","category":"charts","client":false},{"name":"DateInput","label":"Date input","slug":"date-input","description":"Date input with native picker, calendar icon, label, and validation states.","category":"forms","client":true},{"name":"DatePicker","label":"Date picker","slug":"date-picker","description":"Inline calendar with month navigation, day selection, and today indicator.","category":"forms","client":true},{"name":"Dialog","label":"Dialog","slug":"dialog","description":"A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.","category":"overlays","client":true},{"name":"Divider","label":"Divider","slug":"divider","description":"A thin rule separating stacked content, with optional inline label and vertical orientation.","category":"layout","client":false},{"name":"DocumentChip","label":"Document chip","slug":"document-chip","description":"A compact file reference with a type icon, name, metadata, and optional remove.","category":"ai","client":false},{"name":"Drawer","label":"Drawer","slug":"drawer","description":"An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.","category":"overlays","client":true},{"name":"Dropdown","label":"Dropdown","slug":"dropdown","description":"Custom select dropdown with keyboard navigation, disabled options, and error states.","category":"forms","client":true},{"name":"DropdownMenu","label":"Dropdown menu","slug":"dropdown-menu","description":"Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.","category":"overlays","client":true},{"name":"EmptyState","label":"Empty state","slug":"empty-state","description":"The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.","category":"feedback","client":false},{"name":"EntityCard","label":"Entity card","slug":"entity-card","description":"Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.","category":"data-display","client":false},{"name":"Field","label":"Field","slug":"field","description":"The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.","category":"forms","client":true},{"name":"Figure","label":"Figure","slug":"figure","description":"Images with captions, in the case-study frame.","category":"data-display","client":false},{"name":"FileInput","label":"File input","slug":"file-input","description":"A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.","category":"forms","client":true},{"name":"Input","label":"Input","slug":"input","description":"Text input with label, placeholder, left and right icons, helper text, and error states.","category":"forms","client":true},{"name":"Instructions","label":"Instructions","slug":"instructions","description":"Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.","category":"data-display","client":false},{"name":"InterruptCard","label":"Interrupt card","slug":"interrupt-card","description":"A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.","category":"ai","client":false},{"name":"Kbd","label":"Kbd","slug":"kbd","description":"A keyboard key rendered as a keycap, for shortcut hints in menus and prose.","category":"data-display","client":false},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MessageActions","label":"Message actions","slug":"message-actions","description":"An icon-button row for message-level actions like copy, retry, and feedback.","category":"ai","client":false},{"name":"MessageCard","label":"Message card","slug":"message-card","description":"A structured rich-content card embedded in a chat message, with media, title, body, and actions.","category":"ai","client":false},{"name":"Nav","label":"Navigation","slug":"navigation","description":"Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.","category":"navigation","client":false},{"name":"NavList","label":"Nav list","slug":"nav-list","description":"Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.","category":"navigation","client":true},{"name":"Pagination","label":"Pagination","slug":"pagination","description":"Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.","category":"navigation","client":true},{"name":"Popover","label":"Popover","slug":"popover","description":"Contextual overlay panel with click and hover triggers, positioned relative to its anchor.","category":"overlays","client":true},{"name":"ProgressBar","label":"Progress bar","slug":"progress-bar","description":"Horizontal bar indicating completion progress, with an optional percentage label.","category":"feedback","client":false},{"name":"PromptSuggestions","label":"Prompt suggestions","slug":"prompt-suggestions","description":"A horizontal row of tappable prompt suggestions to start or steer a conversation.","category":"ai","client":false},{"name":"Prose","label":"Prose","slug":"prose","description":"Token-styled typography for rendered markdown and rich agent output.","category":"ai","client":false},{"name":"Quote","label":"Quote","slug":"quote","description":"Blockquotes and pull-quotes with attribution.","category":"data-display","client":false},{"name":"RadioButton","label":"Radio button","slug":"radio-button","description":"Radio button and radio group with vertical and horizontal layouts, animated dot indicator.","category":"forms","client":true},{"name":"Reasoning","label":"Reasoning","slug":"reasoning","description":"A model's thinking, disclosed behind a one-line summary and collapsed once it finishes.","category":"ai","client":true},{"name":"SectionTitle","label":"Section title","slug":"section-title","description":"Heading with a divider line and optional trailing content for organising page sections.","category":"layout","client":false},{"name":"SegmentedControl","label":"Segmented control","slug":"segmented-control","description":"Pill-style toggle between related views with keyboard navigation and icon support.","category":"actions","client":true},{"name":"SelectionCard","label":"Selection card","slug":"selection-card","description":"Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.","category":"data-display","client":true},{"name":"ShaderField","label":"Shader field","slug":"shader-field","description":"An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.","category":"layout","client":true},{"name":"Skeleton","label":"Skeleton","slug":"skeleton","description":"Placeholder loading indicators with text, circular, and rectangular variants.","category":"feedback","client":false},{"name":"Slider","label":"Slider","slug":"slider","description":"Range input for selecting a value between a minimum and maximum, in default and compact sizes.","category":"forms","client":true},{"name":"SourceChip","label":"Source chip","slug":"source-chip","description":"A numbered citation pill linking a claim to its source.","category":"ai","client":false},{"name":"Spinner","label":"Spinner","slug":"spinner","description":"Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.","category":"feedback","client":false},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"Swatch","label":"Swatch","slug":"swatch","description":"Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.","category":"forms","client":false},{"name":"Table","label":"Table","slug":"table","description":"Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.","category":"data-display","client":false},{"name":"Tabs","label":"Tabs","slug":"tabs","description":"Tab navigation with underline indicator, icon support, compact size, and full-width mode.","category":"navigation","client":true},{"name":"Textarea","label":"Textarea","slug":"textarea","description":"Multi-line text input with character counter, resize control, helper text, and error states.","category":"forms","client":true},{"name":"Timeline","label":"Timeline","slug":"timeline","description":"Ordered sequences: histories and steppers.","category":"data-display","client":false},{"name":"Toast","label":"Toast","slug":"toast","description":"Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.","category":"feedback","client":true},{"name":"ToggleGroup","label":"Toggle group","slug":"toggle-group","description":"A set of two-state buttons that can be toggled on or off, supporting text and icon items.","category":"actions","client":true},{"name":"ToggleSwitch","label":"Toggle switch","slug":"toggle-switch","description":"Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.","category":"forms","client":true},{"name":"ToolCall","label":"Tool call","slug":"tool-call","description":"The record of one tool invocation, with its arguments and result behind a disclosure.","category":"ai","client":true},{"name":"Tooltip","label":"Tooltip","slug":"tooltip","description":"Contextual text label that appears on hover or focus with position and delay options.","category":"overlays","client":true}]`);
1
+ const categories = [{ "id": "actions", "label": "Actions", "description": "Buttons, button groups, and toggles for triggering actions and switching modes." }, { "id": "ai", "label": "AI", "description": "Chat, agent, and model surfaces for building AI products, from the composer to the reasoning trace and the diff an agent proposes." }, { "id": "charts", "label": "Charts", "description": "Data visualisation components for plotting series and activity over time." }, { "id": "data-display", "label": "Data display", "description": "Cards, tables, lists, and badges for presenting structured content." }, { "id": "effects", "label": "Effects", "description": "Ambient and decorative surfaces that sit behind or around the interface." }, { "id": "feedback", "label": "Feedback", "description": "Alerts, toasts, progress, and empty states that tell people what is happening." }, { "id": "forms", "label": "Forms", "description": "Inputs, pickers, and selection controls for collecting and editing values." }, { "id": "layout", "label": "Layout", "description": "Page scaffolding: app shells, sidebars, dividers, and section headings." }, { "id": "navigation", "label": "Navigation", "description": "Top bars, breadcrumbs, tabs, steppers, and pagination for moving through a product." }, { "id": "overlays", "label": "Overlays", "description": "Dialogs, drawers, menus, and tooltips that float above the page." }];
2
+ const components = /* @__PURE__ */ JSON.parse(`[{"name":"Accordion","label":"Accordion","slug":"accordion","description":"Collapsible content sections for organising related information.","category":"data-display","client":true},{"name":"AgentPlan","label":"Agent plan","slug":"agent-plan","description":"A collapsible checklist of an agent's task, with live step states and a progress readout.","category":"ai","client":true},{"name":"AgentStatus","label":"Agent status","slug":"agent-status","description":"A dot-matrix indicator and status line reporting what an agent is doing right now.","category":"ai","client":true},{"name":"AiButton","label":"AI button","slug":"ai-button","description":"The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.","category":"ai","client":true},{"name":"Alert","label":"Alert","slug":"alert","description":"Contextual feedback with status variants, optional dismiss, and compact sizing.","category":"feedback","client":false},{"name":"AlertDialog","label":"Alert dialog","slug":"alert-dialog","description":"Modal confirmation overlay with title, description, and confirm / cancel actions.","category":"overlays","client":true},{"name":"AnchorNav","label":"Anchor nav","slug":"anchor-nav","description":"An on-page list of anchor links that tracks the reader's position and jumps between sections.","category":"navigation","client":true},{"name":"AppLayout","label":"App layout","slug":"app-layout","description":"Full-page template pairing the collapsible App sidebar with a centred content area.","category":"layout","client":true},{"name":"AppSidebar","label":"App sidebar","slug":"app-sidebar","description":"Collapsible navigation rail with accordion sub-items, category headings, and profile section.","category":"layout","client":true},{"name":"AreaChart","label":"Area chart","slug":"area-chart","description":"Filled area chart for showing volume over time, with stacked and single-series variants.","category":"charts","client":false,"folder":"Chart"},{"name":"Avatar","label":"Avatar","slug":"avatar","description":"User profile image with initials and icon fallback, status indicator, and multiple sizes.","category":"data-display","client":true},{"name":"Badge","label":"Badge","slug":"badge","description":"Small inline status labels with info, positive, warning, error, and neutral variants.","category":"data-display","client":false},{"name":"BarChart","label":"Bar chart","slug":"bar-chart","description":"Vertical bars for comparing values across categories or time, with summary stats and tooltips.","category":"charts","client":false,"folder":"Chart"},{"name":"Breadcrumb","label":"Breadcrumb","slug":"breadcrumb","description":"Hierarchical navigation trail showing the user's location within the site.","category":"navigation","client":false},{"name":"Button","label":"Button","slug":"button","description":"Primary and secondary button variants in default and compact sizes, with icon support and multiple states.","category":"actions","client":true},{"name":"ButtonGroup","label":"Button group","slug":"button-group","description":"Horizontal and vertical button group layouts for related actions and navigation patterns.","category":"actions","client":false},{"name":"Card","label":"Card","slug":"card","description":"Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.","category":"data-display","client":true},{"name":"Carousel","label":"Carousel","slug":"carousel","description":"Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.","category":"data-display","client":true},{"name":"ChatHeader","label":"Chat header","slug":"chat-header","description":"The top row of a chat surface, with the conversation title and its controls.","category":"ai","client":false},{"name":"ChatMarker","label":"Chat marker","slug":"chat-marker","description":"An inline conversation separator for date breaks and system notes.","category":"ai","client":false},{"name":"ChatMessage","label":"Chat message","slug":"chat-message","description":"A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.","category":"ai","client":false},{"name":"ChatThread","label":"Chat thread","slug":"chat-thread","description":"A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.","category":"ai","client":true},{"name":"Checkbox","label":"Checkbox","slug":"checkbox","description":"Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.","category":"forms","client":true},{"name":"Chip","label":"Chip","slug":"chip","description":"Compact pills for attributes, filters, and inline metadata.","category":"data-display","client":false},{"name":"CircularButton","label":"Circular button","slug":"circular-button","description":"Round icon button with primary and secondary variants, default and compact sizes.","category":"actions","client":false},{"name":"CodeBlock","label":"Code block","slug":"code-block","description":"Monospace code with a header and one-click copy.","category":"data-display","client":true},{"name":"CodeDiff","label":"Code diff","slug":"code-diff","description":"Unified diff view for code changes, with added, removed, and context lines.","category":"ai","client":false},{"name":"ColorPicker","label":"Colour picker","slug":"color-picker","description":"Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.","category":"forms","client":true},{"name":"Combobox","label":"Combobox","slug":"combobox","description":"A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.","category":"forms","client":true},{"name":"CommandPalette","label":"Command palette","slug":"command-palette","description":"A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.","category":"overlays","client":true},{"name":"Composer","label":"Composer","slug":"composer","description":"An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.","category":"ai","client":true},{"name":"ContactCard","label":"Contact card","slug":"contact-card","description":"Linked contact method with icon, label, and value.","category":"data-display","client":true},{"name":"ContextMenu","label":"Context menu","slug":"context-menu","description":"Right-click menu at the pointer with groups, sub-menus, and shortcut hints.","category":"overlays","client":true},{"name":"ContributionGraph","label":"Contribution graph","slug":"contribution-graph","description":"A year of activity, one cell per day.","category":"charts","client":false},{"name":"DataTable","label":"Data table","slug":"data-table","description":"The wired table: sorting, search, row selection, and pagination assembled around Table.","category":"data-display","client":true},{"name":"DateInput","label":"Date input","slug":"date-input","description":"Date input with native picker, calendar icon, label, and validation states.","category":"forms","client":true},{"name":"DatePicker","label":"Date picker","slug":"date-picker","description":"Inline calendar with month navigation, day selection, and today indicator.","category":"forms","client":true},{"name":"Dialog","label":"Dialog","slug":"dialog","description":"A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.","category":"overlays","client":true},{"name":"Divider","label":"Divider","slug":"divider","description":"A thin rule separating stacked content, with optional inline label and vertical orientation.","category":"layout","client":false},{"name":"DocumentChip","label":"Document chip","slug":"document-chip","description":"A compact file reference with a type icon, name, metadata, and optional remove.","category":"ai","client":false},{"name":"Drawer","label":"Drawer","slug":"drawer","description":"An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.","category":"overlays","client":true},{"name":"Dropdown","label":"Dropdown","slug":"dropdown","description":"Custom select dropdown with keyboard navigation, disabled options, and error states.","category":"forms","client":true},{"name":"DropdownMenu","label":"Dropdown menu","slug":"dropdown-menu","description":"Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.","category":"overlays","client":true},{"name":"EmptyState","label":"Empty state","slug":"empty-state","description":"The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.","category":"feedback","client":false},{"name":"EntityCard","label":"Entity card","slug":"entity-card","description":"Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.","category":"data-display","client":false},{"name":"EventCalendar","label":"Event calendar","slug":"event-calendar","description":"A month grid with event pills, overflow counts, and month navigation.","category":"data-display","client":true},{"name":"Field","label":"Field","slug":"field","description":"The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.","category":"forms","client":true},{"name":"Figure","label":"Figure","slug":"figure","description":"Images with captions, in the case-study frame.","category":"data-display","client":false},{"name":"FileInput","label":"File input","slug":"file-input","description":"A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.","category":"forms","client":true},{"name":"Input","label":"Input","slug":"input","description":"Text input with label, placeholder, left and right icons, helper text, and error states.","category":"forms","client":true},{"name":"Instructions","label":"Instructions","slug":"instructions","description":"Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.","category":"data-display","client":false},{"name":"InterruptCard","label":"Interrupt card","slug":"interrupt-card","description":"A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.","category":"ai","client":false},{"name":"Kbd","label":"Kbd","slug":"kbd","description":"A keyboard key rendered as a keycap, for shortcut hints in menus and prose.","category":"data-display","client":false},{"name":"LineChart","label":"Line chart","slug":"line-chart","description":"Multi-series line chart for trends over time, with per-series colours and a summary row.","category":"charts","client":false,"folder":"Chart"},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MessageActions","label":"Message actions","slug":"message-actions","description":"An icon-button row for message-level actions like copy, retry, and feedback.","category":"ai","client":false},{"name":"MessageCard","label":"Message card","slug":"message-card","description":"A structured rich-content card embedded in a chat message, with media, title, body, and actions.","category":"ai","client":false},{"name":"ModelPicker","label":"Model picker","slug":"model-picker","description":"A model selector for chat surfaces, with per-model descriptions and an optional effort row.","category":"ai","client":true},{"name":"Nav","label":"Nav","slug":"nav","description":"Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.","category":"navigation","client":false},{"name":"NavList","label":"Nav list","slug":"nav-list","description":"Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.","category":"navigation","client":true},{"name":"NotificationCenter","label":"Notification centre","slug":"notification-center","description":"A persistent notification inbox with unread count, filter tabs, and per-item actions.","category":"feedback","client":true},{"name":"NumberInput","label":"Number input","slug":"number-input","description":"Numeric field with increment and decrement steppers and min/max clamping.","category":"forms","client":true},{"name":"Pagination","label":"Pagination","slug":"pagination","description":"Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.","category":"navigation","client":true},{"name":"PieChart","label":"Pie chart","slug":"pie-chart","description":"Proportional share of a whole as a pie or donut, with per-slice colours.","category":"charts","client":false,"folder":"Chart"},{"name":"PinInput","label":"Pin input","slug":"pin-input","description":"Segmented one-time-code input with auto-advance, paste support, and completion callback.","category":"forms","client":true},{"name":"Popover","label":"Popover","slug":"popover","description":"Contextual overlay panel with click and hover triggers, positioned relative to its anchor.","category":"overlays","client":true},{"name":"ProgressBar","label":"Progress bar","slug":"progress-bar","description":"Horizontal bar indicating completion progress, with an optional percentage label.","category":"feedback","client":false},{"name":"PromptSuggestions","label":"Prompt suggestions","slug":"prompt-suggestions","description":"A horizontal row of tappable prompt suggestions to start or steer a conversation.","category":"ai","client":false},{"name":"Prose","label":"Prose","slug":"prose","description":"Token-styled typography for rendered markdown and rich agent output.","category":"ai","client":false},{"name":"Quote","label":"Quote","slug":"quote","description":"Blockquotes and pull-quotes with attribution.","category":"data-display","client":false},{"name":"RadarChart","label":"Radar chart","slug":"radar-chart","description":"Multi-axis comparison of series across categories on a radial grid.","category":"charts","client":false,"folder":"Chart"},{"name":"RadialChart","label":"Radial chart","slug":"radial-chart","description":"Concentric progress rings for completion and KPI readouts.","category":"charts","client":false,"folder":"Chart"},{"name":"RadioButton","label":"Radio button","slug":"radio-button","description":"Radio button and radio group with vertical and horizontal layouts, animated dot indicator.","category":"forms","client":true},{"name":"Reasoning","label":"Reasoning","slug":"reasoning","description":"A model's thinking, disclosed behind a one-line summary and collapsed once it finishes.","category":"ai","client":true},{"name":"ScatterChart","label":"Scatter chart","slug":"scatter-chart","description":"Plots point clusters across two axes to show correlation and distribution.","category":"charts","client":false,"folder":"Chart"},{"name":"SectionTitle","label":"Section title","slug":"section-title","description":"Heading with a divider line and optional trailing content for organising page sections.","category":"layout","client":false},{"name":"SegmentedControl","label":"Segmented control","slug":"segmented-control","description":"Pill-style toggle between related views with keyboard navigation and icon support.","category":"actions","client":true},{"name":"SelectionCard","label":"Selection card","slug":"selection-card","description":"Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.","category":"data-display","client":true},{"name":"ShaderField","label":"Shader field","slug":"shader-field","description":"An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.","category":"effects","client":true},{"name":"Skeleton","label":"Skeleton","slug":"skeleton","description":"Placeholder loading indicators with text, circular, and rectangular variants.","category":"feedback","client":false},{"name":"Slider","label":"Slider","slug":"slider","description":"Range input for selecting a value between a minimum and maximum, in default and compact sizes.","category":"forms","client":true},{"name":"SourceChip","label":"Source chip","slug":"source-chip","description":"A numbered citation pill linking a claim to its source.","category":"ai","client":false},{"name":"Sparkline","label":"Sparkline","slug":"sparkline","description":"Inline trend line for stats and table cells, drawn without axes or chrome.","category":"charts","client":false},{"name":"Spinner","label":"Spinner","slug":"spinner","description":"Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.","category":"feedback","client":false},{"name":"StackedBarChart","label":"Stacked bar chart","slug":"stacked-bar-chart","description":"Bars split into stacked segments to compare totals and their composition.","category":"charts","client":false,"folder":"Chart"},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"Stepper","label":"Stepper","slug":"stepper","description":"Step-by-step progress indicator for wizards and multi-stage flows.","category":"navigation","client":true},{"name":"Swatch","label":"Swatch","slug":"swatch","description":"Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.","category":"forms","client":false},{"name":"Table","label":"Table","slug":"table","description":"Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.","category":"data-display","client":false},{"name":"Tabs","label":"Tabs","slug":"tabs","description":"Tab navigation with underline indicator, icon support, compact size, and full-width mode.","category":"navigation","client":true},{"name":"TagInput","label":"Tag input","slug":"tag-input","description":"Multi-value text input with entries held as removable tags.","category":"forms","client":true},{"name":"Textarea","label":"Textarea","slug":"textarea","description":"Multi-line text input with character counter, resize control, helper text, and error states.","category":"forms","client":true},{"name":"TimePicker","label":"Time picker","slug":"time-picker","description":"Time-of-day field with a dropdown list of selectable times.","category":"forms","client":true},{"name":"Timeline","label":"Timeline","slug":"timeline","description":"Ordered sequences: histories and steppers.","category":"data-display","client":false},{"name":"Toast","label":"Toast","slug":"toast","description":"Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.","category":"feedback","client":true},{"name":"ToggleGroup","label":"Toggle group","slug":"toggle-group","description":"A set of two-state buttons that can be toggled on or off, supporting text and icon items.","category":"actions","client":true},{"name":"ToggleSwitch","label":"Toggle switch","slug":"toggle-switch","description":"Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.","category":"forms","client":true},{"name":"ToolCall","label":"Tool call","slug":"tool-call","description":"The record of one tool invocation, with its arguments and result behind a disclosure.","category":"ai","client":true},{"name":"Tooltip","label":"Tooltip","slug":"tooltip","description":"Contextual text label that appears on hover or focus with position and delay options.","category":"overlays","client":true},{"name":"TreeView","label":"Tree view","slug":"tree-view","description":"Collapsible hierarchy for files, folders, and nested structures.","category":"data-display","client":true},{"name":"Treemap","label":"Treemap","slug":"treemap","description":"Nested rectangles sized by value for part-to-whole breakdowns.","category":"charts","client":false,"folder":"Chart"}]`);
3
3
  const registry = {
4
4
  categories,
5
5
  components
package/index.d.ts CHANGED
@@ -4,11 +4,13 @@
4
4
  * (validate-registry chain). recharts-backed modules live in charts.ts, not here — recharts is an optional peer.
5
5
  */
6
6
  export * from './components/Accordion/Accordion';
7
+ export * from './components/AgentPlan/AgentPlan';
7
8
  export * from './components/AgentStatus/AgentStatus';
8
9
  export * from './components/AgentStatus/AgentStatusPatterns';
9
10
  export * from './components/AiButton/AiButton';
10
11
  export * from './components/Alert/Alert';
11
12
  export * from './components/AlertDialog/AlertDialog';
13
+ export * from './components/AnchorNav/AnchorNav';
12
14
  export * from './components/AppLayout/AppLayout';
13
15
  export * from './components/AppSidebar/AppSidebar';
14
16
  export * from './components/Avatar/Avatar';
@@ -26,6 +28,7 @@ export * from './components/Checkbox/Checkbox';
26
28
  export * from './components/Chip/Chip';
27
29
  export * from './components/CircularButton/CircularButton';
28
30
  export * from './components/CodeBlock/CodeBlock';
31
+ export * from './components/CodeDiff/CodeDiff';
29
32
  export * from './components/ColorPicker/ColorPicker';
30
33
  export * from './components/Combobox/Combobox';
31
34
  export * from './components/CommandPalette/CommandPalette';
@@ -33,6 +36,7 @@ export * from './components/Composer/Composer';
33
36
  export * from './components/ContactCard/ContactCard';
34
37
  export * from './components/ContextMenu/ContextMenu';
35
38
  export * from './components/ContributionGraph/ContributionGraph';
39
+ export * from './components/DataTable/DataTable';
36
40
  export * from './components/DateInput/DateInput';
37
41
  export * from './components/DatePicker/DatePicker';
38
42
  export * from './components/Dialog/Dialog';
@@ -43,6 +47,7 @@ export * from './components/Dropdown/Dropdown';
43
47
  export * from './components/DropdownMenu/DropdownMenu';
44
48
  export * from './components/EmptyState/EmptyState';
45
49
  export * from './components/EntityCard/EntityCard';
50
+ export * from './components/EventCalendar/EventCalendar';
46
51
  export * from './components/Field/Field';
47
52
  export * from './components/Field/FieldContext';
48
53
  export * from './components/Figure/Figure';
@@ -54,9 +59,13 @@ export * from './components/Kbd/Kbd';
54
59
  export * from './components/LinkList/LinkList';
55
60
  export * from './components/MessageActions/MessageActions';
56
61
  export * from './components/MessageCard/MessageCard';
62
+ export * from './components/ModelPicker/ModelPicker';
57
63
  export * from './components/Nav/Nav';
58
64
  export * from './components/NavList/NavList';
65
+ export * from './components/NotificationCenter/NotificationCenter';
66
+ export * from './components/NumberInput/NumberInput';
59
67
  export * from './components/Pagination/Pagination';
68
+ export * from './components/PinInput/PinInput';
60
69
  export * from './components/Popover/Popover';
61
70
  export * from './components/ProgressBar/ProgressBar';
62
71
  export * from './components/PromptSuggestions/PromptSuggestions';
@@ -71,18 +80,23 @@ export * from './components/ShaderField/ShaderField';
71
80
  export * from './components/Skeleton/Skeleton';
72
81
  export * from './components/Slider/Slider';
73
82
  export * from './components/SourceChip/SourceChip';
83
+ export * from './components/Sparkline/Sparkline';
74
84
  export * from './components/Spinner/Spinner';
75
85
  export * from './components/Stat/Stat';
86
+ export * from './components/Stepper/Stepper';
76
87
  export * from './components/Swatch/Swatch';
77
88
  export * from './components/Table/Table';
78
89
  export * from './components/Tabs/Tabs';
90
+ export * from './components/TagInput/TagInput';
79
91
  export * from './components/Textarea/Textarea';
80
92
  export * from './components/Timeline/Timeline';
93
+ export * from './components/TimePicker/TimePicker';
81
94
  export * from './components/Toast/Toast';
82
95
  export * from './components/ToggleGroup/ToggleGroup';
83
96
  export * from './components/ToggleSwitch/ToggleSwitch';
84
97
  export * from './components/ToolCall/ToolCall';
85
98
  export * from './components/Tooltip/Tooltip';
86
- export { componentRegistry, componentMetadata, componentCategories, COMPONENT_COUNT, } from './components/registry';
87
- export type { ComponentMeta } from './components/registry';
99
+ export * from './components/TreeView/TreeView';
100
+ export { componentRegistry, componentMetadata, componentCategories, componentCategoryMetadata, COMPONENT_COUNT, } from './components/registry';
101
+ export type { ComponentMeta, ComponentCategoryMeta } from './components/registry';
88
102
  export { tokenRegistry, TOKEN_COUNT, TOKEN_COUNTS } from './tokens/registry';