@robr0/design-system 0.2.0 → 0.4.0

package/components/Textarea/Textarea.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Field } from "../Field/Field.js";
 import "./Textarea.css";
 const Textarea = React.forwardRef(
   ({
@@ -37,44 +38,45 @@ const Textarea = React.forwardRef(
     };
     const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
     const charCount = value?.length || 0;
-    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
         label,
-        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-          " ",
-          "*"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ...rest,
-          ref,
-          className: `${baseClass}__field`,
-          id: inputId,
-          name,
-          value,
-          placeholder,
-          rows,
-          disabled,
-          required,
-          maxLength,
-          "aria-label": ariaLabel || rest["aria-label"] || label,
-          "aria-invalid": error,
-          "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
-          onChange: handleChange,
-          style: { resize, ...style }
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
-        helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText }),
-        maxLength && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__counter`, "aria-live": "polite", "aria-atomic": "true", children: [
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        aside: maxLength ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__counter`, "aria-live": "polite", "aria-atomic": "true", children: [
           charCount,
           "/",
           maxLength
-        ] })
-      ] })
-    ] });
+        ] }) : void 0,
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...rest,
+            ref,
+            className: `${baseClass}__field`,
+            id: inputId,
+            name,
+            value,
+            placeholder,
+            rows,
+            disabled,
+            required,
+            maxLength,
+            "aria-label": ariaLabel || rest["aria-label"] || label,
+            "aria-invalid": error,
+            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+            onChange: handleChange,
+            style: { resize, ...style }
+          }
+        )
+      }
+    );
   }
 );
 Textarea.displayName = "Textarea";

package/components/Timeline/Timeline.d.ts

