@robr0/design-system 0.11.0 → 0.13.0

package/components/SplitPane/SplitPane.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import "./SplitPane.css";
+const KEY_STEP = 2;
+const KEY_STEP_LARGE = 10;
+const SplitPane = React.forwardRef(
+  ({
+    children,
+    direction = "horizontal",
+    split,
+    defaultSplit = 50,
+    minSplit = 10,
+    maxSplit = 90,
+    onSplitChange,
+    separatorLabel = "Resize panes",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-split-pane";
+    const [uncontrolledSplit, setUncontrolledSplit] = useState(defaultSplit);
+    const [dragging, setDragging] = useState(false);
+    const draggingRef = useRef(false);
+    const internalRef = useRef(null);
+    const setRef = (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const clamp = (value) => Math.min(Math.max(value, minSplit), maxSplit);
+    const currentSplit = clamp(split ?? uncontrolledSplit);
+    const applySplit = (value) => {
+      const next = clamp(value);
+      if (split === void 0) setUncontrolledSplit(next);
+      onSplitChange?.(next);
+    };
+    const splitFromPointer = (e) => {
+      const rect = internalRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const fraction = direction === "horizontal" ? (e.clientX - rect.left) / rect.width : (e.clientY - rect.top) / rect.height;
+      applySplit(fraction * 100);
+    };
+    const handlePointerDown = (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      draggingRef.current = true;
+      setDragging(true);
+      splitFromPointer(e);
+    };
+    const handlePointerMove = (e) => {
+      if (!draggingRef.current) return;
+      splitFromPointer(e);
+    };
+    const handlePointerUp = (e) => {
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+      draggingRef.current = false;
+      setDragging(false);
+    };
+    const handleKeyDown = (e) => {
+      const step = e.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+      const shrinkKey = direction === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      const growKey = direction === "horizontal" ? "ArrowRight" : "ArrowDown";
+      switch (e.key) {
+        case shrinkKey:
+          e.preventDefault();
+          applySplit(currentSplit - step);
+          break;
+        case growKey:
+          e.preventDefault();
+          applySplit(currentSplit + step);
+          break;
+        case "Home":
+          e.preventDefault();
+          applySplit(minSplit);
+          break;
+        case "End":
+          e.preventDefault();
+          applySplit(maxSplit);
+          break;
+      }
+    };
+    const classes = [
+      baseClass,
+      `${baseClass}--${direction}`,
+      dragging && `${baseClass}--dragging`,
+      className
+    ].filter(Boolean).join(" ");
+    const [first, second] = React.Children.toArray(children);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        style: {
+          "--ds-split-pane-split": `${currentSplit}%`,
+          ...rest.style
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__pane ${baseClass}__pane--first`, children: first }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__separator`,
+              role: "separator",
+              tabIndex: 0,
+              "aria-label": separatorLabel,
+              "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+              "aria-valuenow": Math.round(currentSplit),
+              "aria-valuemin": Math.round(minSplit),
+              "aria-valuemax": Math.round(maxSplit),
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__grip`, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__pane ${baseClass}__pane--second`, children: second })
+        ]
+      }
+    );
+  }
+);
+SplitPane.displayName = "SplitPane";
+export {
+  SplitPane
+};

package/components/Stat/Stat.css

@@ -65,18 +65,51 @@
   line-height: 1;
 }
 
+/* The trend tokens are theme-split for contrast: deep status inks on
+   light surfaces, the mint/coral accents on dark ones. */
 .ds-stat__delta--up {
-  color: var(--color-core-accent-mint);
+  color: var(--color-trend-up);
 }
 
 .ds-stat__delta--down {
-  color: var(--color-core-accent-coral);
+  color: var(--color-trend-down);
 }
 
 .ds-stat__delta--neutral {
   color: var(--color-text-tertiary);
 }
 
