sid-ui 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sid-ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "packageManager": "bun@1.4.2",
   "description": "React components, tokens, and theme used by Joined products.",
   "repository": {

package/src/components/BarChart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type CSSProperties } from "react";
 
 import { segmentShares } from "./chartMath";
 import { ChartTable, ChartTip, defaultFormat, type ChartTone } from "./chartParts";
@@ -84,7 +84,7 @@ export function BarChart({
                 <span
                   className="os-bars-mark"
                   data-tone={datum.tone ?? tone}
-                  style={{ height: size(datum.value) }}
+                  style={{ height: size(datum.value), "--os-bar-i": index } as CSSProperties}
                 />
                 {active === index ? tip(index) : null}
               </div>
@@ -107,7 +107,7 @@ export function BarChart({
                 <span
                   className="os-bars-mark"
                   data-tone={datum.tone ?? tone}
-                  style={{ width: size(datum.value) }}
+                  style={{ width: size(datum.value), "--os-bar-i": index } as CSSProperties}
                 />
                 {active === index ? tip(index) : null}
               </span>

package/src/components/CardEffects.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import {
+  useId,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PointerEvent,
+  type ReactNode,
+} from "react";
+
+import { Glyph } from "./Glyph";
+
+/** lift rises on hover; tilt leans toward the pointer with a glare; spotlight glows under it. */
+export type MotionCardEffect = "lift" | "tilt" | "spotlight";
+
+export interface MotionCardProps {
+  children: ReactNode;
+  effect?: MotionCardEffect;
+  /** Inner padding as any CSS length. */
+  padding?: string;
+  /** Width as a number of px or any CSS width. */
+  width?: number | string;
+  /** Tilt only: the largest lean in degrees. */
+  maxTilt?: number;
+  /** Spotlight and tilt: the glow color. Defaults to the accent. */
+  glowColor?: string;
+  className?: string;
+}
+
+function size(value: number | string | undefined) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+/**
+ * A card that answers the pointer. The effect is pure CSS driven by custom properties, so moving
+ * the pointer never re-renders React. Reduced motion keeps the glow and drops the movement.
+ */
+export function MotionCard({
+  children,
+  effect = "lift",
+  padding = "var(--spacing-5)",
+  width,
+  maxTilt = 10,
+  glowColor,
+  className,
+}: MotionCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const node = ref.current;
+    if (!node || effect === "lift") return;
+    const box = node.getBoundingClientRect();
+    const x = (event.clientX - box.left) / box.width;
+    const y = (event.clientY - box.top) / box.height;
+    node.style.setProperty("--os-mc-x", `${x * 100}%`);
+    node.style.setProperty("--os-mc-y", `${y * 100}%`);
+    if (effect === "tilt") {
+      node.style.setProperty("--os-mc-rx", `${(0.5 - y) * maxTilt * 2}deg`);
+      node.style.setProperty("--os-mc-ry", `${(x - 0.5) * maxTilt * 2}deg`);
+    }
+  };
+
+  const onPointerLeave = () => {
+    const node = ref.current;
+    if (!node) return;
+    node.style.setProperty("--os-mc-rx", "0deg");
+    node.style.setProperty("--os-mc-ry", "0deg");
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={["os-mc", `os-mc-${effect}`, className].filter(Boolean).join(" ")}
+      style={
+        {
+          "--os-mc-pad": padding,
+          "--os-mc-glow": glowColor,
+          width: size(width),
+        } as CSSProperties
+      }
+      onPointerMove={onPointerMove}
+      onPointerLeave={onPointerLeave}
+    >
+      <div className="os-mc-body">{children}</div>
+      {effect !== "lift" && <span className="os-mc-light" aria-hidden />}
+    </div>
+  );
+}
+
+export interface FlipCardProps {
+  front: ReactNode;
+  back: ReactNode;
+  /** Controlled side. Omit to let the card flip itself. */
+  isFlipped?: boolean;
+  onFlipChange?: (isFlipped: boolean) => void;
+  /** Both faces share this height. */
+  height: number | string;
+  width?: number | string;
+  /** Names the flip button for assistive tech. */
+  label?: string;
+  /** vertical flips over the top edge instead of the side. */
+  direction?: "horizontal" | "vertical";
+}
+
+/**
+ * Two faces on one card. The round button in the corner turns it over (or flip it from outside
+ * with `isFlipped`); the hidden face is inert so focus and screen readers stay on the visible side.
+ */
+export function FlipCard({
+  front,
+  back,
+  isFlipped,
+  onFlipChange,
+  height,
+  width,
+  label = "Flip card",
+  direction = "horizontal",
+}: FlipCardProps) {
+  const [own, setOwn] = useState(false);
+  const flipped = isFlipped ?? own;
+  const flip = () => {
+    if (isFlipped === undefined) setOwn(!flipped);
+    onFlipChange?.(!flipped);
+  };
+
+  return (
+    <div
+      className={["os-flip", `os-flip-${direction}`, flipped && "os-flip-on"].filter(Boolean).join(" ")}
+      style={{ height: size(height), width: size(width) }}
+    >
+      <div className="os-flip-inner">
+        <div className="os-flip-face os-flip-front" inert={flipped}>
+          {front}
+        </div>
+        <div className="os-flip-face os-flip-back" inert={!flipped}>
+          {back}
+        </div>
+      </div>
+      <button
+        type="button"
+        className="os-flip-toggle"
+        aria-label={label}
+        aria-pressed={flipped}
+        onClick={flip}
+      >
+        <Glyph name="refresh" />
+      </button>
+    </div>
+  );
+}
+
+export interface ExpandableCardProps {
+  /** Always visible; clicking it toggles the body. */
+  header: ReactNode;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  isExpanded?: boolean;
+  onExpandedChange?: (isExpanded: boolean) => void;
+  width?: number | string;
+}
+
+/** A card whose body slides open under its header — FAQs, job details, order lines. */
+export function ExpandableCard({
+  header,
+  children,
+  defaultExpanded = false,
+  isExpanded,
+  onExpandedChange,
+  width,
+}: ExpandableCardProps) {
+  const id = useId();
+  const [own, setOwn] = useState(defaultExpanded);
+  const open = isExpanded ?? own;
+  const toggle = () => {
+    if (isExpanded === undefined) setOwn(!open);
+    onExpandedChange?.(!open);
+  };
+
+  return (
+    <div className={open ? "os-xcard os-xcard-open" : "os-xcard"} style={{ width: size(width) }}>
+      <button
+        type="button"
+        className="os-xcard-head"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={toggle}
+      >
+        <span className="os-xcard-title">{header}</span>
+        <span className="os-xcard-chevron" aria-hidden>
+          <Glyph name="chevronDown" />
+        </span>
+      </button>
+      <div className="os-xcard-panel" id={id} inert={!open}>
+        <div className="os-xcard-body">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/Chip.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import { Glyph } from "./Glyph";
+
+export type ChipColor =
+  | "neutral"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "red"
+  | "purple"
+  | "pink"
+  | "teal"
+  | "orange"
+  | "cyan";
+
+/** filled is a solid tint, soft a lighter one, outlined a hairline on the surface. */
+export type ChipVariant = "filled" | "soft" | "outlined";
+
+export type ChipSize = "sm" | "md" | "lg";
+
+export interface ChipProps {
+  label: ReactNode;
+  /** Identifies the chip inside a ChipGroup. */
+  value?: string;
+  variant?: ChipVariant;
+  color?: ChipColor;
+  size?: ChipSize;
+  /** Leading visual — an Icon, a small Avatar, or a color swatch. */
+  start?: ReactNode;
+  /** A trailing count, such as the number of results behind a filter. */
+  count?: number;
+  /** Selected filter chips take the accent and grow a check mark. */
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  /** Makes the chip a button. Inside a ChipGroup the group handles clicks. */
+  onClick?: () => void;
+  /** Makes the chip a link. */
+  href?: string;
+  /** Adds a remove button. The chip collapses away first, then this runs. */
+  onRemove?: () => void;
+  removeLabel?: string;
+}
+
+type GroupContext = {
+  selected: string[];
+  toggle: (value: string) => void;
+  /** Unset for a plain group that only shares size and variant. */
+  mode?: "single" | "multiple";
+  size?: ChipSize;
+  variant?: ChipVariant;
+};
+
+const ChipGroupContext = createContext<GroupContext | null>(null);
+
+/** Matches the collapse in chip.css, so the chip is gone before the parent drops it. */
+const REMOVE_MS = 180;
+
+function reducedMotion() {
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+/**
+ * A compact, rounded label: a tag, a filter, a removable input, or a small action. Put several
+ * in a ChipGroup to make them a single or multiple choice.
+ */
+export function Chip({
+  label,
+  value,
+  variant,
+  color = "neutral",
+  size,
+  start,
+  count,
+  isSelected,
+  isDisabled = false,
+  onClick,
+  href,
+  onRemove,
+  removeLabel = "Remove",
+}: ChipProps) {
+  const group = useContext(ChipGroupContext);
+  const [leaving, setLeaving] = useState(false);
+  const inGroup = group?.mode != null && value != null;
+  const selected = inGroup ? (group?.selected.includes(value) ?? false) : Boolean(isSelected);
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedVariant = variant ?? group?.variant ?? "soft";
+  const selectable = inGroup || isSelected !== undefined;
+
+  const remove = () => {
+    if (!onRemove || leaving) return;
+    if (reducedMotion()) {
+      onRemove();
+      return;
+    }
+    setLeaving(true);
+    window.setTimeout(onRemove, REMOVE_MS);
+  };
+
+  const content = (
+    <>
+      {selectable && (
+        <span className="os-chip-check" aria-hidden>
+          <span>
+            <Glyph name="check" />
+          </span>
+        </span>
+      )}
+      {start != null && <span className="os-chip-start">{start}</span>}
+      <span className="os-chip-label">{label}</span>
+      {count != null && <span className="os-chip-count">{count}</span>}
+    </>
+  );
+
+  const className = [
+    "os-chip",
+    `os-chip-${resolvedVariant}`,
+    `os-chip-${color}`,
+    `os-chip-${resolvedSize}`,
+    selected && "os-chip-selected",
+    isDisabled && "os-chip-disabled",
+    onRemove && "os-chip-removable",
+    leaving && "os-chip-leaving",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleClick = () => {
+    if (inGroup) group?.toggle(value);
+    onClick?.();
+  };
+
+  let main: ReactNode;
+  if (href && !isDisabled) {
+    main = (
+      <a className="os-chip-main" href={href}>
+        {content}
+      </a>
+    );
+  } else if (inGroup || onClick || selectable) {
+    const single = inGroup && group?.mode === "single";
+    main = (
+      <button
+        type="button"
+        className="os-chip-main"
+        onClick={handleClick}
+        disabled={isDisabled}
+        role={single ? "radio" : undefined}
+        aria-checked={single ? selected : undefined}
+        aria-pressed={!single && selectable ? selected : undefined}
+      >
+        {content}
+      </button>
+    );
+  } else {
+    main = <span className="os-chip-main">{content}</span>;
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
+    if (onRemove && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      remove();
+    }
+  };
+
+  return (
+    <span className={className} onKeyDown={onRemove ? onKeyDown : undefined}>
+      <span className="os-chip-inner">
+        {main}
+        {onRemove && (
+          <button
+            type="button"
+            className="os-chip-remove"
+            aria-label={typeof label === "string" ? `${removeLabel} ${label}` : removeLabel}
+            onClick={remove}
+            disabled={isDisabled}
+          >
+            <Glyph name="close" />
+          </button>
+        )}
+      </span>
+    </span>
+  );
+}
+
+export interface ChipGroupProps {
+  children: ReactNode;
+  /** Accessible name for the set. */
+  label: string;
+  /** single behaves like radio buttons, multiple like toggles. Omit for a plain set of chips. */
+  selectionMode?: "single" | "multiple";
+  /** Selected chip values. */
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  /** single mode: allow clicking the selected chip to clear it. */
+  isClearable?: boolean;
+  size?: ChipSize;
+  variant?: ChipVariant;
+  /** Lays the chips in one scrolling row instead of wrapping. */
+  isScrollable?: boolean;
+}
+
+/** A row of chips that share a size and, optionally, a selection. */
+export function ChipGroup({
+  children,
+  label,
+  selectionMode,
+  value = [],
+  onChange,
+  isClearable = false,
+  size,
+  variant,
+  isScrollable = false,
+}: ChipGroupProps) {
+  const toggle = (chip: string) => {
+    if (!onChange) return;
+    if (selectionMode === "single") {
+      const isOn = value.includes(chip);
+      onChange(isOn ? (isClearable ? [] : value) : [chip]);
+    } else {
+      onChange(value.includes(chip) ? value.filter((v) => v !== chip) : [...value, chip]);
+    }
+  };
+
+  const role = selectionMode === "single" ? "radiogroup" : "group";
+  const groupClass = ["os-chip-group", isScrollable && "os-chip-group-scroll"]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <ChipGroupContext.Provider
+      value={{ selected: value, toggle, mode: selectionMode, size, variant }}
+    >
+      <div className={groupClass} role={role} aria-label={label}>
+        {children}
+      </div>
+    </ChipGroupContext.Provider>
+  );
+}

package/src/components/CodeInput.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import {
+  useEffect,
   useId,
   useRef,
+  useState,
   type ClipboardEvent,
   type ChangeEvent,
   type CSSProperties,
@@ -41,7 +43,74 @@ export interface CodeInputProps {
   size?: ControlSize;
 }
 
-/** One round cell per character. Typing, pasting, backspace, and arrow keys move between cells. */
+const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+/** Base spin time plus a little per digit travelled, so 0→9 takes longer than 0→1. */
+const ROLL_BASE_MS = 520;
+const ROLL_PER_STEP_MS = 55;
+
+/**
+ * The visible face of a cell. A digit is a drum of 0–9 that spins from where it was (0 for a new
+ * digit) to the typed one and settles with a little overshoot; a letter drops in.
+ */
+function CodeFace({ character, delay }: { character: string; delay: number }) {
+  const digit = /^[0-9]$/.test(character) ? Number(character) : null;
+  const [position, setPosition] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const from = useRef(0);
+
+  useEffect(() => {
+    if (digit === null) return;
+    // Two frames: the drum paints at its start before the transition runs.
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => {
+        setDuration(ROLL_BASE_MS + Math.abs(digit - from.current) * ROLL_PER_STEP_MS);
+        setPosition(digit);
+        from.current = digit;
+      });
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [digit]);
+
+  if (!character) return null;
+
+  if (digit === null) {
+    return (
+      <span className="os-code-face" aria-hidden>
+        <span className="os-code-letter" style={{ animationDelay: `${delay}ms` }}>
+          {character}
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="os-code-face os-code-face-drum" aria-hidden>
+      <span
+        className="os-code-drum"
+        style={
+          {
+            "--os-code-roll": position,
+            transitionDuration: `${duration}ms`,
+            transitionDelay: `${delay}ms`,
+          } as CSSProperties
+        }
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="os-code-digit">
+            {d}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+/** One cell per character. Typing, pasting, backspace, and arrow keys move between cells. */
 export function CodeInput({
   value,
   onChange,
@@ -61,6 +130,14 @@ export function CodeInput({
   // Focus moves before React re-renders, so handlers read the newest value from here.
   const latest = useRef(value);
   latest.current = value;
+  // When several cells change at once (a paste, a reset), their drums start one after another.
+  const [seen, setSeen] = useState(value);
+  const [isBatch, setIsBatch] = useState(false);
+  if (seen !== value) {
+    const changed = Array.from({ length }, (_, i) => seen[i] !== value[i]).filter(Boolean).length;
+    setSeen(value);
+    setIsBatch(changed > 1);
+  }
 
   const focusCell = (index: number) => {
     const cell = cells.current[Math.max(0, Math.min(index, length - 1))];
@@ -146,6 +223,11 @@ export function CodeInput({
               data-filled={character ? "true" : "false"}
               style={{ "--os-code-index": index } as CSSProperties}
             >
+              <CodeFace
+                key={character ? "filled" : "empty"}
+                character={character}
+                delay={isBatch ? index * 70 : 0}
+              />
               <input
                 ref={(node) => {
                   cells.current[index] = node;

package/src/components/DonutChart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 
 import { arcPath, segmentShares } from "./chartMath";
 import { ChartTable, defaultFormat, toneAt, type ChartTone } from "./chartParts";
@@ -36,6 +36,7 @@ export function DonutChart({
   formatValue?: (value: number) => string;
 }) {
   const [active, setActive] = useState<number | null>(null);
+  const maskId = `os-donut-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const shares = segmentShares(data.map((slice) => slice.value));
   const total = data.reduce((sum, slice) => sum + Math.max(0, slice.value), 0);
   const outer = size / 2;
@@ -62,7 +63,20 @@ export function DonutChart({
   return (
     <div className="os-donut">
       <div className="os-donut-figure" style={{ width: size, height: size }}>
-        <svg width={size} height={size} aria-hidden>
+        <svg width={size} height={size} aria-hidden overflow="visible">
+          <defs>
+            <mask id={maskId}>
+              <circle
+                className="os-donut-sweep"
+                cx={outer}
+                cy={outer}
+                r={outer / 2 + inner / 2}
+                strokeWidth={outer - inner + 12}
+                pathLength={1}
+                transform={`rotate(-90 ${outer} ${outer})`}
+              />
+            </mask>
+          </defs>
           <circle
             className="os-donut-track"
             cx={outer}
@@ -70,19 +84,22 @@ export function DonutChart({
             r={(outer + inner) / 2}
             strokeWidth={outer - inner}
           />
-          {arcs.map(({ slice, index, d }) =>
-            d ? (
-              <path
-                key={slice.label}
-                d={d}
-                className="os-donut-slice"
-                data-tone={slice.tone}
-                data-dim={active !== null && active !== index ? true : undefined}
-                onPointerEnter={() => setActive(index)}
-                onPointerLeave={() => setActive(null)}
-              />
-            ) : null,
-          )}
+          <g mask={`url(#${maskId})`}>
+            {arcs.map(({ slice, index, d }) =>
+              d ? (
+                <path
+                  key={slice.label}
+                  d={d}
+                  className="os-donut-slice"
+                  data-tone={slice.tone}
+                  data-dim={active !== null && active !== index ? true : undefined}
+                  data-active={active === index || undefined}
+                  onPointerEnter={() => setActive(index)}
+                  onPointerLeave={() => setActive(null)}
+                />
+              ) : null,
+            )}
+          </g>
         </svg>
         <div className="os-donut-center" aria-live="polite">
           <strong>{formatValue(focus ? focus.value : total)}</strong>

package/src/components/Glyph.tsx

@@ -224,6 +224,16 @@ const MARKS = {
       d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
     },
   ],
+  alert: [
+    { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" },
+    { d: "M12 9v4" },
+    { d: "M12 17h.01" },
+  ],
+  alertCircle: [
+    { cx: "12", cy: "12", r: "10" },
+    { x1: "12", y1: "8", x2: "12", y2: "12" },
+    { x1: "12", y1: "16", x2: "12.01", y2: "16" },
+  ],
   info: [{ cx: "12", cy: "12", r: "10" }, { d: "M12 16v-4" }, { d: "M12 8h.01" }],
   panelRight: [{ x: "3", y: "3", width: "18", height: "18", rx: "2" }, { d: "M15 3v18" }],
   creditCard: [{ x: "2", y: "5", width: "20", height: "14", rx: "2" }, { d: "M2 10h20" }],