@thewhatmatters/wmds 0.4.9 → 0.4.27

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

@@ -1,26 +1,29 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { motionTransitionProp as t } from "../../../lib/motion.js";
-import { carouselClamp as n, carouselMaxScroll as r, carouselNearestSnap as i, carouselOverflows as a, carouselOverscrollOffset as o, carouselProgress as s, carouselProgressAtPointer as c, carouselSnapPoints as l, carouselStep as u, carouselThumbShare as d } from "./carouselMath.js";
-import { carouselBreakpoints as f, carouselDefaultItemWidth as p, carouselExtentClasses as m, carouselFrameClasses as h, carouselItemClasses as g, carouselProgressClasses as ee, carouselProgressPlacementClasses as te, carouselProgressPlacements as _, carouselProgressThumbClasses as ne, carouselProgressTrackClasses as re, carouselRootClasses as ie, carouselTrackClasses as ae, carouselViewportClasses as oe } from "./carouselStyles.js";
-import { Children as se, createContext as v, isValidElement as ce, useCallback as y, useContext as b, useEffect as le, useLayoutEffect as ue, useMemo as x, useRef as S, useState as de } from "react";
-import { jsx as C, jsxs as fe } from "react/jsx-runtime";
-import { animate as pe, motion as me, useMotionValue as he, useMotionValueEvent as ge, useReducedMotion as _e, useTransform as ve } from "motion/react";
+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";
 //#region src/components/organisms/Carousel/Carousel.tsx
