rift-ds 1.0.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

@@ -0,0 +1,121 @@
+/* ============================================
+   STAT COMPONENT
+   A single headline metric with label and an
+   optional trend delta. Compose in a row for
+   a metrics band.
+   ============================================ */
+
+.ds-stat {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-050);
+}
+
+/* ============================================
+   VALUE — display weight (300), per the
+   weight-contrast rule for display numerals
+   ============================================ */
+
+.ds-stat__value {
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-stat--large .ds-stat__value {
+  font-family: var(--font-display-2-family);
+  font-size: var(--font-display-2-size);
+  line-height: var(--font-display-2-line-height);
+  letter-spacing: var(--font-display-2-letter-spacing);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-stat__label {
+  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-tertiary);
+}
+
+/* ============================================
+   DELTA — trend-coloured annotation
+   ============================================ */
+
+.ds-stat__delta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+.ds-stat__delta .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+  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-trend-up);
+}
+
+.ds-stat__delta--down {
+  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-200);
+  row-gap: var(--gap-050);
+}
+
+.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-100);
+}
+
+/* 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-stat .material-symbols-rounded {
+  color: inherit;
+}

package/components/Stat/Stat.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface StatProps {
+    /** The headline number, e.g. "~900%" or "3.8M" — or a node, such as an AnimatedNumber, for figures that move */
+    value: React.ReactNode;
+    /** What the number measures */
+    label: string;
+    /** Optional change annotation, e.g. "+42% vs last quarter" */
+    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 */
+    className?: string;
+}
+/**
+ * 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, deltaPlacement, size, className, }: StatProps) => React.JSX.Element;

package/components/Stat/Stat.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Stat.css";
+import "../../fonts/material-symbols.css";
+const TREND_ICONS = {
+  up: "arrow_upward",
+  down: "arrow_downward",
+  neutral: "remove"
+};
+const Stat = ({
+  value,
+  label,
+  delta,
+  trend = "neutral",
+  deltaPlacement = "stacked",
+  size = "default",
+  className = ""
+}) => {
+  const baseClass = "ds-stat";
+  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 }),
+    delta && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__delta ${baseClass}__delta--${trend}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: TREND_ICONS[trend] }),
+      delta
+    ] })
+  ] });
+};
+export {
+  Stat
+};

package/components/StatusDot/StatusDot.css

@@ -0,0 +1,104 @@
+/* ============================================
+   STATUS DOT COMPONENT
+   Bare presence/status indicator with optional
+   label and live pulse
+   ============================================ */
+
+/* Base */
+
+.ds-status-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100);
+}
+
+.ds-status-dot__indicator {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: var(--radius-pill);
+}
+
+.ds-status-dot__label {
+  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;
+}
+
+/* Sizes — the dot rides the icon scale at half-diameter, so it can never
+   drift from the glyphs it sits beside. */
+
+.ds-status-dot--sm .ds-status-dot__indicator {
+  width: calc(var(--icon-size-500) / 2); /* 10px */
+  height: calc(var(--icon-size-500) / 2);
+}
+
+.ds-status-dot--md .ds-status-dot__indicator {
+  width: calc(var(--icon-size-600) / 2); /* 12px */
+  height: calc(var(--icon-size-600) / 2);
+}
+
+.ds-status-dot--lg .ds-status-dot__indicator {
+  width: calc(var(--icon-size-800) / 2); /* 16px */
+  height: calc(var(--icon-size-800) / 2);
+}
+
+/* Variants — the plain-surface icon steps, tuned to hold on bare
+   containers where the status text tints wash out. */
+
+.ds-status-dot--info .ds-status-dot__indicator {
+  background-color: var(--color-status-info-icon);
+}
+
+.ds-status-dot--positive .ds-status-dot__indicator {
+  background-color: var(--color-status-positive-icon);
+}
+
+.ds-status-dot--warning .ds-status-dot__indicator {
+  background-color: var(--color-status-warning-icon);
+}
+
+.ds-status-dot--error .ds-status-dot__indicator {
+  background-color: var(--color-status-error-icon);
+}
+
+.ds-status-dot--neutral .ds-status-dot__indicator {
+  background-color: var(--color-status-neutral-icon);
+}
+
+/* Pulse — a ring of the dot's own colour swelling out and fading, on the
+   shimmer loop so every live indicator in the system breathes at one rate. */
+
+.ds-status-dot--pulse .ds-status-dot__indicator::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pill);
+  background-color: inherit;
+  animation: ds-status-dot-pulse var(--motion-duration-loop-shimmer) var(--motion-ease-standard)
+    infinite;
+}
+
+@keyframes ds-status-dot-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  70%,
+  100% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+}
+
+/* The looping ring parks rather than strobing through the collapsed
+   duration — same treatment as the other looping indicators. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-status-dot--pulse .ds-status-dot__indicator::after {
+    animation: none;
+    opacity: 0;
+  }
+}

package/components/StatusDot/StatusDot.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+/** Props owned by StatusDot itself — everything else falls through to the root span. */
+type StatusDotOwnProps = {
+    /** Status role the dot carries — coloured through the plain-surface `--color-status-*-icon` steps. */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Dot diameter, derived from the icon scale (half of `--icon-size-500/md/lg`). */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Radiates a repeating ring from the dot for a live state — recording,
+     * online now, deploy in flight. The ring stills under reduced motion.
+     */
+    pulse?: boolean;
+    /**
+     * Visible text beside the dot. Omit it for a bare dot only when the meaning
+     * has another home — a row label, or an `aria-label` passed through — since
+     * a colour alone announces nothing.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface StatusDotProps extends StatusDotOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof StatusDotOwnProps> {
+}
+/**
+ * StatusDot — the bare presence/status indicator: a small dot in one of the
+ * five status roles, with an optional visible label and an optional live
+ * pulse. Where Badge carries a text label on a tinted fill, StatusDot is the
+ * mark alone — for table rows, avatars, nav items, and anywhere a full badge
+ * is too loud.
+ *
+ * Purely presentational: safe to render from a Server Component.
+ */
+export declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/components/StatusDot/StatusDot.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./StatusDot.css";
+const StatusDot = React.forwardRef(
+  ({ variant = "neutral", size = "md", pulse = false, label, className = "", ...rest }, ref) => {
+    const baseClass = "ds-status-dot";
+    const classes = [
+      baseClass,
+      `${baseClass}--${variant}`,
+      `${baseClass}--${size}`,
+      pulse && `${baseClass}--pulse`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, role: "status", children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true" }),
+      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+    ] });
+  }
+);
+StatusDot.displayName = "StatusDot";
+export {
+  StatusDot
+};

