@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/slide-to-confirm/slide-to-confirm.tsx

@@ -0,0 +1,519 @@
+"use client";
+
+// Ported from bencho Slide to confirm (MIT, © 2026 Lorenzo Cabra) and SmoothUI Power Off Slide (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  MotionConfig,
+  animate,
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useTransform,
+  type AnimationPlaybackControls,
+} from "motion/react";
+import { Direction } from "radix-ui";
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+} from "react";
+
+import { focusRing, mirrorForDirection } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A track with a grip you slide to the end to confirm.
+ *
+ * `motion` is here for one reason (ADR 0014): a grip released before the end
+ * springs back carrying the velocity of the drag, which a CSS transition cannot
+ * know. Everything else is CSS driven by two custom properties written on the
+ * root as the grip moves — `--slide-x` (px travelled) and `--slide-p`
+ * (progress 0–1) — so the label, the arrow and the wash follow without a
+ * React render per frame.
+ *
+ * The drag is never the only way through. The grip is a real button: press and
+ * hold Enter or Space (or hold the pointer still on it) and it travels across
+ * over `holdDuration`, confirming when it arrives; letting go early sends it
+ * back. The result is announced through a polite live region.
+ */
+
+const PREFIX = "dowel-slide-to-confirm";
+
+/* Keyframes and [data-slot]/[data-state] selectors only (the sheet is unlayered). */
+const STYLES = `
+@keyframes ${PREFIX}-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
+@keyframes ${PREFIX}-press{0%,100%{scale:1}40%{scale:.98}}
+[data-slot=slide-to-confirm-shimmer]{background-image:linear-gradient(90deg,var(--color-muted-foreground) 0%,var(--color-muted-foreground) 38%,var(--color-foreground) 50%,var(--color-muted-foreground) 62%,var(--color-muted-foreground) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:${PREFIX}-shimmer calc(2000ms * var(--motion-scale)) linear infinite}
+[data-slot=slide-to-confirm][data-variant=confirm][data-state=confirmed]{animation:${PREFIX}-press calc(400ms * var(--motion-scale)) var(--ease-out-quint)}
+`;
+
+/** Released past this share of the travel, a drag confirms. */
+const CONFIRM_AT = 0.95;
+/** Pointer travel that turns a press into a drag. */
+const DRAG_SLOP = 4;
+/** A pointer held still this long starts the hold. */
+const POINTER_HOLD_DELAY = 180;
+/** Grip inset from the track edge, both sides (px). */
+const INSET = 8;
+
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+
+function subscribeToMotionPreference(onChange: () => void) {
+  const query = window.matchMedia(REDUCED_MOTION);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(
+    subscribeToMotionPreference,
+    () => window.matchMedia(REDUCED_MOTION).matches,
+    () => false,
+  );
+}
+
+/** Maps Speed (0–100) to a near-critically damped spring. */
+export function slideSpring(speed: number) {
+  const stiffness = 200 + Math.min(100, Math.max(0, speed)) * 8;
+  return { type: "spring" as const, stiffness, damping: 2 * Math.sqrt(stiffness) * 0.92 };
+}
+
+const slideToConfirmVariants = cva(
+  "relative isolate h-14 w-70 max-w-full touch-none text-foreground select-none",
+  {
+    variants: {
+      /** `confirm` is bencho's wash-and-morph; `power` is SmoothUI's power-off slide. */
+      variant: {
+        confirm: "bg-card",
+        power: "border border-border bg-secondary",
+      },
+      /** `dark` renders the block with the dark token set whatever the page theme. */
+      fill: {
+        light: "",
+        dark: "dark",
+      },
+      /** A 1px inset hairline on the track. */
+      stroke: {
+        true: "ring-1 ring-border ring-inset",
+        false: "",
+      },
+    },
+    defaultVariants: { variant: "confirm", fill: "light", stroke: false },
+  },
+);
+
+const DEFAULTS = {
+  confirm: { label: "Slide to confirm", confirmedLabel: "Confirmed", resetAfter: 1100 },
+  power: { label: "Slide to power off", confirmedLabel: "Shutting down…", resetAfter: 2000 },
+} as const;
+
+type Phase = "idle" | "dragging" | "holding" | "confirmed";
+
+export interface SlideToConfirmProps
+  extends
+    Omit<ComponentPropsWithRef<"div">, "children">,
+    VariantProps<typeof slideToConfirmVariants> {
+  /** Called once each time the slide completes. */
+  onConfirm?: () => void;
+  /** Names the grip and shows on the track. Defaults per variant. */
+  label?: string;
+  /** Shown and announced once confirmed ("Confirmed" / "Shutting down…"). */
+  confirmedLabel?: string;
+  /** Instructions linked to the grip with aria-describedby. */
+  hint?: string;
+  disabled?: boolean;
+  /** Milliseconds before it resets itself; `null` stays confirmed. 1100 (confirm) / 2000 (power). */
+  resetAfter?: number | null;
+  /** How long Enter, Space or a still pointer must be held to confirm (ms). Default 1000. */
+  holdDuration?: number;
+  /** Spring speed for the snap-back and morph, 0–100. Default 50. */
+  speed?: number;
+  /** Track radius in px, 0–28. The grip and wash use corner − 4. Default 28. */
+  corner?: number;
+}
+
+/** A slide-to-confirm track whose grip also confirms on a press-and-hold. */
+export function SlideToConfirm({
+  className,
+  style,
+  variant,
+  fill,
+  stroke,
+  onConfirm,
+  label,
+  confirmedLabel,
+  hint = "Drag to the end, or press and hold Enter or Space.",
+  disabled = false,
+  resetAfter,
+  holdDuration = 1000,
+  speed = 50,
+  corner = 28,
+  ...props
+}: SlideToConfirmProps) {
+  const kind = variant ?? "confirm";
+  const defaults = DEFAULTS[kind];
+  const name = label ?? defaults.label;
+  const done = confirmedLabel ?? defaults.confirmedLabel;
+  const reset = resetAfter === undefined ? defaults.resetAfter : resetAfter;
+
+  const [phase, setPhaseState] = useState<Phase>("idle");
+  const [announcement, setAnnouncement] = useState("");
+  const [domRtl, setDomRtl] = useState(false);
+  const rtl = Direction.useDirection() === "rtl" || domRtl;
+  const reduceMotion = usePrefersReducedMotion();
+  const hintId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+
+  const grip = useRef<HTMLButtonElement>(null);
+  const phaseRef = useRef<Phase>("idle");
+  const travel = useRef(0);
+  const animation = useRef<AnimationPlaybackControls | null>(null);
+  const timers = useRef<{ hold?: number; delay?: number; reset?: number }>({});
+  const pointer = useRef<{ id: number; x: number; from: number; moved: boolean } | null>(null);
+  const heldKey = useRef<string | null>(null);
+  // Handlers read the latest props without re-subscribing.
+  const latest = useRef({ onConfirm, reset, reduceMotion, speed, holdDuration, kind, done });
+  useLayoutEffect(() => {
+    latest.current = { onConfirm, reset, reduceMotion, speed, holdDuration, kind, done };
+  });
+
+  const offset = useMotionValue(0);
+  const mirrored = useTransform(offset, (value) => -value);
+
+  useMotionValueEvent(offset, "change", (value) => {
+    const root = grip.current?.parentElement;
+    if (!root) return;
+    const progress = travel.current > 0 ? Math.min(1, Math.max(0, value / travel.current)) : 0;
+    root.style.setProperty("--slide-x", `${String(value)}px`);
+    root.style.setProperty("--slide-p", String(progress));
+  });
+
+  useLayoutEffect(() => {
+    if (grip.current?.closest("[dir]")?.getAttribute("dir") === "rtl") setDomRtl(true);
+  }, []);
+
+  useEffect(() => {
+    const pending = timers.current;
+    return () => {
+      window.clearTimeout(pending.hold);
+      window.clearTimeout(pending.delay);
+      window.clearTimeout(pending.reset);
+      animation.current?.stop();
+    };
+  }, []);
+
+  function setPhase(next: Phase) {
+    phaseRef.current = next;
+    setPhaseState(next);
+  }
+
+  function measure() {
+    const element = grip.current;
+    const root = element?.parentElement;
+    if (!element || !root) return;
+    if (element.closest("[dir]")?.getAttribute("dir") === "rtl") setDomRtl(true);
+    const width = root.getBoundingClientRect().width - element.getBoundingClientRect().width;
+    travel.current = Math.max(0, width - INSET);
+  }
+
+  /** Springs (or, under reduced motion, jumps) the grip to `target`. */
+  function settle(target: number, velocity = 0) {
+    animation.current?.stop();
+    animation.current = null;
+    if (latest.current.reduceMotion) {
+      offset.set(target);
+      return;
+    }
+    animation.current = animate(offset, target, {
+      ...slideSpring(latest.current.speed),
+      velocity,
+    });
+  }
+
+  function confirm() {
+    window.clearTimeout(timers.current.hold);
+    window.clearTimeout(timers.current.delay);
+    const { kind: current, reset: after } = latest.current;
+    setPhase("confirmed");
+    setAnnouncement(latest.current.done);
+    latest.current.onConfirm?.();
+    // The confirm grip grows into a full pill from the start; the power knob parks at the end.
+    settle(current === "confirm" ? 0 : travel.current);
+    if (after !== null) {
+      timers.current.reset = window.setTimeout(() => {
+        setPhase("idle");
+        setAnnouncement("");
+        settle(0);
+      }, after);
+    }
+  }
+
+  function startHold() {
+    if (disabled || phaseRef.current !== "idle") return;
+    measure();
+    setPhase("holding");
+    const { holdDuration: total } = latest.current;
+    const progress = travel.current > 0 ? offset.get() / travel.current : 0;
+    const remaining = Math.max(0, total * (1 - progress));
+    animation.current?.stop();
+    // Linear and paced by the person holding, like a drag: feedback, not decoration.
+    animation.current = animate(offset, travel.current, {
+      duration: remaining / 1000,
+      ease: "linear",
+    });
+    timers.current.hold = window.setTimeout(confirm, remaining);
+  }
+
+  function release(velocity = 0) {
+    window.clearTimeout(timers.current.hold);
+    window.clearTimeout(timers.current.delay);
+    setPhase("idle");
+    settle(0, velocity);
+  }
+
+  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {
+    if (disabled || event.button !== 0 || phaseRef.current !== "idle") return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    measure();
+    pointer.current = {
+      id: event.pointerId,
+      x: event.clientX,
+      from: offset.get(),
+      moved: false,
+    };
+    timers.current.delay = window.setTimeout(startHold, POINTER_HOLD_DELAY);
+  }
+
+  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {
+    const press = pointer.current;
+    if (!press || press.id !== event.pointerId) return;
+    const dx = (event.clientX - press.x) * (rtl ? -1 : 1);
+    if (!press.moved) {
+      if (Math.abs(dx) < DRAG_SLOP) return;
+      // Movement turns the press into a drag, taking over from any hold.
+      window.clearTimeout(timers.current.delay);
+      window.clearTimeout(timers.current.hold);
+      animation.current?.stop();
+      press.moved = true;
+      press.from = offset.get();
+      press.x = event.clientX;
+      setPhase("dragging");
+      return;
+    }
+    offset.set(Math.min(travel.current, Math.max(0, press.from + dx)));
+  }
+
+  function handlePointerEnd(event: PointerEvent<HTMLButtonElement>) {
+    const press = pointer.current;
+    if (!press || press.id !== event.pointerId) return;
+    pointer.current = null;
+    window.clearTimeout(timers.current.delay);
+    const current = phaseRef.current;
+    if (current === "dragging") {
+      const reached = travel.current > 0 && offset.get() / travel.current >= CONFIRM_AT;
+      if (reached && event.type === "pointerup") confirm();
+      else release(offset.getVelocity());
+    } else if (current === "holding") {
+      release();
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    if (event.repeat || heldKey.current) return;
+    heldKey.current = event.key;
+    startHold();
+  }
+
+  function handleKeyUp(event: KeyboardEvent<HTMLButtonElement>) {
+    if (event.key !== heldKey.current) return;
+    event.preventDefault();
+    heldKey.current = null;
+    if (phaseRef.current === "holding") release();
+  }
+
+  function handleBlur() {
+    heldKey.current = null;
+    if (phaseRef.current === "holding") release();
+  }
+
+  const inner = Math.max(0, corner - 4);
+  const confirmed = phase === "confirmed";
+  const rootStyle: CSSProperties = { borderRadius: `${String(corner)}px`, ...style };
+
+  return (
+    <MotionConfig reducedMotion="user">
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <div
+        data-slot="slide-to-confirm"
+        data-variant={kind}
+        data-state={phase}
+        data-disabled={disabled || undefined}
+        className={cn(
+          slideToConfirmVariants({ variant: kind, fill, stroke }),
+          disabled && "opacity-55",
+          className,
+        )}
+        style={rootStyle}
+        {...props}
+      >
+        {kind === "confirm" ? (
+          <span
+            aria-hidden="true"
+            data-slot="slide-to-confirm-wash"
+            className="absolute inset-y-1 start-1 bg-foreground"
+            style={{
+              borderRadius: `${String(inner)}px`,
+              width: "calc(3rem + var(--slide-x, 0px))",
+            }}
+          />
+        ) : null}
+        <span
+          aria-hidden="true"
+          data-slot="slide-to-confirm-label"
+          className={cn(
+            "pointer-events-none absolute inset-y-0 flex items-center justify-center text-sm font-medium tracking-tight",
+            kind === "confirm" ? "inset-x-0 text-foreground/45" : "inset-x-0 ps-8",
+          )}
+          style={{
+            opacity:
+              kind === "power" && confirmed
+                ? 0
+                : "clamp(0, calc(1 - 2 * var(--slide-p, 0)), 1)",
+          }}
+        >
+          <span data-slot={kind === "power" ? "slide-to-confirm-shimmer" : undefined}>
+            {name}
+          </span>
+        </span>
+        {kind === "power" ? (
+          <span
+            aria-hidden="true"
+            data-slot="slide-to-confirm-status"
+            className={cn(
+              "pointer-events-none absolute inset-x-0 inset-y-0 flex items-center justify-center pe-14 text-sm font-medium",
+              "transition-opacity duration-[var(--duration-normal)]",
+              !confirmed && "opacity-0",
+            )}
+          >
+            {done}
+          </span>
+        ) : null}
+        <motion.button
+          ref={grip}
+          type="button"
+          aria-label={name}
+          aria-describedby={hintId}
+          disabled={disabled}
+          aria-disabled={confirmed || undefined}
+          data-slot="slide-to-confirm-grip"
+          data-state={phase}
+          className={cn(
+            "absolute start-1 top-1 z-10 flex h-12 w-12 items-center justify-center overflow-hidden",
+            "cursor-grab data-[state=confirmed]:cursor-default data-[state=dragging]:cursor-grabbing",
+            kind === "confirm"
+              ? cn(
+                  "bg-foreground text-card data-[state=confirmed]:w-[calc(100%-0.5rem)]",
+                  "transition-[width] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]",
+                )
+              : "bg-card text-destructive shadow-md",
+            focusRing,
+          )}
+          style={{ x: rtl ? mirrored : offset, borderRadius: `${String(inner)}px` }}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerEnd}
+          onPointerCancel={handlePointerEnd}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onBlur={handleBlur}
+        >
+          {kind === "confirm" ? (
+            <>
+              <span
+                aria-hidden="true"
+                data-slot="slide-to-confirm-arrow"
+                className={cn(
+                  "col-start-1 row-start-1 flex transition-opacity duration-[var(--duration-fast)]",
+                  confirmed && "opacity-0",
+                )}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                  className={cn("size-5", mirrorForDirection)}
+                  style={{ opacity: "clamp(0, calc((1 - var(--slide-p, 0)) / 0.4), 1)" }}
+                >
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
+              </span>
+              <span
+                aria-hidden="true"
+                data-slot="slide-to-confirm-done"
+                className={cn(
+                  "absolute inset-0 flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap",
+                  "transition-[opacity,scale] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
+                  confirmed
+                    ? "scale-100 opacity-100 delay-[calc(180ms*var(--motion-scale))]"
+                    : "scale-70 opacity-0",
+                )}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2.5}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                  className="size-4"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                {done}
+              </span>
+            </>
+          ) : (
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+              data-slot="slide-to-confirm-power"
+              className="size-7"
+            >
+              <path d="M12 2v10" />
+              <path d="M18.4 6.6a9 9 0 1 1-12.77.04" />
+            </svg>
+          )}
+        </motion.button>
+        <span id={hintId} className="sr-only">
+          {hint}
+        </span>
+        <span role="status" aria-live="polite" className="sr-only">
+          {announcement}
+        </span>
+      </div>
+    </MotionConfig>
+  );
+}
+
+export { slideToConfirmVariants };

package/src/components/slosh-slider/index.ts

@@ -0,0 +1,6 @@
+export {
+  SloshSlider,
+  sloshSliderVariants,
+  sloshSpring,
+  type SloshSliderProps,
+} from "./slosh-slider";

package/src/components/slosh-slider/meta.ts

@@ -0,0 +1,20 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "slosh-slider",
+  title: "Slosh Slider",
+  description:
+    "A slider whose fill behaves like liquid: the knob jumps to the value while the fill springs after it, leaning as it moves.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority", "motion", "radix-ui"],
+  registryDependencies: [],
+  files: ["slosh-slider.tsx"],
+  a11y:
+    'Built on the Radix slider: the knob is a focusable role="slider" with aria-valuenow, -valuemin and -valuemax, ' +
+    "pointer jump-to-value, arrow keys (mirrored in right-to-left layouts), Home/End, and Page Up/Down moving by " +
+    "largeStep. aria-label, aria-labelledby and aria-valuetext (or formatValue) are forwarded onto the thumb, and a " +
+    "development warning fires when it is unnamed — no default name is baked in. The focus ring is drawn around " +
+    "the whole bar. The liquid fill is aria-hidden decoration; under reduced motion it jumps with the knob and " +
+    "never leans.",
+});