@astra-kit/ui 1.0.0 → 1.2.1

package/dist/components/stepper.js

@@ -0,0 +1,693 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Stepper (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): shows where a person is in a multi-step
+* flow and what is done. Driven by `current`; with `onStepSelect` people can go back to completed steps by click or
+* keyboard. Connectors fill one after another when progress jumps several steps, the ring then grows around the new
+* current marker, and numbers morph into drawn checks or alerts.
+*/
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { STEPPER_ALERT_DOT_DELAY_S, STEPPER_DEFAULT_COMPLETE_LABEL, STEPPER_DEFAULT_LABEL, STEPPER_DEFAULT_MESSAGES, STEPPER_GLYPH_DRAW_DELAY_S, STEPPER_GLYPH_ENTER_SCALE, STEPPER_RING_DELAY_S, STEPPER_RING_ENTER_SCALE, STEPPER_TEXT_MORPH_WINDOW_MS } from "../constants/stepper.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ArcTextSwap } from "../motion/arc-text-swap.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY, ARC_STAGGER } from "../motion/arc-tokens.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const still = { duration: 0 };
+const leave = {
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.standard]
+};
+const glyphFrom = {
+	opacity: 0,
+	scale: STEPPER_GLYPH_ENTER_SCALE,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const glyphRest = {
+	opacity: 1,
+	scale: 1,
+	filter: "blur(0px)"
+};
+/**
+* Text that rises in when it changes. Its slot springs to the new height, so a message that wraps eases the steps below
+* it down instead of pushing them; unrelated resizes (fonts, container width) follow exactly.
+*/
+function SwapSlot(t0) {
+	const $ = _c(18);
+	const { text, className, reduceMotion } = t0;
+	const inner = useRef(null);
+	const armedUntil = useRef(0);
+	const height = useMotionValue("auto");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			armedUntil.current = performance.now() + STEPPER_TEXT_MORPH_WINDOW_MS;
+		};
+		$[0] = t1;
+	} else {
+		t1 = $[0];
+	}
+	let t2;
+	if ($[1] !== text) {
+		t2 = [text];
+		$[1] = text;
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== height || $[4] !== reduceMotion) {
+		t3 = () => {
+			const node = inner.current;
+			if (!node || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			let hasMeasured = false;
+			const observer = new ResizeObserver(() => {
+				const next = node.offsetHeight;
+				if (!hasMeasured || reduceMotion || performance.now() > armedUntil.current) {
+					hasMeasured = true;
+					height.jump(next);
+					return;
+				}
+				animate(height, next, ARC_SPRING_SMOOTH);
+			});
+			observer.observe(node);
+			return () => observer.disconnect();
+		};
+		t4 = [height, reduceMotion];
+		$[3] = height;
+		$[4] = reduceMotion;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[7] !== height) {
+		t5 = { height };
+		$[7] = height;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== className) {
+		t6 = cn("break-words", className);
+		$[9] = className;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== reduceMotion || $[12] !== t6 || $[13] !== text) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			ref: inner,
+			className: "relative block",
+			children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+				text,
+				reduceMotion,
+				lineClassName: t6
+			})
+		});
+		$[11] = reduceMotion;
+		$[12] = t6;
+		$[13] = text;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	let t8;
+	if ($[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "block",
+			style: t5,
+			children: t7
+		});
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else {
+		t8 = $[17];
+	}
+	return t8;
+}
+/** The number, check and alert share one spot: the outgoing glyph shrinks away while the next pops in and draws. */
+function Glyph(t0) {
+	const $ = _c(22);
+	const { kind, number, delay, reduceMotion } = t0;
+	let t1;
+	if ($[0] !== delay || $[1] !== reduceMotion) {
+		t1 = reduceMotion ? still : {
+			scale: {
+				...ARC_SPRING_SNAPPY,
+				delay
+			},
+			opacity: {
+				duration: ARC_DURATION.fast,
+				delay
+			},
+			filter: {
+				duration: ARC_DURATION.fast,
+				delay
+			}
+		};
+		$[0] = delay;
+		$[1] = reduceMotion;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const pop = t1;
+	const t2 = reduceMotion ? still : leave;
+	let t3;
+	if ($[3] !== t2) {
+		t3 = {
+			...glyphFrom,
+			transition: t2
+		};
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t3 = $[4];
+	}
+	const exit = t3;
+	let t4;
+	if ($[5] !== delay || $[6] !== reduceMotion) {
+		t4 = reduceMotion ? still : {
+			duration: ARC_DURATION.standard,
+			ease: [...ARC_EASE.enter],
+			delay: delay + STEPPER_GLYPH_DRAW_DELAY_S
+		};
+		$[5] = delay;
+		$[6] = reduceMotion;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	const draw = t4;
+	if (kind === "number") {
+		let t5;
+		if ($[8] !== exit || $[9] !== number || $[10] !== pop) {
+			t5 = /* @__PURE__ */ _jsx(motion.span, {
+				className: "col-start-1 row-start-1 grid place-items-center",
+				initial: glyphFrom,
+				animate: glyphRest,
+				exit,
+				transition: pop,
+				children: number
+			});
+			$[8] = exit;
+			$[9] = number;
+			$[10] = pop;
+			$[11] = t5;
+		} else {
+			t5 = $[11];
+		}
+		return t5;
+	}
+	let t5;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = cn("col-start-1 row-start-1 grid place-items-center", "size-3.5");
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	let t6;
+	if ($[13] !== delay || $[14] !== draw || $[15] !== kind || $[16] !== reduceMotion) {
+		t6 = kind === "check" ? /* @__PURE__ */ _jsx(motion.path, {
+			d: "M5.5 12.5l4.25 4.25L18.5 8",
+			initial: { pathLength: 0 },
+			animate: { pathLength: 1 },
+			transition: draw
+		}) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(motion.path, {
+			d: "M12 6.75v6.5",
+			initial: { pathLength: 0 },
+			animate: { pathLength: 1 },
+			transition: draw
+		}), /* @__PURE__ */ _jsx(motion.circle, {
+			cx: 12,
+			cy: 17.4,
+			r: 1.4,
+			fill: "currentColor",
+			stroke: "none",
+			initial: { scale: 0 },
+			animate: { scale: 1 },
+			transition: reduceMotion ? still : {
+				...ARC_SPRING_SNAPPY,
+				delay: delay + STEPPER_ALERT_DOT_DELAY_S
+			}
+		})] });
+		$[13] = delay;
+		$[14] = draw;
+		$[15] = kind;
+		$[16] = reduceMotion;
+		$[17] = t6;
+	} else {
+		t6 = $[17];
+	}
+	let t7;
+	if ($[18] !== exit || $[19] !== pop || $[20] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(motion.svg, {
+			className: t5,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			initial: glyphFrom,
+			animate: glyphRest,
+			exit,
+			transition: pop,
+			children: t6
+		});
+		$[18] = exit;
+		$[19] = pop;
+		$[20] = t6;
+		$[21] = t7;
+	} else {
+		t7 = $[21];
+	}
+	return t7;
+}
+/** The ring grows out from behind the disc once progress arrives, so the eye lands on the new step after the connector fills. */
+function Marker(t0) {
+	const $ = _c(14);
+	const { number, kind, isCurrent, glyphDelay, ringDelay, reduceMotion } = t0;
+	let t1;
+	if ($[0] !== isCurrent || $[1] !== reduceMotion || $[2] !== ringDelay) {
+		t1 = isCurrent ? /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute -inset-(--halo) rounded-(--radius-pill) bg-(--accent-subtle) transition-[background-color] duration-(--duration-standard) ease-(--ease-standard) group-data-[status=error]/step:bg-danger/16",
+			initial: {
+				opacity: 0,
+				scale: STEPPER_RING_ENTER_SCALE
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: STEPPER_RING_ENTER_SCALE,
+				transition: reduceMotion ? still : leave
+			},
+			transition: reduceMotion ? still : {
+				scale: {
+					...ARC_SPRING_SNAPPY,
+					delay: ringDelay
+				},
+				opacity: {
+					duration: ARC_DURATION.fast,
+					delay: ringDelay
+				}
+			}
+		}, "ring") : null;
+		$[0] = isCurrent;
+		$[1] = reduceMotion;
+		$[2] = ringDelay;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== glyphDelay || $[7] !== kind || $[8] !== number || $[9] !== reduceMotion) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			className: "relative grid size-full place-items-center rounded-(--radius-pill) bg-surface text-xs leading-none font-medium text-text-muted tabular-nums shadow-[inset_0_0_0_1px_var(--border-strong)] transition-[background-color,box-shadow,color,transform] duration-(--duration-standard) ease-(--ease-standard) group-data-[status=current]/step:text-foreground group-data-[status=current]/step:shadow-[inset_0_0_0_1.5px_var(--accent)] group-data-[status=complete]/step:bg-(--accent) group-data-[status=complete]/step:text-(--accent-foreground) group-data-[status=complete]/step:shadow-[inset_0_0_0_1px_var(--accent)] group-data-[status=error]/step:bg-[color-mix(in_oklab,var(--danger)_10%,var(--surface))] group-data-[status=error]/step:text-danger group-data-[status=error]/step:shadow-[inset_0_0_0_1.5px_var(--danger)] group-data-clickable/head:group-active/head:scale-92 group-data-clickable/head:group-data-[status=complete]/step:group-hover/head:bg-(--accent-strong) group-data-clickable/head:group-data-[status=complete]/step:group-hover/head:shadow-[inset_0_0_0_1px_var(--accent-strong)] group-data-clickable/head:group-data-[status=error]/step:group-hover/head:bg-[color-mix(in_oklab,var(--danger)_18%,var(--surface))] motion-reduce:transition-none motion-reduce:group-active/head:scale-100",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				children: /* @__PURE__ */ _jsx(Glyph, {
+					kind,
+					number,
+					delay: glyphDelay,
+					reduceMotion
+				}, kind)
+			})
+		});
+		$[6] = glyphDelay;
+		$[7] = kind;
+		$[8] = number;
+		$[9] = reduceMotion;
+		$[10] = t3;
+	} else {
+		t3 = $[10];
+	}
+	let t4;
+	if ($[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "stepper-marker",
+			"aria-hidden": "true",
+			className: "relative grid size-(--marker) flex-none place-items-center",
+			children: [t2, t3]
+		});
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		t4 = $[13];
+	}
+	return t4;
+}
+/**
+* A horizontal or vertical steps indicator driven by the current index, with optional navigation back to completed steps.
+* @param props - Steps, current index, orientation, selection callback, copy and native attributes.
+* @returns The stepper: a labelled `nav` when interactive, otherwise a `role="group"`.
+*/
+function Stepper(t0) {
+	const $ = _c(52);
+	let className;
+	let current;
+	let messages;
+	let onStepSelect;
+	let props;
+	let steps;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		({steps, current, orientation: t1, onStepSelect, details: t2, compact: t3, label: t4, completeLabel: t5, messages, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = current;
+		$[3] = messages;
+		$[4] = onStepSelect;
+		$[5] = props;
+		$[6] = steps;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		className = $[1];
+		current = $[2];
+		messages = $[3];
+		onStepSelect = $[4];
+		props = $[5];
+		steps = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+	}
+	const orientation = t1 === undefined ? "horizontal" : t1;
+	const details = t2 === undefined ? "all" : t2;
+	const compact = t3 === undefined ? false : t3;
+	const label = t4 === undefined ? STEPPER_DEFAULT_LABEL : t4;
+	const completeLabel = t5 === undefined ? STEPPER_DEFAULT_COMPLETE_LABEL : t5;
+	const copy = {
+		...STEPPER_DEFAULT_MESSAGES,
+		...messages
+	};
+	const statusText = {
+		complete: copy.completed,
+		current: "",
+		upcoming: copy.notStarted,
+		error: copy.error
+	};
+	const reduceMotion = usePrefersReducedMotion();
+	const count = steps.length;
+	let t6;
+	if ($[12] !== current) {
+		t6 = Math.round(current);
+		$[12] = current;
+		$[13] = t6;
+	} else {
+		t6 = $[13];
+	}
+	const active = Math.min(Math.max(t6, 0), count);
+	let t7;
+	if ($[14] !== active) {
+		t7 = {
+			to: active,
+			from: active
+		};
+		$[14] = active;
+		$[15] = t7;
+	} else {
+		t7 = $[15];
+	}
+	const [travel, setTravel] = useState(t7);
+	if (travel.to !== active) {
+		setTravel({
+			to: active,
+			from: travel.to
+		});
+	}
+	const from = travel.from;
+	const stagger = ARC_STAGGER.line;
+	let t8;
+	if ($[16] !== active || $[17] !== from || $[18] !== reduceMotion) {
+		t8 = (index) => {
+			if (reduceMotion) {
+				return 0;
+			}
+			if (active > from) {
+				return index >= from && index < active ? (index - from) * stagger : 0;
+			}
+			return index >= active && index < from ? (from - 1 - index) * stagger : 0;
+		};
+		$[16] = active;
+		$[17] = from;
+		$[18] = reduceMotion;
+		$[19] = t8;
+	} else {
+		t8 = $[19];
+	}
+	const delayAt = t8;
+	const ringDelay = reduceMotion ? 0 : Math.max(0, Math.abs(active - from) - 1) * stagger + STEPPER_RING_DELAY_S;
+	const isInteractive = Boolean(onStepSelect);
+	const isVertical = orientation === "vertical";
+	const currentStep = active >= count ? undefined : steps[active];
+	let t9;
+	if ($[20] !== isVertical) {
+		t9 = function onKeyDown(event) {
+			const isRightToLeft = !isVertical && getComputedStyle(event.currentTarget).direction === "rtl";
+			const backKeys = ["ArrowUp", isRightToLeft ? "ArrowRight" : "ArrowLeft"];
+			const aheadKeys = ["ArrowDown", isRightToLeft ? "ArrowLeft" : "ArrowRight"];
+			if (![
+				...backKeys,
+				...aheadKeys,
+				"Home",
+				"End"
+			].includes(event.key)) {
+				return;
+			}
+			const targets = Array.from(event.currentTarget.querySelectorAll("button[data-reachable]"));
+			const position = targets.indexOf(event.target);
+			if (position < 0) {
+				return;
+			}
+			event.preventDefault();
+			const next = event.key === "Home" ? 0 : event.key === "End" ? targets.length - 1 : backKeys.includes(event.key) ? Math.max(0, position - 1) : Math.min(targets.length - 1, position + 1);
+			targets[next]?.focus();
+		};
+		$[20] = isVertical;
+		$[21] = t9;
+	} else {
+		t9 = $[21];
+	}
+	const onKeyDown = t9;
+	const Root = isInteractive ? "nav" : "div";
+	const hiddenTextClassName = compact ? "sr-only" : isVertical ? "" : "@max-[30rem]/stepper:sr-only";
+	const t10 = "stepper";
+	const t11 = isInteractive ? undefined : "group";
+	const t12 = !isVertical && "@container/stepper w-full";
+	let t13;
+	if ($[22] !== className || $[23] !== t12) {
+		t13 = cn("min-w-0 font-sans tracking-(--tracking-body) text-foreground [--halo:4px] [--marker:1.75rem]", t12, className);
+		$[22] = className;
+		$[23] = t12;
+		$[24] = t13;
+	} else {
+		t13 = $[24];
+	}
+	let t14;
+	if ($[25] !== count || $[26] !== isVertical) {
+		t14 = isVertical ? undefined : { gridTemplateColumns: count > 1 ? `repeat(${count - 1}, minmax(0, 1fr)) auto` : "auto" };
+		$[25] = count;
+		$[26] = isVertical;
+		$[27] = t14;
+	} else {
+		t14 = $[27];
+	}
+	const t15 = isInteractive ? onKeyDown : undefined;
+	const t16 = steps.map((step, index_0) => {
+		const isCurrent = index_0 === active;
+		const status = step.error ? "error" : index_0 < active ? "complete" : isCurrent ? "current" : "upcoming";
+		const isClickable = isInteractive && index_0 < active;
+		const detail = step.error ?? (details === "all" || isCurrent ? step.description : undefined);
+		const kind = step.error ? "error" : index_0 < active ? "check" : "number";
+		const isLast = index_0 === count - 1;
+		const content = /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Marker, {
+			number: index_0 + 1,
+			kind,
+			isCurrent,
+			glyphDelay: delayAt(index_0),
+			ringDelay,
+			reduceMotion
+		}), /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "stepper-text",
+			className: cn("grid min-w-0", isVertical && "pt-1", hiddenTextClassName),
+			children: [
+				/* @__PURE__ */ _jsx("span", {
+					className: "block text-sm leading-5 font-medium break-words text-text-muted transition-colors duration-(--duration-standard) ease-(--ease-standard) group-data-[status=complete]/step:text-text-secondary group-data-[status=current]/step:text-foreground group-data-[status=error]/step:text-foreground group-data-clickable/head:group-hover/head:text-foreground motion-reduce:transition-none",
+					children: step.label
+				}),
+				statusText[status] ? /* @__PURE__ */ _jsx("span", {
+					className: "sr-only",
+					children: `, ${statusText[status]}`
+				}) : null,
+				/* @__PURE__ */ _jsx(SwapSlot, {
+					text: detail,
+					className: cn("pt-0.5 text-xs leading-(--leading-body) font-normal", step.error ? "text-danger" : "text-text-muted"),
+					reduceMotion
+				})
+			]
+		})] });
+		const headClassName = cn("group/head m-0 grid cursor-default rounded-(--space-2) border-0 bg-transparent p-0 text-start [font:inherit] [letter-spacing:inherit] text-inherit [-webkit-tap-highlight-color:transparent] [--focus-outline-offset:4px] data-clickable:cursor-pointer", isVertical ? cn("w-full items-start gap-x-(--space-3)", compact ? "grid-cols-[var(--marker)] gap-x-0" : "grid-cols-[var(--marker)_minmax(0,1fr)]") : "w-fit max-w-full justify-items-start gap-y-(--space-3)");
+		return /* @__PURE__ */ _jsxs("li", {
+			"data-slot": "stepper-step",
+			"data-status": status,
+			className: cn("group/step relative min-w-0", !isLast && (isVertical ? compact ? "pb-(--space-6)" : "pb-(--space-5)" : "pe-(--space-4)")),
+			children: [!isLast ? /* @__PURE__ */ _jsx("span", {
+				"data-slot": "stepper-connector",
+				"aria-hidden": "true",
+				className: cn("pointer-events-none absolute overflow-hidden rounded-(--radius-pill) bg-border", isVertical ? "start-[calc(var(--marker)/2_-_1px)] top-[calc(var(--marker)+var(--halo)+2px)] bottom-[calc(var(--halo)+2px)] w-0.5" : "start-[calc(var(--marker)+var(--halo)+var(--space-1))] end-[calc(var(--halo)+var(--space-1))] top-[calc(var(--marker)/2_-_1px)] h-0.5"),
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: cn("absolute inset-0 rounded-[inherit] bg-(--accent)", isVertical ? "origin-top" : "origin-left rtl:origin-right"),
+					initial: false,
+					animate: isVertical ? { scaleY: index_0 < active ? 1 : 0 } : { scaleX: index_0 < active ? 1 : 0 },
+					transition: reduceMotion ? still : {
+						...ARC_SPRING_SMOOTH,
+						delay: delayAt(index_0)
+					}
+				}, orientation)
+			}) : null, isInteractive ? /* @__PURE__ */ _jsx("button", {
+				type: "button",
+				className: headClassName,
+				"data-clickable": isClickable || undefined,
+				"data-reachable": index_0 <= active || undefined,
+				"aria-current": isCurrent ? "step" : undefined,
+				"aria-disabled": isClickable ? undefined : true,
+				tabIndex: isClickable || isCurrent ? undefined : -1,
+				onClick: isClickable ? () => onStepSelect?.(index_0) : undefined,
+				children: content
+			}) : /* @__PURE__ */ _jsx("span", {
+				className: headClassName,
+				"aria-current": isCurrent ? "step" : undefined,
+				children: content
+			})]
+		}, step.id);
+	});
+	let t17;
+	if ($[28] !== t14 || $[29] !== t15 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ _jsx("ol", {
+			className: "m-0 grid list-none p-0",
+			style: t14,
+			onKeyDown: t15,
+			children: t16
+		});
+		$[28] = t14;
+		$[29] = t15;
+		$[30] = t16;
+		$[31] = t17;
+	} else {
+		t17 = $[31];
+	}
+	let t18;
+	if ($[32] !== compact || $[33] !== completeLabel || $[34] !== currentStep?.description || $[35] !== currentStep?.error || $[36] !== currentStep?.label || $[37] !== isVertical || $[38] !== reduceMotion) {
+		t18 = isVertical ? null : /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "stepper-caption",
+			"aria-hidden": "true",
+			className: cn("mt-(--space-3)", compact ? "grid" : "hidden @max-[30rem]/stepper:grid"),
+			children: [/* @__PURE__ */ _jsx(SwapSlot, {
+				text: currentStep?.label ?? completeLabel,
+				className: "text-sm leading-5 font-medium text-foreground",
+				reduceMotion
+			}), /* @__PURE__ */ _jsx(SwapSlot, {
+				text: currentStep?.error ?? currentStep?.description,
+				className: cn("pt-0.5 text-xs leading-(--leading-body) font-normal", currentStep?.error ? "text-danger" : "text-text-muted"),
+				reduceMotion
+			})]
+		});
+		$[32] = compact;
+		$[33] = completeLabel;
+		$[34] = currentStep?.description;
+		$[35] = currentStep?.error;
+		$[36] = currentStep?.label;
+		$[37] = isVertical;
+		$[38] = reduceMotion;
+		$[39] = t18;
+	} else {
+		t18 = $[39];
+	}
+	const t19 = "sr-only";
+	const t20 = "polite";
+	const t21 = currentStep ? copy.stepAnnouncement({
+		position: active + 1,
+		count,
+		label: currentStep.label
+	}) : completeLabel;
+	let t22;
+	if ($[40] !== t21) {
+		t22 = /* @__PURE__ */ _jsx("span", {
+			className: t19,
+			"aria-live": t20,
+			children: t21
+		});
+		$[40] = t21;
+		$[41] = t22;
+	} else {
+		t22 = $[41];
+	}
+	let t23;
+	if ($[42] !== Root || $[43] !== label || $[44] !== orientation || $[45] !== props || $[46] !== t11 || $[47] !== t13 || $[48] !== t17 || $[49] !== t18 || $[50] !== t22) {
+		t23 = /* @__PURE__ */ _jsxs(Root, {
+			"data-slot": t10,
+			"data-orientation": orientation,
+			"aria-label": label,
+			role: t11,
+			className: t13,
+			...props,
+			children: [
+				t17,
+				t18,
+				t22
+			]
+		});
+		$[42] = Root;
+		$[43] = label;
+		$[44] = orientation;
+		$[45] = props;
+		$[46] = t11;
+		$[47] = t13;
+		$[48] = t17;
+		$[49] = t18;
+		$[50] = t22;
+		$[51] = t23;
+	} else {
+		t23 = $[51];
+	}
+	return t23;
+}
+export { Stepper };