+/* ============================================
+   INLINE DELTA — delta to the right of the
+   value, bottom-aligned to its baseline
+   ============================================ */
+
+.ds-stat--delta-inline {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'value delta'
+    'label label';
+  column-gap: var(--gap-sm);
+  row-gap: var(--gap-xxs);
+}
+
+.ds-stat--delta-inline .ds-stat__value {
+  grid-area: value;
+}
+
+.ds-stat--delta-inline .ds-stat__label {
+  grid-area: label;
+}
+
+.ds-stat--delta-inline .ds-stat__delta {
+  grid-area: delta;
+  align-self: end;
+  justify-self: start;
+  /* Optical baseline: compensates the display value's half-leading. */
+  margin-bottom: var(--gap-xs);
+}
+
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/Stat/Stat.d.ts

@@ -7,6 +7,8 @@ export interface StatProps {
     delta?: string;
     /** Direction of the delta — colours it and adds an arrow */
     trend?: 'up' | 'down' | 'neutral';
+    /** Where the delta sits: stacked below the label, or inline to the right of the value, bottom-aligned */
+    deltaPlacement?: 'stacked' | 'inline';
     /** Stat size */
     size?: 'default' | 'large';
     /** Additional CSS classes */
@@ -16,4 +18,4 @@ export interface StatProps {
  * Stat component — a single headline metric with a label and an
  * optional trend delta. Compose several in a row for a metrics band.
  */
-export declare const Stat: ({ value, label, delta, trend, size, className, }: StatProps) => import("react").JSX.Element;
+export declare const Stat: ({ value, label, delta, trend, deltaPlacement, size, className, }: StatProps) => import("react").JSX.Element;

package/components/Stat/Stat.js

@@ -11,11 +11,17 @@ const Stat = ({
   label,
   delta,
   trend = "neutral",
+  deltaPlacement = "stacked",
   size = "default",
   className = ""
 }) => {
   const baseClass = "ds-stat";
-  const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    deltaPlacement === "inline" ? `${baseClass}--delta-inline` : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value }),
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),

package/components/StreamingText/StreamingText.css

@@ -0,0 +1,40 @@
+/* ============================================
+   STREAMING TEXT COMPONENT
+   Progressive reveal for text arriving in
+   chunks, with a blinking cursor. Inherits the
+   surrounding typography — the reveal is not a
+   text style of its own.
+   ============================================ */
+
+/* Base */
+
+.ds-streaming-text {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+/* Cursor */
+
+.ds-streaming-text__cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.1em;
+  vertical-align: text-bottom;
+  border-radius: var(--radius-xxs);
+  background-color: currentColor;
+  animation: ds-streaming-text-blink var(--motion-duration-loop-spin) var(--motion-ease-standard)
+    infinite;
+}
+
+@keyframes ds-streaming-text-blink {
+  0%,
+  45% {
+    opacity: 1;
+  }
+
+  55%,
+  100% {
+    opacity: 0.15;
+  }
+}

