@orvui/vue 0.0.0-stage → 0.1.0

package/dist/range-slider-DNGMNvLt.js

@@ -0,0 +1,780 @@
+import { s as e, t } from "./composables-BJ1sih_H.js";
+import { n } from "./state-DWNDjqAL.js";
+import { a as r, c as i, l as a } from "./ease-rIvCM4O3.js";
+import { t as o } from "./utils-DIrLOK2M.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, watch as E, withCtx as D } from "vue";
+import { AnimatePresence as O, animate as k, motion as A, useMotionValue as j, useMotionValueEvent as M, useSpring as N, useTransform as P, useVelocity as F } from "motion-v";
+// src/motion/range-slider/src/useSlider.ts
+var I = (e, t, n) => Math.min(n, Math.max(t, e)), L = (e) => Number(e.toFixed(6));
+function R(e, t, n, r) {
+	if (n <= t) return t;
+	if (!(r > 0)) return I(e, t, n);
+	let i = Math.floor(L((n - t) / r)), a = L(t + Math.min(i, Math.max(0, Math.round((e - t) / r))) * r);
+	return L(Math.abs(n - e) <= Math.abs(a - e) ? n : a);
+}
+function z(e, r) {
+	let i = n(e, r, "modelValue", e.defaultValue ?? 0), a = c(() => e.min ?? 0), o = c(() => Math.max(a.value, e.max ?? 100)), s = c(() => e.step && e.step > 0 ? e.step : 1), l = c(() => I(i.value, a.value, o.value)), u = c(() => o.value === a.value ? 0 : 100 * (l.value - a.value) / (o.value - a.value)), d = S(!1), f = S(null), p = S(null), m = null;
+	function h(t) {
+		e.disabled || (i.value = R(t, a.value, o.value, s.value));
+	}
+	function g(e) {
+		let n = t(f.value)?.getBoundingClientRect();
+		if (!n?.width) return;
+		let r = I((e.clientX - n.left) / n.width, 0, 1);
+		h(a.value + r * (o.value - a.value));
+	}
+	function _() {
+		let e = m;
+		if (m = null, e) try {
+			e.element.releasePointerCapture(e.pointer);
+		} catch {}
+	}
+	function v() {
+		d.value && (d.value = !1, _(), r("valueCommit", l.value));
+	}
+	function b(n) {
+		if (e.disabled || n.button !== 0 || d.value) return;
+		let r = n.currentTarget;
+		m = {
+			element: r,
+			pointer: n.pointerId
+		}, d.value = !0;
+		try {
+			r.setPointerCapture(n.pointerId);
+		} catch {}
+		t(p.value)?.focus({ preventScroll: !0 }), g(n);
+	}
+	function x(t) {
+		d.value && !e.disabled && t.pointerId === m?.pointer && g(t);
+	}
+	function C(e) {
+		m && e.pointerId !== m.pointer || v();
+	}
+	function w(t) {
+		if (e.disabled) return;
+		let n;
+		switch (t.key) {
+			case "Home":
+				n = a.value;
+				break;
+			case "End":
+				n = o.value;
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				n = l.value + s.value;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				n = l.value - s.value;
+				break;
+			case "PageUp":
+				n = l.value + 10 * s.value;
+				break;
+			case "PageDown":
+				n = l.value - 10 * s.value;
+				break;
+			default: return;
+		}
+		t.preventDefault(), h(n), r("valueCommit", l.value);
+	}
+	return E(() => e.disabled, (e) => {
+		e && (d.value = !1, _());
+	}), y(() => {
+		d.value = !1, _();
+	}), {
+		value: i,
+		current: l,
+		percent: u,
+		dragging: d,
+		min: a,
+		max: o,
+		step: s,
+		commit: h,
+		trackRef: f,
+		sliderRef: p,
+		trackProps: {
+			onPointerdown: b,
+			onPointermove: x,
+			onPointerup: C,
+			onPointercancel: C,
+			onLostpointercapture: C
+		},
+		sliderProps: c(() => ({
+			role: "slider",
+			tabindex: e.disabled ? -1 : 0,
+			"aria-label": e.ariaLabel,
+			"aria-valuemin": a.value,
+			"aria-valuemax": o.value,
+			"aria-valuenow": l.value,
+			"aria-valuetext": e.formatValueText?.(l.value),
+			"aria-disabled": e.disabled || void 0,
+			onKeydown: w
+		}))
+	};
+}
+// src/motion/range-slider/src/visual-state.ts
+function B(e, t) {
+	let n = j(e.value), i = N(n, r), a = j(e.value);
+	return E(e, (e) => n.set(e)), M(n, "change", (e) => {
+		t.value && a.set(e);
+	}), M(i, "change", (e) => {
+		t.value || a.set(e);
+	}), E(t, (e) => a.jump(e ? n.get() : i.get())), {
+		target: n,
+		spring: i,
+		position: a
+	};
+}
+function V(e, t) {
+	let n;
+	b(() => {
+		if (t(), typeof ResizeObserver < "u") {
+			n = new ResizeObserver(t);
+			for (let t of e()) t && n.observe(t);
+		}
+	}), y(() => n?.disconnect());
+}
+// src/motion/range-slider/src/RangeSlider.vue?vue&type=script&setup=true&lang.ts
+var H = {
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-x-[2px] inset-y-0 overflow-hidden rounded-lg"
+}, U = { class: "pointer-events-none absolute inset-x-[10px] inset-y-0" }, W = [
+	"name",
+	"value",
+	"disabled"
+], G = /* @__PURE__ */ h({
+	__name: "RangeSlider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		min: {},
+		max: {},
+		step: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		formatValueText: {},
+		showTicks: {
+			type: Boolean,
+			default: !0
+		},
+		name: {}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"valueCommit"
+	],
+	setup(n, { emit: r }) {
+		let i = n, a = z(i, r), l = e(), { position: p } = B(a.percent, l), h = j(292), _ = P(() => 8 + Math.max(0, h.get() - 20) * p.get() / 100), y = P(p, (e) => e >= 100 ? "0%" : `calc(${e - 100}% + ${14 - .16 * e}px)`), b = c(() => {
+			let e = Math.floor(Number(((a.max.value - a.min.value) / a.step.value).toFixed(6)));
+			return i.showTicks && e > 0 && e <= 50 ? Array.from({ length: e + 1 }, (e, t) => Number((a.min.value + t * a.step.value).toFixed(6))) : [];
+		});
+		return V(() => [a.trackRef.value], () => {
+			let e = a.trackRef.value?.getBoundingClientRect().width;
+			e && e > 0 && h.set(e);
+		}), (e, r) => (x(), d("div", g({ ref: (e) => T(a).trackRef.value = T(t)(e) }, T(a).trackProps, { class: T(o)("relative flex h-10 w-full touch-none items-center overflow-hidden rounded-lg bg-muted select-none [-webkit-touch-callout:none]", n.disabled ? "pointer-events-none opacity-50" : "cursor-grab active:cursor-grabbing") }), [
+			f("div", H, [m(T(A).div, {
+				class: "absolute inset-0 rounded-lg bg-foreground/15",
+				style: v({ x: T(y) })
+			}, null, 8, ["style"])]),
+			f("div", U, [(x(!0), d(s, null, C(b.value, (e) => (x(), d("span", {
+				key: e,
+				class: "absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/35",
+				style: v({ left: `${(e - T(a).min.value) / (T(a).max.value - T(a).min.value) * 100}%` })
+			}, null, 4))), 128))]),
+			m(T(A).div, g({ ref: (e) => T(a).sliderRef.value = T(t)(e) }, T(a).sliderProps.value, {
+				animate: T(l) ? void 0 : { scaleY: T(a).dragging.value ? 1.35 : 1 },
+				transition: {
+					type: "spring",
+					stiffness: 500,
+					damping: 14,
+					mass: .7
+				},
+				class: "absolute left-0 top-1/2 h-6 w-1 rounded-full bg-foreground outline-none ring-inset ring-foreground/30 focus-visible:ring-4",
+				style: {
+					x: T(_),
+					y: "-50%"
+				}
+			}), null, 16, ["animate", "style"]),
+			n.name ? (x(), d("input", {
+				key: 0,
+				type: "hidden",
+				name: n.name,
+				value: T(a).current.value,
+				disabled: n.disabled
+			}, null, 8, W)) : u("", !0)
+		], 16));
+	}
+}), K = /* @__PURE__ */ h({
+	__name: "WaveSlider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		min: {},
+		max: {},
+		step: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		formatValueText: {},
+		bars: { default: 32 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"valueCommit"
+	],
+	setup(t, { emit: n }) {
+		let r = t, { percent: i, dragging: a, trackRef: u, sliderRef: p, trackProps: m, sliderProps: h } = z(r, n), v = e(), y = c(() => {
+			let e = i.value / 100 * (r.bars - 1);
+			return Array.from({ length: r.bars }, (t, n) => {
+				let r = Math.abs(n - e);
+				return {
+					index: n,
+					distance: r,
+					height: Math.exp(-.5 * (r / 2.6) ** 2),
+					filled: n <= Math.round(e)
+				};
+			});
+		});
+		return (e, n) => (x(), d("div", g({
+			ref_key: "trackRef",
+			ref: u
+		}, T(m), { class: T(o)("relative flex h-20 w-full touch-none items-center justify-between gap-1 select-none", t.disabled ? "pointer-events-none opacity-50" : "cursor-grab active:cursor-grabbing") }), [(x(!0), d(s, null, C(y.value, (e) => (x(), l(T(A).span, {
+			key: e.index,
+			class: _(T(o)("h-14 flex-1 origin-center rounded-full", e.filled ? "bg-foreground" : "bg-foreground/45")),
+			animate: { scaleY: T(v) ? .4 : .22 + e.height * (T(a) ? .78 : .6) },
+			transition: T(v) ? { duration: 0 } : {
+				type: "spring",
+				stiffness: 420,
+				damping: 20,
+				mass: .5,
+				delay: Math.min(e.distance * .012, .12)
+			}
+		}, null, 8, [
+			"class",
+			"animate",
+			"transition"
+		]))), 128)), f("button", g({
+			ref_key: "sliderRef",
+			ref: p,
+			type: "button"
+		}, T(h), { class: "absolute inset-0 touch-none rounded-xl outline-none ring-foreground/30 focus-visible:ring-4" }), null, 16)], 16));
+	}
+}), q = { class: "pointer-events-none absolute inset-0 flex items-center justify-between px-5 text-sm font-medium text-foreground" }, J = { class: "truncate" }, Y = { class: "tabular-nums" }, X = { class: "pointer-events-none absolute inset-0 flex items-center justify-between px-5 text-sm font-medium text-background" }, Z = { class: "truncate" }, Q = { class: "tabular-nums" }, $ = /* @__PURE__ */ h({
+	__name: "FluidSlider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		min: {},
+		max: {},
+		step: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		formatValueText: {},
+		label: {},
+		format: {
+			type: Function,
+			default: (e) => `${e}%`
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"valueCommit"
+	],
+	setup(t, { emit: n }) {
+		let { current: r, percent: i, dragging: s, trackRef: c, sliderRef: l, trackProps: u, sliderProps: p } = z(t, n), h = e(), { position: _ } = B(i, h), y = P(_, (e) => `inset(0 ${100 - e}% 0 0 round 9999px)`);
+		return (e, n) => (x(), d("div", g({
+			ref_key: "trackRef",
+			ref: c
+		}, T(u), { class: T(o)("relative flex h-12 w-full touch-none overflow-hidden rounded-full bg-muted select-none", t.disabled ? "pointer-events-none opacity-50" : "cursor-grab active:cursor-grabbing") }), [m(T(A).div, {
+			animate: T(h) ? void 0 : { scale: T(s) ? 1.03 : 1 },
+			transition: T(a),
+			class: "absolute inset-0"
+		}, {
+			default: D(() => [f("div", q, [f("span", J, w(t.label), 1), f("span", Y, w(t.format(T(r))), 1)]), m(T(A).div, {
+				class: "absolute inset-0",
+				style: v({ clipPath: T(y) })
+			}, {
+				default: D(() => [n[0] ||= f("div", { class: "absolute inset-0 bg-foreground" }, null, -1), f("div", X, [f("span", Z, w(t.label), 1), f("span", Q, w(t.format(T(r))), 1)])]),
+				_: 1
+			}, 8, ["style"])]),
+			_: 1
+		}, 8, ["animate", "transition"]), f("button", g({
+			ref_key: "sliderRef",
+			ref: l,
+			type: "button"
+		}, T(p), { class: "absolute inset-0 touch-none rounded-full outline-none ring-inset ring-foreground/40 focus-visible:ring-4" }), null, 16)], 16));
+	}
+}), ee = /* @__PURE__ */ h({
+	__name: "BubbleSlider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		min: {},
+		max: {},
+		step: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		formatValueText: { type: Function },
+		format: { type: Function }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"valueCommit"
+	],
+	setup(t, { emit: n }) {
+		let { current: r, percent: s, dragging: c, trackRef: h, sliderRef: y, trackProps: b, sliderProps: S } = z(t, n), C = e(), { spring: E, position: k } = B(s, C), j = P(k, (e) => `${e}%`), M = F(E), I = N(P(M, [
+			-320,
+			0,
+			320
+		], [
+			1,
+			0,
+			-1
+		], { clamp: !0 }), {
+			stiffness: 260,
+			damping: 22,
+			mass: .4
+		}), L = P(I, (e) => e * 16), R = P(I, (e) => 1 + Math.abs(e) * .18), V = P(I, (e) => 1 - Math.abs(e) * .12);
+		return (e, n) => (x(), d("div", { class: _(T(o)("relative flex h-20 w-full items-end px-5 pb-5", t.disabled && "pointer-events-none opacity-50")) }, [f("div", g({
+			ref_key: "trackRef",
+			ref: h
+		}, T(b), { class: "relative h-2 w-full touch-none rounded-full bg-muted cursor-grab active:cursor-grabbing" }), [
+			m(T(A).div, {
+				class: "absolute inset-y-0 left-0 rounded-full bg-foreground",
+				style: v({ width: T(j) })
+			}, null, 8, ["style"]),
+			m(T(A).div, {
+				class: "absolute top-1/2 size-5 rounded-full border-2 border-foreground bg-background shadow-sm",
+				style: v({
+					left: T(j),
+					x: "-50%",
+					y: "-50%"
+				}),
+				animate: T(C) ? void 0 : { scale: T(c) ? 1.25 : 1 },
+				transition: T(a)
+			}, null, 8, [
+				"style",
+				"animate",
+				"transition"
+			]),
+			m(T(A).div, {
+				class: "pointer-events-none absolute bottom-6",
+				style: v({
+					left: T(j),
+					x: "-50%"
+				})
+			}, {
+				default: D(() => [m(T(O), null, {
+					default: D(() => [T(c) ? (x(), l(T(A).div, {
+						key: 0,
+						initial: T(C) ? { opacity: 0 } : {
+							opacity: 0,
+							scale: .4,
+							y: 10
+						},
+						animate: {
+							opacity: 1,
+							scale: 1,
+							y: 0
+						},
+						exit: T(C) ? { opacity: 0 } : {
+							opacity: 0,
+							scale: .5,
+							y: 8
+						},
+						transition: T(C) ? { duration: .12 } : T(i),
+						style: v(T(C) ? void 0 : {
+							rotate: T(L),
+							scaleX: T(R),
+							scaleY: T(V),
+							originY: 1
+						}),
+						class: "relative rounded-xl bg-foreground px-2.5 py-1 text-sm font-medium tabular-nums text-background shadow-md"
+					}, {
+						default: D(() => [p(w(t.format ? t.format(T(r)) : T(r)), 1), n[0] ||= f("span", { class: "absolute -bottom-1 left-1/2 size-2.5 -translate-x-1/2 rotate-45 rounded-[3px] bg-foreground" }, null, -1)]),
+						_: 1
+					}, 8, [
+						"initial",
+						"exit",
+						"transition",
+						"style"
+					])) : u("", !0)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["style"]),
+			f("button", g({
+				ref_key: "sliderRef",
+				ref: y,
+				type: "button"
+			}, T(S), { class: "absolute -inset-y-5 inset-x-0 touch-none rounded-full outline-none ring-foreground/30 focus-visible:ring-4" }), null, 16)
+		], 16)], 2));
+	}
+}), te = { class: "pointer-events-none flex items-baseline justify-center gap-1 pb-3 pt-1" }, ne = { class: "text-3xl font-semibold tabular-nums text-foreground" }, re = {
+	key: 0,
+	class: "text-sm text-muted-foreground"
+}, ie = { class: "relative h-12 [mask-image:linear-gradient(to_right,transparent,black_18%,black_82%,transparent)]" }, ae = {
+	key: 0,
+	class: "absolute bottom-0 whitespace-nowrap text-[10px] tabular-nums text-muted-foreground"
+}, oe = /* @__PURE__ */ h({
+	__name: "RulerSlider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		min: {},
+		max: {},
+		step: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		formatValueText: {},
+		gap: { default: 14 },
+		majorEvery: { default: 5 },
+		unit: {}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"valueCommit"
+	],
+	setup(t, { emit: n }) {
+		let r = t, i = n, a = c(() => String(r.step ?? 1).split(".")[1]?.length ?? 0), { current: l, min: p, max: h, step: b, commit: S, sliderRef: O, sliderProps: M } = z(new Proxy(r, { get(e, t) {
+			return t === "formatValueText" ? r.formatValueText ?? (r.unit ? (e) => `${e.toFixed(a.value)} ${r.unit}` : void 0) : Reflect.get(e, t);
+		} }), i), N = e(), P = c(() => Number(((h.value - p.value) / b.value).toFixed(6))), F = c(() => P.value * r.gap), I = c(() => {
+			let e = Math.floor(P.value), t = Array.from({ length: Math.min(e + 1, 1e4) }, (e, t) => ({
+				value: Number((p.value + t * b.value).toFixed(6)),
+				major: t % r.majorEvery === 0,
+				offset: t * r.gap
+			}));
+			return P.value > e && t.push({
+				value: h.value,
+				major: !0,
+				offset: F.value
+			}), t;
+		}), L = j(-(l.value - p.value) / b.value * r.gap), B = !1, V = !1, H = 0, U, W = L.on("change", (e) => {
+			B && S(p.value - e / r.gap * b.value);
+		});
+		E([
+			l,
+			p,
+			b,
+			() => r.gap
+		], ([e, t, n, r]) => {
+			B || L.set(-(e - t) / n * r);
+		});
+		function G() {
+			let e = -(R(p.value - L.get() / r.gap * b.value, p.value, h.value, b.value) - p.value) / b.value * r.gap;
+			U?.stop();
+			let t = ++H;
+			N.value ? (L.set(e), B = !1) : U = k(L, e, {
+				type: "spring",
+				stiffness: 500,
+				damping: 40,
+				mass: .6,
+				onComplete: () => {
+					t === H && (B = !1);
+				}
+			});
+		}
+		function K() {
+			++H, B = !0, V = !0, U?.stop();
+		}
+		function q() {
+			V = !1, N.value && G();
+		}
+		function J() {
+			V || G();
+		}
+		function Y(e) {
+			L.stop(), ++H, B = !1, V = !1, M.value.onKeydown(e);
+		}
+		return y(() => {
+			++H, W(), U?.stop();
+		}), (e, n) => (x(), d("div", g({
+			ref_key: "sliderRef",
+			ref: O
+		}, T(M), {
+			onKeydown: Y,
+			class: T(o)("relative w-full touch-none select-none overflow-hidden rounded-2xl outline-none ring-foreground/30 focus-visible:ring-4", t.disabled ? "pointer-events-none opacity-50" : "cursor-grab active:cursor-grabbing")
+		}), [f("div", te, [f("span", ne, w(T(l).toFixed(a.value)), 1), t.unit ? (x(), d("span", re, w(t.unit), 1)) : u("", !0)]), f("div", ie, [m(T(A).div, {
+			drag: !t.disabled && "x",
+			"drag-constraints": {
+				left: -F.value,
+				right: 0
+			},
+			"drag-elastic": .03,
+			"drag-momentum": !T(N),
+			"drag-transition": {
+				power: .22,
+				timeConstant: 320
+			},
+			onDragStart: K,
+			onDragEnd: q,
+			onDragTransitionEnd: J,
+			style: v({
+				x: T(L),
+				marginLeft: `${-t.gap / 2}px`,
+				width: `${F.value + t.gap}px`
+			}),
+			class: "absolute inset-y-0 left-1/2"
+		}, {
+			default: D(() => [(x(!0), d(s, null, C(I.value, (e) => (x(), d("span", {
+				key: e.value,
+				class: "absolute bottom-0 flex -translate-x-1/2 flex-col items-center pb-[18px]",
+				style: v({ left: `${e.offset + t.gap / 2}px` })
+			}, [f("span", { class: _(T(o)("w-px rounded-full", e.major ? "h-7 bg-foreground/70" : "h-3.5 bg-foreground/45")) }, null, 2), e.major ? (x(), d("span", ae, w(e.value), 1)) : u("", !0)], 4))), 128))]),
+			_: 1
+		}, 8, [
+			"drag",
+			"drag-constraints",
+			"drag-momentum",
+			"style"
+		]), n[0] ||= f("div", { class: "pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2" }, [f("span", { class: "block h-9 w-[3px] rounded-full bg-foreground" })], -1)])], 16));
+	}
+});
+// src/motion/range-slider/src/inline-state.ts
+function se(e, t, n) {
+	let i = c(() => (e.step ?? 1).toFixed(6).replace(/0+$/, "").split(".")[1]?.length ?? 0), a = z(new Proxy(e, { get: (e, t) => t === "step" ? 10 ** -i.value : Reflect.get(e, t) }), t), o = S(null), s = S(null), l = S({
+		width: 292,
+		labelWidth: 22,
+		readoutWidth: 24
+	}), u = j(292), d = j(22), f = j(24);
+	V(() => [
+		a.trackRef.value,
+		o.value,
+		s.value
+	], () => {
+		let e = a.trackRef.value;
+		if (!e || !o.value || !s.value) return;
+		let t = e.getBoundingClientRect().width;
+		if (!t) return;
+		let n = {
+			width: t,
+			labelWidth: o.value.getBoundingClientRect().width,
+			readoutWidth: s.value.getBoundingClientRect().width
+		};
+		l.value = n, u.set(n.width), d.set(n.labelWidth), f.set(n.readoutWidth);
+	});
+	let p = c(() => Math.max(8, l.value.width - 12)), m = c(() => {
+		let t = e.step && e.step > 0 ? e.step : 1, n = Array.from(new Set(Array.from({ length: 10 }, (e, n) => R(a.min.value + n / 9 * (a.max.value - a.min.value), a.min.value, a.max.value, t))));
+		return n.map((e, t) => ({
+			value: e,
+			x: n.length === 1 ? 8 : 8 + t / (n.length - 1) * (p.value - 8)
+		}));
+	});
+	function h(e, t, n) {
+		let r = m.value, i = r.findIndex((n) => n[t] >= e), a = r[i < 0 ? r.length - 1 : i], o = r[Math.max(0, i - 1)];
+		return o[t] === a[t] ? a[n] : o[n] + (e - o[t]) / (a[t] - o[t]) * (a[n] - o[n]);
+	}
+	let g = c(() => h(a.current.value, "value", "x")), _ = j(g.value), v = S(!1), b, x = 0, C, w;
+	function T(e) {
+		b?.stop(), n.value ? _.jump(e) : b = k(_, e, {
+			type: "spring",
+			...r
+		});
+	}
+	E(g, (e) => {
+		w || T(e);
+	});
+	let D = P(() => {
+		let e = _.get(), t = u.get();
+		return (e >= Math.max(8, t - 12) ? t - 2 : e + 8) - t + 2;
+	}), O = P(() => {
+		let e = _.get(), t = u.get(), n = (t, n) => Math.max(0, Math.min(1, (e + 4 - t) / 6, (n - e) / 6));
+		return Math.max(n(20, 20 + d.get()), n(t - 20 - f.get(), t - 20));
+	}), A = P(O, (e) => 1 - e), M = P(O, (e) => -e), N = P(O, (e) => e), F = c(() => e.showTicks ? m.value.map((e) => e.x).filter((e) => !(e + 2 >= 20 && e - 2 <= 20 + l.value.labelWidth) && !(e + 2 >= l.value.width - 20 - l.value.readoutWidth && e - 2 <= l.value.width - 20)) : []);
+	function I() {
+		cancelAnimationFrame(x), x = 0, C = void 0;
+	}
+	function L(e) {
+		C = e, !x && (x = requestAnimationFrame(() => {
+			x = 0, C !== void 0 && a.commit(C), C = void 0;
+		}));
+	}
+	function B(t) {
+		if (e.disabled || t.button !== 0 || w) return;
+		let n = t.currentTarget, r = n.getBoundingClientRect();
+		if (!r.width) return;
+		t.preventDefault();
+		let i = t.clientX - r.left, o = _.get();
+		w = {
+			id: t.pointerId,
+			element: n,
+			left: r.left,
+			offset: Math.abs(i - o - 2) <= 12 ? i - o : 2,
+			x: o
+		}, v.value = !0, _.stop(), I();
+		try {
+			n.setPointerCapture(t.pointerId);
+		} catch {}
+		a.sliderRef.value?.focus({ preventScroll: !0 });
+	}
+	function H(t) {
+		if (!w || w.id !== t.pointerId || e.disabled) return;
+		let n = Math.max(8, Math.min(p.value, t.clientX - w.left - w.offset));
+		w.x = n, _.set(n), L(h(n, "x", "value"));
+	}
+	function U() {
+		let e = w;
+		if (w = void 0, e) try {
+			e.element.hasPointerCapture(e.id) && e.element.releasePointerCapture(e.id);
+		} catch {}
+		return e;
+	}
+	function W(n) {
+		if (!w || w.id !== n.pointerId) return;
+		let r = U();
+		if (I(), v.value = !1, !e.disabled && l.value.width > 0) {
+			let i = n.type === "pointerup" ? n.clientX - r.left - r.offset : r.x, o = m.value.reduce((e, t) => Math.abs(t.x - i) < Math.abs(e.x - i) ? t : e);
+			a.commit(o.value), t("valueCommit", o.value), T(e.modelValue === void 0 ? o.x : g.value);
+		} else T(g.value);
+	}
+	function G(n) {
+		if (e.disabled) return;
+		let r = m.value.find((e) => e.value > a.current.value)?.value ?? a.max.value, i = m.value.slice().reverse().find((e) => e.value < a.current.value)?.value ?? a.min.value, o = {
+			ArrowRight: r,
+			ArrowUp: r,
+			ArrowLeft: i,
+			ArrowDown: i,
+			Home: a.min.value,
+			End: a.max.value,
+			PageUp: a.max.value,
+			PageDown: a.min.value
+		};
+		n.key in o && (n.preventDefault(), a.commit(o[n.key]), t("valueCommit", o[n.key]));
+	}
+	return y(() => {
+		U(), b?.stop(), _.stop(), I();
+	}), {
+		...a,
+		labelRef: o,
+		readoutRef: s,
+		dragging: v,
+		handleX: _,
+		fillX: D,
+		stemOpacity: A,
+		capTop: M,
+		capBottom: N,
+		ticks: F,
+		down: B,
+		move: H,
+		end: W,
+		key: G
+	};
+}
+// src/motion/range-slider/src/InlineSlider.vue?vue&type=script&setup=true&lang.ts
+var ce = {
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-x-[2px] inset-y-0 overflow-hidden rounded-lg"
+}, le = {
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-0 text-foreground"
+}, ue = /* @__PURE__ */ h({
+	__name: "InlineSlider",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		min: {},
+		max: {},
+		step: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		formatValueText: {},
+		label: {},
+		format: {
+			type: Function,
+			default: String
+		},
+		showTicks: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"valueCommit"
+	],
+	setup(t, { emit: n }) {
+		let r = t, i = n, a = e(), { current: c, trackRef: l, sliderRef: u, sliderProps: p, labelRef: h, readoutRef: y, dragging: b, handleX: S, fillX: E, stemOpacity: O, capTop: k, capBottom: j, ticks: M, down: N, move: P, end: F, key: I } = se(r, i, a);
+		return (e, n) => (x(), d("div", {
+			ref_key: "trackRef",
+			ref: l,
+			onPointerdown: n[1] ||= (...e) => T(N) && T(N)(...e),
+			onPointermove: n[2] ||= (...e) => T(P) && T(P)(...e),
+			onPointerup: n[3] ||= (...e) => T(F) && T(F)(...e),
+			onPointercancel: n[4] ||= (...e) => T(F) && T(F)(...e),
+			onLostpointercapture: n[5] ||= (...e) => T(F) && T(F)(...e),
+			class: _(T(o)("relative h-10 w-full touch-none select-none overflow-hidden rounded-lg bg-muted", t.disabled ? "pointer-events-none opacity-50" : "cursor-grab active:cursor-grabbing"))
+		}, [
+			f("div", ce, [m(T(A).div, {
+				class: "absolute inset-0 rounded-lg bg-foreground/15",
+				style: v({ x: T(E) })
+			}, null, 8, ["style"])]),
+			f("div", le, [
+				f("span", {
+					ref_key: "labelRef",
+					ref: h,
+					class: "absolute left-5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm font-medium leading-5"
+				}, w(t.label), 513),
+				f("span", {
+					ref_key: "readoutRef",
+					ref: y,
+					class: "absolute right-5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-[13px] font-semibold leading-[18px] tracking-tight tabular-nums"
+				}, w(t.format(T(c))), 513),
+				(x(!0), d(s, null, C(T(M), (e) => (x(), d("span", {
+					key: e,
+					class: "absolute top-1/2 size-1 -translate-y-1/2 rounded-full bg-foreground/25",
+					style: v({ left: `${e}px` })
+				}, null, 4))), 128))
+			]),
+			m(T(A).div, {
+				"aria-hidden": "true",
+				animate: T(a) ? void 0 : { scaleY: T(b) ? 1.35 : 1 },
+				transition: {
+					type: "spring",
+					stiffness: 500,
+					damping: 14,
+					mass: .7
+				},
+				class: "pointer-events-none absolute left-0 top-2 h-6 w-1 text-foreground",
+				style: v({ x: T(S) })
+			}, {
+				default: D(() => [
+					m(T(A).span, {
+						class: "absolute top-0 size-1 rounded-full bg-current",
+						style: v({ y: T(a) ? 0 : T(k) })
+					}, null, 8, ["style"]),
+					m(T(A).span, {
+						class: "absolute inset-y-0 w-1 rounded-full bg-current",
+						style: v({ opacity: T(O) })
+					}, null, 8, ["style"]),
+					m(T(A).span, {
+						class: "absolute bottom-0 size-1 rounded-full bg-current",
+						style: v({ y: T(a) ? 0 : T(j) })
+					}, null, 8, ["style"])
+				]),
+				_: 1
+			}, 8, ["animate", "style"]),
+			f("button", g({
+				ref_key: "sliderRef",
+				ref: u,
+				type: "button"
+			}, {
+				...T(p),
+				onKeydown: void 0,
+				"aria-label": t.ariaLabel ?? t.label,
+				"aria-valuetext": t.formatValueText?.(T(c)) ?? t.format(T(c))
+			}, {
+				onKeydown: n[0] ||= (...e) => T(I) && T(I)(...e),
+				class: "absolute inset-0 cursor-inherit touch-none rounded-lg border-0 outline-none"
+			}), null, 16)
+		], 34));
+	}
+});
+export { K as a, $ as i, oe as n, G as o, ee as r, ue as t };
+
+//# sourceMappingURL=range-slider-DNGMNvLt.js.map