@robr0/design-system 0.2.0 → 0.4.0

package/components/RadioButton/RadioButton.d.ts

@@ -13,11 +13,21 @@ type RadioButtonOwnProps = {
     onValueChange?: (value: 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) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
+     * Legacy form-field name.
+     *
      * @deprecated No-op. This component renders a `<div role="radio">`, not a
      * native `<input type="radio">`, so it does not group by name or participate
      * in native form submission — `RadioGroup` handles grouping in React state.
@@ -47,7 +57,11 @@ type RadioGroupOwnProps = {
     onValueChange?: (value: 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) => void;
 };
 export interface RadioGroupProps extends RadioGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps> {

package/components/Reasoning/Reasoning.css

@@ -0,0 +1,152 @@
+/* ============================================
+   REASONING COMPONENT
+   A model's thinking, disclosed behind a
+   one-line summary. Quiet by construction: the
+   trace is secondary text on a rail, never
+   competing with the answer beside it.
+   ============================================ */
+
+.ds-reasoning {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-reasoning__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  align-self: flex-start;
+  padding: var(--padding-xxs) var(--padding-xs);
+  margin-left: calc(var(--padding-xs) * -1);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  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);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-reasoning__trigger:hover {
+  color: var(--color-text-secondary);
+}
+
+.ds-reasoning__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-reasoning__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-reasoning--open .ds-reasoning__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   SUMMARY
+   While the trace streams, a highlight sweeps
+   the summary left to right — the same treatment
+   AgentStatus uses, so "the model is working"
+   looks the same wherever it appears.
+   ============================================ */
+
+.ds-reasoning__summary {
+  white-space: nowrap;
+}
+
+.ds-reasoning--streaming .ds-reasoning__summary {
+  background-image: linear-gradient(
+    100deg,
+    var(--color-text-tertiary) 40%,
+    var(--color-text-primary) 50%,
+    var(--color-text-tertiary) 60%
+  );
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: ds-reasoning-shimmer var(--motion-duration-loop-shimmer)
+    var(--motion-ease-linear) infinite;
+}
+
+@keyframes ds-reasoning-shimmer {
+  from {
+    background-position-x: 100%;
+  }
+
+  to {
+    background-position-x: 0%;
+  }
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-reasoning__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-reasoning--open .ds-reasoning__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-reasoning__content {
+  overflow: hidden;
+  min-height: 0;
+  transition: padding-block var(--motion-duration-slow) var(--motion-ease-standard);
+  padding-left: var(--padding-sm-md);
+  /* The rail sits flush with the summary's left edge — the trigger's own
+     padding is cancelled by its negative margin, so both start at zero */
+  border-left: var(--border-md) solid var(--color-divider);
+  color: var(--color-text-secondary);
+  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-reasoning--open .ds-reasoning__content {
+  padding-block: var(--padding-xs);
+}
+
+.ds-reasoning__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-reasoning__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reasoning--streaming .ds-reasoning__summary {
+    background-image: none;
+    color: var(--color-text-tertiary);
+    animation: none;
+  }
+}

package/components/Reasoning/Reasoning.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Reasoning itself — everything else falls through to the root element. */
+type ReasoningOwnProps = {
+    /** The model is still producing the trace. Opens the panel and shimmers the summary. */
+    streaming?: boolean;
+    /** Seconds spent reasoning, shown in the summary once complete. */
+    duration?: number;
+    /** Override the summary line. By default it reports the streaming state and the duration. */
+    label?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. Defaults to open while `streaming`. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes, from a click or from the stream ending. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** The reasoning trace. */
+    children?: React.ReactNode;
+};
+export interface ReasoningProps extends ReasoningOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ReasoningOwnProps> {
+}
+/**
+ * Reasoning discloses a model's thinking without letting it dominate the
+ * response: open while the trace streams in, collapsed to a one-line summary
+ * once it finishes.
+ *
+ * The auto-collapse yields to the reader — once someone has toggled the panel
+ * themselves, the stream ending no longer closes it.
+ *
+ * Only the summary line is a live region. A trace announced token by token
+ * floods a screen reader, so the body is ordinary expandable content and the
+ * announcement covers the boundaries: thinking, then thought for so long.
+ */
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Reasoning/Reasoning.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useEffect, useCallback } from "react";
+import "./Reasoning.css";
+import "../../fonts/material-symbols.css";
+const Reasoning = React.forwardRef(
+  ({
+    streaming = false,
+    duration,
+    label,
+    open,
+    defaultOpen,
+    onOpenChange,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-reasoning";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? streaming);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const readerDecided = useRef(false);
+    const wasStreaming = useRef(streaming);
+    useEffect(() => {
+      if (streaming === wasStreaming.current) return;
+      wasStreaming.current = streaming;
+      if (readerDecided.current) return;
+      if (!isControlled) setUncontrolledOpen(streaming);
+      onOpenChange?.(streaming);
+    }, [streaming, isControlled, onOpenChange]);
+    const toggle = useCallback(() => {
+      readerDecided.current = true;
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const summary = label ?? (streaming ? "Thinking" : duration !== void 0 ? `Thought for ${duration}s` : "Thought process");
+    const classes = [
+      baseClass,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__trigger`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, role: "status", children: summary }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel`, id: panelId, role: "region", "aria-labelledby": triggerId, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+    ] });
+  }
+);
+Reasoning.displayName = "Reasoning";
+export {
+  Reasoning
+};

package/components/SelectionCard/SelectionCard.css

@@ -232,8 +232,12 @@
 .ds-selection-card__toggle-icon {
   /* Intentionally off the --icon-size-* scale — same reason as ToggleSwitch:
      this glyph lives inside the 20x20 toggle thumb, and the smallest scale
-     step (20px) would fill it completely. */
-  font-size: 14px;
+     step (20px) would fill it completely. Sized via --icon-size, not
+     font-size, so the icon's box shrinks with the glyph (see ToggleSwitch).
+
+     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);
 }
 

package/components/SelectionCard/SelectionCard.d.ts

@@ -23,7 +23,11 @@ type SelectionCardOwnProps = {
     name?: string;
     /** 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;
 };
 export interface SelectionCardProps extends SelectionCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SelectionCardOwnProps> {

package/components/Skeleton/Skeleton.css

@@ -22,6 +22,8 @@
     var(--color-bg-container-primary) 50%,
     transparent 100%
   );
+  /* ds-allow(motion): the shimmer needs a symmetric in-out curve and no
+     --motion-ease-* token provides one — the duration is tokenized. */
   animation: ds-skeleton-shimmer var(--motion-duration-loop-shimmer) ease-in-out infinite;
 }
 

package/components/Slider/Slider.d.ts

@@ -19,7 +19,11 @@ type SliderOwnProps = {
     onValueChange?: (value: number) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface SliderProps extends SliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof SliderOwnProps | 'type'> {

package/components/Spinner/Spinner.css

@@ -59,6 +59,17 @@
   stroke: var(--color-text-secondary);
 }
 
+/* Inherit — both circles draw in currentColor so the spinner matches the
+   text/icon colour of whatever control contains it (e.g. a loading Button) */
+.ds-spinner--inherit .ds-spinner__track {
+  stroke: currentColor;
+  opacity: 0.25;
+}
+
+.ds-spinner--inherit .ds-spinner__arc {
+  stroke: currentColor;
+}
+
 /* ============================================
    ANIMATION
    ============================================ */

package/components/Spinner/Spinner.d.ts

@@ -1,8 +1,8 @@
 export interface SpinnerProps {
     /** Size of the spinner */
     size?: 'sm' | 'md' | 'lg';
-    /** Visual variant */
-    variant?: 'primary' | 'neutral';
+    /** Visual variant — `inherit` draws the spinner in `currentColor`, for use inside coloured controls */
+    variant?: 'primary' | 'neutral' | 'inherit';
     /** Accessible label */
     label?: string;
     /** Additional CSS classes */

package/components/Swatch/Swatch.css

@@ -0,0 +1,52 @@
+/* ============================================
+   SWATCH COMPONENT
+   Clickable colour tile for palettes and pickers
+   ============================================ */
+
+/* Base */
+
+.ds-swatch {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: var(--ds-swatch-color);
+  /* A hairline inset keeps very light colours visible on the white floor */
+  box-shadow: inset 0 0 0 var(--border-xs) var(--color-bg-container-border);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: box-shadow var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Sizes */
+
+.ds-swatch--compact {
+  width: 20px;
+  height: 20px;
+}
+
+/* Shapes */
+
+.ds-swatch--square {
+  border-radius: var(--radius-sm);
+}
+
+/* States */
+
+.ds-swatch--selected {
+  box-shadow:
+    inset 0 0 0 var(--border-xs) var(--color-bg-container-border),
+    0 0 0 var(--border-md) var(--color-bg-page-primary),
+    0 0 0 calc(var(--border-md) * 2) var(--color-text-primary);
+}
+
+.ds-swatch:focus-visible {
+  outline: var(--border-md) solid var(--color-input-border-selected);
+  outline-offset: var(--border-md);
+}
+
+.ds-swatch--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/Swatch/Swatch.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+/** Props owned by Swatch itself — everything else falls through to the <button>. */
+type SwatchOwnProps = {
+    /** The colour this swatch shows — any valid CSS colour, typically a hex value */
+    value: string;
+    /**
+     * Accessible name for the swatch. Defaults to the colour value, which is
+     * meaningful but terse — prefer a human name ("Teal 07") when you have one.
+     */
+    label?: string;
+    /** Selected state — renders the selection ring and sets aria-pressed */
+    selected?: boolean;
+    /** Swatch size */
+    size?: 'default' | 'compact';
+    /** Corner treatment — circle matches the site's preset grids; square suits picker triggers */
+    shape?: 'circle' | 'square';
+    /** Whether the swatch is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SwatchProps extends SwatchOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof SwatchOwnProps | 'type'> {
+}
+/**
+ * A clickable colour tile — the building block for preset palettes and
+ * picker triggers. Renders a `<button>` whose background is the `value`
+ * colour; `selected` draws the theme-aware selection ring.
+ *
+ * Purely presentational (no hooks), so it can be rendered from a Server
+ * Component; interactivity arrives through the native `onClick` you pass.
+ * Forwards a ref to the `<button>` and spreads unrecognised props onto it.
+ */
+export declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/Swatch/Swatch.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Swatch.css";
+const Swatch = React.forwardRef(
+  ({
+    value,
+    label,
+    selected = false,
+    size = "default",
+    shape = "circle",
+    disabled = false,
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-swatch";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      shape === "square" ? `${baseClass}--square` : "",
+      selected ? `${baseClass}--selected` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const swatchStyle = { ...style, "--ds-swatch-color": value };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        style: swatchStyle,
+        disabled,
+        "aria-pressed": selected,
+        "aria-label": rest["aria-label"] ?? label ?? value
+      }
+    );
+  }
+);
+Swatch.displayName = "Swatch";
+export {
+  Swatch
+};

package/components/Table/Table.css

@@ -184,3 +184,22 @@
   line-height: var(--font-paragraph-sm-line-height);
   letter-spacing: var(--font-paragraph-sm-letter-spacing);
 }
+
+/* ============================================
+   SCREEN-READER-ONLY
+   Fallback text for header cells with no visible
+   label (checkbox / actions columns) — an empty
+   <th> is unannounced.
+   ============================================ */
+
+.ds-table__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/Table/Table.js

@@ -38,7 +38,7 @@ const Table = React.forwardRef(
             width: col.width,
             textAlign: col.align || "left"
           },
-          children: col.header
+          children: col.header || /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: col.key })
         },
         col.key
       )) }) }),