-var w = v(null), ye = { item: (e, t) => `${e} of ${t}` }, be = 10;
-function T(e, t) {
+var S = g(null), Ce = {
+	item: (e, t) => `${e} of ${t}`,
+	counter: (e, t) => `${e} of ${t}`
+}, we = 120, Te = 10;
+function Ee(e, t) {
 	try {
 		e.setPointerCapture(t);
 	} catch {}
 }
-function xe(e) {
+function De(e) {
 	if (typeof e == "number") return {
 		base: e,
 		sm: e,
 		md: e,
 		lg: e
 	};
-	let t = e.base ?? p.base, n = e.sm ?? t, r = e.md ?? n;
+	let t = e.base ?? h.base, n = e.sm ?? t, r = e.md ?? n;
 	return {
 		base: t,
 		sm: n,
@@ -28,158 +31,180 @@ function xe(e) {
 		lg: e.lg ?? r
 	};
 }
-function E(e, t, n) {
+function Oe(e, t, n) {
 	n ? e.style.removeProperty(t) : e.style.setProperty(t, "0px");
 }
-function D({ "aria-label": f, "aria-labelledby": g, itemWidth: _ = p, snap: v = !0, bleed: b = !1, fade: x = !0, progress: w = "center", labels: D, children: O, className: k }) {
-	let A = _e() ?? !1, j = S(null), M = S(null), N = S(null), P = S(null), F = S(null), I = S({
+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({
 		max: 0,
 		points: [0],
+		offsets: [],
 		direction: 1
-	}), L = S(null), R = S(null), z = S(null), B = S(null), V = S(!1), [H, Ce] = de(null), U = he(0), W = he(0), we = ve(W, (e) => -I.current.direction * o(e)), G = y(() => Math.abs(M.current?.scrollLeft ?? 0), []), K = y(() => {
-		let e = j.current, t = M.current;
+	}), 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;
 		if (!e || !t) return;
-		let { max: n } = I.current, r = Math.abs(t.scrollLeft);
-		e.style.setProperty("--carousel-progress", String(s(r, n))), E(t, "--scroll-fade-s", r > 1), E(t, "--scroll-fade-e", r < n - 1);
-	}, []), Te = y((e) => {
-		let t = M.current;
-		t && (t.scrollLeft = I.current.direction * e, K());
-	}, [K]);
-	ge(U, "change", (e) => {
-		let t = n(e, 0, I.current.max);
-		Te(t), W.set(A ? 0 : e - t);
+		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());
+	}, [W]);
+	be(V, "change", (e) => {
+		let t = r(e, 0, M.current.max);
+		Ve(t), H.set(D ? 0 : e - t);
 	});
-	function q(e) {
-		let t = M.current;
+	function G(e) {
+		let t = k.current;
 		t && (e ? t.dataset.moving = "" : delete t.dataset.moving);
 	}
-	function J() {
-		L.current?.stop(), L.current = null, R.current = null;
+	function K() {
+		N.current?.stop(), N.current = null, P.current = null;
 	}
-	function Y() {
-		L.current = null, R.current = null, q(!1);
+	function q() {
+		N.current = null, P.current = null, G(!1);
 	}
-	function Ee() {
-		L.current != null && (J(), U.jump(G()), q(!1));
+	function He() {
+		N.current != null && (K(), V.jump(U()), G(!1));
 	}
-	function X(e, r = !0) {
-		let i = n(e, 0, I.current.max);
-		if (J(), U.jump(G()), A || !r) {
-			q(!1), U.jump(i);
+	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);
 			return;
 		}
-		R.current = i, q(!0), L.current = pe(U, i, {
+		P.current = i, G(!0), N.current = _e(V, i, {
 			...t("medium"),
-			onComplete: Y
+			onComplete: q
 		});
 	}
-	function De(e) {
-		let { max: t, points: r } = I.current, a = (e) => i(r, n(e, 0, t));
-		if (J(), A) {
-			X(v ? a(U.get()) : U.get(), !1);
+	y(() => {
+		Re.current = w, ze.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);
 			return;
 		}
-		let o = U.get(), s = v ? a(o) : n(o, 0, t);
+		let o = V.get(), s = g ? i(o) : r(o, 0, t);
 		if (e === 0 && s === o) {
-			Y();
+			q();
 			return;
 		}
-		q(!0), L.current = pe(U, s === o ? o + Math.sign(e) : s, {
+		G(!0), N.current = _e(V, s === o ? o + Math.sign(e) : s, {
 			type: "inertia",
 			velocity: e,
 			min: 0,
 			max: t,
-			modifyTarget: v ? a : void 0,
-			onComplete: Y
+			modifyTarget: g ? i : void 0,
+			onComplete: q
 		});
 	}
-	let Z = y(() => {
-		let e = j.current, t = M.current, n = N.current;
-		if (!e || !t || !n || W.get() !== 0) return;
-		if (b) {
+	let Y = _(() => {
+		let e = O.current, t = k.current, n = A.current;
+		if (!e || !t || !n || H.get() !== 0) return;
+		if (v) {
 			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 i = getComputedStyle(t).direction === "rtl" ? -1 : 1, o = t.clientWidth, s = t.scrollWidth, c = r(o, s), u = Array.from(n.querySelectorAll(":scope > [data-carousel-item]")), f = u[0]?.getBoundingClientRect(), p = f == null ? [] : u.map((e) => {
+		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 t = e.getBoundingClientRect();
-			return i === 1 ? t.left - f.left : f.right - t.right;
+			return r === 1 ? t.left - d.left : d.right - t.right;
 		});
-		I.current = {
+		M.current = {
 			max: c,
-			direction: i,
-			points: l(p, c)
+			direction: r,
+			points: u(p, c),
+			offsets: p
 		};
-		let m = P.current;
-		m && e.style.setProperty("--carousel-thumb", String(d(o, s, m.clientWidth))), K();
-		let h = a(o, s);
-		Ce((e) => e === h ? e : h);
+		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);
 	}, [
-		b,
-		W,
-		K
+		v,
+		H,
+		W
 	]);
-	ue(() => {
-		if (Z(), window.addEventListener("resize", Z), typeof ResizeObserver > "u") return () => window.removeEventListener("resize", Z);
-		let e = new ResizeObserver(Z);
+	pe(() => {
+		if (Y(), window.addEventListener("resize", Y), typeof ResizeObserver > "u") return () => window.removeEventListener("resize", Y);
+		let e = new ResizeObserver(Y);
 		for (let t of [
-			j.current,
-			M.current,
-			N.current,
-			P.current
+			O.current,
+			k.current,
+			A.current,
+			j.current
 		]) t && e.observe(t);
 		return () => {
-			e.disconnect(), window.removeEventListener("resize", Z);
+			e.disconnect(), window.removeEventListener("resize", Y);
 		};
-	}, [Z, w]), le(() => () => L.current?.stop(), []);
-	function Oe(e) {
-		if (e.pointerType !== "mouse" || e.button !== 0 || I.current.max <= 0) return;
-		let t = L.current != null;
-		J(), U.jump(G()), z.current = {
+	}, [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);
+	}, [
+		T,
+		R,
+		g
+	]);
+	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 = {
 			pointerId: e.pointerId,
 			startX: e.clientX,
-			startPosition: G(),
+			startPosition: U(),
 			active: !1,
 			interrupted: t
 		};
 	}
-	function ke(e) {
-		let t = z.current;
+	function Ge(e) {
+		let t = F.current;
 		if (!(!t || t.pointerId !== e.pointerId)) {
 			if (e.buttons === 0) {
-				Q(e);
+				X(e);
 				return;
 			}
 			if (!t.active) {
 				if (Math.abs(e.clientX - t.startX) < 4) return;
-				t.active = !0, t.startX = e.clientX, T(e.currentTarget, e.pointerId), e.currentTarget.dataset.dragging = "", q(!0);
+				t.active = !0, t.startX = e.clientX, Ee(e.currentTarget, e.pointerId), e.currentTarget.dataset.dragging = "", G(!0);
 			}
-			U.set(t.startPosition - I.current.direction * (e.clientX - t.startX));
+			V.set(t.startPosition - M.current.direction * (e.clientX - t.startX));
 		}
 	}
-	function Q(e) {
-		let t = z.current;
+	function X(e) {
+		let t = F.current;
 		if (!t || t.pointerId !== e.pointerId) return;
-		if (z.current = null, !t.active) {
-			t.interrupted && De(0);
+		if (F.current = null, !t.active) {
+			t.interrupted && Ue(0);
 			return;
 		}
 		let n = e.currentTarget;
-		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.dragging, V.current = !0, window.setTimeout(() => {
-			V.current = !1;
-		}, 0), De(e.type === "pointercancel" ? 0 : U.getVelocity());
+		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());
 	}
-	function Ae(e) {
-		V.current && (V.current = !1, e.preventDefault(), e.stopPropagation());
+	function Ke(e) {
+		L.current && (L.current = !1, e.preventDefault(), e.stopPropagation());
 	}
-	function je(e) {
+	function qe(e) {
 		if (e.target !== e.currentTarget || e.altKey || e.ctrlKey || e.metaKey) return;
-		let { max: t, points: n, direction: r } = I.current, i = R.current ?? G(), a;
+		let { max: t, points: n, direction: r } = M.current, i = P.current ?? U(), a;
 		switch (e.key) {
 			case "ArrowRight":
-				a = u(n, i, r);
+				a = d(n, i, r);
 				break;
 			case "ArrowLeft":
-				a = u(n, i, r === 1 ? -1 : 1);
+				a = d(n, i, r === 1 ? -1 : 1);
 				break;
 			case "Home":
 				a = 0;
@@ -189,122 +214,135 @@ function D({ "aria-label": f, "aria-labelledby": g, itemWidth: _ = p, snap: v =
 				break;
 			default: return;
 		}
-		e.preventDefault(), X(a);
+		e.preventDefault(), J(a);
 	}
-	function Me(e) {
-		let t = P.current, n = F.current, { max: r, points: a, direction: o } = I.current;
+	function Je(e) {
+		let t = j.current, n = Me.current, { max: r, points: i, direction: o } = M.current;
 		if (!t || !n || r <= 0 || e.button !== 0) return;
 		e.preventDefault();
-		let l = t.getBoundingClientRect(), u = n.getBoundingClientRect();
-		if (e.clientX >= u.left - be && e.clientX <= u.right + be) {
-			J(), U.jump(G()), q(!0), T(e.currentTarget, e.pointerId), e.currentTarget.dataset.scrubbing = "", B.current = {
+		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 = {
 				pointerId: e.pointerId,
 				startX: e.clientX,
-				startProgress: s(G(), r),
-				travel: l.width - u.width
+				startProgress: c(U(), r),
+				travel: s.width - u.width
 			};
 			return;
 		}
-		let d = o === 1 ? e.clientX - l.left : l.right - e.clientX, f = c(d, l.width, u.width) * r;
-		X(v ? i(a, f) : f);
+		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);
 	}
-	function Ne(e) {
-		let t = B.current;
+	function Ye(e) {
+		let t = I.current;
 		if (!t || t.pointerId !== e.pointerId || t.travel <= 0) return;
-		let { max: r, direction: i } = I.current, a = i * (e.clientX - t.startX) / t.travel;
-		U.set(n(t.startProgress + a, 0, 1) * r);
+		let { max: n, direction: i } = M.current, a = i * (e.clientX - t.startX) / t.travel;
+		V.set(r(t.startProgress + a, 0, 1) * n);
 	}
-	function Pe(e) {
-		let t = B.current;
+	function Xe(e) {
+		let t = I.current;
 		if (!t || t.pointerId !== e.pointerId) return;
-		B.current = null;
+		I.current = null;
 		let n = e.currentTarget;
-		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.scrubbing, v ? X(i(I.current.points, G())) : q(!1);
+		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), delete n.dataset.scrubbing, g ? J(a(M.current.points, U())) : G(!1);
 	}
-	let $ = xe(_), Fe = {
-		"--carousel-item": String($.base),
-		"--carousel-item-sm": String($.sm),
-		"--carousel-item-md": String($.md),
-		"--carousel-item-lg": String($.lg)
-	}, Ie = D?.item ?? ye.item, Le = se.toArray(O), Re = H == null ? void 0 : String(H);
-	return /* @__PURE__ */ fe("div", {
-		ref: j,
-		className: e(ie, k),
-		style: Fe,
+	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,
 		"data-carousel": "",
-		children: [/* @__PURE__ */ C("div", {
-			className: h,
-			children: /* @__PURE__ */ C("div", {
-				ref: M,
-				role: "region",
-				"aria-label": f,
-				"aria-labelledby": g,
-				tabIndex: H === !1 ? void 0 : 0,
-				"data-carousel-viewport": "",
-				"data-overflowing": Re,
-				className: e(oe, v && "snap-x snap-mandatory data-[moving]:snap-none", x && "scroll-fade-x"),
-				style: { "--scroll-fade-s": "0px" },
-				onScroll: K,
-				onKeyDown: je,
-				onPointerDown: Oe,
-				onPointerMove: ke,
-				onPointerUp: Q,
-				onPointerCancel: Q,
-				onClickCapture: Ae,
-				onDragStart: (e) => e.preventDefault(),
-				onWheel: Ee,
-				onTouchStart: Ee,
-				children: /* @__PURE__ */ C("div", {
-					className: m,
-					children: /* @__PURE__ */ C(me.div, {
-						ref: N,
-						className: ae,
-						style: { x: we },
-						children: Le.map((e, t) => /* @__PURE__ */ C(Se, {
-							label: Ie(t + 1, Le.length),
-							children: e
-						}, ce(e) && e.key != null ? e.key : t))
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: te,
+				children: /* @__PURE__ */ x("div", {
+					ref: k,
+					role: "region",
+					"aria-label": p,
+					"aria-labelledby": ne,
+					tabIndex: R === !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"),
+					style: { "--scroll-fade-s": "0px" },
+					onScroll: W,
+					onKeyDown: qe,
+					onPointerDown: We,
+					onPointerMove: Ge,
+					onPointerUp: X,
+					onPointerCancel: X,
+					onClickCapture: Ke,
+					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),
+								children: e
+							}, fe(e) && e.key != null ? e.key : t))
+						})
 					})
 				})
-			})
-		}), w === "none" ? null : /* @__PURE__ */ C("div", {
-			"aria-hidden": "true",
-			"data-carousel-progress": "",
-			"data-overflowing": Re,
-			className: e(ee, te[w]),
-			onPointerDown: Me,
-			onPointerMove: Ne,
-			onPointerUp: Pe,
-			onPointerCancel: Pe,
-			children: /* @__PURE__ */ C("div", {
-				ref: P,
-				className: re,
-				children: /* @__PURE__ */ C("div", {
-					ref: F,
-					className: ne,
-					"data-carousel-progress-thumb": ""
+			}),
+			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": ""
+					})
 				})
-			})
-		})]
+			}),
+			C ? /* @__PURE__ */ x("p", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-carousel-counter": "",
+				"data-overflowing": $,
+				className: m,
+				children: $e
+			}) : null
+		]
 	});
 }
-function Se({ label: e, children: t }) {
-	let n = x(() => ({ label: e }), [e]);
-	return /* @__PURE__ */ C(w.Provider, {
+function ke({ label: e, children: t }) {
+	let n = me(() => ({ label: e }), [e]);
+	return /* @__PURE__ */ x(S.Provider, {
 		value: n,
 		children: t
 	});
 }
-function O({ children: t, className: n }) {
-	let r = b(w);
-	return /* @__PURE__ */ C("div", {
+function w({ children: t, className: n }) {
+	let r = v(S);
+	return /* @__PURE__ */ x("div", {
 		role: "group",
 		"aria-label": r?.label,
 		"data-carousel-item": "",
-		className: e(g, n),
+		className: e(ne, n),
 		children: t
 	});
 }
-var k = Object.assign(D, { Item: O });
+var T = Object.assign(C, { Item: w });
 //#endregion
-export { k as Carousel, f as carouselBreakpoints, p as carouselDefaultItemWidth, _ as carouselProgressPlacements };
+export { T as Carousel, p as carouselBreakpoints, h as carouselDefaultItemWidth, ae as carouselProgressPlacements };

package/dist/components/organisms/Carousel/carouselMath.d.ts

@@ -36,4 +36,9 @@ export declare function carouselThumbShare(viewWidth: number, contentWidth: numb
 export declare function carouselProgressAtPointer(pointer: number, trackWidth: number, thumbWidth: number): number;
 /** How far the row shifts for an overscroll of `overshoot` px. */
 export declare function carouselOverscrollOffset(overshoot: number): number;
+/**
+ * The item the row rests on, 0-based: the one whose leading edge is nearest `position`. At the
+ * end of the row it is the last item, which can share its resting place with several before it.
+ */
+export declare function carouselActiveIndex(itemOffsets: readonly number[], position: number, maxScroll: number): number;
 //# sourceMappingURL=carouselMath.d.ts.map

package/dist/components/organisms/Carousel/carouselMath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carouselMath.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/carouselMath.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,qEAAqE;AACrE,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,uEAAuE;AACvE,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,4EAA4E;AAC5E,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE7E;AAED,4DAA4D;AAC5D,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAEjF;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,OAAO,CAElF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAS9F;AAED,+CAA+C;AAC/C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMvF;AAED,kGAAkG;AAClG,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAQnG;AAED,yBAAyB;AACzB,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAItG;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAIzG;AAED,kEAAkE;AAClE,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAElE"}
+{"version":3,"file":"carouselMath.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/carouselMath.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,qEAAqE;AACrE,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,uEAAuE;AACvE,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,4EAA4E;AAC5E,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE7E;AAED,4DAA4D;AAC5D,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAEjF;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,OAAO,CAElF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAS9F;AAED,+CAA+C;AAC/C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMvF;AAED,kGAAkG;AAClG,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAQnG;AAED,yBAAyB;AACzB,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAItG;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAIzG;AAED,kEAAkE;AAClE,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAElE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAS/G"}

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

@@ -43,5 +43,13 @@ function l(e, n, r) {
 function u(t) {
 	return t * e;
 }
+function d(e, t, n) {
+	let r = e.length;
+	if (r === 0) return 0;
+	if (n > 0 && t >= n - 1) return r - 1;
+	let i = 0;
+	for (let n = 1; n < r; n += 1) Math.abs(e[n] - t) < Math.abs(e[i] - t) && (i = n);
+	return i;
+}
 //#endregion
-export { t as carouselClamp, n as carouselMaxScroll, a as carouselNearestSnap, r as carouselOverflows, e as carouselOverscrollElasticity, u as carouselOverscrollOffset, s as carouselProgress, l as carouselProgressAtPointer, i as carouselSnapPoints, o as carouselStep, c as carouselThumbShare };
+export { d as carouselActiveIndex, t as carouselClamp, n as carouselMaxScroll, a as carouselNearestSnap, r as carouselOverflows, e as carouselOverscrollElasticity, u as carouselOverscrollOffset, s as carouselProgress, l as carouselProgressAtPointer, i as carouselSnapPoints, o as carouselStep, c as carouselThumbShare };

package/dist/components/organisms/Carousel/carouselStyles.d.ts

@@ -46,4 +46,6 @@ export declare const carouselProgressPlacementClasses: Record<Exclude<CarouselPr
 export declare const carouselProgressTrackClasses: string;
 /** The filled part: its width is the share of the row in view, its place the row's progress. */
 export declare const carouselProgressThumbClasses: string;
+/** The "1 of 6" line under the row. Like the scrubber, it keeps its space when every item fits. */
+export declare const carouselCounterClasses: string;
 //# sourceMappingURL=carouselStyles.d.ts.map

package/dist/components/organisms/Carousel/carouselStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carouselStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/carouselStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,8CAA+C,CAAC;AAEvF;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpF,eAAO,MAAM,mBAAmB,qCAAsC,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,2GAA2G;AAC3G,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;AAErF,qGAAqG;AACrG,eAAO,MAAM,wBAAwB;;;;CAAoE,CAAC;AAE1G,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,qDAAqD,CAAC;AAEtF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAMhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAKnC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,2BAA2B,kDAAkD,CAAC;AAE3F,eAAO,MAAM,2BAA2B,kBAAkB,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8FAC2D,CAAC;AAE9F,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,4IACuG,CAAC;AAE5I,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,OAAO,CAAC,yBAAyB,EAAE,MAAM,CAAC,EAAE,MAAM,CAIvG,CAAC;AAEF,eAAO,MAAM,4BAA4B,QAIxC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,4BAA4B,QAMxC,CAAC"}
+{"version":3,"file":"carouselStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/carouselStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B,8CAA+C,CAAC;AAEvF;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpF,eAAO,MAAM,mBAAmB,qCAAsC,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,2GAA2G;AAC3G,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;AAErF,qGAAqG;AACrG,eAAO,MAAM,wBAAwB;;;;CAAoE,CAAC;AAE1G,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,qDAAqD,CAAC;AAEtF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAMhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAKnC,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,2BAA2B,kDAAkD,CAAC;AAE3F,eAAO,MAAM,2BAA2B,kBAAkB,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8FAC2D,CAAC;AAE9F,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,4IACuG,CAAC;AAE5I,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,OAAO,CAAC,yBAAyB,EAAE,MAAM,CAAC,EAAE,MAAM,CAIvG,CAAC;AAEF,eAAO,MAAM,4BAA4B,QAIxC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,4BAA4B,QAMxC,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,sBAAsB,QAC4E,CAAC"}

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

@@ -1,25 +1,26 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { focusRingTransitionClasses as t, motionTransition as n } from "../../../lib/motion.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { focusRingTransitionClasses as n, motionTransition as r } from "../../../lib/motion.js";
 //#region src/components/organisms/Carousel/carouselStyles.ts
-var r = [
+var i = [
 	"center",
 	"start",
 	"full",
 	"none"
-], i = [
+], a = [
 	"base",
 	"sm",
 	"md",
 	"lg"
-], a = {
+], o = {
 	base: 80,
 	sm: 55,
 	lg: 40
-}, o = "@container/carousel flex w-full min-w-0 flex-col", s = e("relative rounded-[var(--radius-card-shell)]", "ml-[calc(var(--carousel-bleed-left,0px)*-1)] mr-[calc(var(--carousel-bleed-right,0px)*-1)]", "has-[>[data-carousel-viewport]:focus-visible]:ring-2 has-[>[data-carousel-viewport]:focus-visible]:ring-focus-ring", "has-[>[data-carousel-viewport]:focus-visible]:ring-offset-2 has-[>[data-carousel-viewport]:focus-visible]:ring-offset-body", t), c = e("-mt-2 -mb-6 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-2 pb-6 outline-none", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", "scroll-pl-[var(--carousel-bleed-left,0px)] scroll-pr-[var(--carousel-bleed-right,0px)]", "data-[overflowing=true]:cursor-grab data-[dragging]:cursor-grabbing data-[dragging]:select-none"), l = "snap-x snap-mandatory data-[moving]:snap-none", u = "scroll-fade-x", d = "w-max min-w-full pl-[var(--carousel-bleed-left,0px)] pr-[var(--carousel-bleed-right,0px)]", f = e("flex w-max min-w-full gap-[var(--grid-column-gap,1.5rem)]", "[&_a]:[-webkit-user-drag:none] [&_img]:[-webkit-user-drag:none]"), p = e("min-w-0 shrink-0 grow-0 snap-start", "basis-[calc(var(--carousel-item)*1cqw)] sm:basis-[calc(var(--carousel-item-sm)*1cqw)]", "md:basis-[calc(var(--carousel-item-md)*1cqw)] lg:basis-[calc(var(--carousel-item-lg)*1cqw)]"), m = "group/carousel-progress relative flex h-11 w-full cursor-pointer touch-none select-none items-center data-[overflowing=false]:invisible", h = {
+}, s = "@container/carousel flex w-full min-w-0 flex-col", c = e("relative rounded-[var(--radius-card-shell)]", "ml-[calc(var(--carousel-bleed-left,0px)*-1)] mr-[calc(var(--carousel-bleed-right,0px)*-1)]", "has-[>[data-carousel-viewport]:focus-visible]:ring-2 has-[>[data-carousel-viewport]:focus-visible]:ring-focus-ring", "has-[>[data-carousel-viewport]:focus-visible]:ring-offset-2 has-[>[data-carousel-viewport]:focus-visible]:ring-offset-body", n), l = e("-mt-2 -mb-6 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-2 pb-6 outline-none", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", "scroll-pl-[var(--carousel-bleed-left,0px)] scroll-pr-[var(--carousel-bleed-right,0px)]", "data-[overflowing=true]:cursor-grab data-[dragging]:cursor-grabbing data-[dragging]:select-none"), u = "snap-x snap-mandatory data-[moving]:snap-none", d = "scroll-fade-x", f = "w-max min-w-full pl-[var(--carousel-bleed-left,0px)] pr-[var(--carousel-bleed-right,0px)]", p = e("flex w-max min-w-full gap-[var(--grid-column-gap,1.5rem)]", "[&_a]:[-webkit-user-drag:none] [&_img]:[-webkit-user-drag:none]"), m = e("min-w-0 shrink-0 grow-0 snap-start", "basis-[calc(var(--carousel-item)*1cqw)] sm:basis-[calc(var(--carousel-item-sm)*1cqw)]", "md:basis-[calc(var(--carousel-item-md)*1cqw)] lg:basis-[calc(var(--carousel-item-lg)*1cqw)]"), h = "group/carousel-progress relative flex h-11 w-full cursor-pointer touch-none select-none items-center data-[overflowing=false]:invisible", g = {
 	center: "self-center sm:w-60",
 	start: "self-start sm:w-60",
 	full: ""
-}, g = e("relative h-1 w-full rounded-full bg-neutral transition-[height]", "group-data-[scrubbing]/carousel-progress:h-1.5", n("fast")), _ = e("absolute inset-y-0 w-[calc(var(--carousel-thumb,0)*100%)] cursor-grab rounded-full bg-muted", "start-[calc(var(--carousel-progress,0)*(1_-_var(--carousel-thumb,0))*100%)]", "transition-colors group-hover/carousel-progress:bg-fg", "group-data-[scrubbing]/carousel-progress:cursor-grabbing group-data-[scrubbing]/carousel-progress:bg-fg", n("fast"));
+}, _ = e("relative h-1 w-full rounded-full bg-neutral transition-[height]", "group-data-[scrubbing]/carousel-progress:h-1.5", r("fast")), v = e("absolute inset-y-0 w-[calc(var(--carousel-thumb,0)*100%)] cursor-grab rounded-full bg-muted", "start-[calc(var(--carousel-progress,0)*(1_-_var(--carousel-thumb,0))*100%)]", "transition-colors group-hover/carousel-progress:bg-fg", "group-data-[scrubbing]/carousel-progress:cursor-grabbing group-data-[scrubbing]/carousel-progress:bg-fg", r("fast")), y = e(t("caption"), "mt-2 self-center text-muted tabular-nums data-[overflowing=false]:invisible");
 //#endregion
-export { i as carouselBreakpoints, a as carouselDefaultItemWidth, d as carouselExtentClasses, s as carouselFrameClasses, p as carouselItemClasses, m as carouselProgressClasses, h as carouselProgressPlacementClasses, r as carouselProgressPlacements, _ as carouselProgressThumbClasses, g as carouselProgressTrackClasses, o as carouselRootClasses, f as carouselTrackClasses, c as carouselViewportClasses, u as carouselViewportFadeClasses, l as carouselViewportSnapClasses };
+export { a as carouselBreakpoints, y as carouselCounterClasses, o as carouselDefaultItemWidth, f as carouselExtentClasses, c as carouselFrameClasses, m as carouselItemClasses, h as carouselProgressClasses, g as carouselProgressPlacementClasses, i as carouselProgressPlacements, v as carouselProgressThumbClasses, _ as carouselProgressTrackClasses, s as carouselRootClasses, p as carouselTrackClasses, l as carouselViewportClasses, d as carouselViewportFadeClasses, u as carouselViewportSnapClasses };