rift-ds 1.0.1 → 1.2.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 (51) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +8 -2
  3. package/components/AppLayout/AppLayout.css +13 -3
  4. package/components/AppLayout/AppLayout.d.ts +5 -1
  5. package/components/AppLayout/AppLayout.js +4 -0
  6. package/components/AppSidebar/AppSidebar.css +237 -0
  7. package/components/AppSidebar/AppSidebar.d.ts +32 -3
  8. package/components/AppSidebar/AppSidebar.js +187 -16
  9. package/components/BottomNav/BottomNav.css +417 -0
  10. package/components/BottomNav/BottomNav.d.ts +73 -0
  11. package/components/BottomNav/BottomNav.js +100 -0
  12. package/components/Chart/AreaChart.js +67 -56
  13. package/components/Chart/BarChart.js +67 -56
  14. package/components/Chart/ComboChart.js +93 -82
  15. package/components/Chart/LineChart.js +59 -48
  16. package/components/Chart/PieChart.js +56 -45
  17. package/components/Chart/RadarChart.js +60 -49
  18. package/components/Chart/RadialChart.js +70 -59
  19. package/components/Chart/ScatterChart.js +61 -50
  20. package/components/Chart/StackedBarChart.js +64 -53
  21. package/components/Chart/Treemap.js +34 -23
  22. package/components/Inspector/Inspector.css +511 -0
  23. package/components/Inspector/InspectorDropdown.d.ts +39 -0
  24. package/components/Inspector/InspectorDropdown.js +68 -0
  25. package/components/Inspector/InspectorInput.d.ts +32 -0
  26. package/components/Inspector/InspectorInput.js +52 -0
  27. package/components/Inspector/InspectorSection.d.ts +32 -0
  28. package/components/Inspector/InspectorSection.js +70 -0
  29. package/components/Inspector/InspectorSegmentedControl.d.ts +46 -0
  30. package/components/Inspector/InspectorSegmentedControl.js +62 -0
  31. package/components/Inspector/InspectorSlider.d.ts +41 -0
  32. package/components/Inspector/InspectorSlider.js +81 -0
  33. package/components/Inspector/InspectorToggleSwitch.d.ts +29 -0
  34. package/components/Inspector/InspectorToggleSwitch.js +51 -0
  35. package/components/Nav/Nav.d.ts +11 -3
  36. package/components/Nav/Nav.js +3 -2
  37. package/components/SegmentedControl/SegmentedControl.css +7 -5
  38. package/components/SidebarPanel/SidebarPanel.css +291 -0
  39. package/components/SidebarPanel/SidebarPanel.d.ts +45 -0
  40. package/components/SidebarPanel/SidebarPanel.js +166 -0
  41. package/components/Stepper/Stepper.d.ts +3 -1
  42. package/components/Stepper/Stepper.js +1 -1
  43. package/components/TopAppBar/TopAppBar.css +464 -0
  44. package/components/TopAppBar/TopAppBar.d.ts +80 -0
  45. package/components/TopAppBar/TopAppBar.js +138 -0
  46. package/components/registry.json +84 -1
  47. package/components/registry.json.d.ts +84 -1
  48. package/components/registry.json.js +2 -2
  49. package/index.d.ts +9 -0
  50. package/index.js +18 -0
  51. package/package.json +5 -1
@@ -36,6 +36,11 @@
36
36
  "label": "Forms",
37
37
  "description": "Inputs, pickers, and selection controls for collecting and editing values."
38
38
  },
39
+ {
40
+ "id": "inspector",
41
+ "label": "Inspector",
42
+ "description": "One-row controls for tool panels and settings rails, each carrying its name inside the control and sized to match Button."
43
+ },
39
44
  {
40
45
  "id": "layout",
41
46
  "label": "Layout",
@@ -142,7 +147,7 @@
142
147
  "name": "AppSidebar",
143
148
  "label": "App sidebar",
144
149
  "slug": "app-sidebar",
145
- "description": "Collapsible navigation rail with accordion sub-items, category headings, and profile section.",
150
+ "description": "Collapsible navigation rail with accordion sub-items, a side panel for a third level, category headings, and a profile section.",
146
151
  "category": "layout",
147
152
  "client": true
148
153
  },
@@ -198,6 +203,14 @@
198
203
  "folder": "Chart",
199
204
  "recharts": true
200
205
  },
