@thewhatmatters/wmds 0.4.31 → 0.4.33

package/dist/components/organisms/Carousel/Carousel.js

@@ -1,29 +1,31 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { motionTransitionProp as t } from "../../../lib/motion.js";
-import { carouselActiveIndex as n, carouselClamp as r, carouselMaxScroll as i, carouselNearestSnap as a, carouselOverflows as o, carouselOverscrollOffset as s, carouselProgress as c, carouselProgressAtPointer as l, carouselSnapPoints as u, carouselStep as d, carouselThumbShare as f } from "./carouselMath.js";
-import { carouselBreakpoints as p, carouselCounterClasses as m, carouselDefaultItemWidth as h, carouselExtentClasses as ee, carouselFrameClasses as te, carouselItemClasses as ne, carouselProgressClasses as re, carouselProgressPlacementClasses as ie, carouselProgressPlacements as ae, carouselProgressThumbClasses as oe, carouselProgressTrackClasses as se, carouselRootClasses as ce, carouselTrackClasses as le, carouselViewportClasses as ue } from "./carouselStyles.js";
-import { Children as de, createContext as g, isValidElement as fe, useCallback as _, useContext as v, useEffect as y, useLayoutEffect as pe, useMemo as me, useRef as b, useState as he } from "react";
-import { jsx as x, jsxs as ge } from "react/jsx-runtime";
-import { animate as _e, motion as ve, useMotionValue as ye, useMotionValueEvent as be, useReducedMotion as xe, useTransform as Se } from "motion/react";
+import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
+import { carouselActiveIndex as r, carouselClamp as i, carouselMaxScroll as a, carouselNearestSnap as o, carouselOverflows as s, carouselOverscrollOffset as c, carouselProgress as l, carouselProgressAtPointer as u, carouselSnapPoints as ee, carouselStep as d, carouselThumbShare as te } from "./carouselMath.js";
+import { carouselBreakpoints as f, carouselControlsClasses as ne, carouselCounterClasses as p, carouselCursorClasses as m, carouselDefaultItemWidth as re, carouselExtentClasses as ie, carouselFrameClasses as ae, carouselItemClasses as oe, carouselProgressClasses as se, carouselProgressInControlsClasses as ce, carouselProgressPlacementClasses as le, carouselProgressPlacements as ue, carouselProgressThumbClasses as de, carouselProgressTrackClasses as fe, carouselRootClasses as pe, carouselTrackClasses as me, carouselViewportClasses as he } from "./carouselStyles.js";
+import { Children as ge, createContext as h, isValidElement as _e, useCallback as g, useContext as ve, useEffect as _, useLayoutEffect as ye, useMemo as be, useRef as v, useState as xe } from "react";
+import { Pause as Se, Play as Ce } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { animate as we, motion as Te, useMotionValue as x, useMotionValueEvent as Ee, useReducedMotionConfig as De, useSpring as Oe, useTransform as ke } from "motion/react";
 //#region src/components/organisms/Carousel/Carousel.tsx
