@mortenbrudvik/waveui 0.12.0 → 0.14.0

package/dist/components/layout/Card.mjs

@@ -1,122 +1,168 @@
 "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 { materialiseSlotContent as i, slotRendersContent as a } from "../../lib/slot.mjs";
-import { composeEventHandlers as o } from "../../lib/composeEventHandlers.mjs";
-import { cardBodyClassNames as s, cardClassNames as c, cardFooterClassNames as l, cardHeaderClassNames as u } from "../../lib/classNames.mjs";
-import { useEventCallback as d } from "../../hooks/useEventCallback.mjs";
-import { useId as f } from "../../hooks/useId.mjs";
-import { getTabbableElements as p } from "../../lib/focus.mjs";
-import { useMergedRefs as m } from "../../hooks/useMergedRefs.mjs";
-import { forcedColors as h } from "../../lib/styles.mjs";
-import { CheckIcon as g } from "../../lib/icons.mjs";
-import * as _ from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { materialiseSlotContent as i, renderSlot as a, slotRendersContent as o } from "../../lib/slot.mjs";
+import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
+import { cardBodyClassNames as c, cardClassNames as l, cardFooterClassNames as u, cardHeaderClassNames as d } from "../../lib/classNames.mjs";
+import { useEventCallback as f } from "../../hooks/useEventCallback.mjs";
+import { useId as p } from "../../hooks/useId.mjs";
+import { getTabbableElements as m } from "../../lib/focus.mjs";
+import { useMergedRefs as h } from "../../hooks/useMergedRefs.mjs";
+import { forcedColors as g } from "../../lib/styles.mjs";
+import { CheckIcon as _ } from "../../lib/icons.mjs";
+import { CardCornersContext as v, CardOrientationContext as y } from "./Card.context.mjs";
+import { CardPreview as b } from "./Card.preview.mjs";
+import * as x from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/layout/Card.tsx
-var b = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]", x = 1;
-function S(e, t) {
+var T = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]", E = 1;
+function D(e, t) {
 	let n = e.target;
 	if (!n || typeof n.nodeType != "number" || !t.contains(n)) return !0;
-	if (n.nodeType !== x) return !1;
-	let r = n.closest(b);
+	if (n.nodeType !== E) return !1;
+	let r = n.closest(T);
 	return r !== null && r !== t && t.contains(r);
 }
