@robr0/design-system 0.7.0 → 0.9.0

package/components/NumberInput/NumberInput.css

@@ -0,0 +1,154 @@
+/* ============================================
+   NUMBER INPUT COMPONENT
+   Numeric field with stepper buttons and clamping
+   ============================================ */
+
+/* Base */
+
+.ds-numberinput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+}
+
+/* ============================================
+   SHELL — border, fill and focus ring live here
+   ============================================ */
+
+.ds-numberinput__shell {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px — all inputs */
+  background-color: var(--color-input-bg-primary);
+  overflow: hidden;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-numberinput__shell:hover:not(:focus-within) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-numberinput__shell:focus-within {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.ds-numberinput__input {
+  flex: 1;
+  min-width: 0;
+  padding: var(--padding-sm) var(--padding-xs); /* 8px 6px */
+  border: none;
+  outline: none;
+  background-color: transparent;
+  text-align: center;
+
+  /* Typography */
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-input-text-primary);
+}
+
+.ds-numberinput__input::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* Hide the native spinners — the steppers replace them */
+.ds-numberinput__input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.ds-numberinput__input::-webkit-outer-spin-button,
+.ds-numberinput__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* ============================================
+   STEPPERS
+   ============================================ */
+
+.ds-numberinput__stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--padding-sm-md); /* 12px */
+  border: none;
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-numberinput__stepper .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-numberinput__stepper:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-numberinput__stepper:active:not(:disabled) {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-numberinput__stepper:focus-visible {
+  outline: var(--border-md) solid var(--color-input-border-selected);
+  outline-offset: calc(-2 * var(--border-md));
+}
+
+.ds-numberinput__stepper:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-numberinput--error .ds-numberinput__shell,
+.ds-numberinput--error .ds-numberinput__shell:focus-within {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-numberinput--disabled .ds-numberinput__shell {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+}
+
+.ds-numberinput--disabled .ds-numberinput__input {
+  color: var(--color-input-text-disabled);
+  cursor: not-allowed;
+}
+
+.ds-numberinput--disabled .ds-numberinput__input::placeholder {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-numberinput--compact .ds-numberinput__input {
+  padding: var(--padding-xs) var(--padding-xs); /* 6px */
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-numberinput--compact .ds-numberinput__stepper {
+  padding: 0 var(--padding-sm); /* 8px */
+}

package/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by NumberInput itself — everything else falls through to the <input>. */
+type NumberInputOwnProps = {
+    /** Input label text */
+    label?: string;
+    /** Current value (controlled). Pass an empty string for an empty field */
+    value?: number | '';
+    /** Initial value (uncontrolled) */
+    defaultValue?: number;
+    /** Minimum allowed value — steppers stop here, and typed values clamp to it on blur */
+    min?: number;
+    /** Maximum allowed value — steppers stop here, and typed values clamp to it on blur */
+    max?: number;
+    /** Amount each stepper click (or arrow key) changes the value by */
+    step?: number;
+    /** Component size (not the native character-width `size` attribute) */
+    size?: 'default' | 'compact';
+    /** Error state — shows error styling and message */
+    error?: boolean;
+    /** Helper or error message displayed below the input */
+    helperText?: string;
+    /**
+     * Convenience callback receiving the numeric value directly — `null` when
+     * the field is empty or unparseable. Fires on typing alongside `onChange`
+     * (which keeps the standard React event signature so form libraries work
+     * unmodified) and also on stepper clicks, where no native change event exists.
+     */
+    onValueChange?: (value: number | null) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
+    className?: string;
+};
+export interface NumberInputProps extends NumberInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof NumberInputOwnProps | 'type'> {
+}
+/**
+ * Numeric field with increment and decrement steppers and min/max clamping.
+ *
+ * The native spinners are hidden and replaced by stepper buttons that clamp to
+ * `min`/`max` and disable at the bounds; a typed out-of-range value clamps into
+ * range on blur. Forwards a ref to the underlying `<input>` and spreads
+ * unrecognised props onto it, so `inputMode`, `data-*` and form-library
+ * registration all work.
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/NumberInput/NumberInput.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Field } from "../Field/Field.js";
+import "./NumberInput.css";
+import "../../fonts/material-symbols.css";
+const parseValue = (raw) => {
+  if (raw === "" || raw === void 0) return null;
+  const parsed = typeof raw === "number" ? raw : parseFloat(raw);
+  return Number.isNaN(parsed) ? null : parsed;
+};
+const decimalsOf = (value) => {
+  const text = String(value);
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+};
+const NumberInput = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    min,
+    max,
+    step = 1,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onChange,
+    onValueChange,
+    onBlur,
+    className = "",
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-numberinput";
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState(
+      defaultValue !== void 0 ? String(defaultValue) : ""
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const currentNumber = parseValue(currentValue);
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const clamp = (candidate) => {
+      if (min !== void 0 && candidate < min) return min;
+      if (max !== void 0 && candidate > max) return max;
+      return candidate;
+    };
+    const commit = (next) => {
+      if (!isControlled) setInternalValue(String(next));
+      onValueChange?.(next);
+    };
+    const stepBy = (direction) => {
+      const base = currentNumber ?? 0;
+      const precision = Math.max(decimalsOf(base), decimalsOf(step));
+      commit(clamp(Number((base + direction * step).toFixed(precision))));
+    };
+    const handleChange = (e) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+      onValueChange?.(parseValue(e.target.value));
+    };
+    const handleBlur = (e) => {
+      const typed = parseValue(e.target.value);
+      if (typed !== null) {
+        const clamped = clamp(typed);
+        if (clamped !== typed) commit(clamped);
+      }
+      onBlur?.(e);
+    };
+    const atMin = min !== void 0 && currentNumber !== null && currentNumber <= min;
+    const atMax = max !== void 0 && currentNumber !== null && currentNumber >= max;
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const describedBy = helperText ? `${inputId}-helper` : rest["aria-describedby"];
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__shell`, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__stepper`,
+              "aria-label": "Decrease value",
+              disabled: disabled || atMin,
+              onClick: () => stepBy(-1),
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "remove" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              className: `${baseClass}__input`,
+              type: "number",
+              id: inputId,
+              name,
+              value: currentValue,
+              min,
+              max,
+              step,
+              disabled,
+              required,
+              "aria-label": rest["aria-label"] || label,
+              "aria-invalid": error,
+              "aria-describedby": describedBy,
+              onChange: handleChange,
+              onBlur: handleBlur
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__stepper`,
+              "aria-label": "Increase value",
+              disabled: disabled || atMax,
+              onClick: () => stepBy(1),
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "add" })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+export {
+  NumberInput
+};

package/components/Pagination/Pagination.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import "./Pagination.css";
 import "../../fonts/material-symbols.css";

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";