@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/layout/Card.mjs

@@ -0,0 +1,121 @@
+"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 { useEventCallback as s } from "../../hooks/useEventCallback.mjs";
+import { useId as c } from "../../hooks/useId.mjs";
+import { getTabbableElements as l } from "../../lib/focus.mjs";
+import { useMergedRefs as u } from "../../hooks/useMergedRefs.mjs";
+import { forcedColors as d } from "../../lib/styles.mjs";
+import { CheckIcon as f } from "../../lib/icons.mjs";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/layout/Card.tsx
+var g = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]", _ = 1;
+function v(e, t) {
+	let n = e.target;
+	if (!n || typeof n.nodeType != "number" || !t.contains(n)) return !0;
+	if (n.nodeType !== _) return !1;
+	let r = n.closest(g);
+	return r !== null && r !== t && t.contains(r);
+}
+var y = "Card:nested-interactive", b = p.createContext(null), x = (i) => {
+	let { as: a, selected: g, onSelect: _, selectionControl: x = "card", selectLabel: S, className: C, children: w, ref: T, onClick: E, onKeyDown: D, onKeyUp: O, onBlur: k, ...A } = i, j = a ?? "div", M = _ !== void 0, N = M && x === "checkbox", P = M && !N, F = j === "button", I = c("card-title"), L = p.useRef(null), R = u(T, L);
+	p.useEffect(() => {
+		let e = L.current;
+		n && e && M && (P && !t(y) && l(e).length > 0 && r(y, "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 && !S && !e.ownerDocument.getElementById(I) && r("Card:checkbox-name", "Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`."));
+	});
+	let z = p.useRef(!1), B = s((e) => {
+		z.current = e;
+	}), V = s(() => {
+		let e = z.current;
+		return z.current = !1, e;
+	}), H = o(E, (e) => {
+		M && !v(e, e.currentTarget) && _();
+	}), U = P && !F, W = o(D, (e) => {
+		U && (e.key === "Enter" || e.key === " ") && (v(e, e.currentTarget) || (e.preventDefault(), e.key === " " ? B(!0) : e.repeat || _?.()));
+	}), G = o(O, (e) => {
+		U && e.key === " " && (!V() || e.defaultPrevented || v(e, e.currentTarget) || (e.preventDefault(), _?.()));
+	}, { checkDefaultPrevented: !1 }), K = o(k, () => {
+		U && B(!1);
+	}, { checkDefaultPrevented: !1 }), q = {};
+	return P && (F ? q.type = "button" : (q.role = "button", q.tabIndex = 0), g !== void 0 && (q["aria-pressed"] = g)), /* @__PURE__ */ m(b.Provider, {
+		value: N ? I : null,
+		children: /* @__PURE__ */ h(j, {
+			...q,
+			...A,
+			ref: R,
+			"data-selected": g ? "" : void 0,
+			className: e("overflow-hidden rounded-md border border-border bg-card shadow-4", (M || g !== void 0) && "relative", g && e("border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary", d.selectedContainer), M && "cursor-pointer", P && "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", C),
+			onClick: H,
+			onKeyDown: W,
+			onKeyUp: G,
+			onBlur: K,
+			children: [
+				N && /* @__PURE__ */ m("input", {
+					type: "checkbox",
+					checked: g ?? !1,
+					onChange: () => _(),
+					"aria-label": S,
+					"aria-labelledby": S ? void 0 : I,
+					className: e("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")
+				}),
+				g && !N && /* @__PURE__ */ m(f, {
+					size: 12,
+					className: "absolute end-2 top-2 text-primary"
+				}),
+				w
+			]
+		})
+	});
+};
+x.displayName = "Card";
+var S = (t) => {
+	let { as: n, title: r, subtitle: o, className: s, children: c, ref: l, ...u } = t, d = n ?? "div", f = p.useContext(b), g = a(r), _ = a(o);
+	return /* @__PURE__ */ h(d, {
+		ref: l,
+		className: e("p-4", f && "pe-10", s),
+		...u,
+		children: [
+			g && /* @__PURE__ */ m("div", {
+				id: f ?? void 0,
+				className: "text-subtitle-1",
+				children: i(r)
+			}),
+			_ && /* @__PURE__ */ m("div", {
+				className: "text-caption-1 text-muted-foreground",
+				children: i(o)
+			}),
+			c
+		]
+	});
+};
+S.displayName = "CardHeader";
+var C = (t) => {
+	let { as: n, className: r, ref: i, ...a } = t;
+	return /* @__PURE__ */ m(n ?? "div", {
+		ref: i,
+		className: e("p-4 pt-0", r),
+		...a
+	});
+};
+C.displayName = "CardBody";
+var w = (t) => {
+	let { as: n, className: r, ref: i, ...a } = t;
+	return /* @__PURE__ */ m(n ?? "div", {
+		ref: i,
+		className: e("flex justify-end gap-2 p-4 pt-0", r),
+		...a
+	});
+};
+w.displayName = "CardFooter";
+var T = /* @__PURE__ */ Object.assign(x, {
+	Header: S,
+	Body: C,
+	Footer: w
+});
+//#endregion
+export { T as Card, C as CardBody, w as CardFooter, S as CardHeader };
+
+//# sourceMappingURL=Card.mjs.map

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

@@ -0,0 +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","forcedColors","className","CheckIcon","children","CardHeader","hasTitle","slotRendersContent","title","hasSubtitle","subtitle","materialiseSlotContent","CardBody","CardFooter","Card"],"sources":["../../../src/components/layout/Card.tsx"],"sourcesContent":["import * as React from 'react';\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          '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              'absolute end-3 top-3 m-0 size-4 cursor-pointer accent-primary',\n              focusRing,\n            )}\n          />\n        )}\n        {selected && !checkboxMode && (\n          <CheckIcon size={12} className=\"absolute end-2 top-2 text-primary\" />\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 ref={ref} className={cn('p-4', titleId && 'pe-10', className)} {...rest}>\n      {hasTitle && (\n        <div id={titleId ?? undefined} className=\"text-subtitle-1\">\n          {materialiseSlotContent(title)}\n        </div>\n      )}\n      {hasSubtitle && (\n        <div className=\"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 <Component ref={ref} className={cn('p-4 pt-0', className)} {...rest} />;\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 ref={ref} className={cn('flex justify-end gap-2 p-4 pt-0', className)} {...rest} />\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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"}

package/dist/components/layout/Carousel.cjs

@@ -0,0 +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("../../hooks/useEventCallback.cjs"),ee=require("../../hooks/useControllable.cjs"),te=require("../../hooks/useId.cjs"),ne=require("../../hooks/useMergedRefs.cjs"),s=require("../../lib/aria.cjs"),re=require("../../hooks/usePrefersReducedMotion.cjs"),ie=require("../../hooks/useDirection.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs");let u=require("react");u=e.__toESM(u,1);let d=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 f(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 p=[`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`,c.focusRing,c.disabledStyles].join(` `),me=()=>(0,d.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,children:[(0,d.jsx)(`rect`,{x:`4`,y:`3`,width:`3`,height:`10`,rx:`1`}),(0,d.jsx)(`rect`,{x:`9`,y:`3`,width:`3`,height:`10`,rx:`1`})]}),he=()=>(0,d.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,children:(0,d.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:g,autoPlay:ge=!1,autoPlayInterval:_=5e3,autoPlayLabels:v,labels:y,loop:b=!1,className:x,children:_e,onMouseEnter:ve,onMouseLeave:ye,onFocus:be,onBlur:xe,ref:Se,...S})=>{let[Ce,C]=ee.useControllable(e,m,g),w=te.useId(`carousel-slides`),[we,Te]=u.useState(null),T=ne.useMergedRefs(Se,Te),E=ie.useDirection(we),D=S.dir===`rtl`||S.dir===`ltr`?S.dir:E,O=re.usePrefersReducedMotion(),[Ee,k]=u.useState(null),[A,j]=u.useState(null),[De,M]=u.useState(!1),[Oe,N]=u.useState(!1),[ke,P]=u.useState(!1),[F,I]=u.useState(!1),L=[],R=!1;for(let e of n.flattenChildren(_e))n.isElementOfType(e.node,h)?L.push(e):i.slotRendersContent(e.node)&&(R=!0);let z=L.length;u.useEffect(()=>{R&&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.")},[R]);let B=f(Ce,z),V=B<=0,H=B>=z-1,U=z<=1||!b&&V,W=z<=1||!b&&H,G=A===z&&!b,K=(Ee??O)||G,q=ge&&z>1;q&&!b&&H&&!K?j(z):A!==null&&!G&&j(null);let J=q&&!K&&!(De&&!Oe)&&!(ke&&!F),Y=e=>{e>=0&&e<z&&e!==B&&C(e)},Ae=()=>Y(V?z-1:B-1),je=()=>Y(H?0:B+1),X=o.useEventCallback(()=>{C(e=>{let t=f(e,z);return t<z-1?t+1:b?0:e})});u.useEffect(()=>{if(!J)return;let e=setInterval(X,_);return()=>clearInterval(e)},[J,_,X]);let Me=()=>{K?(!b&&H&&Y(0),j(null),k(!1),I(!0)):(k(!0),I(!1))},Z={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))&&I(!1)}),onBlur:a.composeEventHandlers(xe,e=>{let t=e.relatedTarget;t instanceof Node&&e.currentTarget.contains(t)||(P(!1),I(!1))})};if(z===0)return(0,d.jsx)(`div`,{ref:T,className:t.cn(`relative`,x),...Z,...S});let Ne=(D===`rtl`?1:-1)*B*100,Q=D===`rtl`?`-scale-x-100`:void 0,Pe=v?.pause??ae,Fe=v?.play??oe,Ie=y?.previous??se,Le=y?.next??ce,Re=y?.picker??le,$=y?.slide??ue,ze=y?.carouselRoleDescription??de,Be=y?.slideRoleDescription??fe;return(0,d.jsxs)(`div`,{ref:T,role:`region`,"aria-roledescription":ze,"aria-label":`Carousel`,className:t.cn(`relative isolate overflow-hidden`,x),...Z,...S,children:[q&&(0,d.jsx)(`button`,{type:`button`,"data-carousel-rotation":``,"aria-label":K?Fe:Pe,"aria-controls":w,onClick:Me,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),className:t.cn(p,`top-2 start-2`),children:K?(0,d.jsx)(he,{}):(0,d.jsx)(me,{})}),(0,d.jsx)(`div`,{id:w,className:`flex transition-transform duration-300 ease-in-out motion-reduce:transition-none`,style:{transform:`translateX(${Ne}%)`},children:L.map(({key:e,node:t},n)=>{let r=n===B;return(0,d.jsx)(`div`,{role:`group`,"aria-roledescription":Be,"aria-label":$(n,z),"aria-hidden":!r||void 0,inert:!r,className:`w-full shrink-0`,children:t},e)})}),(0,d.jsx)(`div`,{"aria-live":J?`off`:`polite`,"aria-atomic":`true`,className:`sr-only`,children:$(B,z)}),(0,d.jsx)(`button`,{type:`button`,"aria-label":Ie,"aria-controls":w,...s.focusableDisabledProps(U),onClick:s.preventIfDisabled(U,Ae),className:t.cn(p,`top-1/2 start-2 -translate-y-1/2`),children:(0,d.jsx)(l.ChevronLeftIcon,{size:16,className:Q})}),(0,d.jsx)(`button`,{type:`button`,"aria-label":Le,"aria-controls":w,...s.focusableDisabledProps(W),onClick:s.preventIfDisabled(W,je),className:t.cn(p,`top-1/2 end-2 -translate-y-1/2`),children:(0,d.jsx)(l.ChevronRightIcon,{size:16,className:Q})}),(0,d.jsx)(`div`,{role:`group`,"aria-label":Re,className:`absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit`,children:L.map(({key:e},n)=>{let r=n===B;return(0,d.jsx)(`button`,{type:`button`,"aria-label":$(n,z),"aria-current":r?`true`:void 0,onClick:()=>Y(n),className:t.cn(`group inline-flex h-6 min-w-6 items-center justify-center`,c.focusRing),children:(0,d.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(`block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none`,r?t.cn(`w-5 bg-primary`,c.forcedColors.selectedLeaf):`w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none`)})},e)})})]})};m.displayName=`Carousel`;var h=({className:e,children:n,ref:r,...i})=>(0,d.jsx)(`div`,{ref:r,className:t.cn(`p-4`,e),...i,children:n});h.displayName=`CarouselItem`;var g=Object.assign(m,{Item:h});exports.Carousel=g,exports.CarouselItem=h;
+//# sourceMappingURL=Carousel.cjs.map

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

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

package/dist/components/layout/Carousel.mjs

@@ -0,0 +1,205 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
+import { warnOnce as r } from "../../lib/dev.mjs";
+import { slotRendersContent as i } from "../../lib/slot.mjs";
+import { composeEventHandlers as a } from "../../lib/composeEventHandlers.mjs";
+import { useEventCallback as ee } from "../../hooks/useEventCallback.mjs";
+import { useControllable as te } from "../../hooks/useControllable.mjs";
+import { useId as ne } from "../../hooks/useId.mjs";
+import { useMergedRefs as re } from "../../hooks/useMergedRefs.mjs";
+import { focusableDisabledProps as o, preventIfDisabled as s } from "../../lib/aria.mjs";
+import { usePrefersReducedMotion as ie } from "../../hooks/usePrefersReducedMotion.mjs";
+import { useDirection as ae } from "../../hooks/useDirection.mjs";
+import { disabledStyles as c, focusRing as l, forcedColors as oe } from "../../lib/styles.mjs";
+import { ChevronLeftIcon as se, ChevronRightIcon as ce } from "../../lib/icons.mjs";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/layout/Carousel.tsx
+var le = "Pause slide rotation", ue = "Start slide rotation", de = "Previous slide", fe = "Next slide", pe = "Choose slide", me = (e, t) => `Slide ${e + 1} of ${t}`, he = "carousel", ge = "slide";
+function p(e, t) {
+	return t <= 0 || !Number.isFinite(e) ? 0 : Math.min(Math.max(Math.trunc(e), 0), t - 1);
+}
+function _e(e) {
+	return e instanceof Element && e.closest("[data-carousel-rotation]") !== null;
+}
+var m = [
+	"absolute z-10 inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-2",
+	"not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed",
+	l,
+	c
+].join(" "), ve = () => /* @__PURE__ */ f("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ d("rect", {
+		x: "4",
+		y: "3",
+		width: "3",
+		height: "10",
+		rx: "1"
+	}), /* @__PURE__ */ d("rect", {
+		x: "9",
+		y: "3",
+		width: "3",
+		height: "10",
+		rx: "1"
+	})]
+}), ye = () => /* @__PURE__ */ d("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ d("path", { d: "M5 3.5v9a.5.5 0 0 0 .77.42l7-4.5a.5.5 0 0 0 0-.84l-7-4.5A.5.5 0 0 0 5 3.5Z" })
+}), h = ({ value: c, defaultValue: h = 0, onValueChange: _, autoPlay: be = !1, autoPlayInterval: v = 5e3, autoPlayLabels: y, labels: b, loop: x = !1, className: S, children: xe, onMouseEnter: Se, onMouseLeave: Ce, onFocus: we, onBlur: Te, ref: Ee, ...C }) => {
+	let [De, w] = te(c, h, _), T = ne("carousel-slides"), [E, Oe] = u.useState(null), D = re(Ee, Oe), ke = ae(E), O = C.dir === "rtl" || C.dir === "ltr" ? C.dir : ke, Ae = ie(), [je, k] = u.useState(null), [A, j] = u.useState(null), [Me, M] = u.useState(!1), [Ne, N] = u.useState(!1), [Pe, P] = u.useState(!1), [Fe, F] = u.useState(!1), I = [], L = !1;
+	for (let e of t(xe)) n(e.node, g) ? I.push(e) : i(e.node) && (L = !0);
+	let R = I.length;
+	u.useEffect(() => {
+		L && r("Carousel:non-item-children", "Carousel: only `Carousel.Item` (`CarouselItem`) children are slides, directly or in Fragments; other children are not rendered. A component that renders `Carousel.Item` itself is not recognised: render the `Carousel.Item` in the Carousel and put the component inside it.");
+	}, [L]);
+	let z = p(De, R), B = z <= 0, V = z >= R - 1, H = R <= 1 || !x && B, U = R <= 1 || !x && V, W = A === R && !x, G = (je ?? Ae) || W, K = be && R > 1;
+	K && !x && V && !G ? j(R) : A !== null && !W && j(null);
+	let q = K && !G && !(Me && !Ne) && !(Pe && !Fe), J = (e) => {
+		e >= 0 && e < R && e !== z && w(e);
+	}, Ie = () => J(B ? R - 1 : z - 1), Le = () => J(V ? 0 : z + 1), Y = ee(() => {
+		w((e) => {
+			let t = p(e, R);
+			return t < R - 1 ? t + 1 : x ? 0 : e;
+		});
+	});
+	u.useEffect(() => {
+		if (!q) return;
+		let e = setInterval(Y, v);
+		return () => clearInterval(e);
+	}, [
+		q,
+		v,
+		Y
+	]);
+	let Re = () => {
+		G ? (!x && V && J(0), j(null), k(!1), F(!0)) : (k(!0), F(!1));
+	}, X = {
+		onMouseEnter: a(Se, () => M(!0)),
+		onMouseLeave: a(Ce, () => M(!1)),
+		onFocus: a(we, (e) => {
+			let t = e.relatedTarget, n = !(t instanceof Node && e.currentTarget.contains(t));
+			P(!0), (n || !_e(e.target)) && F(!1);
+		}),
+		onBlur: a(Te, (e) => {
+			let t = e.relatedTarget;
+			t instanceof Node && e.currentTarget.contains(t) || (P(!1), F(!1));
+		})
+	};
+	if (R === 0) return /* @__PURE__ */ d("div", {
+		ref: D,
+		className: e("relative", S),
+		...X,
+		...C
+	});
+	let ze = (O === "rtl" ? 1 : -1) * z * 100, Z = O === "rtl" ? "-scale-x-100" : void 0, Be = y?.pause ?? le, Ve = y?.play ?? ue, Q = b?.previous ?? de, He = b?.next ?? fe, Ue = b?.picker ?? pe, $ = b?.slide ?? me, We = b?.carouselRoleDescription ?? he, Ge = b?.slideRoleDescription ?? ge;
+	return /* @__PURE__ */ f("div", {
+		ref: D,
+		role: "region",
+		"aria-roledescription": We,
+		"aria-label": "Carousel",
+		className: e("relative isolate overflow-hidden", S),
+		...X,
+		...C,
+		children: [
+			K && /* @__PURE__ */ d("button", {
+				type: "button",
+				"data-carousel-rotation": "",
+				"aria-label": G ? Ve : Be,
+				"aria-controls": T,
+				onClick: Re,
+				onMouseEnter: () => N(!0),
+				onMouseLeave: () => N(!1),
+				className: e(m, "top-2 start-2"),
+				children: d(G ? ye : ve, {})
+			}),
+			/* @__PURE__ */ d("div", {
+				id: T,
+				className: "flex transition-transform duration-300 ease-in-out motion-reduce:transition-none",
+				style: { transform: `translateX(${ze}%)` },
+				children: I.map(({ key: e, node: t }, n) => {
+					let r = n === z;
+					return /* @__PURE__ */ d("div", {
+						role: "group",
+						"aria-roledescription": Ge,
+						"aria-label": $(n, R),
+						"aria-hidden": !r || void 0,
+						inert: !r,
+						className: "w-full shrink-0",
+						children: t
+					}, e);
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				"aria-live": q ? "off" : "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: $(z, R)
+			}),
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": Q,
+				"aria-controls": T,
+				...o(H),
+				onClick: s(H, Ie),
+				className: e(m, "top-1/2 start-2 -translate-y-1/2"),
+				children: /* @__PURE__ */ d(se, {
+					size: 16,
+					className: Z
+				})
+			}),
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": He,
+				"aria-controls": T,
+				...o(U),
+				onClick: s(U, Le),
+				className: e(m, "top-1/2 end-2 -translate-y-1/2"),
+				children: /* @__PURE__ */ d(ce, {
+					size: 16,
+					className: Z
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				role: "group",
+				"aria-label": Ue,
+				className: "absolute inset-x-0 bottom-1 z-10 mx-auto flex w-fit",
+				children: I.map(({ key: t }, n) => {
+					let r = n === z;
+					return /* @__PURE__ */ d("button", {
+						type: "button",
+						"aria-label": $(n, R),
+						"aria-current": r ? "true" : void 0,
+						onClick: () => J(n),
+						className: e("group inline-flex h-6 min-w-6 items-center justify-center", l),
+						children: /* @__PURE__ */ d("span", {
+							"aria-hidden": "true",
+							className: e("block h-2 rounded-full transition-[width,background-color] duration-200 motion-reduce:transition-none", r ? e("w-5 bg-primary", oe.selectedLeaf) : "w-2 bg-stroke-accessible group-hover:bg-foreground forced-colors:bg-[ButtonText] forced-colors:forced-color-adjust-none")
+						})
+					}, t);
+				})
+			})
+		]
+	});
+};
+h.displayName = "Carousel";
+var g = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ d("div", {
+	ref: r,
+	className: e("p-4", t),
+	...i,
+	children: n
+});
+g.displayName = "CarouselItem";
+var _ = /* @__PURE__ */ Object.assign(h, { Item: g });
+//#endregion
+export { _ as Carousel, g as CarouselItem };
+
+//# sourceMappingURL=Carousel.mjs.map

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

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

package/dist/components/layout/Flex.cjs

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

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

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