package/components/Stepper/Stepper.css

@@ -0,0 +1,216 @@
+/* ============================================
+   STEPPER COMPONENT
+   Step-by-step progress indicator for wizards
+   and multi-stage flows
+   ============================================ */
+
+/* Base */
+
+.ds-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.ds-stepper__step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+/* Shared inner layout — a <button> when the step is clickable,
+   a <span> otherwise */
+.ds-stepper__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-200); /* 8px */
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  text-align: center;
+  color: inherit;
+  min-width: 0;
+}
+
+button.ds-stepper__content {
+  cursor: pointer;
+}
+
+button.ds-stepper__content:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-200);
+}
+
+/* ============================================
+   INDICATOR
+   32px circle — check for complete, number
+   for active and upcoming
+   ============================================ */
+
+.ds-stepper__indicator {
+  --icon-size: var(--icon-size-500);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: var(--border-025) solid transparent;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  transition:
+    background-color var(--motion-duration-base) var(--motion-ease-standard),
+    border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* States */
+
+.ds-stepper__step--complete .ds-stepper__indicator {
+  border-color: var(--color-action-primary-border-secondary);
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-stepper__step--active .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__indicator {
+  border-color: var(--color-bg-container-border);
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-stepper__step--active button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   LABEL + DESCRIPTION
+   ============================================ */
+
+.ds-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+  min-width: 0;
+}
+
+.ds-stepper__label {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--active .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__label {
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__description {
+  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-tertiary);
+}
+
+/* ============================================
+   CONNECTOR
+   Drawn between an indicator and the next;
+   turns action-coloured behind completed steps
+   ============================================ */
+
+.ds-stepper__connector {
+  position: absolute;
+  top: 16px; /* vertical centre of the 32px indicator */
+  left: calc(50% + 24px);
+  right: calc(-50% + 24px);
+  height: var(--border-050);
+  transform: translateY(-50%);
+  background-color: var(--color-divider);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--complete .ds-stepper__connector {
+  background-color: var(--color-action-primary-border-secondary);
+}
+
+/* ============================================
+   VERTICAL
+   ============================================ */
+
+.ds-stepper--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ds-stepper--vertical .ds-stepper__step {
+  flex: none;
+  justify-content: flex-start;
+  padding-bottom: var(--gap-500); /* 20px */
+}
+
+.ds-stepper--vertical .ds-stepper__step:last-child {
+  padding-bottom: 0;
+}
+
+.ds-stepper--vertical .ds-stepper__content {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--gap-300); /* 12px */
+  text-align: left;
+}
+
+/* Centre the first label line on the 32px indicator */
+.ds-stepper--vertical .ds-stepper__text {
+  padding-top: calc((32px - var(--font-paragraph-sm-emphasis-line-height)) / 2);
+}
+
+.ds-stepper--vertical .ds-stepper__connector {
+  top: calc(32px + var(--gap-100));
+  bottom: var(--gap-100);
+  left: 16px; /* horizontal centre of the 32px indicator */
+  right: auto;
+  width: var(--border-050);
+  height: auto;
+  transform: translateX(-50%);
+}
+
+/* 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-stepper .material-symbols-rounded {
+  color: inherit;
+}