package/components/StreamingText/StreamingText.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by StreamingText itself — everything else falls through to the root span. */
+type StreamingTextOwnProps = {
+    /**
+     * The text received so far. Grow it across renders as chunks arrive; the
+     * reveal animates through the appended part. A value that does not extend
+     * the previous one is treated as a new message and reveals from the start.
+     */
+    text: string;
+    /**
+     * Whether the source is still producing text. Keeps the cursor visible
+     * between chunks, when the reveal has caught up but more may arrive.
+     */
+    streaming?: boolean;
+    /**
+     * Milliseconds between reveal steps. The reveal adds more characters per
+     * step the further it falls behind, so a large chunk catches up instead of
+     * typing for seconds.
+     */
+    charIntervalMs?: number;
+    /** Shows the blinking cursor while streaming or revealing. */
+    cursor?: boolean;
+    /**
+     * Fires once when the reveal catches up with `text` after `streaming` has
+     * ended — the moment the message is fully on screen.
+     */
+    onRevealComplete?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface StreamingTextProps extends StreamingTextOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof StreamingTextOwnProps | 'children'> {
+}
+/**
+ * StreamingText — the reveal for text that arrives in chunks: an LLM
+ * response typing itself out, with a cursor that blinks while more is
+ * coming. Feed it the accumulated text on every render and it animates
+ * through what was appended, catching up faster the further behind it
+ * falls. Under `prefers-reduced-motion` the reveal is skipped and each
+ * chunk appears whole. Announcement is the container's job — pair it with
+ * an `aria-live` region when the surrounding UI does not already announce
+ * the message.
+ */
+export declare const StreamingText: React.ForwardRefExoticComponent<StreamingTextProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/components/StreamingText/StreamingText.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import { MOTION_STREAM_CHAR_INTERVAL_MS } from "../../tokens/motion.js";
+import "./StreamingText.css";
+const StreamingText = React.forwardRef(
+  ({
+    text,
+    streaming = false,
+    charIntervalMs = MOTION_STREAM_CHAR_INTERVAL_MS,
+    cursor = true,
+    onRevealComplete,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-streaming-text";
+    const [revealed, setRevealed] = useState(text.length);
+    const previousText = useRef(text);
+    const completed = useRef(false);
+    useEffect(() => {
+      if (!text.startsWith(previousText.current)) {
+        setRevealed(0);
+        completed.current = false;
+      }
+      previousText.current = text;
+    }, [text]);
+    const caughtUp = revealed >= text.length;
+    useEffect(() => {
+      if (caughtUp) return;
+      completed.current = false;
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        setRevealed(text.length);
+        return;
+      }
+      const interval = setInterval(() => {
+        setRevealed((current) => {
+          const pending = text.length - current;
+          if (pending <= 0) return current;
+          return current + Math.max(1, Math.round(pending / 20));
+        });
+      }, charIntervalMs);
+      return () => clearInterval(interval);
+    }, [text, caughtUp, charIntervalMs]);
+    useEffect(() => {
+      if (caughtUp && !streaming && text.length > 0 && !completed.current) {
+        completed.current = true;
+        onRevealComplete?.();
+      }
+    }, [caughtUp, streaming, text, onRevealComplete]);
+    const showCursor = cursor && (streaming || !caughtUp);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, children: [
+      caughtUp ? text : text.slice(0, revealed),
+      showCursor && /* @__PURE__ */ jsx("span", { className: `${baseClass}__cursor`, "aria-hidden": "true" })
+    ] });
+  }
+);
+StreamingText.displayName = "StreamingText";
+export {
+  StreamingText
+};

package/components/registry.json

@@ -147,6 +147,14 @@
       "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",
@@ -292,6 +300,15 @@
       "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"
+    },
     {
       "name": "Combobox",
       "label": "Combobox",
@@ -460,6 +477,30 @@
       "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 stepped bars with conversion percentages, each sized by its share of the first stage.",
+      "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",
@@ -500,6 +541,14 @@
       "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": "LineChart",
       "label": "Line chart",
@@ -597,6 +646,14 @@
       "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",
@@ -769,6 +826,14 @@
       "category": "feedback",
       "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",
@@ -794,6 +859,14 @@
       "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",

package/components/registry.json.d.ts

@@ -147,6 +147,14 @@ declare const _default: {
       "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",
@@ -292,6 +300,15 @@ declare const _default: {
       "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"
+    },
     {
       "name": "Combobox",
       "label": "Combobox",
@@ -460,6 +477,30 @@ declare const _default: {
       "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 stepped bars with conversion percentages, each sized by its share of the first stage.",
+      "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",
@@ -500,6 +541,14 @@ declare const _default: {
       "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": "LineChart",
       "label": "Line chart",
@@ -597,6 +646,14 @@ declare const _default: {
       "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",
@@ -769,6 +826,14 @@ declare const _default: {
       "category": "feedback",
       "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",
@@ -794,6 +859,14 @@ declare const _default: {
       "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",