206
+ {
207
+ "name": "BottomNav",
208
+ "label": "Bottom nav",
209
+ "slug": "bottom-nav",
210
+ "description": "Mobile tab bar for three to five destinations, in the Rift style or as iOS Liquid Glass or Material 3 Expressive.",
211
+ "category": "navigation",
212
+ "client": true
213
+ },
201
214
  {
202
215
  "name": "Breadcrumb",
203
216
  "label": "Breadcrumb",
@@ -569,6 +582,60 @@
569
582
  "category": "forms",
570
583
  "client": true
571
584
  },
585
+ {
586
+ "name": "InspectorDropdown",
587
+ "label": "Inspector dropdown",
588
+ "slug": "inspector-dropdown",
589
+ "description": "One-row select for inspector panels, with the name inside the bar and the library Dropdown's menu and font previews.",
590
+ "category": "inspector",
591
+ "client": true,
592
+ "folder": "Inspector"
593
+ },
594
+ {
595
+ "name": "InspectorInput",
596
+ "label": "Inspector input",
597
+ "slug": "inspector-input",
598
+ "description": "One-row text field for inspector panels, with the name on the left and the value right-aligned in the bar.",
599
+ "category": "inspector",
600
+ "client": true,
601
+ "folder": "Inspector"
602
+ },
603
+ {
604
+ "name": "InspectorSection",
605
+ "label": "Inspector section",
606
+ "slug": "inspector-section",
607
+ "description": "Collapsible, titled run of inspector controls whose open body lets a dropdown menu open past its edge.",
608
+ "category": "inspector",
609
+ "client": true,
610
+ "folder": "Inspector"
611
+ },
612
+ {
613
+ "name": "InspectorSegmentedControl",
614
+ "label": "Inspector segments",
615
+ "slug": "inspector-segmented-control",
616
+ "description": "One-row choice between a few options for inspector panels, as native radios with a neutral selected chip.",
617
+ "category": "inspector",
618
+ "client": true,
619
+ "folder": "Inspector"
620
+ },
621
+ {
622
+ "name": "InspectorSlider",
623
+ "label": "Inspector slider",
624
+ "slug": "inspector-slider",
625
+ "description": "One-row slider for inspector panels, where the whole bar is the control and its fill is the value.",
626
+ "category": "inspector",
627
+ "client": true,
628
+ "folder": "Inspector"
629
+ },
630
+ {
631
+ "name": "InspectorToggleSwitch",
632
+ "label": "Inspector toggle switch",
633
+ "slug": "inspector-toggle-switch",
634
+ "description": "One-row switch for inspector panels, where the whole bar toggles and the track sits at its end.",
635
+ "category": "inspector",
636
+ "client": true,
637
+ "folder": "Inspector"
638
+ },
572
639
  {
573
640
  "name": "Instructions",
574
641
  "label": "Instructions",
@@ -875,6 +942,14 @@
875
942
  "category": "effects",
876
943
  "client": true
877
944
  },
945
+ {
946
+ "name": "SidebarPanel",
947
+ "label": "Sidebar panel",
948
+ "slug": "sidebar-panel",
949
+ "description": "Secondary navigation column listing one section's pages, with group headings and one level of accordion nesting.",
950
+ "category": "layout",
951
+ "client": true
952
+ },
878
953
  {
879
954
  "name": "Skeleton",
880
955
  "label": "Skeleton",
@@ -1101,6 +1176,14 @@
1101
1176
  "category": "overlays",
1102
1177
  "client": true
1103
1178
  },
