@robr0/design-system 0.7.0 → 0.9.0

package/components/registry.json

@@ -1,15 +1,56 @@
 {
   "$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.",
   "categories": [
-    "actions",
-    "ai",
-    "charts",
-    "data-display",
-    "feedback",
-    "forms",
-    "layout",
-    "navigation",
-    "overlays"
+    {
+      "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."
+    }
   ],
   "components": [
     {
@@ -20,6 +61,14 @@
       "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",
@@ -52,6 +101,14 @@
       "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",
@@ -68,6 +125,15 @@
       "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",
@@ -84,6 +150,15 @@
       "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",
@@ -124,14 +199,6 @@
       "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",
@@ -196,6 +263,14 @@
       "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",
@@ -252,6 +327,14 @@
       "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",
@@ -332,6 +415,14 @@
       "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",
@@ -388,6 +479,15 @@
       "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",
@@ -412,10 +512,18 @@
       "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": "Navigation",
-      "slug": "navigation",
+      "label": "Nav",
+      "slug": "nav",
       "description": "Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.",
       "category": "navigation",
       "client": false
@@ -428,6 +536,22 @@
       "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",
@@ -436,6 +560,23 @@
       "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",
@@ -476,6 +617,24 @@
       "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",
@@ -492,6 +651,15 @@
       "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",
@@ -521,7 +689,7 @@
       "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",
+      "category": "effects",
       "client": true
     },
     {
@@ -548,6 +716,14 @@
       "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",
@@ -556,6 +732,15 @@
       "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",
@@ -564,6 +749,14 @@
       "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",
@@ -588,6 +781,14 @@
       "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",
@@ -596,6 +797,14 @@
       "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",
@@ -643,6 +852,23 @@
       "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"
     }
   ],
   "docOnlyHelpers": [