package/components/Textarea/Textarea.css

@@ -14,19 +14,6 @@
    LABEL
    ============================================ */
 
-.ds-textarea__label {
-  font-family: var(--font-paragraph-em-family);
-  font-size: var(--font-paragraph-em-size);
-  font-weight: var(--font-paragraph-em-weight);
-  line-height: var(--font-paragraph-em-line-height);
-  letter-spacing: var(--font-paragraph-em-letter-spacing);
-  color: var(--color-text-primary);
-}
-
-.ds-textarea__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    FIELD
    ============================================ */
@@ -69,24 +56,6 @@
    FOOTER (helper + counter)
    ============================================ */
 
-.ds-textarea__footer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--gap-sm);
-}
-
-.ds-textarea__helper {
-  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);
-  color: var(--color-text-tertiary);
-  margin: 0;
-  flex: 1;
-}
-
 .ds-textarea__counter {
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
@@ -108,10 +77,6 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-textarea--error .ds-textarea__helper {
-  color: var(--color-status-error-border);
-}
-
 .ds-textarea--error .ds-textarea__counter {
   color: var(--color-status-error-border);
 }
@@ -120,10 +85,6 @@
    DISABLED STATE
    ============================================ */
 
-.ds-textarea--disabled .ds-textarea__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-textarea--disabled .ds-textarea__field {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -146,7 +107,3 @@
   letter-spacing: var(--font-paragraph-sm-letter-spacing);
 }
 
-.ds-textarea--compact .ds-textarea__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}

package/components/Textarea/Textarea.d.ts

@@ -23,7 +23,11 @@ type TextareaOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <textarea> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface TextareaProps extends TextareaOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof TextareaOwnProps> {