rift-ds 1.0.0

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

@@ -0,0 +1,118 @@
+/* ============================================
+   POPOVER COMPONENT
+   Contextual overlay panel
+   ============================================ */
+
+.ds-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-popover__trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-popover__panel {
+  position: absolute;
+  z-index: 10;
+  min-width: 200px;
+  padding: var(--padding-400); /* 16px */
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-200); /* 8px */
+  /* 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. display:none keeps the closed panel out of the tab
+     order and accessibility tree AND out of the page's scrollable overflow —
+     a min-width 200px panel on an edge-adjacent trigger would otherwise add
+     horizontal scroll while invisible (see Tooltip, where the leak was
+     found). allow-discrete holds the panel through the exit fade,
+     @starting-style below supplies the entry frame; browsers without those
+     skip the fades but open and close correctly. */
+  display: none;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.96);
+  transition-property: opacity, transform, display;
+  transition-duration: var(--motion-duration-base);
+  transition-timing-function: var(--motion-ease-standard);
+  transition-behavior: allow-discrete;
+}
+
+.ds-popover__panel--open {
+  display: block;
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+/* Entry state for the display flip: a panel arriving from display:none has
+   no prior computed style, so this supplies the fade's starting frame. */
+@starting-style {
+  .ds-popover__panel--open {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* ============================================
+   POSITION — BOTTOM (default)
+   ============================================ */
+
+.ds-popover__panel--bottom {
+  top: 100%;
+  left: 0;
+  margin-top: var(--gap-050); /* 2px */
+}
+
+/* ============================================
+   POSITION — TOP
+   ============================================ */
+
+.ds-popover__panel--top {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: var(--gap-050); /* 2px */
+}
+
+/* ============================================
+   POSITION — LEFT
+   ============================================ */
+
+.ds-popover__panel--left {
+  right: 100%;
+  top: 0;
+  margin-right: var(--gap-050); /* 2px */
+}
+
+/* ============================================
+   POSITION — RIGHT
+   ============================================ */
+
+.ds-popover__panel--right {
+  left: 100%;
+  top: 0;
+  margin-left: var(--gap-050); /* 2px */
+}
+
+/* ============================================
+   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-200); /* 8px */
+  min-width: 160px;
+}

package/components/Popover/Popover.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface PopoverProps {
+    /** Trigger element */
+    children: React.ReactNode;
+    /** Popover content */
+    content: React.ReactNode;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Preferred position */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Trigger mode */
+    trigger?: 'click' | 'hover';
+    /** Whether the popover is open (controlled mode) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible label for the trigger */
+    ariaLabel?: string;
+    /** Additional CSS classes for the popover panel */
+    className?: string;
+}
+export declare const Popover: ({ children, content, size, position, trigger, open: controlledOpen, onOpenChange, ariaLabel, className, }: PopoverProps) => React.JSX.Element;

package/components/Popover/Popover.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+import "./Popover.css";
+const INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["button", "a", "input", "select", "textarea", "summary"]);
+const canCarryPopoverSemantics = (el) => typeof el.type === "string" ? INTERACTIVE_TAGS.has(el.type) : true;
+const Popover = ({
+  children,
+  content,
+  size = "default",
+  position = "bottom",
+  trigger = "click",
+  open: controlledOpen,
+  onOpenChange,
+  ariaLabel,
+  className = ""
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const containerRef = useRef(null);
+  const hoverTimeoutRef = useRef(void 0);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback((next) => {
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [isControlled, onOpenChange]);
+  useEffect(() => {
+    return () => clearTimeout(hoverTimeoutRef.current);
+  }, []);
+  useEffect(() => {
+    if (!isOpen || trigger !== "click") return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen, trigger, setOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, setOpen]);
+  const handleClick = () => {
+    if (trigger === "click") {
+      setOpen(!isOpen);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (trigger === "hover") {
+      clearTimeout(hoverTimeoutRef.current);
+      setOpen(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (trigger === "hover") {
+      hoverTimeoutRef.current = setTimeout(() => setOpen(false), MOTION_HOVER_HIDE_DELAY_MS);
+    }
+  };
+  const baseClass = "ds-popover";
+  const sizeClass = `${baseClass}--${size}`;
+  const positionClass = `${baseClass}__panel--${position}`;
+  const openClass = isOpen ? `${baseClass}__panel--open` : "";
+  const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+  const panelClasses = [`${baseClass}__panel`, sizeClass, positionClass, openClass].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClasses,
+      ref: containerRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__trigger`, onClick: handleClick, children: React.isValidElement(children) && canCarryPopoverSemantics(children) ? React.cloneElement(children, {
+          "aria-expanded": isOpen,
+          "aria-haspopup": "dialog",
+          ...ariaLabel ? { "aria-label": ariaLabel } : {}
+        }) : trigger === "click" ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "dialog",
+            "aria-label": ariaLabel,
+            children
+          }
+        ) : children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: panelClasses,
+            role: "dialog",
+            "aria-label": ariaLabel || "Popover",
+            "aria-hidden": !isOpen,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Popover
+};

package/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,60 @@
+/* ============================================
+   PROGRESS BAR COMPONENT
+   Displays completion progress as a horizontal bar
+   ============================================ */
+
+.ds-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--padding-200);
+  width: 100%;
+}
+
+/* ============================================
+   TRACK
+   ============================================ */
+
+.ds-progress-bar__track {
+  flex: 1;
+  height: 8px;
+  background-color: var(--color-bg-container-tertiary);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+
+.ds-progress-bar--compact .ds-progress-bar__track {
+  height: 4px;
+}
+
+/* ============================================
+   FILL
+   ============================================ */
+
+.ds-progress-bar__fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  transition: width var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-progress-bar__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);
+  min-width: 36px;
+  text-align: right;
+}
+
+/* ============================================
+   FILL COLOUR
+   ============================================ */
+
+.ds-progress-bar__fill {
+  background-color: var(--color-core-accent-mint);
+}

package/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,16 @@
+export interface ProgressBarProps {
+    /** Current progress value (0–100) */
+    value?: number;
+    /** Size of the bar */
+    size?: 'default' | 'compact';
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Accessible label describing what is loading */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ProgressBar displays completion progress as a horizontal bar.
+ */
+export declare const ProgressBar: ({ value, size, showLabel, ariaLabel, className, }: ProgressBarProps) => import("react").JSX.Element;

package/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./ProgressBar.css";
+const ProgressBar = ({
+  value = 0,
+  size = "default",
+  showLabel = false,
+  ariaLabel,
+  className = ""
+}) => {
+  const clamped = Math.max(0, Math.min(100, value));
+  const baseClass = "ds-progress-bar";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel || "Progress", children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__fill`, style: { width: `${clamped}%` } }) }),
+    showLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
+      clamped,
+      "%"
+    ] })
+  ] });
+};
+export {
+  ProgressBar
+};