-var S = g(null), Ce = {
+var S = h(null), Ae = {
 	item: (e, t) => `${e} of ${t}`,
 	counter: (e, t) => `${e} of ${t}`
-}, we = 120, Te = 10;
-function Ee(e, t) {
+}, je = 120, Me = 10;
+function Ne(e, t) {
 	try {
 		e.setPointerCapture(t);
 	} catch {}
 }
-function De(e) {
+function Pe(e) {
 	if (typeof e == "number") return {
 		base: e,
 		sm: e,
 		md: e,
 		lg: e
 	};
-	let t = e.base ?? h.base, n = e.sm ?? t, r = e.md ?? n;
+	let t = e.base ?? re.base, n = e.sm ?? t, r = e.md ?? n;
 	return {
 		base: t,
 		sm: n,
@@ -31,135 +33,226 @@ function De(e) {
 		lg: e.lg ?? r
 	};
 }
-function Oe(e, t, n) {
+function Fe(e, t, n) {
 	n ? e.style.removeProperty(t) : e.style.setProperty(t, "0px");
 }
-function C({ "aria-label": p, "aria-labelledby": ne, itemWidth: ae = h, snap: g = !0, bleed: v = !1, fade: me = !0, progress: S = "center", counter: C = !1, onIndexChange: w, activeIndex: T, labels: E, children: Ae, className: je }) {
-	let D = xe() ?? !1, O = b(null), k = b(null), A = b(null), j = b(null), Me = b(null), M = b({
+function Ie({ "aria-label": f, "aria-labelledby": oe, itemWidth: ue = re, snap: h = !0, bleed: ve = !1, fade: be = !0, progress: S = "center", counter: Ie = !1, onIndexChange: ze, activeIndex: C, labels: Be, autoplay: Ve = !1, loop: w = !1, cursor: T, children: He, className: Ue }) {
+	let E = De() ?? !1, D = v(null), O = v(null), k = v(null), A = v(null), We = v(null), j = v({
 		max: 0,
 		points: [0],
 		offsets: [],
-		direction: 1
-	}), N = b(null), P = b(null), F = b(null), I = b(null), L = b(!1), [R, Ne] = he(null), [Pe, Fe] = he(0), z = b(void 0), Ie = b(0), B = b(void 0), Le = b(0), Re = b(w), ze = b(() => {}), V = ye(0), H = ye(0), Be = Se(H, (e) => -M.current.direction * s(e)), U = _(() => Math.abs(k.current?.scrollLeft ?? 0), []), W = _(() => {
-		let e = O.current, t = k.current;
+		direction: 1,
+		loopWidth: 0
+	}), M = v(null), N = v(null), P = v(null), F = v(null), I = v(!1), [L, Ge] = xe(null), [Ke, qe] = xe(0), Je = v(void 0), Ye = v(0), Xe = v(void 0), Ze = v(0), Qe = v(ze), $e = v(() => {}), R = Ve === !1 ? 0 : typeof Ve == "object" ? Ve.speed ?? Le : Le, [et, tt] = xe(!1), z = v({
+		hover: !1,
+		focus: !1,
+		offscreen: !1
+	}), B = v(null), nt = v({
+		position: 0,
+		time: 0,
+		reset: void 0
+	}), rt = x(0), it = Oe(rt, {
+		stiffness: 170,
+		damping: 26,
+		mass: 1
+	});
+	Ee(it, "change", (e) => {
+		D.current?.style.setProperty("--carousel-velocity", (Math.abs(e) < .001 ? 0 : e).toFixed(3));
+	});
+	let V = x(0), H = x(0), at = ke(H, (e) => -j.current.direction * c(e)), U = g(() => Math.abs(O.current?.scrollLeft ?? 0), []), W = g(() => {
+		let e = D.current, t = O.current;
 		if (!e || !t) return;
-		let { max: r } = M.current, i = Math.abs(t.scrollLeft);
-		e.style.setProperty("--carousel-progress", String(c(i, r))), Oe(t, "--scroll-fade-s", i > 1), Oe(t, "--scroll-fade-e", i < r - 1), window.clearTimeout(z.current), z.current = window.setTimeout(() => {
-			let e = n(M.current.offsets, Math.abs(t.scrollLeft), M.current.max);
-			Fe(e), e !== Ie.current && (Ie.current = e, Re.current?.(e, Le.current));
-		}, we);
-	}, []), Ve = _((e) => {
-		let t = k.current;
-		t && (t.scrollLeft = M.current.direction * e, W());
+		let { max: n } = j.current, i = Math.abs(t.scrollLeft);
+		e.style.setProperty("--carousel-progress", String(l(i, n))), Fe(t, "--scroll-fade-s", i > 1), Fe(t, "--scroll-fade-e", i < n - 1), window.clearTimeout(Je.current), Je.current = window.setTimeout(() => {
+			let e = r(j.current.offsets, Math.abs(t.scrollLeft), j.current.max);
+			qe(e), e !== Ye.current && (Ye.current = e, Qe.current?.(e, Ze.current));
+		}, je);
+	}, []), G = g((e) => {
+		let t = O.current;
+		t && (t.scrollLeft = j.current.direction * e, W());
 	}, [W]);
-	be(V, "change", (e) => {
-		let t = r(e, 0, M.current.max);
-		Ve(t), H.set(D ? 0 : e - t);
+	Ee(V, "change", (e) => {
+		let t = i(e, 0, j.current.max);
+		G(t), H.set(E ? 0 : e - t);
 	});
-	function G(e) {
-		let t = k.current;
+	function K(e) {
+		let t = O.current;
 		t && (e ? t.dataset.moving = "" : delete t.dataset.moving);
 	}
-	function K() {
-		N.current?.stop(), N.current = null, P.current = null;
-	}
 	function q() {
-		N.current = null, P.current = null, G(!1);
+		M.current?.stop(), M.current = null, N.current = null;
 	}
-	function He() {
-		N.current != null && (K(), V.jump(U()), G(!1));
+	function ot() {
+		M.current = null, N.current = null, K(!1);
+	}
+	function st() {
+		M.current != null && (q(), V.jump(U()), K(!1));
 	}
 	function J(e, n = !0) {
-		let i = r(e, 0, M.current.max);
-		if (K(), V.jump(U()), D || !n) {
-			G(!1), V.jump(i);
+		let r = i(e, 0, j.current.max);
+		if (q(), V.jump(U()), E || !n) {
+			K(!1), V.jump(r);
 			return;
 		}
-		P.current = i, G(!0), N.current = _e(V, i, {
+		N.current = r, K(!0), M.current = we(V, r, {
 			...t("medium"),
-			onComplete: q
+			onComplete: ot
 		});
 	}
-	y(() => {
-		Re.current = w, ze.current = J;
+	_(() => {
+		Qe.current = ze, $e.current = J;
 	});
-	function Ue(e) {
-		let { max: t, points: n } = M.current, i = (e) => a(n, r(e, 0, t));
-		if (K(), D) {
-			J(g ? i(V.get()) : V.get(), !1);
+	function ct(e) {
+		let { max: t, points: n } = j.current, r = (e) => o(n, i(e, 0, t));
+		if (q(), E) {
+			J(h ? r(V.get()) : V.get(), !1);
 			return;
 		}
-		let o = V.get(), s = g ? i(o) : r(o, 0, t);
-		if (e === 0 && s === o) {
-			q();
+		let a = V.get(), s = h ? r(a) : i(a, 0, t);
+		if (e === 0 && s === a) {
+			ot();
 			return;
 		}
-		G(!0), N.current = _e(V, s === o ? o + Math.sign(e) : s, {
+		K(!0), M.current = we(V, s === a ? a + Math.sign(e) : s, {
 			type: "inertia",
 			velocity: e,
 			min: 0,
 			max: t,
-			modifyTarget: g ? i : void 0,
-			onComplete: q
+			modifyTarget: h ? r : void 0,
+			onComplete: ot
 		});
 	}
-	let Y = _(() => {
-		let e = O.current, t = k.current, n = A.current;
+	let Y = g(() => {
+		let e = D.current, t = O.current, n = k.current;
 		if (!e || !t || !n || H.get() !== 0) return;
-		if (v) {
+		if (ve) {
 			let t = e.getBoundingClientRect(), n = Math.max(0, Math.floor(t.left)), r = Math.max(0, Math.floor(document.documentElement.clientWidth - t.right));
 			e.style.setProperty("--carousel-bleed-left", `${n}px`), e.style.setProperty("--carousel-bleed-right", `${r}px`);
 		} else e.style.removeProperty("--carousel-bleed-left"), e.style.removeProperty("--carousel-bleed-right");
-		let r = getComputedStyle(t).direction === "rtl" ? -1 : 1, a = t.clientWidth, s = t.scrollWidth, c = i(a, s), l = Array.from(n.querySelectorAll(":scope > [data-carousel-item]")), d = l[0]?.getBoundingClientRect(), p = d == null ? [] : l.map((e) => {
+		let r = getComputedStyle(t).direction === "rtl" ? -1 : 1, i = t.clientWidth, o = t.scrollWidth, c = a(i, o), l = Array.from(n.querySelectorAll(":scope > [data-carousel-item]:not([data-carousel-clone])")), u = n.querySelector(":scope > [data-carousel-clone]"), d = l[0]?.getBoundingClientRect(), f = d == null ? [] : l.map((e) => {
 			let t = e.getBoundingClientRect();
 			return r === 1 ? t.left - d.left : d.right - t.right;
-		});
-		M.current = {
+		}), ne = u == null || d == null ? 0 : r === 1 ? u.getBoundingClientRect().left - d.left : d.right - u.getBoundingClientRect().right;
+		j.current = {
 			max: c,
 			direction: r,
-			points: u(p, c),
-			offsets: p
+			points: ee(f, c),
+			offsets: f,
+			loopWidth: ne
 		};
-		let m = j.current;
-		m && e.style.setProperty("--carousel-thumb", String(f(a, s, m.clientWidth))), W();
-		let h = o(a, s);
-		Ne((e) => e === h ? e : h);
+		let p = A.current;
+		p && e.style.setProperty("--carousel-thumb", String(te(i, o, p.clientWidth))), W();
+		let m = s(i, o);
+		Ge((e) => e === m ? e : m);
 	}, [
-		v,
+		ve,
 		H,
 		W
 	]);
-	pe(() => {
+	ye(() => {
 		if (Y(), window.addEventListener("resize", Y), typeof ResizeObserver > "u") return () => window.removeEventListener("resize", Y);
 		let e = new ResizeObserver(Y);
 		for (let t of [
+			D.current,
 			O.current,
 			k.current,
-			A.current,
-			j.current
+			A.current
 		]) t && e.observe(t);
 		return () => {
 			e.disconnect(), window.removeEventListener("resize", Y);
 		};
-	}, [Y, S]), y(() => () => {
-		N.current?.stop(), window.clearTimeout(z.current);
-	}, []), y(() => {
-		if (T == null || R == null || T === B.current) return;
-		let { offsets: e, max: t } = M.current;
-		if (e.length === 0) return;
-		let n = B.current === void 0;
-		B.current = T;
-		let i = e[r(Math.round(T), 0, e.length - 1)];
-		ze.current(g ? a(M.current.points, i) : r(i, 0, t), !n);
+	}, [Y, S]), _(() => () => {
+		M.current?.stop(), window.clearTimeout(Je.current);
+	}, []);
+	let lt = R > 0 && !E && !et && L === !0;
+	_(() => {
+		let e = D.current, t = O.current;
+		if (!lt || !e || !t) return;
+		let n = 0, r = performance.now(), i = 1, a = U(), o = typeof IntersectionObserver > "u" ? null : new IntersectionObserver(([e]) => {
+			z.current.offscreen = !(e?.isIntersecting ?? !0);
+		});
+		o?.observe(e), K(!0);
+		let s = (e) => {
+			let t = Math.min(.05, (e - r) / 1e3);
+			r = e;
+			let { hover: o, focus: c, offscreen: l } = z.current;
+			if (o || c || l || document.hidden || P.current != null || F.current != null || M.current != null) a = U();
+			else {
+				let { max: e } = j.current;
+				Math.abs(U() - a) > 2 && (a = U()), a += i * R * t;
+				let { loopWidth: n } = j.current;
+				w && n > 0 ? a >= n && (a -= n) : a >= e ? (a = e, i = -1) : a <= 0 && (a = 0, i = 1), K(!0), G(a);
+			}
+			n = requestAnimationFrame(s);
+		};
+		return n = requestAnimationFrame(s), () => {
+			cancelAnimationFrame(n), o?.disconnect(), K(!1);
+		};
 	}, [
-		T,
+		lt,
 		R,
-		g
+		w,
+		U,
+		G
+	]);
+	function ut() {
+		if (!D.current || E) return;
+		let e = performance.now(), t = U(), n = nt.current, r = e - n.time;
+		r > 0 && r < 200 && Math.abs(t - n.position) < 400 && rt.set(i((t - n.position) / r / 1.5, -1, 1)), n.position = t, n.time = e, window.clearTimeout(n.reset), n.reset = window.setTimeout(() => rt.set(0), 120);
+	}
+	function dt() {
+		ut();
+		let { loopWidth: e } = j.current;
+		if (w && e > 0 && P.current == null && F.current == null && M.current == null) {
+			let t = U();
+			if (t >= e) {
+				G(t - e);
+				return;
+			}
+		}
+		W();
+	}
+	function ft(e) {
+		e.pointerType === "mouse" && (z.current.hover = !0);
+	}
+	function pt() {
+		z.current.hover = !1;
+		let e = B.current;
+		e && delete e.dataset.shown;
+	}
+	function mt() {
+		z.current.focus = !0;
+	}
+	function ht(e) {
+		e.currentTarget.contains(e.relatedTarget) || (z.current.focus = !1);
+	}
+	function gt(e) {
+		let t = B.current, n = D.current;
+		if (!t || !n || e.pointerType !== "mouse" || !window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
+		let r = n.getBoundingClientRect();
+		t.style.transform = `translate3d(${e.clientX - r.left}px, ${e.clientY - r.top}px, 0) translate(-50%, -50%)`, t.dataset.shown = "", P.current?.active ? t.dataset.dragging = "" : delete t.dataset.dragging;
+	}
+	function _t() {
+		let e = B.current;
+		e && delete e.dataset.shown;
+	}
+	_(() => {
+		if (C == null || L == null || C === Xe.current) return;
+		let { offsets: e, max: t } = j.current;
+		if (e.length === 0) return;
+		let n = Xe.current === void 0;
+		Xe.current = C;
+		let r = e[i(Math.round(C), 0, e.length - 1)];
+		$e.current(h ? o(j.current.points, r) : i(r, 0, t), !n);
+	}, [
+		C,
+		L,
+		h
 	]);
-	function We(e) {
-		if (e.pointerType !== "mouse" || e.button !== 0 || M.current.max <= 0) return;
-		let t = N.current != null;
-		K(), V.jump(U()), F.current = {
+	function vt(e) {
+		if (e.pointerType !== "mouse" || e.button !== 0 || j.current.max <= 0) return;
+		let t = M.current != null;
+		q(), V.jump(U()), P.current = {
 			pointerId: e.pointerId,
 			startX: e.clientX,
 			startPosition: U(),
@@ -167,38 +260,38 @@ function C({ "aria-label": p, "aria-labelledby": ne, itemWidth: ae = h, snap: g
 			interrupted: t
 		};
 	}
-	function Ge(e) {
-		let t = F.current;
+	function yt(e) {
+		let t = P.current;
 		if (!(!t || t.pointerId !== e.pointerId)) {
 			if (e.buttons === 0) {
-				X(e);
+				bt(e);
 				return;
 			}
 			if (!t.active) {
 				if (Math.abs(e.clientX - t.startX) < 4) return;
-				t.active = !0, t.startX = e.clientX, Ee(e.currentTarget, e.pointerId), e.currentTarget.dataset.dragging = "", G(!0);
+				t.active = !0, t.startX = e.clientX, Ne(e.currentTarget, e.pointerId), e.currentTarget.dataset.dragging = "", window.getSelection()?.removeAllRanges(), K(!0);
 			}
-			V.set(t.startPosition - M.current.direction * (e.clientX - t.startX));
+			V.set(t.startPosition - j.current.direction * (e.clientX - t.startX));
 		}
 	}
-	function X(e) {
-		let t = F.current;
+	function bt(e) {
+		let t = P.current;
 		if (!t || t.pointerId !== e.pointerId) return;
-		if (F.current = null, !t.active) {
-			t.interrupted && Ue(0);
+		if (P.current = null, !t.active) {
+			t.interrupted && ct(0);
 			return;
 		}
 		let n = e.currentTarget;
-		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.dragging, L.current = !0, window.setTimeout(() => {
-			L.current = !1;
-		}, 0), Ue(e.type === "pointercancel" ? 0 : V.getVelocity());
+		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.dragging, I.current = !0, window.setTimeout(() => {
+			I.current = !1;
+		}, 0), ct(e.type === "pointercancel" ? 0 : V.getVelocity());
 	}
-	function Ke(e) {
-		L.current && (L.current = !1, e.preventDefault(), e.stopPropagation());
+	function xt(e) {
+		I.current && (I.current = !1, e.preventDefault(), e.stopPropagation());
 	}
-	function qe(e) {
+	function St(e) {
 		if (e.target !== e.currentTarget || e.altKey || e.ctrlKey || e.metaKey) return;
-		let { max: t, points: n, direction: r } = M.current, i = P.current ?? U(), a;
+		let { max: t, points: n, direction: r } = j.current, i = N.current ?? U(), a;
 		switch (e.key) {
 			case "ArrowRight":
 				a = d(n, i, r);
@@ -216,133 +309,169 @@ function C({ "aria-label": p, "aria-labelledby": ne, itemWidth: ae = h, snap: g
 		}
 		e.preventDefault(), J(a);
 	}
-	function Je(e) {
-		let t = j.current, n = Me.current, { max: r, points: i, direction: o } = M.current;
+	function Ct(e) {
+		let t = A.current, n = We.current, { max: r, points: i, direction: a } = j.current;
 		if (!t || !n || r <= 0 || e.button !== 0) return;
 		e.preventDefault();
-		let s = t.getBoundingClientRect(), u = n.getBoundingClientRect();
-		if (e.clientX >= u.left - Te && e.clientX <= u.right + Te) {
-			K(), V.jump(U()), G(!0), Ee(e.currentTarget, e.pointerId), e.currentTarget.dataset.scrubbing = "", I.current = {
+		let s = t.getBoundingClientRect(), c = n.getBoundingClientRect();
+		if (e.clientX >= c.left - Me && e.clientX <= c.right + Me) {
+			q(), V.jump(U()), K(!0), Ne(e.currentTarget, e.pointerId), e.currentTarget.dataset.scrubbing = "", F.current = {
 				pointerId: e.pointerId,
 				startX: e.clientX,
-				startProgress: c(U(), r),
-				travel: s.width - u.width
+				startProgress: l(U(), r),
+				travel: s.width - c.width
 			};
 			return;
 		}
-		let d = o === 1 ? e.clientX - s.left : s.right - e.clientX, f = l(d, s.width, u.width) * r;
-		J(g ? a(i, f) : f);
+		let ee = a === 1 ? e.clientX - s.left : s.right - e.clientX, d = u(ee, s.width, c.width) * r;
+		J(h ? o(i, d) : d);
 	}
-	function Ye(e) {
-		let t = I.current;
+	function wt(e) {
+		let t = F.current;
 		if (!t || t.pointerId !== e.pointerId || t.travel <= 0) return;
-		let { max: n, direction: i } = M.current, a = i * (e.clientX - t.startX) / t.travel;
-		V.set(r(t.startProgress + a, 0, 1) * n);
+		let { max: n, direction: r } = j.current, a = r * (e.clientX - t.startX) / t.travel;
+		V.set(i(t.startProgress + a, 0, 1) * n);
 	}
-	function Xe(e) {
-		let t = I.current;
+	function Tt(e) {
+		let t = F.current;
 		if (!t || t.pointerId !== e.pointerId) return;
-		I.current = null;
+		F.current = null;
 		let n = e.currentTarget;
-		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.scrubbing, g ? J(a(M.current.points, U())) : G(!1);
+		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.scrubbing, h ? J(o(j.current.points, U())) : K(!1);
 	}
-	let Z = De(ae), Ze = {
-		"--carousel-item": String(Z.base),
-		"--carousel-item-sm": String(Z.sm),
-		"--carousel-item-md": String(Z.md),
-		"--carousel-item-lg": String(Z.lg)
-	}, Qe = E?.item ?? Ce.item, Q = de.toArray(Ae);
-	Le.current = Q.length;
-	let $e = (E?.counter ?? Ce.counter)(Math.min(Pe, Math.max(Q.length - 1, 0)) + 1, Q.length), $ = R == null ? void 0 : String(R);
-	return /* @__PURE__ */ ge("div", {
-		ref: O,
-		className: e(ce, je),
-		style: Ze,
+	let X = Pe(ue), Et = {
+		"--carousel-item": String(X.base),
+		"--carousel-item-sm": String(X.sm),
+		"--carousel-item-md": String(X.md),
+		"--carousel-item-lg": String(X.lg)
+	}, Dt = Be?.item ?? Ae.item, Z = ge.toArray(He);
+	Ze.current = Z.length;
+	let Ot = (Be?.counter ?? Ae.counter)(Math.min(Ke, Math.max(Z.length - 1, 0)) + 1, Z.length), kt = L == null ? void 0 : String(L), Q = R > 0 && !E && L === !0, $ = w ? "none" : S, At = Ie && !w;
+	return /* @__PURE__ */ b("div", {
+		ref: D,
+		className: e(pe, T != null && "relative", Ue),
+		style: Et,
 		"data-carousel": "",
+		"data-autoplay": R > 0 ? "" : void 0,
+		onPointerEnter: ft,
+		onPointerLeave: pt,
+		onFocus: mt,
+		onBlur: ht,
 		children: [
-			/* @__PURE__ */ x("div", {
-				className: te,
-				children: /* @__PURE__ */ x("div", {
-					ref: k,
+			/* @__PURE__ */ y("div", {
+				className: ae,
+				children: /* @__PURE__ */ y("div", {
+					ref: O,
 					role: "region",
-					"aria-label": p,
-					"aria-labelledby": ne,
-					tabIndex: R === !1 ? void 0 : 0,
+					"aria-label": f,
+					"aria-labelledby": oe,
+					tabIndex: L === !1 ? void 0 : 0,
 					"data-carousel-viewport": "",
-					"data-overflowing": $,
-					className: e(ue, g && "snap-x snap-mandatory data-[moving]:snap-none", me && "scroll-fade-x"),
+					"data-overflowing": kt,
+					className: e(he, h && "snap-x snap-mandatory data-[moving]:snap-none", be && "scroll-fade-x"),
 					style: { "--scroll-fade-s": "0px" },
-					onScroll: W,
-					onKeyDown: qe,
-					onPointerDown: We,
-					onPointerMove: Ge,
-					onPointerUp: X,
-					onPointerCancel: X,
-					onClickCapture: Ke,
+					onScroll: dt,
+					onKeyDown: St,
+					onPointerDown: vt,
+					onPointerMove: (e) => {
+						yt(e), T != null && gt(e);
+					},
+					onPointerLeave: T == null ? void 0 : _t,
+					onPointerUp: bt,
+					onPointerCancel: bt,
+					onClickCapture: xt,
 					onDragStart: (e) => e.preventDefault(),
-					onWheel: He,
-					onTouchStart: He,
-					children: /* @__PURE__ */ x("div", {
-						className: ee,
-						children: /* @__PURE__ */ x(ve.div, {
-							ref: A,
-							className: le,
-							style: { x: Be },
-							children: Q.map((e, t) => /* @__PURE__ */ x(ke, {
-								label: Qe(t + 1, Q.length),
+					onWheel: st,
+					onTouchStart: st,
+					children: /* @__PURE__ */ y("div", {
+						className: ie,
+						children: /* @__PURE__ */ b(Te.div, {
+							ref: k,
+							className: me,
+							style: { x: at },
+							children: [Z.map((e, t) => /* @__PURE__ */ y(Re, {
+								label: Dt(t + 1, Z.length),
+								children: e
+							}, _e(e) && e.key != null ? e.key : t)), w ? Z.map((e, t) => /* @__PURE__ */ y(Re, {
+								label: Dt(t + 1, Z.length),
+								clone: !0,
 								children: e
-							}, fe(e) && e.key != null ? e.key : t))
+							}, `loop-${t}`)) : null]
 						})
 					})
 				})
 			}),
-			S === "none" ? null : /* @__PURE__ */ x("div", {
-				"aria-hidden": "true",
-				"data-carousel-progress": "",
-				"data-overflowing": $,
-				className: e(re, ie[S]),
-				onPointerDown: Je,
-				onPointerMove: Ye,
-				onPointerUp: Xe,
-				onPointerCancel: Xe,
-				children: /* @__PURE__ */ x("div", {
-					ref: j,
-					className: se,
-					children: /* @__PURE__ */ x("div", {
-						ref: Me,
-						className: oe,
-						"data-carousel-progress-thumb": ""
+			$ !== "none" || Q ? /* @__PURE__ */ b("div", {
+				className: Q ? ne[$] : "contents",
+				children: [$ === "none" ? null : /* @__PURE__ */ y("div", {
+					"aria-hidden": "true",
+					"data-carousel-progress": "",
+					"data-overflowing": kt,
+					className: e(se, Q ? ce[$] : le[$]),
+					onPointerDown: Ct,
+					onPointerMove: wt,
+					onPointerUp: Tt,
+					onPointerCancel: Tt,
+					children: /* @__PURE__ */ y("div", {
+						ref: A,
+						className: fe,
+						children: /* @__PURE__ */ y("div", {
+							ref: We,
+							className: de,
+							"data-carousel-progress-thumb": ""
+						})
 					})
-				})
+				}), Q ? /* @__PURE__ */ y(n, {
+					role: "ghost",
+					size: "sm",
+					"aria-label": et ? "Play" : "Pause",
+					icon: y(et ? Ce : Se, { strokeWidth: 2 }),
+					onClick: () => tt((e) => !e),
+					"data-carousel-drift-control": ""
+				}) : null]
+			}) : null,
+			T == null ? null : /* @__PURE__ */ y("div", {
+				ref: B,
+				"aria-hidden": "true",
+				className: m,
+				"data-carousel-cursor": "",
+				children: T
 			}),
-			C ? /* @__PURE__ */ x("p", {
+			At ? /* @__PURE__ */ y("p", {
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				"data-carousel-counter": "",
-				"data-overflowing": $,
-				className: m,
-				children: $e
+				"data-overflowing": kt,
+				className: p,
+				children: Ot
 			}) : null
 		]
 	});
 }
-function ke({ label: e, children: t }) {
-	let n = me(() => ({ label: e }), [e]);
-	return /* @__PURE__ */ x(S.Provider, {
-		value: n,
-		children: t
+var Le = 24;
+function Re({ label: e, clone: t = !1, children: n }) {
+	let r = be(() => ({
+		label: e,
+		clone: t
+	}), [e, t]);
+	return /* @__PURE__ */ y(S.Provider, {
+		value: r,
+		children: n
 	});
 }
-function w({ children: t, className: n }) {
-	let r = v(S);
-	return /* @__PURE__ */ x("div", {
-		role: "group",
-		"aria-label": r?.label,
+function ze({ children: t, className: n }) {
+	let r = ve(S);
+	return /* @__PURE__ */ y("div", {
+		role: r?.clone ? void 0 : "group",
+		"aria-label": r?.clone ? void 0 : r?.label,
+		"aria-hidden": r?.clone ? !0 : void 0,
+		inert: r?.clone ? !0 : void 0,
 		"data-carousel-item": "",
-		className: e(ne, n),
+		"data-carousel-clone": r?.clone ? "" : void 0,
+		className: e(oe, n),
 		children: t
 	});
 }
-var T = Object.assign(C, { Item: w });
+var C = Object.assign(Ie, { Item: ze });
 //#endregion
-export { T as Carousel, p as carouselBreakpoints, h as carouselDefaultItemWidth, ae as carouselProgressPlacements };
+export { C as Carousel, f as carouselBreakpoints, re as carouselDefaultItemWidth, ue as carouselProgressPlacements };