@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/button-group/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":["AriaButton","Menu","MenuItem"],"sources":["../../src/button-group/button-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport {\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useLeavingItems,\n  useMorphWidth,\n  prefersReducedMotion,\n} from \"../lib/motion.js\";\nimport { Menu, MenuItem, MenuTrigger } from \"../menu/menu.js\";\n\nexport type ButtonGroupVariant = \"outline\" | \"solid\";\nexport type ButtonGroupSize = \"sm\" | \"md\";\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ButtonGroupItem {\n  /** Stable key for the segment. */\n  id: string;\n  /** Visible text and the accessible name. Changing it crossfades in place, so \"Share\" can answer \"Copied\". */\n  label: string;\n  /** Every other label this segment can show, such as [\"Copied\"]. The segment sizes to the widest, so a label change never resizes it. */\n  reserve?: string[];\n  /** An icon before the label. Swapping it for another morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** Shows only the icon; the label becomes the accessible name and the tooltip. */\n  iconOnly?: boolean;\n  /** Visible content in place of the label, such as a live value. The label stays the accessible name. */\n  content?: ReactNode;\n  onSelect?: () => void;\n  /** Renders the segment as a link. */\n  href?: string;\n  isDisabled?: boolean;\n}\n\nexport interface ButtonGroupMenuItem {\n  id: string;\n  label: string;\n  /** An icon before the label. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  onSelect?: () => void;\n  href?: string;\n  isDisabled?: boolean;\n  /** Colours the item as a destructive action. */\n  destructive?: boolean;\n}\n\nexport interface ButtonGroupMenu {\n  /** Accessible name and tooltip of the chevron segment, such as \"More actions\". */\n  label: string;\n  items: ButtonGroupMenuItem[];\n}\n\nexport interface ButtonGroupProps {\n  items: ButtonGroupItem[];\n  /** Adds a trailing chevron segment that opens these actions in a menu aligned to the group's edge. */\n  menu?: ButtonGroupMenu;\n  /** Accessible name of the group, such as \"Document actions\". */\n  label: string;\n  /** @default \"outline\" */\n  variant?: ButtonGroupVariant;\n  /** @default \"md\" */\n  size?: ButtonGroupSize;\n  /** @default \"horizontal\" */\n  orientation?: ButtonGroupOrientation;\n  /** When the row does not fit its container, segments with an icon drop their label and keep the icon. Horizontal only. @default true */\n  collapseLabels?: boolean;\n  /** Disables every segment and the menu. */\n  isDisabled?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Key of the chevron segment. Plain text, because the HTML parser rewrites control characters in server-rendered attributes. */\nconst MENU = \"button-group-menu\";\n\n/** Names the icon element, so swapping Link for Check morphs while a re-render of the same icon stays still. */\nfunction iconKey(node: ReactNode): string {\n  if (!isValidElement(node))\n    return typeof node === \"string\" || typeof node === \"number\" ? String(node) : \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type?.displayName ?? type?.name ?? \"icon\");\n}\n\nconst PHASE =\n  \"col-start-1 row-start-1 inline-flex items-center gap-2 whitespace-nowrap group-data-[size=sm]/bg:gap-1.5\";\n\nfunction LeavingPhase({\n  id,\n  onDone,\n  children,\n}: {\n  id: number;\n  onDone: (id: number) => void;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      className={cn(PHASE + \" motion-safe:animate-label-out motion-reduce:animate-fade-out\")}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Icon and label of one segment. Every reserved label sits invisibly in the same\n * grid cell, so the segment is as wide as its widest state and a new label\n * crossfades inside a fixed box: it rises in from a soft blur while the old one\n * lifts away. A label nobody reserved still never snaps: the slot springs to its\n * width.\n */\nfunction SegmentContent({ item }: { item: ButtonGroupItem }) {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  const glyph = iconKey(item.icon);\n  const key =\n    glyph + \"|\" + (item.content !== undefined ? \"\\u0000content\" : item.iconOnly ? \"\" : item.label);\n  useMorphWidth(contentRef, key);\n\n  const collapsible = item.icon ? \"group-data-[compact]/bg:hidden\" : \"\";\n  const node = (\n    <>\n      {item.icon ? (\n        <span className=\"inline-flex flex-none [&_svg]:size-(--icon-sm)\">{item.icon}</span>\n      ) : null}\n      {item.content !== undefined ? (\n        <span className=\"inline-flex items-center tabular-nums\">{item.content}</span>\n      ) : item.iconOnly ? null : (\n        <span className={cn(\"inline-block \" + collapsible)}>{item.label}</span>\n      )}\n    </>\n  );\n  const { leaving, changed, remove } = useLeavingItems(key, node, () => phaseRef.current);\n  const sizers =\n    item.iconOnly || item.content !== undefined\n      ? []\n      : [...new Set([item.label, ...(item.reserve ?? [])])];\n\n  return (\n    <span\n      className=\"button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-3))]\"\n      aria-hidden=\"true\"\n    >\n      <span ref={contentRef} className=\"inline-grid flex-none items-center justify-items-center\">\n        {sizers.map((text) => (\n          <span key={text} className={cn(PHASE + \" pointer-events-none invisible\")}>\n            {item.icon ? <span className=\"inline-block size-4 flex-none\" /> : null}\n            <span className={cn(\"inline-block \" + collapsible)}>{text}</span>\n          </span>\n        ))}\n        {leaving.map((entry) => (\n          <LeavingPhase key={entry.id} id={entry.id} onDone={remove}>\n            {entry.value}\n          </LeavingPhase>\n        ))}\n        <span\n          key={key}\n          ref={phaseRef}\n          className={cn(\n            PHASE + (changed ? \" motion-safe:animate-label-in motion-reduce:animate-fade-in\" : \"\"),\n          )}\n        >\n          {node}\n        </span>\n      </span>\n    </span>\n  );\n}\n\nconst inside = (node: HTMLElement, x: number, y: number) => {\n  const rect = node.getBoundingClientRect();\n  return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;\n};\n/** Segments are found by their data-key, so the group needs no ref per segment. */\nconst segmentsIn = (root: HTMLElement | null) =>\n  Array.from(root?.querySelectorAll<HTMLElement>(\":scope > [data-key]\") ?? []);\nconst segmentIn = (root: HTMLElement | null, key: string | null) =>\n  key === null ? undefined : segmentsIn(root).find((node) => node.dataset.key === key);\n/** The segment's box inside the group at sub-pixel precision, undoing any scale an ancestor applies. */\nfunction boxOf(group: HTMLElement, node: HTMLElement) {\n  const outer = group.getBoundingClientRect();\n  const inner = node.getBoundingClientRect();\n  // offsetWidth is rounded to whole pixels, so only a real transform (more than a pixel apart) counts as scale.\n  const scale =\n    group.offsetWidth && Math.abs(outer.width - group.offsetWidth) > 1\n      ? outer.width / group.offsetWidth\n      : 1;\n  return [\n    (inner.left - outer.left) / scale - group.clientLeft + group.scrollLeft,\n    (inner.top - outer.top) / scale - group.clientTop + group.scrollTop,\n    inner.width / scale,\n    inner.height / scale,\n  ] as const;\n}\nconst inert = (node: HTMLElement) =>\n  (node as HTMLButtonElement).disabled || node.getAttribute(\"aria-disabled\") === \"true\";\n\nconst TRAVEL =\n  \"translate var(--duration-snappy) var(--ease-snappy), width var(--duration-snappy) var(--ease-snappy), height var(--duration-snappy) var(--ease-snappy), opacity var(--duration-quick) var(--ease-settle)\";\nconst FADE = \"opacity var(--duration-quick) var(--ease-settle)\";\nconst FADE_INSTANT = \"opacity var(--duration-instant) var(--ease-settle)\";\n\nconst focusRing =\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)\";\n\n/**\n * Related actions joined into one surface: a shared border and radius, hairline\n * dividers, no gaps. One soft highlight glides between segments under the\n * pointer or keyboard focus, the pressed segment answers in place, and an\n * optional chevron segment opens more actions in a menu aligned to the group's\n * edge.\n *\n * Tab visits every segment in order; the arrow keys along the orientation, Home\n * and End also move between them. A segment's label can change in place (\"Share\"\n * answers \"Copied\") without resizing it, and a label that changes right after its\n * segment is pressed is announced once.\n *\n * @example\n * <ButtonGroup label=\"Document actions\" items={[{ id: \"edit\", label: \"Edit\" }, { id: \"share\", label: \"Share\", reserve: [\"Copied\"] }]} />\n */\nexport function ButtonGroup({\n  items,\n  menu,\n  label,\n  variant = \"outline\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  collapseLabels = true,\n  isDisabled = false,\n  className,\n}: ButtonGroupProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const highlight = useRef<HTMLSpanElement>(null);\n  const vertical = orientation === \"vertical\";\n\n  // The highlight sits on the pointer's segment, else the pressed one (touch), else the open menu's chevron, else keyboard focus.\n  const [hover, setHover] = useState<string | null>(null);\n  const [pressed, setPressed] = useState<string | null>(null);\n  const [focused, setFocused] = useState<string | null>(null);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const active = hover ?? pressed ?? (menuOpen ? MENU : null) ?? focused;\n  const keys = [...items.map((item) => item.id), ...(menu ? [MENU] : [])];\n  const activeIndex = active ? keys.indexOf(active) : -1;\n  const inertKey = String(isDisabled) + items.map((item) => (item.isDisabled ? 1 : 0)).join(\"\");\n\n  const shown = useRef<string | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = highlight.current;\n    const group = root.current;\n    if (!el || !group) return;\n    const reduced = prefersReducedMotion();\n    const node = segmentIn(group, active);\n    // Hovering a disabled segment shows nothing; focus on one still shows where the keyboard is.\n    if (!node || (inert(node) && active !== focused)) {\n      if (shown.current) {\n        el.style.transition = reduced ? FADE_INSTANT : FADE;\n        el.style.opacity = \"0\";\n      }\n      shown.current = null;\n      return;\n    }\n    const [x, y, width, height] = boxOf(group, node);\n    // Arriving from nowhere, it appears in place; only moves between segments travel.\n    const arriving = !shown.current || reduced;\n    el.style.transition = arriving ? (reduced ? FADE_INSTANT : FADE) : TRAVEL;\n    el.style.translate = x + \"px \" + y + \"px\";\n    el.style.width = width + \"px\";\n    el.style.height = height + \"px\";\n    el.style.opacity = \"1\";\n    shown.current = active;\n    // inertKey re-checks a segment that turns disabled under a still pointer.\n  }, [active, inertKey, focused]);\n\n  // Segments resize when a label morphs or labels collapse; the highlight stays locked to its segment.\n  const keyList = keys.join(\"\\u0000\");\n  useEffect(() => {\n    const group = root.current;\n    const el = highlight.current;\n    if (!group || !el || typeof ResizeObserver === \"undefined\") return;\n    // Work is deferred a frame: a callback that changes layout inside the observer's own notification reports a loop error.\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        const node = segmentIn(group, shown.current);\n        if (!node) return;\n        const [x, y, width, height] = boxOf(group, node);\n        el.style.transition = FADE;\n        el.style.translate = x + \"px \" + y + \"px\";\n        el.style.width = width + \"px\";\n        el.style.height = height + \"px\";\n      });\n    });\n    observer.observe(group);\n    segmentsIn(group).forEach((node) => observer.observe(node));\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [keyList]);\n\n  // Labels collapse to icons when the row overflows, and come back once the container is wide enough for the full row again.\n  const [overflowing, setCompact] = useState(false);\n  const fullWidth = useRef(0);\n  const blockedAt = useRef(0);\n  const collapsible =\n    collapseLabels &&\n    !vertical &&\n    items.some((item) => item.icon && !item.iconOnly && item.content === undefined);\n  const compact = collapsible && overflowing;\n  useEffect(() => {\n    const group = root.current;\n    const parent = group?.parentElement;\n    if (!group || !parent || !collapsible || typeof ResizeObserver === \"undefined\") return;\n    const check = () => {\n      const box = getComputedStyle(parent);\n      const available =\n        parent.clientWidth - parseFloat(box.paddingLeft) - parseFloat(box.paddingRight);\n      if (group.dataset.compact === undefined) {\n        if (group.scrollWidth > group.clientWidth + 1) {\n          fullWidth.current = group.scrollWidth + 2;\n          blockedAt.current = available;\n          setCompact(true);\n        }\n      } else if (available > blockedAt.current && available >= fullWidth.current) setCompact(false);\n    };\n    // Collapsing changes the layout being observed, so the check runs a frame later (see the highlight observer).\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(check);\n    });\n    observer.observe(group);\n    observer.observe(parent);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [collapsible, keyList]);\n\n  // Pressing tracks the segment under the finger, so touch gets the same highlight a pointer gets on hover.\n  useEffect(() => {\n    if (!pressed) return;\n    const release = () => setPressed(null);\n    window.addEventListener(\"pointerup\", release);\n    window.addEventListener(\"pointercancel\", release);\n    return () => {\n      window.removeEventListener(\"pointerup\", release);\n      window.removeEventListener(\"pointercancel\", release);\n    };\n  }, [pressed]);\n\n  const hit = (event: PointerEvent) => {\n    for (const node of segmentsIn(root.current))\n      if (inside(node, event.clientX, event.clientY))\n        return inert(node) ? null : (node.dataset.key ?? null);\n    return null;\n  };\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType !== \"touch\") setHover(hit(event));\n  };\n  const onPointerLeave = () => setHover(null);\n  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.button === 0) setPressed(hit(event));\n  };\n\n  // Keyboard focus shows the highlight; a mouse click focuses without it, so nothing stays lit after the pointer leaves.\n  const onFocus = (event: FocusEvent<HTMLDivElement>) => {\n    const target = event.target as HTMLElement;\n    const key = target.dataset.key;\n    if (key === undefined) return;\n    let visible = true;\n    try {\n      visible = target.matches(\":focus-visible\");\n    } catch {\n      /* older engines */\n    }\n    setFocused(visible ? key : null);\n  };\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!root.current?.contains(event.relatedTarget)) setFocused(null);\n  };\n\n  // Tab visits every segment in order; arrow keys along the orientation, Home and End also move between them.\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.defaultPrevented) return;\n    // Disabled segments stay focusable (aria-disabled), so the keyboard can find them and hear why nothing happens.\n    const list = segmentsIn(root.current).filter((node) => !(node as HTMLButtonElement).disabled);\n    const index = list.findIndex((node) => node === document.activeElement);\n    if (index < 0) return;\n    const rtl = !vertical && getComputedStyle(root.current!).direction === \"rtl\";\n    const forward = vertical ? \"ArrowDown\" : rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const backward = vertical ? \"ArrowUp\" : rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    const last = list.length - 1;\n    const target =\n      event.key === forward\n        ? index === last\n          ? 0\n          : index + 1\n        : event.key === backward\n          ? index === 0\n            ? last\n            : index - 1\n          : event.key === \"Home\"\n            ? 0\n            : event.key === \"End\"\n              ? last\n              : -1;\n    if (target < 0) return;\n    event.preventDefault();\n    list[target]!.focus();\n  };\n\n  // A label that changes right after its segment is pressed, such as \"Copied\", is announced once; the quiet revert is not.\n  const [announcement, setAnnouncement] = useState(\"\");\n  const labels = useRef<Map<string, string> | null>(null);\n  const activated = useRef({ key: \"\", at: 0 });\n  const labelList = items.map((item) => item.id + \"\\u0000\" + item.label).join(\"\\u0001\");\n  useEffect(() => {\n    const previous = labels.current;\n    labels.current = new Map(items.map((item) => [item.id, item.label]));\n    if (!previous) return;\n    const recent = performance.now() - activated.current.at < 1000;\n    const changed = items.filter(\n      (item) =>\n        recent &&\n        item.id === activated.current.key &&\n        previous.has(item.id) &&\n        previous.get(item.id) !== item.label &&\n        item.content === undefined,\n    );\n\n    if (changed.length) setAnnouncement(changed.map((item) => item.label).join(\", \"));\n    // labelList carries the only part of items this effect reads.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [labelList]);\n\n  const select = (item: ButtonGroupItem) => {\n    activated.current = { key: item.id, at: performance.now() };\n    item.onSelect?.();\n  };\n  const quiet = (index: number) =>\n    activeIndex >= 0 && (index === activeIndex || index === activeIndex + 1) ? \"\" : undefined;\n\n  const segments = items.map((item, index) => {\n    const off = item.isDisabled && !isDisabled;\n    const named = item.iconOnly || item.content !== undefined || (compact && !!item.icon);\n    const common = {\n      className: cn(\"button-group-segment \" + focusRing),\n      \"data-key\": item.id,\n      \"data-quiet\": quiet(index),\n      \"data-icon-only\": item.iconOnly ? \"\" : undefined,\n      \"data-collapsible\":\n        item.icon && !item.iconOnly && item.content === undefined ? \"\" : undefined,\n      \"aria-label\": named ? item.label : undefined,\n      title: item.iconOnly || (compact && item.icon) ? item.label : undefined,\n    };\n    const body = (\n      <span className=\"button-group-content\">\n        <SegmentContent item={item} />\n      </span>\n    );\n    const name = named ? null : <span className=\"sr-only\">{item.label}</span>;\n    if (item.href && !off && !isDisabled)\n      return (\n        <a key={item.id} {...common} href={item.href} onClick={() => select(item)}>\n          {body}\n          {name}\n        </a>\n      );\n    return (\n      <button\n        key={item.id}\n        {...common}\n        type=\"button\"\n        disabled={isDisabled}\n        aria-disabled={off || undefined}\n        onClick={off ? undefined : () => select(item)}\n      >\n        {body}\n        {name}\n      </button>\n    );\n  });\n\n  return (\n    <div\n      ref={root}\n      role=\"group\"\n      aria-label={label}\n      aria-disabled={isDisabled || undefined}\n      data-orientation={orientation}\n      data-variant={variant}\n      data-size={size}\n      data-compact={compact ? \"\" : undefined}\n      onPointerMove={onPointerMove}\n      onPointerLeave={onPointerLeave}\n      onPointerDown={onPointerDown}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      className={cn(\"button-group group/bg\", className)}\n    >\n      <span\n        ref={highlight}\n        aria-hidden=\"true\"\n        data-pressed={pressed && pressed === active ? \"\" : undefined}\n        className=\"button-group-highlight\"\n      />\n      {segments}\n      {menu ? (\n        <MenuTrigger onOpenChange={setMenuOpen}>\n          <AriaButton\n            data-key={MENU}\n            data-trigger=\"\"\n            data-quiet={quiet(items.length)}\n            aria-label={menu.label}\n            isDisabled={isDisabled}\n            className={cn(\"button-group-segment group/trigger \" + focusRing)}\n          >\n            <span className=\"button-group-content\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.75}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden=\"true\"\n                className=\"size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n              >\n                <path d=\"m6 9 6 6 6-6\" />\n              </svg>\n            </span>\n          </AriaButton>\n          <Menu placement={vertical ? \"bottom start\" : \"bottom end\"} offset={6} shouldFocusWrap>\n            {menu.items.map((action) => (\n              <MenuItem\n                key={action.id}\n                id={action.id}\n                textValue={action.label}\n                href={action.href}\n                isDisabled={action.isDisabled}\n                onAction={action.onSelect}\n                destructive={action.destructive}\n              >\n                {action.icon ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className={action.destructive ? \"inline-flex\" : \"inline-flex text-text-secondary\"}\n                  >\n                    {action.icon}\n                  </span>\n                ) : null}\n                {action.label}\n              </MenuItem>\n            ))}\n          </Menu>\n        </MenuTrigger>\n      ) : null}\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/button-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupItem, ButtonGroupMenu, ButtonGroupMenuItem, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupSize, ButtonGroupVariant } from "./button-group.js";
+export { ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant };

package/dist/button-group/index.js

@@ -0,0 +1,2 @@
+import { ButtonGroup } from "./button-group.js";
+export { ButtonGroup };

package/dist/calendar/calendar.d.ts

@@ -50,7 +50,7 @@ export declare const calendarClearVariants: (props?: import("class-variance-auth
  * is a strikethrough.
  */
 export declare const calendarCellVariants: (props?: ({
-  selection?: "single" | "range" | null | undefined;
+  selection?: "single" | "range" | "band" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalendarSharedProps {
   /**

package/dist/calendar/calendar.js

@@ -1,9 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
-import { forwardRef, useContext } from "react";
+import { forwardRef, useContext, useRef, useState } from "react";
 import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, CalendarStateContext, RangeCalendar, RangeCalendarStateContext } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/calendar/calendar.tsx
 /**
 * Calendar, built on React Aria's Calendar and RangeCalendar.
@@ -41,7 +43,7 @@ const calendarNavVariants = cva([
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
 	"[&_svg]:rtl:-scale-x-100",
-	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"calendar-nav-motion",
 	"data-[hovered]:bg-muted data-[pressed]:bg-muted",
 	"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)",
 	"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)",
@@ -49,6 +51,8 @@ const calendarNavVariants = cva([
 ]);
 const calendarMonthsVariants = cva(["flex flex-col gap-(--density-gap) sm:flex-row sm:items-start"]);
 const calendarHeadingVariants = cva(["mb-1 text-center text-sm font-semibold text-foreground"]);
+/** The month title of a one-month calendar, in the header beside the buttons. */
+const calendarTitleVariants = cva(["min-w-0 flex-1 text-start text-sm font-semibold text-foreground tabular-nums whitespace-nowrap"]);
 const calendarGridVariants = cva(["border-collapse"]);
 const calendarHeaderCellVariants = cva(["w-(--density-control-h-sm) pb-1", "text-center text-2xs font-medium text-muted-foreground"]);
 const calendarClearVariants = cva([
@@ -79,8 +83,8 @@ const calendarCellVariants = cva([
 	"size-(--density-control-h-sm) rounded-md",
 	"text-sm leading-(--leading-normal) text-foreground",
 	"cursor-pointer select-none outline-none",
-	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-	"data-[hovered]:bg-muted",
+	"relative z-10 calendar-day",
+	"data-[hovered]:not-data-[selected]:bg-muted",
 	"data-[today]:font-semibold data-[today]:underline data-[today]:underline-offset-4",
 	"data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-(--opacity-disabled)",
 	"data-[unavailable]:cursor-not-allowed data-[unavailable]:text-muted-foreground",
@@ -96,13 +100,24 @@ const calendarCellVariants = cva([
 	* exactly what OCP asks a variant to model.
 	*/
 selection: {
-		single: ["data-[selected]:bg-primary data-[selected]:text-primary-foreground", "data-[selected]:font-semibold"],
+		single: ["data-[selected]:text-primary-foreground", "data-[selected]:font-semibold"],
 		range: [
 			"data-[selected]:rounded-none data-[selected]:bg-muted data-[selected]:text-foreground",
 			"data-[selection-start]:rounded-s-md data-[selection-start]:bg-primary",
 			"data-[selection-start]:font-semibold data-[selection-start]:text-primary-foreground",
 			"data-[selection-end]:rounded-e-md data-[selection-end]:bg-primary",
 			"data-[selection-end]:font-semibold data-[selection-end]:text-primary-foreground"
+		],
+		/**
+		* The range picker's own look: the band and the ends are drawn beneath the
+		* cells by the picker, which slides and stretches them, so the cells paint
+		* only their text (and the shorter press, .9 in 120ms).
+		*/
+		band: [
+			"[--press-scale:0.9] [--press-time:120ms]",
+			"data-[selected]:not-data-[selection-start]:not-data-[selection-end]:text-foreground",
+			"data-[selection-start]:font-medium data-[selection-start]:text-primary-foreground data-[selection-start]:[--number-delay:40ms]",
+			"data-[selection-end]:font-medium data-[selection-end]:text-primary-foreground data-[selection-end]:[--number-delay:40ms]"
 		]
 	} },
 	defaultVariants: { selection: "single" }
@@ -169,25 +184,245 @@ function ClearButton({ label }) {
 		children: label
 	});
 }
+/** The month's rows, headers and cells: one grid for the month `offset` months from the first visible one. */
+function MonthGrid({ offset, selection }) {
+	return /* @__PURE__ */ jsxs(CalendarGrid, {
+		offset: { months: offset },
+		className: calendarGridVariants(),
+		children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (weekday) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
+			className: calendarHeaderCellVariants(),
+			children: weekday
+		}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+			date,
+			"data-slot": "calendar-cell",
+			className: calendarCellVariants({ selection })
+		}) })]
+	});
+}
+/** The first visible day, from whichever root we are under. */
+function useVisibleStart() {
+	const single = useContext(CalendarStateContext);
+	const range = useContext(RangeCalendarStateContext);
+	return (single ?? range)?.visibleRange.start;
+}
+/**
+* The month title. React Aria's own heading stays, visually hidden, as the text;
+* the copy the eye sees crosses in place: the new month arrives from the side the
+* strip travels to while the old one leaves toward the other. Nothing animates on
+* first mount.
+*/
+function MonthTitle() {
+	const start = useVisibleStart();
+	const headingRef = useRef(null);
+	const [text, setText] = useState("");
+	const [shown, setShown] = useState(start);
+	const [dir, setDir] = useState(1);
+	if (start && shown && start.compare(shown) !== 0) {
+		setShown(start);
+		setDir(start.compare(shown) > 0 ? 1 : -1);
+	}
+	useIsomorphicLayoutEffect(() => {
+		const next = headingRef.current?.textContent ?? "";
+		if (next !== text) setText(next);
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CalendarHeading, {
+		ref: headingRef,
+		className: "sr-only"
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "calendar-title",
+		className: calendarTitleVariants(),
+		children: /* @__PURE__ */ jsx(SwapText, {
+			swapKey: text,
+			dir,
+			motion: "slide",
+			className: "block",
+			children: text
+		}, text === "" ? "boot" : "live")
+	})] });
+}
+/** A day cell's place in its month's grid, read from the table's structure: no layout is forced. */
+function gridPlace(cell) {
+	const td = cell.closest("td");
+	const tr = td?.parentElement;
+	return td && tr ? {
+		col: td.cellIndex,
+		row: tr.sectionRowIndex
+	} : null;
+}
+/**
+* Drives the selected disc of every month. The disc is one element under the day
+* cells, placed from the selected cell's measured box, so it glides on a straight
+* line between any two days, keeps its place while the strip slides, and only
+* grows in or fades out when the selection enters or leaves a month. Each number
+* flips colour as the disc actually passes it: the day it lands on waits longer on
+* long hops, the day it leaves waits longer on short ones.
+*
+* It is one component, first in the tree, because order matters: the colour
+* transitions start at the first style recalculation after a cell's state
+* changes, and anything that measures the page (the title's swap does, on every
+* commit) forces one. So every delay is set from the table's structure before any
+* box is measured, and it runs before the header's effects do.
+*/
+function DiscDriver() {
+	const marker = useRef(null);
+	const memory = useRef(/* @__PURE__ */ new WeakMap());
+	useContext(CalendarStateContext);
+	useIsomorphicLayoutEffect(() => {
+		const root = marker.current?.parentElement;
+		if (!root) return;
+		const work = [...root.querySelectorAll("[data-slot=\"calendar-month\"]")].flatMap((pane) => {
+			const el = pane.querySelector(":scope > [data-slot=\"calendar-disc\"]");
+			if (!el) return [];
+			return [{
+				pane,
+				el,
+				cell: pane.querySelector("[data-slot=\"calendar-cell\"][data-selected]")
+			}];
+		});
+		for (const { el, cell } of work) {
+			if (!cell) continue;
+			const place = gridPlace(cell);
+			const before = memory.current.get(el);
+			if (el.dataset.visible === void 0 || !before || before.cell === cell || !place) continue;
+			const distance = Math.hypot(place.col - before.col, place.row - before.row);
+			if (distance === 0) continue;
+			cell.style.setProperty("--number-delay", `${Math.round(Math.min(260, 95 + 85 * Math.log(distance)))}ms`);
+			if (before.cell.isConnected) before.cell.style.setProperty("--number-delay", `${Math.round(Math.max(20, 130 / distance))}ms`);
+		}
+		for (const { pane, el, cell } of work) {
+			if (!cell) {
+				delete el.dataset.visible;
+				memory.current.delete(el);
+				continue;
+			}
+			const box = cell.getBoundingClientRect();
+			const paneBox = pane.getBoundingClientRect();
+			const x = box.left - paneBox.left - (box.width - cell.offsetWidth) / 2;
+			const y = box.top - paneBox.top - (box.height - cell.offsetHeight) / 2;
+			el.style.width = `${cell.offsetWidth}px`;
+			el.style.height = `${cell.offsetHeight}px`;
+			if (el.dataset.visible === void 0) {
+				el.style.transition = "none";
+				el.style.translate = `${x}px ${y}px`;
+				el.offsetWidth;
+				el.style.transition = "";
+				el.dataset.visible = "";
+			} else el.style.translate = `${x}px ${y}px`;
+			const place = gridPlace(cell);
+			if (place) memory.current.set(el, {
+				cell,
+				...place
+			});
+		}
+	});
+	return /* @__PURE__ */ jsx("span", {
+		ref: marker,
+		hidden: true,
+		"data-slot": "calendar-disc-driver"
+	});
+}
+/** The disc itself: an empty shell the driver places. */
+function SelectionDisc() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "calendar-disc",
+		className: "calendar-disc",
+		children: /* @__PURE__ */ jsx("span", { className: "calendar-disc-fill" })
+	});
+}
+/**
+* One month of the strip. Months sit side by side in a clipped window and slide
+* on a spring; the pane that is not the current month fades back and is inert.
+*/
+function MonthPane({ offset, dir, fresh, disc, selection }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			if (!node) return;
+			if (offset === 0) node.removeAttribute("inert");
+			else node.setAttribute("inert", "");
+		},
+		"data-slot": "calendar-month",
+		"data-offset": offset,
+		"aria-hidden": offset === 0 ? void 0 : true,
+		style: {
+			"--k": offset,
+			"--dir": dir
+		},
+		className: cn("calendar-pane", fresh && "motion-safe:animate-calendar-pane-in"),
+		children: [disc ? /* @__PURE__ */ jsx(SelectionDisc, {}) : null, /* @__PURE__ */ jsx(MonthGrid, {
+			offset,
+			selection
+		})]
+	});
+}
+/**
+* One month, shown with its neighbours beside it on a strip. Moving by a month
+* slides the strip; a jump of more than a month brings the new month in from one
+* month away instead of scrolling through the ones between.
+*/
+function MonthStrip({ selection }) {
+	const start = useVisibleStart();
+	const [shown, setShown] = useState(start);
+	const [dir, setDir] = useState(1);
+	const [fresh, setFresh] = useState(null);
+	const strip = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const el = strip.current;
+		const current = el?.querySelector("[data-offset=\"0\"]");
+		if (el && current) el.style.height = `${current.offsetHeight}px`;
+	});
+	const keyOf = (offset) => {
+		const d = start?.add({ months: offset });
+		return d ? `${d.era}-${d.year}-${d.month}` : String(offset);
+	};
+	if (start && shown && start.compare(shown) !== 0) {
+		const months = (start.year - shown.year) * 12 + (start.month - shown.month);
+		setShown(start);
+		setDir(months > 0 ? 1 : -1);
+		setFresh(Math.abs(months) > 1 ? keyOf(0) : null);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: strip,
+		"data-slot": "calendar-months",
+		className: "calendar-strip",
+		children: [
+			-1,
+			0,
+			1
+		].map((offset) => /* @__PURE__ */ jsx(MonthPane, {
+			offset,
+			dir,
+			fresh: fresh === keyOf(offset) && offset === 0,
+			disc: selection === "single",
+			selection
+		}, keyOf(offset)))
+	});
+}
 /** Header, grids and Clear — identical under both calendar roots. */
 function CalendarBody({ visibleMonths, clearable, clearLabel, previousLabel, nextLabel, selection }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	const strip = visibleMonths === 1;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		strip && selection === "single" ? /* @__PURE__ */ jsx(DiscDriver, {}) : null,
 		/* @__PURE__ */ jsxs("header", {
 			"data-slot": "calendar-header",
 			className: calendarHeaderVariants(),
-			children: [/* @__PURE__ */ jsx(Button, {
-				slot: "previous",
-				"aria-label": previousLabel,
-				className: calendarNavVariants(),
-				children: /* @__PURE__ */ jsx(ChevronPrevious, {})
-			}), /* @__PURE__ */ jsx(Button, {
-				slot: "next",
-				"aria-label": nextLabel,
-				className: calendarNavVariants(),
-				children: /* @__PURE__ */ jsx(ChevronNext, {})
+			children: [strip ? /* @__PURE__ */ jsx(MonthTitle, {}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "ms-auto flex items-center gap-0.5",
+				children: [/* @__PURE__ */ jsx(Button, {
+					slot: "previous",
+					"aria-label": previousLabel,
+					className: calendarNavVariants(),
+					children: /* @__PURE__ */ jsx(ChevronPrevious, {})
+				}), /* @__PURE__ */ jsx(Button, {
+					slot: "next",
+					"aria-label": nextLabel,
+					className: calendarNavVariants(),
+					children: /* @__PURE__ */ jsx(ChevronNext, {})
+				})]
 			})]
 		}),
-		/* @__PURE__ */ jsx("div", {
+		strip ? /* @__PURE__ */ jsx(MonthStrip, { selection }) : /* @__PURE__ */ jsx("div", {
 			"data-slot": "calendar-months",
 			className: calendarMonthsVariants(),
 			children: Array.from({ length: visibleMonths }, (_, offset) => /* @__PURE__ */ jsxs("div", {
@@ -195,17 +430,9 @@ function CalendarBody({ visibleMonths, clearable, clearLabel, previousLabel, nex
 				children: [/* @__PURE__ */ jsx(CalendarHeading, {
 					offset: { months: offset },
 					className: calendarHeadingVariants()
-				}), /* @__PURE__ */ jsxs(CalendarGrid, {
-					offset: { months: offset },
-					className: calendarGridVariants(),
-					children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (weekday) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
-						className: calendarHeaderCellVariants(),
-						children: weekday
-					}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
-						date,
-						"data-slot": "calendar-cell",
-						className: calendarCellVariants({ selection })
-					}) })]
+				}), /* @__PURE__ */ jsx(MonthGrid, {
+					offset,
+					selection
 				})]
 			}, offset))
 		}),
@@ -279,6 +506,6 @@ const CalendarRange = forwardRef(function CalendarRange({ className, label, labe
 	});
 });
 //#endregion
