@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/skeleton/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: [],
 	registryDependencies: [],
 	files: ["skeleton.tsx"],
-	a11y: "Hidden from assistive technology. Put aria-busy on the container that owns the loading data so the state is announced once instead of once per placeholder."
+	a11y: "Hidden from assistive technology. Put aria-busy on the container that owns the loading data so the state is announced once instead of once per placeholder. Pulse and shimmer are decoration and stop under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/skeleton/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/skeleton/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"skeleton\",\n  title: \"Skeleton\",\n  description: \"A shaped placeholder that holds layout while content loads.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"skeleton.tsx\"],\n  a11y:\n    \"Hidden from assistive technology. Put aria-busy on the container that owns the loading \" +\n    \"data so the state is announced once instead of once per placeholder.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAEJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/skeleton/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"skeleton\",\n  title: \"Skeleton\",\n  description: \"A shaped placeholder that holds layout while content loads.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"skeleton.tsx\"],\n  a11y:\n    \"Hidden from assistive technology. Put aria-busy on the container that owns the loading \" +\n    \"data so the state is announced once instead of once per placeholder. Pulse and shimmer \" +\n    \"are decoration and stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAGJ,CAAC"}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,5 +1,13 @@
 import { ComponentPropsWithRef } from "react";
 //#region src/components/skeleton/skeleton.d.ts
+declare const variants: {
+  readonly pulse: "animate-pulse-soft";
+  readonly shimmer: string;
+};
+interface SkeletonProps extends ComponentPropsWithRef<"span"> {
+  /** `pulse` fades in and out; `shimmer` sweeps a band of light across. */
+  variant?: keyof typeof variants;
+}
 /**
  * Placeholder shown while content loads.
  *
@@ -13,8 +21,12 @@ import { ComponentPropsWithRef } from "react";
  * invalid HTML that the parser corrects, which breaks hydration rather than
  * merely looking wrong. Phrasing content is valid in both places, and `block`
  * keeps the box behaviour identical.
+ *
+ * `variant="shimmer"` swaps the pulse for a band of light sweeping across. Both
+ * are decoration: under reduced motion they stop and the placeholder is a plain
+ * block.
  */
