@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/confirm-morph/confirm-morph.js

@@ -0,0 +1,355 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "motion/react";
+import { CircleAlert, LoaderCircle } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./confirm-morph.module.css";
+/** A press this soon after the question appears is the tail of the press that opened it, not an answer. */
+const ARM_MS = 280;
+const { blur } = motionTokens;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+/** Duration springs restated as stiffness and damping, so a retarget mid-flight keeps the velocity it already has. */
+const physical = ({ visualDuration, bounce }) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+/** Growing follows new content with a little life; shrinking settles without overshoot. */
+const GROW = physical(motionTokens.spring.morph), SHRINK = physical(motionTokens.spring.smooth);
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+/*
+ * Faces never move and never scale: each one sits at its natural width, centred in the pill, so the baseline stays put and
+ * the pill's clip reveals it as the width springs. The old face fades out quickly; the new one's parts arrive in reading
+ * order, each clearing a small blur.
+ */
+const faceVariants = {
+    hidden: { opacity: 1 },
+    shown: { opacity: 1, transition: { staggerChildren: motionTokens.stagger.item, delayChildren: .05 } },
+    gone: { opacity: 0, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } },
+};
+const partVariants = {
+    hidden: { opacity: 0, filter: `blur(${blur.soft}px)` },
+    shown: { opacity: 1, filter: "blur(0px)", transition: { duration: .26, ease: enter } },
+};
+const reducedFace = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: .14 } }, gone: { opacity: 0, transition: { duration: .1 } } };
+const reducedPart = { hidden: { opacity: 1 }, shown: { opacity: 1 } };
+function Face({ id, reduced, onSize, children, labelledBy }) {
+    const ref = useRef(null);
+    const present = useIsPresent();
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !present)
+            return;
+        // Fractional widths, so the spring lands exactly where the pill's natural width is and the hand back to auto is seamless.
+        const report = () => onSize(id, node.getBoundingClientRect().width);
+        report();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(report);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [id, onSize, present]);
+    return _jsx(motion.div, { ref: ref, className: styles.face, "data-face": id, role: labelledBy ? "group" : undefined, "aria-labelledby": labelledBy, variants: reduced ? reducedFace : faceVariants, initial: "hidden", animate: "shown", exit: "gone", inert: !present || undefined, children: children });
+}
+function Part({ reduced, className, children }) {
+    return _jsx(motion.span, { className: [styles.part, className].filter(Boolean).join(" "), variants: reduced ? reducedPart : partVariants, children: children });
+}
+/** A success disc that pops in with a tick drawing across it, the moment the action lands. */
+function Check({ reduced }) {
+    return _jsxs("svg", { className: styles.check, viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [_jsx(motion.circle, { className: styles.checkDisc, cx: "9", cy: "9", r: "8", style: { transformOrigin: "9px 9px" }, initial: reduced ? false : { scale: .5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { scale: physical(motionTokens.spring.snappy), opacity: { duration: .12 } } }), _jsx(motion.path, { className: styles.checkTick, d: "M5.6 9.3 7.8 11.4 12.4 6.7", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: reduced ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: .3, ease: enter, delay: .14 } })] });
+}
+/** A ring that drains with the countdown. */
+function Ring({ progress }) {
+    return _jsxs("svg", { className: styles.ring, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: styles.ringTrack, cx: "8", cy: "8", r: "6.25", strokeWidth: "1.75" }), _jsx(motion.circle, { className: styles.ringFill, cx: "8", cy: "8", r: "6.25", strokeWidth: "1.75", strokeLinecap: "round", style: { pathLength: progress, rotate: -90, transformOrigin: "8px 8px" } })] });
+}
+/** Seconds that swap in place: the old digit fades up and out, the new one rises in, on tabular figures so the width holds. */
+function Seconds({ value, reduced }) {
+    return _jsx("span", { className: styles.seconds, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.digit, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: -6, filter: `blur(${blur.subtle}px)` }, transition: { duration: .22, ease: enter }, children: value }, value) }) });
+}
+export function ConfirmMorph({ label, icon, prompt, confirmLabel = "Delete", cancelLabel = "Cancel", pendingLabel = "Deleting", doneLabel = "Deleted", errorLabel = "Couldn’t finish", retryLabel = "Retry", undoLabel = "Undo", undoingLabel = "Restoring", tone = "danger", confirmMode = "press", holdDuration = 1000, countdown = 3, countdownLabel, onConfirm, onUndo, onCancel, state: stateProp, defaultState = "idle", onStateChange, confirmTimeout = 6000, resultTimeout = 5000, cancelOnOutsidePress = true, disabled = false, className, ref, }) {
+    const reduced = useReducedFlag();
+    const uid = useId();
+    const promptId = `${uid}-prompt`;
+    const holdHintId = `${uid}-hold`;
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const [inner, setInner] = useState(defaultState);
+    const state = stateProp ?? inner;
+    const [working, setWorking] = useState("confirm");
+    const [counting, setCounting] = useState(false);
+    const [announcement, setAnnouncement] = useState("");
+    const faceKey = state === "confirming" && counting ? "counting" : state;
+    const live = useRef({ state, onStateChange, controlled: stateProp !== undefined });
+    useLayoutEffect(() => { live.current = { state, onStateChange, controlled: stateProp !== undefined }; });
+    const pendingFocus = useRef(false);
+    const run = useRef(0);
+    const askedAt = useRef(0);
+    const keepFocus = useCallback(() => {
+        const root = rootRef.current;
+        // Focus follows the control between faces, but only when it was already inside; a timeout never steals focus from elsewhere.
+        pendingFocus.current = !!root && (root.contains(document.activeElement) || document.activeElement === document.body);
+    }, []);
+    const go = useCallback((next) => {
+        if (next !== "confirming")
+            setCounting(false);
+        if (next === live.current.state)
+            return;
+        keepFocus();
+        if (next === "confirming")
+            askedAt.current = performance.now();
+        if (!live.current.controlled)
+            setInner(next);
+        live.current.state = next;
+        live.current.onStateChange?.(next);
+    }, [keepFocus]);
+    // A controlled parent can move the state on its own; the countdown never survives that.
+    const [seenState, setSeenState] = useState(state);
+    if (seenState !== state) {
+        setSeenState(state);
+        if (state !== "confirming")
+            setCounting(false);
+    }
+    const toIdle = useCallback(() => { run.current++; go("idle"); }, [go]);
+    const perform = useCallback(async (kind) => {
+        const handler = kind === "confirm" ? onConfirm : onUndo;
+        const token = ++run.current;
+        setWorking(kind);
+        setCounting(false);
+        let result;
+        try {
+            result = handler?.();
+        }
+        catch {
+            go("error");
+            setAnnouncement(errorLabel);
+            return;
+        }
+        if (result && typeof result.then === "function") {
+            go("pending");
+            setAnnouncement(kind === "confirm" ? pendingLabel : undoingLabel);
+            try {
+                await result;
+            }
+            catch {
+                if (token !== run.current)
+                    return;
+                go("error");
+                setAnnouncement(errorLabel);
+                return;
+            }
+            if (token !== run.current)
+                return;
+        }
+        if (kind === "undo") {
+            go("idle");
+            setAnnouncement("Undone");
+            return;
+        }
+        go("done");
+        setAnnouncement(onUndo ? `${doneLabel}. ${undoLabel} is available.` : doneLabel);
+    }, [doneLabel, errorLabel, go, onConfirm, onUndo, pendingLabel, undoLabel, undoingLabel]);
+    const cancel = useCallback(() => { onCancel?.(); toIdle(); setAnnouncement("Cancelled"); }, [onCancel, toIdle]);
+    const expire = useRef(() => { });
+    useLayoutEffect(() => { expire.current = () => { if (live.current.state === "confirming")
+        cancel();
+    else
+        toIdle(); }; });
+    /* The shape: one pill whose width springs to whichever face is current. At rest it is auto, so it renders right before hydration. */
+    const width = useMotionValue("auto");
+    const target = useRef(0);
+    const flight = useRef(0);
+    // Only the present face reports (a leaving face stops observing), so every report is the current face's width.
+    const onFaceSize = useCallback((_id, w) => {
+        if (Math.abs(w - target.current) < .25)
+            return;
+        const from = target.current;
+        target.current = w;
+        if (!from || reduced) {
+            flight.current++;
+            width.jump("auto");
+            return;
+        }
+        const now = width.get();
+        if (now === "auto")
+            width.jump(from);
+        const token = ++flight.current;
+        animate(width, w, w > (typeof now === "number" ? now : from) ? GROW : SHRINK).then(() => { if (token === flight.current)
+            width.jump("auto"); });
+    }, [reduced, width]);
+    /* The timeout runs as an invisible clock. A pointer resting on the control holds it, and so does a hidden tab. */
+    const drain = useMotionValue(1);
+    const clock = useRef(null);
+    const holds = useRef({ hover: false, hidden: false });
+    const timeout = state === "confirming" && !counting ? confirmTimeout : state === "done" || state === "error" ? resultTimeout : 0;
+    const sync = useCallback(() => {
+        const control = clock.current;
+        if (!control)
+            return;
+        const held = holds.current.hover || holds.current.hidden;
+        if (held)
+            control.pause();
+        else
+            control.play();
+    }, []);
+    useEffect(() => {
+        if (!timeout)
+            return;
+        drain.jump(1);
+        const control = animate(drain, 0, { duration: timeout / 1000, ease: "linear" });
+        clock.current = control;
+        control.then(() => { if (clock.current === control) {
+            clock.current = null;
+            expire.current();
+        } });
+        sync();
+        return () => { if (clock.current === control)
+            clock.current = null; control.stop(); };
+    }, [drain, state, sync, timeout]);
+    useEffect(() => {
+        const onVisibility = () => { holds.current.hidden = document.hidden; sync(); };
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => document.removeEventListener("visibilitychange", onVisibility);
+    }, [sync]);
+    /* Countdown: a short grace period after the answer, drawn as a draining ring and ticking seconds. */
+    const remaining = useMotionValue(1);
+    const [seconds, setSeconds] = useState(countdown);
+    const performRef = useRef(perform);
+    useLayoutEffect(() => { performRef.current = perform; });
+    useMotionValueEvent(remaining, "change", value => setSeconds(Math.max(1, Math.ceil(value * countdown))));
+    useEffect(() => {
+        if (!counting)
+            return;
+        remaining.jump(1);
+        const control = animate(remaining, 0, { duration: countdown, ease: "linear" });
+        control.then(() => { void performRef.current("confirm"); });
+        return () => control.stop();
+    }, [counting, countdown, remaining]);
+    /* Hold: the confirm button fills with the danger colour from the left while pressed, and drains back if let go early. */
+    const hold = useMotionValue(0);
+    const holding = useRef(null);
+    const fillClip = useTransform(hold, value => `inset(0 ${(1 - value) * 100}% 0 0 round 999px)`);
+    const startHold = () => {
+        if (holding.current)
+            return;
+        const control = animate(hold, 1, { duration: holdDuration / 1000 * (1 - hold.get()), ease: "linear" });
+        holding.current = control;
+        control.then(() => {
+            if (holding.current !== control)
+                return;
+            holding.current = null;
+            void perform("confirm");
+        });
+    };
+    const releaseHold = () => {
+        const control = holding.current;
+        if (!control)
+            return;
+        holding.current = null;
+        control.stop();
+        if (hold.get() < 1) {
+            animate(hold, 0, reduced ? { duration: 0 } : { type: "spring", visualDuration: .3, bounce: 0 });
+            setAnnouncement(`Keep holding to ${confirmLabel.toLowerCase()}`);
+        }
+    };
+    useEffect(() => { if (state !== "confirming") {
+        holding.current?.stop();
+        holding.current = null;
+        hold.jump(0);
+    } }, [hold, state]);
+    // A distinct keyboard activation is deliberate; only suppress the opening pointer press tail.
+    const answer = (keyboard = false) => {
+        if (!keyboard && performance.now() - askedAt.current < ARM_MS)
+            return;
+        if (confirmMode === "countdown") {
+            keepFocus();
+            setCounting(true);
+            setAnnouncement(`${countdownLabel ?? `${pendingLabel} in`} ${countdown} seconds`);
+            return;
+        }
+        void perform("confirm");
+    };
+    // An outside press answers the question with no.
+    useEffect(() => {
+        if (state !== "confirming" || !cancelOnOutsidePress)
+            return;
+        const down = (event) => { if (!rootRef.current?.contains(event.target))
+            cancel(); };
+        document.addEventListener("pointerdown", down);
+        return () => document.removeEventListener("pointerdown", down);
+    }, [cancel, cancelOnOutsidePress, state]);
+    // Focus moves with the morph: Confirm while asking, the root while counting or working, Undo or Retry on a result, the trigger at rest.
+    useLayoutEffect(() => {
+        if (!pendingFocus.current)
+            return;
+        pendingFocus.current = false;
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const face = root.querySelector(`[data-face="${faceKey}"]`);
+        const autofocus = face?.querySelector("[data-autofocus]:not(:disabled)");
+        (autofocus ?? root).focus({ preventScroll: true });
+    }, [faceKey]);
+    const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+            if (state === "confirming") {
+                event.preventDefault();
+                event.stopPropagation();
+                cancel();
+            }
+            else if (state === "done" || state === "error") {
+                event.preventDefault();
+                event.stopPropagation();
+                toIdle();
+            }
+            return;
+        }
+        // Enter answers yes from anywhere in the question except a button of its own (Cancel keeps meaning Cancel).
+        if (event.key === "Enter" && state === "confirming" && !event.repeat && !(event.target instanceof HTMLButtonElement)) {
+            event.preventDefault();
+            if (counting)
+                void perform("confirm");
+            else if (confirmMode !== "hold")
+                answer(true);
+        }
+    };
+    const holdKeys = (event, down) => {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        if (down) {
+            if (!event.repeat)
+                startHold();
+        }
+        else
+            releaseHold();
+    };
+    const holdPointer = (event) => {
+        if (event.button !== 0)
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        startHold();
+    };
+    const shownPrompt = prompt ?? _jsxs(_Fragment, { children: [label, "?"] });
+    const shownCountdown = countdownLabel ?? `${pendingLabel} in`;
+    const confirmButton = confirmMode === "hold"
+        ? _jsxs("button", { type: "button", className: styles.confirm, "data-autofocus": true, "aria-describedby": holdHintId, onPointerDown: holdPointer, onPointerUp: releaseHold, onPointerCancel: releaseHold, onLostPointerCapture: releaseHold, onKeyDown: event => holdKeys(event, true), onKeyUp: event => holdKeys(event, false), onBlur: releaseHold, onContextMenu: event => event.preventDefault(), children: [_jsx("span", { children: confirmLabel }), _jsx(motion.span, { className: styles.fill, style: { clipPath: fillClip }, "aria-hidden": "true", children: _jsx("span", { children: confirmLabel }) })] })
+        : _jsx("button", { type: "button", className: styles.confirm, "data-autofocus": true, onClick: event => answer(event.detail === 0), onKeyDown: event => { if (event.repeat)
+                event.preventDefault(); }, children: confirmLabel });
+    const face = (() => {
+        switch (faceKey) {
+            case "confirming": return _jsxs(_Fragment, { children: [_jsx(Part, { reduced: reduced, className: styles.prompt, children: _jsx("span", { id: promptId, children: shownPrompt }) }), _jsx(Part, { reduced: reduced, children: _jsx("button", { type: "button", className: styles.secondary, onClick: cancel, children: cancelLabel }) }), _jsx(Part, { reduced: reduced, children: confirmButton }), confirmMode === "hold" && _jsx("span", { id: holdHintId, className: styles.srOnly, children: "Press and hold" })] });
+            case "counting": return _jsxs(_Fragment, { children: [_jsxs(Part, { reduced: reduced, className: styles.status, children: [_jsx(Ring, { progress: remaining }), _jsxs("span", { className: styles.statusText, children: [shownCountdown, " ", _jsx(Seconds, { value: seconds, reduced: reduced })] })] }), _jsx(Part, { reduced: reduced, children: _jsx("button", { type: "button", className: styles.secondary, onClick: cancel, children: cancelLabel }) })] });
+            case "pending": return _jsxs(Part, { reduced: reduced, className: styles.status, children: [_jsx(LoaderCircle, { className: styles.spinner, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { className: styles.statusText, children: working === "undo" ? undoingLabel : pendingLabel })] });
+            case "done": return _jsxs(_Fragment, { children: [_jsxs(Part, { reduced: reduced, className: styles.status, children: [_jsx(Check, { reduced: reduced }), _jsx("span", { className: styles.statusText, children: doneLabel })] }), onUndo && _jsx(Part, { reduced: reduced, children: _jsx("button", { type: "button", className: styles.secondary, "data-autofocus": true, onClick: () => void perform("undo"), children: undoLabel }) })] });
+            case "error": return _jsxs(_Fragment, { children: [_jsxs(Part, { reduced: reduced, className: styles.status, children: [_jsx(CircleAlert, { className: styles.alert, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { className: styles.statusText, children: errorLabel })] }), _jsx(Part, { reduced: reduced, children: _jsx("button", { type: "button", className: styles.secondary, "data-autofocus": true, onClick: () => void perform(working), children: retryLabel }) })] });
+            default: return _jsx(Part, { reduced: reduced, children: _jsxs("button", { type: "button", className: styles.trigger, "data-autofocus": true, disabled: disabled, onClick: () => { setAnnouncement(typeof shownPrompt === "string" ? shownPrompt : ""); go("confirming"); }, children: [icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }), _jsx("span", { children: label })] }) });
+        }
+    })();
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-state": state, "data-face": faceKey, "data-tone": tone, "data-mode": confirmMode, "data-disabled": disabled || undefined, tabIndex: -1, onKeyDown: onKeyDown, "aria-busy": state === "pending" || undefined, onPointerEnter: () => { holds.current.hover = true; sync(); }, onPointerLeave: () => { holds.current.hover = false; sync(); }, onPointerCancel: () => { holds.current.hover = false; sync(); }, children: [_jsx(motion.div, { className: styles.surface, style: { width }, children: _jsx(AnimatePresence, { initial: false, children: _jsx(Face, { id: faceKey, reduced: reduced, onSize: onFaceSize, labelledBy: faceKey === "confirming" ? promptId : undefined, children: face }, faceKey) }) }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
+}
+export default ConfirmMorph;

