@robr0/design-system 0.8.0 → 0.10.0

package/components/TreeView/TreeView.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo, useRef, useCallback } from "react";
+import "./TreeView.css";
+import "../../fonts/material-symbols.css";
+const isBranchNode = (node) => Array.isArray(node.children) && node.children.length > 0;
+const TreeView = React.forwardRef(
+  ({
+    nodes,
+    defaultExpandedIds = [],
+    expandedIds,
+    onExpandedChange,
+    selectedId,
+    defaultSelectedId,
+    onSelect,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-treeview";
+    const baseId = React.useId();
+    const [internalExpanded, setInternalExpanded] = useState(
+      () => new Set(defaultExpandedIds)
+    );
+    const [internalSelected, setInternalSelected] = useState(
+      defaultSelectedId
+    );
+    const [focusedId, setFocusedId] = useState(void 0);
+    const expandedSet = useMemo(
+      () => expandedIds !== void 0 ? new Set(expandedIds) : internalExpanded,
+      [expandedIds, internalExpanded]
+    );
+    const selected = selectedId !== void 0 ? selectedId : internalSelected;
+    const itemRefs = useRef(/* @__PURE__ */ new Map());
+    const indexById = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      let i = 0;
+      const walk = (list) => {
+        for (const node of list) {
+          map.set(node.id, i);
+          i += 1;
+          if (node.children) walk(node.children);
+        }
+      };
+      walk(nodes);
+      return map;
+    }, [nodes]);
+    const parentById = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      const walk = (list, parent) => {
+        for (const node of list) {
+          map.set(node.id, parent);
+          if (node.children) walk(node.children, node.id);
+        }
+      };
+      walk(nodes);
+      return map;
+    }, [nodes]);
+    const visibleNodes = useMemo(() => {
+      const out = [];
+      const walk = (list) => {
+        for (const node of list) {
+          out.push(node);
+          if (isBranchNode(node) && expandedSet.has(node.id)) walk(node.children);
+        }
+      };
+      walk(nodes);
+      return out;
+    }, [nodes, expandedSet]);
+    const visibleIds = useMemo(
+      () => new Set(visibleNodes.map((node) => node.id)),
+      [visibleNodes]
+    );
+    const tabbableId = focusedId !== void 0 && visibleIds.has(focusedId) ? focusedId : selected !== void 0 && visibleIds.has(selected) ? selected : visibleNodes[0]?.id;
+    const commitExpanded = useCallback(
+      (next) => {
+        if (expandedIds === void 0) setInternalExpanded(next);
+        onExpandedChange?.(Array.from(next));
+      },
+      [expandedIds, onExpandedChange]
+    );
+    const toggleBranch = useCallback(
+      (id) => {
+        const next = new Set(expandedSet);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        commitExpanded(next);
+      },
+      [expandedSet, commitExpanded]
+    );
+    const selectNode = useCallback(
+      (id) => {
+        if (selectedId === void 0) setInternalSelected(id);
+        onSelect?.(id);
+      },
+      [selectedId, onSelect]
+    );
+    const focusNode = useCallback((id) => {
+      if (id === void 0) return;
+      setFocusedId(id);
+      itemRefs.current.get(id)?.focus();
+    }, []);
+    const handleKeyDown = (event, node) => {
+      const branch = isBranchNode(node);
+      const expanded = expandedSet.has(node.id);
+      const index = visibleNodes.findIndex((n) => n.id === node.id);
+      let handled = true;
+      switch (event.key) {
+        case "ArrowDown":
+          focusNode(visibleNodes[index + 1]?.id);
+          break;
+        case "ArrowUp":
+          focusNode(visibleNodes[index - 1]?.id);
+          break;
+        case "ArrowRight":
+          if (branch && !expanded) {
+            toggleBranch(node.id);
+          } else if (branch && expanded) {
+            focusNode(node.children[0]?.id);
+          }
+          break;
+        case "ArrowLeft":
+          if (branch && expanded) {
+            toggleBranch(node.id);
+          } else {
+            focusNode(parentById.get(node.id));
+          }
+          break;
+        case "Home":
+          focusNode(visibleNodes[0]?.id);
+          break;
+        case "End":
+          focusNode(visibleNodes[visibleNodes.length - 1]?.id);
+          break;
+        case "Enter":
+        case " ":
+          selectNode(node.id);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    const renderNode = (node, depth) => {
+      const branch = isBranchNode(node);
+      const expanded = branch && expandedSet.has(node.id);
+      const isSelected = selected === node.id;
+      const labelId = `${baseId}-label-${indexById.get(node.id)}`;
+      const icon = node.icon ?? (branch ? "folder" : "draft");
+      const rowClasses = [
+        `${baseClass}__row`,
+        isSelected && `${baseClass}__row--selected`
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          role: "treeitem",
+          "aria-expanded": branch ? expanded : void 0,
+          "aria-selected": isSelected,
+          "aria-labelledby": labelId,
+          tabIndex: node.id === tabbableId ? 0 : -1,
+          className: `${baseClass}__item`,
+          ref: (el) => {
+            if (el) {
+              itemRefs.current.set(node.id, el);
+            } else {
+              itemRefs.current.delete(node.id);
+            }
+          },
+          onKeyDown: (event) => handleKeyDown(event, node),
+          onFocus: (event) => {
+            event.stopPropagation();
+            setFocusedId(node.id);
+          },
+          onClick: (event) => {
+            event.stopPropagation();
+            if (branch) toggleBranch(node.id);
+            selectNode(node.id);
+            focusNode(node.id);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: rowClasses,
+                style: { "--ds-treeview-depth": depth },
+                children: [
+                  branch ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__chevron material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "chevron_right"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__chevron ${baseClass}__chevron--spacer`,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__icon material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { id: labelId, className: `${baseClass}__label`, children: node.label })
+                ]
+              }
+            ),
+            expanded && /* @__PURE__ */ jsx("ul", { role: "group", className: `${baseClass}__group`, children: node.children.map((child) => renderNode(child, depth + 1)) })
+          ]
+        },
+        node.id
+      );
+    };
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("ul", { ...rest, ref, role: "tree", className: classes, children: nodes.map((node) => renderNode(node, 0)) });
+  }
+);
+TreeView.displayName = "TreeView";
+export {
+  TreeView
+};

package/components/registry.d.ts

@@ -4,10 +4,11 @@
  *
  * The data lives in registry.json. Each entry in `components` carries:
  *
- *   name        the folder under src/components (also the exported name)
- *   label       the display name — "Navigation" for the Nav folder
- *   slug        the website route segment — stored, not derived, so the
- *               Nav → navigation exception is plain data rather than a
+ *   name        the exported component name; also the folder under
+ *               src/components unless `folder` says otherwise
+ *   label       the display name — "Nav list" for the NavList folder
+ *   slug        the website route segment — stored, not derived, so a
+ *               name-to-slug exception stays plain data rather than a
  *               special case duplicated across validators
  *   description one line, used for the page title, the sidebar search index,
  *               and anywhere the component is summarised
@@ -16,6 +17,9 @@
  *               uses hooks or defines handlers. Presentational components are
  *               deliberately false so consumers can render them from a React
  *               Server Component.
+ *   folder      set only when the implementation lives in a shared folder
+ *               rather than one named after the component — the nine chart
+ *               components all live in Chart/. Omitted everywhere else.
  *
  * `docOnlyHelpers` names the internal documentation helpers that are
  * deliberately excluded from the public count.
@@ -31,7 +35,7 @@
 export interface ComponentMeta {
     /** Folder under src/components, and the exported component name */
     name: string;
-    /** Display name — may differ from `name` (Nav → "Navigation") */
+    /** Display name — may differ from `name` (NavList → "Nav list") */
     label: string;
     /** Website route segment under /components */
     slug: string;
@@ -41,10 +45,22 @@ export interface ComponentMeta {
     category: string;
     /** Whether the component declares 'use client' */
     client: boolean;
+    /** Folder under src/components when it differs from `name` (shared folders like Chart) */
+    folder?: string;
+}
+export interface ComponentCategoryMeta {
+    /** Category id — the value each component's `category` field carries, and the website route segment under /components */
+    id: string;
+    /** Display name for the category, used for section headings and landing pages */
+    label: string;
+    /** One-line summary of what the category holds */
+    description: string;
 }
 /** Full metadata for every public component, alphabetical by name. */
 export declare const componentMetadata: readonly ComponentMeta[];
-/** The categories a component may belong to. */
+/** Full metadata for every component category, alphabetical by id. */
+export declare const componentCategoryMetadata: readonly ComponentCategoryMeta[];
+/** The category ids a component may belong to. */
 export declare const componentCategories: readonly string[];
 /**
  * The official public component list, names only.

package/components/registry.js

@@ -1,11 +1,13 @@
 import registry from "./registry.json.js";
 const componentMetadata = registry.components;
-const componentCategories = registry.categories;
+const componentCategoryMetadata = registry.categories;
+const componentCategories = registry.categories.map((c) => c.id);
 const componentRegistry = registry.components.map((c) => c.name);
 const COMPONENT_COUNT = registry.components.length;
 export {
   COMPONENT_COUNT,
   componentCategories,
+  componentCategoryMetadata,
   componentMetadata,
   componentRegistry
 };

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": [
     {
@@ -60,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",
@@ -76,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",
@@ -92,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",
@@ -132,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",
@@ -204,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",
@@ -412,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",
@@ -446,8 +522,8 @@
     },
     {
       "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
@@ -468,6 +544,14 @@
       "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",
@@ -476,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",
@@ -516,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",
@@ -532,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",
@@ -561,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
     },
     {
@@ -588,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",
@@ -596,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",
@@ -604,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",
@@ -628,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",
@@ -636,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",
@@ -683,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": [