-declare function Skeleton({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+declare function Skeleton({ className, variant, ...props }: SkeletonProps): import("react").JSX.Element;
 //#endregion
-export { Skeleton };
+export { Skeleton, SkeletonProps };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,WAAW,cAAc,SAAS,gDAA6B,IAAA"}
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"mappings":";;cAiBM;WAAA;WAAA;;UAUW,sBAAsB;;EAErC,uBAAuB;;;;;;;;;;;;;;;;;;;;iBAqBT,WAAW,WAAW,YAAsB,SAAS,gCAAa,IAAA"}

package/dist/components/skeleton/skeleton.js

@@ -1,6 +1,15 @@
 import { cn } from "../../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
+const PREFIX = "dowel-skeleton";
+const STYLES = `
+@keyframes ${PREFIX}-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
+[data-slot=skeleton][data-variant=shimmer]:dir(rtl){animation-direction:reverse}
+`;
+const variants = {
+	pulse: "animate-pulse-soft",
+	shimmer: cn("bg-[linear-gradient(90deg,transparent_30%,color-mix(in_oklab,var(--color-background)_55%,transparent)_50%,transparent_70%)]", "bg-[length:200%_100%] bg-no-repeat", "animate-[dowel-skeleton-shimmer_calc(1.6s*var(--motion-scale))_linear_infinite]")
+};
 /**
 * Placeholder shown while content loads.
 *
@@ -14,14 +23,24 @@ import { jsx } from "react/jsx-runtime";
 * invalid HTML that the parser corrects, which breaks hydration rather than
 * merely looking wrong. Phrasing content is valid in both places, and `block`
 * keeps the box behaviour identical.
+*
+* `variant="shimmer"` swaps the pulse for a band of light sweeping across. Both
+* are decoration: under reduced motion they stop and the placeholder is a plain
+* block.
 */
-function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
+function Skeleton({ className, variant = "pulse", ...props }) {
+	const shimmer = variant === "shimmer";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [shimmer ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsx("span", {
 		"data-slot": "skeleton",
+		"data-variant": shimmer ? "shimmer" : void 0,
 		"aria-hidden": "true",
-		className: cn("block animate-pulse-soft rounded-md bg-muted", className),
+		className: cn("block rounded-md bg-muted", variants[variant], className),
 		...props
-	});
+	})] });
 }
 //#endregion
 export { Skeleton };

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Placeholder shown while content loads.\n *\n * Rendered aria-hidden: the shape is meaningless to a screen reader, and the\n * loading state belongs on the region that owns the data (via aria-busy) rather\n * than on each individual placeholder.\n *\n * A `span` set to `display: block`, not a `div`. A skeleton stands in for\n * whatever was going to be there, so it gets placed inside paragraphs, headings\n * and labels as often as inside layout containers — and a `div` inside a `p` is\n * invalid HTML that the parser corrects, which breaks hydration rather than\n * merely looking wrong. Phrasing content is valid in both places, and `block`\n * keeps the box behaviour identical.\n */\nexport function Skeleton({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"block animate-pulse-soft rounded-md bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAwC;CAC/E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["// Motion from SmoothUI SkeletonLoader (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst PREFIX = \"dowel-skeleton\";\n\n/* The highlight travels from the inline start to the inline end. The gradient\n * is twice the element's width, so moving its position from 150% to -50%\n * carries the bright band from just outside one edge to just outside the other. */\nconst STYLES = `\n@keyframes ${PREFIX}-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}\n[data-slot=skeleton][data-variant=shimmer]:dir(rtl){animation-direction:reverse}\n`;\n\n/* A plain map rather than cva: one axis of two values does not justify adding a\n * dependency to a component that had none. */\nconst variants = {\n  pulse: \"animate-pulse-soft\",\n  // Spelled out because Tailwind reads class names from the source.\n  shimmer: cn(\n    \"bg-[linear-gradient(90deg,transparent_30%,color-mix(in_oklab,var(--color-background)_55%,transparent)_50%,transparent_70%)]\",\n    \"bg-[length:200%_100%] bg-no-repeat\",\n    \"animate-[dowel-skeleton-shimmer_calc(1.6s*var(--motion-scale))_linear_infinite]\",\n  ),\n} as const;\n\nexport interface SkeletonProps extends ComponentPropsWithRef<\"span\"> {\n  /** `pulse` fades in and out; `shimmer` sweeps a band of light across. */\n  variant?: keyof typeof variants;\n}\n\n/**\n * Placeholder shown while content loads.\n *\n * Rendered aria-hidden: the shape is meaningless to a screen reader, and the\n * loading state belongs on the region that owns the data (via aria-busy) rather\n * than on each individual placeholder.\n *\n * A `span` set to `display: block`, not a `div`. A skeleton stands in for\n * whatever was going to be there, so it gets placed inside paragraphs, headings\n * and labels as often as inside layout containers — and a `div` inside a `p` is\n * invalid HTML that the parser corrects, which breaks hydration rather than\n * merely looking wrong. Phrasing content is valid in both places, and `block`\n * keeps the box behaviour identical.\n *\n * `variant=\"shimmer\"` swaps the pulse for a band of light sweeping across. Both\n * are decoration: under reduced motion they stop and the placeholder is a plain\n * block.\n */\nexport function Skeleton({ className, variant = \"pulse\", ...props }: SkeletonProps) {\n  const shimmer = variant === \"shimmer\";\n\n  return (\n    <>\n      {shimmer ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <span\n        data-slot=\"skeleton\"\n        data-variant={shimmer ? \"shimmer\" : undefined}\n        aria-hidden=\"true\"\n        className={cn(\"block rounded-md bg-muted\", variants[variant], className)}\n        {...props}\n      />\n    </>\n  );\n}\n"],"mappings":";;;AAKA,MAAM,SAAS;AAKf,MAAM,SAAS;aACF,OAAO;;;AAMpB,MAAM,WAAW;CACf,OAAO;CAEP,SAAS,GACP,+HACA,sCACA,iFACF;AACF;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,SAAS,EAAE,WAAW,UAAU,SAAS,GAAG,SAAwB;CAClF,MAAM,UAAU,YAAY;CAE5B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,UACC,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,IACL,MACJ,oBAAC,QAAD;EACE,aAAU;EACV,gBAAc,UAAU,YAAY,KAAA;EACpC,eAAY;EACZ,WAAW,GAAG,6BAA6B,SAAS,UAAU,SAAS;EACvE,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/slide-to-confirm/index.d.ts

@@ -0,0 +1,2 @@
+import { SlideToConfirm, SlideToConfirmProps, slideSpring, slideToConfirmVariants } from "./slide-to-confirm.js";
+export { SlideToConfirm, type SlideToConfirmProps, slideSpring, slideToConfirmVariants };

package/dist/components/slide-to-confirm/index.js

@@ -0,0 +1,2 @@
+import { SlideToConfirm, slideSpring, slideToConfirmVariants } from "./slide-to-confirm.js";
+export { SlideToConfirm, slideSpring, slideToConfirmVariants };

package/dist/components/slide-to-confirm/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/slide-to-confirm/meta.ts
+const meta = defineMeta({
+	name: "slide-to-confirm",
+	title: "Slide to Confirm",
+	description: "A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.",
+	category: "form",
+	status: "beta",
+	dependencies: [
+		"class-variance-authority",
+		"motion",
+		"radix-ui"
+	],
+	registryDependencies: [],
+	files: ["slide-to-confirm.tsx"],
+	a11y: "The grip is a real button named by the label and described by a hint. Pressing and holding Enter or Space (or holding the pointer still on it) carries the grip across over holdDuration and confirms; letting go early sends it back, so dragging is never the only way through. The result (\"Confirmed\" / \"Shutting down…\") is announced through a polite status region. The grip travels toward the inline end and its arrow mirrors in right-to-left layouts. Under reduced motion the springs are instant, the shimmer stops and the hold still works."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/slide-to-confirm/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/slide-to-confirm/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"slide-to-confirm\",\n  title: \"Slide to Confirm\",\n  description:\n    \"A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"slide-to-confirm.tsx\"],\n  a11y:\n    \"The grip is a real button named by the label and described by a hint. Pressing and holding Enter or \" +\n    \"Space (or holding the pointer still on it) carries the grip across over holdDuration and confirms; \" +\n    'letting go early sends it back, so dragging is never the only way through. The result (\"Confirmed\" / ' +\n    '\"Shutting down…\") is announced through a polite status region. The grip travels toward the inline end ' +\n    \"and its arrow mirrors in right-to-left layouts. Under reduced motion the springs are instant, the \" +\n    \"shimmer stops and the hold still works.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc;EAAC;EAA4B;EAAU;CAAU;CAC/D,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAMJ,CAAC"}

package/dist/components/slide-to-confirm/slide-to-confirm.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/slide-to-confirm/slide-to-confirm.d.ts
+/** Maps Speed (0–100) to a near-critically damped spring. */
+declare function slideSpring(speed: number): {
+  type: "spring";
+  stiffness: number;
+  damping: number;
+};
+declare const slideToConfirmVariants: (props?: ({
+  variant?: "confirm" | "power" | null | undefined;
+  fill?: "light" | "dark" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+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. */
+declare function SlideToConfirm({ className, style, variant, fill, stroke, onConfirm, label, confirmedLabel, hint, disabled, resetAfter, holdDuration, speed, corner, ...props }: SlideToConfirmProps): import("react").JSX.Element;
+//#endregion
+export { SlideToConfirm, SlideToConfirmProps, slideSpring, slideToConfirmVariants };
+//# sourceMappingURL=slide-to-confirm.d.ts.map

package/dist/components/slide-to-confirm/slide-to-confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-to-confirm.d.ts","names":[],"sources":["../../../src/components/slide-to-confirm/slide-to-confirm.tsx"],"mappings":";;;;iBAkFgB,YAAY;;;;;cAKtB,yBAAsB;;;;6CAsB3B;UASgB,4BAEb,KAAK,2CACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAIc,iBACd,WACA,OACA,SACA,MACA,QACA,WACA,OACA,gBACA,MACA,UACA,YACA,cACA,OACA,WACG,SACF,sCAAmB,IAAA"}

package/dist/components/slide-to-confirm/slide-to-confirm.js

@@ -0,0 +1,389 @@
+"use client";
+import { focusRing, mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { MotionConfig, animate, motion, useMotionValue, useMotionValueEvent, useTransform } from "motion/react";
+//#region src/components/slide-to-confirm/slide-to-confirm.tsx
+const PREFIX = "dowel-slide-to-confirm";
+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 = .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) {
+	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. */
+function slideSpring(speed) {
+	const stiffness = 200 + Math.min(100, Math.max(0, speed)) * 8;
+	return {
+		type: "spring",
+		stiffness,
+		damping: 2 * Math.sqrt(stiffness) * .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: 2e3
+	}
+};
+/** A slide-to-confirm track whose grip also confirms on a press-and-hold. */
+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 = 1e3, speed = 50, corner = 28, ...props }) {
+	const kind = variant ?? "confirm";
+	const defaults = DEFAULTS[kind];
+	const name = label ?? defaults.label;
+	const done = confirmedLabel ?? defaults.confirmedLabel;
+	const reset = resetAfter === void 0 ? defaults.resetAfter : resetAfter;
+	const [phase, setPhaseState] = useState("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(null);
+	const phaseRef = useRef("idle");
+	const travel = useRef(0);
+	const animation = useRef(null);
+	const timers = useRef({});
+	const pointer = useRef(null);
+	const heldKey = useRef(null);
+	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) {
+		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, 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?.();
+		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();
+		animation.current = animate(offset, travel.current, {
+			duration: remaining / 1e3,
+			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) {
+		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) {
+		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;
+			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) {
+		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") {
+			if (travel.current > 0 && offset.get() / travel.current >= CONFIRM_AT && event.type === "pointerup") confirm();
+			else release(offset.getVelocity());
+		} else if (current === "holding") release();
+	}
+	function handleKeyDown(event) {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		if (event.repeat || heldKey.current) return;
+		heldKey.current = event.key;
+		startHold();
+	}
+	function handleKeyUp(event) {
+		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 = {
+		borderRadius: `${String(corner)}px`,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(MotionConfig, {
+		reducedMotion: "user",
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "slide-to-confirm",
+			"data-variant": kind,
+			"data-state": phase,
+			"data-disabled": disabled || void 0,
+			className: cn(slideToConfirmVariants({
+				variant: kind,
+				fill,
+				stroke
+			}), disabled && "opacity-55", className),
+			style: rootStyle,
+			...props,
+			children: [
+				kind === "confirm" ? /* @__PURE__ */ jsx("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,
+				/* @__PURE__ */ jsx("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)" },
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": kind === "power" ? "slide-to-confirm-shimmer" : void 0,
+						children: name
+					})
+				}),
+				kind === "power" ? /* @__PURE__ */ jsx("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"),
+					children: done
+				}) : null,
+				/* @__PURE__ */ jsx(motion.button, {
+					ref: grip,
+					type: "button",
+					"aria-label": name,
+					"aria-describedby": hintId,
+					disabled,
+					"aria-disabled": confirmed || void 0,
+					"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,
+					children: kind === "confirm" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("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"),
+						children: /* @__PURE__ */ jsxs("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)" },
+							children: [/* @__PURE__ */ jsx("path", { d: "M5 12h14" }), /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })]
+						})
+					}), /* @__PURE__ */ jsxs("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"),
+						children: [/* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2.5,
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							className: "size-4",
+							children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+						}), done]
+					})] }) : /* @__PURE__ */ jsxs("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",
+						children: [/* @__PURE__ */ jsx("path", { d: "M12 2v10" }), /* @__PURE__ */ jsx("path", { d: "M18.4 6.6a9 9 0 1 1-12.77.04" })]
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: hintId,
+					className: "sr-only",
+					children: hint
+				}),
+				/* @__PURE__ */ jsx("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: "sr-only",
+					children: announcement
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { SlideToConfirm, slideSpring, slideToConfirmVariants };
+
+//# sourceMappingURL=slide-to-confirm.js.map

package/dist/components/slide-to-confirm/slide-to-confirm.js.map

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

package/dist/components/slosh-slider/index.d.ts

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