@mortenbrudvik/waveui 0.12.0 → 0.13.0

package/dist/components/layout/Carousel.mjs

@@ -2,205 +2,343 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
 import { warnOnce as r } from "../../lib/dev.mjs";
-import { slotRendersContent as i } from "../../lib/slot.mjs";
-import { composeEventHandlers as a } from "../../lib/composeEventHandlers.mjs";
-import { carouselClassNames as o, carouselItemClassNames as s } from "../../lib/classNames.mjs";
-import { useEventCallback as ee } from "../../hooks/useEventCallback.mjs";
+import { renderSlot as i, slotRendersContent as a } from "../../lib/slot.mjs";
+import { composeEventHandlers as o } from "../../lib/composeEventHandlers.mjs";
+import { carouselClassNames as s, carouselItemClassNames as ee } from "../../lib/classNames.mjs";
+import { useEventCallback as c } from "../../hooks/useEventCallback.mjs";
 import { useControllable as te } from "../../hooks/useControllable.mjs";
 import { useId as ne } from "../../hooks/useId.mjs";
-import { useMergedRefs as re } from "../../hooks/useMergedRefs.mjs";
-import { focusableDisabledProps as c, preventIfDisabled as l } from "../../lib/aria.mjs";
-import { usePrefersReducedMotion as ie } from "../../hooks/usePrefersReducedMotion.mjs";
-import { useDirection as ae } from "../../hooks/useDirection.mjs";
-import { disabledStyles as u, focusRing as d, forcedColors as oe } from "../../lib/styles.mjs";
-import { ChevronLeftIcon as se, ChevronRightIcon as ce } from "../../lib/icons.mjs";
-import * as f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { getArrowIntent as re } from "../../lib/direction.mjs";
+import { useRovingTabIndex as ie } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as ae } from "../../hooks/useMergedRefs.mjs";
+import { focusableDisabledProps as oe, preventIfDisabled as se } from "../../lib/aria.mjs";
+import { usePrefersReducedMotion as ce } from "../../hooks/usePrefersReducedMotion.mjs";
+import { useDirection as le } from "../../hooks/useDirection.mjs";
+import { focusRing as ue, forcedColors as de } from "../../lib/styles.mjs";
+import { ChevronLeftIcon as fe, ChevronRightIcon as pe } from "../../lib/icons.mjs";
+import { CarouselContext as me } from "./Carousel.context.mjs";
+import { CAROUSEL_CONTROL_BASE as l, CAROUSEL_CONTROL_LAYOUT as he } from "./Carousel.styles.mjs";
+import { CarouselButton as ge } from "./Carousel.button.mjs";
+import { useCarouselDrag as _e } from "./Carousel.drag.mjs";
+import { clampToPage as ve, lastPageStart as ye, pageCount as be } from "./Carousel.groups.mjs";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/layout/Carousel.tsx
-var le = "Pause slide rotation", ue = "Start slide rotation", de = "Previous slide", fe = "Next slide", pe = "Choose slide", me = (e, t) => `Slide ${e + 1} of ${t}`, he = "carousel", ge = "slide";
-function h(e, t) {
-	return t <= 0 || !Number.isFinite(e) ? 0 : Math.min(Math.max(Math.trunc(e), 0), t - 1);
+var xe = "Pause slide rotation", Se = "Start slide rotation", Ce = "Previous slide", we = "Next slide", Te = "Choose slide", Ee = (e, t) => `Slide ${e + 1} of ${t}`, De = "carousel", Oe = "slide", ke = (e, t, n) => `Slides ${e} to ${t} of ${n}`;
+function Ae(e, t, n) {
+	let r = u.useCallback((r) => {
+		if (!e || !t || typeof ResizeObserver > "u") return () => {};
+		let i = new ResizeObserver(r);
+		return i.observe(t), n && i.observe(n), () => i.disconnect();
+	}, [
+		e,
+		t,
+		n
+	]), [i, a, o] = u.useSyncExternalStore(r, () => {
+		if (!e || !t || !n) return "1:0:0";
+		let r = n.offsetWidth, i = t.clientWidth;
+		return `${r > 0 ? Math.max(1, Math.floor(i / r)) : 1}:${r}:${i}`;
+	}, () => "1:0:0").split(":").map(Number);
+	return {
+		perPage: i,
+		slideWidth: a,
+		rootWidth: o
+	};
 }
-function _e(e) {
+function je(e) {
 	return e instanceof Element && e.closest("[data-carousel-rotation]") !== null;
 }
-var g = [
-	"absolute z-10 inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-2",
-	"not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed",
-	d,
-	u
-].join(" "), ve = () => /* @__PURE__ */ m("svg", {
+function Me(e) {
+	return typeof e == "string" ? { src: e } : e;
+}
+var Ne = () => /* @__PURE__ */ f("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: [/* @__PURE__ */ p("rect", {
+	children: [/* @__PURE__ */ d("rect", {
 		x: "4",
 		y: "3",
 		width: "3",
 		height: "10",
 		rx: "1"
-	}), /* @__PURE__ */ p("rect", {
+	}), /* @__PURE__ */ d("rect", {
 		x: "9",
 		y: "3",
 		width: "3",
 		height: "10",
 		rx: "1"
 	})]
-}), ye = () => /* @__PURE__ */ p("svg", {
+}), Pe = () => /* @__PURE__ */ d("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ p("path", { d: "M5 3.5v9a.5.5 0 0 0 .77.42l7-4.5a.5.5 0 0 0 0-.84l-7-4.5A.5.5 0 0 0 5 3.5Z" })
-}), _ = ({ value: s, defaultValue: u = 0, onValueChange: _, autoPlay: y = !1, autoPlayInterval: b = 5e3, autoPlayLabels: x, labels: S, loop: C = !1, className: w, children: be, onMouseEnter: xe, onMouseLeave: Se, onFocus: Ce, onBlur: we, ref: Te, ...T }) => {
-	let [Ee, E] = te(s, u, _), D = ne("carousel-slides"), [De, Oe] = f.useState(null), O = re(Te, Oe), ke = ae(De), k = T.dir === "rtl" || T.dir === "ltr" ? T.dir : ke, Ae = ie(), [je, A] = f.useState(null), [j, M] = f.useState(null), [Me, N] = f.useState(!1), [Ne, P] = f.useState(!1), [Pe, F] = f.useState(!1), [Fe, I] = f.useState(!1), L = [], R = !1;
-	for (let e of t(be)) n(e.node, v) ? L.push(e) : i(e.node) && (R = !0);
-	let z = L.length;
-	f.useEffect(() => {
-		R && r("Carousel:non-item-children", "Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in Fragments; other children are not rendered. A component that renders `Carousel.Item` itself is not recognised: render the `Carousel.Item` in the Carousel and put the component inside it.");
-	}, [R]);
-	let B = h(Ee, z), V = B <= 0, H = B >= z - 1, U = z <= 1 || !C && V, W = z <= 1 || !C && H, G = j === z && !C, K = (je ?? Ae) || G, q = y && z > 1;
-	q && !C && H && !K ? M(z) : j !== null && !G && M(null);
-	let J = q && !K && !(Me && !Ne) && !(Pe && !Fe), Y = (e) => {
-		e >= 0 && e < z && e !== B && E(e);
-	}, Ie = () => Y(V ? z - 1 : B - 1), Le = () => Y(H ? 0 : B + 1), X = ee(() => {
-		E((e) => {
-			let t = h(e, z);
-			return t < z - 1 ? t + 1 : C ? 0 : e;
+	children: /* @__PURE__ */ d("path", { d: "M5 3.5v9a.5.5 0 0 0 .77.42l7-4.5a.5.5 0 0 0 0-.84l-7-4.5A.5.5 0 0 0 5 3.5Z" })
+}), p = ({ value: p, defaultValue: Fe = 0, onValueChange: Ie, autoPlay: Le = !1, autoPlayInterval: Re = 5e3, autoPlayLabels: ze, labels: h, loop: g = !1, groupSize: Be = 1, align: Ve = "start", draggable: He = !1, controlsLayout: _ = "overlay", appearance: v = "flat", className: Ue, children: We, onMouseEnter: Ge, onMouseLeave: Ke, onFocus: qe, onBlur: Je, ref: Ye, ...y }) => {
+	let [Xe, Ze] = te(p, Fe, Ie), b = ne("carousel-slides"), [Qe, $e] = u.useState(null), et = ae(Ye, $e), tt = le(Qe), x = y.dir === "rtl" || y.dir === "ltr" ? y.dir : tt, nt = ce(), [rt, it] = u.useState(null), [S, at] = u.useState(null), [ot, st] = u.useState(null), C = Be === "auto", w = Ae(C, ot, rt), T = C ? w.perPage : Math.max(1, Math.floor(Be) || 1), [ct, lt] = u.useState(null), [ut, E] = u.useState(null), [dt, ft] = u.useState(!1), [pt, mt] = u.useState(!1), [ht, gt] = u.useState(!1), [_t, D] = u.useState(!1), O = [], k = {}, A = !1;
+	for (let e of t(We)) if (n(e.node, m)) O.push({
+		...e,
+		thumbnail: e.node.props.thumbnail
+	});
+	else if (n(e.node, ge)) {
+		let t = e.node.props.direction === "next" ? "next" : "previous";
+		k[t] ? A = !0 : k[t] = u.cloneElement(e.node, { key: e.key });
+	} else a(e.node) && (A = !0);
+	let vt = O.some((e) => e.thumbnail !== void 0), j = O.length;
+	u.useEffect(() => {
+		A && r("Carousel:non-item-children", "Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in Fragments; other children are not rendered. A component that renders `Carousel.Item` itself is not recognised: render the `Carousel.Item` in the Carousel and put the component inside it.");
+	}, [A]);
+	let M = ve(Xe, T, j), N = be(j, T), P = ye(j, T), F = M <= 0, I = M >= P, L = N <= 1 || !g && F, R = N <= 1 || !g && I, yt = ut === j && !g, z = (ct ?? nt) || yt, B = Le && N > 1;
+	B && !g && I && !z ? E(j) : ut !== null && !yt && E(null);
+	let V = _e({
+		enabled: He && N > 1,
+		dir: x,
+		onCommit: (e) => {
+			e === 1 ? I ? g && U(0) : U(M + T) : e === -1 && (F ? g && U(P) : U(M - T));
+		}
+	}), bt = dt && !pt || V.dragging, H = B && !z && !bt && !(ht && !_t), U = (e) => {
+		e >= 0 && e < j && e !== M && Ze(e);
+	}, W = () => U(F ? P : M - T), G = () => U(I ? 0 : M + T), xt = c(() => {
+		Ze((e) => {
+			let t = ve(e, T, j);
+			return t < P ? t + T : g ? 0 : e;
 		});
 	});
-	f.useEffect(() => {
-		if (!J) return;
-		let e = setInterval(X, b);
+	u.useEffect(() => {
+		if (!H) return;
+		let e = setInterval(xt, Re);
 		return () => clearInterval(e);
 	}, [
-		J,
-		b,
-		X
+		H,
+		Re,
+		xt
 	]);
-	let Re = () => {
-		K ? (!C && H && Y(0), M(null), A(!1), I(!0)) : (A(!0), I(!1));
-	}, Z = {
-		onMouseEnter: a(xe, () => N(!0)),
-		onMouseLeave: a(Se, () => N(!1)),
-		onFocus: a(Ce, (e) => {
+	let St = () => {
+		z ? (!g && I && U(0), E(null), lt(!1), D(!0)) : (lt(!0), D(!1));
+	}, Ct = {
+		onMouseEnter: o(Ge, () => ft(!0)),
+		onMouseLeave: o(Ke, () => ft(!1)),
+		onFocus: o(qe, (e) => {
 			let t = e.relatedTarget, n = !(t instanceof Node && e.currentTarget.contains(t));
-			F(!0), (n || !_e(e.target)) && I(!1);
+			gt(!0), (n || !je(e.target)) && D(!1);
 		}),
-		onBlur: a(we, (e) => {
+		onBlur: o(Je, (e) => {
 			let t = e.relatedTarget;
-			t instanceof Node && e.currentTarget.contains(t) || (F(!1), I(!1));
+			t instanceof Node && e.currentTarget.contains(t) || (gt(!1), D(!1));
 		})
-	};
-	if (z === 0) return /* @__PURE__ */ p("div", {
-		ref: O,
-		className: e(o.root, "relative", w),
-		...Z,
-		...T
+	}, K = T > 1, q = Math.min(M + T, j), wt = u.useMemo(() => K ? Array.from({ length: q - M }, (e, t) => String(M + t)) : [], [
+		K,
+		M,
+		q
+	]), J = ie({
+		items: wt,
+		activeValue: String(M),
+		orientation: "horizontal",
+		loop: !1,
+		dir: x,
+		tabStop: "last-focused"
+	}), Tt = ae(J.containerProps.ref, at), Y = u.useRef(null);
+	u.useLayoutEffect(() => {
+		let e = Y.current;
+		if (!e || !S) return;
+		Y.current = null;
+		let t = e === "first" ? M : q - 1;
+		S.querySelector(`[data-roving-value="${t}"]`)?.focus();
+	}, [
+		M,
+		q,
+		S
+	]);
+	let Et = (e) => {
+		let t = e.target.getAttribute("data-roving-value"), n = re(e.key, {
+			orientation: "horizontal",
+			dir: x
+		});
+		if (t !== null && n && !e.defaultPrevented && !e.altKey && !e.ctrlKey && !e.metaKey) {
+			let r = Number(t);
+			if (n === "next" && r === q - 1) {
+				e.preventDefault(), R || (Y.current = "first", G());
+				return;
+			}
+			if (n === "prev" && r === M) {
+				e.preventDefault(), L || (Y.current = "last", W());
+				return;
+			}
+		}
+		J.containerProps.onKeyDown(e);
+	}, X = h?.previous ?? Ce, Z = h?.next ?? we, Dt = c(() => W()), Ot = c(() => G()), kt = u.useMemo(() => ({
+		trackId: b,
+		previousLabel: X,
+		nextLabel: Z,
+		previousDisabled: L,
+		nextDisabled: R,
+		goPrevious: Dt,
+		goNext: Ot,
+		controlsLayout: _,
+		dir: x
+	}), [
+		b,
+		X,
+		Z,
+		L,
+		R,
+		Dt,
+		Ot,
+		_,
+		x
+	]);
+	if (j === 0) return /* @__PURE__ */ d("div", {
+		ref: et,
+		"data-controls-layout": _,
+		"data-appearance": v,
+		className: e(s.root, "relative", Ue),
+		...Ct,
+		...y
 	});
-	let ze = (k === "rtl" ? 1 : -1) * B * 100, Q = k === "rtl" ? "-scale-x-100" : void 0, Be = x?.pause ?? le, Ve = x?.play ?? ue, He = S?.previous ?? de, Ue = S?.next ?? fe, We = S?.picker ?? pe, $ = S?.slide ?? me, Ge = S?.carouselRoleDescription ?? he, Ke = S?.slideRoleDescription ?? ge;
-	return /* @__PURE__ */ m("div", {
-		ref: O,
-		role: "region",
-		"aria-roledescription": Ge,
-		"aria-label": "Carousel",
-		className: e(o.root, "relative isolate overflow-hidden", w),
-		...Z,
-		...T,
+	let Q = x === "rtl" ? 1 : -1, At = `translateX(${M / T * Q * 100}%)`;
+	if (V.offsetPx !== 0 && (At = `translateX(calc(${M / T * Q * 100}% + ${V.offsetPx}px))`), C) {
+		let e = Math.max(0, w.rootWidth - T * w.slideWidth), t = Ve === "center" ? e / 2 : Ve === "end" ? e : 0;
+		At = `translateX(${Q * M * w.slideWidth + (x === "rtl" ? -t : t) + V.offsetPx + 0}px)`;
+	}
+	let jt = h?.slides ?? ke, Mt = (e) => {
+		let t = Math.min(e + T, j);
+		return t - e === 1 ? Lt(e, j) : jt(e + 1, t, j);
+	}, Nt = x === "rtl" ? "-scale-x-100" : void 0, Pt = ze?.pause ?? xe, Ft = ze?.play ?? Se, It = h?.picker ?? Te, Lt = h?.slide ?? Ee, Rt = h?.carouselRoleDescription ?? De, zt = h?.slideRoleDescription ?? Oe, $ = _ === "inline" || _ === "inline-wide", Bt = he[_], Vt = k.previous ?? /* @__PURE__ */ d("button", {
+		type: "button",
+		"aria-label": X,
+		"aria-controls": b,
+		...oe(L),
+		onClick: se(L, W),
+		className: e(s.previousButton, l, Bt.previous),
+		children: /* @__PURE__ */ d(fe, {
+			size: 16,
+			className: Nt
+		})
+	}, "previous"), Ht = k.next ?? /* @__PURE__ */ d("button", {
+		type: "button",
+		"aria-label": Z,
+		"aria-controls": b,
+		...oe(R),
+		onClick: se(R, G),
+		className: e(s.nextButton, l, Bt.next),
+		children: /* @__PURE__ */ d(pe, {
+			size: 16,
+			className: Nt
+		})
+	}, "next"), Ut = /* @__PURE__ */ f("div", {
+		ref: st,
+		className: e(s.viewport, "relative min-w-0 flex-1 overflow-hidden"),
 		children: [
-			q && /* @__PURE__ */ p("button", {
-				type: "button",
-				"data-carousel-rotation": "",
-				"aria-label": K ? Ve : Be,
-				"aria-controls": D,
-				onClick: Re,
-				onMouseEnter: () => P(!0),
-				onMouseLeave: () => P(!1),
-				className: e(o.autoPlayButton, g, "top-2 start-2"),
-				children: p(K ? ye : ve, {})
-			}),
-			/* @__PURE__ */ p("div", {
-				id: D,
-				className: e(o.track, "flex transition-transform duration-300 ease-in-out motion-reduce:transition-none"),
-				style: { transform: `translateX(${ze}%)` },
-				children: L.map(({ key: t, node: n }, r) => {
-					let i = r === B;
-					return /* @__PURE__ */ p("div", {
+			/* @__PURE__ */ d("div", {
+				id: b,
+				className: e(s.track, V.dragging ? "flex" : "flex transition-transform duration-300 ease-in-out motion-reduce:transition-none", He && "touch-pan-y"),
+				style: { transform: At },
+				"data-dragging": V.dragging ? "" : void 0,
+				...V.handlers,
+				...K ? J.containerProps : null,
+				ref: K ? Tt : at,
+				onKeyDown: K ? Et : void 0,
+				children: O.map(({ key: t, node: n }, r) => {
+					let i = r >= M && r < M + T;
+					return /* @__PURE__ */ d("div", {
+						ref: r === 0 ? it : void 0,
 						role: "group",
-						"aria-roledescription": Ke,
-						"aria-label": $(r, z),
+						"aria-roledescription": zt,
+						"aria-label": Lt(r, j),
 						"aria-hidden": !i || void 0,
 						inert: !i,
-						className: e(o.slide, "w-full shrink-0"),
+						"data-roving-value": K && i ? String(r) : void 0,
+						tabIndex: K && i ? J.getTabIndex(String(r)) : void 0,
+						className: e(s.slide, C ? "w-auto shrink-0" : T === 1 ? "w-full shrink-0" : "shrink-0", K && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"),
+						style: !C && T > 1 ? { width: `calc(100% / ${T})` } : void 0,
 						children: n
 					}, t);
 				})
 			}),
-			/* @__PURE__ */ p("div", {
-				"aria-live": J ? "off" : "polite",
-				"aria-atomic": "true",
-				className: "sr-only",
-				children: $(B, z)
-			}),
-			/* @__PURE__ */ p("button", {
-				type: "button",
-				"aria-label": He,
-				"aria-controls": D,
-				...c(U),
-				onClick: l(U, Ie),
-				className: e(o.previousButton, g, "top-1/2 start-2 -translate-y-1/2"),
-				children: /* @__PURE__ */ p(se, {
-					size: 16,
-					className: Q
-				})
-			}),
-			/* @__PURE__ */ p("button", {
-				type: "button",
-				"aria-label": Ue,
-				"aria-controls": D,
-				...c(W),
-				onClick: l(W, Le),
-				className: e(o.nextButton, g, "top-1/2 end-2 -translate-y-1/2"),
-				children: /* @__PURE__ */ p(ce, {
-					size: 16,
-					className: Q
-				})
-			}),
-			/* @__PURE__ */ p("div", {
-				role: "group",
-				"aria-label": We,
-				className: e(o.picker, "absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit"),
-				children: L.map(({ key: t }, n) => {
-					let r = n === B;
-					return /* @__PURE__ */ p("button", {
-						type: "button",
-						"aria-label": $(n, z),
-						"aria-current": r ? "true" : void 0,
-						onClick: () => Y(n),
-						className: e(o.pickerButton, "group inline-flex h-6 min-w-6 items-center justify-center", d),
-						children: /* @__PURE__ */ p("span", {
-							"aria-hidden": "true",
-							className: e(o.pickerIndicator, "block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none", r ? e("w-5 bg-primary", oe.selectedLeaf) : "w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none")
-						})
-					}, t);
-				})
-			})
+			!$ && Vt,
+			!$ && Ht
 		]
 	});
+	return /* @__PURE__ */ d(me.Provider, {
+		value: kt,
+		children: /* @__PURE__ */ f("div", {
+			ref: et,
+			role: "region",
+			"aria-roledescription": Rt,
+			"aria-label": "Carousel",
+			"data-controls-layout": _,
+			"data-appearance": v,
+			className: e(s.root, "relative isolate overflow-hidden", v === "elevated" && "rounded-md shadow-4", Ue),
+			...Ct,
+			...y,
+			children: [
+				B && /* @__PURE__ */ d("button", {
+					type: "button",
+					"data-carousel-rotation": "",
+					"aria-label": z ? Ft : Pt,
+					"aria-controls": b,
+					onClick: St,
+					onMouseEnter: () => mt(!0),
+					onMouseLeave: () => mt(!1),
+					className: e(s.autoPlayButton, l, "absolute z-20 h-8 w-8 rounded-full border border-border bg-background shadow-2 top-2", $ ? "start-12" : "start-2"),
+					children: d(z ? Pe : Ne, {})
+				}),
+				$ ? /* @__PURE__ */ f("div", {
+					className: "flex items-stretch",
+					children: [
+						Vt,
+						Ut,
+						Ht
+					]
+				}) : Ut,
+				/* @__PURE__ */ d("div", {
+					"aria-live": H ? "off" : "polite",
+					"aria-atomic": "true",
+					className: "sr-only",
+					children: Mt(M)
+				}),
+				/* @__PURE__ */ d("div", {
+					role: "group",
+					"aria-label": It,
+					className: e(s.picker, vt ? "relative mx-auto flex w-fit flex-wrap justify-center gap-2 p-2" : "absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit"),
+					children: O.filter((e, t) => t % T === 0).map(({ key: t, thumbnail: n }, r) => {
+						let a = r * T, o = a === M;
+						return /* @__PURE__ */ d("button", {
+							type: "button",
+							"aria-label": Mt(a),
+							"aria-current": o ? "true" : void 0,
+							onClick: () => U(a),
+							className: e(s.pickerButton, "group inline-flex items-center justify-center", n === void 0 ? "h-6 min-w-6" : "rounded-md p-0.5", ue),
+							children: n === void 0 ? /* @__PURE__ */ d("span", {
+								"aria-hidden": "true",
+								className: e(s.pickerIndicator, "block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none", o ? e("w-5 bg-primary", de.selectedLeaf) : "w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none")
+							}) : i(Me(n), "img", e(ee.thumbnail, "block h-12 w-16 rounded object-cover", o ? e("outline-2 outline-primary", de.selectedContainer) : "opacity-70 group-hover:opacity-100"), {
+								alt: "",
+								draggable: !1
+							})
+						}, t);
+					})
+				})
+			]
+		})
+	});
 };
-_.displayName = "Carousel";
-var v = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ p("div", {
-	ref: r,
-	className: e(s.root, "p-4", t),
-	...i,
-	children: n
+p.displayName = "Carousel";
+var m = ({ thumbnail: t, className: n, children: r, ref: i, ...a }) => /* @__PURE__ */ d("div", {
+	ref: i,
+	className: e(ee.root, "p-4", n),
+	...a,
+	children: r
+});
+m.displayName = "CarouselItem";
+var Fe = /* @__PURE__ */ Object.assign(p, {
+	Item: m,
+	Button: ge
 });
-v.displayName = "CarouselItem";
-var y = /* @__PURE__ */ Object.assign(_, { Item: v });
 //#endregion
-export { y as Carousel, v as CarouselItem };
+export { Fe as Carousel, m as CarouselItem };
 
 //# sourceMappingURL=Carousel.mjs.map