@orvui/vue 0.0.0-stage → 0.1.1

package/dist/expanding-arrow-button-CM0UMPHe.js

@@ -0,0 +1,485 @@
+import { a as e, s as t, t as n } from "./composables-BJ1sih_H.js";
+import { l as r, o as i, r as a } from "./ease-rIvCM4O3.js";
+import { t as o } from "./utils-DIrLOK2M.js";
+import { t as s } from "./RenderContent-CwtJ7hLl.js";
+import { Fragment as c, Text as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useSlots as E, watch as D, withCtx as O, withModifiers as k } from "vue";
+import { animate as A, motion as j, useMotionValue as M, useTransform as N } from "motion-v";
+// src/motion/expanding-arrow-button/src/DottedChevron.vue?vue&type=script&setup=true&lang.ts
+var P = {
+	viewBox: "0 0 20 28",
+	fill: "none",
+	"aria-hidden": "true"
+}, F = ["cx", "cy"], I = /* @__PURE__ */ g({
+	__name: "DottedChevron",
+	setup(e) {
+		let t = Array.from({ length: 5 }, (e, t) => ({
+			x: 16 - Math.abs(t - 2) * 6,
+			y: 4 + t * 5
+		}));
+		return (e, n) => (x(), p("svg", P, [(x(!0), p(c, null, C(T(t), (e) => (x(), p("circle", {
+			key: e.y,
+			cx: e.x,
+			cy: e.y,
+			r: "2",
+			fill: "currentColor"
+		}, null, 8, F))), 128))]));
+	}
+}), L = { class: "absolute inset-0 flex items-center justify-around px-3" }, R = /* @__PURE__ */ g({
+	__name: "ExpandingArrowButton",
+	props: {
+		disabled: { type: Boolean },
+		accentClassName: {},
+		labelClassName: {}
+	},
+	setup(n) {
+		let s = n, l = t(), f = S(!1), g = S(!1), y = e("(hover: hover) and (pointer: fine)"), b = u(() => !s.disabled && (g.value || f.value && y.value)), E = [
+			1,
+			.82,
+			.64,
+			.46,
+			.28
+		], D = u(() => ({
+			width: b.value ? "calc(100% - 12px)" : "52px",
+			borderRadius: "16px"
+		}));
+		function k() {
+			return {
+				opacity: +!!b.value,
+				transform: b.value && !l.value ? "translateX(0px)" : "translateX(-6px)"
+			};
+		}
+		function A(e) {
+			return {
+				duration: l.value ? 0 : .18,
+				delay: b.value && !l.value ? .04 + e * .025 : 0,
+				ease: a
+			};
+		}
+		return (e, t) => (x(), d(T(j).button, {
+			type: "button",
+			disabled: n.disabled,
+			onMouseenter: t[0] ||= (e) => f.value = !0,
+			onMouseleave: t[1] ||= (e) => f.value = !1,
+			onFocus: t[2] ||= (e) => g.value = !0,
+			onBlur: t[3] ||= (e) => g.value = !1,
+			"while-press": T(l) || n.disabled ? void 0 : { scale: .97 },
+			transition: T(r),
+			class: "relative inline-flex h-16 min-w-72 items-center overflow-hidden rounded-[22px] bg-neutral-950 p-1.5 text-white select-none outline-none focus-visible:ring-2 focus-visible:ring-lime-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
+		}, {
+			default: O(() => [h(T(j).span, {
+				layout: "size",
+				"aria-hidden": "true",
+				style: v(D.value),
+				transition: T(l) ? { duration: 0 } : T(i),
+				class: _(T(o)("absolute inset-y-1.5 left-1.5 z-10 overflow-hidden bg-lime-300 text-neutral-950", n.accentClassName))
+			}, {
+				default: O(() => [h(T(j).span, {
+					class: "absolute inset-0 grid place-items-center",
+					animate: { opacity: +!b.value },
+					transition: {
+						duration: T(l) ? 0 : .1,
+						ease: T(a)
+					}
+				}, {
+					default: O(() => [h(I, { class: "h-7 w-5" })]),
+					_: 1
+				}, 8, ["animate", "transition"]), m("span", L, [(x(), p(c, null, C(E, (e, t) => h(T(j).span, {
+					key: t,
+					class: "inline-grid place-items-center",
+					style: v({ color: `rgb(10 10 10 / ${e})` }),
+					animate: k(),
+					transition: A(t)
+				}, {
+					default: O(() => [h(I, { class: "h-7 w-5" })]),
+					_: 1
+				}, 8, [
+					"style",
+					"animate",
+					"transition"
+				])), 64))])]),
+				_: 1
+			}, 8, [
+				"style",
+				"transition",
+				"class"
+			]), h(T(j).span, {
+				animate: {
+					opacity: +!b.value,
+					transform: b.value && !T(l) ? "translateX(6px)" : "translateX(0px)"
+				},
+				transition: {
+					duration: T(l) ? 0 : .12,
+					ease: T(a)
+				},
+				class: _(T(o)("relative z-0 ml-[76px] mr-5 whitespace-nowrap text-lg font-medium tracking-[-0.02em]", n.labelClassName))
+			}, {
+				default: O(() => [w(e.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"animate",
+				"transition",
+				"class"
+			])]),
+			_: 3
+		}, 8, [
+			"disabled",
+			"while-press",
+			"transition"
+		]));
+	}
+}), z = {
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-0 [clip-path:inset(0_round_var(--hold-radius))]"
+}, B = ["d"], V = /* @__PURE__ */ g({
+	__name: "HoldActionButton",
+	props: {
+		type: { default: "vertical" },
+		holdingLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Keep holding"
+		},
+		completeLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Done"
+		},
+		holdDuration: { default: 1600 },
+		disabled: { type: Boolean },
+		fillClassName: {},
+		labelClassName: {}
+	},
+	emits: ["holdComplete"],
+	setup(e, { emit: n }) {
+		let i = e, c = n, p = E(), g = t(), v = S("idle"), b = u(() => v.value !== "idle"), C;
+		function A() {
+			let e = p.default?.() ?? [];
+			return e.length === 1 && e[0].type === l ? String(e[0].children) : void 0;
+		}
+		function M() {
+			let e = C;
+			if (C = void 0, e) try {
+				e.element.hasPointerCapture(e.pointer) && e.element.releasePointerCapture(e.pointer);
+			} catch {}
+		}
+		function N() {
+			v.value = "idle", M();
+		}
+		function P() {
+			return i.disabled || v.value === "holding" ? !1 : (v.value = "holding", !0);
+		}
+		function F() {
+			v.value !== "holding" || i.disabled || (v.value = "complete", c("holdComplete"));
+		}
+		function I(e) {
+			if (e.defaultPrevented || e.button !== 0 || C || !P()) return;
+			let t = e.currentTarget;
+			C = {
+				element: t,
+				pointer: e.pointerId
+			};
+			try {
+				t.setPointerCapture(e.pointerId);
+			} catch {}
+		}
+		function L(e) {
+			if (!C || C.pointer !== e.pointerId) return;
+			let t = C.element.getBoundingClientRect();
+			(e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom) && N();
+		}
+		function R(e) {
+			C && C.pointer !== e.pointerId || N();
+		}
+		function V(e, t) {
+			(e.key === " " || e.key === "Enter") && (e.preventDefault(), t ? e.repeat || P() : N());
+		}
+		let H = u(() => g.value ? {
+			opacity: +!!b.value,
+			transform: "none"
+		} : {
+			opacity: 1,
+			transform: i.type === "horizontal" ? `translateX(${b.value ? 0 : -100}%)` : `translateY(${b.value ? 0 : 115}%)`
+		}), U = u(() => b.value ? {
+			duration: i.holdDuration / 1e3,
+			ease: "linear"
+		} : {
+			duration: g.value ? .15 : .24,
+			ease: a
+		}), W = u(() => i.type === "horizontal" ? {
+			viewBox: "0 0 24 240",
+			path: "M0 0h12C2 20 2 40 12 60s10 40 0 60-10 40 0 60 10 40 0 60H0Z",
+			class: "absolute -right-5 top-0 h-[200%] w-6 text-sky-400",
+			transform: v.value === "holding" ? "translateY(-50%)" : "translateY(0%)"
+		} : {
+			viewBox: "0 0 240 24",
+			path: "M0 12C20 2 40 2 60 12s40 10 60 0 40-10 60 0 40 10 60 0v12H0Z",
+			class: "absolute -top-5 left-0 h-6 w-[200%] text-sky-400",
+			transform: v.value === "holding" ? "translateX(-50%)" : "translateX(0%)"
+		});
+		return D(() => i.disabled, (e) => {
+			e && N();
+		}), y(N), (t, n) => (x(), d(T(j).button, {
+			type: "button",
+			disabled: e.disabled,
+			"aria-label": t.$attrs["aria-label"] ?? A(),
+			onPointerdown: I,
+			onPointermove: L,
+			onPointerup: R,
+			onPointercancel: R,
+			onPointerleave: n[0] ||= (e) => e.pointerType !== "touch" && N(),
+			onKeydown: n[1] ||= (e) => V(e, !0),
+			onKeyup: n[2] ||= (e) => V(e, !1),
+			onBlur: N,
+			onContextmenu: n[3] ||= k(() => {}, ["prevent"]),
+			"while-press": T(g) || e.disabled ? void 0 : { scale: .98 },
+			transition: T(r),
+			class: "relative inline-grid h-16 min-w-72 touch-none select-none [-webkit-touch-callout:none] place-items-center overflow-hidden rounded-[var(--hold-radius)] bg-primary px-8 text-primary-foreground [--hold-radius:22px] outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
+		}, {
+			default: O(() => [m("span", z, [h(T(j).span, {
+				initial: !1,
+				animate: H.value,
+				transition: U.value,
+				onAnimationComplete: F,
+				class: _(T(o)("absolute inset-0 bg-sky-400 will-change-[opacity,transform]", e.fillClassName))
+			}, {
+				default: O(() => [T(g) ? f("", !0) : (x(), d(T(j).svg, {
+					key: 0,
+					viewBox: W.value.viewBox,
+					preserveAspectRatio: "none",
+					class: _(W.value.class),
+					animate: { transform: W.value.transform },
+					transition: {
+						duration: 1.1,
+						ease: "linear",
+						repeat: v.value === "holding" ? Infinity : 0
+					}
+				}, {
+					default: O(() => [m("path", {
+						d: W.value.path,
+						fill: "currentColor"
+					}, null, 8, B)]),
+					_: 1
+				}, 8, [
+					"viewBox",
+					"class",
+					"animate",
+					"transition"
+				]))]),
+				_: 1
+			}, 8, [
+				"animate",
+				"transition",
+				"class"
+			])]), m("span", { class: _(T(o)("relative z-10 grid place-items-center text-base font-medium tracking-[-.01em]", e.labelClassName)) }, [
+				h(T(j).span, {
+					class: "col-start-1 row-start-1",
+					animate: { opacity: +!b.value },
+					transition: {
+						duration: T(g) ? 0 : .12,
+						ease: T(a)
+					}
+				}, {
+					default: O(() => [w(t.$slots, "default")]),
+					_: 3
+				}, 8, ["animate", "transition"]),
+				h(T(j).span, {
+					class: "col-start-1 row-start-1",
+					"aria-hidden": v.value !== "holding",
+					animate: { opacity: +(v.value === "holding") },
+					transition: {
+						duration: T(g) ? 0 : .12,
+						ease: T(a)
+					}
+				}, {
+					default: O(() => [w(t.$slots, "holdingLabel", {}, () => [h(T(s), { node: e.holdingLabel }, null, 8, ["node"])])]),
+					_: 3
+				}, 8, [
+					"aria-hidden",
+					"animate",
+					"transition"
+				]),
+				h(T(j).span, {
+					class: "col-start-1 row-start-1",
+					"aria-hidden": v.value !== "complete",
+					animate: { opacity: +(v.value === "complete") },
+					transition: {
+						duration: T(g) ? 0 : .12,
+						ease: T(a)
+					}
+				}, {
+					default: O(() => [w(t.$slots, "completeLabel", {}, () => [h(T(s), { node: e.completeLabel }, null, 8, ["node"])])]),
+					_: 3
+				}, 8, [
+					"aria-hidden",
+					"animate",
+					"transition"
+				])
+			], 2)]),
+			_: 3
+		}, 8, [
+			"disabled",
+			"aria-label",
+			"while-press",
+			"transition"
+		]));
+	}
+}), H = /* @__PURE__ */ g({
+	__name: "SlideActionButton",
+	props: {
+		completeLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Complete"
+		},
+		threshold: { default: .82 },
+		resetDelay: { default: 1200 },
+		thumbClassName: {},
+		fillClassName: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["complete"],
+	setup(e, { emit: c }) {
+		let u = e, d = c, m = t(), g = E(), C = S(null), k = S(null), P = S(0), F = S(!1), I = M(0), L = N(I, (e) => e / Math.max(1, P.value)), R = N(L, [
+			0,
+			.35,
+			.65
+		], [
+			1,
+			.75,
+			0
+		]), z = N(L, [
+			0,
+			.5,
+			1
+		], [
+			"M 8 5 L 15 12 L 8 19",
+			"M 7 8 L 12 14 L 17 10",
+			"M 5 12 L 10 17 L 19 7"
+		]), B, V, H;
+		function U() {
+			let e = g.default?.() ?? [];
+			return e.length === 1 && e[0].type === l ? String(e[0].children) : "Slide action";
+		}
+		function W(e) {
+			H?.stop(), m.value ? I.set(e) : H = A(I, e, i);
+		}
+		function G() {
+			F.value = !1, W(0);
+		}
+		function K() {
+			F.value || u.disabled || P.value <= 0 || (F.value = !0, W(P.value), d("complete"), clearTimeout(V), V = setTimeout(G, u.resetDelay));
+		}
+		function q() {
+			I.get() >= P.value * u.threshold ? K() : W(0);
+		}
+		function J(e) {
+			(e.key === " " || e.key === "Enter") && (e.preventDefault(), K());
+		}
+		function Y() {
+			P.value = Math.max(0, (C.value?.clientWidth ?? 0) - (k.value?.clientWidth ?? 0) - 8), F.value && W(P.value);
+		}
+		return D(P, () => L.set(I.get() / Math.max(1, P.value))), D(() => u.disabled, (e) => {
+			e && !F.value && W(0);
+		}), b(() => {
+			Y(), typeof ResizeObserver < "u" && (B = new ResizeObserver(Y), C.value && B.observe(C.value), k.value && B.observe(k.value));
+		}), y(() => {
+			B?.disconnect(), clearTimeout(V), H?.stop();
+		}), (t, i) => (x(), p("div", {
+			ref_key: "track",
+			ref: C,
+			class: "relative h-16 w-72 overflow-hidden rounded-[22px] bg-muted p-1 [-webkit-touch-callout:none] pointer-coarse:select-none ring-1 ring-primary/10"
+		}, [
+			h(T(j).span, {
+				"aria-hidden": "true",
+				style: v({ scaleX: T(L) }),
+				class: _(T(o)("absolute inset-0 origin-left bg-primary will-change-transform", e.fillClassName))
+			}, null, 8, ["style", "class"]),
+			h(T(j).span, {
+				"aria-hidden": "true",
+				style: v({ opacity: T(R) }),
+				class: "pointer-events-none absolute inset-0 grid place-items-center pl-10 text-sm font-medium text-foreground"
+			}, {
+				default: O(() => [w(t.$slots, "default")]),
+				_: 3
+			}, 8, ["style"]),
+			h(T(j).span, {
+				"aria-live": "polite",
+				animate: { opacity: +!!F.value },
+				transition: {
+					duration: T(m) ? 0 : .15,
+					ease: T(a)
+				},
+				class: "pointer-events-none absolute inset-0 grid place-items-center text-sm font-medium text-primary-foreground"
+			}, {
+				default: O(() => [F.value ? w(t.$slots, "completeLabel", {}, () => [h(T(s), { node: e.completeLabel }, null, 8, ["node"])], void 0, 0) : f("", !0)]),
+				_: 3
+			}, 8, ["animate", "transition"]),
+			h(T(j).button, {
+				ref: (e) => k.value = T(n)(e),
+				type: "button",
+				"aria-label": t.$attrs["aria-label"] ?? U(),
+				disabled: e.disabled,
+				drag: F.value || e.disabled ? !1 : "x",
+				"drag-constraints": {
+					left: 0,
+					right: P.value
+				},
+				"drag-elastic": 0,
+				"drag-momentum": !1,
+				style: v({ x: T(I) }),
+				onDragEnd: q,
+				onKeydown: J,
+				"while-press": T(m) || F.value ? void 0 : { scale: .94 },
+				transition: T(r),
+				class: _(T(o)("relative z-10 grid size-14 touch-none select-none [-webkit-touch-callout:none] cursor-grab place-items-center rounded-[18px] bg-primary text-primary-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", F.value && "cursor-default bg-background text-foreground", e.thumbClassName))
+			}, {
+				default: O(() => [h(T(j).svg, {
+					viewBox: "0 0 24 24",
+					"aria-hidden": "true",
+					class: "size-5"
+				}, {
+					default: O(() => [h(T(j).path, {
+						d: T(z),
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						"stroke-width": "2"
+					}, null, 8, ["d"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"aria-label",
+				"disabled",
+				"drag",
+				"drag-constraints",
+				"style",
+				"while-press",
+				"transition",
+				"class"
+			])
+		], 512));
+	}
+});
+export { V as n, R as r, H as t };
+
+//# sourceMappingURL=expanding-arrow-button-CM0UMPHe.js.map

package/dist/expanding-arrow-button-CM0UMPHe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-arrow-button-CM0UMPHe.js","names":["_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_Fragment","_renderList","_unref","_sfc_main","_hoisted_1","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_normalizeStyle","_normalizeClass","DottedChevron","_createElementVNode","_createElementBlock","_Fragment","_renderList","_renderSlot","_sfc_main","$attrs","_openBlock","_createBlock","_unref","_withModifiers","_withCtx","_createElementVNode","_createVNode","_normalizeClass","_createCommentVNode","_renderSlot","RenderContent","_sfc_main","$attrs","_openBlock","_createElementBlock","_createVNode","_unref","_normalizeStyle","_normalizeClass","_withCtx","_renderSlot","RenderContent","_createCommentVNode","_sfc_main","useMediaQuery","useReducedMotion","resolveElement","SPRING_PRESS","SPRING_LAYOUT","EASE_OUT","cn","RenderContent_default","_hoisted_1$2","_hoisted_2$1","DottedChevron_default","defineComponent","dots","index","openBlock","createElementBlock","Fragment","renderList","unref","dot","_hoisted_1$1","ExpandingArrowButton_default","props","__props","reduce","mouse","ref","focus","hoverSupported","expanded","computed","chevrons","accentStyle","arrowPose","arrowTiming","createBlock","motion","_cache","withCtx","createVNode","normalizeStyle","normalizeClass","createElementVNode","alpha","renderSlot","_ctx","_hoisted_1","_hoisted_2","HoldActionButton_default","__emit","emit","slots","useSlots","phase","filling","capture","accessibleLabel","nodes","Text","release","held","reset","begin","finish","pointerDown","event","element","pointerMove","b","pointerUp","key","down","fillPose","fillTiming","wave","watch","value","onBeforeUnmount","$event","withModifiers","createCommentVNode","SlideActionButton_default","track","thumb","extent","completed","x","useMotionValue","progress","useTransform","labelOpacity","arrowPath","observer","resetTimer","animation","label","settle","position","animate","complete","dragEnd","measure","disabled","onMounted"],"sources":["../src/motion/expanding-arrow-button/src/DottedChevron.vue","../src/motion/expanding-arrow-button/src/DottedChevron.vue","../src/motion/expanding-arrow-button/src/ExpandingArrowButton.vue","../src/motion/expanding-arrow-button/src/ExpandingArrowButton.vue","../src/motion/expanding-arrow-button/src/HoldActionButton.vue","../src/motion/expanding-arrow-button/src/HoldActionButton.vue","../src/motion/expanding-arrow-button/src/SlideActionButton.vue","../src/motion/expanding-arrow-button/src/SlideActionButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst dots = Array.from({ length: 5 }, (_, index) => ({ x: 16 - Math.abs(index - 2) * 6, y: 4 + index * 5 }));\n</script>\n<template>\n  <svg viewBox=\"0 0 20 28\" fill=\"none\" aria-hidden=\"true\"><circle v-for=\"dot in dots\" :key=\"dot.y\" :cx=\"dot.x\" :cy=\"dot.y\" r=\"2\" fill=\"currentColor\" /></svg>\n</template>\n","<script setup lang=\"ts\">\nconst dots = Array.from({ length: 5 }, (_, index) => ({ x: 16 - Math.abs(index - 2) * 6, y: 4 + index * 5 }));\n</script>\n<template>\n  <svg viewBox=\"0 0 20 28\" fill=\"none\" aria-hidden=\"true\"><circle v-for=\"dot in dots\" :key=\"dot.y\" :cx=\"dot.x\" :cy=\"dot.y\" r=\"2\" fill=\"currentColor\" /></svg>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { useReducedMotion, useMediaQuery } from \"../../../lib/composables\";\nimport DottedChevron from \"./DottedChevron.vue\";\nconst props = defineProps<{ disabled?: boolean; accentClassName?: string; labelClassName?: string }>();\nconst reduce = useReducedMotion();\nconst mouse = ref(false);\nconst focus = ref(false);\nconst hoverSupported = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\nconst expanded = computed(() => !props.disabled && (focus.value || mouse.value && hoverSupported.value));\nconst chevrons = [1, .82, .64, .46, .28];\nconst accentStyle = computed(() => ({ width: expanded.value ? \"calc(100% - 12px)\" : \"52px\", borderRadius: \"16px\" }));\nfunction arrowPose() { return { opacity: expanded.value ? 1 : 0, transform: expanded.value && !reduce.value ? \"translateX(0px)\" : \"translateX(-6px)\" }; }\nfunction arrowTiming(index: number) { return { duration: reduce.value ? 0 : .18, delay: expanded.value && !reduce.value ? .04 + index * .025 : 0, ease: EASE_OUT }; }\n</script>\n<template>\n  <motion.button type=\"button\" :disabled=\"disabled\" @mouseenter=\"mouse = true\" @mouseleave=\"mouse = false\" @focus=\"focus = true\" @blur=\"focus = false\"\n    :while-press=\"reduce || disabled ? undefined : { scale: .97 }\" :transition=\"SPRING_PRESS\"\n    class=\"relative inline-flex h-16 min-w-72 items-center overflow-hidden rounded-[22px] bg-neutral-950 p-1.5 text-white select-none outline-none focus-visible:ring-2 focus-visible:ring-lime-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\">\n    <motion.span layout=\"size\" aria-hidden=\"true\" :style=\"accentStyle\" :transition=\"reduce ? { duration: 0 } : SPRING_LAYOUT\" :class=\"cn('absolute inset-y-1.5 left-1.5 z-10 overflow-hidden bg-lime-300 text-neutral-950', accentClassName)\">\n      <motion.span class=\"absolute inset-0 grid place-items-center\" :animate=\"{ opacity: expanded ? 0 : 1 }\" :transition=\"{ duration: reduce ? 0 : .1, ease: EASE_OUT }\"><DottedChevron class=\"h-7 w-5\" /></motion.span>\n      <span class=\"absolute inset-0 flex items-center justify-around px-3\"><motion.span v-for=\"(alpha, index) in chevrons\" :key=\"index\" class=\"inline-grid place-items-center\" :style=\"{ color: `rgb(10 10 10 / ${alpha})` }\" :animate=\"arrowPose()\" :transition=\"arrowTiming(index)\"><DottedChevron class=\"h-7 w-5\" /></motion.span></span>\n    </motion.span>\n    <motion.span :animate=\"{ opacity: expanded ? 0 : 1, transform: expanded && !reduce ? 'translateX(6px)' : 'translateX(0px)' }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\" :class=\"cn('relative z-0 ml-[76px] mr-5 whitespace-nowrap text-lg font-medium tracking-[-0.02em]', labelClassName)\"><slot /></motion.span>\n  </motion.button>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { useReducedMotion, useMediaQuery } from \"../../../lib/composables\";\nimport DottedChevron from \"./DottedChevron.vue\";\nconst props = defineProps<{ disabled?: boolean; accentClassName?: string; labelClassName?: string }>();\nconst reduce = useReducedMotion();\nconst mouse = ref(false);\nconst focus = ref(false);\nconst hoverSupported = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\nconst expanded = computed(() => !props.disabled && (focus.value || mouse.value && hoverSupported.value));\nconst chevrons = [1, .82, .64, .46, .28];\nconst accentStyle = computed(() => ({ width: expanded.value ? \"calc(100% - 12px)\" : \"52px\", borderRadius: \"16px\" }));\nfunction arrowPose() { return { opacity: expanded.value ? 1 : 0, transform: expanded.value && !reduce.value ? \"translateX(0px)\" : \"translateX(-6px)\" }; }\nfunction arrowTiming(index: number) { return { duration: reduce.value ? 0 : .18, delay: expanded.value && !reduce.value ? .04 + index * .025 : 0, ease: EASE_OUT }; }\n</script>\n<template>\n  <motion.button type=\"button\" :disabled=\"disabled\" @mouseenter=\"mouse = true\" @mouseleave=\"mouse = false\" @focus=\"focus = true\" @blur=\"focus = false\"\n    :while-press=\"reduce || disabled ? undefined : { scale: .97 }\" :transition=\"SPRING_PRESS\"\n    class=\"relative inline-flex h-16 min-w-72 items-center overflow-hidden rounded-[22px] bg-neutral-950 p-1.5 text-white select-none outline-none focus-visible:ring-2 focus-visible:ring-lime-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\">\n    <motion.span layout=\"size\" aria-hidden=\"true\" :style=\"accentStyle\" :transition=\"reduce ? { duration: 0 } : SPRING_LAYOUT\" :class=\"cn('absolute inset-y-1.5 left-1.5 z-10 overflow-hidden bg-lime-300 text-neutral-950', accentClassName)\">\n      <motion.span class=\"absolute inset-0 grid place-items-center\" :animate=\"{ opacity: expanded ? 0 : 1 }\" :transition=\"{ duration: reduce ? 0 : .1, ease: EASE_OUT }\"><DottedChevron class=\"h-7 w-5\" /></motion.span>\n      <span class=\"absolute inset-0 flex items-center justify-around px-3\"><motion.span v-for=\"(alpha, index) in chevrons\" :key=\"index\" class=\"inline-grid place-items-center\" :style=\"{ color: `rgb(10 10 10 / ${alpha})` }\" :animate=\"arrowPose()\" :transition=\"arrowTiming(index)\"><DottedChevron class=\"h-7 w-5\" /></motion.span></span>\n    </motion.span>\n    <motion.span :animate=\"{ opacity: expanded ? 0 : 1, transform: expanded && !reduce ? 'translateX(6px)' : 'translateX(0px)' }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\" :class=\"cn('relative z-0 ml-[76px] mr-5 whitespace-nowrap text-lg font-medium tracking-[-0.02em]', labelClassName)\"><slot /></motion.span>\n  </motion.button>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, Text, useSlots, watch, type Component, type VNodeChild } from \"vue\";\nimport { motion } from \"motion-v\";\nimport RenderContent from \"../../../lib/RenderContent\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nconst props = withDefaults(defineProps<{ type?: \"vertical\" | \"horizontal\"; holdingLabel?: VNodeChild | Component; completeLabel?: VNodeChild | Component; holdDuration?: number; disabled?: boolean; fillClassName?: string; labelClassName?: string }>(), { type: \"vertical\", holdingLabel: \"Keep holding\", completeLabel: \"Done\", holdDuration: 1600 });\nconst emit = defineEmits([\"holdComplete\"]);\nconst slots = useSlots();\nconst reduce = useReducedMotion();\nconst phase = ref<\"idle\" | \"holding\" | \"complete\">(\"idle\");\nconst filling = computed(() => phase.value !== \"idle\");\nlet capture: { element: HTMLElement; pointer: number } | undefined;\nfunction accessibleLabel() { const nodes = slots.default?.() ?? []; return nodes.length === 1 && nodes[0].type === Text ? String(nodes[0].children) : undefined; }\nfunction release() { const held = capture; capture = undefined; if (!held) return; try { if (held.element.hasPointerCapture(held.pointer)) held.element.releasePointerCapture(held.pointer); } catch {} }\nfunction reset() { phase.value = \"idle\"; release(); }\nfunction begin() { if (props.disabled || phase.value === \"holding\") return false; phase.value = \"holding\"; return true; }\nfunction finish() { if (phase.value !== \"holding\" || props.disabled) return; phase.value = \"complete\"; emit(\"holdComplete\"); }\nfunction pointerDown(event: PointerEvent) { if (event.defaultPrevented || event.button !== 0 || capture || !begin()) return; const element = event.currentTarget as HTMLElement; capture = { element, pointer: event.pointerId }; try { element.setPointerCapture(event.pointerId); } catch {} }\nfunction pointerMove(event: PointerEvent) { if (!capture || capture.pointer !== event.pointerId) return; const b = capture.element.getBoundingClientRect(); if (event.clientX < b.left || event.clientX > b.right || event.clientY < b.top || event.clientY > b.bottom) reset(); }\nfunction pointerUp(event: PointerEvent) { if (!capture || capture.pointer === event.pointerId) reset(); }\nfunction key(event: KeyboardEvent, down: boolean) { if (event.key !== \" \" && event.key !== \"Enter\") return; event.preventDefault(); if (down) { if (!event.repeat) begin(); } else reset(); }\nconst fillPose = computed(() => reduce.value ? { opacity: filling.value ? 1 : 0, transform: \"none\" } : { opacity: 1, transform: props.type === \"horizontal\" ? `translateX(${filling.value ? 0 : -100}%)` : `translateY(${filling.value ? 0 : 115}%)` });\nconst fillTiming = computed(() => filling.value ? { duration: props.holdDuration / 1000, ease: \"linear\" as const } : { duration: reduce.value ? .15 : .24, ease: EASE_OUT });\nconst wave = computed(() => props.type === \"horizontal\" ? { viewBox: \"0 0 24 240\", path: \"M0 0h12C2 20 2 40 12 60s10 40 0 60-10 40 0 60 10 40 0 60H0Z\", class: \"absolute -right-5 top-0 h-[200%] w-6 text-sky-400\", transform: phase.value === \"holding\" ? \"translateY(-50%)\" : \"translateY(0%)\" } : { viewBox: \"0 0 240 24\", path: \"M0 12C20 2 40 2 60 12s40 10 60 0 40-10 60 0 40 10 60 0v12H0Z\", class: \"absolute -top-5 left-0 h-6 w-[200%] text-sky-400\", transform: phase.value === \"holding\" ? \"translateX(-50%)\" : \"translateX(0%)\" });\nwatch(() => props.disabled, value => { if (value) reset(); });\nonBeforeUnmount(reset);\n</script>\n<template>\n  <motion.button type=\"button\" :disabled=\"disabled\" :aria-label=\"($attrs['aria-label'] as string) ?? accessibleLabel()\" @pointerdown=\"pointerDown\" @pointermove=\"pointerMove\" @pointerup=\"pointerUp\" @pointercancel=\"pointerUp\" @pointerleave=\"$event.pointerType !== 'touch' && reset()\" @keydown=\"key($event, true)\" @keyup=\"key($event, false)\" @blur=\"reset\" @contextmenu.prevent :while-press=\"reduce || disabled ? undefined : { scale: .98 }\" :transition=\"SPRING_PRESS\" class=\"relative inline-grid h-16 min-w-72 touch-none select-none [-webkit-touch-callout:none] place-items-center overflow-hidden rounded-[var(--hold-radius)] bg-primary px-8 text-primary-foreground [--hold-radius:22px] outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\">\n    <span aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 [clip-path:inset(0_round_var(--hold-radius))]\">\n      <motion.span :initial=\"false\" :animate=\"fillPose\" :transition=\"fillTiming\" @animation-complete=\"finish\" :class=\"cn('absolute inset-0 bg-sky-400 will-change-[opacity,transform]', fillClassName)\">\n        <motion.svg v-if=\"!reduce\" :viewBox=\"wave.viewBox\" preserveAspectRatio=\"none\" :class=\"wave.class\" :animate=\"{ transform: wave.transform }\" :transition=\"{ duration: 1.1, ease: 'linear', repeat: phase === 'holding' ? Infinity : 0 }\"><path :d=\"wave.path\" fill=\"currentColor\" /></motion.svg>\n      </motion.span>\n    </span>\n    <span :class=\"cn('relative z-10 grid place-items-center text-base font-medium tracking-[-.01em]', labelClassName)\">\n      <motion.span class=\"col-start-1 row-start-1\" :animate=\"{ opacity: filling ? 0 : 1 }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\"><slot /></motion.span>\n      <motion.span class=\"col-start-1 row-start-1\" :aria-hidden=\"phase !== 'holding'\" :animate=\"{ opacity: phase === 'holding' ? 1 : 0 }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\"><slot name=\"holdingLabel\"><RenderContent :node=\"holdingLabel\" /></slot></motion.span>\n      <motion.span class=\"col-start-1 row-start-1\" :aria-hidden=\"phase !== 'complete'\" :animate=\"{ opacity: phase === 'complete' ? 1 : 0 }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\"><slot name=\"completeLabel\"><RenderContent :node=\"completeLabel\" /></slot></motion.span>\n    </span>\n  </motion.button>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, Text, useSlots, watch, type Component, type VNodeChild } from \"vue\";\nimport { motion } from \"motion-v\";\nimport RenderContent from \"../../../lib/RenderContent\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nconst props = withDefaults(defineProps<{ type?: \"vertical\" | \"horizontal\"; holdingLabel?: VNodeChild | Component; completeLabel?: VNodeChild | Component; holdDuration?: number; disabled?: boolean; fillClassName?: string; labelClassName?: string }>(), { type: \"vertical\", holdingLabel: \"Keep holding\", completeLabel: \"Done\", holdDuration: 1600 });\nconst emit = defineEmits([\"holdComplete\"]);\nconst slots = useSlots();\nconst reduce = useReducedMotion();\nconst phase = ref<\"idle\" | \"holding\" | \"complete\">(\"idle\");\nconst filling = computed(() => phase.value !== \"idle\");\nlet capture: { element: HTMLElement; pointer: number } | undefined;\nfunction accessibleLabel() { const nodes = slots.default?.() ?? []; return nodes.length === 1 && nodes[0].type === Text ? String(nodes[0].children) : undefined; }\nfunction release() { const held = capture; capture = undefined; if (!held) return; try { if (held.element.hasPointerCapture(held.pointer)) held.element.releasePointerCapture(held.pointer); } catch {} }\nfunction reset() { phase.value = \"idle\"; release(); }\nfunction begin() { if (props.disabled || phase.value === \"holding\") return false; phase.value = \"holding\"; return true; }\nfunction finish() { if (phase.value !== \"holding\" || props.disabled) return; phase.value = \"complete\"; emit(\"holdComplete\"); }\nfunction pointerDown(event: PointerEvent) { if (event.defaultPrevented || event.button !== 0 || capture || !begin()) return; const element = event.currentTarget as HTMLElement; capture = { element, pointer: event.pointerId }; try { element.setPointerCapture(event.pointerId); } catch {} }\nfunction pointerMove(event: PointerEvent) { if (!capture || capture.pointer !== event.pointerId) return; const b = capture.element.getBoundingClientRect(); if (event.clientX < b.left || event.clientX > b.right || event.clientY < b.top || event.clientY > b.bottom) reset(); }\nfunction pointerUp(event: PointerEvent) { if (!capture || capture.pointer === event.pointerId) reset(); }\nfunction key(event: KeyboardEvent, down: boolean) { if (event.key !== \" \" && event.key !== \"Enter\") return; event.preventDefault(); if (down) { if (!event.repeat) begin(); } else reset(); }\nconst fillPose = computed(() => reduce.value ? { opacity: filling.value ? 1 : 0, transform: \"none\" } : { opacity: 1, transform: props.type === \"horizontal\" ? `translateX(${filling.value ? 0 : -100}%)` : `translateY(${filling.value ? 0 : 115}%)` });\nconst fillTiming = computed(() => filling.value ? { duration: props.holdDuration / 1000, ease: \"linear\" as const } : { duration: reduce.value ? .15 : .24, ease: EASE_OUT });\nconst wave = computed(() => props.type === \"horizontal\" ? { viewBox: \"0 0 24 240\", path: \"M0 0h12C2 20 2 40 12 60s10 40 0 60-10 40 0 60 10 40 0 60H0Z\", class: \"absolute -right-5 top-0 h-[200%] w-6 text-sky-400\", transform: phase.value === \"holding\" ? \"translateY(-50%)\" : \"translateY(0%)\" } : { viewBox: \"0 0 240 24\", path: \"M0 12C20 2 40 2 60 12s40 10 60 0 40-10 60 0 40 10 60 0v12H0Z\", class: \"absolute -top-5 left-0 h-6 w-[200%] text-sky-400\", transform: phase.value === \"holding\" ? \"translateX(-50%)\" : \"translateX(0%)\" });\nwatch(() => props.disabled, value => { if (value) reset(); });\nonBeforeUnmount(reset);\n</script>\n<template>\n  <motion.button type=\"button\" :disabled=\"disabled\" :aria-label=\"($attrs['aria-label'] as string) ?? accessibleLabel()\" @pointerdown=\"pointerDown\" @pointermove=\"pointerMove\" @pointerup=\"pointerUp\" @pointercancel=\"pointerUp\" @pointerleave=\"$event.pointerType !== 'touch' && reset()\" @keydown=\"key($event, true)\" @keyup=\"key($event, false)\" @blur=\"reset\" @contextmenu.prevent :while-press=\"reduce || disabled ? undefined : { scale: .98 }\" :transition=\"SPRING_PRESS\" class=\"relative inline-grid h-16 min-w-72 touch-none select-none [-webkit-touch-callout:none] place-items-center overflow-hidden rounded-[var(--hold-radius)] bg-primary px-8 text-primary-foreground [--hold-radius:22px] outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\">\n    <span aria-hidden=\"true\" class=\"pointer-events-none absolute inset-0 [clip-path:inset(0_round_var(--hold-radius))]\">\n      <motion.span :initial=\"false\" :animate=\"fillPose\" :transition=\"fillTiming\" @animation-complete=\"finish\" :class=\"cn('absolute inset-0 bg-sky-400 will-change-[opacity,transform]', fillClassName)\">\n        <motion.svg v-if=\"!reduce\" :viewBox=\"wave.viewBox\" preserveAspectRatio=\"none\" :class=\"wave.class\" :animate=\"{ transform: wave.transform }\" :transition=\"{ duration: 1.1, ease: 'linear', repeat: phase === 'holding' ? Infinity : 0 }\"><path :d=\"wave.path\" fill=\"currentColor\" /></motion.svg>\n      </motion.span>\n    </span>\n    <span :class=\"cn('relative z-10 grid place-items-center text-base font-medium tracking-[-.01em]', labelClassName)\">\n      <motion.span class=\"col-start-1 row-start-1\" :animate=\"{ opacity: filling ? 0 : 1 }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\"><slot /></motion.span>\n      <motion.span class=\"col-start-1 row-start-1\" :aria-hidden=\"phase !== 'holding'\" :animate=\"{ opacity: phase === 'holding' ? 1 : 0 }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\"><slot name=\"holdingLabel\"><RenderContent :node=\"holdingLabel\" /></slot></motion.span>\n      <motion.span class=\"col-start-1 row-start-1\" :aria-hidden=\"phase !== 'complete'\" :animate=\"{ opacity: phase === 'complete' ? 1 : 0 }\" :transition=\"{ duration: reduce ? 0 : .12, ease: EASE_OUT }\"><slot name=\"completeLabel\"><RenderContent :node=\"completeLabel\" /></slot></motion.span>\n    </span>\n  </motion.button>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, Text, useSlots, watch, type Component, type VNodeChild } from \"vue\";\nimport { animate, motion, useMotionValue, useTransform } from \"motion-v\";\nimport { useReducedMotion, resolveElement } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport RenderContent from \"../../../lib/RenderContent\";\nconst props = withDefaults(defineProps<{ completeLabel?: VNodeChild | Component; threshold?: number; resetDelay?: number; thumbClassName?: string; fillClassName?: string; disabled?: boolean }>(), { completeLabel: \"Complete\", threshold: .82, resetDelay: 1200 });\nconst emit = defineEmits([\"complete\"]);\nconst reduce = useReducedMotion();\nconst slots = useSlots();\nconst track = ref<HTMLElement | null>(null);\nconst thumb = ref<HTMLElement | null>(null);\nconst extent = ref(0);\nconst completed = ref(false);\nconst x = useMotionValue(0);\nconst progress = useTransform(x, value => value / Math.max(1, extent.value));\nconst labelOpacity = useTransform(progress, [0, .35, .65], [1, .75, 0]);\nconst arrowPath = useTransform(progress, [0, .5, 1], [\"M 8 5 L 15 12 L 8 19\", \"M 7 8 L 12 14 L 17 10\", \"M 5 12 L 10 17 L 19 7\"]);\nlet observer: ResizeObserver | undefined;\nlet resetTimer: ReturnType<typeof setTimeout> | undefined;\nlet animation: ReturnType<typeof animate> | undefined;\nfunction label() { const nodes = slots.default?.() ?? []; return nodes.length === 1 && nodes[0].type === Text ? String(nodes[0].children) : \"Slide action\"; }\nfunction settle(position: number) { animation?.stop(); if (reduce.value) x.set(position); else animation = animate(x, position, SPRING_LAYOUT); }\nfunction reset() { completed.value = false; settle(0); }\nfunction complete() { if (completed.value || props.disabled || extent.value <= 0) return; completed.value = true; settle(extent.value); emit(\"complete\"); clearTimeout(resetTimer); resetTimer = setTimeout(reset, props.resetDelay); }\nfunction dragEnd() { if (x.get() >= extent.value * props.threshold) complete(); else settle(0); }\nfunction key(event: KeyboardEvent) { if (event.key === \" \" || event.key === \"Enter\") { event.preventDefault(); complete(); } }\nfunction measure() { extent.value = Math.max(0, (track.value?.clientWidth ?? 0) - (thumb.value?.clientWidth ?? 0) - 8); if (completed.value) settle(extent.value); }\nwatch(extent, () => progress.set(x.get() / Math.max(1, extent.value)));\nwatch(() => props.disabled, disabled => { if (disabled && !completed.value) settle(0); });\nonMounted(() => { measure(); if (typeof ResizeObserver !== \"undefined\") { observer = new ResizeObserver(measure); if (track.value) observer.observe(track.value); if (thumb.value) observer.observe(thumb.value); } });\nonBeforeUnmount(() => { observer?.disconnect(); clearTimeout(resetTimer); animation?.stop(); });\n</script>\n<template>\n  <div ref=\"track\" class=\"relative h-16 w-72 overflow-hidden rounded-[22px] bg-muted p-1 [-webkit-touch-callout:none] pointer-coarse:select-none ring-1 ring-primary/10\">\n    <motion.span aria-hidden=\"true\" :style=\"{ scaleX: progress }\" :class=\"cn('absolute inset-0 origin-left bg-primary will-change-transform', fillClassName)\" />\n    <motion.span aria-hidden=\"true\" :style=\"{ opacity: labelOpacity }\" class=\"pointer-events-none absolute inset-0 grid place-items-center pl-10 text-sm font-medium text-foreground\"><slot /></motion.span>\n    <motion.span aria-live=\"polite\" :animate=\"{ opacity: completed ? 1 : 0 }\" :transition=\"{ duration: reduce ? 0 : .15, ease: EASE_OUT }\" class=\"pointer-events-none absolute inset-0 grid place-items-center text-sm font-medium text-primary-foreground\"><template v-if=\"completed\"><slot name=\"completeLabel\"><RenderContent :node=\"completeLabel\" /></slot></template></motion.span>\n    <motion.button :ref=\"element => thumb = resolveElement<HTMLElement>(element)\" type=\"button\" :aria-label=\"($attrs['aria-label'] as string) ?? label()\" :disabled=\"disabled\" :drag=\"completed || disabled ? false : 'x'\" :drag-constraints=\"{ left: 0, right: extent }\" :drag-elastic=\"0\" :drag-momentum=\"false\" :style=\"{ x }\" @drag-end=\"dragEnd\" @keydown=\"key\" :while-press=\"reduce || completed ? undefined : { scale: .94 }\" :transition=\"SPRING_PRESS\" :class=\"cn('relative z-10 grid size-14 touch-none select-none [-webkit-touch-callout:none] cursor-grab place-items-center rounded-[18px] bg-primary text-primary-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background', completed && 'cursor-default bg-background text-foreground', thumbClassName)\"><motion.svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"size-5\"><motion.path :d=\"arrowPath\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" /></motion.svg></motion.button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, Text, useSlots, watch, type Component, type VNodeChild } from \"vue\";\nimport { animate, motion, useMotionValue, useTransform } from \"motion-v\";\nimport { useReducedMotion, resolveElement } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport RenderContent from \"../../../lib/RenderContent\";\nconst props = withDefaults(defineProps<{ completeLabel?: VNodeChild | Component; threshold?: number; resetDelay?: number; thumbClassName?: string; fillClassName?: string; disabled?: boolean }>(), { completeLabel: \"Complete\", threshold: .82, resetDelay: 1200 });\nconst emit = defineEmits([\"complete\"]);\nconst reduce = useReducedMotion();\nconst slots = useSlots();\nconst track = ref<HTMLElement | null>(null);\nconst thumb = ref<HTMLElement | null>(null);\nconst extent = ref(0);\nconst completed = ref(false);\nconst x = useMotionValue(0);\nconst progress = useTransform(x, value => value / Math.max(1, extent.value));\nconst labelOpacity = useTransform(progress, [0, .35, .65], [1, .75, 0]);\nconst arrowPath = useTransform(progress, [0, .5, 1], [\"M 8 5 L 15 12 L 8 19\", \"M 7 8 L 12 14 L 17 10\", \"M 5 12 L 10 17 L 19 7\"]);\nlet observer: ResizeObserver | undefined;\nlet resetTimer: ReturnType<typeof setTimeout> | undefined;\nlet animation: ReturnType<typeof animate> | undefined;\nfunction label() { const nodes = slots.default?.() ?? []; return nodes.length === 1 && nodes[0].type === Text ? String(nodes[0].children) : \"Slide action\"; }\nfunction settle(position: number) { animation?.stop(); if (reduce.value) x.set(position); else animation = animate(x, position, SPRING_LAYOUT); }\nfunction reset() { completed.value = false; settle(0); }\nfunction complete() { if (completed.value || props.disabled || extent.value <= 0) return; completed.value = true; settle(extent.value); emit(\"complete\"); clearTimeout(resetTimer); resetTimer = setTimeout(reset, props.resetDelay); }\nfunction dragEnd() { if (x.get() >= extent.value * props.threshold) complete(); else settle(0); }\nfunction key(event: KeyboardEvent) { if (event.key === \" \" || event.key === \"Enter\") { event.preventDefault(); complete(); } }\nfunction measure() { extent.value = Math.max(0, (track.value?.clientWidth ?? 0) - (thumb.value?.clientWidth ?? 0) - 8); if (completed.value) settle(extent.value); }\nwatch(extent, () => progress.set(x.get() / Math.max(1, extent.value)));\nwatch(() => props.disabled, disabled => { if (disabled && !completed.value) settle(0); });\nonMounted(() => { measure(); if (typeof ResizeObserver !== \"undefined\") { observer = new ResizeObserver(measure); if (track.value) observer.observe(track.value); if (thumb.value) observer.observe(thumb.value); } });\nonBeforeUnmount(() => { observer?.disconnect(); clearTimeout(resetTimer); animation?.stop(); });\n</script>\n<template>\n  <div ref=\"track\" class=\"relative h-16 w-72 overflow-hidden rounded-[22px] bg-muted p-1 [-webkit-touch-callout:none] pointer-coarse:select-none ring-1 ring-primary/10\">\n    <motion.span aria-hidden=\"true\" :style=\"{ scaleX: progress }\" :class=\"cn('absolute inset-0 origin-left bg-primary will-change-transform', fillClassName)\" />\n    <motion.span aria-hidden=\"true\" :style=\"{ opacity: labelOpacity }\" class=\"pointer-events-none absolute inset-0 grid place-items-center pl-10 text-sm font-medium text-foreground\"><slot /></motion.span>\n    <motion.span aria-live=\"polite\" :animate=\"{ opacity: completed ? 1 : 0 }\" :transition=\"{ duration: reduce ? 0 : .15, ease: EASE_OUT }\" class=\"pointer-events-none absolute inset-0 grid place-items-center text-sm font-medium text-primary-foreground\"><template v-if=\"completed\"><slot name=\"completeLabel\"><RenderContent :node=\"completeLabel\" /></slot></template></motion.span>\n    <motion.button :ref=\"element => thumb = resolveElement<HTMLElement>(element)\" type=\"button\" :aria-label=\"($attrs['aria-label'] as string) ?? label()\" :disabled=\"disabled\" :drag=\"completed || disabled ? false : 'x'\" :drag-constraints=\"{ left: 0, right: extent }\" :drag-elastic=\"0\" :drag-momentum=\"false\" :style=\"{ x }\" @drag-end=\"dragEnd\" @keydown=\"key\" :while-press=\"reduce || completed ? undefined : { scale: .94 }\" :transition=\"SPRING_PRESS\" :class=\"cn('relative z-10 grid size-14 touch-none select-none [-webkit-touch-callout:none] cursor-grab place-items-center rounded-[18px] bg-primary text-primary-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background', completed && 'cursor-default bg-background text-foreground', thumbClassName)\"><motion.svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"size-5\"><motion.path :d=\"arrowPath\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" /></motion.svg></motion.button>\n  </div>\n</template>\n"],"mappings":"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"}