-export { Calendar$1 as Calendar, CalendarRange, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants };
+export { Calendar$1 as Calendar, CalendarRange, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarTitleVariants, calendarVariants };
 
 //# sourceMappingURL=calendar.js.map

package/dist/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","names":["AriaButton","AriaCalendarHeading","AriaCalendarGrid","AriaCalendarGridHeader","AriaCalendarHeaderCell","AriaCalendarGridBody","AriaCalendarCell","Calendar","AriaCalendar","AriaRangeCalendar"],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DateValue } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext } from \"react\";\nimport {\n  Button as AriaButton,\n  Calendar as AriaCalendar,\n  CalendarCell as AriaCalendarCell,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarGridBody as AriaCalendarGridBody,\n  CalendarGridHeader as AriaCalendarGridHeader,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  CalendarHeading as AriaCalendarHeading,\n  CalendarStateContext,\n  RangeCalendar as AriaRangeCalendar,\n  RangeCalendarStateContext,\n  type CalendarProps as AriaCalendarProps,\n  type RangeCalendarProps as AriaRangeCalendarProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Calendar, built on React Aria's Calendar and RangeCalendar.\n *\n * Values are `DateValue` objects from `@internationalized/date`, NOT JS\n * `Date`. ADR 0006 names that package the one allowed public type dependency\n * precisely here: a calendar day has no time zone, so modelling it as a\n * timestamp is what costs you a day at a DST boundary. The import is\n * `import type` only — nothing at runtime needs a constructor from it, so the\n * package contributes zero bytes to the bundle.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would simply never be\n * emitted — the component would render unstyled, with no error anywhere.\n *\n * State comes from React Aria's data attributes rather than pseudo-classes:\n * `data-[focus-visible]` is keyboard focus only, and `data-[hovered]` /\n * `data-[pressed]` cover pointer, touch and keyboard uniformly.\n */\nexport const calendarVariants = cva([\n  \"flex w-fit flex-col gap-(--density-gap) box-border\",\n  \"font-sans text-sm leading-(--leading-normal) text-foreground\",\n]);\n\nexport const calendarLabelVariants = cva([\"text-sm font-medium text-foreground\"]);\n\nexport const calendarHeaderVariants = cva([\n  \"flex items-center justify-between gap-(--density-control-gap)\",\n]);\n\n/**\n * The month/prev/next buttons.\n *\n * Deliberately NOT `buttonVariants` from ../button. That would put a\n * cross-component import in the bundle for one caller and six classes, and\n * DRY extracts at two callers, not one.\n */\nexport const calendarNavVariants = cva([\n  \"inline-flex shrink-0 items-center justify-center\",\n  \"size-(--density-control-h-sm) rounded-md\",\n  // A library consumer may load no reset at all, so a bare <button> keeps its\n  // user-agent border and ButtonFace grey without these two.\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n  \"cursor-pointer select-none text-foreground outline-none\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  // The glyph is directional where the BEHAVIOUR is logical: React Aria maps\n  // slot=\"previous\" to the correct month either way, so only the arrow flips.\n  \"[&_svg]:rtl:-scale-x-100\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nexport const calendarMonthsVariants = cva([\n  \"flex flex-col gap-(--density-gap) sm:flex-row sm:items-start\",\n]);\n\nexport const calendarHeadingVariants = cva([\n  \"mb-1 text-center text-sm font-semibold text-foreground\",\n]);\n\nexport const calendarGridVariants = cva([\n  // Without this a bare <table> falls back to user-agent border spacing and\n  // the range band shows gaps between cells.\n  \"border-collapse\",\n]);\n\nexport const calendarHeaderCellVariants = cva([\n  \"w-(--density-control-h-sm) pb-1\",\n  \"text-center text-2xs font-medium text-muted-foreground\",\n]);\n\nexport const calendarClearVariants = cva([\n  \"self-end rounded-md px-2 py-1\",\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n  \"cursor-pointer select-none text-sm text-muted-foreground outline-none\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A day.\n *\n * Sized from `--density-control-h-sm` rather than a new\n * `--density-calendar-cell`: the density contract test requires every scope to\n * declare every token name, so a new one is three file edits — and this one is\n * already 30/36/42px, all clear of the 24px floor that WCAG 2.2 SC 2.5.8 sets.\n *\n * ARCHITECTURE section 5 rule 6 — no state is carried by colour alone, because\n * every author colour is replaced under forced-colors and the distinction\n * would vanish. Selected adds weight, the range ends add SHAPE, today is an\n * underline (not an outline, which would fight the focus ring) and unavailable\n * is a strikethrough.\n */\nexport const calendarCellVariants = cva(\n  [\n    \"flex items-center justify-center box-border\",\n    \"size-(--density-control-h-sm) rounded-md\",\n    \"text-sm leading-(--leading-normal) text-foreground\",\n    \"cursor-pointer select-none outline-none\",\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n    \"data-[hovered]:bg-muted\",\n    \"data-[today]:font-semibold data-[today]:underline data-[today]:underline-offset-4\",\n    \"data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-(--opacity-disabled)\",\n    // Unavailable dates stay FOCUSABLE, so ADR 0007 holds them to 4.5:1 — this\n    // dims to muted-foreground, which the contrast contract grades, never below.\n    \"data-[unavailable]:cursor-not-allowed data-[unavailable]:text-muted-foreground\",\n    \"data-[unavailable]:line-through\",\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n    \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n    \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  ],\n  {\n    variants: {\n      /**\n       * A variant axis rather than a boolean prop, because the two modes are\n       * mutually exclusive visual treatments of the same element — which is\n       * exactly what OCP asks a variant to model.\n       */\n      selection: {\n        single: [\n          \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\n          \"data-[selected]:font-semibold\",\n        ],\n        range: [\n          // The band is `muted` — a pair the contrast contract already grades\n          // at 4.5:1, so the range needs no new contrast-pairs.json entry.\n          \"data-[selected]:rounded-none data-[selected]:bg-muted data-[selected]:text-foreground\",\n          \"data-[selection-start]:rounded-s-md data-[selection-start]:bg-primary\",\n          \"data-[selection-start]:font-semibold data-[selection-start]:text-primary-foreground\",\n          \"data-[selection-end]:rounded-e-md data-[selection-end]:bg-primary\",\n          \"data-[selection-end]:font-semibold data-[selection-end]:text-primary-foreground\",\n        ],\n      },\n    },\n    defaultVariants: { selection: \"single\" },\n  },\n);\n\nfunction ChevronPrevious() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\n      <path d=\"m15 18-6-6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction ChevronNext() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\n      <path d=\"m9 18 6-6-6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * Resets the selection to null.\n *\n * It reads the calendar state from React Aria's context and calls\n * `setValue(null)`, which runs through `useControlledState` — so it fires\n * `onChange` for a controlled parent AND updates uncontrolled state, with no\n * mirrored state here. That is the whole reason there is no `onClear` prop:\n * from inside the provider tree the reset is free, and from outside it it\n * would force every consumer to own the value.\n *\n * The two states are narrowed separately rather than through a union, because\n * `setValue` has a different parameter type on each and the union call is not\n * assignable to either.\n *\n * `slot={null}` opts out of the Button context: inside a Calendar that context\n * carries the previous/next slots, and an unslotted Button would claim one.\n */\nfunction ClearButton({ label }: { label: string }) {\n  const calendarState = useContext(CalendarStateContext);\n  const rangeState = useContext(RangeCalendarStateContext);\n\n  /*\n   * Inherit the calendar's own inert states.\n   *\n   * Without this the Clear button stayed focusable and announced as enabled\n   * inside an `isDisabled` calendar — every cell and both nav buttons were\n   * inert, and one control in the middle of them was not. `isReadOnly` is the\n   * same argument: \"the value is immutable\" has to include clearing it.\n   */\n  const state = calendarState ?? rangeState;\n  const isInert = Boolean(state?.isDisabled ?? false) || Boolean(state?.isReadOnly ?? false);\n\n  return (\n    <AriaButton\n      slot={null}\n      data-slot=\"calendar-clear\"\n      isDisabled={isInert}\n      className={calendarClearVariants()}\n      // Stays enabled when there is nothing to clear. Disabling it on press\n      // moves focus to <body>, which silently strands a keyboard user mid-grid.\n      onPress={() => {\n        if (calendarState) calendarState.setValue(null);\n        else rangeState?.setValue(null);\n      }}\n    >\n      {label}\n    </AriaButton>\n  );\n}\n\ninterface CalendarBodyProps {\n  visibleMonths: number;\n  clearable: boolean;\n  clearLabel: string;\n  previousLabel: string;\n  nextLabel: string;\n  selection: \"single\" | \"range\";\n}\n\n/** Header, grids and Clear — identical under both calendar roots. */\nfunction CalendarBody({\n  visibleMonths,\n  clearable,\n  clearLabel,\n  previousLabel,\n  nextLabel,\n  selection,\n}: CalendarBodyProps) {\n  return (\n    <>\n      <header data-slot=\"calendar-header\" className={calendarHeaderVariants()}>\n        <AriaButton slot=\"previous\" aria-label={previousLabel} className={calendarNavVariants()}>\n          <ChevronPrevious />\n        </AriaButton>\n        <AriaButton slot=\"next\" aria-label={nextLabel} className={calendarNavVariants()}>\n          <ChevronNext />\n        </AriaButton>\n      </header>\n\n      <div data-slot=\"calendar-months\" className={calendarMonthsVariants()}>\n        {Array.from({ length: visibleMonths }, (_, offset) => (\n          <div key={offset} data-slot=\"calendar-month\">\n            {/* Per grid, so three months are three named columns rather than\n                one combined range nobody can map back to a column. */}\n            <AriaCalendarHeading\n              offset={{ months: offset }}\n              className={calendarHeadingVariants()}\n            />\n            <AriaCalendarGrid offset={{ months: offset }} className={calendarGridVariants()}>\n              <AriaCalendarGridHeader>\n                {(weekday) => (\n                  <AriaCalendarHeaderCell className={calendarHeaderCellVariants()}>\n                    {weekday}\n                  </AriaCalendarHeaderCell>\n                )}\n              </AriaCalendarGridHeader>\n              <AriaCalendarGridBody>\n                {(date) => (\n                  <AriaCalendarCell\n                    date={date}\n                    data-slot=\"calendar-cell\"\n                    className={calendarCellVariants({ selection })}\n                  />\n                )}\n              </AriaCalendarGridBody>\n            </AriaCalendarGrid>\n          </div>\n        ))}\n      </div>\n\n      {clearable ? <ClearButton label={clearLabel} /> : null}\n    </>\n  );\n}\n\ninterface CalendarSharedProps {\n  /**\n   * Accessible name for the calendar.\n   *\n   * REQUIRED. React Aria renders the root as `role=\"application\"`, which has\n   * no implicit name, so without this every calendar announces as an unnamed\n   * application — the same finding that made `label` required on Select,\n   * Progress, Slider and ScrollArea.\n   */\n  label: string;\n  /**\n   * Hide the label visually while leaving it on the accessibility tree. Pass\n   * this when the surrounding UI already names the control.\n   *\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Number of months displayed side by side. Maps to React Aria's\n   * `visibleDuration`, which is omitted from the public surface so the two\n   * cannot disagree.\n   *\n   * @default 1\n   */\n  visibleMonths?: number;\n  /**\n   * Render a Clear button that resets the selection to `null`.\n   *\n   * Works controlled and uncontrolled: the button calls React Aria's\n   * `setValue(null)` through context, so `onChange` fires either way and there\n   * is no `onClear` for a consumer to wire up.\n   *\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * Visible text of the Clear button.\n   *\n   * A prop rather than a literal because `ARCHITECTURE.md` §7 rule 9 forbids\n   * hard-coded user-visible strings and says it cannot be retrofitted.\n   * `useMessages()` does not exist yet, so this follows Dialog's `closeLabel`.\n   *\n   * @default \"Clear\"\n   */\n  clearLabel?: string;\n  /**\n   * Accessible name for the previous-month button, which is icon-only. Same\n   * reasoning as {@link CalendarSharedProps.clearLabel}.\n   *\n   * @default \"Previous month\"\n   */\n  previousLabel?: string;\n  /**\n   * Accessible name for the next-month button. Same reasoning as\n   * {@link CalendarSharedProps.clearLabel}.\n   *\n   * @default \"Next month\"\n   */\n  nextLabel?: string;\n  /** Extra classes. Merged last through `cn()`, so the consumer wins. */\n  className?: string;\n}\n\n/**\n * Props for {@link Calendar}.\n *\n * Extends the React Aria type via `Omit` rather than\n * `ComponentPropsWithoutRef`, matching every other React Aria-backed component\n * here and recorded in ADR 0008. Intersecting would advertise DOM props that\n * React Aria ignores silently.\n */\nexport interface CalendarProps\n  extends Omit<\n      AriaCalendarProps<DateValue>,\n      \"className\" | \"style\" | \"children\" | \"visibleDuration\"\n    >,\n    CalendarSharedProps {}\n\n/** Props for {@link CalendarRange}. */\nexport interface CalendarRangeProps\n  extends Omit<\n      AriaRangeCalendarProps<DateValue>,\n      \"className\" | \"style\" | \"children\" | \"visibleDuration\"\n    >,\n    CalendarSharedProps {}\n\n/**\n * A calendar for picking a single date.\n *\n * Maturity: **experimental**. `ARCHITECTURE.md` §7 rule 8's metadata mechanism\n * does not exist yet, and ADR 0006 blocks `stable` until a WebKit test\n * instance lands regardless.\n *\n * `onChange` hands back a `DateValue`; `String(value)` is its `YYYY-MM-DD`\n * form, which is what an API filter or query parameter wants.\n *\n * @example\n * <Calendar label=\"Report date\" value={date} onChange={setDate} clearable />\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n  {\n    className,\n    label,\n    labelHidden = false,\n    visibleMonths = 1,\n    clearable = false,\n    clearLabel = \"Clear\",\n    previousLabel = \"Previous month\",\n    nextLabel = \"Next month\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaCalendar\n      ref={ref}\n      {...props}\n      aria-label={label}\n      visibleDuration={{ months: visibleMonths }}\n      data-slot=\"calendar\"\n      className={cn(calendarVariants(), className)}\n    >\n      {labelHidden ? null : (\n        <span data-slot=\"calendar-label\" className={calendarLabelVariants()}>\n          {label}\n        </span>\n      )}\n      <CalendarBody\n        visibleMonths={visibleMonths}\n        clearable={clearable}\n        clearLabel={clearLabel}\n        previousLabel={previousLabel}\n        nextLabel={nextLabel}\n        selection=\"single\"\n      />\n    </AriaCalendar>\n  );\n});\n\n/**\n * A calendar for picking a contiguous date range.\n *\n * `onChange` hands back `{ start, end }`, both `DateValue`.\n *\n * @example\n * <CalendarRange label=\"Period\" visibleMonths={3}\n *                value={range} onChange={setRange} clearable />\n */\nexport const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(function CalendarRange(\n  {\n    className,\n    label,\n    labelHidden = false,\n    visibleMonths = 1,\n    clearable = false,\n    clearLabel = \"Clear\",\n    previousLabel = \"Previous month\",\n    nextLabel = \"Next month\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaRangeCalendar\n      ref={ref}\n      {...props}\n      aria-label={label}\n      visibleDuration={{ months: visibleMonths }}\n      data-slot=\"calendar\"\n      className={cn(calendarVariants(), className)}\n    >\n      {labelHidden ? null : (\n        <span data-slot=\"calendar-label\" className={calendarLabelVariants()}>\n          {label}\n        </span>\n      )}\n      <CalendarBody\n        visibleMonths={visibleMonths}\n        clearable={clearable}\n        clearLabel={clearLabel}\n        previousLabel={previousLabel}\n        nextLabel={nextLabel}\n        selection=\"range\"\n      />\n    </AriaRangeCalendar>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"calendar.js","names":["AriaButton","AriaCalendarGrid","AriaCalendarGridHeader","AriaCalendarHeaderCell","AriaCalendarGridBody","AriaCalendarCell","AriaCalendarHeading","Calendar","AriaCalendar","AriaRangeCalendar"],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DateValue } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport {\n  Button as AriaButton,\n  Calendar as AriaCalendar,\n  CalendarCell as AriaCalendarCell,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarGridBody as AriaCalendarGridBody,\n  CalendarGridHeader as AriaCalendarGridHeader,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  CalendarHeading as AriaCalendarHeading,\n  CalendarStateContext,\n  RangeCalendar as AriaRangeCalendar,\n  RangeCalendarStateContext,\n  type CalendarProps as AriaCalendarProps,\n  type RangeCalendarProps as AriaRangeCalendarProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Calendar, built on React Aria's Calendar and RangeCalendar.\n *\n * Values are `DateValue` objects from `@internationalized/date`, NOT JS\n * `Date`. ADR 0006 names that package the one allowed public type dependency\n * precisely here: a calendar day has no time zone, so modelling it as a\n * timestamp is what costs you a day at a DST boundary. The import is\n * `import type` only — nothing at runtime needs a constructor from it, so the\n * package contributes zero bytes to the bundle.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would simply never be\n * emitted — the component would render unstyled, with no error anywhere.\n *\n * State comes from React Aria's data attributes rather than pseudo-classes:\n * `data-[focus-visible]` is keyboard focus only, and `data-[hovered]` /\n * `data-[pressed]` cover pointer, touch and keyboard uniformly.\n */\nexport const calendarVariants = cva([\n  \"flex w-fit flex-col gap-(--density-gap) box-border\",\n  \"font-sans text-sm leading-(--leading-normal) text-foreground\",\n]);\n\nexport const calendarLabelVariants = cva([\"text-sm font-medium text-foreground\"]);\n\nexport const calendarHeaderVariants = cva([\n  \"flex items-center justify-between gap-(--density-control-gap)\",\n]);\n\n/**\n * The month/prev/next buttons.\n *\n * Deliberately NOT `buttonVariants` from ../button. That would put a\n * cross-component import in the bundle for one caller and six classes, and\n * DRY extracts at two callers, not one.\n */\nexport const calendarNavVariants = cva([\n  \"inline-flex shrink-0 items-center justify-center\",\n  \"size-(--density-control-h-sm) rounded-md\",\n  // A library consumer may load no reset at all, so a bare <button> keeps its\n  // user-agent border and ButtonFace grey without these two.\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n  \"cursor-pointer select-none text-foreground outline-none\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  // The glyph is directional where the BEHAVIOUR is logical: React Aria maps\n  // slot=\"previous\" to the correct month either way, so only the arrow flips.\n  \"[&_svg]:rtl:-scale-x-100\",\n  // Fill and colour ease in over 160ms; the press shrinks to .96 and springs back.\n  \"calendar-nav-motion\",\n  \"data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nexport const calendarMonthsVariants = cva([\n  \"flex flex-col gap-(--density-gap) sm:flex-row sm:items-start\",\n]);\n\nexport const calendarHeadingVariants = cva([\n  \"mb-1 text-center text-sm font-semibold text-foreground\",\n]);\n\n/** The month title of a one-month calendar, in the header beside the buttons. */\nexport const calendarTitleVariants = cva([\n  \"min-w-0 flex-1 text-start text-sm font-semibold text-foreground tabular-nums whitespace-nowrap\",\n]);\n\nexport const calendarGridVariants = cva([\n  // Without this a bare <table> falls back to user-agent border spacing and\n  // the range band shows gaps between cells.\n  \"border-collapse\",\n]);\n\nexport const calendarHeaderCellVariants = cva([\n  \"w-(--density-control-h-sm) pb-1\",\n  \"text-center text-2xs font-medium text-muted-foreground\",\n]);\n\nexport const calendarClearVariants = cva([\n  \"self-end rounded-md px-2 py-1\",\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n  \"cursor-pointer select-none text-sm text-muted-foreground outline-none\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A day.\n *\n * Sized from `--density-control-h-sm` rather than a new\n * `--density-calendar-cell`: the density contract test requires every scope to\n * declare every token name, so a new one is three file edits — and this one is\n * already 30/36/42px, all clear of the 24px floor that WCAG 2.2 SC 2.5.8 sets.\n *\n * ARCHITECTURE section 5 rule 6 — no state is carried by colour alone, because\n * every author colour is replaced under forced-colors and the distinction\n * would vanish. Selected adds weight, the range ends add SHAPE, today is an\n * underline (not an outline, which would fight the focus ring) and unavailable\n * is a strikethrough.\n */\nexport const calendarCellVariants = cva(\n  [\n    \"flex items-center justify-center box-border\",\n    \"size-(--density-control-h-sm) rounded-md\",\n    \"text-sm leading-(--leading-normal) text-foreground\",\n    \"cursor-pointer select-none outline-none\",\n    // Above the selection disc that glides beneath it. Colour, fill and the press\n    // scale are one utility; --number-delay lets the number flip as the disc passes.\n    \"relative z-10 calendar-day\",\n    \"data-[hovered]:not-data-[selected]:bg-muted\",\n    \"data-[today]:font-semibold data-[today]:underline data-[today]:underline-offset-4\",\n    \"data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-(--opacity-disabled)\",\n    // Unavailable dates stay FOCUSABLE, so ADR 0007 holds them to 4.5:1 — this\n    // dims to muted-foreground, which the contrast contract grades, never below.\n    \"data-[unavailable]:cursor-not-allowed data-[unavailable]:text-muted-foreground\",\n    \"data-[unavailable]:line-through\",\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n    \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n    \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  ],\n  {\n    variants: {\n      /**\n       * A variant axis rather than a boolean prop, because the two modes are\n       * mutually exclusive visual treatments of the same element — which is\n       * exactly what OCP asks a variant to model.\n       */\n      selection: {\n        single: [\n          // The fill is the disc under the cell, not the cell: it glides between days.\n          \"data-[selected]:text-primary-foreground\",\n          \"data-[selected]:font-semibold\",\n        ],\n        range: [\n          // The band is `muted` — a pair the contrast contract already grades\n          // at 4.5:1, so the range needs no new contrast-pairs.json entry.\n          \"data-[selected]:rounded-none data-[selected]:bg-muted data-[selected]:text-foreground\",\n          \"data-[selection-start]:rounded-s-md data-[selection-start]:bg-primary\",\n          \"data-[selection-start]:font-semibold data-[selection-start]:text-primary-foreground\",\n          \"data-[selection-end]:rounded-e-md data-[selection-end]:bg-primary\",\n          \"data-[selection-end]:font-semibold data-[selection-end]:text-primary-foreground\",\n        ],\n        /**\n         * The range picker's own look: the band and the ends are drawn beneath the\n         * cells by the picker, which slides and stretches them, so the cells paint\n         * only their text (and the shorter press, .9 in 120ms).\n         */\n        band: [\n          \"[--press-scale:0.9] [--press-time:120ms]\",\n          \"data-[selected]:not-data-[selection-start]:not-data-[selection-end]:text-foreground\",\n          \"data-[selection-start]:font-medium data-[selection-start]:text-primary-foreground data-[selection-start]:[--number-delay:40ms]\",\n          \"data-[selection-end]:font-medium data-[selection-end]:text-primary-foreground data-[selection-end]:[--number-delay:40ms]\",\n        ],\n      },\n    },\n    defaultVariants: { selection: \"single\" },\n  },\n);\n\nfunction ChevronPrevious() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\n      <path d=\"m15 18-6-6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction ChevronNext() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\n      <path d=\"m9 18 6-6-6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * Resets the selection to null.\n *\n * It reads the calendar state from React Aria's context and calls\n * `setValue(null)`, which runs through `useControlledState` — so it fires\n * `onChange` for a controlled parent AND updates uncontrolled state, with no\n * mirrored state here. That is the whole reason there is no `onClear` prop:\n * from inside the provider tree the reset is free, and from outside it it\n * would force every consumer to own the value.\n *\n * The two states are narrowed separately rather than through a union, because\n * `setValue` has a different parameter type on each and the union call is not\n * assignable to either.\n *\n * `slot={null}` opts out of the Button context: inside a Calendar that context\n * carries the previous/next slots, and an unslotted Button would claim one.\n */\nfunction ClearButton({ label }: { label: string }) {\n  const calendarState = useContext(CalendarStateContext);\n  const rangeState = useContext(RangeCalendarStateContext);\n\n  /*\n   * Inherit the calendar's own inert states.\n   *\n   * Without this the Clear button stayed focusable and announced as enabled\n   * inside an `isDisabled` calendar — every cell and both nav buttons were\n   * inert, and one control in the middle of them was not. `isReadOnly` is the\n   * same argument: \"the value is immutable\" has to include clearing it.\n   */\n  const state = calendarState ?? rangeState;\n  const isInert = Boolean(state?.isDisabled ?? false) || Boolean(state?.isReadOnly ?? false);\n\n  return (\n    <AriaButton\n      slot={null}\n      data-slot=\"calendar-clear\"\n      isDisabled={isInert}\n      className={calendarClearVariants()}\n      // Stays enabled when there is nothing to clear. Disabling it on press\n      // moves focus to <body>, which silently strands a keyboard user mid-grid.\n      onPress={() => {\n        if (calendarState) calendarState.setValue(null);\n        else rangeState?.setValue(null);\n      }}\n    >\n      {label}\n    </AriaButton>\n  );\n}\n\ninterface CalendarBodyProps {\n  visibleMonths: number;\n  clearable: boolean;\n  clearLabel: string;\n  previousLabel: string;\n  nextLabel: string;\n  selection: \"single\" | \"range\";\n}\n\n/** The month's rows, headers and cells: one grid for the month `offset` months from the first visible one. */\nfunction MonthGrid({ offset, selection }: { offset: number; selection: \"single\" | \"range\" }) {\n  return (\n    <AriaCalendarGrid offset={{ months: offset }} className={calendarGridVariants()}>\n      <AriaCalendarGridHeader>\n        {(weekday) => (\n          <AriaCalendarHeaderCell className={calendarHeaderCellVariants()}>\n            {weekday}\n          </AriaCalendarHeaderCell>\n        )}\n      </AriaCalendarGridHeader>\n      <AriaCalendarGridBody>\n        {(date) => (\n          <AriaCalendarCell\n            date={date}\n            data-slot=\"calendar-cell\"\n            className={calendarCellVariants({ selection })}\n          />\n        )}\n      </AriaCalendarGridBody>\n    </AriaCalendarGrid>\n  );\n}\n\n/** The first visible day, from whichever root we are under. */\nfunction useVisibleStart() {\n  const single = useContext(CalendarStateContext);\n  const range = useContext(RangeCalendarStateContext);\n  return (single ?? range)?.visibleRange.start;\n}\n\n/**\n * The month title. React Aria's own heading stays, visually hidden, as the text;\n * the copy the eye sees crosses in place: the new month arrives from the side the\n * strip travels to while the old one leaves toward the other. Nothing animates on\n * first mount.\n */\nfunction MonthTitle() {\n  const start = useVisibleStart();\n  const headingRef = useRef<HTMLHeadingElement>(null);\n  const [text, setText] = useState(\"\");\n  const [shown, setShown] = useState(start);\n  const [dir, setDir] = useState(1);\n  if (start && shown && start.compare(shown) !== 0) {\n    setShown(start);\n    setDir(start.compare(shown) > 0 ? 1 : -1);\n  }\n  useIsomorphicLayoutEffect(() => {\n    const next = headingRef.current?.textContent ?? \"\";\n    if (next !== text) setText(next);\n  });\n  return (\n    <>\n      <AriaCalendarHeading ref={headingRef} className=\"sr-only\" />\n      <span aria-hidden=\"true\" data-slot=\"calendar-title\" className={calendarTitleVariants()}>\n        {/* The text is read from the heading a render after the first, so the first text is a fresh swap, not a change. */}\n        <SwapText key={text === \"\" ? \"boot\" : \"live\"} swapKey={text} dir={dir} motion=\"slide\" className=\"block\">\n          {text}\n        </SwapText>\n      </span>\n    </>\n  );\n}\n\n/** A day cell's place in its month's grid, read from the table's structure: no layout is forced. */\nfunction gridPlace(cell: HTMLElement) {\n  const td = cell.closest(\"td\");\n  const tr = td?.parentElement as HTMLTableRowElement | null | undefined;\n  return td && tr ? { col: td.cellIndex, row: tr.sectionRowIndex } : null;\n}\n\ninterface DiscMemory {\n  cell: HTMLElement;\n  col: number;\n  row: number;\n}\n\n/**\n * Drives the selected disc of every month. The disc is one element under the day\n * cells, placed from the selected cell's measured box, so it glides on a straight\n * line between any two days, keeps its place while the strip slides, and only\n * grows in or fades out when the selection enters or leaves a month. Each number\n * flips colour as the disc actually passes it: the day it lands on waits longer on\n * long hops, the day it leaves waits longer on short ones.\n *\n * It is one component, first in the tree, because order matters: the colour\n * transitions start at the first style recalculation after a cell's state\n * changes, and anything that measures the page (the title's swap does, on every\n * commit) forces one. So every delay is set from the table's structure before any\n * box is measured, and it runs before the header's effects do.\n */\nfunction DiscDriver() {\n  const marker = useRef<HTMLSpanElement>(null);\n  const memory = useRef(new WeakMap<HTMLElement, DiscMemory>());\n  // Subscribing re-renders the driver when the selection, the month or the focus changes.\n  useContext(CalendarStateContext);\n  useIsomorphicLayoutEffect(() => {\n    const root = marker.current?.parentElement;\n    if (!root) return;\n    const panes = [...root.querySelectorAll<HTMLElement>('[data-slot=\"calendar-month\"]')];\n    const work = panes.flatMap((pane) => {\n      const el = pane.querySelector<HTMLElement>(':scope > [data-slot=\"calendar-disc\"]');\n      if (!el) return [];\n      const cell = pane.querySelector<HTMLElement>('[data-slot=\"calendar-cell\"][data-selected]');\n      return [{ pane, el, cell }];\n    });\n    // Pass 1, no layout reads: the number delays.\n    for (const { el, cell } of work) {\n      if (!cell) continue;\n      const place = gridPlace(cell);\n      const before = memory.current.get(el);\n      if (el.dataset.visible === undefined || !before || before.cell === cell || !place) continue;\n      const distance = Math.hypot(place.col - before.col, place.row - before.row);\n      if (distance === 0) continue;\n      cell.style.setProperty(\n        \"--number-delay\",\n        `${Math.round(Math.min(260, 95 + 85 * Math.log(distance)))}ms`,\n      );\n      if (before.cell.isConnected)\n        before.cell.style.setProperty(\n          \"--number-delay\",\n          `${Math.round(Math.max(20, 130 / distance))}ms`,\n        );\n    }\n    // Pass 2: place the discs.\n    for (const { pane, el, cell } of work) {\n      if (!cell) {\n        delete el.dataset.visible;\n        memory.current.delete(el);\n        continue;\n      }\n      const box = cell.getBoundingClientRect();\n      const paneBox = pane.getBoundingClientRect();\n      // A pressed cell is scaled about its centre; offsetWidth is the unscaled box.\n      const x = box.left - paneBox.left - (box.width - cell.offsetWidth) / 2;\n      const y = box.top - paneBox.top - (box.height - cell.offsetHeight) / 2;\n      el.style.width = `${cell.offsetWidth}px`;\n      el.style.height = `${cell.offsetHeight}px`;\n      if (el.dataset.visible === undefined) {\n        // Arriving in this month: land in place, then grow in.\n        el.style.transition = \"none\";\n        el.style.translate = `${x}px ${y}px`;\n        void el.offsetWidth;\n        el.style.transition = \"\";\n        el.dataset.visible = \"\";\n      } else {\n        el.style.translate = `${x}px ${y}px`;\n      }\n      const place = gridPlace(cell);\n      if (place) memory.current.set(el, { cell, ...place });\n    }\n  });\n  return <span ref={marker} hidden data-slot=\"calendar-disc-driver\" />;\n}\n\n/** The disc itself: an empty shell the driver places. */\nfunction SelectionDisc() {\n  return (\n    <span aria-hidden=\"true\" data-slot=\"calendar-disc\" className=\"calendar-disc\">\n      <span className=\"calendar-disc-fill\" />\n    </span>\n  );\n}\n\n/**\n * One month of the strip. Months sit side by side in a clipped window and slide\n * on a spring; the pane that is not the current month fades back and is inert.\n */\nfunction MonthPane({\n  offset,\n  dir,\n  fresh,\n  disc,\n  selection,\n}: {\n  offset: number;\n  dir: number;\n  fresh: boolean;\n  disc: boolean;\n  selection: \"single\" | \"range\";\n}) {\n  return (\n    <div\n      ref={(node) => {\n        if (!node) return;\n        if (offset === 0) node.removeAttribute(\"inert\");\n        else node.setAttribute(\"inert\", \"\");\n      }}\n      data-slot=\"calendar-month\"\n      data-offset={offset}\n      aria-hidden={offset === 0 ? undefined : true}\n      style={{ \"--k\": offset, \"--dir\": dir } as CSSProperties}\n      className={cn(\"calendar-pane\", fresh && \"motion-safe:animate-calendar-pane-in\")}\n    >\n      {disc ? <SelectionDisc /> : null}\n      <MonthGrid offset={offset} selection={selection} />\n    </div>\n  );\n}\n\n/**\n * One month, shown with its neighbours beside it on a strip. Moving by a month\n * slides the strip; a jump of more than a month brings the new month in from one\n * month away instead of scrolling through the ones between.\n */\nfunction MonthStrip({ selection }: { selection: \"single\" | \"range\" }) {\n  const start = useVisibleStart();\n  const [shown, setShown] = useState(start);\n  const [dir, setDir] = useState(1);\n  const [fresh, setFresh] = useState<string | null>(null);\n  const strip = useRef<HTMLDivElement>(null);\n  // The window is as tall as the month in view, and follows it when a month has more\n  // or fewer weeks than the last, so the calendar never leaves a gap or clips a row.\n  useIsomorphicLayoutEffect(() => {\n    const el = strip.current;\n    const current = el?.querySelector<HTMLElement>('[data-offset=\"0\"]');\n    if (el && current) el.style.height = `${current.offsetHeight}px`;\n  });\n  const keyOf = (offset: number) => {\n    const d = start?.add({ months: offset });\n    return d ? `${d.era}-${d.year}-${d.month}` : String(offset);\n  };\n  if (start && shown && start.compare(shown) !== 0) {\n    const months = (start.year - shown.year) * 12 + (start.month - shown.month);\n    setShown(start);\n    setDir(months > 0 ? 1 : -1);\n    setFresh(Math.abs(months) > 1 ? keyOf(0) : null);\n  }\n  return (\n    <div ref={strip} data-slot=\"calendar-months\" className=\"calendar-strip\">\n      {[-1, 0, 1].map((offset) => (\n        <MonthPane\n          key={keyOf(offset)}\n          offset={offset}\n          dir={dir}\n          fresh={fresh === keyOf(offset) && offset === 0}\n          disc={selection === \"single\"}\n          selection={selection}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** Header, grids and Clear — identical under both calendar roots. */\nfunction CalendarBody({\n  visibleMonths,\n  clearable,\n  clearLabel,\n  previousLabel,\n  nextLabel,\n  selection,\n}: CalendarBodyProps) {\n  // One month shows as a strip with its title in the header; several months stay side by side.\n  const strip = visibleMonths === 1;\n  return (\n    <>\n      {strip && selection === \"single\" ? <DiscDriver /> : null}\n      <header data-slot=\"calendar-header\" className={calendarHeaderVariants()}>\n        {strip ? <MonthTitle /> : null}\n        <div className=\"ms-auto flex items-center gap-0.5\">\n          <AriaButton slot=\"previous\" aria-label={previousLabel} className={calendarNavVariants()}>\n            <ChevronPrevious />\n          </AriaButton>\n          <AriaButton slot=\"next\" aria-label={nextLabel} className={calendarNavVariants()}>\n            <ChevronNext />\n          </AriaButton>\n        </div>\n      </header>\n\n      {strip ? (\n        <MonthStrip selection={selection} />\n      ) : (\n        <div data-slot=\"calendar-months\" className={calendarMonthsVariants()}>\n          {Array.from({ length: visibleMonths }, (_, offset) => (\n            <div key={offset} data-slot=\"calendar-month\">\n              {/* Per grid, so three months are three named columns rather than\n                  one combined range nobody can map back to a column. */}\n              <AriaCalendarHeading\n                offset={{ months: offset }}\n                className={calendarHeadingVariants()}\n              />\n              <MonthGrid offset={offset} selection={selection} />\n            </div>\n          ))}\n        </div>\n      )}\n\n      {clearable ? <ClearButton label={clearLabel} /> : null}\n    </>\n  );\n}\n\ninterface CalendarSharedProps {\n  /**\n   * Accessible name for the calendar.\n   *\n   * REQUIRED. React Aria renders the root as `role=\"application\"`, which has\n   * no implicit name, so without this every calendar announces as an unnamed\n   * application — the same finding that made `label` required on Select,\n   * Progress, Slider and ScrollArea.\n   */\n  label: string;\n  /**\n   * Hide the label visually while leaving it on the accessibility tree. Pass\n   * this when the surrounding UI already names the control.\n   *\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Number of months displayed side by side. Maps to React Aria's\n   * `visibleDuration`, which is omitted from the public surface so the two\n   * cannot disagree.\n   *\n   * @default 1\n   */\n  visibleMonths?: number;\n  /**\n   * Render a Clear button that resets the selection to `null`.\n   *\n   * Works controlled and uncontrolled: the button calls React Aria's\n   * `setValue(null)` through context, so `onChange` fires either way and there\n   * is no `onClear` for a consumer to wire up.\n   *\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * Visible text of the Clear button.\n   *\n   * A prop rather than a literal because `ARCHITECTURE.md` §7 rule 9 forbids\n   * hard-coded user-visible strings and says it cannot be retrofitted.\n   * `useMessages()` does not exist yet, so this follows Dialog's `closeLabel`.\n   *\n   * @default \"Clear\"\n   */\n  clearLabel?: string;\n  /**\n   * Accessible name for the previous-month button, which is icon-only. Same\n   * reasoning as {@link CalendarSharedProps.clearLabel}.\n   *\n   * @default \"Previous month\"\n   */\n  previousLabel?: string;\n  /**\n   * Accessible name for the next-month button. Same reasoning as\n   * {@link CalendarSharedProps.clearLabel}.\n   *\n   * @default \"Next month\"\n   */\n  nextLabel?: string;\n  /** Extra classes. Merged last through `cn()`, so the consumer wins. */\n  className?: string;\n}\n\n/**\n * Props for {@link Calendar}.\n *\n * Extends the React Aria type via `Omit` rather than\n * `ComponentPropsWithoutRef`, matching every other React Aria-backed component\n * here and recorded in ADR 0008. Intersecting would advertise DOM props that\n * React Aria ignores silently.\n */\nexport interface CalendarProps\n  extends Omit<\n      AriaCalendarProps<DateValue>,\n      \"className\" | \"style\" | \"children\" | \"visibleDuration\"\n    >,\n    CalendarSharedProps {}\n\n/** Props for {@link CalendarRange}. */\nexport interface CalendarRangeProps\n  extends Omit<\n      AriaRangeCalendarProps<DateValue>,\n      \"className\" | \"style\" | \"children\" | \"visibleDuration\"\n    >,\n    CalendarSharedProps {}\n\n/**\n * A calendar for picking a single date.\n *\n * Maturity: **experimental**. `ARCHITECTURE.md` §7 rule 8's metadata mechanism\n * does not exist yet, and ADR 0006 blocks `stable` until a WebKit test\n * instance lands regardless.\n *\n * `onChange` hands back a `DateValue`; `String(value)` is its `YYYY-MM-DD`\n * form, which is what an API filter or query parameter wants.\n *\n * @example\n * <Calendar label=\"Report date\" value={date} onChange={setDate} clearable />\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n  {\n    className,\n    label,\n    labelHidden = false,\n    visibleMonths = 1,\n    clearable = false,\n    clearLabel = \"Clear\",\n    previousLabel = \"Previous month\",\n    nextLabel = \"Next month\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaCalendar\n      ref={ref}\n      {...props}\n      aria-label={label}\n      visibleDuration={{ months: visibleMonths }}\n      data-slot=\"calendar\"\n      className={cn(calendarVariants(), className)}\n    >\n      {labelHidden ? null : (\n        <span data-slot=\"calendar-label\" className={calendarLabelVariants()}>\n          {label}\n        </span>\n      )}\n      <CalendarBody\n        visibleMonths={visibleMonths}\n        clearable={clearable}\n        clearLabel={clearLabel}\n        previousLabel={previousLabel}\n        nextLabel={nextLabel}\n        selection=\"single\"\n      />\n    </AriaCalendar>\n  );\n});\n\n/**\n * A calendar for picking a contiguous date range.\n *\n * `onChange` hands back `{ start, end }`, both `DateValue`.\n *\n * @example\n * <CalendarRange label=\"Period\" visibleMonths={3}\n *                value={range} onChange={setRange} clearable />\n */\nexport const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(function CalendarRange(\n  {\n    className,\n    label,\n    labelHidden = false,\n    visibleMonths = 1,\n    clearable = false,\n    clearLabel = \"Clear\",\n    previousLabel = \"Previous month\",\n    nextLabel = \"Next month\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaRangeCalendar\n      ref={ref}\n      {...props}\n      aria-label={label}\n      visibleDuration={{ months: visibleMonths }}\n      data-slot=\"calendar\"\n      className={cn(calendarVariants(), className)}\n    >\n      {labelHidden ? null : (\n        <span data-slot=\"calendar-label\" className={calendarLabelVariants()}>\n          {label}\n        </span>\n      )}\n      <CalendarBody\n        visibleMonths={visibleMonths}\n        clearable={clearable}\n        clearLabel={clearLabel}\n        previousLabel={previousLabel}\n        nextLabel={nextLabel}\n        selection=\"range\"\n      />\n    </AriaRangeCalendar>\n  );\n});\n"],"mappings":"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"}

package/dist/card/card.d.ts

@@ -53,8 +53,15 @@ export declare const cardFooterVariants: (props?: import("class-variance-authori
  *   <CardContent>Twelve of eighteen modules complete.</CardContent>
  * </Card>
  */
-export type CardProps = ComponentPropsWithoutRef<"div">;
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Make the card respond to a pointer: it floats 2px on a spring while it is pointed
+   * at, its border darkens and its shadow deepens. Mouse and pen only; touch never lifts.
+   * Leave it off for a card that is not a target: a static card should not move.
+   */
+  interactive?: boolean;
+}
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
 /** Title and description, stacked. */
 export type CardHeaderProps = ComponentPropsWithoutRef<"div">;
 export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;