@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/confirm-morph/confirm-morph.js

@@ -0,0 +1,652 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
+import { usePausableTimeout } from "../lib/pausable-timeout.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/confirm-morph/confirm-morph.tsx
+/** A press this soon after the question appears is the tail of the press that opened it, not an answer. */
+const ARM_MS = 280;
+/** Whether the parts of the current face arrive with motion: not on first render, only on a change of face. */
+const PartsAnimate = createContext(false);
+/**
+* One piece of a face. The parts of a new face arrive in reading order, 35ms
+* apart after a 50ms beat, each clearing a small blur (--part-delay).
+*/
+function Part({ index, className, children }) {
+	const animate = useContext(PartsAnimate);
+	return /* @__PURE__ */ jsx("span", {
+		style: { "--part-delay": 50 + index * 35 + "ms" },
+		className: cn("inline-flex h-full items-center " + (animate ? "motion-safe:animate-part-in motion-safe:[animation-delay:var(--part-delay)] " : "") + (className ?? "")),
+		children
+	});
+}
+/**
+* Faces never move and never scale: each one sits at its natural width,
+* against the pill's leading edge, so the baseline stays put and the pill's clip
+* reveals it as the width springs. The present face reports its width so the
+* pill can spring to it.
+*/
+function Face({ id, onSize, labelledBy, animated, children }) {
+	const ref = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const report = () => onSize(node.getBoundingClientRect().width);
+		report();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(report);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [id, onSize]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-face": id,
+		role: labelledBy ? "group" : void 0,
+		"aria-labelledby": labelledBy,
+		className: cn("flex h-full flex-none items-center gap-0.5 px-1 whitespace-nowrap data-[face=idle]:px-0" + (animated ? " motion-reduce:animate-face-in-soft" : "")),
+		children: /* @__PURE__ */ jsx(PartsAnimate.Provider, {
+			value: animated,
+			children
+		})
+	});
+}
+/** A leaving face steps out of the flow, exactly where it was, and fades while the pill springs to the next one. */
+function LeavingFace({ id, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		ref: (node) => node?.setAttribute("inert", ""),
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		className: "pointer-events-none absolute start-0 top-0 flex h-full flex-none items-center gap-0.5 px-1 whitespace-nowrap motion-safe:animate-face-out motion-reduce:animate-fade-out",
+		children: /* @__PURE__ */ jsx(PartsAnimate.Provider, {
+			value: false,
+			children
+		})
+	});
+}
+/** A success disc that pops in with a tick drawing across it, the moment the action lands. */
+function Check() {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "size-4.5 flex-none",
+		viewBox: "0 0 18 18",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "9",
+			cy: "9",
+			r: "8",
+			className: "fill-success-strong [transform-box:fill-box] [transform-origin:center] motion-safe:animate-disc-in"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M5.6 9.3 7.8 11.4 12.4 6.7",
+			pathLength: 1,
+			strokeWidth: "1.9",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "stroke-background [stroke-dasharray:1] motion-safe:animate-tick-draw"
+		})]
+	});
+}
+/** A ring that drains with the countdown. */
+function Ring({ seconds, tone }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "size-4 flex-none",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25",
+			strokeWidth: "1.75",
+			className: "stroke-border"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			pathLength: 1,
+			style: { animationDuration: seconds + "s" },
+			className: cn("[stroke-dasharray:1] [transform-box:fill-box] [transform-origin:center] -rotate-90 motion-safe:animate-ring-drain " + (tone === "neutral" ? "stroke-primary" : "stroke-destructive"))
+		})]
+	});
+}
+/** 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 }) {
+	const ref = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(String(value), value, () => ref.current);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-grid min-w-2 text-foreground tabular-nums",
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingDigit, {
+			id: item.id,
+			onDone: remove,
+			children: item.value
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			ref,
+			className: cn("col-start-1 row-start-1" + (changed ? " motion-safe:animate-digit-in motion-reduce:animate-fade-in" : "")),
+			children: value
+		}, value)]
+	});
+}
+function LeavingDigit({ id, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		className: "col-start-1 row-start-1 motion-safe:animate-digit-out motion-reduce:animate-fade-out",
+		children
+	});
+}
+function Spinner() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "size-4 flex-none motion-safe:animate-spin-fast motion-reduce:[animation:spin_1.6s_linear_infinite]",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+function AlertIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "size-4 flex-none text-destructive-strong",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
+	});
+}
+const focusRing = "outline-none focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)";
+const trigger = cn("inline-flex h-full cursor-pointer items-center gap-2 rounded-pill border-0 bg-transparent py-0 ps-3.5 pe-4 font-sans font-medium text-foreground motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle hover:not-active:not-disabled:bg-foreground/5 active:not-disabled:bg-foreground/10 active:not-disabled:duration-0 focus-visible:bg-foreground/6 disabled:cursor-not-allowed disabled:text-muted-foreground " + focusRing);
+const secondary = "relative inline-flex confirm-button-h flex-none cursor-pointer touch-manipulation items-center justify-center rounded-pill border-0 bg-transparent px-3 font-sans font-medium text-muted-foreground motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle hover:not-active:bg-foreground/7 hover:not-active:text-foreground active:bg-foreground/10 active:text-foreground active:duration-0 focus-visible:bg-foreground/8 focus-visible:text-foreground " + focusRing;
+const confirmDanger = "bg-destructive-subtle text-destructive-subtle-foreground hover:not-active:bg-[color-mix(in_oklab,var(--color-destructive)_18%,transparent)] active:bg-[color-mix(in_oklab,var(--color-destructive)_22%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-destructive)_20%,transparent)]";
+const confirmNeutral = "bg-primary text-primary-foreground hover:not-active:bg-primary-hover active:bg-primary-pressed focus-visible:bg-primary-hover";
+/**
+* A button for an action that deserves a second thought, without a dialog. It
+* asks in place: the pill morphs into a question with Cancel and Confirm, then
+* a spinner, then a result with Undo, its width springing to each face while the
+* faces crossfade at their natural width.
+*
+* Escape, a press outside, or the timeout answer the question with no. Focus
+* follows the control between faces, but only when it was already inside, so a
+* timeout never steals it. A live region announces each step.
+*
+* @example
+* <ConfirmMorph label="Delete project" onConfirm={() => deleteProject()} onUndo={() => restore()} />
+* <ConfirmMorph label="Delete project" confirmMode="hold" onConfirm={deleteProject} />
+*/
+const ConfirmMorph = forwardRef(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 = 1e3, countdown = 3, countdownLabel, onConfirm, onUndo, onCancel, state: stateProp, defaultState = "idle", onStateChange, confirmTimeout = 6e3, resultTimeout = 5e3, cancelOnOutsidePress = true, isDisabled = false, className }, ref) {
+	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 !== void 0
+	});
+	useIsomorphicLayoutEffect(() => {
+		live.current = {
+			state,
+			onStateChange,
+			controlled: stateProp !== void 0
+		};
+	});
+	const pendingFocus = useRef(false);
+	const run = useRef(0);
+	const askedAt = useRef(0);
+	const keepFocus = useCallback(() => {
+		const root = rootRef.current;
+		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]);
+	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(() => {});
+	useIsomorphicLayoutEffect(() => {
+		expire.current = () => {
+			if (live.current.state === "confirming") cancel();
+			else toIdle();
+		};
+	});
+	const surfaceRef = useRef(null);
+	const target = useRef(0);
+	const flight = useRef(0);
+	const onFaceSize = useCallback((width) => {
+		if (Math.abs(width - target.current) < .25) return;
+		const from = target.current;
+		target.current = width;
+		const el = surfaceRef.current;
+		if (!el) return;
+		if (!from || prefersReducedMotion()) {
+			flight.current++;
+			el.style.width = "";
+			el.style.transition = "";
+			return;
+		}
+		const start = el.style.width ? el.getBoundingClientRect().width : from;
+		const token = ++flight.current;
+		const curve = width > start ? "morph" : "smooth";
+		el.style.transition = "none";
+		el.style.width = start + "px";
+		el.offsetWidth;
+		el.style.transition = "width var(--duration-" + curve + ") var(--ease-" + curve + "), background-color var(--duration-standard) var(--ease-settle), box-shadow var(--duration-standard) var(--ease-settle)";
+		el.style.width = width + "px";
+		const done = (event) => {
+			if (event.target !== el || event.propertyName !== "width") return;
+			el.removeEventListener("transitionend", done);
+			if (token !== flight.current) return;
+			el.style.width = "";
+			el.style.transition = "";
+		};
+		el.addEventListener("transitionend", done);
+	}, []);
+	const setHover = usePausableTimeout(state === "confirming" && !counting ? confirmTimeout : state === "done" || state === "error" ? resultTimeout : 0, state, () => expire.current());
+	const [seconds, setSeconds] = useState(countdown);
+	const performRef = useRef(perform);
+	useIsomorphicLayoutEffect(() => {
+		performRef.current = perform;
+	});
+	useEffect(() => {
+		if (!counting) return;
+		const startedAt = performance.now();
+		const timer = setInterval(() => {
+			const elapsed = (performance.now() - startedAt) / 1e3;
+			if (elapsed >= countdown) {
+				clearInterval(timer);
+				performRef.current("confirm");
+			} else setSeconds(Math.max(1, Math.ceil(countdown - elapsed)));
+		}, 100);
+		return () => {
+			clearInterval(timer);
+			setSeconds(countdown);
+		};
+	}, [counting, countdown]);
+	const fillRef = useRef(null);
+	const holdRef = useRef(null);
+	const progress = useRef(0);
+	const setFill = (value, transition) => {
+		const el = fillRef.current;
+		if (!el) return;
+		el.style.transition = transition;
+		el.style.clipPath = "inset(0 " + (1 - value) * 100 + "% 0 0 round 999px)";
+	};
+	const startHold = () => {
+		if (holdRef.current) return;
+		const from = progress.current;
+		const remaining = holdDuration * (1 - from);
+		setFill(from, "none");
+		fillRef.current?.offsetWidth;
+		setFill(1, "clip-path " + remaining + "ms linear");
+		const timer = setTimeout(() => {
+			holdRef.current = null;
+			progress.current = 1;
+			perform("confirm");
+		}, remaining);
+		holdRef.current = {
+			from,
+			at: performance.now(),
+			timer
+		};
+	};
+	const releaseHold = () => {
+		const held = holdRef.current;
+		if (!held) return;
+		holdRef.current = null;
+		clearTimeout(held.timer);
+		const value = Math.min(1, held.from + (performance.now() - held.at) / holdDuration);
+		setFill(value, "none");
+		fillRef.current?.offsetWidth;
+		progress.current = 0;
+		setFill(0, prefersReducedMotion() ? "none" : "clip-path 540ms var(--ease-smooth)");
+		setAnnouncement("Keep holding to " + confirmLabel.toLowerCase());
+	};
+	useEffect(() => () => {
+		if (holdRef.current) clearTimeout(holdRef.current.timer);
+	}, []);
+	useEffect(() => {
+		if (state !== "confirming") {
+			if (holdRef.current) clearTimeout(holdRef.current.timer);
+			holdRef.current = null;
+			progress.current = 0;
+			setFill(0, "none");
+		}
+	}, [state]);
+	const answer = () => {
+		if (performance.now() - askedAt.current < ARM_MS) return;
+		if (confirmMode === "countdown") {
+			keepFocus();
+			setCounting(true);
+			setAnnouncement((countdownLabel ?? pendingLabel + " in") + " " + countdown + " seconds");
+			return;
+		}
+		perform("confirm");
+	};
+	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
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (!pendingFocus.current) return;
+		pendingFocus.current = false;
+		const root = rootRef.current;
+		if (!root) return;
+		(root.querySelector("[data-face=\"" + faceKey + "\"]")?.querySelector("[data-autofocus]:not(:disabled)") ?? 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;
+		}
+		if (event.key === "Enter" && state === "confirming" && !event.repeat && !(event.target instanceof HTMLButtonElement)) {
+			event.preventDefault();
+			if (counting) perform("confirm");
+			else if (confirmMode !== "hold") answer();
+		}
+	};
+	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 ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, "?"] });
+	const shownCountdown = countdownLabel ?? pendingLabel + " in";
+	const confirmClasses = cn("relative inline-flex confirm-button-h flex-none cursor-pointer touch-manipulation items-center justify-center overflow-clip rounded-pill border-0 px-3 font-sans font-medium motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle active:duration-0 outline-none focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring) " + (tone === "neutral" ? confirmNeutral : confirmDanger));
+	const confirmButton = confirmMode === "hold" ? /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cn(confirmClasses + " select-none [-webkit-touch-callout:none]"),
+		"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: [/* @__PURE__ */ jsx("span", { children: confirmLabel }), /* @__PURE__ */ jsx("span", {
+			ref: fillRef,
+			"aria-hidden": "true",
+			style: { clipPath: "inset(0 100% 0 0 round 999px)" },
+			className: cn("pointer-events-none absolute inset-0 inline-flex items-center justify-center " + (tone === "neutral" ? "bg-primary-strong text-primary-foreground" : "bg-destructive text-destructive-foreground")),
+			children: /* @__PURE__ */ jsx("span", { children: confirmLabel })
+		})]
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: confirmClasses,
+		"data-autofocus": true,
+		onClick: answer,
+		onKeyDown: (event) => {
+			if (event.repeat) event.preventDefault();
+		},
+		children: confirmLabel
+	});
+	const statusPart = "gap-2 ps-3 pe-2.5 font-medium text-foreground tabular-nums";
+	const face = (() => {
+		switch (faceKey) {
+			case "confirming": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Part, {
+					index: 0,
+					className: "max-w-64 overflow-hidden ps-3 pe-2 font-medium text-foreground tabular-nums",
+					children: /* @__PURE__ */ jsx("span", {
+						id: promptId,
+						className: "overflow-hidden text-ellipsis",
+						children: shownPrompt
+					})
+				}),
+				/* @__PURE__ */ jsx(Part, {
+					index: 1,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: secondary,
+						onClick: cancel,
+						children: cancelLabel
+					})
+				}),
+				/* @__PURE__ */ jsx(Part, {
+					index: 2,
+					children: confirmButton
+				}),
+				confirmMode === "hold" ? /* @__PURE__ */ jsx("span", {
+					id: holdHintId,
+					className: "sr-only",
+					children: "Press and hold"
+				}) : null
+			] });
+			case "counting": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Part, {
+				index: 0,
+				className: cn(statusPart + " pe-1.5 text-muted-foreground"),
+				children: [/* @__PURE__ */ jsx(Ring, {
+					seconds: countdown,
+					tone
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-baseline gap-1",
+					children: [
+						shownCountdown,
+						" ",
+						/* @__PURE__ */ jsx(Seconds, { value: seconds })
+					]
+				})]
+			}), /* @__PURE__ */ jsx(Part, {
+				index: 1,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: secondary,
+					onClick: cancel,
+					children: cancelLabel
+				})
+			})] });
+			case "pending": return /* @__PURE__ */ jsxs(Part, {
+				index: 0,
+				className: cn(statusPart + " ps-3 pe-4 text-muted-foreground"),
+				children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
+					className: "inline-flex items-baseline gap-1",
+					children: working === "undo" ? undoingLabel : pendingLabel
+				})]
+			});
+			case "done": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Part, {
+				index: 0,
+				className: cn(statusPart + (onUndo ? "" : " pe-3.5")),
+				children: [/* @__PURE__ */ jsx(Check, {}), /* @__PURE__ */ jsx("span", {
+					className: "inline-flex items-baseline gap-1",
+					children: doneLabel
+				})]
+			}), onUndo ? /* @__PURE__ */ jsx(Part, {
+				index: 1,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(secondary + " text-foreground"),
+					"data-autofocus": true,
+					onClick: () => void perform("undo"),
+					children: undoLabel
+				})
+			}) : null] });
+			case "error": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Part, {
+				index: 0,
+				className: statusPart,
+				children: [/* @__PURE__ */ jsx(AlertIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "inline-flex items-baseline gap-1",
+					children: errorLabel
+				})]
+			}), /* @__PURE__ */ jsx(Part, {
+				index: 1,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(secondary + " text-foreground"),
+					"data-autofocus": true,
+					onClick: () => void perform(working),
+					children: retryLabel
+				})
+			})] });
+			default: return /* @__PURE__ */ jsx(Part, {
+				index: 0,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: trigger,
+					"data-autofocus": true,
+					disabled: isDisabled,
+					onClick: () => {
+						setAnnouncement(typeof shownPrompt === "string" ? shownPrompt : "");
+						go("confirming");
+					},
+					children: [icon ? /* @__PURE__ */ jsx("span", {
+						className: "grid size-4 place-items-center text-muted-foreground [&>svg]:size-4",
+						"aria-hidden": "true",
+						children: icon
+					}) : null, /* @__PURE__ */ jsx("span", { children: label })]
+				})
+			});
+		}
+	})();
+	const { leaving, changed, remove } = useLeavingItems(faceKey, face, () => null);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		"data-state": state,
+		"data-face": faceKey,
+		"data-tone": tone,
+		"data-mode": confirmMode,
+		"data-disabled": isDisabled || void 0,
+		tabIndex: -1,
+		"aria-busy": state === "pending" || void 0,
+		onKeyDown,
+		onPointerEnter: () => setHover(true),
+		onPointerLeave: () => setHover(false),
+		onPointerCancel: () => setHover(false),
+		className: cn("relative inline-flex max-w-full min-w-0 align-middle font-sans text-sm leading-5 text-foreground outline-none [-webkit-tap-highlight-color:transparent]", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: surfaceRef,
+			className: cn("relative flex h-(--density-control-h-sm) max-w-full justify-start overflow-clip rounded-pill bg-card shadow-resting after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-(length:--border-width) after:border-border after:content-[''] motion-safe:transition-[background-color,box-shadow] motion-safe:duration-(--duration-standard) motion-safe:ease-settle " + (isDisabled && state === "idle" ? "shadow-none" : "")),
+			children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingFace, {
+				id: item.id,
+				onDone: remove,
+				children: item.value
+			}, item.id)), /* @__PURE__ */ jsx(Face, {
+				id: faceKey,
+				onSize: onFaceSize,
+				labelledBy: faceKey === "confirming" ? promptId : void 0,
+				animated: changed,
+				children: face
+			}, faceKey)]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})]
+	});
+});
+//#endregion
+export { ConfirmMorph };
+
+//# sourceMappingURL=confirm-morph.js.map