@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/layout/Carousel.mjs

@@ -4,185 +4,186 @@ import { flattenChildren as t, isElementOfType as n } from "../../lib/children.m
 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 { 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 o, preventIfDisabled as s } from "../../lib/aria.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 c, focusRing as l, forcedColors as oe } from "../../lib/styles.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 u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import * as f from "react";
+import { jsx as p, jsxs as m } 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 p(e, t) {
+function h(e, t) {
 	return t <= 0 || !Number.isFinite(e) ? 0 : Math.min(Math.max(Math.trunc(e), 0), t - 1);
 }
 function _e(e) {
 	return e instanceof Element && e.closest("[data-carousel-rotation]") !== null;
 }
-var m = [
+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",
-	l,
-	c
-].join(" "), ve = () => /* @__PURE__ */ f("svg", {
+	d,
+	u
+].join(" "), ve = () => /* @__PURE__ */ m("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: [/* @__PURE__ */ d("rect", {
+	children: [/* @__PURE__ */ p("rect", {
 		x: "4",
 		y: "3",
 		width: "3",
 		height: "10",
 		rx: "1"
-	}), /* @__PURE__ */ d("rect", {
+	}), /* @__PURE__ */ p("rect", {
 		x: "9",
 		y: "3",
 		width: "3",
 		height: "10",
 		rx: "1"
 	})]
-}), ye = () => /* @__PURE__ */ d("svg", {
+}), ye = () => /* @__PURE__ */ p("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	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" })
-}), h = ({ value: c, defaultValue: h = 0, onValueChange: _, autoPlay: be = !1, autoPlayInterval: v = 5e3, autoPlayLabels: y, labels: b, loop: x = !1, className: S, children: xe, onMouseEnter: Se, onMouseLeave: Ce, onFocus: we, onBlur: Te, ref: Ee, ...C }) => {
-	let [De, w] = te(c, h, _), T = ne("carousel-slides"), [E, Oe] = u.useState(null), D = re(Ee, Oe), ke = ae(E), O = C.dir === "rtl" || C.dir === "ltr" ? C.dir : ke, Ae = ie(), [je, k] = u.useState(null), [A, j] = u.useState(null), [Me, M] = u.useState(!1), [Ne, N] = u.useState(!1), [Pe, P] = u.useState(!1), [Fe, F] = u.useState(!1), I = [], L = !1;
-	for (let e of t(xe)) n(e.node, g) ? I.push(e) : i(e.node) && (L = !0);
-	let R = I.length;
-	u.useEffect(() => {
-		L && 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.");
-	}, [L]);
-	let z = p(De, R), B = z <= 0, V = z >= R - 1, H = R <= 1 || !x && B, U = R <= 1 || !x && V, W = A === R && !x, G = (je ?? Ae) || W, K = be && R > 1;
-	K && !x && V && !G ? j(R) : A !== null && !W && j(null);
-	let q = K && !G && !(Me && !Ne) && !(Pe && !Fe), J = (e) => {
-		e >= 0 && e < R && e !== z && w(e);
-	}, Ie = () => J(B ? R - 1 : z - 1), Le = () => J(V ? 0 : z + 1), Y = ee(() => {
-		w((e) => {
-			let t = p(e, R);
-			return t < R - 1 ? t + 1 : x ? 0 : e;
+	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;
 		});
 	});
-	u.useEffect(() => {
-		if (!q) return;
-		let e = setInterval(Y, v);
+	f.useEffect(() => {
+		if (!J) return;
+		let e = setInterval(X, b);
 		return () => clearInterval(e);
 	}, [
-		q,
-		v,
-		Y
+		J,
+		b,
+		X
 	]);
 	let Re = () => {
-		G ? (!x && V && J(0), j(null), k(!1), F(!0)) : (k(!0), F(!1));
-	}, X = {
-		onMouseEnter: a(Se, () => M(!0)),
-		onMouseLeave: a(Ce, () => M(!1)),
-		onFocus: a(we, (e) => {
+		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 t = e.relatedTarget, n = !(t instanceof Node && e.currentTarget.contains(t));
-			P(!0), (n || !_e(e.target)) && F(!1);
+			F(!0), (n || !_e(e.target)) && I(!1);
 		}),
-		onBlur: a(Te, (e) => {
+		onBlur: a(we, (e) => {
 			let t = e.relatedTarget;
-			t instanceof Node && e.currentTarget.contains(t) || (P(!1), F(!1));
+			t instanceof Node && e.currentTarget.contains(t) || (F(!1), I(!1));
 		})
 	};
-	if (R === 0) return /* @__PURE__ */ d("div", {
-		ref: D,
-		className: e("relative", S),
-		...X,
-		...C
+	if (z === 0) return /* @__PURE__ */ p("div", {
+		ref: O,
+		className: e(o.root, "relative", w),
+		...Z,
+		...T
 	});
-	let ze = (O === "rtl" ? 1 : -1) * z * 100, Z = O === "rtl" ? "-scale-x-100" : void 0, Be = y?.pause ?? le, Ve = y?.play ?? ue, Q = b?.previous ?? de, He = b?.next ?? fe, Ue = b?.picker ?? pe, $ = b?.slide ?? me, We = b?.carouselRoleDescription ?? he, Ge = b?.slideRoleDescription ?? ge;
-	return /* @__PURE__ */ f("div", {
-		ref: D,
+	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": We,
+		"aria-roledescription": Ge,
 		"aria-label": "Carousel",
-		className: e("relative isolate overflow-hidden", S),
-		...X,
-		...C,
+		className: e(o.root, "relative isolate overflow-hidden", w),
+		...Z,
+		...T,
 		children: [
-			K && /* @__PURE__ */ d("button", {
+			q && /* @__PURE__ */ p("button", {
 				type: "button",
 				"data-carousel-rotation": "",
-				"aria-label": G ? Ve : Be,
-				"aria-controls": T,
+				"aria-label": K ? Ve : Be,
+				"aria-controls": D,
 				onClick: Re,
-				onMouseEnter: () => N(!0),
-				onMouseLeave: () => N(!1),
-				className: e(m, "top-2 start-2"),
-				children: d(G ? ye : ve, {})
+				onMouseEnter: () => P(!0),
+				onMouseLeave: () => P(!1),
+				className: e(o.autoPlayButton, g, "top-2 start-2"),
+				children: p(K ? ye : ve, {})
 			}),
-			/* @__PURE__ */ d("div", {
-				id: T,
-				className: "flex transition-transform duration-300 ease-in-out motion-reduce:transition-none",
+			/* @__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: I.map(({ key: e, node: t }, n) => {
-					let r = n === z;
-					return /* @__PURE__ */ d("div", {
+				children: L.map(({ key: t, node: n }, r) => {
+					let i = r === B;
+					return /* @__PURE__ */ p("div", {
 						role: "group",
-						"aria-roledescription": Ge,
-						"aria-label": $(n, R),
-						"aria-hidden": !r || void 0,
-						inert: !r,
-						className: "w-full shrink-0",
-						children: t
-					}, e);
+						"aria-roledescription": Ke,
+						"aria-label": $(r, z),
+						"aria-hidden": !i || void 0,
+						inert: !i,
+						className: e(o.slide, "w-full shrink-0"),
+						children: n
+					}, t);
 				})
 			}),
-			/* @__PURE__ */ d("div", {
-				"aria-live": q ? "off" : "polite",
+			/* @__PURE__ */ p("div", {
+				"aria-live": J ? "off" : "polite",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: $(z, R)
+				children: $(B, z)
 			}),
-			/* @__PURE__ */ d("button", {
+			/* @__PURE__ */ p("button", {
 				type: "button",
-				"aria-label": Q,
-				"aria-controls": T,
-				...o(H),
-				onClick: s(H, Ie),
-				className: e(m, "top-1/2 start-2 -translate-y-1/2"),
-				children: /* @__PURE__ */ d(se, {
+				"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: Z
+					className: Q
 				})
 			}),
-			/* @__PURE__ */ d("button", {
+			/* @__PURE__ */ p("button", {
 				type: "button",
-				"aria-label": He,
-				"aria-controls": T,
-				...o(U),
-				onClick: s(U, Le),
-				className: e(m, "top-1/2 end-2 -translate-y-1/2"),
-				children: /* @__PURE__ */ d(ce, {
+				"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: Z
+					className: Q
 				})
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ p("div", {
 				role: "group",
-				"aria-label": Ue,
-				className: "absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit",
-				children: I.map(({ key: t }, n) => {
-					let r = n === z;
-					return /* @__PURE__ */ d("button", {
+				"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, R),
+						"aria-label": $(n, z),
 						"aria-current": r ? "true" : void 0,
-						onClick: () => J(n),
-						className: e("group inline-flex h-6 min-w-6 items-center justify-center", l),
-						children: /* @__PURE__ */ d("span", {
+						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("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")
+							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);
 				})
@@ -190,16 +191,16 @@ var m = [
 		]
 	});
 };
-h.displayName = "Carousel";
-var g = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ d("div", {
+_.displayName = "Carousel";
+var v = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ p("div", {
 	ref: r,
-	className: e("p-4", t),
+	className: e(s.root, "p-4", t),
 	...i,
 	children: n
 });
-g.displayName = "CarouselItem";
-var _ = /* @__PURE__ */ Object.assign(h, { Item: g });
+v.displayName = "CarouselItem";
+var y = /* @__PURE__ */ Object.assign(_, { Item: v });
 //#endregion
-export { _ as Carousel, g as CarouselItem };
+export { y as Carousel, v as CarouselItem };
 
 //# sourceMappingURL=Carousel.mjs.map

package/dist/components/layout/Carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.mjs","names":["useId","useId$1","React","DEFAULT_PAUSE_LABEL","DEFAULT_PLAY_LABEL","DEFAULT_PREVIOUS_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_PICKER_LABEL","defaultSlideLabel","index","total","DEFAULT_CAROUSEL_ROLE_DESCRIPTION","DEFAULT_SLIDE_ROLE_DESCRIPTION","clampIndex","isRotationControl","target","controlButton","focusRing","disabledStyles","PauseGlyph","PlayGlyph","CarouselRoot","controlledValue","rest","storedIndex","setActiveIndex","useControllable","defaultValue","onValueChange","trackId","rootEl","setRootEl","rootRef","useMergedRefs","ref","renderedDir","useDirection","dir","prefersReducedMotion","usePrefersReducedMotion","userPaused","setUserPaused","endedAt","setEndedAt","hovered","setHovered","pointerOnControl","setPointerOnControl","focusWithin","setFocusWithin","startedFromControl","setStartedFromControl","items","droppedChildren","child","flattenChildren","children","isElementOfType","CarouselItem","slotRendersContent","warnOnce","atStart","atEnd","prevDisabled","loop","nextDisabled","ended","stopped","hasRotation","autoPlay","rotating","goTo","goPrev","goNext","advance","useEventCallback","current","prev","id","autoPlayInterval","toggleRotation","rootHandlers","composeEventHandlers","onMouseEnter","onMouseLeave","onFocus","from","event","entering","onBlur","next","cn","className","offset","chevronClass","pauseLabel","autoPlayLabels","playLabel","previousLabel","labels","nextLabel","pickerLabel","slideLabel","carouselRoleDescription","slideRoleDescription","jsx","active","i","node","key","focusableDisabledProps","preventIfDisabled","ChevronLeftIcon","ChevronRightIcon","forcedColors","Carousel"],"sources":["../../../src/components/layout/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { slotRendersContent } from '../../lib/slot';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { disabledStyles, focusRing, forcedColors } from '../../lib/styles';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../lib/icons';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion';\n\n/** Accessible names of the rotation control shown while `autoPlay` is on. */\nexport interface CarouselAutoPlayLabels {\n  /** Name of the control while slides rotate (activating it stops the rotation).\n   * @default 'Pause slide rotation'\n   */\n  pause?: string;\n  /** Name of the control while rotation is stopped (activating it starts the rotation).\n   * @default 'Start slide rotation'\n   */\n  play?: string;\n}\n\n/**\n * Accessible names of the Carousel's built-in controls and slides, and the role descriptions of\n * the carousel and its slides, for localization. Each member is optional and falls back to its\n * English default. The rotation control has its own `autoPlayLabels`; the region's name comes\n * from `aria-label` or `aria-labelledby`.\n */\nexport interface CarouselLabels {\n  /** Name of the Previous button.\n   * @default 'Previous slide'\n   */\n  previous?: string;\n  /** Name of the Next button.\n   * @default 'Next slide'\n   */\n  next?: string;\n  /** Name of the group that holds the slide picker buttons.\n   * @default 'Choose slide'\n   */\n  picker?: string;\n  /**\n   * Name of the slide at `index` (zero-based, like `value`) out of `total` slides. It names the\n   * slide itself and its picker button, and is announced by the live region when that slide is\n   * shown.\n   * @default (index, total) => `Slide ${index + 1} of ${total}`\n   */\n  slide?: (index: number, total: number) => string;\n  /** How assistive technology announces the carousel region (`aria-roledescription`).\n   * @default 'carousel'\n   */\n  carouselRoleDescription?: string;\n  /** How assistive technology announces each slide (`aria-roledescription`).\n   * @default 'slide'\n   */\n  slideRoleDescription?: string;\n}\n\n/** Properties for the Carousel component. */\nexport interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled index of the currently active slide. Out-of-range values show the nearest slide. */\n  value?: number;\n  /** Default active slide index for uncontrolled usage.\n   * @default 0\n   */\n  defaultValue?: number;\n  /** Called with the new index when the active slide changes (not when it stays the same). */\n  onValueChange?: (index: number) => void;\n  /**\n   * Rotates the slides automatically. A Pause/Start control is rendered as the first focusable\n   * element. Rotation pauses while focus is anywhere inside the carousel (the control included;\n   * clicking a control also moves focus there in most browsers) or the pointer is over it (except\n   * over the control), and resumes when they leave, unless rotation is stopped. Activating Start\n   * rotates at once, also while focus stays on the control; moving focus on to other content\n   * pauses again. It starts stopped when the user prefers reduced motion. Without `loop`, rotation\n   * ends at the last slide: the control shows Start, and rotation stays stopped (also after the\n   * user moves back to an earlier slide) until Start is activated, which continues from the shown\n   * slide, or from the first one while the last is shown. The end is tied to its cause: when the\n   * number of slides changes (slides loaded later) or `loop` is turned on, rotation continues on\n   * its own, unless the user stopped it with Pause.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /** Interval in milliseconds between auto-play transitions.\n   * @default 5000\n   */\n  autoPlayInterval?: number;\n  /** Accessible names of the rotation control. */\n  autoPlayLabels?: CarouselAutoPlayLabels;\n  /**\n   * Accessible names of the Previous and Next buttons, the slide picker and the slides (also\n   * announced by the live region), and the role descriptions of the carousel and its slides, for\n   * localization. Unset members keep their English defaults.\n   */\n  labels?: CarouselLabels;\n  /** Whether the carousel loops back to the first slide after the last.\n   * @default false\n   */\n  loop?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the CarouselItem sub-component. */\nexport interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_PAUSE_LABEL = 'Pause slide rotation';\nconst DEFAULT_PLAY_LABEL = 'Start slide rotation';\nconst DEFAULT_PREVIOUS_LABEL = 'Previous slide';\nconst DEFAULT_NEXT_LABEL = 'Next slide';\nconst DEFAULT_PICKER_LABEL = 'Choose slide';\nconst defaultSlideLabel = (index: number, total: number) => `Slide ${index + 1} of ${total}`;\nconst DEFAULT_CAROUSEL_ROLE_DESCRIPTION = 'carousel';\nconst DEFAULT_SLIDE_ROLE_DESCRIPTION = 'slide';\n\nfunction clampIndex(index: number, total: number): number {\n  if (total <= 0 || !Number.isFinite(index)) return 0;\n  return Math.min(Math.max(Math.trunc(index), 0), total - 1);\n}\n\nfunction isRotationControl(target: EventTarget | null): boolean {\n  return target instanceof Element && target.closest('[data-carousel-rotation]') !== null;\n}\n\nconst controlButton = [\n  'absolute z-10 inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-2',\n  'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  focusRing,\n  disabledStyles,\n].join(' ');\n\nconst PauseGlyph = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n    <rect x=\"4\" y=\"3\" width=\"3\" height=\"10\" rx=\"1\" />\n    <rect x=\"9\" y=\"3\" width=\"3\" height=\"10\" rx=\"1\" />\n  </svg>\n);\n\nconst PlayGlyph = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n    <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\" />\n  </svg>\n);\n\n// The Carousel root, documented on the exported `Carousel` const.\nconst CarouselRoot = ({\n  value: controlledValue,\n  defaultValue = 0,\n  onValueChange,\n  autoPlay = false,\n  autoPlayInterval = 5000,\n  autoPlayLabels,\n  labels,\n  loop = false,\n  className,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ref,\n  ...rest\n}: CarouselProps) => {\n  const [storedIndex, setActiveIndex] = useControllable(\n    controlledValue,\n    defaultValue,\n    onValueChange,\n  );\n  const trackId = useId('carousel-slides');\n  const [rootEl, setRootEl] = React.useState<HTMLDivElement | null>(null);\n  const rootRef = useMergedRefs<HTMLDivElement>(ref, setRootEl);\n  // The direction that applies to the rendered root (its own or an ancestor's `dir`, e.g. an RTL\n  // section inside an LTR WaveProvider); before mount and on the server, the provider's/document's.\n  const renderedDir = useDirection(rootEl);\n  const dir = rest.dir === 'rtl' || rest.dir === 'ltr' ? rest.dir : renderedDir;\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  // Rotation state: stopped or not (the user's choice, stopped by default under reduced motion, or\n  // ended at the last slide without loop) and the temporary pauses while the pointer is over the\n  // content or focus is inside. An explicit Start overrides the focus pause while focus stays on\n  // the rotation control (APG `hasUserActivatedPlay`), so pressing Start visibly starts the\n  // rotation.\n  const [userPaused, setUserPaused] = React.useState<boolean | null>(null);\n  // The slide count at which rotation ended at the last slide (null while it has not ended), kept\n  // apart from the user's choice so the end lasts only while its cause does.\n  const [endedAt, setEndedAt] = React.useState<number | null>(null);\n  const [hovered, setHovered] = React.useState(false);\n  const [pointerOnControl, setPointerOnControl] = React.useState(false);\n  const [focusWithin, setFocusWithin] = React.useState(false);\n  const [startedFromControl, setStartedFromControl] = React.useState(false);\n\n  // Slides are the `CarouselItem` children, Fragments flattened; the element type is unwrapped, so\n  // slides written in a Server Component (lazy client references) count too (C-COMPOUND).\n  const items: Array<{ key: string; node: React.ReactNode }> = [];\n  let droppedChildren = false;\n  for (const child of flattenChildren(children)) {\n    if (isElementOfType(child.node, CarouselItem)) items.push(child);\n    else if (slotRendersContent(child.node)) droppedChildren = true;\n  }\n  const total = items.length;\n\n  React.useEffect(() => {\n    if (droppedChildren) {\n      warnOnce(\n        'Carousel:non-item-children',\n        'Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in ' +\n          'Fragments; other children are not rendered. A component that renders `Carousel.Item` ' +\n          'itself is not recognised: render the `Carousel.Item` in the Carousel and put the ' +\n          'component inside it.',\n      );\n    }\n  }, [droppedChildren]);\n\n  // Derived during render (C-HOOKS): removed slides or an out-of-range value show the nearest one.\n  const index = clampIndex(storedIndex, total);\n  const atStart = index <= 0;\n  const atEnd = index >= total - 1;\n  const prevDisabled = total <= 1 || (!loop && atStart);\n  const nextDisabled = total <= 1 || (!loop && atEnd);\n\n  // Without loop, rotation ends at the last slide (however it got there) and stays stopped: moving\n  // back to an earlier slide does not restart it, only Start does. The end applies to the slide\n  // count it happened at: once slides are added or removed, or loop is turned on, it is dropped\n  // and rotation continues unless the user stopped it (adjusting state during render, C-HOOKS).\n  const ended = endedAt === total && !loop;\n  const stopped = (userPaused ?? prefersReducedMotion) || ended;\n  const hasRotation = autoPlay && total > 1;\n  if (hasRotation && !loop && atEnd && !stopped) setEndedAt(total);\n  else if (endedAt !== null && !ended) setEndedAt(null);\n  const pausedByPointer = hovered && !pointerOnControl;\n  const pausedByFocus = focusWithin && !startedFromControl;\n  const rotating = hasRotation && !stopped && !pausedByPointer && !pausedByFocus;\n\n  // Compares with the shown (clamped) index, so re-picking the visible slide reports nothing.\n  const goTo = (target: number) => {\n    if (target >= 0 && target < total && target !== index) setActiveIndex(target);\n  };\n  const goPrev = () => goTo(atStart ? total - 1 : index - 1);\n  const goNext = () => goTo(atEnd ? 0 : index + 1);\n\n  // Reads the latest index at tick time (the updater's base), so the interval does not restart on\n  // every slide or parent render and consecutive ticks chain even before a re-render.\n  const advance = useEventCallback(() => {\n    setActiveIndex((prev) => {\n      const current = clampIndex(prev, total);\n      if (current < total - 1) return current + 1;\n      return loop ? 0 : prev;\n    });\n  });\n\n  React.useEffect(() => {\n    if (!rotating) return;\n    const id = setInterval(advance, autoPlayInterval);\n    return () => clearInterval(id);\n  }, [rotating, autoPlayInterval, advance]);\n\n  const toggleRotation = () => {\n    if (stopped) {\n      // Start: from the first slide when rotation had ended at the last one.\n      if (!loop && atEnd) goTo(0);\n      setEndedAt(null);\n      setUserPaused(false);\n      setStartedFromControl(true);\n    } else {\n      setUserPaused(true);\n      setStartedFromControl(false);\n    }\n  };\n\n  // The consumer's pointer and focus handlers composed with the pause tracking (C-COMPOSE). The\n  // empty root gets them too: the consumer's handlers still run, and a pointer or focus that leaves\n  // while there are no slides (slides being reloaded) does not keep rotation paused afterwards.\n  const rootHandlers = {\n    onMouseEnter: composeEventHandlers(onMouseEnter, () => setHovered(true)),\n    onMouseLeave: composeEventHandlers(onMouseLeave, () => setHovered(false)),\n    onFocus: composeEventHandlers(onFocus, (event: React.FocusEvent<HTMLDivElement>) => {\n      // Any focus inside pauses (APG), the rotation control included. Focus that enters from\n      // outside or moves on to other content ends the exemption of an explicit Start.\n      const from = event.relatedTarget;\n      const entering = !(from instanceof Node && event.currentTarget.contains(from));\n      setFocusWithin(true);\n      if (entering || !isRotationControl(event.target)) setStartedFromControl(false);\n    }),\n    onBlur: composeEventHandlers(onBlur, (event: React.FocusEvent<HTMLDivElement>) => {\n      const next = event.relatedTarget;\n      if (!(next instanceof Node && event.currentTarget.contains(next))) {\n        setFocusWithin(false);\n        setStartedFromControl(false);\n      }\n    }),\n  };\n\n  if (total === 0) {\n    return <div ref={rootRef} className={cn('relative', className)} {...rootHandlers} {...rest} />;\n  }\n\n  const offset = (dir === 'rtl' ? 1 : -1) * index * 100;\n  // The chevrons mirror by the same resolved direction as the track. A CSS `rtl:` variant would\n  // also match `[dir=rtl] *`, so an LTR carousel inside an RTL ancestor got mirrored chevrons.\n  const chevronClass = dir === 'rtl' ? '-scale-x-100' : undefined;\n  const pauseLabel = autoPlayLabels?.pause ?? DEFAULT_PAUSE_LABEL;\n  const playLabel = autoPlayLabels?.play ?? DEFAULT_PLAY_LABEL;\n  const previousLabel = labels?.previous ?? DEFAULT_PREVIOUS_LABEL;\n  const nextLabel = labels?.next ?? DEFAULT_NEXT_LABEL;\n  const pickerLabel = labels?.picker ?? DEFAULT_PICKER_LABEL;\n  const slideLabel = labels?.slide ?? defaultSlideLabel;\n  const carouselRoleDescription =\n    labels?.carouselRoleDescription ?? DEFAULT_CAROUSEL_ROLE_DESCRIPTION;\n  const slideRoleDescription = labels?.slideRoleDescription ?? DEFAULT_SLIDE_ROLE_DESCRIPTION;\n\n  return (\n    <div\n      ref={rootRef}\n      role=\"region\"\n      aria-roledescription={carouselRoleDescription}\n      aria-label=\"Carousel\"\n      // A stacking context of its own: the controls' z-index cannot lift them over page headers.\n      className={cn('relative isolate overflow-hidden', className)}\n      {...rootHandlers}\n      {...rest}\n    >\n      {hasRotation && (\n        <button\n          type=\"button\"\n          data-carousel-rotation=\"\"\n          aria-label={stopped ? playLabel : pauseLabel}\n          aria-controls={trackId}\n          onClick={toggleRotation}\n          // The pointer over the control does not pause (APG): the user is operating it.\n          onMouseEnter={() => setPointerOnControl(true)}\n          onMouseLeave={() => setPointerOnControl(false)}\n          className={cn(controlButton, 'top-2 start-2')}\n        >\n          {stopped ? <PlayGlyph /> : <PauseGlyph />}\n        </button>\n      )}\n      <div\n        id={trackId}\n        className=\"flex transition-transform duration-300 ease-in-out motion-reduce:transition-none\"\n        style={{ transform: `translateX(${offset}%)` }}\n      >\n        {items.map(({ key, node }, i) => {\n          const active = i === index;\n          return (\n            <div\n              key={key}\n              role=\"group\"\n              aria-roledescription={slideRoleDescription}\n              aria-label={slideLabel(i, total)}\n              aria-hidden={active ? undefined : true}\n              inert={!active}\n              className=\"w-full shrink-0\"\n            >\n              {node}\n            </div>\n          );\n        })}\n      </div>\n      {/* Announces the current slide, except while slides rotate on their own. */}\n      <div aria-live={rotating ? 'off' : 'polite'} aria-atomic=\"true\" className=\"sr-only\">\n        {slideLabel(index, total)}\n      </div>\n      <button\n        type=\"button\"\n        aria-label={previousLabel}\n        aria-controls={trackId}\n        {...focusableDisabledProps(prevDisabled)}\n        onClick={preventIfDisabled(prevDisabled, goPrev)}\n        className={cn(controlButton, 'top-1/2 start-2 -translate-y-1/2')}\n      >\n        <ChevronLeftIcon size={16} className={chevronClass} />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={nextLabel}\n        aria-controls={trackId}\n        {...focusableDisabledProps(nextDisabled)}\n        onClick={preventIfDisabled(nextDisabled, goNext)}\n        className={cn(controlButton, 'top-1/2 end-2 -translate-y-1/2')}\n      >\n        <ChevronRightIcon size={16} className={chevronClass} />\n      </button>\n      <div\n        role=\"group\"\n        aria-label={pickerLabel}\n        className=\"absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit\"\n      >\n        {items.map(({ key }, i) => {\n          const active = i === index;\n          return (\n            <button\n              key={key}\n              type=\"button\"\n              aria-label={slideLabel(i, total)}\n              aria-current={active ? 'true' : undefined}\n              onClick={() => goTo(i)}\n              className={cn('group inline-flex h-6 min-w-6 items-center justify-center', focusRing)}\n            >\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  'block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none',\n                  active\n                    ? cn('w-5 bg-primary', forcedColors.selectedLeaf)\n                    : 'w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nCarouselRoot.displayName = 'Carousel';\n\n/**\n * One slide of a {@link Carousel}. Write it in the Carousel, directly or in a Fragment: a component\n * that renders `Carousel.Item` itself is not recognised as a slide (put that component inside the\n * `Carousel.Item` instead).\n */\nexport const CarouselItem = ({ className, children, ref, ...rest }: CarouselItemProps) => {\n  return (\n    <div ref={ref} className={cn('p-4', className)} {...rest}>\n      {children}\n    </div>\n  );\n};\nCarouselItem.displayName = 'CarouselItem';\n\n/**\n * A slideshow that shows one slide at a time (WAI-ARIA APG carousel with previous/next buttons\n * and a slide picker).\n *\n * - Slides are the `Carousel.Item` (`CarouselItem`) children, written directly in the Carousel or\n *   in Fragments. Other children are not rendered (a development warning says so). A component\n *   that renders `Carousel.Item` itself is not recognised: write the `Carousel.Item` in the\n *   Carousel and put the component inside it.\n * - Previous/Next stay focusable at the ends (`aria-disabled`), so keyboard focus is not lost.\n * - The slide picker is a group of buttons named \"Slide n of m\"; the active one has\n *   `aria-current=\"true\"`.\n * - Inactive slides are `aria-hidden` and `inert`, so neither Tab nor a screen reader reaches\n *   their content.\n * - With `autoPlay`, a Pause/Start control comes first (WAI-ARIA APG): rotation pauses while\n *   focus is inside the carousel (in most browsers also after a click on one of its controls) or\n *   the pointer is over its content, activating Start rotates at once, and the live region is\n *   silent (`aria-live=\"off\"`) while slides rotate. Without `loop` rotation ends at the last slide\n *   and stays stopped until the control's Start is activated (or the number of slides changes, or\n *   `loop` is turned on).\n * - Right-to-left layouts slide the other way and mirror the Previous/Next chevrons: the direction\n *   is read from the rendered element (its `dir` prop, the nearest ancestor's `dir`, WaveProvider\n *   `dir` or the document's), so an LTR section inside an RTL page stays LTR throughout.\n * - Name the carousel with `aria-label` or `aria-labelledby` (the fallback name is \"Carousel\").\n *   The built-in names and role descriptions are English: `labels` and `autoPlayLabels`\n *   translate them.\n * - The controls are layered over the slides inside the carousel's own stacking context, so they\n *   never paint over page headers that stay in view while the page scrolls.\n *\n * Compound access (`Carousel.Item`) needs a client module; React Server Components import the\n * flat name `CarouselItem` instead.\n */\nexport const Carousel = /* @__PURE__ */ Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.mjs","names":["useId","useId$1","React","DEFAULT_PAUSE_LABEL","DEFAULT_PLAY_LABEL","DEFAULT_PREVIOUS_LABEL","DEFAULT_NEXT_LABEL","DEFAULT_PICKER_LABEL","defaultSlideLabel","index","total","DEFAULT_CAROUSEL_ROLE_DESCRIPTION","DEFAULT_SLIDE_ROLE_DESCRIPTION","clampIndex","isRotationControl","target","controlButton","focusRing","disabledStyles","PauseGlyph","PlayGlyph","CarouselRoot","controlledValue","rest","storedIndex","setActiveIndex","useControllable","defaultValue","onValueChange","trackId","rootEl","setRootEl","rootRef","useMergedRefs","ref","renderedDir","useDirection","dir","prefersReducedMotion","usePrefersReducedMotion","userPaused","setUserPaused","endedAt","setEndedAt","hovered","setHovered","pointerOnControl","setPointerOnControl","focusWithin","setFocusWithin","startedFromControl","setStartedFromControl","items","droppedChildren","child","flattenChildren","children","isElementOfType","CarouselItem","slotRendersContent","warnOnce","atStart","atEnd","prevDisabled","loop","nextDisabled","ended","stopped","hasRotation","autoPlay","rotating","goTo","goPrev","goNext","advance","useEventCallback","current","prev","id","autoPlayInterval","toggleRotation","rootHandlers","composeEventHandlers","onMouseEnter","onMouseLeave","onFocus","from","event","entering","onBlur","next","cn","carouselClassNames","className","offset","chevronClass","pauseLabel","autoPlayLabels","playLabel","previousLabel","labels","nextLabel","pickerLabel","slideLabel","carouselRoleDescription","slideRoleDescription","jsx","active","i","node","key","focusableDisabledProps","preventIfDisabled","ChevronLeftIcon","ChevronRightIcon","forcedColors","carouselItemClassNames","Carousel"],"sources":["../../../src/components/layout/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { carouselClassNames, carouselItemClassNames } from '../../lib/classNames';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { slotRendersContent } from '../../lib/slot';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { disabledStyles, focusRing, forcedColors } from '../../lib/styles';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../lib/icons';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion';\n\n/** Accessible names of the rotation control shown while `autoPlay` is on. */\nexport interface CarouselAutoPlayLabels {\n  /** Name of the control while slides rotate (activating it stops the rotation).\n   * @default 'Pause slide rotation'\n   */\n  pause?: string;\n  /** Name of the control while rotation is stopped (activating it starts the rotation).\n   * @default 'Start slide rotation'\n   */\n  play?: string;\n}\n\n/**\n * Accessible names of the Carousel's built-in controls and slides, and the role descriptions of\n * the carousel and its slides, for localization. Each member is optional and falls back to its\n * English default. The rotation control has its own `autoPlayLabels`; the region's name comes\n * from `aria-label` or `aria-labelledby`.\n */\nexport interface CarouselLabels {\n  /** Name of the Previous button.\n   * @default 'Previous slide'\n   */\n  previous?: string;\n  /** Name of the Next button.\n   * @default 'Next slide'\n   */\n  next?: string;\n  /** Name of the group that holds the slide picker buttons.\n   * @default 'Choose slide'\n   */\n  picker?: string;\n  /**\n   * Name of the slide at `index` (zero-based, like `value`) out of `total` slides. It names the\n   * slide itself and its picker button, and is announced by the live region when that slide is\n   * shown.\n   * @default (index, total) => `Slide ${index + 1} of ${total}`\n   */\n  slide?: (index: number, total: number) => string;\n  /** How assistive technology announces the carousel region (`aria-roledescription`).\n   * @default 'carousel'\n   */\n  carouselRoleDescription?: string;\n  /** How assistive technology announces each slide (`aria-roledescription`).\n   * @default 'slide'\n   */\n  slideRoleDescription?: string;\n}\n\n/** Properties for the Carousel component. */\nexport interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled index of the currently active slide. Out-of-range values show the nearest slide. */\n  value?: number;\n  /** Default active slide index for uncontrolled usage.\n   * @default 0\n   */\n  defaultValue?: number;\n  /** Called with the new index when the active slide changes (not when it stays the same). */\n  onValueChange?: (index: number) => void;\n  /**\n   * Rotates the slides automatically. A Pause/Start control is rendered as the first focusable\n   * element. Rotation pauses while focus is anywhere inside the carousel (the control included;\n   * clicking a control also moves focus there in most browsers) or the pointer is over it (except\n   * over the control), and resumes when they leave, unless rotation is stopped. Activating Start\n   * rotates at once, also while focus stays on the control; moving focus on to other content\n   * pauses again. It starts stopped when the user prefers reduced motion. Without `loop`, rotation\n   * ends at the last slide: the control shows Start, and rotation stays stopped (also after the\n   * user moves back to an earlier slide) until Start is activated, which continues from the shown\n   * slide, or from the first one while the last is shown. The end is tied to its cause: when the\n   * number of slides changes (slides loaded later) or `loop` is turned on, rotation continues on\n   * its own, unless the user stopped it with Pause.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /** Interval in milliseconds between auto-play transitions.\n   * @default 5000\n   */\n  autoPlayInterval?: number;\n  /** Accessible names of the rotation control. */\n  autoPlayLabels?: CarouselAutoPlayLabels;\n  /**\n   * Accessible names of the Previous and Next buttons, the slide picker and the slides (also\n   * announced by the live region), and the role descriptions of the carousel and its slides, for\n   * localization. Unset members keep their English defaults.\n   */\n  labels?: CarouselLabels;\n  /** Whether the carousel loops back to the first slide after the last.\n   * @default false\n   */\n  loop?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the CarouselItem sub-component. */\nexport interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_PAUSE_LABEL = 'Pause slide rotation';\nconst DEFAULT_PLAY_LABEL = 'Start slide rotation';\nconst DEFAULT_PREVIOUS_LABEL = 'Previous slide';\nconst DEFAULT_NEXT_LABEL = 'Next slide';\nconst DEFAULT_PICKER_LABEL = 'Choose slide';\nconst defaultSlideLabel = (index: number, total: number) => `Slide ${index + 1} of ${total}`;\nconst DEFAULT_CAROUSEL_ROLE_DESCRIPTION = 'carousel';\nconst DEFAULT_SLIDE_ROLE_DESCRIPTION = 'slide';\n\nfunction clampIndex(index: number, total: number): number {\n  if (total <= 0 || !Number.isFinite(index)) return 0;\n  return Math.min(Math.max(Math.trunc(index), 0), total - 1);\n}\n\nfunction isRotationControl(target: EventTarget | null): boolean {\n  return target instanceof Element && target.closest('[data-carousel-rotation]') !== null;\n}\n\nconst controlButton = [\n  'absolute z-10 inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-2',\n  'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  focusRing,\n  disabledStyles,\n].join(' ');\n\nconst PauseGlyph = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n    <rect x=\"4\" y=\"3\" width=\"3\" height=\"10\" rx=\"1\" />\n    <rect x=\"9\" y=\"3\" width=\"3\" height=\"10\" rx=\"1\" />\n  </svg>\n);\n\nconst PlayGlyph = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n    <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\" />\n  </svg>\n);\n\n// The Carousel root, documented on the exported `Carousel` const.\nconst CarouselRoot = ({\n  value: controlledValue,\n  defaultValue = 0,\n  onValueChange,\n  autoPlay = false,\n  autoPlayInterval = 5000,\n  autoPlayLabels,\n  labels,\n  loop = false,\n  className,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ref,\n  ...rest\n}: CarouselProps) => {\n  const [storedIndex, setActiveIndex] = useControllable(\n    controlledValue,\n    defaultValue,\n    onValueChange,\n  );\n  const trackId = useId('carousel-slides');\n  const [rootEl, setRootEl] = React.useState<HTMLDivElement | null>(null);\n  const rootRef = useMergedRefs<HTMLDivElement>(ref, setRootEl);\n  // The direction that applies to the rendered root (its own or an ancestor's `dir`, e.g. an RTL\n  // section inside an LTR WaveProvider); before mount and on the server, the provider's/document's.\n  const renderedDir = useDirection(rootEl);\n  const dir = rest.dir === 'rtl' || rest.dir === 'ltr' ? rest.dir : renderedDir;\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  // Rotation state: stopped or not (the user's choice, stopped by default under reduced motion, or\n  // ended at the last slide without loop) and the temporary pauses while the pointer is over the\n  // content or focus is inside. An explicit Start overrides the focus pause while focus stays on\n  // the rotation control (APG `hasUserActivatedPlay`), so pressing Start visibly starts the\n  // rotation.\n  const [userPaused, setUserPaused] = React.useState<boolean | null>(null);\n  // The slide count at which rotation ended at the last slide (null while it has not ended), kept\n  // apart from the user's choice so the end lasts only while its cause does.\n  const [endedAt, setEndedAt] = React.useState<number | null>(null);\n  const [hovered, setHovered] = React.useState(false);\n  const [pointerOnControl, setPointerOnControl] = React.useState(false);\n  const [focusWithin, setFocusWithin] = React.useState(false);\n  const [startedFromControl, setStartedFromControl] = React.useState(false);\n\n  // Slides are the `CarouselItem` children, Fragments flattened; the element type is unwrapped, so\n  // slides written in a Server Component (lazy client references) count too (C-COMPOUND).\n  const items: Array<{ key: string; node: React.ReactNode }> = [];\n  let droppedChildren = false;\n  for (const child of flattenChildren(children)) {\n    if (isElementOfType(child.node, CarouselItem)) items.push(child);\n    else if (slotRendersContent(child.node)) droppedChildren = true;\n  }\n  const total = items.length;\n\n  React.useEffect(() => {\n    if (droppedChildren) {\n      warnOnce(\n        'Carousel:non-item-children',\n        'Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in ' +\n          'Fragments; other children are not rendered. A component that renders `Carousel.Item` ' +\n          'itself is not recognised: render the `Carousel.Item` in the Carousel and put the ' +\n          'component inside it.',\n      );\n    }\n  }, [droppedChildren]);\n\n  // Derived during render (C-HOOKS): removed slides or an out-of-range value show the nearest one.\n  const index = clampIndex(storedIndex, total);\n  const atStart = index <= 0;\n  const atEnd = index >= total - 1;\n  const prevDisabled = total <= 1 || (!loop && atStart);\n  const nextDisabled = total <= 1 || (!loop && atEnd);\n\n  // Without loop, rotation ends at the last slide (however it got there) and stays stopped: moving\n  // back to an earlier slide does not restart it, only Start does. The end applies to the slide\n  // count it happened at: once slides are added or removed, or loop is turned on, it is dropped\n  // and rotation continues unless the user stopped it (adjusting state during render, C-HOOKS).\n  const ended = endedAt === total && !loop;\n  const stopped = (userPaused ?? prefersReducedMotion) || ended;\n  const hasRotation = autoPlay && total > 1;\n  if (hasRotation && !loop && atEnd && !stopped) setEndedAt(total);\n  else if (endedAt !== null && !ended) setEndedAt(null);\n  const pausedByPointer = hovered && !pointerOnControl;\n  const pausedByFocus = focusWithin && !startedFromControl;\n  const rotating = hasRotation && !stopped && !pausedByPointer && !pausedByFocus;\n\n  // Compares with the shown (clamped) index, so re-picking the visible slide reports nothing.\n  const goTo = (target: number) => {\n    if (target >= 0 && target < total && target !== index) setActiveIndex(target);\n  };\n  const goPrev = () => goTo(atStart ? total - 1 : index - 1);\n  const goNext = () => goTo(atEnd ? 0 : index + 1);\n\n  // Reads the latest index at tick time (the updater's base), so the interval does not restart on\n  // every slide or parent render and consecutive ticks chain even before a re-render.\n  const advance = useEventCallback(() => {\n    setActiveIndex((prev) => {\n      const current = clampIndex(prev, total);\n      if (current < total - 1) return current + 1;\n      return loop ? 0 : prev;\n    });\n  });\n\n  React.useEffect(() => {\n    if (!rotating) return;\n    const id = setInterval(advance, autoPlayInterval);\n    return () => clearInterval(id);\n  }, [rotating, autoPlayInterval, advance]);\n\n  const toggleRotation = () => {\n    if (stopped) {\n      // Start: from the first slide when rotation had ended at the last one.\n      if (!loop && atEnd) goTo(0);\n      setEndedAt(null);\n      setUserPaused(false);\n      setStartedFromControl(true);\n    } else {\n      setUserPaused(true);\n      setStartedFromControl(false);\n    }\n  };\n\n  // The consumer's pointer and focus handlers composed with the pause tracking (C-COMPOSE). The\n  // empty root gets them too: the consumer's handlers still run, and a pointer or focus that leaves\n  // while there are no slides (slides being reloaded) does not keep rotation paused afterwards.\n  const rootHandlers = {\n    onMouseEnter: composeEventHandlers(onMouseEnter, () => setHovered(true)),\n    onMouseLeave: composeEventHandlers(onMouseLeave, () => setHovered(false)),\n    onFocus: composeEventHandlers(onFocus, (event: React.FocusEvent<HTMLDivElement>) => {\n      // Any focus inside pauses (APG), the rotation control included. Focus that enters from\n      // outside or moves on to other content ends the exemption of an explicit Start.\n      const from = event.relatedTarget;\n      const entering = !(from instanceof Node && event.currentTarget.contains(from));\n      setFocusWithin(true);\n      if (entering || !isRotationControl(event.target)) setStartedFromControl(false);\n    }),\n    onBlur: composeEventHandlers(onBlur, (event: React.FocusEvent<HTMLDivElement>) => {\n      const next = event.relatedTarget;\n      if (!(next instanceof Node && event.currentTarget.contains(next))) {\n        setFocusWithin(false);\n        setStartedFromControl(false);\n      }\n    }),\n  };\n\n  if (total === 0) {\n    return (\n      <div\n        ref={rootRef}\n        className={cn(carouselClassNames.root, 'relative', className)}\n        {...rootHandlers}\n        {...rest}\n      />\n    );\n  }\n\n  const offset = (dir === 'rtl' ? 1 : -1) * index * 100;\n  // The chevrons mirror by the same resolved direction as the track. A CSS `rtl:` variant would\n  // also match `[dir=rtl] *`, so an LTR carousel inside an RTL ancestor got mirrored chevrons.\n  const chevronClass = dir === 'rtl' ? '-scale-x-100' : undefined;\n  const pauseLabel = autoPlayLabels?.pause ?? DEFAULT_PAUSE_LABEL;\n  const playLabel = autoPlayLabels?.play ?? DEFAULT_PLAY_LABEL;\n  const previousLabel = labels?.previous ?? DEFAULT_PREVIOUS_LABEL;\n  const nextLabel = labels?.next ?? DEFAULT_NEXT_LABEL;\n  const pickerLabel = labels?.picker ?? DEFAULT_PICKER_LABEL;\n  const slideLabel = labels?.slide ?? defaultSlideLabel;\n  const carouselRoleDescription =\n    labels?.carouselRoleDescription ?? DEFAULT_CAROUSEL_ROLE_DESCRIPTION;\n  const slideRoleDescription = labels?.slideRoleDescription ?? DEFAULT_SLIDE_ROLE_DESCRIPTION;\n\n  return (\n    <div\n      ref={rootRef}\n      role=\"region\"\n      aria-roledescription={carouselRoleDescription}\n      aria-label=\"Carousel\"\n      // A stacking context of its own: the controls' z-index cannot lift them over page headers.\n      className={cn(carouselClassNames.root, 'relative isolate overflow-hidden', className)}\n      {...rootHandlers}\n      {...rest}\n    >\n      {hasRotation && (\n        <button\n          type=\"button\"\n          data-carousel-rotation=\"\"\n          aria-label={stopped ? playLabel : pauseLabel}\n          aria-controls={trackId}\n          onClick={toggleRotation}\n          // The pointer over the control does not pause (APG): the user is operating it.\n          onMouseEnter={() => setPointerOnControl(true)}\n          onMouseLeave={() => setPointerOnControl(false)}\n          className={cn(carouselClassNames.autoPlayButton, controlButton, 'top-2 start-2')}\n        >\n          {stopped ? <PlayGlyph /> : <PauseGlyph />}\n        </button>\n      )}\n      <div\n        id={trackId}\n        className={cn(\n          carouselClassNames.track,\n          'flex transition-transform duration-300 ease-in-out motion-reduce:transition-none',\n        )}\n        style={{ transform: `translateX(${offset}%)` }}\n      >\n        {items.map(({ key, node }, i) => {\n          const active = i === index;\n          return (\n            <div\n              key={key}\n              role=\"group\"\n              aria-roledescription={slideRoleDescription}\n              aria-label={slideLabel(i, total)}\n              aria-hidden={active ? undefined : true}\n              inert={!active}\n              className={cn(carouselClassNames.slide, 'w-full shrink-0')}\n            >\n              {node}\n            </div>\n          );\n        })}\n      </div>\n      {/* Announces the current slide, except while slides rotate on their own. */}\n      <div aria-live={rotating ? 'off' : 'polite'} aria-atomic=\"true\" className=\"sr-only\">\n        {slideLabel(index, total)}\n      </div>\n      <button\n        type=\"button\"\n        aria-label={previousLabel}\n        aria-controls={trackId}\n        {...focusableDisabledProps(prevDisabled)}\n        onClick={preventIfDisabled(prevDisabled, goPrev)}\n        className={cn(\n          carouselClassNames.previousButton,\n          controlButton,\n          'top-1/2 start-2 -translate-y-1/2',\n        )}\n      >\n        <ChevronLeftIcon size={16} className={chevronClass} />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={nextLabel}\n        aria-controls={trackId}\n        {...focusableDisabledProps(nextDisabled)}\n        onClick={preventIfDisabled(nextDisabled, goNext)}\n        className={cn(\n          carouselClassNames.nextButton,\n          controlButton,\n          'top-1/2 end-2 -translate-y-1/2',\n        )}\n      >\n        <ChevronRightIcon size={16} className={chevronClass} />\n      </button>\n      <div\n        role=\"group\"\n        aria-label={pickerLabel}\n        className={cn(\n          carouselClassNames.picker,\n          'absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit',\n        )}\n      >\n        {items.map(({ key }, i) => {\n          const active = i === index;\n          return (\n            <button\n              key={key}\n              type=\"button\"\n              aria-label={slideLabel(i, total)}\n              aria-current={active ? 'true' : undefined}\n              onClick={() => goTo(i)}\n              className={cn(\n                carouselClassNames.pickerButton,\n                'group inline-flex h-6 min-w-6 items-center justify-center',\n                focusRing,\n              )}\n            >\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  carouselClassNames.pickerIndicator,\n                  'block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none',\n                  active\n                    ? cn('w-5 bg-primary', forcedColors.selectedLeaf)\n                    : 'w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none',\n                )}\n              />\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nCarouselRoot.displayName = 'Carousel';\n\n/**\n * One slide of a {@link Carousel}. Write it in the Carousel, directly or in a Fragment: a component\n * that renders `Carousel.Item` itself is not recognised as a slide (put that component inside the\n * `Carousel.Item` instead).\n */\nexport const CarouselItem = ({ className, children, ref, ...rest }: CarouselItemProps) => {\n  return (\n    <div ref={ref} className={cn(carouselItemClassNames.root, 'p-4', className)} {...rest}>\n      {children}\n    </div>\n  );\n};\nCarouselItem.displayName = 'CarouselItem';\n\n/**\n * A slideshow that shows one slide at a time (WAI-ARIA APG carousel with previous/next buttons\n * and a slide picker).\n *\n * - Slides are the `Carousel.Item` (`CarouselItem`) children, written directly in the Carousel or\n *   in Fragments. Other children are not rendered (a development warning says so). A component\n *   that renders `Carousel.Item` itself is not recognised: write the `Carousel.Item` in the\n *   Carousel and put the component inside it.\n * - Previous/Next stay focusable at the ends (`aria-disabled`), so keyboard focus is not lost.\n * - The slide picker is a group of buttons named \"Slide n of m\"; the active one has\n *   `aria-current=\"true\"`.\n * - Inactive slides are `aria-hidden` and `inert`, so neither Tab nor a screen reader reaches\n *   their content.\n * - With `autoPlay`, a Pause/Start control comes first (WAI-ARIA APG): rotation pauses while\n *   focus is inside the carousel (in most browsers also after a click on one of its controls) or\n *   the pointer is over its content, activating Start rotates at once, and the live region is\n *   silent (`aria-live=\"off\"`) while slides rotate. Without `loop` rotation ends at the last slide\n *   and stays stopped until the control's Start is activated (or the number of slides changes, or\n *   `loop` is turned on).\n * - Right-to-left layouts slide the other way and mirror the Previous/Next chevrons: the direction\n *   is read from the rendered element (its `dir` prop, the nearest ancestor's `dir`, WaveProvider\n *   `dir` or the document's), so an LTR section inside an RTL page stays LTR throughout.\n * - Name the carousel with `aria-label` or `aria-labelledby` (the fallback name is \"Carousel\").\n *   The built-in names and role descriptions are English: `labels` and `autoPlayLabels`\n *   translate them.\n * - The controls are layered over the slides inside the carousel's own stacking context, so they\n *   never paint over page headers that stay in view while the page scrolls.\n *\n * Compound access (`Carousel.Item`) needs a client module; React Server Components import the\n * flat name `CarouselItem` instead.\n */\nexport const Carousel = /* @__PURE__ */ Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n});\n"],"mappings":"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"}

package/dist/components/layout/Flex.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/focus.cjs"),i=require("../../hooks/useMergedRefs.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s={row:`flex-row`,"row-reverse":`flex-row-reverse`,column:`flex-col`,"column-reverse":`flex-col-reverse`},c={nowrap:`flex-nowrap`,wrap:`flex-wrap`,"wrap-reverse":`flex-wrap-reverse`},l={start:`items-start`,center:`items-center`,end:`items-end`,stretch:`items-stretch`,baseline:`items-baseline`},u={start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`},d=`Flex:reverse-focus-order`,f={none:`gap-0`,xs:`gap-1`,sm:`gap-2`,md:`gap-3`,lg:`gap-4`,xl:`gap-6`},p=e=>{let{as:p,direction:m=`row`,wrap:h,align:g,justify:_,gap:v,inline:y,grow:b,shrink:x,className:S,children:C,ref:w,...T}=e,E=p??`div`,D=m===`row-reverse`||m===`column-reverse`||h===`wrap-reverse`,O=a.useRef(null),k=i.useMergedRefs(w,O);return a.useEffect(()=>{let e=O.current;n.isDev&&D&&e&&!n.hasWarned(d)&&r.getTabbableElements(e).length>0&&n.warnOnce(d,"Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.")}),(0,o.jsx)(E,{ref:k,className:t.cn(y?`inline-flex`:`flex`,s[m],h&&c[h],g&&l[g],_&&u[_],v&&f[v],b&&`grow`,x===!0&&`shrink`,x===!1&&`shrink-0`,S),...T,children:C})};p.displayName=`Flex`,exports.Flex=p;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/focus.cjs"),a=require("../../hooks/useMergedRefs.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c={row:`flex-row`,"row-reverse":`flex-row-reverse`,column:`flex-col`,"column-reverse":`flex-col-reverse`},l={nowrap:`flex-nowrap`,wrap:`flex-wrap`,"wrap-reverse":`flex-wrap-reverse`},u={start:`items-start`,center:`items-center`,end:`items-end`,stretch:`items-stretch`,baseline:`items-baseline`},d={start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`},f=`Flex:reverse-focus-order`,p={none:`gap-0`,xs:`gap-1`,sm:`gap-2`,md:`gap-3`,lg:`gap-4`,xl:`gap-6`},m=e=>{let{as:m,direction:h=`row`,wrap:g,align:_,justify:v,gap:y,inline:b,grow:x,shrink:S,className:C,children:w,ref:T,...E}=e,D=m??`div`,O=h===`row-reverse`||h===`column-reverse`||g===`wrap-reverse`,k=o.useRef(null),A=a.useMergedRefs(T,k);return o.useEffect(()=>{let e=k.current;n.isDev&&O&&e&&!n.hasWarned(f)&&i.getTabbableElements(e).length>0&&n.warnOnce(f,"Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.")}),(0,s.jsx)(D,{ref:A,className:t.cn(r.flexClassNames.root,b?`inline-flex`:`flex`,c[h],g&&l[g],_&&u[_],v&&d[v],y&&p[y],x&&`grow`,S===!0&&`shrink`,S===!1&&`shrink-0`,C),...E,children:w})};m.displayName=`Flex`,exports.Flex=m;
 //# sourceMappingURL=Flex.cjs.map

package/dist/components/layout/Flex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.cjs","names":["React","useMergedRefs","isDev","hasWarned","getTabbableElements","cn","require_runtime","require_cn","require_dev","require_focus","require_useMergedRefs","react","react_jsx_runtime","directionMap","wrapMap","alignMap","justifyMap","REVERSE_WARNING","gapMap","Flex","rest","props","Component","as","reversed","direction","wrap","rootRef","mergedRef","ref","root","inline","align","justify","gap","grow","shrink","className"],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\nconst directionMap = {\n  row: 'flex-row',\n  'row-reverse': 'flex-row-reverse',\n  column: 'flex-col',\n  'column-reverse': 'flex-col-reverse',\n} as const;\n\nconst wrapMap = {\n  nowrap: 'flex-nowrap',\n  wrap: 'flex-wrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/** Warn-once key of the \"reversed order with focusable content\" diagnostic. */\nconst REVERSE_WARNING = 'Flex:reverse-focus-order';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\n/**\n * The Flex's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface FlexOwnProps {\n  /**\n   * Flex direction.\n   *\n   * **Accessibility:** `row-reverse` and `column-reverse` reverse the *visual* order only. Tab order\n   * and screen-reader reading order still follow the DOM, so they run opposite to what sighted\n   * users see (WCAG 1.3.2, 2.4.3). For focusable or meaningful content, reorder the DOM instead; a\n   * development warning fires when a reversed Flex contains focusable elements.\n   * @default 'row'\n   */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /**\n   * Flex wrap behavior. `wrap-reverse` reverses the visual line order only (see `direction`).\n   */\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Gap size between flex items. */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n  /** Whether the flex container should grow to fill available space in its own flex parent. */\n  grow?: boolean;\n  /**\n   * How the container shrinks in its own flex parent: `false` prevents shrinking (`shrink-0`),\n   * `true` sets `shrink` explicitly (the CSS default, useful to undo an inherited `shrink-0`).\n   * Unset emits no class.\n   */\n  shrink?: boolean;\n}\n\n/**\n * Props of {@link Flex} rendered as `C` (default `'div'`). `FlexProps` without a type argument is\n * the 0.4 name: the props of a Flex rendered as a `<div>`, including `ref`.\n */\nexport type FlexProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, FlexOwnProps>;\n\ntype FlexImplProps = FlexOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A flexbox layout container with token-based gaps.\n *\n * Reversed directions (`row-reverse`, `column-reverse`, `wrap=\"wrap-reverse\"`) change the visual\n * order only: keep them for decorative or static content and reorder the DOM for anything\n * focusable (a development warning fires otherwise).\n *\n * @example\n * <Flex gap=\"md\" align=\"center\" justify=\"between\">\n *   <Text>Title</Text>\n *   <Button>Action</Button>\n * </Flex>\n */\nexport const Flex: PolymorphicComponent<'div', FlexOwnProps> = (props) => {\n  const {\n    as,\n    direction = 'row',\n    wrap,\n    align,\n    justify,\n    gap,\n    inline,\n    grow,\n    shrink,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as FlexImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const reversed =\n    direction === 'row-reverse' || direction === 'column-reverse' || wrap === 'wrap-reverse';\n\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostic (C-DEV): children change without prop changes, so check every commit\n  // until the warning has fired once; after that the DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !reversed || !root || hasWarned(REVERSE_WARNING)) return;\n    if (getTabbableElements(root).length > 0) {\n      warnOnce(\n        REVERSE_WARNING,\n        'Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.',\n      );\n    }\n  });\n\n  return (\n    <Component\n      ref={mergedRef}\n      className={cn(\n        inline ? 'inline-flex' : 'flex',\n        directionMap[direction],\n        wrap && wrapMap[wrap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        gap && gapMap[gap],\n        grow && 'grow',\n        shrink === true && 'shrink',\n        shrink === false && 'shrink-0',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nFlex.displayName = 'Flex';\n"],"mappings":"yRAOA,IAAMa,EAAe,CACnB,IAAK,WACL,cAAe,mBACf,OAAQ,WACR,iBAAkB,kBACpB,EAEMC,EAAU,CACd,OAAQ,cACR,KAAM,YACN,eAAgB,mBAClB,EAEMC,EAAW,CACf,MAAO,cACP,OAAQ,eACR,IAAK,YACL,QAAS,gBACT,SAAU,gBACZ,EAEMC,EAAa,CACjB,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,gBACV,EAGMC,EAAkB,2BAElBC,EAAS,CACb,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,EAgEaC,EAAmD,GAAU,CACxE,GAAM,CACJ,KACA,YAAY,MACZ,OACA,QACA,UACA,MACA,SACA,OACA,SACA,YACA,WACA,MACA,GAAGC,GACDC,EACEC,EAA+BC,GAAM,MACrCC,EACJC,IAAc,eAAiBA,IAAc,kBAAoBC,IAAS,eAEtEC,EAAU3B,EAAM,OAA2B,IAAI,EAC/C4B,EAAY3B,EAAAA,cAA2B4B,EAAKF,CAAO,EAezD,OAXAhB,EAAM,cAAgB,CACpB,IAAMmB,EAAOH,EAAQ,QAChBzB,EAAAA,OAAUsB,GAAaM,GAAQ3B,GAAAA,UAAUc,CAAe,GACzDb,EAAAA,oBAAoB0B,CAAI,CAAC,CAAC,OAAS,GACrCtB,EAAA,SACES,EACA,wOACF,CAEJ,CAAC,GAGC,EAAAL,EAAA,IAAA,CAACU,EAAD,CACE,IAAKM,EACL,UAAWvB,EAAAA,GACT0B,EAAS,cAAgB,OACzBlB,EAAaY,GACbC,GAAQZ,EAAQY,GAChBM,GAASjB,EAASiB,GAClBC,GAAWjB,EAAWiB,GACtBC,GAAOhB,EAAOgB,GACdC,GAAQ,OACRC,IAAW,IAAQ,SACnBA,IAAW,IAAS,WACpBC,CACF,EACA,GAAIjB,EAEH,UACQ,CAAA,CAEf,EACA,EAAK,YAAc"}
+{"version":3,"file":"Flex.cjs","names":["React","useMergedRefs","isDev","hasWarned","getTabbableElements","cn","flexClassNames","require_runtime","require_cn","require_dev","require_classNames","require_focus","require_useMergedRefs","react","react_jsx_runtime","directionMap","wrapMap","alignMap","justifyMap","REVERSE_WARNING","gapMap","Flex","rest","props","Component","as","reversed","direction","wrap","rootRef","mergedRef","ref","root","inline","align","justify","gap","grow","shrink","className"],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flexClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\nconst directionMap = {\n  row: 'flex-row',\n  'row-reverse': 'flex-row-reverse',\n  column: 'flex-col',\n  'column-reverse': 'flex-col-reverse',\n} as const;\n\nconst wrapMap = {\n  nowrap: 'flex-nowrap',\n  wrap: 'flex-wrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/** Warn-once key of the \"reversed order with focusable content\" diagnostic. */\nconst REVERSE_WARNING = 'Flex:reverse-focus-order';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\n/**\n * The Flex's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface FlexOwnProps {\n  /**\n   * Flex direction.\n   *\n   * **Accessibility:** `row-reverse` and `column-reverse` reverse the *visual* order only. Tab order\n   * and screen-reader reading order still follow the DOM, so they run opposite to what sighted\n   * users see (WCAG 1.3.2, 2.4.3). For focusable or meaningful content, reorder the DOM instead; a\n   * development warning fires when a reversed Flex contains focusable elements.\n   * @default 'row'\n   */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /**\n   * Flex wrap behavior. `wrap-reverse` reverses the visual line order only (see `direction`).\n   */\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Gap size between flex items. */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n  /** Whether the flex container should grow to fill available space in its own flex parent. */\n  grow?: boolean;\n  /**\n   * How the container shrinks in its own flex parent: `false` prevents shrinking (`shrink-0`),\n   * `true` sets `shrink` explicitly (the CSS default, useful to undo an inherited `shrink-0`).\n   * Unset emits no class.\n   */\n  shrink?: boolean;\n}\n\n/**\n * Props of {@link Flex} rendered as `C` (default `'div'`). `FlexProps` without a type argument is\n * the 0.4 name: the props of a Flex rendered as a `<div>`, including `ref`.\n */\nexport type FlexProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, FlexOwnProps>;\n\ntype FlexImplProps = FlexOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A flexbox layout container with token-based gaps.\n *\n * Reversed directions (`row-reverse`, `column-reverse`, `wrap=\"wrap-reverse\"`) change the visual\n * order only: keep them for decorative or static content and reorder the DOM for anything\n * focusable (a development warning fires otherwise).\n *\n * @example\n * <Flex gap=\"md\" align=\"center\" justify=\"between\">\n *   <Text>Title</Text>\n *   <Button>Action</Button>\n * </Flex>\n */\nexport const Flex: PolymorphicComponent<'div', FlexOwnProps> = (props) => {\n  const {\n    as,\n    direction = 'row',\n    wrap,\n    align,\n    justify,\n    gap,\n    inline,\n    grow,\n    shrink,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as FlexImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const reversed =\n    direction === 'row-reverse' || direction === 'column-reverse' || wrap === 'wrap-reverse';\n\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostic (C-DEV): children change without prop changes, so check every commit\n  // until the warning has fired once; after that the DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !reversed || !root || hasWarned(REVERSE_WARNING)) return;\n    if (getTabbableElements(root).length > 0) {\n      warnOnce(\n        REVERSE_WARNING,\n        'Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.',\n      );\n    }\n  });\n\n  return (\n    <Component\n      ref={mergedRef}\n      className={cn(\n        flexClassNames.root,\n        inline ? 'inline-flex' : 'flex',\n        directionMap[direction],\n        wrap && wrapMap[wrap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        gap && gapMap[gap],\n        grow && 'grow',\n        shrink === true && 'shrink',\n        shrink === false && 'shrink-0',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nFlex.displayName = 'Flex';\n"],"mappings":"+TAQA,IAAMe,EAAe,CACnB,IAAK,WACL,cAAe,mBACf,OAAQ,WACR,iBAAkB,kBACpB,EAEMC,EAAU,CACd,OAAQ,cACR,KAAM,YACN,eAAgB,mBAClB,EAEMC,EAAW,CACf,MAAO,cACP,OAAQ,eACR,IAAK,YACL,QAAS,gBACT,SAAU,gBACZ,EAEMC,EAAa,CACjB,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,gBACV,EAGMC,EAAkB,2BAElBC,EAAS,CACb,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,EAgEaC,EAAmD,GAAU,CACxE,GAAM,CACJ,KACA,YAAY,MACZ,OACA,QACA,UACA,MACA,SACA,OACA,SACA,YACA,WACA,MACA,GAAGC,GACDC,EACEC,EAA+BC,GAAM,MACrCC,EACJC,IAAc,eAAiBA,IAAc,kBAAoBC,IAAS,eAEtEC,EAAU7B,EAAM,OAA2B,IAAI,EAC/C8B,EAAY7B,EAAAA,cAA2B8B,EAAKF,CAAO,EAezD,OAXAhB,EAAM,cAAgB,CACpB,IAAMmB,EAAOH,EAAQ,QAChB3B,EAAAA,OAAUwB,GAAaM,GAAQ7B,GAAAA,UAAUgB,CAAe,GACzDf,EAAAA,oBAAoB4B,CAAI,CAAC,CAAC,OAAS,GACrCvB,EAAA,SACEU,EACA,wOACF,CAEJ,CAAC,GAGC,EAAAL,EAAA,IAAA,CAACU,EAAD,CACE,IAAKM,EACL,UAAWzB,EAAAA,GACTC,EAAAA,eAAe,KACf2B,EAAS,cAAgB,OACzBlB,EAAaY,GACbC,GAAQZ,EAAQY,GAChBM,GAASjB,EAASiB,GAClBC,GAAWjB,EAAWiB,GACtBC,GAAOhB,EAAOgB,GACdC,GAAQ,OACRC,IAAW,IAAQ,SACnBA,IAAW,IAAS,WACpBC,CACF,EACA,GAAIjB,EAEH,UACQ,CAAA,CAEf,EACA,EAAK,YAAc"}

package/dist/components/layout/Flex.mjs

@@ -1,54 +1,55 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { hasWarned as t, isDev as n, warnOnce as r } from "../../lib/dev.mjs";
-import { getTabbableElements as i } from "../../lib/focus.mjs";
-import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
-import * as o from "react";
-import { jsx as s } from "react/jsx-runtime";
+import { flexClassNames as i } from "../../lib/classNames.mjs";
+import { getTabbableElements as a } from "../../lib/focus.mjs";
+import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
+import * as s from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/components/layout/Flex.tsx
-var c = {
+var l = {
 	row: "flex-row",
 	"row-reverse": "flex-row-reverse",
 	column: "flex-col",
 	"column-reverse": "flex-col-reverse"
-}, l = {
+}, u = {
 	nowrap: "flex-nowrap",
 	wrap: "flex-wrap",
 	"wrap-reverse": "flex-wrap-reverse"
-}, u = {
+}, d = {
 	start: "items-start",
 	center: "items-center",
 	end: "items-end",
 	stretch: "items-stretch",
 	baseline: "items-baseline"
-}, d = {
+}, f = {
 	start: "justify-start",
 	center: "justify-center",
 	end: "justify-end",
 	between: "justify-between",
 	around: "justify-around",
 	evenly: "justify-evenly"
-}, f = "Flex:reverse-focus-order", p = {
+}, p = "Flex:reverse-focus-order", m = {
 	none: "gap-0",
 	xs: "gap-1",
 	sm: "gap-2",
 	md: "gap-3",
 	lg: "gap-4",
 	xl: "gap-6"
-}, m = (m) => {
-	let { as: h, direction: g = "row", wrap: _, align: v, justify: y, gap: b, inline: x, grow: S, shrink: C, className: w, children: T, ref: E, ...D } = m, O = h ?? "div", k = g === "row-reverse" || g === "column-reverse" || _ === "wrap-reverse", A = o.useRef(null), j = a(E, A);
-	return o.useEffect(() => {
-		let e = A.current;
-		n && k && e && !t(f) && i(e).length > 0 && r(f, "Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.");
-	}), /* @__PURE__ */ s(O, {
-		ref: j,
-		className: e(x ? "inline-flex" : "flex", c[g], _ && l[_], v && u[v], y && d[y], b && p[b], S && "grow", C === !0 && "shrink", C === !1 && "shrink-0", w),
-		...D,
-		children: T
+}, h = (h) => {
+	let { as: g, direction: _ = "row", wrap: v, align: y, justify: b, gap: x, inline: S, grow: C, shrink: w, className: T, children: E, ref: D, ...O } = h, k = g ?? "div", A = _ === "row-reverse" || _ === "column-reverse" || v === "wrap-reverse", j = s.useRef(null), M = o(D, j);
+	return s.useEffect(() => {
+		let e = j.current;
+		n && A && e && !t(p) && a(e).length > 0 && r(p, "Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.");
+	}), /* @__PURE__ */ c(k, {
+		ref: M,
+		className: e(i.root, S ? "inline-flex" : "flex", l[_], v && u[v], y && d[y], b && f[b], x && m[x], C && "grow", w === !0 && "shrink", w === !1 && "shrink-0", T),
+		...O,
+		children: E
 	});
 };
-m.displayName = "Flex";
+h.displayName = "Flex";
 //#endregion
-export { m as Flex };
+export { h as Flex };
 
 //# sourceMappingURL=Flex.mjs.map