Hold to Confirm

// Hold to Confirm — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-21.tsx, export HoldToConfirm.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.
// 2 helpers the demo imports are inlined above it, verbatim.

import { useEffect, useId, useRef, useState } from "react";

export function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState<boolean>(() =>
    typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const on = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

const HOLD_MS = 900;

export function HoldToConfirm() {
  const reduced = useReducedMotion();
  const [state, setState] = useState<"idle" | "holding" | "done">("idle");
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const labelId = useId();

  const cancel = () => {
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = null;
    }
    // A cancelled hold returns to idle; a completed one stays done.
    setState((s) => (s === "holding" ? "idle" : s));
  };

  const begin = () => {
    if (state === "done" || timer.current) return;
    setState("holding");
    timer.current = setTimeout(() => {
      timer.current = null;
      setState("done");
    }, HOLD_MS);
  };

  // A hold that outlives its scene would fire into an unmounted component.
  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    []
  );

  const reset = () => setState("idle");
  const holding = state === "holding";
  const done = state === "done";

  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-[radial-gradient(70%_90%_at_50%_0%,rgba(244,63,94,0.10),transparent_62%),#0a0a0f] px-6">
      <div className="w-full max-w-xs">
        <p id={labelId} className="text-[10px] font-bold uppercase tracking-[0.24em] text-rose-300/70">
          Danger zone
        </p>
        <p className="mt-1 text-xs text-ink-faint">
          {done ? "Deletion confirmed. Nothing was actually deleted — this is a demo." : `Press and hold for ${HOLD_MS} ms to confirm.`}
        </p>

        <button
          type="button"
          onPointerDown={begin}
          onPointerUp={cancel}
          onPointerLeave={cancel}
          onKeyDown={(e) => {
            // Browsers repeat keydown while a key is held; only the first one arms.
            if ((e.key === "Enter" || e.key === " ") && !e.repeat) begin();
          }}
          onKeyUp={cancel}
          onBlur={cancel}
          aria-describedby={labelId}
          aria-live="polite"
          className={`relative mt-3 w-full overflow-hidden rounded-xl border px-4 py-3 text-sm font-semibold transition-colors ${
            done
              ? "border-emerald-400/40 bg-emerald-400/10 text-emerald-100"
              : "border-rose-400/30 bg-rose-500/10 text-rose-100 hover:border-rose-400/60"
          }`}
        >
          {/* The sweep is the only animated part. Under reduced motion the same
              information is carried by the button's own label, so nothing is
              lost when the bar stops moving. */}
          {!reduced && (
            <span
              aria-hidden
              className="absolute inset-y-0 left-0 bg-rose-400/20"
              style={{ width: holding ? "100%" : "0%", transition: holding ? `width ${HOLD_MS}ms linear` : "none" }}
            />
          )}
          <span className="relative">{done ? "Deleted" : holding ? (reduced ? "Holding…" : "Keep holding…") : "Delete project"}</span>
        </button>

        {done && (
          <button type="button" onClick={reset} className="mt-2 text-[10px] font-semibold text-ink-faint underline-offset-2 hover:underline">
            Undo
          </button>
        )}
      </div>
    </div>
  );
}