package/components/confirm-morph/confirm-morph.module.css

@@ -0,0 +1,146 @@
+/* The root holds the control in the flow of the page; the pill inside it springs between faces. */
+.root {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-body);
+  line-height: 20px;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * One neutral pill for every state. Only its width moves; corners, text and border never scale, so nothing distorts.
+ * Every face sits at its natural width against the pill's leading edge, so text never slides or squeezes: the question
+ * starts where the label was, and the springing edge reveals the rest. The border is an overlay so it never changes a measurement.
+ */
+.surface {
+  position: relative;
+  display: flex;
+  height: var(--control-height-sm);
+  max-width: 100%;
+  justify-content: flex-start;
+  overflow: clip;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-resting);
+  transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);
+}
+.surface::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; pointer-events: none; transition: border-color var(--duration-standard) var(--ease-standard); }
+.root[data-disabled][data-state="idle"] .surface { box-shadow: none; }
+.root[data-disabled][data-state="idle"] .surface::after { border-color: var(--border-subtle); }
+
+.face { display: flex; flex: none; height: 100%; align-items: center; gap: 2px; padding: 0 4px; white-space: nowrap; }
+.face[data-face="idle"] { padding: 0; }
+/* A leaving face steps out of the flow, exactly where it was, and fades while the pill springs to the next one. */
+.face[inert] { position: absolute; top: 0; inset-inline-start: 0; pointer-events: none; }
+.part { display: inline-flex; height: 100%; align-items: center; }
+
+.trigger {
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px 0 14px;
+  border: 0;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+}
+.trigger:active:not(:disabled) { background: color-mix(in oklab, var(--foreground) 9%, transparent); transition-duration: 0ms; }
+.trigger:disabled { color: var(--text-muted); cursor: not-allowed; }
+.trigger:disabled .icon { opacity: .7; }
+.icon { display: grid; width: 16px; height: 16px; place-items: center; color: var(--text-secondary); }
+.trigger:disabled .icon { color: inherit; }
+.icon > svg { width: 16px; height: 16px; }
+
+.prompt { max-width: 16rem; overflow: hidden; padding: 0 8px 0 12px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
+.prompt > span { overflow: hidden; text-overflow: ellipsis; }
+
+.secondary,
+.confirm {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  height: calc(var(--control-height-sm) - 8px);
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--radius-full); corner-shape: round;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+  touch-action: manipulation;
+}
+.secondary { background: transparent; color: var(--text-secondary); }
+.face:is([data-face="done"], [data-face="error"]) .secondary { color: var(--foreground); }
+.secondary:active { background: color-mix(in oklab, var(--foreground) 11%, transparent); color: var(--foreground); transition-duration: 0ms; }
+
+/* The only coloured thing in the control: danger for a destructive answer, the accent for a reversible one. */
+.confirm { overflow: clip; background: color-mix(in oklab, var(--danger) 13%, transparent); color: var(--danger); }
+.confirm:active { background: color-mix(in oklab, var(--danger) 22%, transparent); transition-duration: 0ms; }
+.root[data-tone="neutral"] .confirm { background: var(--accent); color: var(--accent-foreground); }
+.root[data-tone="neutral"] .confirm:active { background: var(--accent-strong); }
+
+/* Hold: a solid copy of the button, label and all, revealed from the left as the hold fills; the label inverts as the edge passes. */
+.root[data-mode="hold"] .confirm { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+.fill { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: var(--background); pointer-events: none; }
+.root[data-tone="neutral"] .fill { background: var(--accent-strong); color: var(--accent-foreground); }
+
+.status { gap: 8px; padding: 0 10px 0 12px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
+.status > svg { flex: none; }
+.statusText { display: inline-flex; align-items: baseline; gap: .25em; }
+.face[data-face="pending"] .status { padding-inline: 12px 16px; color: var(--text-secondary); }
+.face[data-face="done"]:not(:has(.secondary)) .status { padding-right: 14px; }
+.face[data-face="counting"] .status { padding-right: 6px; color: var(--text-secondary); }
+.alert { color: var(--danger); }
+.check { width: 18px; height: 18px; }
+.checkDisc { fill: var(--success); }
+.checkTick { stroke: var(--background); }
+.spinner { animation: spin .7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.ring { width: 16px; height: 16px; }
+.ringTrack { stroke: var(--border); }
+.ringFill { stroke: var(--danger); }
+.root[data-tone="neutral"] .ringFill { stroke: var(--accent); }
+/* Seconds keep one tabular width while the digits swap. */
+.seconds { display: inline-grid; min-width: 1ch; color: var(--foreground); font-variant-numeric: tabular-nums; }
+.digit { grid-area: 1 / 1; }
+
+/* No focus rings anywhere in the control; keyboard focus reads through fill (below). */
+.root, .root :focus { outline: none; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+
+@media (hover: hover) and (pointer: fine) {
+  .trigger:hover:not(:disabled):not(:active) { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
+  .secondary:hover:not(:active) { background: color-mix(in oklab, var(--foreground) 7%, transparent); color: var(--foreground); }
+  .confirm:hover:not(:active) { background: color-mix(in oklab, var(--danger) 18%, transparent); }
+  .root[data-tone="neutral"] .confirm:hover:not(:active) { background: var(--accent-strong); }
+}
+/* Keyboard focus reads through fill, never a ring. */
+.trigger:focus-visible { background: color-mix(in oklab, var(--foreground) 6%, transparent); }
+.secondary:focus-visible { background: color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--foreground); }
+.confirm:focus-visible { background: color-mix(in oklab, var(--danger) 20%, transparent); }
+.root[data-tone="neutral"] .confirm:focus-visible { background: var(--accent-strong); }
+
+@media (prefers-reduced-motion: reduce) {
+  .surface, .surface::after, .trigger, .secondary, .confirm { transition-duration: 0ms; }
+  .spinner { animation-duration: 1.6s; }
+}
+
+@media (prefers-contrast: more) {
+  .surface::after { border-color: var(--border-strong); }
+  .confirm { background: color-mix(in oklab, var(--danger) 22%, transparent); }
+}

package/components/context-menu/context-menu.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+    checked?: boolean;
+}
+export interface ContextMenuProps {
+    children: ReactNode;
+    items: ContextMenuItem[];
+    label?: string;
+}
+export declare function ContextMenu({ children, items, label }: ContextMenuProps): import("react").JSX.Element;
+export declare const contextMenuExampleItems: ContextMenuItem[];
+export default ContextMenu;