1179
+ {
1180
+ "name": "TopAppBar",
1181
+ "label": "Top app bar",
1182
+ "slug": "top-app-bar",
1183
+ "description": "Mobile screen header with a menu or back button, title, and actions, in Rift, iOS, or Android style, collapsing on scroll.",
1184
+ "category": "navigation",
1185
+ "client": true
1186
+ },
1104
1187
  {
1105
1188
  "name": "TreeView",
1106
1189
  "label": "Tree view",
@@ -36,6 +36,11 @@ declare const _default: {
36
36
  "label": "Forms",
37
37
  "description": "Inputs, pickers, and selection controls for collecting and editing values."
38
38
  },
39
+ {
40
+ "id": "inspector",
41
+ "label": "Inspector",
42
+ "description": "One-row controls for tool panels and settings rails, each carrying its name inside the control and sized to match Button."
43
+ },
39
44
  {
40
45
  "id": "layout",
41
46
  "label": "Layout",
@@ -142,7 +147,7 @@ declare const _default: {
142
147
  "name": "AppSidebar",
143
148
  "label": "App sidebar",
144
149
  "slug": "app-sidebar",
145
- "description": "Collapsible navigation rail with accordion sub-items, category headings, and profile section.",
150
+ "description": "Collapsible navigation rail with accordion sub-items, a side panel for a third level, category headings, and a profile section.",
146
151
  "category": "layout",
147
152
  "client": true
148
153
  },
@@ -198,6 +203,14 @@ declare const _default: {
198
203
  "folder": "Chart",
199
204
  "recharts": true
200
205
  },
206
+ {
207
+ "name": "BottomNav",
208
+ "label": "Bottom nav",
209
+ "slug": "bottom-nav",
210
+ "description": "Mobile tab bar for three to five destinations, in the Rift style or as iOS Liquid Glass or Material 3 Expressive.",
211
+ "category": "navigation",
212
+ "client": true
213
+ },
201
214
  {
202
215
  "name": "Breadcrumb",
203
216
  "label": "Breadcrumb",
@@ -569,6 +582,60 @@ declare const _default: {
569
582
  "category": "forms",
570
583
  "client": true
571
584
  },
585
+ {
586
+ "name": "InspectorDropdown",
587
+ "label": "Inspector dropdown",
588
+ "slug": "inspector-dropdown",
589
+ "description": "One-row select for inspector panels, with the name inside the bar and the library Dropdown's menu and font previews.",
590
+ "category": "inspector",
591
+ "client": true,
592
+ "folder": "Inspector"
593
+ },
594
+ {
595
+ "name": "InspectorInput",
596
+ "label": "Inspector input",
597
+ "slug": "inspector-input",
598
+ "description": "One-row text field for inspector panels, with the name on the left and the value right-aligned in the bar.",
599
+ "category": "inspector",
600
+ "client": true,
601
+ "folder": "Inspector"
602
+ },
603
+ {
604
+ "name": "InspectorSection",
605
+ "label": "Inspector section",
606
+ "slug": "inspector-section",
607
+ "description": "Collapsible, titled run of inspector controls whose open body lets a dropdown menu open past its edge.",
608
+ "category": "inspector",
609
+ "client": true,
610
+ "folder": "Inspector"
611
+ },
612
+ {
613
+ "name": "InspectorSegmentedControl",
614
+ "label": "Inspector segments",
615
+ "slug": "inspector-segmented-control",
616
+ "description": "One-row choice between a few options for inspector panels, as native radios with a neutral selected chip.",
617
+ "category": "inspector",
618
+ "client": true,
619
+ "folder": "Inspector"
620
+ },
621
+ {
622
+ "name": "InspectorSlider",
623
+ "label": "Inspector slider",
624
+ "slug": "inspector-slider",
625
+ "description": "One-row slider for inspector panels, where the whole bar is the control and its fill is the value.",
626
+ "category": "inspector",
627
+ "client": true,
628
+ "folder": "Inspector"
629
+ },
630
+ {
631
+ "name": "InspectorToggleSwitch",
632
+ "label": "Inspector toggle switch",
633
+ "slug": "inspector-toggle-switch",
634
+ "description": "One-row switch for inspector panels, where the whole bar toggles and the track sits at its end.",
635
+ "category": "inspector",
636
+ "client": true,
637
+ "folder": "Inspector"
638
+ },
572
639
  {
573
640
  "name": "Instructions",
574
641
  "label": "Instructions",
@@ -875,6 +942,14 @@ declare const _default: {
875
942
  "category": "effects",
876
943
  "client": true
877
944
  },
945
+ {
946
+ "name": "SidebarPanel",
947
+ "label": "Sidebar panel",
948
+ "slug": "sidebar-panel",
949
+ "description": "Secondary navigation column listing one section's pages, with group headings and one level of accordion nesting.",
950
+ "category": "layout",
951
+ "client": true
952
+ },
878
953
  {
879
954
  "name": "Skeleton",
880
955
  "label": "Skeleton",
@@ -1101,6 +1176,14 @@ declare const _default: {
1101
1176
  "category": "overlays",
1102
1177
  "client": true
1103
1178
  },
1179
+ {
1180
+ "name": "TopAppBar",
1181
+ "label": "Top app bar",
1182
+ "slug": "top-app-bar",
1183
+ "description": "Mobile screen header with a menu or back button, title, and actions, in Rift, iOS, or Android style, collapsing on scroll.",
1184
+ "category": "navigation",
1185
+ "client": true
1186
+ },
1104
1187
  {
1105
1188
  "name": "TreeView",
1106
1189
  "label": "Tree view",
@@ -1,5 +1,5 @@
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": "maps", "label": "Maps", "description": "Geographic surfaces for showing where things are and what connects them: a globe, a flat world map, and the callout and key that explain them." }, { "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":"AgentRail","label":"Agent rail","slug":"agent-rail","description":"The companion rail of an agent product: the agent's portrait over tabbed panes for activity, approvals, automations, and personalization.","category":"ai","client":false},{"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 ringed by a turning gradient and glow, with an optional hover-summoned AI-summary panel and prompt chips.","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":"AnimatedNumber","label":"Animated number","slug":"animated-number","description":"A number that counts to its value: count-up on mount, eased tweens on change, tabular digits that never jitter.","category":"data-display","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","recharts":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":"AvatarGroup","label":"Avatar group","slug":"avatar-group","description":"Overlapping avatar stack with a +N counter for the overflow.","category":"data-display","client":false},{"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":"Banner","label":"Banner","slug":"banner","description":"Full-width status strip for page-level announcements, with an action slot and optional dismissal.","category":"feedback","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","recharts":true},{"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, secondary, tertiary, neutral and destructive 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":"CardStack","label":"Card stack","slug":"card-stack","description":"A deck of cards showing one at a time, flipped through with a lift-and-settle animation.","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, secondary, tertiary and neutral 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":"ComboChart","label":"Combo chart","slug":"combo-chart","description":"Bar and line series in one chart, with an optional second y-axis for pairs in different units, like spend and ROAS.","category":"charts","client":false,"folder":"Chart","recharts":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, a page-context note, 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":"FilterBar","label":"Filter bar","slug":"filter-bar","description":"A row of filter chips for narrowing a collection, each opening a popover of options, with per-filter and clear-all resets.","category":"forms","client":true},{"name":"FunnelChart","label":"Funnel chart","slug":"funnel-chart","description":"Ordered funnel stages as centred trapezoid bands, each sized by its share of the first stage.","category":"charts","client":false,"recharts":true},{"name":"GanttChart","label":"Gantt chart","slug":"gantt-chart","description":"Phases and tasks as bars on a shared timeline, with milestones, progress, and a today rule.","category":"charts","client":false},{"name":"Gauge","label":"Gauge","slug":"gauge","description":"A radial dial for a single bounded reading, recoloured through the status roles as it crosses thresholds.","category":"charts","client":false},{"name":"Globe","label":"Globe","slug":"globe","description":"An orthographic globe with markers and great-circle arcs, rotated by drag, keys, or a slow spin.","category":"maps","client":true},{"name":"HoverCard","label":"Hover card","slug":"hover-card","description":"Rich preview panel that opens from hover or focus, with interactive content and position options.","category":"overlays","client":true},{"name":"ImageCompare","label":"Image compare","slug":"image-compare","description":"Before-and-after image comparison with a draggable divider, keyboard control, and corner labels.","category":"data-display","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":"LegendTile","label":"Legend tile","slug":"legend-tile","description":"The labelled value tile under a chart: a series dot, the series name, and its reading, on an inset fill.","category":"charts","client":false},{"name":"Lightbox","label":"Lightbox","slug":"lightbox","description":"Fullscreen media viewer on the shared overlay stack: deep scrim, caption chip, gallery stepping, trapped and restored focus.","category":"overlays","client":true},{"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","recharts":true},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MapCallout","label":"Map callout","slug":"map-callout","description":"The annotation beside a map point: a name in capitals over monospace readout lines.","category":"maps","client":false},{"name":"MapLegend","label":"Map legend","slug":"map-legend","description":"The corner block of a map: its name, what it shows, and the key to its markers.","category":"maps","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":"Meter","label":"Meter","slug":"meter","description":"Level indicator for a known quantity, with a status-coloured fill and an optional value readout.","category":"feedback","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":"Panel","label":"Panel","slug":"panel","description":"The plain dashboard surface: a rounded container with no border or shadow, just padding and a gap.","category":"layout","client":false},{"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","recharts":true},{"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":true},{"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","recharts":true},{"name":"RadialChart","label":"Radial chart","slug":"radial-chart","description":"Concentric progress rings for completion and KPI readouts.","category":"charts","client":false,"folder":"Chart","recharts":true},{"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":"Rating","label":"Rating","slug":"rating","description":"Star-scale rating control with keyboard selection, a read-only mode, and a configurable icon.","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":"RichDropdown","label":"Rich dropdown","slug":"rich-dropdown","description":"Dropdown's rich sibling: options preview their own heading face, body face, and key colour.","category":"forms","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","recharts":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":"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":"SourceTrail","label":"Source trail","slug":"source-trail","description":"The sources an agent opened while answering, as a collapsible list with per-item status.","category":"ai","client":true},{"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":"SplitButton","label":"Split button","slug":"split-button","description":"Primary action with an attached menu of alternatives, composing Button and DropdownMenu in one pill.","category":"actions","client":false},{"name":"SplitPane","label":"Split pane","slug":"split-pane","description":"Two resizable regions with a draggable, keyboard-operable divider between them.","category":"layout","client":true},{"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","recharts":true},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"StatusDot","label":"Status dot","slug":"status-dot","description":"The bare status mark: a dot in the five status roles, with an optional label and a live pulse for recording and online-now states.","category":"feedback","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":"StreamingText","label":"Streaming text","slug":"streaming-text","description":"Progressive reveal for text arriving in chunks, with a blinking cursor while more is coming.","category":"ai","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":"ThreadPanel","label":"Thread panel","slug":"thread-panel","description":"The session-history rail for chat products: brand header, new-thread action, standing controls, projects, grouped detail-rich threads, and a profile footer.","category":"ai","client":false},{"name":"ThreadTabs","label":"Thread tabs","slug":"thread-tabs","description":"The strip of open chat sessions: pill tabs with unread dots and hover-revealed close buttons, a new-tab action, and animated enter and exit.","category":"ai","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":"Toolbar","label":"Toolbar","slug":"toolbar","description":"A grouped strip of controls in one pill shell: clusters, separators, arrow-key focus, and a glass floating variant.","category":"layout","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","recharts":true},{"name":"UsageCard","label":"Usage card","slug":"usage-card","description":"An agent's budgets at a glance: context window and plan limits as meter rows with reset captions.","category":"ai","client":false},{"name":"Waveform","label":"Waveform","slug":"waveform","description":"Voice made visible: a row of bars dancing on the shared twelve-slot cycle, or tracking a live analyser level by level.","category":"ai","client":false},{"name":"WorldMap","label":"World map","slug":"world-map","description":"A flat world map from Natural Earth land shapes: token-coloured continents, framed bounds, and colour-carrying markers.","category":"maps","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": "inspector", "label": "Inspector", "description": "One-row controls for tool panels and settings rails, each carrying its name inside the control and sized to match Button." }, { "id": "layout", "label": "Layout", "description": "Page scaffolding: app shells, sidebars, dividers, and section headings." }, { "id": "maps", "label": "Maps", "description": "Geographic surfaces for showing where things are and what connects them: a globe, a flat world map, and the callout and key that explain them." }, { "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":"AgentRail","label":"Agent rail","slug":"agent-rail","description":"The companion rail of an agent product: the agent's portrait over tabbed panes for activity, approvals, automations, and personalization.","category":"ai","client":false},{"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 ringed by a turning gradient and glow, with an optional hover-summoned AI-summary panel and prompt chips.","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":"AnimatedNumber","label":"Animated number","slug":"animated-number","description":"A number that counts to its value: count-up on mount, eased tweens on change, tabular digits that never jitter.","category":"data-display","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, a side panel for a third level, category headings, and a 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","recharts":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":"AvatarGroup","label":"Avatar group","slug":"avatar-group","description":"Overlapping avatar stack with a +N counter for the overflow.","category":"data-display","client":false},{"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":"Banner","label":"Banner","slug":"banner","description":"Full-width status strip for page-level announcements, with an action slot and optional dismissal.","category":"feedback","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","recharts":true},{"name":"BottomNav","label":"Bottom nav","slug":"bottom-nav","description":"Mobile tab bar for three to five destinations, in the Rift style or as iOS Liquid Glass or Material 3 Expressive.","category":"navigation","client":true},{"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, secondary, tertiary, neutral and destructive 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":"CardStack","label":"Card stack","slug":"card-stack","description":"A deck of cards showing one at a time, flipped through with a lift-and-settle animation.","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, secondary, tertiary and neutral 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":"ComboChart","label":"Combo chart","slug":"combo-chart","description":"Bar and line series in one chart, with an optional second y-axis for pairs in different units, like spend and ROAS.","category":"charts","client":false,"folder":"Chart","recharts":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, a page-context note, 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":"FilterBar","label":"Filter bar","slug":"filter-bar","description":"A row of filter chips for narrowing a collection, each opening a popover of options, with per-filter and clear-all resets.","category":"forms","client":true},{"name":"FunnelChart","label":"Funnel chart","slug":"funnel-chart","description":"Ordered funnel stages as centred trapezoid bands, each sized by its share of the first stage.","category":"charts","client":false,"recharts":true},{"name":"GanttChart","label":"Gantt chart","slug":"gantt-chart","description":"Phases and tasks as bars on a shared timeline, with milestones, progress, and a today rule.","category":"charts","client":false},{"name":"Gauge","label":"Gauge","slug":"gauge","description":"A radial dial for a single bounded reading, recoloured through the status roles as it crosses thresholds.","category":"charts","client":false},{"name":"Globe","label":"Globe","slug":"globe","description":"An orthographic globe with markers and great-circle arcs, rotated by drag, keys, or a slow spin.","category":"maps","client":true},{"name":"HoverCard","label":"Hover card","slug":"hover-card","description":"Rich preview panel that opens from hover or focus, with interactive content and position options.","category":"overlays","client":true},{"name":"ImageCompare","label":"Image compare","slug":"image-compare","description":"Before-and-after image comparison with a draggable divider, keyboard control, and corner labels.","category":"data-display","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":"InspectorDropdown","label":"Inspector dropdown","slug":"inspector-dropdown","description":"One-row select for inspector panels, with the name inside the bar and the library Dropdown's menu and font previews.","category":"inspector","client":true,"folder":"Inspector"},{"name":"InspectorInput","label":"Inspector input","slug":"inspector-input","description":"One-row text field for inspector panels, with the name on the left and the value right-aligned in the bar.","category":"inspector","client":true,"folder":"Inspector"},{"name":"InspectorSection","label":"Inspector section","slug":"inspector-section","description":"Collapsible, titled run of inspector controls whose open body lets a dropdown menu open past its edge.","category":"inspector","client":true,"folder":"Inspector"},{"name":"InspectorSegmentedControl","label":"Inspector segments","slug":"inspector-segmented-control","description":"One-row choice between a few options for inspector panels, as native radios with a neutral selected chip.","category":"inspector","client":true,"folder":"Inspector"},{"name":"InspectorSlider","label":"Inspector slider","slug":"inspector-slider","description":"One-row slider for inspector panels, where the whole bar is the control and its fill is the value.","category":"inspector","client":true,"folder":"Inspector"},{"name":"InspectorToggleSwitch","label":"Inspector toggle switch","slug":"inspector-toggle-switch","description":"One-row switch for inspector panels, where the whole bar toggles and the track sits at its end.","category":"inspector","client":true,"folder":"Inspector"},{"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":"LegendTile","label":"Legend tile","slug":"legend-tile","description":"The labelled value tile under a chart: a series dot, the series name, and its reading, on an inset fill.","category":"charts","client":false},{"name":"Lightbox","label":"Lightbox","slug":"lightbox","description":"Fullscreen media viewer on the shared overlay stack: deep scrim, caption chip, gallery stepping, trapped and restored focus.","category":"overlays","client":true},{"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","recharts":true},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MapCallout","label":"Map callout","slug":"map-callout","description":"The annotation beside a map point: a name in capitals over monospace readout lines.","category":"maps","client":false},{"name":"MapLegend","label":"Map legend","slug":"map-legend","description":"The corner block of a map: its name, what it shows, and the key to its markers.","category":"maps","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":"Meter","label":"Meter","slug":"meter","description":"Level indicator for a known quantity, with a status-coloured fill and an optional value readout.","category":"feedback","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":"Panel","label":"Panel","slug":"panel","description":"The plain dashboard surface: a rounded container with no border or shadow, just padding and a gap.","category":"layout","client":false},{"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","recharts":true},{"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":true},{"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","recharts":true},{"name":"RadialChart","label":"Radial chart","slug":"radial-chart","description":"Concentric progress rings for completion and KPI readouts.","category":"charts","client":false,"folder":"Chart","recharts":true},{"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":"Rating","label":"Rating","slug":"rating","description":"Star-scale rating control with keyboard selection, a read-only mode, and a configurable icon.","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":"RichDropdown","label":"Rich dropdown","slug":"rich-dropdown","description":"Dropdown's rich sibling: options preview their own heading face, body face, and key colour.","category":"forms","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","recharts":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":"effects","client":true},{"name":"SidebarPanel","label":"Sidebar panel","slug":"sidebar-panel","description":"Secondary navigation column listing one section's pages, with group headings and one level of accordion nesting.","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":"SourceTrail","label":"Source trail","slug":"source-trail","description":"The sources an agent opened while answering, as a collapsible list with per-item status.","category":"ai","client":true},{"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":"SplitButton","label":"Split button","slug":"split-button","description":"Primary action with an attached menu of alternatives, composing Button and DropdownMenu in one pill.","category":"actions","client":false},{"name":"SplitPane","label":"Split pane","slug":"split-pane","description":"Two resizable regions with a draggable, keyboard-operable divider between them.","category":"layout","client":true},{"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","recharts":true},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"StatusDot","label":"Status dot","slug":"status-dot","description":"The bare status mark: a dot in the five status roles, with an optional label and a live pulse for recording and online-now states.","category":"feedback","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":"StreamingText","label":"Streaming text","slug":"streaming-text","description":"Progressive reveal for text arriving in chunks, with a blinking cursor while more is coming.","category":"ai","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":"ThreadPanel","label":"Thread panel","slug":"thread-panel","description":"The session-history rail for chat products: brand header, new-thread action, standing controls, projects, grouped detail-rich threads, and a profile footer.","category":"ai","client":false},{"name":"ThreadTabs","label":"Thread tabs","slug":"thread-tabs","description":"The strip of open chat sessions: pill tabs with unread dots and hover-revealed close buttons, a new-tab action, and animated enter and exit.","category":"ai","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":"Toolbar","label":"Toolbar","slug":"toolbar","description":"A grouped strip of controls in one pill shell: clusters, separators, arrow-key focus, and a glass floating variant.","category":"layout","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":"TopAppBar","label":"Top app bar","slug":"top-app-bar","description":"Mobile screen header with a menu or back button, title, and actions, in Rift, iOS, or Android style, collapsing on scroll.","category":"navigation","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","recharts":true},{"name":"UsageCard","label":"Usage card","slug":"usage-card","description":"An agent's budgets at a glance: context window and plan limits as meter rows with reset captions.","category":"ai","client":false},{"name":"Waveform","label":"Waveform","slug":"waveform","description":"Voice made visible: a row of bars dancing on the shared twelve-slot cycle, or tracking a live analyser level by level.","category":"ai","client":false},{"name":"WorldMap","label":"World map","slug":"world-map","description":"A flat world map from Natural Earth land shapes: token-coloured continents, framed bounds, and colour-carrying markers.","category":"maps","client":true}]`);
3
3
  const registry = {
4
4
  categories,
5
5
  components
package/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export * from './components/Avatar/Avatar';
19
19
  export * from './components/AvatarGroup/AvatarGroup';
20
20
  export * from './components/Badge/Badge';
21
21
  export * from './components/Banner/Banner';
22
+ export * from './components/BottomNav/BottomNav';
22
23
  export * from './components/Breadcrumb/Breadcrumb';
23
24
  export * from './components/Button/Button';
24
25
  export * from './components/ButtonGroup/ButtonGroup';
@@ -64,6 +65,12 @@ export * from './components/Globe/Globe';
64
65
  export * from './components/HoverCard/HoverCard';
65
66
  export * from './components/ImageCompare/ImageCompare';
66
67
  export * from './components/Input/Input';
68
+ export * from './components/Inspector/InspectorDropdown';
69
+ export * from './components/Inspector/InspectorInput';
70
+ export * from './components/Inspector/InspectorSection';
71
+ export * from './components/Inspector/InspectorSegmentedControl';
72
+ export * from './components/Inspector/InspectorSlider';
73
+ export * from './components/Inspector/InspectorToggleSwitch';
67
74
  export * from './components/Instructions/Instructions';
68
75
  export * from './components/InterruptCard/InterruptCard';
69
76
  export * from './components/Kbd/Kbd';
@@ -96,6 +103,7 @@ export * from './components/SectionTitle/SectionTitle';
96
103
  export * from './components/SegmentedControl/SegmentedControl';
97
104
  export * from './components/SelectionCard/SelectionCard';
98
105
  export * from './components/ShaderField/ShaderField';
106
+ export * from './components/SidebarPanel/SidebarPanel';
99
107
  export * from './components/Skeleton/Skeleton';
100
108
  export * from './components/Slider/Slider';
101
109
  export * from './components/SourceChip/SourceChip';
@@ -123,6 +131,7 @@ export * from './components/ToggleSwitch/ToggleSwitch';
123
131
  export * from './components/Toolbar/Toolbar';
124
132
  export * from './components/ToolCall/ToolCall';
125
133
  export * from './components/Tooltip/Tooltip';
134
+ export * from './components/TopAppBar/TopAppBar';
126
135
  export * from './components/TreeView/TreeView';
127
136
  export * from './components/UsageCard/UsageCard';
128
137
  export * from './components/Waveform/Waveform';
package/index.js CHANGED
@@ -14,6 +14,7 @@ import { Avatar } from "./components/Avatar/Avatar.js";
14
14
  import { AvatarGroup } from "./components/AvatarGroup/AvatarGroup.js";
15
15
  import { Badge } from "./components/Badge/Badge.js";
16
16
  import { Banner } from "./components/Banner/Banner.js";
17
+ import { BottomNav } from "./components/BottomNav/BottomNav.js";
17
18
  import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
18
19
  import { Button } from "./components/Button/Button.js";
19
20
  import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
@@ -59,6 +60,12 @@ import { Globe } from "./components/Globe/Globe.js";
59
60
  import { HoverCard } from "./components/HoverCard/HoverCard.js";
60
61
  import { ImageCompare } from "./components/ImageCompare/ImageCompare.js";
61
62
  import { Input } from "./components/Input/Input.js";
63
+ import { InspectorDropdown } from "./components/Inspector/InspectorDropdown.js";
64
+ import { InspectorInput } from "./components/Inspector/InspectorInput.js";
65
+ import { InspectorSection } from "./components/Inspector/InspectorSection.js";
66
+ import { InspectorSegmentedControl } from "./components/Inspector/InspectorSegmentedControl.js";
67
+ import { InspectorSlider } from "./components/Inspector/InspectorSlider.js";
68
+ import { InspectorToggleSwitch } from "./components/Inspector/InspectorToggleSwitch.js";
62
69
  import { Instructions } from "./components/Instructions/Instructions.js";
63
70
  import { InterruptCard } from "./components/InterruptCard/InterruptCard.js";
64
71
  import { Kbd } from "./components/Kbd/Kbd.js";
@@ -91,6 +98,7 @@ import { SectionTitle } from "./components/SectionTitle/SectionTitle.js";
91
98
  import { SegmentedControl } from "./components/SegmentedControl/SegmentedControl.js";
92
99
  import { SelectionCard } from "./components/SelectionCard/SelectionCard.js";
93
100
  import { ShaderField } from "./components/ShaderField/ShaderField.js";
101
+ import { SidebarPanel } from "./components/SidebarPanel/SidebarPanel.js";
94
102
  import { Skeleton } from "./components/Skeleton/Skeleton.js";
95
103
  import { Slider } from "./components/Slider/Slider.js";
96
104
  import { SourceChip } from "./components/SourceChip/SourceChip.js";
@@ -118,6 +126,7 @@ import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
118
126
  import { Toolbar, ToolbarSeparator } from "./components/Toolbar/Toolbar.js";
119
127
  import { ToolCall } from "./components/ToolCall/ToolCall.js";
120
128
  import { Tooltip } from "./components/Tooltip/Tooltip.js";
129
+ import { TopAppBar } from "./components/TopAppBar/TopAppBar.js";
121
130
  import { TreeView } from "./components/TreeView/TreeView.js";
122
131
  import { UsageCard } from "./components/UsageCard/UsageCard.js";
123
132
  import { Waveform } from "./components/Waveform/Waveform.js";
@@ -144,6 +153,7 @@ export {
144
153
  BLOB_COUNT,
145
154
  Badge,
146
155
  Banner,
156
+ BottomNav,
147
157
  Breadcrumb,
148
158
  Button,
149
159
  ButtonGroup,
@@ -193,6 +203,12 @@ export {
193
203
  HoverCard,
194
204
  ImageCompare,
195
205
  Input,
206
+ InspectorDropdown,
207
+ InspectorInput,
208
+ InspectorSection,
209
+ InspectorSegmentedControl,
210
+ InspectorSlider,
211
+ InspectorToggleSwitch,
196
212
  Instructions,
197
213
  InterruptCard,
198
214
  Kbd,
@@ -227,6 +243,7 @@ export {
227
243
  SegmentedControl,
228
244
  SelectionCard,
229
245
  ShaderField,
246
+ SidebarPanel,
230
247
  Skeleton,
231
248
  Slider,
232
249
  SourceChip,
@@ -258,6 +275,7 @@ export {
258
275
  Toolbar,
259
276
  ToolbarSeparator,
260
277
  Tooltip,
278
+ TopAppBar,
261
279
  TreeView,
262
280
  UsageCard,
263
281
  Waveform,
package/package.json CHANGED
@@ -1,7 +1,11 @@
1
1
  {
2
2
  "name": "rift-ds",
3
- "version": "1.0.1",
3
+ "version": "1.2.0",
4
4
  "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
5
+ "author": {
6
+ "name": "Robert Ritacca",
7
+ "url": "https://robertritacca.com"
8
+ },
5
9
  "license": "MIT",
6
10
  "repository": {
7
11
  "type": "git",