@robr0/design-system 0.8.0 → 0.9.0

package/components/Combobox/Combobox.js

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

package/components/CommandPalette/CommandPalette.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Composer/Composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useLayoutEffect } from "react";
 import { CircularButton } from "../CircularButton/CircularButton.js";

package/components/ContactCard/ContactCard.js

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

package/components/ContextMenu/ContextMenu.js

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

package/components/DataTable/DataTable.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useMemo } from "react";
 import { Table } from "../Table/Table.js";

package/components/DateInput/DateInput.js

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

package/components/DatePicker/DatePicker.js

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

package/components/Dialog/Dialog.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Drawer/Drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Dropdown/Dropdown.js

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

package/components/DropdownMenu/DropdownMenu.css

@@ -37,7 +37,7 @@
   left: 0;
   z-index: 50;
   min-width: 200px;
-  margin-top: var(--gap-xxs); /* 4px offset from trigger */
+  margin-top: var(--gap-xxs); /* 2px offset from trigger */
 
   /* Appearance — Figma: page/primary bg, input/border/primary, radius/md */
   background: var(--color-bg-page-primary);

package/components/DropdownMenu/DropdownMenu.js

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

package/components/EventCalendar/EventCalendar.js

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

package/components/Field/Field.js

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

package/components/Field/FieldContext.js

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 const FieldContext = React.createContext(null);
 const useField = () => React.useContext(FieldContext);

package/components/FileInput/FileInput.js

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

package/components/Input/Input.js

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

package/components/InterruptCard/InterruptCard.css

@@ -4,33 +4,25 @@
    from the agent, a detail slot, and option
    buttons in a footer.
 
-   ToolCall's pending language promoted to a
-   card — the warning pair on icon and border
-   while a decision is owed, routed through a
-   local custom-property pair so the answered
-   state repoints two variables and the whole
-   card drops to monochrome.
+   The card is deliberately quiet — one tone,
+   the standard container border, no status
+   colour. The question and its buttons are
+   the signal; the visually hidden status
+   announcement carries the waiting state.
    ============================================ */
 
 .ds-interrupt-card {
-  --ds-interrupt-card-color: var(--color-status-warning-text);
-  --ds-interrupt-card-border: var(--color-status-warning-border);
+  --ds-interrupt-card-color: var(--color-icon-secondary);
 
   display: flex;
   flex-direction: column;
   width: 100%;
   background-color: var(--color-bg-container-primary);
-  border: var(--border-xs) solid var(--ds-interrupt-card-border);
+  border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
 
-/* Decision made — no signal needed */
-.ds-interrupt-card--answered {
-  --ds-interrupt-card-color: var(--color-text-secondary);
-  --ds-interrupt-card-border: var(--color-bg-container-border);
-}
-
 /* ============================================
    HEADER
    ============================================ */
@@ -39,7 +31,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
 }
 
 .ds-interrupt-card__icon {
@@ -88,7 +80,7 @@
    ============================================ */
 
 .ds-interrupt-card__detail {
-  padding: 0 var(--padding-sm-md) var(--padding-sm);
+  padding: 0 var(--padding-md) var(--padding-sm-md);
 }
 
 .ds-interrupt-card__detail > :first-child {
@@ -111,9 +103,8 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
 }
 
 /* ============================================
@@ -127,9 +118,8 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-xs);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-paragraph-sm-weight);

package/components/InterruptCard/InterruptCard.d.ts

@@ -22,8 +22,7 @@ type InterruptCardOwnProps = {
     onValueChange?: (value: string) => void;
     /**
      * The already-chosen value. When set, the card renders its answered state:
-     * the warning signal drops to monochrome and the options are replaced by an
-     * echo of the chosen label.
+     * the options are replaced by a quiet echo of the chosen label.
      */
     value?: string;
     /** Override the echoed text in the answered state (default: the chosen option's label). */
@@ -43,10 +42,10 @@ export interface InterruptCardProps extends InterruptCardOwnProps, Omit<React.Co
  * with option buttons for the person to decide. "Allow this file edit?" —
  * allow once, always allow, deny.
  *
- * Unanswered it wears ToolCall's pending language promoted to a card: the
- * warning pair on icon and border, options in a footer outside the content.
- * Once `value` is set the decision is made, so the signal drops to monochrome
- * and the footer echoes the chosen label.
+ * The card stays quiet in both states: one tone, the standard container
+ * border, options in a footer outside the content. Once `value` is set the
+ * decision is made and the footer echoes the chosen label; a visually hidden
+ * status announcement carries the waiting state for screen readers.
  *
  * Fully controlled: the card never stores the answer itself — `onValueChange`
  * reports the choice and `value` renders it.

package/components/MessageCard/MessageCard.css

@@ -106,7 +106,6 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-sm);
-  padding: var(--padding-sm) var(--padding-sm-md);
+  padding: var(--padding-sm-md) var(--padding-md);
   border-top: var(--border-xs) solid var(--color-divider);
-  background-color: var(--color-bg-container-secondary);
 }

package/components/ModelPicker/ModelPicker.css

@@ -76,7 +76,9 @@
   min-width: 260px;
   display: flex;
   flex-direction: column;
-  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);
   border: var(--border-xs) solid var(--color-bg-container-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-floating);

package/components/ModelPicker/ModelPicker.js

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

package/components/NavList/NavList.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useId, useState } from "react";
 import { Button } from "../Button/Button.js";

package/components/NotificationCenter/NotificationCenter.js

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

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