-var C = "Card:nested-interactive", w = _.createContext(null), T = (i) => {
-	let { as: a, selected: s, onSelect: l, selectionControl: u = "card", selectLabel: b, className: x, children: T, ref: E, onClick: D, onKeyDown: O, onKeyUp: k, onBlur: A, ...j } = i, M = a ?? "div", N = l !== void 0, P = N && u === "checkbox", F = N && !P, I = M === "button", L = f("card-title"), R = _.useRef(null), z = m(E, R);
-	_.useEffect(() => {
-		let e = R.current;
-		n && e && N && (F && !t(C) && p(e).length > 0 && r(C, "Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl=\"checkbox\"` for cards with interactive content."), P && !b && !e.ownerDocument.getElementById(L) && r("Card:checkbox-name", "Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`."));
+var O = "Card:nested-interactive", k = x.createContext(null), A = {
+	filled: {
+		surface: "border border-border bg-card shadow-4",
+		interactive: "not-disabled:not-aria-disabled:hover:shadow-8"
+	},
+	"filled-alternative": {
+		surface: "border border-transparent bg-muted",
+		interactive: "not-disabled:not-aria-disabled:hover:bg-muted-hover not-disabled:not-aria-disabled:active:bg-muted-pressed"
+	},
+	outline: {
+		surface: "border border-border bg-transparent",
+		interactive: "not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed"
+	},
+	subtle: {
+		surface: "border border-transparent bg-transparent",
+		interactive: "not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed"
+	}
+}, ee = {
+	small: "[--wave-card-padding:0.75rem]",
+	medium: "[--wave-card-padding:1rem]",
+	large: "[--wave-card-padding:1.25rem]"
+}, j = (i) => {
+	let { as: c, selected: u, onSelect: d, selectionControl: b = "card", selectLabel: S, checkbox: T, floatingAction: E, appearance: j = "filled", size: M = "medium", orientation: N = "vertical", className: P, children: F, ref: I, onClick: L, onKeyDown: R, onKeyUp: te, onBlur: ne, ...re } = i, z = c ?? "div", B = d !== void 0, V = B && b === "checkbox", H = B && !V, U = E !== void 0 && o(E), ie = T === null || T === !1, W = x.isValidElement(T) ? T : null, G = V && !ie && W === null, K = typeof T == "object" && T && !x.isValidElement(T) && !Array.isArray(T) ? T : void 0, ae = x.useMemo(() => ({
+		checkboxAtStart: G && U,
+		floatingAction: U
+	}), [G, U]), q = z === "button", J = p("card-title"), Y = x.useRef(null), oe = h(I, Y);
+	x.useEffect(() => {
+		let e = Y.current;
+		n && e && B && (H && !t(O) && m(e).length > 0 && r(O, "Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl=\"checkbox\"` for cards with interactive content."), G && !S && !e.ownerDocument.getElementById(J) && r("Card:checkbox-name", "Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`."));
 	});
-	let B = _.useRef(!1), V = d((e) => {
-		B.current = e;
-	}), H = d(() => {
-		let e = B.current;
-		return B.current = !1, e;
-	}), U = o(D, (e) => {
-		N && !S(e, e.currentTarget) && l();
-	}), W = F && !I, G = o(O, (e) => {
-		W && (e.key === "Enter" || e.key === " ") && (S(e, e.currentTarget) || (e.preventDefault(), e.key === " " ? V(!0) : e.repeat || l?.()));
-	}), K = o(k, (e) => {
-		W && e.key === " " && (!H() || e.defaultPrevented || S(e, e.currentTarget) || (e.preventDefault(), l?.()));
-	}, { checkDefaultPrevented: !1 }), q = o(A, () => {
-		W && V(!1);
-	}, { checkDefaultPrevented: !1 }), J = {};
-	return F && (I ? J.type = "button" : (J.role = "button", J.tabIndex = 0), s !== void 0 && (J["aria-pressed"] = s)), /* @__PURE__ */ v(w.Provider, {
-		value: P ? L : null,
-		children: /* @__PURE__ */ y(M, {
-			...J,
-			...j,
-			ref: z,
-			"data-selected": s ? "" : void 0,
-			className: e(c.root, "overflow-hidden rounded-md border border-border bg-card shadow-4", (N || s !== void 0) && "relative", s && e("border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary", h.selectedContainer), N && "cursor-pointer", F && "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", x),
-			onClick: U,
-			onKeyDown: G,
-			onKeyUp: K,
-			onBlur: q,
-			children: [
-				P && /* @__PURE__ */ v("input", {
-					type: "checkbox",
-					checked: s ?? !1,
-					onChange: () => l(),
-					"aria-label": b,
-					"aria-labelledby": b ? void 0 : L,
-					className: e(c.checkbox, "absolute end-3 top-3 m-0 size-4 cursor-pointer accent-primary", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring")
-				}),
-				s && !P && /* @__PURE__ */ v(g, {
-					size: 12,
-					className: e(c.checkmark, "absolute end-2 top-2 text-primary")
-				}),
-				T
-			]
+	let X = x.useRef(!1), Z = f((e) => {
+		X.current = e;
+	}), se = f(() => {
+		let e = X.current;
+		return X.current = !1, e;
+	}), ce = s(L, (e) => {
+		B && !D(e, e.currentTarget) && d();
+	}), Q = H && !q, le = s(R, (e) => {
+		Q && (e.key === "Enter" || e.key === " ") && (D(e, e.currentTarget) || (e.preventDefault(), e.key === " " ? Z(!0) : e.repeat || d?.()));
+	}), ue = s(te, (e) => {
+		Q && e.key === " " && (!se() || e.defaultPrevented || D(e, e.currentTarget) || (e.preventDefault(), d?.()));
+	}, { checkDefaultPrevented: !1 }), de = s(ne, () => {
+		Q && Z(!1);
+	}, { checkDefaultPrevented: !1 }), $ = {};
+	return H && (q ? $.type = "button" : ($.role = "button", $.tabIndex = 0), u !== void 0 && ($["aria-pressed"] = u)), /* @__PURE__ */ C(k.Provider, {
+		value: V ? J : null,
+		children: /* @__PURE__ */ C(v.Provider, {
+			value: ae,
+			children: /* @__PURE__ */ C(y.Provider, {
+				value: N,
+				children: /* @__PURE__ */ w(z, {
+					...$,
+					...re,
+					ref: oe,
+					"data-selected": u ? "" : void 0,
+					"data-appearance": j,
+					"data-size": M,
+					"data-orientation": N,
+					className: e(l.root, "overflow-hidden rounded-md", A[j].surface, ee[M], N === "horizontal" && "flex flex-row", (B || u !== void 0 || U) && "relative", u && e("border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary", g.selectedContainer), B && "cursor-pointer", B && !u && A[j].interactive, H && "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", P),
+					onClick: ce,
+					onKeyDown: le,
+					onKeyUp: ue,
+					onBlur: de,
+					children: [
+						G && /* @__PURE__ */ C("input", {
+							...K,
+							type: "checkbox",
+							checked: u ?? !1,
+							onChange: s(K?.onChange, () => d()),
+							"aria-label": K?.["aria-label"] ?? S,
+							"aria-labelledby": K?.["aria-label"] ?? S ? void 0 : K?.["aria-labelledby"] ?? J,
+							className: e(l.checkbox, "absolute top-3 m-0 size-4 cursor-pointer accent-primary", U ? "start-3" : "end-3", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", K?.className)
+						}),
+						V && W,
+						U && a(E, "span", e(l.floatingAction, "absolute end-3 top-3 inline-flex")),
+						u && !V && /* @__PURE__ */ C(_, {
+							size: 12,
+							className: e(l.checkmark, "absolute end-2 top-2 text-primary")
+						}),
+						F
+					]
+				})
+			})
 		})
 	});
 };
-T.displayName = "Card";
-var E = (t) => {
-	let { as: n, title: r, subtitle: o, className: s, children: c, ref: l, ...d } = t, f = n ?? "div", p = _.useContext(w), m = a(r), h = a(o);
-	return /* @__PURE__ */ y(f, {
-		ref: l,
-		className: e(u.root, "p-4", p && "pe-10", s),
-		...d,
+j.displayName = "Card";
+var M = (t) => {
+	let { as: n, title: r, subtitle: s, image: c, action: l, className: u, children: f, ref: p, ...m } = t, h = n ?? "div", g = x.useContext(k), _ = o(r), y = o(s), b = c !== void 0 && o(c), T = l !== void 0 && o(l), E = x.useContext(v), D = /* @__PURE__ */ w(S, { children: [
+		_ && /* @__PURE__ */ C("div", {
+			id: g ?? void 0,
+			className: e(d.title, "text-subtitle-1"),
+			children: i(r)
+		}),
+		y && /* @__PURE__ */ C("div", {
+			className: e(d.subtitle, "text-caption-1 text-muted-foreground"),
+			children: i(s)
+		}),
+		f
+	] });
+	return /* @__PURE__ */ w(h, {
+		ref: p,
+		className: e(d.root, "p-[var(--wave-card-padding,1rem)]", (g && !E.checkboxAtStart || E.floatingAction) && "pe-10", E.checkboxAtStart && "ps-10", (b || T) && e("grid items-center gap-x-3", b && T ? "grid-cols-[auto_1fr_auto]" : b ? "grid-cols-[auto_1fr]" : "grid-cols-[1fr_auto]"), u),
+		...m,
 		children: [
-			m && /* @__PURE__ */ v("div", {
-				id: p ?? void 0,
-				className: e(u.title, "text-subtitle-1"),
-				children: i(r)
-			}),
-			h && /* @__PURE__ */ v("div", {
-				className: e(u.subtitle, "text-caption-1 text-muted-foreground"),
-				children: i(o)
-			}),
-			c
+			b && a(c, "span", e(d.image, "inline-flex shrink-0 items-center")),
+			b || T ? /* @__PURE__ */ C("div", {
+				className: d.text,
+				children: D
+			}) : D,
+			T && a(l, "span", e(d.action, "inline-flex shrink-0 items-center"))
 		]
 	});
 };
-E.displayName = "CardHeader";
-var D = (t) => {
+M.displayName = "CardHeader";
+var N = (t) => {
 	let { as: n, className: r, ref: i, ...a } = t;
-	return /* @__PURE__ */ v(n ?? "div", {
+	return /* @__PURE__ */ C(n ?? "div", {
 		ref: i,
-		className: e(s.root, "p-4 pt-0", r),
+		className: e(c.root, "p-[var(--wave-card-padding,1rem)] pt-0", r),
 		...a
 	});
 };
-D.displayName = "CardBody";
-var O = (t) => {
+N.displayName = "CardBody";
+var P = (t) => {
 	let { as: n, className: r, ref: i, ...a } = t;
-	return /* @__PURE__ */ v(n ?? "div", {
+	return /* @__PURE__ */ C(n ?? "div", {
 		ref: i,
-		className: e(l.root, "flex justify-end gap-2 p-4 pt-0", r),
+		className: e(u.root, "flex justify-end gap-2 p-[var(--wave-card-padding,1rem)] pt-0", r),
 		...a
 	});
 };
-O.displayName = "CardFooter";
-var k = /* @__PURE__ */ Object.assign(T, {
-	Header: E,
-	Body: D,
-	Footer: O
+P.displayName = "CardFooter";
+var F = /* @__PURE__ */ Object.assign(j, {
+	Header: M,
+	Preview: b,
+	Body: N,
+	Footer: P
 });
 //#endregion
-export { k as Card, D as CardBody, O as CardFooter, E as CardHeader };
+export { F as Card, N as CardBody, P as CardFooter, M as CardHeader, b as CardPreview };
 
 //# sourceMappingURL=Card.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["useId","useId$1","React","INTERACTIVE_SELECTOR","ELEMENT_NODE","isForeignEvent","target","event","root","control","NESTED_INTERACTIVE_WARNING","CardTitleIdContext","CardRoot","rest","props","Component","as","selectable","onSelect","checkboxMode","selectionControl","cardMode","nativeButton","titleId","rootRef","mergedRef","useMergedRefs","ref","isDev","hasWarned","getTabbableElements","warnOnce","selectLabel","spaceArmedRef","setSpaceArmed","useEventCallback","armed","takeSpaceArmed","handleClick","composeEventHandlers","onClick","keyboardActivation","handleKeyDown","onKeyDown","handleKeyUp","onKeyUp","handleBlur","onBlur","defaults","selected","cn","cardClassNames","forcedColors","className","CheckIcon","children","CardHeader","hasTitle","slotRendersContent","title","hasSubtitle","subtitle","cardHeaderClassNames","materialiseSlotContent","CardBody","cardBodyClassNames","CardFooter","cardFooterClassNames","Card"],"sources":["../../../src/components/layout/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  cardBodyClassNames,\n  cardClassNames,\n  cardFooterClassNames,\n  cardHeaderClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\n/**\n * Elements whose own events a selectable card ignores: a click or key press that starts inside a\n * nested control belongs to that control, never to the card (layout#35). A `<label>` counts too:\n * its click already activates the control it labels.\n */\nconst INTERACTIVE_SELECTOR =\n  'button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]';\n\n/** `Node.ELEMENT_NODE`, spelled out so no realm's `Node` global is read. */\nconst ELEMENT_NODE = 1;\n\n/**\n * Whether the card must ignore `event`: it started outside the card's DOM, or inside an\n * interactive element nested in `root` (the card itself, which carries `role=\"button\"`/`tabindex`\n * in the default mode, does not count).\n *\n * React events bubble through portals along the component tree, so a menu, popover or dialog\n * opened from inside the card (e.g. a footer overflow menu) reaches the card's handlers although\n * its DOM lives elsewhere. Such a target is not a DOM descendant of the card and never selects it.\n *\n * The target is duck typed (`nodeType`) rather than checked with `instanceof`, so a card rendered\n * into another realm's document (an iframe, or a popout window reached through `createPortal`)\n * still selects: its nodes are not instances of the main realm's `Node`/`Element`.\n */\nfunction isForeignEvent(event: React.SyntheticEvent, root: Element): boolean {\n  const target = event.target as Partial<Node> | null;\n  if (!target || typeof target.nodeType !== 'number' || !root.contains(target as Node)) {\n    return true;\n  }\n  if (target.nodeType !== ELEMENT_NODE) return false;\n  const control = (target as Element).closest(INTERACTIVE_SELECTOR);\n  return control !== null && control !== root && root.contains(control);\n}\n\n/** Warn-once key of the \"selectable card contains tabbable elements\" diagnostic. */\nconst NESTED_INTERACTIVE_WARNING = 'Card:nested-interactive';\n\n/**\n * The id of the header title that names the built-in checkbox of a `selectionControl=\"checkbox\"`\n * card; `null` everywhere else (other cards, and a `Card.Header` rendered on its own, which does\n * not require a Card). A string, never an object, so the provider value needs no memoisation.\n */\nconst CardTitleIdContext = React.createContext<string | null>(null);\n\n/**\n * The Card'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 CardOwnProps {\n  /**\n   * Whether the card is selected. Shown with the selected colors plus non-color cues: a 2px primary\n   * border (a 1px border plus an inset 1px ring), a Highlight outline in forced-colors mode, and a\n   * check glyph (with `selectionControl=\"checkbox\"` the checked checkbox instead).\n   *\n   * The state reaches assistive technology only on a selectable card (`onSelect`): as\n   * `aria-pressed` (default mode) or as the built-in checkbox's checked state. Without `onSelect`,\n   * `selected` is a visual state only (the glyph is decorative); state it in the content if it\n   * matters to screen-reader users, or make the card selectable.\n   */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: called when the card is activated by a click, Enter (on key down)\n   * or Space (on key up, like a native button) in the default mode, or when its built-in checkbox\n   * changes (`selectionControl=\"checkbox\"`). Clicks and key presses that start inside a nested\n   * interactive element (a button, link, input or any element with `tabindex`), or in content\n   * portaled out of the card (a menu, popover or dialog opened from it), are ignored, so a footer\n   * action never selects the card.\n   */\n  onSelect?: () => void;\n  /**\n   * How a selectable card (`onSelect`) exposes its selection:\n   * - `'card'` (default): the card itself is the control — `role=\"button\"`, a tab stop, Enter and\n   *   Space activation and `aria-pressed={selected}` when `selected` is defined. Use it only for\n   *   cards **without** interactive content: a button inside a `role=\"button\"` card is invalid\n   *   (axe `nested-interactive`), and a development warning points here. A button's children are\n   *   presentational, so the card's content is flattened into its name: a heading (e.g.\n   *   `<Card.Header as=\"h3\">`), list or other structure inside it is not exposed and cannot be\n   *   reached by heading navigation (no warning covers this). Keep such cards short.\n   * - `'checkbox'`: the card is not a widget; a built-in native checkbox (top end corner) carries\n   *   `selected` and is named by the `Card.Header` title (or `selectLabel`). Pointer clicks on\n   *   non-interactive card areas still toggle it. Use it for cards with actions, and for cards\n   *   whose headings or other structure must stay navigable.\n   * @default 'card'\n   */\n  selectionControl?: 'card' | 'checkbox';\n  /**\n   * Accessible name of the built-in checkbox (`selectionControl=\"checkbox\"`). Defaults to the\n   * `Card.Header` title, which the checkbox references with `aria-labelledby`.\n   */\n  selectLabel?: string;\n}\n\n/**\n * Props of {@link Card} rendered as `C` (default `'div'`). `CardProps` without a type argument is\n * the 0.4 name: the props of a Card rendered as a `<div>`, including `ref`.\n */\nexport type CardProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, CardOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype CardImplProps = CardOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    type?: string;\n  };\n\n// The Card root, documented on the exported `Card` const.\nconst CardRoot: PolymorphicComponent<'div', CardOwnProps> = (props) => {\n  const {\n    as,\n    selected,\n    onSelect,\n    selectionControl = 'card',\n    selectLabel,\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as CardImplProps;\n\n  const Component: React.ElementType = as ?? 'div';\n  const selectable = onSelect !== undefined;\n  const checkboxMode = selectable && selectionControl === 'checkbox';\n  const cardMode = selectable && !checkboxMode;\n  /** A native `<button>` already has the role, tab stop and keyboard activation. */\n  const nativeButton = Component === 'button';\n\n  const titleId = useId('card-title');\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostics (C-DEV): read the mounted DOM after every commit (content can change\n  // without prop changes), warn once. Once a key has warned, its DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root || !selectable) return;\n    if (\n      cardMode &&\n      !hasWarned(NESTED_INTERACTIVE_WARNING) &&\n      getTabbableElements(root).length > 0\n    ) {\n      warnOnce(\n        NESTED_INTERACTIVE_WARNING,\n        'Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl=\"checkbox\"` for cards with interactive content.',\n      );\n    }\n    if (checkboxMode && !selectLabel && !root.ownerDocument.getElementById(titleId)) {\n      warnOnce(\n        'Card:checkbox-name',\n        'Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`.',\n      );\n    }\n  });\n\n  /**\n   * Set by an unprevented Space keydown on the card; Space selects on the following keyup only\n   * while it is set (like a native button and P01's Button: a keyup alone never selects, and\n   * moving focus away in between cancels). The ref is only touched from event handlers, through\n   * these two stable callbacks (C-HOOKS).\n   */\n  const spaceArmedRef = React.useRef(false);\n  /** Arms (or disarms) Space activation. */\n  const setSpaceArmed = useEventCallback((armed: boolean) => {\n    spaceArmedRef.current = armed;\n  });\n  /** Reads and clears the Space arm. */\n  const takeSpaceArmed = useEventCallback(() => {\n    const armed = spaceArmedRef.current;\n    spaceArmedRef.current = false;\n    return armed;\n  });\n\n  const handleClick = composeEventHandlers<React.MouseEvent<HTMLElement>>(onClick, (event) => {\n    if (!selectable || isForeignEvent(event, event.currentTarget)) return;\n    onSelect();\n  });\n\n  /** Keyboard activation applies to a `role=\"button\"` card (a native `<button>` has its own). */\n  const keyboardActivation = cardMode && !nativeButton;\n\n  const handleKeyDown = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyDown,\n    (event) => {\n      if (!keyboardActivation) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      if (isForeignEvent(event, event.currentTarget)) return;\n      // Space would scroll the page: prevent it now, select on keyup. Enter selects on keydown; a\n      // held Enter does not toggle repeatedly.\n      event.preventDefault();\n      if (event.key === ' ') setSpaceArmed(true);\n      else if (!event.repeat) onSelect?.();\n    },\n  );\n\n  const handleKeyUp = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyUp,\n    (event) => {\n      if (!keyboardActivation || event.key !== ' ') return;\n      // Always consume the arm, also when the consumer prevented this keyup.\n      const armed = takeSpaceArmed();\n      if (!armed || event.defaultPrevented || isForeignEvent(event, event.currentTarget)) return;\n      event.preventDefault();\n      onSelect?.();\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  // Moving focus away between Space keydown and keyup cancels the activation (native behavior).\n  const handleBlur = composeEventHandlers<React.FocusEvent<HTMLElement>>(\n    onBlur,\n    () => {\n      if (keyboardActivation) setSpaceArmed(false);\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  /** Defaults the consumer may override (C-COMPOSE: before `{...rest}`). */\n  const defaults: Record<string, unknown> = {};\n  if (cardMode) {\n    if (nativeButton) {\n      defaults.type = 'button';\n    } else {\n      defaults.role = 'button';\n      defaults.tabIndex = 0;\n    }\n    if (selected !== undefined) defaults['aria-pressed'] = selected;\n  }\n\n  return (\n    <CardTitleIdContext.Provider value={checkboxMode ? titleId : null}>\n      <Component\n        {...defaults}\n        {...rest}\n        ref={mergedRef}\n        data-selected={selected ? '' : undefined}\n        className={cn(\n          cardClassNames.root,\n          'overflow-hidden rounded-md border border-border bg-card shadow-4',\n          // Positions the check glyph / checkbox; plain cards keep their 0.4 positioning.\n          (selectable || selected !== undefined) && 'relative',\n          selected &&\n            cn(\n              'border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary',\n              forcedColors.selectedContainer,\n            ),\n          selectable && 'cursor-pointer',\n          cardMode && focusRing,\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onBlur={handleBlur}\n      >\n        {checkboxMode && (\n          <input\n            type=\"checkbox\"\n            checked={selected ?? false}\n            onChange={() => onSelect()}\n            aria-label={selectLabel}\n            aria-labelledby={selectLabel ? undefined : titleId}\n            className={cn(\n              cardClassNames.checkbox,\n              'absolute end-3 top-3 m-0 size-4 cursor-pointer accent-primary',\n              focusRing,\n            )}\n          />\n        )}\n        {selected && !checkboxMode && (\n          <CheckIcon\n            size={12}\n            className={cn(cardClassNames.checkmark, 'absolute end-2 top-2 text-primary')}\n          />\n        )}\n        {children}\n      </Component>\n    </CardTitleIdContext.Provider>\n  );\n};\nCardRoot.displayName = 'Card';\n\n/** The Card.Header's own props (component-specific props only). */\nexport interface CardHeaderOwnProps {\n  /**\n   * Title content displayed in the card header. It also names a selectable card's built-in\n   * checkbox (`selectionControl=\"checkbox\"`). Content that renders nothing (`''`, `[]`, a list of\n   * nothing) renders no title element; `0` is content.\n   */\n  title?: React.ReactNode;\n  /** Subtitle content displayed below the title (none when it renders nothing, as `title`). */\n  subtitle?: React.ReactNode;\n}\n\n/** Props of {@link CardHeader} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardHeaderProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardHeaderOwnProps\n>;\n\ntype CardHeaderImplProps = CardHeaderOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * The header of a {@link Card}: a title and an optional subtitle, followed by any children.\n * Flat export for React Server Components (`Card.Header` in client files).\n */\nexport const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps> = (props) => {\n  const { as, title, subtitle, className, children, ref, ...rest } = props as CardHeaderImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  /** Set only inside a `selectionControl=\"checkbox\"` card: the title names its checkbox. */\n  const titleId = React.useContext(CardTitleIdContext);\n  // A title or subtitle that renders nothing (`''`, `[]`, a list of nothing) gets no element, so a\n  // checkbox card with such a title warns about its missing name; `0` is content.\n  const hasTitle = slotRendersContent(title);\n  const hasSubtitle = slotRendersContent(subtitle);\n  return (\n    // In a checkbox card the header keeps clear of the checkbox in the top end corner.\n    <Component\n      ref={ref}\n      className={cn(cardHeaderClassNames.root, 'p-4', titleId && 'pe-10', className)}\n      {...rest}\n    >\n      {hasTitle && (\n        <div\n          id={titleId ?? undefined}\n          className={cn(cardHeaderClassNames.title, 'text-subtitle-1')}\n        >\n          {materialiseSlotContent(title)}\n        </div>\n      )}\n      {hasSubtitle && (\n        <div className={cn(cardHeaderClassNames.subtitle, 'text-caption-1 text-muted-foreground')}>\n          {materialiseSlotContent(subtitle)}\n        </div>\n      )}\n      {children}\n    </Component>\n  );\n};\nCardHeader.displayName = 'CardHeader';\n\n/** The Card.Body's own props: none besides the element's (component-specific props only). */\nexport type CardBodyOwnProps = Record<never, never>;\n\n/** Props of {@link CardBody} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardBodyProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardBodyOwnProps\n>;\n\ntype CardSectionImplProps = React.HTMLAttributes<HTMLElement> & {\n  as?: React.ElementType;\n  ref?: React.Ref<HTMLElement>;\n};\n\n/**\n * The main content of a {@link Card}. Flat export for React Server Components (`Card.Body` in\n * client files).\n */\nexport const CardBody: PolymorphicComponent<'div', CardBodyOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component ref={ref} className={cn(cardBodyClassNames.root, 'p-4 pt-0', className)} {...rest} />\n  );\n};\nCardBody.displayName = 'CardBody';\n\n/** The Card.Footer's own props: none besides the element's (component-specific props only). */\nexport type CardFooterOwnProps = Record<never, never>;\n\n/** Props of {@link CardFooter} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardFooterProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardFooterOwnProps\n>;\n\n/**\n * The action row of a {@link Card} (end-aligned). A selectable card with actions here needs\n * `selectionControl=\"checkbox\"`. Flat export for React Server Components (`Card.Footer` in client\n * files).\n */\nexport const CardFooter: PolymorphicComponent<'div', CardFooterOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      className={cn(cardFooterClassNames.root, 'flex justify-end gap-2 p-4 pt-0', className)}\n      {...rest}\n    />\n  );\n};\nCardFooter.displayName = 'CardFooter';\n\n/**\n * A surface that groups related content, with `Card.Header`, `Card.Body` and `Card.Footer`.\n *\n * **Selectable cards** (`onSelect`) come in two patterns:\n * - A card without interactive content is itself the control (`selectionControl=\"card\"`, the\n *   default): it is a `role=\"button\"` tab stop activated by click, Enter (key down) or Space (key\n *   up, cancelled by moving focus away first), with `aria-pressed` reflecting `selected`. Its\n *   content becomes the button's name, so headings and other structure inside it are flattened.\n * - A card that contains buttons or links, or headings that must stay navigable, uses\n *   `selectionControl=\"checkbox\"`: a built-in checkbox named by the header title carries the\n *   selection, and the card's actions and structure stay separate from it.\n *\n * In both modes events that start inside a nested interactive element, or in content portaled out\n * of the card, are ignored. `onClick`, `onKeyDown` and `onKeyUp` are composed with the built-in\n * selection (call `event.preventDefault()` to skip it). A `selected` card without `onSelect` shows\n * the selected look only; its state is not exposed to assistive technology.\n *\n * React Server Components cannot dot into a client module: import the flat names `CardHeader`,\n * `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.\n *\n * @example\n * <Card onSelect={toggle} selected={selected}>\n *   <Card.Header title=\"Pro plan\" subtitle=\"Billed monthly\" />\n * </Card>\n *\n * <Card onSelect={toggle} selected={selected} selectionControl=\"checkbox\">\n *   <Card.Header title=\"Pro plan\" />\n *   <Card.Footer><Button>Details</Button></Card.Footer>\n * </Card>\n */\nexport const Card = /* @__PURE__ */ Object.assign(CardRoot, {\n  Header: CardHeader,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Card.mjs","names":["useId","_Fragment","useId$1","React","INTERACTIVE_SELECTOR","ELEMENT_NODE","isForeignEvent","target","event","root","control","NESTED_INTERACTIVE_WARNING","CardTitleIdContext","cardAppearanceClasses","cardSizeClasses","CardRoot","rest","props","Component","as","selectable","onSelect","checkboxMode","selectionControl","cardMode","hasFloatingAction","floatingAction","slotRendersContent","checkboxHidden","checkbox","checkboxElement","builtInCheckbox","checkboxProps","corners","nativeButton","titleId","rootRef","mergedRef","useMergedRefs","ref","isDev","hasWarned","getTabbableElements","warnOnce","selectLabel","spaceArmedRef","setSpaceArmed","useEventCallback","armed","takeSpaceArmed","handleClick","composeEventHandlers","onClick","keyboardActivation","handleKeyDown","onKeyDown","handleKeyUp","onKeyUp","handleBlur","onBlur","defaults","selected","CardCornersContext","CardOrientationContext","orientation","appearance","size","cn","cardClassNames","forcedColors","className","renderSlot","CheckIcon","children","CardHeader","hasTitle","title","hasSubtitle","subtitle","hasImage","image","hasAction","action","text","Fragment","cardHeaderClassNames","materialiseSlotContent","CardBody","cardBodyClassNames","CardFooter","cardFooterClassNames","Card","CardPreview"],"sources":["../../../src/components/layout/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  cardBodyClassNames,\n  cardClassNames,\n  cardFooterClassNames,\n  cardHeaderClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { CoreSize, Orientation, Slot } from '../../lib/types';\nimport { CardCornersContext, CardOrientationContext } from './Card.context';\nimport { CardPreview } from './Card.preview';\n\nexport { CardPreview };\nexport type { CardPreviewOwnProps, CardPreviewProps } from './Card.preview';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\n/**\n * Elements whose own events a selectable card ignores: a click or key press that starts inside a\n * nested control belongs to that control, never to the card (layout#35). A `<label>` counts too:\n * its click already activates the control it labels.\n */\nconst INTERACTIVE_SELECTOR =\n  'button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]';\n\n/** `Node.ELEMENT_NODE`, spelled out so no realm's `Node` global is read. */\nconst ELEMENT_NODE = 1;\n\n/**\n * Whether the card must ignore `event`: it started outside the card's DOM, or inside an\n * interactive element nested in `root` (the card itself, which carries `role=\"button\"`/`tabindex`\n * in the default mode, does not count).\n *\n * React events bubble through portals along the component tree, so a menu, popover or dialog\n * opened from inside the card (e.g. a footer overflow menu) reaches the card's handlers although\n * its DOM lives elsewhere. Such a target is not a DOM descendant of the card and never selects it.\n *\n * The target is duck typed (`nodeType`) rather than checked with `instanceof`, so a card rendered\n * into another realm's document (an iframe, or a popout window reached through `createPortal`)\n * still selects: its nodes are not instances of the main realm's `Node`/`Element`.\n */\nfunction isForeignEvent(event: React.SyntheticEvent, root: Element): boolean {\n  const target = event.target as Partial<Node> | null;\n  if (!target || typeof target.nodeType !== 'number' || !root.contains(target as Node)) {\n    return true;\n  }\n  if (target.nodeType !== ELEMENT_NODE) return false;\n  const control = (target as Element).closest(INTERACTIVE_SELECTOR);\n  return control !== null && control !== root && root.contains(control);\n}\n\n/** Warn-once key of the \"selectable card contains tabbable elements\" diagnostic. */\nconst NESTED_INTERACTIVE_WARNING = 'Card:nested-interactive';\n\n/**\n * The id of the header title that names the built-in checkbox of a `selectionControl=\"checkbox\"`\n * card; `null` everywhere else (other cards, and a `Card.Header` rendered on its own, which does\n * not require a Card). A string, never an object, so the provider value needs no memoisation.\n */\nconst CardTitleIdContext = React.createContext<string | null>(null);\n\n/** The look of a Card: a filled surface with a shadow, a muted fill, an outline, or no surface. */\nexport type CardAppearance = 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n/**\n * Surface, border and shadow of a card per appearance, and the hover and pressed fills of a\n * selectable one (`filled` lifts its shadow instead of changing its fill). Literal strings only.\n */\nconst cardAppearanceClasses: Readonly<\n  Record<CardAppearance, { surface: string; interactive: string }>\n> = {\n  filled: {\n    surface: 'border border-border bg-card shadow-4',\n    interactive: 'not-disabled:not-aria-disabled:hover:shadow-8',\n  },\n  'filled-alternative': {\n    surface: 'border border-transparent bg-muted',\n    interactive:\n      'not-disabled:not-aria-disabled:hover:bg-muted-hover not-disabled:not-aria-disabled:active:bg-muted-pressed',\n  },\n  outline: {\n    surface: 'border border-border bg-transparent',\n    interactive:\n      'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  },\n  subtle: {\n    surface: 'border border-transparent bg-transparent',\n    interactive:\n      'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  },\n};\n\n/** The padding the parts of a card read (`--wave-card-padding`), per size. */\nconst cardSizeClasses: Readonly<Record<CoreSize, string>> = {\n  small: '[--wave-card-padding:0.75rem]',\n  medium: '[--wave-card-padding:1rem]',\n  large: '[--wave-card-padding:1.25rem]',\n};\n\n/**\n * The Card'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 CardOwnProps {\n  /**\n   * Look of the card: `filled` (a surface with a border and a shadow), `filled-alternative` (a\n   * muted fill), `outline` (a border only) or `subtle` (no surface until hovered or selected). A\n   * selectable card gets a hover and pressed look for its appearance; the selected look is the\n   * same in every appearance.\n   * @default 'filled'\n   */\n  appearance?: CardAppearance;\n  /**\n   * Padding of the card's parts: `small` 0.75rem, `medium` 1rem, `large` 1.25rem.\n   * @default 'medium'\n   */\n  size?: CoreSize;\n  /**\n   * Layout of the card's parts: `vertical` stacks them, `horizontal` puts them in a row (put the\n   * text parts in one wrapper element to keep them stacked beside a `Card.Preview`).\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether the card is selected. Shown with the selected colors plus non-color cues: a 2px primary\n   * border (a 1px border plus an inset 1px ring), a Highlight outline in forced-colors mode, and a\n   * check glyph (with `selectionControl=\"checkbox\"` the checked checkbox instead).\n   *\n   * The state reaches assistive technology only on a selectable card (`onSelect`): as\n   * `aria-pressed` (default mode) or as the built-in checkbox's checked state. Without `onSelect`,\n   * `selected` is a visual state only (the glyph is decorative); state it in the content if it\n   * matters to screen-reader users, or make the card selectable.\n   */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: called when the card is activated by a click, Enter (on key down)\n   * or Space (on key up, like a native button) in the default mode, or when its built-in checkbox\n   * changes (`selectionControl=\"checkbox\"`). Clicks and key presses that start inside a nested\n   * interactive element (a button, link, input or any element with `tabindex`), or in content\n   * portaled out of the card (a menu, popover or dialog opened from it), are ignored, so a footer\n   * action never selects the card.\n   */\n  onSelect?: () => void;\n  /**\n   * How a selectable card (`onSelect`) exposes its selection:\n   * - `'card'` (default): the card itself is the control — `role=\"button\"`, a tab stop, Enter and\n   *   Space activation and `aria-pressed={selected}` when `selected` is defined. Use it only for\n   *   cards **without** interactive content: a button inside a `role=\"button\"` card is invalid\n   *   (axe `nested-interactive`), and a development warning points here. A button's children are\n   *   presentational, so the card's content is flattened into its name: a heading (e.g.\n   *   `<Card.Header as=\"h3\">`), list or other structure inside it is not exposed and cannot be\n   *   reached by heading navigation (no warning covers this). Keep such cards short.\n   * - `'checkbox'`: the card is not a widget; a built-in native checkbox (top end corner) carries\n   *   `selected` and is named by the `Card.Header` title (or `selectLabel`). Pointer clicks on\n   *   non-interactive card areas still toggle it. Use it for cards with actions, and for cards\n   *   whose headings or other structure must stay navigable.\n   * @default 'card'\n   */\n  selectionControl?: 'card' | 'checkbox';\n  /**\n   * Accessible name of the built-in checkbox (`selectionControl=\"checkbox\"`). Defaults to the\n   * `Card.Header` title, which the checkbox references with `aria-labelledby`.\n   */\n  selectLabel?: string;\n  /**\n   * The built-in checkbox of `selectionControl=\"checkbox\"`: an object of `<input>` attributes is\n   * merged onto it (a class, `aria-describedby`, `name`; its type, checked state and change\n   * handling stay the card's), an element replaces it (give that control its own name and call\n   * `onSelect` from it), and `null` or `false` removes it, for a control you render elsewhere.\n   * Ignored with the default `selectionControl`.\n   */\n  checkbox?: Slot<'input'>;\n  /**\n   * An action over the top end corner of the card (a menu button, say). A card with one is\n   * positioned; with `selectionControl=\"checkbox\"` the built-in checkbox then moves to the top\n   * start corner. Content that renders nothing renders no element.\n   */\n  floatingAction?: Slot<'span'>;\n}\n\n/**\n * Props of {@link Card} rendered as `C` (default `'div'`). `CardProps` without a type argument is\n * the 0.4 name: the props of a Card rendered as a `<div>`, including `ref`.\n */\nexport type CardProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, CardOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype CardImplProps = CardOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    type?: string;\n  };\n\n// The Card root, documented on the exported `Card` const.\nconst CardRoot: PolymorphicComponent<'div', CardOwnProps> = (props) => {\n  const {\n    as,\n    selected,\n    onSelect,\n    selectionControl = 'card',\n    selectLabel,\n    checkbox,\n    floatingAction,\n    appearance = 'filled',\n    size = 'medium',\n    orientation = 'vertical',\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as CardImplProps;\n\n  const Component: React.ElementType = as ?? 'div';\n  const selectable = onSelect !== undefined;\n  const checkboxMode = selectable && selectionControl === 'checkbox';\n  const cardMode = selectable && !checkboxMode;\n  const hasFloatingAction = floatingAction !== undefined && slotRendersContent(floatingAction);\n  // The built-in checkbox: not with `checkbox={null | false}` (the consumer renders the control)\n  // nor with an element (it replaces it); an object is merged onto it.\n  const checkboxHidden = checkbox === null || checkbox === false;\n  const checkboxElement = React.isValidElement(checkbox) ? checkbox : null;\n  const builtInCheckbox = checkboxMode && !checkboxHidden && checkboxElement === null;\n  const checkboxProps =\n    typeof checkbox === 'object' &&\n    checkbox !== null &&\n    !React.isValidElement(checkbox) &&\n    !Array.isArray(checkbox)\n      ? (checkbox as React.InputHTMLAttributes<HTMLInputElement>)\n      : undefined;\n  const corners = React.useMemo(\n    () => ({\n      checkboxAtStart: builtInCheckbox && hasFloatingAction,\n      floatingAction: hasFloatingAction,\n    }),\n    [builtInCheckbox, hasFloatingAction],\n  );\n  /** A native `<button>` already has the role, tab stop and keyboard activation. */\n  const nativeButton = Component === 'button';\n\n  const titleId = useId('card-title');\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostics (C-DEV): read the mounted DOM after every commit (content can change\n  // without prop changes), warn once. Once a key has warned, its DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root || !selectable) return;\n    if (\n      cardMode &&\n      !hasWarned(NESTED_INTERACTIVE_WARNING) &&\n      getTabbableElements(root).length > 0\n    ) {\n      warnOnce(\n        NESTED_INTERACTIVE_WARNING,\n        'Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl=\"checkbox\"` for cards with interactive content.',\n      );\n    }\n    if (builtInCheckbox && !selectLabel && !root.ownerDocument.getElementById(titleId)) {\n      warnOnce(\n        'Card:checkbox-name',\n        'Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`.',\n      );\n    }\n  });\n\n  /**\n   * Set by an unprevented Space keydown on the card; Space selects on the following keyup only\n   * while it is set (like a native button and P01's Button: a keyup alone never selects, and\n   * moving focus away in between cancels). The ref is only touched from event handlers, through\n   * these two stable callbacks (C-HOOKS).\n   */\n  const spaceArmedRef = React.useRef(false);\n  /** Arms (or disarms) Space activation. */\n  const setSpaceArmed = useEventCallback((armed: boolean) => {\n    spaceArmedRef.current = armed;\n  });\n  /** Reads and clears the Space arm. */\n  const takeSpaceArmed = useEventCallback(() => {\n    const armed = spaceArmedRef.current;\n    spaceArmedRef.current = false;\n    return armed;\n  });\n\n  const handleClick = composeEventHandlers<React.MouseEvent<HTMLElement>>(onClick, (event) => {\n    if (!selectable || isForeignEvent(event, event.currentTarget)) return;\n    onSelect();\n  });\n\n  /** Keyboard activation applies to a `role=\"button\"` card (a native `<button>` has its own). */\n  const keyboardActivation = cardMode && !nativeButton;\n\n  const handleKeyDown = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyDown,\n    (event) => {\n      if (!keyboardActivation) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      if (isForeignEvent(event, event.currentTarget)) return;\n      // Space would scroll the page: prevent it now, select on keyup. Enter selects on keydown; a\n      // held Enter does not toggle repeatedly.\n      event.preventDefault();\n      if (event.key === ' ') setSpaceArmed(true);\n      else if (!event.repeat) onSelect?.();\n    },\n  );\n\n  const handleKeyUp = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyUp,\n    (event) => {\n      if (!keyboardActivation || event.key !== ' ') return;\n      // Always consume the arm, also when the consumer prevented this keyup.\n      const armed = takeSpaceArmed();\n      if (!armed || event.defaultPrevented || isForeignEvent(event, event.currentTarget)) return;\n      event.preventDefault();\n      onSelect?.();\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  // Moving focus away between Space keydown and keyup cancels the activation (native behavior).\n  const handleBlur = composeEventHandlers<React.FocusEvent<HTMLElement>>(\n    onBlur,\n    () => {\n      if (keyboardActivation) setSpaceArmed(false);\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  /** Defaults the consumer may override (C-COMPOSE: before `{...rest}`). */\n  const defaults: Record<string, unknown> = {};\n  if (cardMode) {\n    if (nativeButton) {\n      defaults.type = 'button';\n    } else {\n      defaults.role = 'button';\n      defaults.tabIndex = 0;\n    }\n    if (selected !== undefined) defaults['aria-pressed'] = selected;\n  }\n\n  return (\n    <CardTitleIdContext.Provider value={checkboxMode ? titleId : null}>\n      <CardCornersContext.Provider value={corners}>\n        <CardOrientationContext.Provider value={orientation}>\n          <Component\n            {...defaults}\n            {...rest}\n            ref={mergedRef}\n            data-selected={selected ? '' : undefined}\n            data-appearance={appearance}\n            data-size={size}\n            data-orientation={orientation}\n            className={cn(\n              cardClassNames.root,\n              'overflow-hidden rounded-md',\n              cardAppearanceClasses[appearance].surface,\n              cardSizeClasses[size],\n              orientation === 'horizontal' && 'flex flex-row',\n              // Positions the check glyph / checkbox; plain cards keep their 0.4 positioning.\n              (selectable || selected !== undefined || hasFloatingAction) && 'relative',\n              selected &&\n                cn(\n                  'border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary',\n                  forcedColors.selectedContainer,\n                ),\n              selectable && 'cursor-pointer',\n              selectable && !selected && cardAppearanceClasses[appearance].interactive,\n              cardMode && focusRing,\n              className,\n            )}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onKeyUp={handleKeyUp}\n            onBlur={handleBlur}\n          >\n            {builtInCheckbox && (\n              <input\n                {...checkboxProps}\n                type=\"checkbox\"\n                checked={selected ?? false}\n                onChange={composeEventHandlers(checkboxProps?.onChange, () => onSelect())}\n                aria-label={checkboxProps?.['aria-label'] ?? selectLabel}\n                aria-labelledby={\n                  (checkboxProps?.['aria-label'] ?? selectLabel)\n                    ? undefined\n                    : (checkboxProps?.['aria-labelledby'] ?? titleId)\n                }\n                className={cn(\n                  cardClassNames.checkbox,\n                  'absolute top-3 m-0 size-4 cursor-pointer accent-primary',\n                  hasFloatingAction ? 'start-3' : 'end-3',\n                  focusRing,\n                  checkboxProps?.className,\n                )}\n              />\n            )}\n            {checkboxMode && checkboxElement}\n            {hasFloatingAction &&\n              renderSlot(\n                floatingAction,\n                'span',\n                cn(cardClassNames.floatingAction, 'absolute end-3 top-3 inline-flex'),\n              )}\n            {selected && !checkboxMode && (\n              <CheckIcon\n                size={12}\n                className={cn(cardClassNames.checkmark, 'absolute end-2 top-2 text-primary')}\n              />\n            )}\n            {children}\n          </Component>\n        </CardOrientationContext.Provider>\n      </CardCornersContext.Provider>\n    </CardTitleIdContext.Provider>\n  );\n};\nCardRoot.displayName = 'Card';\n\n/** The Card.Header's own props (component-specific props only). */\nexport interface CardHeaderOwnProps {\n  /**\n   * Title content displayed in the card header. It also names a selectable card's built-in\n   * checkbox (`selectionControl=\"checkbox\"`). Content that renders nothing (`''`, `[]`, a list of\n   * nothing) renders no title element; `0` is content.\n   */\n  title?: React.ReactNode;\n  /** Subtitle content displayed below the title (none when it renders nothing, as `title`). */\n  subtitle?: React.ReactNode;\n  /**\n   * An image beside the text, at the start: an `Avatar`, an icon, a logo. A value that renders\n   * nothing renders no element.\n   */\n  image?: Slot<'span'>;\n  /**\n   * An action beside the text, at the end: a menu button, say. A value that renders nothing\n   * renders no element.\n   */\n  action?: Slot<'span'>;\n}\n\n/** Props of {@link CardHeader} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardHeaderProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardHeaderOwnProps\n>;\n\ntype CardHeaderImplProps = CardHeaderOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * The header of a {@link Card}: a title and an optional subtitle, followed by any children.\n * Flat export for React Server Components (`Card.Header` in client files).\n */\nexport const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps> = (props) => {\n  const { as, title, subtitle, image, action, className, children, ref, ...rest } =\n    props as CardHeaderImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  /** Set only inside a `selectionControl=\"checkbox\"` card: the title names its checkbox. */\n  const titleId = React.useContext(CardTitleIdContext);\n  // A title or subtitle that renders nothing (`''`, `[]`, a list of nothing) gets no element, so a\n  // checkbox card with such a title warns about its missing name; `0` is content.\n  const hasTitle = slotRendersContent(title);\n  const hasSubtitle = slotRendersContent(subtitle);\n  const hasImage = image !== undefined && slotRendersContent(image);\n  const hasAction = action !== undefined && slotRendersContent(action);\n  const corners = React.useContext(CardCornersContext);\n  const text = (\n    <>\n      {hasTitle && (\n        <div\n          id={titleId ?? undefined}\n          className={cn(cardHeaderClassNames.title, 'text-subtitle-1')}\n        >\n          {materialiseSlotContent(title)}\n        </div>\n      )}\n      {hasSubtitle && (\n        <div className={cn(cardHeaderClassNames.subtitle, 'text-caption-1 text-muted-foreground')}>\n          {materialiseSlotContent(subtitle)}\n        </div>\n      )}\n      {children}\n    </>\n  );\n  return (\n    // In a checkbox card the header keeps clear of the checkbox in the top end corner.\n    <Component\n      ref={ref}\n      className={cn(\n        cardHeaderClassNames.root,\n        'p-[var(--wave-card-padding,1rem)]',\n        ((titleId && !corners.checkboxAtStart) || corners.floatingAction) && 'pe-10',\n        corners.checkboxAtStart && 'ps-10',\n        (hasImage || hasAction) &&\n          cn(\n            'grid items-center gap-x-3',\n            hasImage && hasAction\n              ? 'grid-cols-[auto_1fr_auto]'\n              : hasImage\n                ? 'grid-cols-[auto_1fr]'\n                : 'grid-cols-[1fr_auto]',\n          ),\n        className,\n      )}\n      {...rest}\n    >\n      {hasImage &&\n        renderSlot(\n          image,\n          'span',\n          cn(cardHeaderClassNames.image, 'inline-flex shrink-0 items-center'),\n        )}\n      {hasImage || hasAction ? <div className={cardHeaderClassNames.text}>{text}</div> : text}\n      {hasAction &&\n        renderSlot(\n          action,\n          'span',\n          cn(cardHeaderClassNames.action, 'inline-flex shrink-0 items-center'),\n        )}\n    </Component>\n  );\n};\nCardHeader.displayName = 'CardHeader';\n\n/** The Card.Body's own props: none besides the element's (component-specific props only). */\nexport type CardBodyOwnProps = Record<never, never>;\n\n/** Props of {@link CardBody} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardBodyProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardBodyOwnProps\n>;\n\ntype CardSectionImplProps = React.HTMLAttributes<HTMLElement> & {\n  as?: React.ElementType;\n  ref?: React.Ref<HTMLElement>;\n};\n\n/**\n * The main content of a {@link Card}. Flat export for React Server Components (`Card.Body` in\n * client files).\n */\nexport const CardBody: PolymorphicComponent<'div', CardBodyOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      className={cn(cardBodyClassNames.root, 'p-[var(--wave-card-padding,1rem)] pt-0', className)}\n      {...rest}\n    />\n  );\n};\nCardBody.displayName = 'CardBody';\n\n/** The Card.Footer's own props: none besides the element's (component-specific props only). */\nexport type CardFooterOwnProps = Record<never, never>;\n\n/** Props of {@link CardFooter} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardFooterProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardFooterOwnProps\n>;\n\n/**\n * The action row of a {@link Card} (end-aligned). A selectable card with actions here needs\n * `selectionControl=\"checkbox\"`. Flat export for React Server Components (`Card.Footer` in client\n * files).\n */\nexport const CardFooter: PolymorphicComponent<'div', CardFooterOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        cardFooterClassNames.root,\n        'flex justify-end gap-2 p-[var(--wave-card-padding,1rem)] pt-0',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\nCardFooter.displayName = 'CardFooter';\n\n/**\n * A surface that groups related content, with `Card.Header`, `Card.Preview`, `Card.Body` and\n * `Card.Footer`.\n *\n * **Selectable cards** (`onSelect`) come in two patterns:\n * - A card without interactive content is itself the control (`selectionControl=\"card\"`, the\n *   default): it is a `role=\"button\"` tab stop activated by click, Enter (key down) or Space (key\n *   up, cancelled by moving focus away first), with `aria-pressed` reflecting `selected`. Its\n *   content becomes the button's name, so headings and other structure inside it are flattened.\n * - A card that contains buttons or links, or headings that must stay navigable, uses\n *   `selectionControl=\"checkbox\"`: a built-in checkbox named by the header title carries the\n *   selection, and the card's actions and structure stay separate from it.\n *\n * In both modes events that start inside a nested interactive element, or in content portaled out\n * of the card, are ignored. `onClick`, `onKeyDown` and `onKeyUp` are composed with the built-in\n * selection (call `event.preventDefault()` to skip it). A `selected` card without `onSelect` shows\n * the selected look only; its state is not exposed to assistive technology.\n *\n * React Server Components cannot dot into a client module: import the flat names `CardHeader`,\n * `CardPreview`, `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.\n *\n * @example\n * <Card onSelect={toggle} selected={selected}>\n *   <Card.Header title=\"Pro plan\" subtitle=\"Billed monthly\" />\n * </Card>\n *\n * <Card onSelect={toggle} selected={selected} selectionControl=\"checkbox\">\n *   <Card.Header title=\"Pro plan\" />\n *   <Card.Footer><Button>Details</Button></Card.Footer>\n * </Card>\n */\nexport const Card = /* @__PURE__ */ Object.assign(CardRoot, {\n  Header: CardHeader,\n  Preview: CardPreview,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n"],"mappings":"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"}

package/dist/components/layout/Card.preview.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/slot.cjs"),r=require("../../lib/classNames.cjs"),i=require("./Card.context.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=e=>{let{as:s,logo:c,className:l,children:u,ref:d,...f}=e,p=s??`div`,m=a.useContext(i.CardOrientationContext),h=c!==void 0&&n.slotRendersContent(c);return(0,o.jsxs)(p,{ref:d,className:t.cn(r.cardPreviewClassNames.root,`relative block overflow-hidden`,m===`horizontal`?`shrink-0 self-stretch`:`w-full`,l),...f,children:[u,h&&n.renderSlot(c,`span`,t.cn(r.cardPreviewClassNames.logo,`absolute start-3 bottom-3 inline-flex rounded-md bg-background p-1 shadow-4`))]})};s.displayName=`CardPreview`,exports.CardPreview=s;
+//# sourceMappingURL=Card.preview.cjs.map

package/dist/components/layout/Card.preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.preview.cjs","names":["React","CardOrientationContext","slotRendersContent","cn","cardPreviewClassNames","renderSlot","require_runtime","require_cn","require_slot","require_classNames","require_Card_context","react","react_jsx_runtime","CardPreview","rest","props","Component","as","orientation","hasLogo","logo","className","children"],"sources":["../../../src/components/layout/Card.preview.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cardPreviewClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Slot } from '../../lib/types';\nimport { CardOrientationContext } from './Card.context';\n\n/** The Card.Preview's own props (component-specific props only). */\nexport interface CardPreviewOwnProps {\n  /**\n   * A logo placed over the bottom start corner of the preview: a string, an element or an object\n   * of `<span>` attributes. A value that renders nothing renders no element.\n   */\n  logo?: Slot<'span'>;\n}\n\n/** Props of {@link CardPreview} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardPreviewProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardPreviewOwnProps\n>;\n\ntype CardPreviewImplProps = CardPreviewOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * Edge-to-edge media of a {@link Card} (an image, a video, a map), with an optional `logo` over its\n * bottom start corner. It has no padding: in a vertical card it fills the width, in a horizontal\n * one it is the full-height block at the start. Flat export for React Server Components\n * (`Card.Preview` in client files).\n *\n * @example\n * <Card>\n *   <Card.Preview logo={<img alt=\"Contoso\" src=\"/logo.svg\" />}><img alt=\"\" src=\"/cover.jpg\" /></Card.Preview>\n *   <Card.Header title=\"Contoso\" />\n * </Card>\n */\nexport const CardPreview: PolymorphicComponent<'div', CardPreviewOwnProps> = (props) => {\n  const { as, logo, className, children, ref, ...rest } = props as CardPreviewImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const orientation = React.useContext(CardOrientationContext);\n  const hasLogo = logo !== undefined && slotRendersContent(logo);\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        cardPreviewClassNames.root,\n        'relative block overflow-hidden',\n        orientation === 'horizontal' ? 'shrink-0 self-stretch' : 'w-full',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {hasLogo &&\n        renderSlot(\n          logo,\n          'span',\n          cn(\n            cardPreviewClassNames.logo,\n            'absolute start-3 bottom-3 inline-flex rounded-md bg-background p-1 shadow-4',\n          ),\n        )}\n    </Component>\n  );\n};\nCardPreview.displayName = 'CardPreview';\n"],"mappings":"oRAyCA,IAAaa,EAAiE,GAAU,CACtF,GAAM,CAAE,KAAI,OAAM,YAAW,WAAU,MAAK,GAAGC,GAASC,EAClDC,EAA+BC,GAAM,MACrCC,EAAclB,EAAM,WAAWC,EAAAA,sBAAsB,EACrDkB,EAAUC,IAAS,IAAA,IAAalB,EAAAA,mBAAmBkB,CAAI,EAC7D,OACE,EAAAR,EAAA,KAAA,CAACI,EAAD,CACO,MACL,UAAWb,EAAAA,GACTC,EAAAA,sBAAsB,KACtB,iCACAc,IAAgB,aAAe,wBAA0B,SACzDG,CACF,EACA,GAAIP,EARN,SAAA,CAUGQ,EACAH,GACCd,EAAAA,WACEe,EACA,OACAjB,EAAAA,GACEC,EAAAA,sBAAsB,KACtB,6EACF,CACF,CACO,GAEf,EACA,EAAY,YAAc"}

package/dist/components/layout/Card.preview.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
+import { cardPreviewClassNames as r } from "../../lib/classNames.mjs";
+import { CardOrientationContext as i } from "./Card.context.mjs";
+import * as a from "react";
+import { jsxs as o } from "react/jsx-runtime";
+//#region src/components/layout/Card.preview.tsx
+var s = (s) => {
+	let { as: c, logo: l, className: u, children: d, ref: f, ...p } = s, m = c ?? "div", h = a.useContext(i), g = l !== void 0 && n(l);
+	return /* @__PURE__ */ o(m, {
+		ref: f,
+		className: e(r.root, "relative block overflow-hidden", h === "horizontal" ? "shrink-0 self-stretch" : "w-full", u),
+		...p,
+		children: [d, g && t(l, "span", e(r.logo, "absolute start-3 bottom-3 inline-flex rounded-md bg-background p-1 shadow-4"))]
+	});
+};
+s.displayName = "CardPreview";
+//#endregion
+export { s as CardPreview };
+
+//# sourceMappingURL=Card.preview.mjs.map

package/dist/components/layout/Card.preview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.preview.mjs","names":["React","CardPreview","rest","props","Component","as","orientation","CardOrientationContext","hasLogo","logo","slotRendersContent","cn","cardPreviewClassNames","className","children","renderSlot"],"sources":["../../../src/components/layout/Card.preview.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cardPreviewClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Slot } from '../../lib/types';\nimport { CardOrientationContext } from './Card.context';\n\n/** The Card.Preview's own props (component-specific props only). */\nexport interface CardPreviewOwnProps {\n  /**\n   * A logo placed over the bottom start corner of the preview: a string, an element or an object\n   * of `<span>` attributes. A value that renders nothing renders no element.\n   */\n  logo?: Slot<'span'>;\n}\n\n/** Props of {@link CardPreview} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardPreviewProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardPreviewOwnProps\n>;\n\ntype CardPreviewImplProps = CardPreviewOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * Edge-to-edge media of a {@link Card} (an image, a video, a map), with an optional `logo` over its\n * bottom start corner. It has no padding: in a vertical card it fills the width, in a horizontal\n * one it is the full-height block at the start. Flat export for React Server Components\n * (`Card.Preview` in client files).\n *\n * @example\n * <Card>\n *   <Card.Preview logo={<img alt=\"Contoso\" src=\"/logo.svg\" />}><img alt=\"\" src=\"/cover.jpg\" /></Card.Preview>\n *   <Card.Header title=\"Contoso\" />\n * </Card>\n */\nexport const CardPreview: PolymorphicComponent<'div', CardPreviewOwnProps> = (props) => {\n  const { as, logo, className, children, ref, ...rest } = props as CardPreviewImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const orientation = React.useContext(CardOrientationContext);\n  const hasLogo = logo !== undefined && slotRendersContent(logo);\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        cardPreviewClassNames.root,\n        'relative block overflow-hidden',\n        orientation === 'horizontal' ? 'shrink-0 self-stretch' : 'w-full',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {hasLogo &&\n        renderSlot(\n          logo,\n          'span',\n          cn(\n            cardPreviewClassNames.logo,\n            'absolute start-3 bottom-3 inline-flex rounded-md bg-background p-1 shadow-4',\n          ),\n        )}\n    </Component>\n  );\n};\nCardPreview.displayName = 'CardPreview';\n"],"mappings":";;;;;;;;AAyCA,IAAaC,KAAiE,MAAU;CACtF,IAAM,EAAE,OAAI,SAAM,cAAW,aAAU,QAAK,GAAGC,MAASC,GAClDC,IAA+BC,KAAM,OACrCC,IAAcN,EAAM,WAAWO,CAAsB,GACrDC,IAAUC,MAAS,KAAA,KAAaC,EAAmBD,CAAI;CAC7D,OACE,kBAACL,GAAD;EACO;EACL,WAAWO,EACTC,EAAsB,MACtB,kCACAN,MAAgB,eAAe,0BAA0B,UACzDO,CACF;EACA,GAAIX;EARN,UAAA,CAUGY,GACAN,KACCO,EACEN,GACA,QACAE,EACEC,EAAsB,MACtB,6EACF,CACF,CACO;;AAEf;AACA,EAAY,cAAc"}

package/dist/components/layout/Carousel.button.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/aria.cjs"),a=require("../../lib/icons.cjs"),o=require("./Carousel.context.cjs"),s=require("./Carousel.styles.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({direction:e,onClick:c,className:u,children:d,ref:f,...p})=>{let m=o.useCarouselContext(`Carousel.Button`),h=e===`previous`,g=h?m.previousDisabled:m.nextDisabled,_=h?m.goPrevious:m.goNext,v=m.dir===`rtl`?`-scale-x-100`:void 0;return(0,l.jsx)(`button`,{type:`button`,"aria-label":h?m.previousLabel:m.nextLabel,"aria-controls":m.trackId,"data-direction":e,...p,...i.focusableDisabledProps(g),ref:f,onClick:i.preventIfDisabled(g,n.composeEventHandlers(c,_)),className:t.cn(r.carouselButtonClassNames.root,s.CAROUSEL_CONTROL_BASE,s.CAROUSEL_CONTROL_LAYOUT[m.controlsLayout][e],u),children:d??(h?(0,l.jsx)(a.ChevronLeftIcon,{size:16,className:v}):(0,l.jsx)(a.ChevronRightIcon,{size:16,className:v}))})};u.displayName=`CarouselButton`,exports.CarouselButton=u;
+//# sourceMappingURL=Carousel.button.cjs.map

package/dist/components/layout/Carousel.button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.button.cjs","names":["useCarouselContext","focusableDisabledProps","preventIfDisabled","composeEventHandlers","cn","carouselButtonClassNames","CAROUSEL_CONTROL_BASE","CAROUSEL_CONTROL_LAYOUT","ChevronLeftIcon","ChevronRightIcon","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_aria","require_icons","require_Carousel_context","require_Carousel_styles","react","react_jsx_runtime","CarouselButton","rest","carousel","previous","direction","disabled","go","mirror","onClick","className","children"],"sources":["../../../src/components/layout/Carousel.button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { carouselButtonClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../lib/icons';\nimport { useCarouselContext } from './Carousel.context';\nimport { CAROUSEL_CONTROL_BASE, CAROUSEL_CONTROL_LAYOUT } from './Carousel.styles';\n\n/** Properties for the CarouselButton sub-component. */\nexport interface CarouselButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Which way the button moves the carousel. */\n  direction: 'previous' | 'next';\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A Previous or Next button written in a {@link Carousel}, for a glyph or look of your own.\n * Write it as a direct child of the Carousel: it replaces the built-in button of its\n * `direction`, takes its place in the layout and is named, disabled and wired to the slides the\n * same way (`labels.previous`/`labels.next`, `aria-controls`, `aria-disabled` at the ends\n * without `loop`, which keeps it focusable). Its children replace the chevron, which mirrors in\n * right-to-left layouts; `aria-label` replaces the name.\n */\nexport const CarouselButton = ({\n  direction,\n  onClick,\n  className,\n  children,\n  ref,\n  ...rest\n}: CarouselButtonProps) => {\n  const carousel = useCarouselContext('Carousel.Button');\n  const previous = direction === 'previous';\n  const disabled = previous ? carousel.previousDisabled : carousel.nextDisabled;\n  const go = previous ? carousel.goPrevious : carousel.goNext;\n  const mirror = carousel.dir === 'rtl' ? '-scale-x-100' : undefined;\n  return (\n    <button\n      type=\"button\"\n      aria-label={previous ? carousel.previousLabel : carousel.nextLabel}\n      aria-controls={carousel.trackId}\n      data-direction={direction}\n      {...rest}\n      {...focusableDisabledProps(disabled)}\n      ref={ref}\n      onClick={preventIfDisabled(disabled, composeEventHandlers(onClick, go))}\n      className={cn(\n        carouselButtonClassNames.root,\n        CAROUSEL_CONTROL_BASE,\n        CAROUSEL_CONTROL_LAYOUT[carousel.controlsLayout][direction],\n        className,\n      )}\n    >\n      {children ??\n        (previous ? (\n          <ChevronLeftIcon size={16} className={mirror} />\n        ) : (\n          <ChevronRightIcon size={16} className={mirror} />\n        ))}\n    </button>\n  );\n};\nCarouselButton.displayName = 'CarouselButton';\n"],"mappings":"4YAwBA,IAAaoB,GAAkB,CAC7B,YACA,UACA,YACA,WACA,MACA,GAAGC,KACsB,CACzB,IAAMC,EAAWtB,EAAAA,mBAAmB,iBAAiB,EAC/CuB,EAAWC,IAAc,WACzBC,EAAWF,EAAWD,EAAS,iBAAmBA,EAAS,aAC3DI,EAAKH,EAAWD,EAAS,WAAaA,EAAS,OAC/CK,EAASL,EAAS,MAAQ,MAAQ,eAAiB,IAAA,GACzD,OACE,EAAAH,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAYI,EAAWD,EAAS,cAAgBA,EAAS,UACzD,gBAAeA,EAAS,QACxB,iBAAgBE,EAChB,GAAIH,EACJ,GAAIpB,EAAAA,uBAAuBwB,CAAQ,EAC9B,MACL,QAASvB,EAAAA,kBAAkBuB,EAAUtB,EAAAA,qBAAqByB,EAASF,CAAE,CAAC,EACtE,UAAWtB,EAAAA,GACTC,EAAAA,yBAAyB,KACzBC,EAAAA,sBACAC,EAAAA,wBAAwBe,EAAS,eAAe,CAACE,GACjDK,CACF,EAEC,SAAAC,IACEP,GACC,EAAAJ,EAAA,IAAA,CAACX,EAAAA,gBAAD,CAAiB,KAAM,GAAI,UAAWmB,CAAS,CAAA,GAE/C,EAAAR,EAAA,IAAA,CAACV,EAAAA,iBAAD,CAAkB,KAAM,GAAI,UAAWkB,CAAS,CAAA,EAE9C,CAAA,CAEZ,EACA,EAAe,YAAc"}

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

@@ -0,0 +1,34 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
+import { carouselButtonClassNames as n } from "../../lib/classNames.mjs";
+import { focusableDisabledProps as r, preventIfDisabled as i } from "../../lib/aria.mjs";
+import { ChevronLeftIcon as a, ChevronRightIcon as o } from "../../lib/icons.mjs";
+import { useCarouselContext as s } from "./Carousel.context.mjs";
+import { CAROUSEL_CONTROL_BASE as c, CAROUSEL_CONTROL_LAYOUT as l } from "./Carousel.styles.mjs";
+import "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/layout/Carousel.button.tsx
+var d = ({ direction: d, onClick: f, className: p, children: m, ref: h, ...g }) => {
+	let _ = s("Carousel.Button"), v = d === "previous", y = v ? _.previousDisabled : _.nextDisabled, b = v ? _.goPrevious : _.goNext, x = _.dir === "rtl" ? "-scale-x-100" : void 0;
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		"aria-label": v ? _.previousLabel : _.nextLabel,
+		"aria-controls": _.trackId,
+		"data-direction": d,
+		...g,
+		...r(y),
+		ref: h,
+		onClick: i(y, t(f, b)),
+		className: e(n.root, c, l[_.controlsLayout][d], p),
+		children: m ?? u(v ? a : o, {
+			size: 16,
+			className: x
+		})
+	});
+};
+d.displayName = "CarouselButton";
+//#endregion
+export { d as CarouselButton };
+
+//# sourceMappingURL=Carousel.button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.button.mjs","names":["CarouselButton","rest","carousel","useCarouselContext","previous","direction","disabled","go","mirror","focusableDisabledProps","preventIfDisabled","composeEventHandlers","onClick","cn","carouselButtonClassNames","CAROUSEL_CONTROL_BASE","CAROUSEL_CONTROL_LAYOUT","className","children","jsx","ChevronLeftIcon","ChevronRightIcon"],"sources":["../../../src/components/layout/Carousel.button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { carouselButtonClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../lib/icons';\nimport { useCarouselContext } from './Carousel.context';\nimport { CAROUSEL_CONTROL_BASE, CAROUSEL_CONTROL_LAYOUT } from './Carousel.styles';\n\n/** Properties for the CarouselButton sub-component. */\nexport interface CarouselButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Which way the button moves the carousel. */\n  direction: 'previous' | 'next';\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A Previous or Next button written in a {@link Carousel}, for a glyph or look of your own.\n * Write it as a direct child of the Carousel: it replaces the built-in button of its\n * `direction`, takes its place in the layout and is named, disabled and wired to the slides the\n * same way (`labels.previous`/`labels.next`, `aria-controls`, `aria-disabled` at the ends\n * without `loop`, which keeps it focusable). Its children replace the chevron, which mirrors in\n * right-to-left layouts; `aria-label` replaces the name.\n */\nexport const CarouselButton = ({\n  direction,\n  onClick,\n  className,\n  children,\n  ref,\n  ...rest\n}: CarouselButtonProps) => {\n  const carousel = useCarouselContext('Carousel.Button');\n  const previous = direction === 'previous';\n  const disabled = previous ? carousel.previousDisabled : carousel.nextDisabled;\n  const go = previous ? carousel.goPrevious : carousel.goNext;\n  const mirror = carousel.dir === 'rtl' ? '-scale-x-100' : undefined;\n  return (\n    <button\n      type=\"button\"\n      aria-label={previous ? carousel.previousLabel : carousel.nextLabel}\n      aria-controls={carousel.trackId}\n      data-direction={direction}\n      {...rest}\n      {...focusableDisabledProps(disabled)}\n      ref={ref}\n      onClick={preventIfDisabled(disabled, composeEventHandlers(onClick, go))}\n      className={cn(\n        carouselButtonClassNames.root,\n        CAROUSEL_CONTROL_BASE,\n        CAROUSEL_CONTROL_LAYOUT[carousel.controlsLayout][direction],\n        className,\n      )}\n    >\n      {children ??\n        (previous ? (\n          <ChevronLeftIcon size={16} className={mirror} />\n        ) : (\n          <ChevronRightIcon size={16} className={mirror} />\n        ))}\n    </button>\n  );\n};\nCarouselButton.displayName = 'CarouselButton';\n"],"mappings":";;;;;;;;;;;AAwBA,IAAaA,KAAkB,EAC7B,cACA,YACA,cACA,aACA,QACA,GAAGC,QACsB;CACzB,IAAMC,IAAWC,EAAmB,iBAAiB,GAC/CC,IAAWC,MAAc,YACzBC,IAAWF,IAAWF,EAAS,mBAAmBA,EAAS,cAC3DK,IAAKH,IAAWF,EAAS,aAAaA,EAAS,QAC/CM,IAASN,EAAS,QAAQ,QAAQ,iBAAiB,KAAA;CACzD,OACE,kBAAC,UAAD;EACE,MAAK;EACL,cAAYE,IAAWF,EAAS,gBAAgBA,EAAS;EACzD,iBAAeA,EAAS;EACxB,kBAAgBG;EAChB,GAAIJ;EACJ,GAAIQ,EAAuBH,CAAQ;EAC9B;EACL,SAASI,EAAkBJ,GAAUK,EAAqBC,GAASL,CAAE,CAAC;EACtE,WAAWM,EACTC,EAAyB,MACzBC,GACAC,EAAwBd,EAAS,eAAe,CAACG,IACjDY,CACF;EAEC,UAAAC,KAEGC,EADDf,IACEgB,IAEAC,GAFD;GAAiB,MAAM;GAAI,WAAWb;EAAS,CAEC;CAE9C,CAAA;AAEZ;AACA,EAAe,cAAc"}

package/dist/components/layout/Carousel.cjs

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