@robr0/design-system 0.8.0 → 0.9.0

package/components/PinInput/PinInput.css

@@ -0,0 +1,92 @@
+/* ============================================
+   PIN INPUT COMPONENT
+   Segmented one-time-code input
+   ============================================ */
+
+/* Base — the Field wrapper carries the root class */
+.ds-pininput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+}
+
+/* ============================================
+   CELLS ROW
+   ============================================ */
+
+.ds-pininput__cells {
+  display: flex;
+  gap: var(--gap-sm); /* 8px */
+}
+
+/* ============================================
+   CELL
+   ============================================ */
+
+.ds-pininput__cell {
+  /* Fixed control geometry, like the ToggleSwitch track */
+  width: 44px;
+  height: 52px;
+  padding: 0;
+  text-align: center;
+
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-input-bg-primary);
+
+  /* Typography */
+  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-input-text-primary);
+
+  /* Transitions */
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+.ds-pininput__cell:hover:not(:focus):not(:disabled) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-pininput__cell:focus {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-pininput__cell:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-pininput--error .ds-pininput__cell {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-pininput--error .ds-pininput__cell:focus {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-pininput--disabled .ds-pininput__cells {
+  opacity: 0.4;
+}
+
+.ds-pininput--disabled .ds-pininput__cell {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  color: var(--color-input-text-disabled);
+  cursor: not-allowed;
+}

package/components/PinInput/PinInput.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/** Props owned by PinInput itself — everything else falls through to the group container. */
+type PinInputOwnProps = {
+    /** Number of cells, one character each */
+    length?: number;
+    /** Current code (controlled) — character at index n renders in cell n */
+    value?: string;
+    /** Initial code (uncontrolled) */
+    defaultValue?: string;
+    /**
+     * Convenience callback receiving the joined code whenever any cell changes.
+     * There is no single native `onChange` here: the control is a group of
+     * one-character inputs, so the value callback is the primary API.
+     */
+    onValueChange?: (value: string) => void;
+    /** Fires once when every cell is filled, with the complete code */
+    onComplete?: (value: string) => void;
+    /** Render cells as password fields, hiding the entered characters */
+    mask?: boolean;
+    /** Accepted characters — `numeric` rejects non-digits and sets a numeric keyboard */
+    format?: 'numeric' | 'alphanumeric';
+    /** Label text rendered above the cells; also names the group for screen readers */
+    label?: string;
+    /** Helper or error message displayed below the cells */
+    helperText?: string;
+    /** Error state — recolours cell borders and the helper text */
+    error?: boolean;
+    /** Whether the whole control is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes — applied to the wrapper, not the cells */
+    className?: string;
+};
+export interface PinInputProps extends PinInputOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof PinInputOwnProps> {
+}
+/**
+ * Segmented one-time-code input: one cell per character, with auto-advance,
+ * Backspace retreat, arrow-key movement and paste distribution.
+ *
+ * The ref forwards to the FIRST cell's `<input>`, so `ref.current.focus()`
+ * focuses the start of the code. Unrecognised props spread onto the
+ * `role="group"` container `<div>` that wraps the cells — there is no single
+ * underlying input for them to land on — so `data-*` and `aria-*` attributes
+ * describe the group.
+ */
+export declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/PinInput/PinInput.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Field } from "../Field/Field.js";
+import "./PinInput.css";
+const toChars = (value, length) => Array.from({ length }, (_, i) => value[i] ?? "");
+const PinInput = React.forwardRef(
+  ({
+    length = 6,
+    value,
+    defaultValue,
+    onValueChange,
+    onComplete,
+    mask = false,
+    format = "numeric",
+    label,
+    helperText,
+    error = false,
+    disabled = false,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-pininput";
+    const generatedId = React.useId();
+    const controlId = id || generatedId;
+    const isControlled = value !== void 0;
+    const [internalChars, setInternalChars] = React.useState(
+      () => toChars(defaultValue ?? "", length)
+    );
+    const chars = isControlled ? toChars(value, length) : internalChars;
+    const cellRefs = React.useRef([]);
+    const setCellRef = (index) => (node) => {
+      cellRefs.current[index] = node;
+      if (index === 0) {
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      }
+    };
+    const classes = [
+      baseClass,
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const sanitize = (raw) => raw.replace(format === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g, "");
+    const focusCell = (index) => {
+      const clamped = Math.max(0, Math.min(index, length - 1));
+      const cell = cellRefs.current[clamped];
+      cell?.focus();
+      cell?.select();
+    };
+    const commit = (next) => {
+      if (!isControlled) setInternalChars(next);
+      onValueChange?.(next.join(""));
+    };
+    const joined = chars.join("");
+    const complete = joined.length === length;
+    const wasComplete = React.useRef(complete);
+    React.useEffect(() => {
+      if (complete && !wasComplete.current) onComplete?.(joined);
+      wasComplete.current = complete;
+    }, [complete, joined, onComplete]);
+    const handleCellChange = (index) => (e) => {
+      const clean = sanitize(e.target.value);
+      if (e.target.value && !clean) return;
+      const next = [...chars];
+      if (clean.length <= 1) {
+        next[index] = clean;
+        commit(next);
+        if (clean) focusCell(index + 1);
+      } else {
+        let cursor = index;
+        for (const ch of clean) {
+          if (cursor >= length) break;
+          next[cursor] = ch;
+          cursor += 1;
+        }
+        commit(next);
+        focusCell(cursor);
+      }
+    };
+    const handleCellKeyDown = (index) => (e) => {
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        const next = [...chars];
+        if (next[index]) {
+          next[index] = "";
+          commit(next);
+          focusCell(index - 1);
+        } else if (index > 0) {
+          next[index - 1] = "";
+          commit(next);
+          focusCell(index - 1);
+        }
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        focusCell(index - 1);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        focusCell(index + 1);
+      }
+    };
+    const handlePaste = (e) => {
+      e.preventDefault();
+      const clean = sanitize(e.clipboardData.getData("text")).slice(0, length);
+      if (!clean) return;
+      commit(toChars(clean, length));
+      focusCell(clean.length);
+    };
+    const describedBy = helperText ? `${controlId}-helper` : rest["aria-describedby"];
+    const characterNoun = format === "numeric" ? "Digit" : "Character";
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        disabled,
+        id: controlId,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            role: "group",
+            "aria-labelledby": label ? `${controlId}-label` : void 0,
+            "aria-label": !label ? rest["aria-label"] : void 0,
+            "aria-describedby": describedBy,
+            className: `${baseClass}__cells`,
+            children: chars.map((char, index) => /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: setCellRef(index),
+                className: `${baseClass}__cell`,
+                type: mask ? "password" : "text",
+                inputMode: format === "numeric" ? "numeric" : "text",
+                autoComplete: index === 0 ? "one-time-code" : "off",
+                maxLength: 1,
+                value: char,
+                disabled,
+                id: index === 0 ? controlId : void 0,
+                "aria-label": `${characterNoun} ${index + 1} of ${length}`,
+                "aria-invalid": error || void 0,
+                onChange: handleCellChange(index),
+                onKeyDown: handleCellKeyDown(index),
+                onPaste: handlePaste,
+                onFocus: (e) => e.target.select()
+              },
+              index
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+PinInput.displayName = "PinInput";
+export {
+  PinInput
+};

package/components/Popover/Popover.css

@@ -28,7 +28,9 @@
   padding: var(--padding-md); /* 16px */
   border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-sm); /* 8px */
-  background-color: var(--color-bg-container-primary);
+  /* Page background, not container: the container fill is semi-transparent
+     in dark mode, and a floating panel must not show text through itself */
+  background-color: var(--color-bg-page-primary);
   box-shadow: var(--shadow-floating);
 
   /* Hidden by default */
@@ -88,12 +90,9 @@
    SIZE — COMPACT
    ============================================ */
 
+/* The size class rides on the panel element itself, so this is a plain
+   compound selector — a descendant form would never match */
 .ds-popover--compact {
   padding: var(--padding-sm); /* 8px */
   min-width: 160px;
 }
-
-.ds-popover--compact .ds-popover__panel {
-  padding: var(--padding-sm);
-  min-width: 160px;
-}

package/components/Popover/Popover.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import "./Popover.css";

package/components/RadioButton/RadioButton.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./RadioButton.css";

package/components/Reasoning/Reasoning.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useId, useState, useRef, useEffect, useCallback } from "react";
 import "./Reasoning.css";

package/components/SegmentedControl/SegmentedControl.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import "./SegmentedControl.css";

package/components/SelectionCard/SelectionCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import "./SelectionCard.css";

package/components/ShaderField/ShaderField.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React, { useRef, useMemo, useState, useEffect } from "react";
 import { DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS, useShaderField } from "./useShaderField.js";

package/components/ShaderField/useShaderField.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect } from "react";
 import { BLOB_COUNT, vertexSource, fragmentSource } from "./field.glsl.js";
 const DEFAULT_SHADER_PARAMS = {

package/components/Slider/Slider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Slider.css";

package/components/Sparkline/Sparkline.css

@@ -0,0 +1,52 @@
+/* ============================================
+   SPARKLINE COMPONENT
+   Inline trend line for stats and table cells.
+   Colour flows through `color` — the line, fill
+   and dot all draw with currentColor, so a tone
+   is one custom property swap.
+   ============================================ */
+
+/* Base */
+
+.ds-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: var(--color-action-primary-bg);
+}
+
+/* Parts */
+
+.ds-sparkline__line {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ds-sparkline__fill {
+  fill: currentColor;
+  opacity: 0.15;
+}
+
+.ds-sparkline__dot {
+  fill: currentColor;
+}
+
+/* Tones */
+
+.ds-sparkline--accent {
+  color: var(--color-action-primary-bg);
+}
+
+.ds-sparkline--positive {
+  color: var(--color-status-positive-text);
+}
+
+.ds-sparkline--negative {
+  color: var(--color-status-error-text);
+}
+
+.ds-sparkline--neutral {
+  color: var(--color-text-secondary);
+}

package/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+/** Props owned by Sparkline itself — everything else falls through to the SVG node. */
+type SparklineOwnProps = {
+    /** The series to plot, in order. Values are normalised into the viewBox. */
+    data: number[];
+    /** Rendering treatment — a bare line, or a line with a soft fill underneath. */
+    variant?: 'line' | 'area';
+    /**
+     * Colour role for the line and end dot. `accent` follows the chart palette's
+     * lead colour; `positive`/`negative` map to the status text tokens; `neutral`
+     * recedes to secondary text.
+     */
+    tone?: 'accent' | 'positive' | 'negative' | 'neutral';
+    /** Marks the final point with a small dot. */
+    showDot?: boolean;
+    /** Line thickness in viewBox units — an SVG geometry attribute, not a token. */
+    strokeWidth?: number;
+    /**
+     * ViewBox width. Also the default rendered width; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `width` attribute, which it sets.
+     */
+    width?: number;
+    /**
+     * ViewBox height. Also the default rendered height; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `height` attribute, which it sets.
+     */
+    height?: number;
+    /**
+     * Accessible description of the trend, e.g. "Revenue, trending up". When
+     * omitted the SVG is decorative and hidden from assistive technology.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SparklineProps extends SparklineOwnProps, Omit<React.ComponentPropsWithoutRef<'svg'>, keyof SparklineOwnProps | 'children'> {
+}
+/**
+ * Sparkline — an inline trend line for stats and table cells, drawn without
+ * axes or chrome. Pure SVG computed from props: no charting library, no hooks,
+ * no dependencies, so it renders from a Server Component and costs nothing in
+ * a dense table. Degenerate data never breaks the path: an all-equal series
+ * renders a horizontal midline, and fewer than two points render just the
+ * end dot, or nothing.
+ */
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/components/Sparkline/Sparkline.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Sparkline.css";
+const round = (n) => Math.round(n * 100) / 100;
+const Sparkline = React.forwardRef(
+  ({
+    data,
+    variant = "line",
+    tone = "accent",
+    showDot = true,
+    strokeWidth = 2,
+    width = 120,
+    height = 32,
+    label,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-sparkline";
+    const classes = [
+      baseClass,
+      `${baseClass}--${variant}`,
+      `${baseClass}--${tone}`,
+      className
+    ].filter(Boolean).join(" ");
+    const dotRadius = strokeWidth * 1.5;
+    const pad = dotRadius + strokeWidth / 2;
+    const innerWidth = Math.max(width - pad * 2, 0);
+    const innerHeight = Math.max(height - pad * 2, 0);
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min;
+    const points = data.map((value, i) => ({
+      x: round(
+        data.length < 2 ? pad + innerWidth : pad + i / (data.length - 1) * innerWidth
+      ),
+      // A flat series (range 0) draws a horizontal midline instead of dividing by zero.
+      y: round(
+        range === 0 ? pad + innerHeight / 2 : pad + (1 - (value - min) / range) * innerHeight
+      )
+    }));
+    const lastPoint = points.length > 0 ? points[points.length - 1] : void 0;
+    const hasLine = points.length >= 2;
+    const linePath = hasLine ? `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}` : void 0;
+    const baseline = round(height - pad);
+    const areaPath = hasLine && variant === "area" ? `${linePath} L ${points[points.length - 1].x} ${baseline} L ${points[0].x} ${baseline} Z` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        viewBox: `0 0 ${width} ${height}`,
+        width,
+        height,
+        xmlns: "http://www.w3.org/2000/svg",
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        children: [
+          areaPath && /* @__PURE__ */ jsx("path", { className: `${baseClass}__fill`, d: areaPath }),
+          linePath && /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: `${baseClass}__line`,
+              d: linePath,
+              strokeWidth
+            }
+          ),
+          showDot && lastPoint && /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: `${baseClass}__dot`,
+              cx: lastPoint.x,
+              cy: lastPoint.y,
+              r: dotRadius
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
+export {
+  Sparkline
+};