rift-ds 1.0.0

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.css

@@ -0,0 +1,126 @@
+/* ============================================
+   PAGINATION COMPONENT
+   Page navigation for long datasets
+   ============================================ */
+
+.ds-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100); /* 4px */
+}
+
+.ds-pagination__list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100); /* 4px */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   PAGE BUTTONS
+   Pill-shaped, matching CircularButton sizing
+   ============================================ */
+
+.ds-pagination__page,
+.ds-pagination__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill); /* pill */
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-pagination__page:hover:not(:disabled):not(.ds-pagination__page--current),
+.ds-pagination__arrow:hover:not(:disabled) {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-pagination__page:focus-visible,
+.ds-pagination__arrow:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   CURRENT PAGE
+   Same active treatment as SegmentedControl
+   ============================================ */
+
+.ds-pagination__page--current {
+  background-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-pagination__page--current:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   ARROWS
+   ============================================ */
+
+.ds-pagination__icon {
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+.ds-pagination__arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ELLIPSIS
+   ============================================ */
+
+.ds-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ============================================
+   COMPACT
+   Prev/next arrows with a page readout
+   ============================================ */
+
+.ds-pagination--compact .ds-pagination__arrow {
+  width: 32px;
+  height: 32px;
+}
+
+.ds-pagination--compact .ds-pagination__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-pagination__readout {
+  padding: 0 var(--padding-200); /* 8px */
+  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-secondary);
+  white-space: nowrap;
+}

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+export interface PaginationProps {
+    /** Current page (1-based) */
+    page: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Callback with the requested page */
+    onPageChange: (page: number) => void;
+    /** Pages shown on each side of the current page */
+    siblingCount?: number;
+    /** Component size — compact swaps the numbers for a "Page X of Y" readout */
+    size?: 'default' | 'compact';
+    /** Accessible label for the nav landmark */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Pagination component — page navigation for long datasets.
+ * Numbered pages with ellipses for large ranges, or a compact
+ * prev/next readout. Pairs with Table.
+ */
+export declare const Pagination: ({ page, pageCount, onPageChange, siblingCount, size, ariaLabel, className, }: PaginationProps) => import("react").JSX.Element;

package/components/Pagination/Pagination.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Pagination.css";
+import "../../fonts/material-symbols.css";
+const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+const getPageItems = (page, pageCount, siblingCount) => {
+  const totalNumbers = siblingCount * 2 + 5;
+  if (pageCount <= totalNumbers) {
+    return range(1, pageCount);
+  }
+  const leftSibling = Math.max(page - siblingCount, 1);
+  const rightSibling = Math.min(page + siblingCount, pageCount);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < pageCount - 1;
+  if (!showLeftEllipsis && showRightEllipsis) {
+    return [...range(1, 3 + 2 * siblingCount), "end-ellipsis", pageCount];
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    return [1, "start-ellipsis", ...range(pageCount - (2 + 2 * siblingCount), pageCount)];
+  }
+  return [1, "start-ellipsis", ...range(leftSibling, rightSibling), "end-ellipsis", pageCount];
+};
+const Pagination = ({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  size = "default",
+  ariaLabel = "Pagination",
+  className = ""
+}) => {
+  const baseClass = "ds-pagination";
+  const compact = size === "compact";
+  const clampedPage = Math.min(Math.max(page, 1), Math.max(pageCount, 1));
+  const isFirst = clampedPage <= 1;
+  const isLast = clampedPage >= pageCount;
+  const goTo = (target) => {
+    const next = Math.min(Math.max(target, 1), pageCount);
+    if (next !== clampedPage) onPageChange(next);
+  };
+  const classes = [baseClass, compact ? `${baseClass}--compact` : "", className].filter(Boolean).join(" ");
+  const arrowButton = (direction) => {
+    const disabled = direction === "previous" ? isFirst : isLast;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__arrow`,
+        onClick: () => goTo(direction === "previous" ? clampedPage - 1 : clampedPage + 1),
+        disabled,
+        "aria-label": direction === "previous" ? "Previous page" : "Next page",
+        children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: direction === "previous" ? "chevron_left" : "chevron_right" })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: classes, "aria-label": ariaLabel, children: [
+    arrowButton("previous"),
+    compact ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__readout`, "aria-live": "polite", children: [
+      "Page ",
+      clampedPage,
+      " of ",
+      pageCount
+    ] }) : /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: getPageItems(clampedPage, pageCount, siblingCount).map(
+      (item) => typeof item === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            `${baseClass}__page`,
+            item === clampedPage ? `${baseClass}__page--current` : ""
+          ].filter(Boolean).join(" "),
+          onClick: () => goTo(item),
+          "aria-current": item === clampedPage ? "page" : void 0,
+          "aria-label": `Page ${item}`,
+          children: item
+        }
+      ) }, item) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__ellipsis`, "aria-hidden": "true", children: "…" }) }, item)
+    ) }),
+    arrowButton("next")
+  ] });
+};
+export {
+  Pagination
+};

package/components/Panel/Panel.css

@@ -0,0 +1,26 @@
+/* ============================================
+   PANEL COMPONENT
+   The plain dashboard surface
+   ============================================ */
+
+.ds-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400);
+  min-width: 0;
+  background-color: var(--color-bg-container-primary);
+  border-radius: var(--radius-600);
+  padding: var(--padding-500);
+}
+
+/* ============================================
+   PADDING VARIANTS
+   ============================================ */
+
+.ds-panel--compact {
+  padding: var(--padding-400);
+}
+
+.ds-panel--flush {
+  padding: 0;
+}

package/components/Panel/Panel.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+/** Props owned by Panel itself; everything else falls through to the <div>. */
+type PanelOwnProps = {
+    /** Interior padding: 'default' uses --padding-500, 'compact' uses --padding-400, 'none' removes it */
+    padding?: 'default' | 'compact' | 'none';
+    /** Additional CSS classes */
+    className?: string;
+    /** Panel content */
+    children?: React.ReactNode;
+};
+export interface PanelProps extends PanelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof PanelOwnProps> {
+}
+/**
+ * Panel component: the plain dashboard surface.
+ * A rounded container on the primary container background with no border and
+ * no shadow: just the surface, ready for whatever a dashboard region holds.
+ * Content stacks vertically with a medium gap.
+ *
+ * Forwards a ref to the `<div>` element and spreads unrecognised props onto it.
+ */
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Panel/Panel.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Panel.css";
+const Panel = React.forwardRef(
+  ({ padding = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-panel";
+    const classes = [
+      baseClass,
+      padding === "compact" ? `${baseClass}--compact` : "",
+      padding === "none" ? `${baseClass}--flush` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children });
+  }
+);
+Panel.displayName = "Panel";
+export {
+  Panel
+};

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-200); /* 8px */
+}
+
+/* ============================================
+   CELLS ROW
+   ============================================ */
+
+.ds-pininput__cells {
+  display: flex;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* ============================================
+   CELL
+   ============================================ */
+
+.ds-pininput__cell {
+  /* Fixed control geometry, like the ToggleSwitch track */
+  width: 44px;
+  height: 52px;
+  padding: 0;
+  text-align: center;
+
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-input-bg-primary);
+
+  /* Typography */
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-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 {};