@@ -35,6 +35,7 @@ export interface TimelineCompany {
 }
 /** Default variant — a flat sequence of steps/events with dot, badge, or icon markers. */
 export interface TimelineDefaultProps {
+    /** Selects the flat step/event layout — the default when omitted */
     variant?: 'default';
     /** Ordered list of steps/events */
     items: TimelineItem[];
@@ -47,6 +48,7 @@ export interface TimelineDefaultProps {
 }
 /** Company variant — grouped roles under a logo, for résumé/pipeline histories. */
 export interface TimelineCompanyProps {
+    /** Selects the grouped layout: roles nested under a company logo */
     variant: 'company';
     /** Ordered list of company/tool entries */
     items: TimelineCompany[];

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -23,9 +23,17 @@ type ToggleGroupOwnProps = {
     onValueChange?: (value: string | string[]) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string | string[]) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface ToggleGroupProps extends ToggleGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToggleGroupOwnProps> {

package/components/ToggleSwitch/ToggleSwitch.css

@@ -59,7 +59,10 @@
      Set via --icon-size (not font-size): .material-symbols-rounded derives
      font-size, width, and height from it together. Overriding font-size
      alone leaves the box at the 24px default, so the glyph hangs off-centre
-     inside the thumb. */
+     inside the thumb.
+
+     ds-allow(icon-size): 14px glyph inside the 20px thumb — the smallest
+     scale step would fill it edge to edge. */
   --icon-size: 14px;
   color: var(--color-action-primary-bg);
 }
@@ -123,7 +126,9 @@
 
 .ds-toggle-switch--compact .ds-toggle-switch__thumb-icon {
   /* Off-scale for the same reason as the default size — the compact thumb
-     is only 16x16. */
+     is only 16x16.
+
+     ds-allow(icon-size): 12px glyph inside the 16px compact thumb. */
   --icon-size: 12px;
 }
 

package/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -13,9 +13,17 @@ type ToggleSwitchOwnProps = {
     onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onCheckedChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onCheckedChange` instead.
+     */
     onChange?: (checked: boolean) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface ToggleSwitchProps extends ToggleSwitchOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ToggleSwitchOwnProps | 'type'> {

package/components/ToolCall/ToolCall.css

@@ -0,0 +1,213 @@
+/* ============================================
+   TOOL CALL COMPONENT
+   One tool invocation: a skimmable header row
+   and, behind a disclosure, the arguments and
+   the result.
+
+   The container stays neutral — colour lives in
+   the indicator and the status word, so a long
+   run of calls reads as a list rather than a
+   wall of tinted cards. The two states a person
+   has to act on, pending and error, also take a
+   coloured border.
+   ============================================ */
+
+.ds-tool-call {
+  --ds-tool-call-color: var(--color-text-secondary);
+  --ds-tool-call-border: var(--color-bg-container-border);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--ds-tool-call-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-tool-call__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  padding: var(--padding-xs) var(--padding-sm-md);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-tool-call__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-tool-call__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* No panel to open — the row is a plain div and must not look pressable */
+.ds-tool-call__header--static {
+  cursor: default;
+}
+
+.ds-tool-call__header--static:hover {
+  background-color: transparent;
+}
+
+.ds-tool-call__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--ds-tool-call-color);
+}
+
+.ds-tool-call__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* The tool name is an identifier, so it takes the same monospace
+   context CodeBlock uses — the one place the system leaves Nunito Sans */
+.ds-tool-call__name {
+  flex: none;
+  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-tool-call__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-tool-call__status {
+  flex: none;
+  margin-left: auto;
+  color: var(--ds-tool-call-color);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  white-space: nowrap;
+}
+
+/* A summary already claims the free space; without one the status still
+   needs pushing to the right, which the auto margin above handles */
+.ds-tool-call__summary ~ .ds-tool-call__status {
+  margin-left: 0;
+}
+
+.ds-tool-call__duration {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ds-tool-call__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   STATUSES
+   ============================================ */
+
+.ds-tool-call--pending {
+  --ds-tool-call-color: var(--color-status-warning-text);
+  --ds-tool-call-border: var(--color-status-warning-border);
+}
+
+.ds-tool-call--running {
+  --ds-tool-call-color: var(--color-status-info-text);
+}
+
+.ds-tool-call--success {
+  --ds-tool-call-color: var(--color-status-positive-text);
+}
+
+.ds-tool-call--error {
+  --ds-tool-call-color: var(--color-status-error-text);
+  --ds-tool-call-border: var(--color-status-error-border);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-tool-call__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-tool-call__content {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ds-tool-call--open .ds-tool-call__content {
+  padding: var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-tool-call__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-tool-call__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   ACTIONS
+   Outside the panel, so a call awaiting approval
+   can be answered without expanding it first.
+   ============================================ */
+
+.ds-tool-call__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+}

package/components/ToolCall/ToolCall.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';
+/** Props owned by ToolCall itself — everything else falls through to the root element. */
+type ToolCallOwnProps = {
+    /** The tool that was invoked, shown in monospace. */
+    name: string;
+    /** Where the call has got to. Drives the colour, the indicator, and the default status text. */
+    status?: ToolCallStatus;
+    /** One line describing this particular call, e.g. the target path or query. */
+    summary?: string;
+    /** How long the call took, e.g. "1.2s". Free text, so callers keep their own formatting. */
+    duration?: string;
+    /** Override the status text shown beside the indicator. */
+    statusLabel?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls for a call awaiting a decision — allow, deny, always allow.
+     * Rendered outside the collapsible panel, so approving never requires
+     * expanding the call first.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** The call's arguments and result. */
+    children?: React.ReactNode;
+};
+export interface ToolCallProps extends ToolCallOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToolCallOwnProps> {
+}
+/**
+ * ToolCall is the record of one tool invocation: what ran, how it went, how
+ * long it took, and — behind a disclosure — the arguments it was given and
+ * what it returned.
+ *
+ * A run is mostly a list of these, so the collapsed header carries everything
+ * needed to skim it and the body holds everything needed to audit it.
+ */
+export declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ToolCall/ToolCall.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./ToolCall.css";
+import "../../fonts/material-symbols.css";
+const DEFAULT_STATUS_LABELS = {
+  pending: "Needs approval",
+  running: "Running",
+  success: "Done",
+  error: "Failed"
+};
+const STATUS_ICONS = {
+  pending: "pause_circle",
+  success: "check_circle",
+  error: "error"
+};
+const ToolCall = React.forwardRef(
+  ({
+    name,
+    status = "success",
+    summary,
+    duration,
+    statusLabel,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    actions,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-tool-call";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const hasPanel = Boolean(children);
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const classes = [
+      baseClass,
+      `${baseClass}--${status}`,
+      isOpen ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const header = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "running" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STATUS_ICONS[status] }) }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: name }),
+      summary && /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, children: summary }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__status`, children: statusLabel ?? DEFAULT_STATUS_LABELS[status] }),
+      duration && /* @__PURE__ */ jsx("span", { className: `${baseClass}__duration`, children: duration }),
+      hasPanel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      hasPanel ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: header
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__header ${baseClass}__header--static`, children: header }),
+      hasPanel && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children })
+        }
+      ),
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+ToolCall.displayName = "ToolCall";
+export {
+  ToolCall
+};

package/components/registry.d.ts

@@ -1,19 +1,56 @@
 /**
- * COMPONENT REGISTRY — the single source of truth for the public
- * component count.
+ * COMPONENT REGISTRY — the single source of truth for the public component
+ * list, count, and per-component metadata.
+ *
+ * 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
+ *               special case duplicated across validators
+ *   description one line, used for the page title, the sidebar search index,
+ *               and anywhere the component is summarised
+ *   category    one of `componentCategories`
+ *   client      whether the component declares 'use client' — i.e. whether it
+ *               uses hooks or defines handlers. Presentational components are
+ *               deliberately false so consumers can render them from a React
+ *               Server Component.
  *
- * The data lives in registry.json: `components` is the official list of
- * public components (one entry per folder in src/components), and
  * `docOnlyHelpers` names the internal documentation helpers that are
  * deliberately excluded from the public count.
  *
- * scripts/validate-component-registry.mjs compares the registry against
- * the filesystem on every build (library, Storybook, and website), so
- * the registry cannot silently drift from reality.
+ * scripts/validate-component-registry.mjs compares the registry against the
+ * filesystem on every build (library, Storybook, and website), so it cannot
+ * silently drift from reality.
+ *
+ * Anywhere a component count is displayed — the Storybook overview, the
+ * website mega-nav, case studies — import COMPONENT_COUNT from here. Never
+ * hardcode the number.
+ */
+export interface ComponentMeta {
+    /** Folder under src/components, and the exported component name */
+    name: string;
+    /** Display name — may differ from `name` (Nav → "Navigation") */
+    label: string;
+    /** Website route segment under /components */
+    slug: string;
+    /** One-line summary, used for page titles and search */
+    description: string;
+    /** Grouping — one of `componentCategories` */
+    category: string;
+    /** Whether the component declares 'use client' */
+    client: boolean;
+}
+/** Full metadata for every public component, alphabetical by name. */
+export declare const componentMetadata: readonly ComponentMeta[];
+/** The categories a component may belong to. */
+export declare const componentCategories: readonly string[];
+/**
+ * The official public component list, names only.
  *
- * Anywhere a component count is displayed — the Storybook overview,
- * the website mega-nav, case studies — import COMPONENT_COUNT from
- * here. Never hardcode the number.
+ * Unchanged in shape from before the metadata migration, so every existing
+ * consumer keeps working without an edit.
  */
 export declare const componentRegistry: readonly string[];
 /** The official public component count. */

package/components/registry.js

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