@mortenbrudvik/waveui 0.7.0 → 0.8.0

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

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

package/dist/components/layout/Card.mjs

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

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

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

package/dist/components/layout/Carousel.cjs

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