@chassis-ui/react 0.1.3 → 0.3.0

package/dist/chunks/RangeCalendar-BJl-j4W2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar-BJl-j4W2.js","names":["CalendarCell"],"sources":["../../src/utils/isWholeUnitDisabled.ts","../../src/components/calendar/labels.tsx","../../src/components/calendar/CalendarMonthGrid.tsx","../../src/components/calendar/CalendarYearGrid.tsx","../../src/utils/setVisibleRangeStart.ts","../../src/components/calendar/CalendarMonthYearPicker.tsx","../../src/components/calendar/CalendarWeekGrid.tsx","../../src/components/calendar/CalendarMonthBlock.tsx","../../src/components/calendar/CalendarNavButton.tsx","../../src/utils/mergeIsDateUnavailable.ts","../../src/components/calendar/todayLabelStrings.ts","../../src/components/calendar/todayLabel.ts","../../src/components/calendar/Calendar.tsx","../../src/components/calendar/RangeCalendar.tsx"],"sourcesContent":["import { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate, toCalendarDate } from '@internationalized/date'\n\n// Shared by `CalendarMonthGrid` and `CalendarYearGrid` — a month/year button is disabled when\n// every day it covers falls outside `minValue`/`maxValue`, not just when its first day does (e.g.\n// a `maxValue` of March 15th still leaves March itself partly selectable, so March's button stays\n// enabled; April's doesn't). `unitEnd` is the last day of the button's own month/year.\nexport const isWholeUnitDisabled = (\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState,\n  unitStart: CalendarDate,\n  unitEnd: CalendarDate\n): boolean => {\n  if (state.isDisabled) return true\n  if (state.maxValue && unitStart.compare(toCalendarDate(state.maxValue)) > 0) return true\n  if (state.minValue && unitEnd.compare(toCalendarDate(state.minValue)) < 0) return true\n  return false\n}\n","import React, { createContext, ReactNode, useContext, useMemo } from 'react'\n\n/**\n * The user-facing strings the calendar/datepicker family renders itself, rather than getting from\n * the active locale.\n *\n * Everything else these components say — weekday names, month names, the calendar system, segment\n * order — comes from `I18nProvider`'s locale via react-aria, which ships its own translations. The\n * strings below have no equivalent in react-aria's dictionaries, so they were hardcoded English\n * with no way to override them: under `<I18nProvider locale=\"ar-SA\">` a user got Arabic month\n * names interleaved with an English \"Previous years\". Pass `labels` to translate them, the same\n * way `Pagination`'s `previousLabel`/`nextLabel` are translated (see the Internationalization\n * docs page).\n */\nexport interface CalendarLabels {\n  /** Accessible name of the year view's \"page back\" arrow. */\n  previousYears: string\n  /** Accessible name of the year view's \"page forward\" arrow. */\n  nextYears: string\n  /** Prefix of the year view's live-region announcement, rendered as `${selectYear}, 2020 – 2034`. */\n  selectYear: string\n  /** Prefix of the month view's live-region announcement, rendered as `${selectMonth}, 2024`. */\n  selectMonth: string\n  /** Prefix of the header month button's accessible name, rendered as `${month}: March`. */\n  month: string\n  /** Prefix of the header year button's accessible name, rendered as `${year}: 2024`. */\n  year: string\n  /** Accessible name of the trigger that opens the calendar overlay. */\n  calendar: string\n  /** Accessible name of the adornment that resets the current selection. */\n  clear: string\n}\n\nexport const DEFAULT_CALENDAR_LABELS: CalendarLabels = {\n  previousYears: 'Previous years',\n  nextYears: 'Next years',\n  selectYear: 'Select year',\n  selectMonth: 'Select month',\n  month: 'Month',\n  year: 'Year',\n  calendar: 'Calendar',\n  clear: 'Clear'\n}\n\nconst CalendarLabelsContext = createContext<CalendarLabels>(DEFAULT_CALENDAR_LABELS)\n\n/**\n * Reads the merged labels. Internal — every component in this family that renders one of these\n * strings goes through here rather than taking its own prop, because most of them\n * (`CalendarYearGrid`, `CalendarMonthGrid`, `CalendarMonthYearPicker`) sit three or four levels\n * below the public component a consumer actually passes `labels` to.\n */\nexport const useCalendarLabels = (): CalendarLabels => useContext(CalendarLabelsContext)\n\ninterface CalendarLabelsProviderProps {\n  children: ReactNode\n  labels?: Partial<CalendarLabels>\n}\n\n/**\n * Merges `labels` over whatever is already in context, rather than replacing it. `DatePicker`\n * renders a `Calendar` internally, so both provide — without merging, the inner `Calendar`\n * (which usually has no `labels` of its own) would reset the outer `DatePicker`'s overrides back\n * to English.\n */\nexport const CalendarLabelsProvider = ({ children, labels }: CalendarLabelsProviderProps) => {\n  const parent = useContext(CalendarLabelsContext)\n  const value = useMemo(() => (labels ? { ...parent, ...labels } : parent), [parent, labels])\n\n  return <CalendarLabelsContext.Provider value={value}>{children}</CalendarLabelsContext.Provider>\n}\n","import React from 'react'\nimport classNames from 'classnames'\nimport { useDateFormatter } from 'react-aria'\nimport { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate } from '@internationalized/date'\n\nimport { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'\nimport { useCalendarLabels } from './labels'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ninterface CalendarMonthGridProps {\n  // Whether to render the visually-hidden `aria-live` announcement of this view's current header\n  // (see `CalendarMonthYearPicker`'s own equivalent gate) — `false` for every visible month block\n  // but the first when `visibleMonths > 1`, so switching into this view doesn't fire one\n  // simultaneous announcement per block.\n  announce?: boolean\n  monthStart: CalendarDate\n  onBack: () => void\n  onSelect: (date: CalendarDate) => void\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState\n}\n\n// The month view of `CalendarMonthYearPicker` — every month in `monthStart`'s own year, laid out\n// as a static 3-column grid (no paging; picking a different year is the year view's job).\nexport const CalendarMonthGrid = ({\n  announce = true,\n  monthStart,\n  onBack,\n  onSelect,\n  state\n}: CalendarMonthGridProps) => {\n  const labels = useCalendarLabels()\n  const monthFormatter = useDateFormatter({\n    calendar: monthStart.calendar.identifier,\n    month: 'short',\n    timeZone: state.timeZone\n  })\n  const yearFormatter = useDateFormatter({\n    calendar: monthStart.calendar.identifier,\n    timeZone: state.timeZone,\n    year: 'numeric'\n  })\n\n  const numMonths = monthStart.calendar.getMonthsInYear(monthStart)\n  const months = [...new Array(numMonths).keys()].map((i) => {\n    const date = monthStart.set({ day: 1, month: i + 1 })\n    return { date, formatted: monthFormatter.format(date.toDate(state.timeZone)) }\n  })\n\n  return (\n    <>\n      <div className=\"datepicker-header\">\n        <div className=\"datepicker-header-content\">\n          <button className=\"datepicker-month\" onClick={onBack} type=\"button\">\n            {yearFormatter.format(monthStart.toDate(state.timeZone))}\n          </button>\n        </div>\n      </div>\n      {announce && (\n        <VisuallyHidden role=\"status\">\n          {`${labels.selectMonth}, ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}\n        </VisuallyHidden>\n      )}\n      <div className=\"datepicker-content\">\n        <div\n          aria-label={yearFormatter.format(monthStart.toDate(state.timeZone))}\n          className=\"datepicker-months\"\n          role=\"group\"\n        >\n          {months.map((month) => {\n            const isSelected = month.date.month === monthStart.month\n            const isDisabled = isWholeUnitDisabled(\n              state,\n              month.date,\n              month.date.add({ months: 1 }).subtract({ days: 1 })\n            )\n\n            return (\n              <button\n                aria-current={isSelected ? 'true' : undefined}\n                className={classNames('datepicker-months-month', { selected: isSelected })}\n                disabled={isDisabled}\n                key={month.date.month}\n                onClick={() => onSelect(month.date)}\n                type=\"button\"\n              >\n                {month.formatted}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    </>\n  )\n}\n","import React, { useState } from 'react'\nimport classNames from 'classnames'\nimport { useDateFormatter } from 'react-aria'\nimport { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate, toCalendarDate } from '@internationalized/date'\n\nimport { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'\nimport { useCalendarLabels } from './labels'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ninterface CalendarYearGridProps {\n  // Whether to render the visually-hidden `aria-live` announcement of this view's current header\n  // (see `CalendarMonthYearPicker`'s own equivalent gate) — `false` for every visible month block\n  // but the first when `visibleMonths > 1`, so switching into this view (or paging within it)\n  // doesn't fire one simultaneous announcement per block.\n  announce?: boolean\n  monthStart: CalendarDate\n  onBack: () => void\n  onSelect: (date: CalendarDate) => void\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState\n}\n\nconst YEARS_PER_PAGE = 15\n\n// The year view of `CalendarMonthYearPicker` — a paged 3-column grid, `YEARS_PER_PAGE` years at a\n// time starting from the currently visible year. Unlike the month view, a year range doesn't fit\n// on one screen, so this owns its own prev/next paging (independent of the day grid's own\n// prev/next, which keep paging by month underneath whenever this view isn't showing).\nexport const CalendarYearGrid = ({\n  announce = true,\n  monthStart,\n  onBack,\n  onSelect,\n  state\n}: CalendarYearGridProps) => {\n  const labels = useCalendarLabels()\n  const yearFormatter = useDateFormatter({\n    calendar: monthStart.calendar.identifier,\n    timeZone: state.timeZone,\n    year: 'numeric'\n  })\n  // The first year of the page, counted in years from `monthStart`'s own. This view unmounts on\n  // every exit, so there's no case where `monthStart` changes while it's still mounted that this\n  // would need to react to.\n  const [pageOffset, setPageOffset] = useState(0)\n\n  // `date` preserves `monthStart`'s own month/day, changing only the year — picking a year should\n  // land on the same month it started from, not reset to January (`yearStart`/`yearEnd` are the\n  // Jan 1–Dec 31 bounds used only for the disabled-range check below, kept separate so the actual\n  // selection target isn't affected by them). The year is reached with `add`, not `set({ year })`:\n  // a year number counts within its era, so `set` clamped one before the era's first year to that\n  // year, and paging back in the Japanese calendar showed the era's first year fifteen times.\n  const years = [...new Array(YEARS_PER_PAGE).keys()].map((i) => {\n    const offset = pageOffset + i\n    const date = monthStart.add({ years: offset })\n    const yearStart = date.set({ day: 1, month: 1 })\n    const yearEnd = yearStart.add({ years: 1 }).subtract({ days: 1 })\n    return {\n      date,\n      formatted: yearFormatter.format(date.toDate(state.timeZone)),\n      offset,\n      yearEnd,\n      yearStart\n    }\n  })\n  // `years` always has exactly `YEARS_PER_PAGE` (15) entries — a fixed, non-zero constant, never\n  // empty — so the first/last indices are always in range.\n  const firstYear = years[0]!\n  const lastYear = years[years.length - 1]!\n  const firstYearStart = firstYear.yearStart\n  const lastYearEnd = lastYear.yearEnd\n  const rangeLabel = `${firstYear.formatted} – ${lastYear.formatted}`\n\n  const isPrevDisabled =\n    state.isDisabled ||\n    (state.minValue != null &&\n      firstYearStart.subtract({ days: 1 }).compare(toCalendarDate(state.minValue)) < 0)\n  const isNextDisabled =\n    state.isDisabled ||\n    (state.maxValue != null &&\n      lastYearEnd.add({ days: 1 }).compare(toCalendarDate(state.maxValue)) > 0)\n\n  return (\n    <>\n      <div className=\"datepicker-header\">\n        <button\n          aria-label={labels.previousYears}\n          className=\"datepicker-arrow datepicker-arrow-prev\"\n          disabled={isPrevDisabled}\n          onClick={() => setPageOffset((offset) => offset - YEARS_PER_PAGE)}\n          type=\"button\"\n        />\n        <div className=\"datepicker-header-content\">\n          <button className=\"datepicker-year\" onClick={onBack} type=\"button\">\n            {rangeLabel}\n          </button>\n        </div>\n        <button\n          aria-label={labels.nextYears}\n          className=\"datepicker-arrow datepicker-arrow-next\"\n          disabled={isNextDisabled}\n          onClick={() => setPageOffset((offset) => offset + YEARS_PER_PAGE)}\n          type=\"button\"\n        />\n      </div>\n      {announce && (\n        <VisuallyHidden role=\"status\">{`${labels.selectYear}, ${rangeLabel}`}</VisuallyHidden>\n      )}\n      <div className=\"datepicker-content\">\n        <div aria-label={rangeLabel} className=\"datepicker-years\" role=\"group\">\n          {years.map((year) => {\n            const isSelected = year.offset === 0\n            const isDisabled = isWholeUnitDisabled(state, year.yearStart, year.yearEnd)\n\n            return (\n              <button\n                aria-current={isSelected ? 'true' : undefined}\n                className={classNames('datepicker-years-year', { selected: isSelected })}\n                disabled={isDisabled}\n                key={year.offset}\n                onClick={() => onSelect(year.date)}\n                type=\"button\"\n              >\n                {year.formatted}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    </>\n  )\n}\n","import { flushSync } from 'react-dom'\nimport { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate } from '@internationalized/date'\n\n// Moves a (possibly multi-month) calendar's visible range so it starts at `desiredStart` — used by\n// `CalendarMonthYearPicker` to jump straight to a picked month/year, in any visible block.\n//\n// `state.setFocusedDate` is the only way to move `visibleRange` from outside react-stately, but it\n// doesn't just set `visibleRange.start` to wherever focus goes: react-stately keeps the visible\n// range as separate internal state, only repositioning it when the newly focused date falls\n// entirely *before* the current range (realigning so the range *ends* at that date's month) or\n// entirely *after* it (realigning so it *starts* there) — a focused date that lands inside the\n// current range moves focus without paging the range at all. That means a single `setFocusedDate`\n// call can only land exactly on an arbitrary `desiredStart` when it's at least a full\n// `visibleDuration` away from the current range. Anything closer — the common case here, since\n// adjacent blocks in a multi-month calendar are only one month apart — either no-ops (desired\n// start still inside the current range) or overshoots by up to a full `visibleDuration` (desired\n// start just outside it, but not far enough for the realignment to land exactly).\n//\n// Worked around with two `setFocusedDate` hops when a single one can't reach exactly: first past\n// `desiredStart` by one extra `visibleDuration` in the same direction (always far enough to land\n// exactly, by the same rule), flushed synchronously so `visibleRange` actually updates before the\n// second call runs, then back onto `desiredStart` itself — which, relative to that intermediate\n// range, is now exactly one `visibleDuration` away and so lands exactly too.\nexport const setVisibleRangeStart = (\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState,\n  desiredStart: CalendarDate\n): void => {\n  const { start: currentStart, end: currentEnd } = state.visibleRange\n  if (desiredStart.compare(currentStart) === 0) return\n\n  const durationMonths = state.visibleDuration.months || 1\n  const isForward = desiredStart.compare(currentStart) > 0\n\n  const reachableInOneHop = isForward\n    ? desiredStart.compare(currentEnd) > 0\n    : desiredStart.add({ months: durationMonths - 1 }).compare(currentStart) < 0\n\n  if (reachableInOneHop) {\n    state.setFocusedDate(focusedDateForStart(desiredStart, isForward, durationMonths))\n    return\n  }\n\n  const overshootStart = isForward\n    ? desiredStart.add({ months: durationMonths })\n    : desiredStart.subtract({ months: durationMonths })\n\n  flushSync(() => {\n    state.setFocusedDate(focusedDateForStart(overshootStart, isForward, durationMonths))\n  })\n  // Relative to the now-updated range, `desiredStart` sits exactly one `visibleDuration` back the\n  // way we came — always far enough for a single hop to land exactly.\n  state.setFocusedDate(focusedDateForStart(desiredStart, !isForward, durationMonths))\n}\n\n// react-stately's forward-paging realignment anchors the new range to whatever month\n// `focusedDate` itself falls in; its backward-paging one anchors it `visibleDuration - 1` months\n// *before* `focusedDate`'s month instead — so landing on a specific desired start takes a\n// different `focusedDate` depending on which of the two is going to fire.\nconst focusedDateForStart = (\n  desiredStart: CalendarDate,\n  isForward: boolean,\n  durationMonths: number\n): CalendarDate => (isForward ? desiredStart : desiredStart.add({ months: durationMonths - 1 }))\n","import React, { ReactNode, useEffect, useRef, useState } from 'react'\nimport { useDateFormatter } from 'react-aria'\nimport { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate } from '@internationalized/date'\n\nimport { CalendarMonthGrid } from './CalendarMonthGrid'\nimport { CalendarYearGrid } from './CalendarYearGrid'\nimport { setVisibleRangeStart } from '../../utils/setVisibleRangeStart'\nimport { useCalendarLabels } from './labels'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ninterface CalendarMonthYearPickerProps {\n  // The day grid, shown in the default 'days' view — owned by the caller (`Calendar` and\n  // `RangeCalendar` render genuinely different cells: single-date vs. range pill styling), so\n  // this only decides *whether* it's showing, never how it's built.\n  children: ReactNode\n  monthIndex?: number\n  monthStart: CalendarDate\n  // `null` when a global prev/next pair elsewhere is paging every visible month block at once\n  // (`RangeCalendar` with `visibleMonths > 1`) rather than this block having its own — see that\n  // component's own `arrows` prop. Only ever rendered in the 'days' view; the month/year views page\n  // themselves independently (`CalendarYearGrid`) or don't page at all (`CalendarMonthGrid`).\n  nextArrow?: ReactNode\n  // Reports this block's own view whenever it changes, so a parent rendering several blocks\n  // (`RangeCalendar` with `visibleMonths > 1`) can tell when one of them has switched to the\n  // year view — `CalendarYearGrid` owns its own prev/next pager in that view, which would\n  // otherwise sit right underneath the parent's global `.datepicker-controls` overlay.\n  onViewChange?: (view: 'days' | 'months' | 'years') => void\n  prevArrow?: ReactNode\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState\n}\n\n// Header + body for one visible month block: the day grid by default, switching in place to a\n// month or year grid when the header's own month/year button is pressed (chassis-css's actual\n// `_datepicker.scss` design for this — `[data-vc=\"months\"]`/`[data-vc=\"years\"]`, swapped in for\n// `[data-vc=\"dates\"]` — not a `<select>`, which is what this component used to render here. Native\n// `<select>` turned out to be the whole problem: picking a value forced a synchronous re-render\n// from inside the browser's own `change`-event dispatch, and in Safari that corrupted `usePress`'s\n// pointerup-vs-click target check for whatever the user clicked next — a page bug specific to\n// native form controls, not present here since a grid button is a plain, ordinary press.\n//\n// Shared by `Calendar` and `RangeCalendar` — `monthIndex` is the offset of this block's own\n// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`\n// land a pick correctly regardless of which visible block it came from.\nexport const CalendarMonthYearPicker = ({\n  children,\n  monthIndex = 0,\n  monthStart,\n  nextArrow,\n  onViewChange,\n  prevArrow,\n  state\n}: CalendarMonthYearPickerProps) => {\n  const labels = useCalendarLabels()\n  const [view, setView] = useState<'days' | 'months' | 'years'>('days')\n  const containerRef = useRef<HTMLDivElement>(null)\n  // The view focus was last moved for. Nothing moves on mount — there's no prior view to restore\n  // focus from yet, and stealing focus as soon as the calendar renders would fight `autoFocus`/the\n  // caller's own focus management. Compared to `view` rather than a \"first render\" flag: StrictMode\n  // runs a mount's effects twice, and the second run took the calendar's focused day for a return\n  // to the day grid, so every calendar on a page focused itself on load.\n  const focusedView = useRef(view)\n\n  const changeView = (next: 'days' | 'months' | 'years') => {\n    setView(next)\n    onViewChange?.(next)\n  }\n\n  // A block that unmounts in its month or year view (`visibleMonths` lowered) has left it as far\n  // as the parent can tell: without this the parent's global prev/next pair stayed hidden.\n  const onViewChangeRef = useRef(onViewChange)\n  onViewChangeRef.current = onViewChange\n  useEffect(() => () => onViewChangeRef.current?.('days'), [])\n\n  // Switching `view` swaps in a whole new subtree, unmounting whatever was focused (the month/\n  // year trigger button, or the month/year grid button just picked) — React has no reason to move\n  // focus anywhere on its own, so without this it drops to `document.body`, breaking out of\n  // `FocusScope`'s containment in `DatePicker`/`DateRangePicker`'s popover entirely. Lands\n  // focus on the selected month/year button when entering the month/year view (falling back to\n  // the first option if nothing is selected on the currently visible page), or back onto the\n  // day grid's own roving-tabindex cell when returning to 'days'. With several months visible that\n  // cell is often in another block (a pick focuses the first or last visible month, and backing\n  // out moves nothing), so this block's header button for the view just left takes focus instead.\n  useEffect(() => {\n    const previousView = focusedView.current\n    if (previousView === view) return\n    focusedView.current = view\n\n    const container = containerRef.current\n    if (!container) return\n\n    const target =\n      view === 'days'\n        ? (container.querySelector<HTMLElement>('.datepicker-date-btn[tabindex=\"0\"]') ??\n          container.querySelector<HTMLElement>(\n            previousView === 'years' ? '.datepicker-year' : '.datepicker-month'\n          ))\n        : (container.querySelector<HTMLElement>(\n            '.datepicker-months-month.selected, .datepicker-years-year.selected'\n          ) ??\n          container.querySelector<HTMLElement>('.datepicker-months-month, .datepicker-years-year'))\n\n    target?.focus()\n  }, [view])\n\n  const monthFormatter = useDateFormatter({\n    calendar: monthStart.calendar.identifier,\n    month: 'long',\n    timeZone: state.timeZone\n  })\n  const yearFormatter = useDateFormatter({\n    calendar: monthStart.calendar.identifier,\n    timeZone: state.timeZone,\n    year: 'numeric'\n  })\n\n  const commitAndReturn = (date: CalendarDate) => {\n    setVisibleRangeStart(state, date.subtract({ months: monthIndex }))\n    changeView('days')\n  }\n\n  return (\n    <div className=\"datepicker-column\" ref={containerRef}>\n      {view === 'months' && (\n        <CalendarMonthGrid\n          announce={monthIndex === 0}\n          monthStart={monthStart}\n          onBack={() => changeView('days')}\n          onSelect={commitAndReturn}\n          state={state}\n        />\n      )}\n      {view === 'years' && (\n        <CalendarYearGrid\n          announce={monthIndex === 0}\n          monthStart={monthStart}\n          onBack={() => changeView('days')}\n          onSelect={commitAndReturn}\n          state={state}\n        />\n      )}\n      {view === 'days' && (\n        <>\n          <div className=\"datepicker-header\">\n            {prevArrow}\n            <div className=\"datepicker-header-content\">\n              <button\n                aria-label={`${labels.month}: ${monthFormatter.format(monthStart.toDate(state.timeZone))}`}\n                className=\"datepicker-month\"\n                disabled={state.isDisabled}\n                onClick={() => changeView('months')}\n                type=\"button\"\n              >\n                {monthFormatter.format(monthStart.toDate(state.timeZone))}\n              </button>\n              <button\n                aria-label={`${labels.year}: ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}\n                className=\"datepicker-year\"\n                disabled={state.isDisabled}\n                onClick={() => changeView('years')}\n                type=\"button\"\n              >\n                {yearFormatter.format(monthStart.toDate(state.timeZone))}\n              </button>\n            </div>\n            {nextArrow}\n          </div>\n          {monthIndex === 0 && (\n            <VisuallyHidden role=\"status\">\n              {`${monthFormatter.format(monthStart.toDate(state.timeZone))} ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}\n            </VisuallyHidden>\n          )}\n          {children}\n        </>\n      )}\n    </div>\n  )\n}\n","import React, { ReactNode } from 'react'\nimport { useCalendarGrid } from 'react-aria'\nimport { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate, isSameMonth } from '@internationalized/date'\n\ninterface CalendarWeekGridProps {\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  renderCell: (\n    date: CalendarDate,\n    index: number,\n    week: (CalendarDate | null)[],\n    isOutsideMonth: boolean\n  ) => ReactNode\n  startDate?: CalendarDate\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState\n}\n\n// Shared week-day header + date-rows grid, used by both `Calendar` and `RangeCalendar` —\n// `startDate` lets a range calendar anchor this to one of several visible months (see\n// `useCalendarGrid`'s own docs); omitted, it defaults to the calendar's own visible start. Only the\n// individual cell differs between the two callers (range selection needs start/end/in-between pill\n// state a single-date cell has no equivalent for), so cell rendering is left to `renderCell`.\n//\n// A week at either end of the month holds days of the month next to it. With several months\n// visible those days are inside the calendar's visible range, so react-aria can't tell them from\n// the month's own: `renderCell` is told, and hands it on to `useCalendarCell` as `isOutsideMonth`.\n// Otherwise the day shows twice, in this grid and in its own month's, both selectable and both\n// taking focus.\nexport const CalendarWeekGrid = ({\n  firstDayOfWeek,\n  renderCell,\n  startDate,\n  state\n}: CalendarWeekGridProps) => {\n  const { gridProps, headerProps, weekDays, weeksInMonth } = useCalendarGrid(\n    { firstDayOfWeek, startDate },\n    state\n  )\n  const monthStart = startDate ?? state.visibleRange.start\n\n  return (\n    <div {...gridProps} className=\"datepicker-content\">\n      <div {...headerProps} className=\"datepicker-week\" role=\"row\">\n        {weekDays.map((day, index) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <span className=\"datepicker-week-day\" key={index} role=\"columnheader\">\n            {day}\n          </span>\n        ))}\n      </div>\n      <div className=\"datepicker-dates\">\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n          const week = state.getDatesInWeek(weekIndex, startDate)\n          return (\n            <div className=\"datepicker-dates-row\" key={weekIndex} role=\"row\">\n              {week.map((date, i) =>\n                date ? (\n                  <React.Fragment key={date.toString()}>\n                    {renderCell(date, i, week, !isSameMonth(date, monthStart))}\n                  </React.Fragment>\n                ) : (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <div className=\"datepicker-date\" key={i} role=\"gridcell\" />\n                )\n              )}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n","import React, { ReactNode } from 'react'\nimport { CalendarState, RangeCalendarState } from 'react-stately'\nimport { CalendarDate } from '@internationalized/date'\n\nimport { CalendarMonthYearPicker } from './CalendarMonthYearPicker'\nimport { CalendarWeekGrid } from './CalendarWeekGrid'\n\ninterface CalendarMonthBlockProps {\n  // `null`/omitted when a global prev/next pair elsewhere is paging every visible month block at\n  // once (`RangeCalendar` with `visibleMonths > 1`) rather than this block having its own — see\n  // that component's own `arrows` prop.\n  arrows?: { next: ReactNode; prev: ReactNode } | null\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  monthIndex: number\n  onViewChange: (view: 'days' | 'months' | 'years') => void\n  // The individual cell differs between `Calendar` and `RangeCalendar` (range selection needs\n  // start/end/in-between pill state a single-date cell has no equivalent for), so cell rendering\n  // is left to the caller — same shape `CalendarWeekGrid` itself already expects.\n  renderCell: (\n    date: CalendarDate,\n    index: number,\n    week: (CalendarDate | null)[],\n    isOutsideMonth: boolean\n  ) => ReactNode\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState\n}\n\n// One visible month within `visibleMonths` — shared by `Calendar` and `RangeCalendar`, which\n// otherwise duplicated this wiring near-verbatim. `monthIndex` is the offset of this block's own\n// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`\n// (inside `CalendarMonthYearPicker`) land a pick correctly regardless of which visible block it\n// came from.\nexport const CalendarMonthBlock = ({\n  arrows,\n  firstDayOfWeek,\n  monthIndex,\n  onViewChange,\n  renderCell,\n  state\n}: CalendarMonthBlockProps) => {\n  const monthStart = state.visibleRange.start.add({ months: monthIndex })\n\n  return (\n    <>\n      <CalendarMonthYearPicker\n        monthIndex={monthIndex}\n        monthStart={monthStart}\n        nextArrow={arrows?.next}\n        onViewChange={onViewChange}\n        prevArrow={arrows?.prev}\n        state={state}\n      >\n        <CalendarWeekGrid\n          firstDayOfWeek={firstDayOfWeek}\n          renderCell={renderCell}\n          startDate={monthStart}\n          state={state}\n        />\n      </CalendarMonthYearPicker>\n    </>\n  )\n}\n","import React, { useRef } from 'react'\nimport { AriaButtonProps, useButton } from 'react-aria'\n\ninterface CalendarNavButtonProps {\n  buttonProps: AriaButtonProps\n  direction: 'prev' | 'next'\n}\n\n// Shared prev/next arrow, used twice by both `Calendar` and `RangeCalendar` — `buttonProps`\n// comes from that caller's own `useCalendar`/`useRangeCalendar`, so this only owns the DOM ref and\n// the `useButton` wiring plus the arrow markup itself.\nexport const CalendarNavButton = ({ buttonProps, direction }: CalendarNavButtonProps) => {\n  const ref = useRef<HTMLButtonElement>(null)\n  const { buttonProps: domButtonProps } = useButton(buttonProps, ref)\n\n  return (\n    <button\n      {...domButtonProps}\n      className={`datepicker-arrow datepicker-arrow-${direction}`}\n      ref={ref}\n      type=\"button\"\n    ></button>\n  )\n}\n","import { DateValue } from 'react-stately'\nimport { toCalendarDate } from '@internationalized/date'\n\n// `toString()` on a `CalendarDate` yields the same ISO 8601 `YYYY-MM-DD` string already used\n// elsewhere for form submission (see `DatePicker`'s hidden input), so `unavailableDates` entries\n// are expected in that same format. A calendar's cells are `CalendarDate`s, but the pickers also\n// validate their own value with this, and with a time `granularity` that value's `toString()`\n// carries the time (`2026-03-15T09:30:00`): it's reduced to its day first.\nexport const mergeIsDateUnavailable = (\n  unavailableDates: string[] | undefined,\n  isDateUnavailable: ((date: DateValue) => boolean) | undefined\n): ((date: DateValue) => boolean) | undefined => {\n  if (!unavailableDates?.length && !isDateUnavailable) return undefined\n\n  const set = unavailableDates?.length ? new Set(unavailableDates) : null\n  return (date) =>\n    Boolean(set?.has(toCalendarDate(date).toString())) || Boolean(isDateUnavailable?.(date))\n}\n","import type { useLocalizedStringFormatter } from 'react-aria'\n\n// react-aria's own strings for the cell labels `useCalendarCell` writes (react-aria 3.52.1,\n// `intl/calendar/*.json`, Apache-2.0), limited to the ones `useCellToday` reads: the \"Today\" and\n// \"selected\" wrappers, and the minimum/maximum date notes. The locales and their order are\n// react-aria's, so a locale it doesn't have falls back to the same one here.\n// `test/components/calendar/todayLabel.spec.tsx` compares the labels against react-aria's\n// `react-aria/i18n` strings in every locale, so a react-aria update that changes them fails there.\nexport const todayLabelStrings: Parameters<typeof useLocalizedStringFormatter>[0] = {\n  'ar-AE': {\n    todayDate: (args) => `اليوم، ${args?.date}`,\n    todayDateSelected: (args) => `اليوم، ${args?.date} محدد`,\n    dateSelected: (args) => `${args?.date} المحدد`,\n    minimumDate: `أول تاريخ متاح`,\n    maximumDate: `آخر تاريخ متاح`\n  },\n  'bg-BG': {\n    todayDate: (args) => `Днес, ${args?.date}`,\n    todayDateSelected: (args) => `Днес, ${args?.date} са избрани`,\n    dateSelected: (args) => `Избрано е ${args?.date}`,\n    minimumDate: `Първа налична дата`,\n    maximumDate: `Последна налична дата`\n  },\n  'cs-CZ': {\n    todayDate: (args) => `Dnes, ${args?.date}`,\n    todayDateSelected: (args) => `Dnes, vybráno ${args?.date}`,\n    dateSelected: (args) => `Vybráno ${args?.date}`,\n    minimumDate: `První dostupné datum`,\n    maximumDate: `Poslední dostupné datum`\n  },\n  'da-DK': {\n    todayDate: (args) => `I dag, ${args?.date}`,\n    todayDateSelected: (args) => `I dag, ${args?.date} valgt`,\n    dateSelected: (args) => `${args?.date} valgt`,\n    minimumDate: `Første ledige dato`,\n    maximumDate: `Sidste ledige dato`\n  },\n  'de-DE': {\n    todayDate: (args) => `Heute, ${args?.date}`,\n    todayDateSelected: (args) => `Heute, ${args?.date} ausgewählt`,\n    dateSelected: (args) => `${args?.date} ausgewählt`,\n    minimumDate: `Erstes verfügbares Datum`,\n    maximumDate: `Letztes verfügbares Datum`\n  },\n  'el-GR': {\n    todayDate: (args) => `Σήμερα, ${args?.date}`,\n    todayDateSelected: (args) => `Σήμερα, επιλέχτηκε ${args?.date}`,\n    dateSelected: (args) => `Επιλέχθηκε ${args?.date}`,\n    minimumDate: `Πρώτη διαθέσιμη ημερομηνία`,\n    maximumDate: `Τελευταία διαθέσιμη ημερομηνία`\n  },\n  'en-US': {\n    todayDate: (args) => `Today, ${args?.date}`,\n    todayDateSelected: (args) => `Today, ${args?.date} selected`,\n    dateSelected: (args) => `${args?.date} selected`,\n    minimumDate: `First available date`,\n    maximumDate: `Last available date`\n  },\n  'es-ES': {\n    todayDate: (args) => `Hoy, ${args?.date}`,\n    todayDateSelected: (args) => `Hoy, ${args?.date} seleccionado`,\n    dateSelected: (args) => `${args?.date} seleccionado`,\n    minimumDate: `Primera fecha disponible`,\n    maximumDate: `Última fecha disponible`\n  },\n  'et-EE': {\n    todayDate: (args) => `Täna, ${args?.date}`,\n    todayDateSelected: (args) => `Täna, ${args?.date} valitud`,\n    dateSelected: (args) => `${args?.date} valitud`,\n    minimumDate: `Esimene saadaolev kuupäev`,\n    maximumDate: `Viimane saadaolev kuupäev`\n  },\n  'fi-FI': {\n    todayDate: (args) => `Tänään, ${args?.date}`,\n    todayDateSelected: (args) => `Tänään, ${args?.date} valittu`,\n    dateSelected: (args) => `${args?.date} valittu`,\n    minimumDate: `Ensimmäinen varattavissa oleva päivämäärä`,\n    maximumDate: `Viimeinen varattavissa oleva päivämäärä`\n  },\n  'fr-FR': {\n    todayDate: (args) => `Aujourd'hui, ${args?.date}`,\n    todayDateSelected: (args) => `Aujourd’hui, ${args?.date} sélectionné`,\n    dateSelected: (args) => `${args?.date} sélectionné`,\n    minimumDate: `Première date disponible`,\n    maximumDate: `Dernière date disponible`\n  },\n  'he-IL': {\n    todayDate: (args) => `היום, ${args?.date}`,\n    todayDateSelected: (args) => `היום, ${args?.date} נבחר`,\n    dateSelected: (args) => `${args?.date} נבחר`,\n    minimumDate: `תאריך פנוי ראשון`,\n    maximumDate: `תאריך פנוי אחרון`\n  },\n  'hr-HR': {\n    todayDate: (args) => `Danas, ${args?.date}`,\n    todayDateSelected: (args) => `Danas, odabran ${args?.date}`,\n    dateSelected: (args) => `${args?.date} odabran`,\n    minimumDate: `Prvi raspoloživi datum`,\n    maximumDate: `Posljednji raspoloživi datum`\n  },\n  'hu-HU': {\n    todayDate: (args) => `Ma, ${args?.date}`,\n    todayDateSelected: (args) => `Ma, ${args?.date} kijelölve`,\n    dateSelected: (args) => `${args?.date} kiválasztva`,\n    minimumDate: `Az első elérhető dátum`,\n    maximumDate: `Utolsó elérhető dátum`\n  },\n  'it-IT': {\n    todayDate: (args) => `Oggi, ${args?.date}`,\n    todayDateSelected: (args) => `Oggi, ${args?.date} selezionata`,\n    dateSelected: (args) => `${args?.date} selezionata`,\n    minimumDate: `Prima data disponibile`,\n    maximumDate: `Ultima data disponibile`\n  },\n  'ja-JP': {\n    todayDate: (args) => `本日、${args?.date}`,\n    todayDateSelected: (args) => `本日、${args?.date} を選択`,\n    dateSelected: (args) => `${args?.date} を選択`,\n    minimumDate: `最初の利用可能日`,\n    maximumDate: `最終利用可能日`\n  },\n  'ko-KR': {\n    todayDate: (args) => `오늘, ${args?.date}`,\n    todayDateSelected: (args) => `오늘, ${args?.date} 선택됨`,\n    dateSelected: (args) => `${args?.date} 선택됨`,\n    minimumDate: `처음으로 사용 가능한 일자`,\n    maximumDate: `마지막으로 사용 가능한 일자`\n  },\n  'lt-LT': {\n    todayDate: (args) => `Šiandien, ${args?.date}`,\n    todayDateSelected: (args) => `Šiandien, pasirinkta ${args?.date}`,\n    dateSelected: (args) => `Pasirinkta ${args?.date}`,\n    minimumDate: `Pirmoji galima data`,\n    maximumDate: `Paskutinė galima data`\n  },\n  'lv-LV': {\n    todayDate: (args) => `Šodien, ${args?.date}`,\n    todayDateSelected: (args) => `Atlasīta šodiena, ${args?.date}`,\n    dateSelected: (args) => `Atlasīts: ${args?.date}`,\n    minimumDate: `Pirmais pieejamais datums`,\n    maximumDate: `Pēdējais pieejamais datums`\n  },\n  'nb-NO': {\n    todayDate: (args) => `I dag, ${args?.date}`,\n    todayDateSelected: (args) => `I dag, ${args?.date} valgt`,\n    dateSelected: (args) => `${args?.date} valgt`,\n    minimumDate: `Første tilgjengelige dato`,\n    maximumDate: `Siste tilgjengelige dato`\n  },\n  'nl-NL': {\n    todayDate: (args) => `Vandaag, ${args?.date}`,\n    todayDateSelected: (args) => `Vandaag, ${args?.date} geselecteerd`,\n    dateSelected: (args) => `${args?.date} geselecteerd`,\n    minimumDate: `Eerste beschikbare datum`,\n    maximumDate: `Laatste beschikbare datum`\n  },\n  'pl-PL': {\n    todayDate: (args) => `Dzisiaj, ${args?.date}`,\n    todayDateSelected: (args) => `Dzisiaj wybrano ${args?.date}`,\n    dateSelected: (args) => `Wybrano ${args?.date}`,\n    minimumDate: `Pierwsza dostępna data`,\n    maximumDate: `Ostatnia dostępna data`\n  },\n  'pt-BR': {\n    todayDate: (args) => `Hoje, ${args?.date}`,\n    todayDateSelected: (args) => `Hoje, ${args?.date} selecionado`,\n    dateSelected: (args) => `${args?.date} selecionado`,\n    minimumDate: `Primeira data disponível`,\n    maximumDate: `Última data disponível`\n  },\n  'pt-PT': {\n    todayDate: (args) => `Hoje, ${args?.date}`,\n    todayDateSelected: (args) => `Hoje, ${args?.date} selecionado`,\n    dateSelected: (args) => `${args?.date} selecionado`,\n    minimumDate: `Primeira data disponível`,\n    maximumDate: `Última data disponível`\n  },\n  'ro-RO': {\n    todayDate: (args) => `Astăzi, ${args?.date}`,\n    todayDateSelected: (args) => `Azi, ${args?.date} selectată`,\n    dateSelected: (args) => `${args?.date} selectată`,\n    minimumDate: `Prima dată disponibilă`,\n    maximumDate: `Ultima dată disponibilă`\n  },\n  'ru-RU': {\n    todayDate: (args) => `Сегодня, ${args?.date}`,\n    todayDateSelected: (args) => `Сегодня, выбрано ${args?.date}`,\n    dateSelected: (args) => `Выбрано ${args?.date}`,\n    minimumDate: `Первая доступная дата`,\n    maximumDate: `Последняя доступная дата`\n  },\n  'sk-SK': {\n    todayDate: (args) => `Dnes ${args?.date}`,\n    todayDateSelected: (args) => `Vybratý dnešný dátum ${args?.date}`,\n    dateSelected: (args) => `Vybratý dátum ${args?.date}`,\n    minimumDate: `Prvý dostupný dátum`,\n    maximumDate: `Posledný dostupný dátum`\n  },\n  'sl-SI': {\n    todayDate: (args) => `Danes, ${args?.date}`,\n    todayDateSelected: (args) => `Danes, ${args?.date} izbrano`,\n    dateSelected: (args) => `${args?.date} izbrano`,\n    minimumDate: `Prvi razpoložljivi datum`,\n    maximumDate: `Zadnji razpoložljivi datum`\n  },\n  'sr-SP': {\n    todayDate: (args) => `Danas, ${args?.date}`,\n    todayDateSelected: (args) => `Danas, izabran ${args?.date}`,\n    dateSelected: (args) => `${args?.date} izabran`,\n    minimumDate: `Prvi raspoloživi datum`,\n    maximumDate: `Zadnji raspoloživi datum`\n  },\n  'sv-SE': {\n    todayDate: (args) => `Idag, ${args?.date}`,\n    todayDateSelected: (args) => `Idag, ${args?.date} har valts`,\n    dateSelected: (args) => `${args?.date} har valts`,\n    minimumDate: `Första tillgängliga datum`,\n    maximumDate: `Sista tillgängliga datum`\n  },\n  'tr-TR': {\n    todayDate: (args) => `Bugün, ${args?.date}`,\n    todayDateSelected: (args) => `Bugün, ${args?.date} seçildi`,\n    dateSelected: (args) => `${args?.date} seçildi`,\n    minimumDate: `İlk müsait tarih`,\n    maximumDate: `Son müsait tarih`\n  },\n  'uk-UA': {\n    todayDate: (args) => `Сьогодні, ${args?.date}`,\n    todayDateSelected: (args) => `Сьогодні, вибрано ${args?.date}`,\n    dateSelected: (args) => `Вибрано ${args?.date}`,\n    minimumDate: `Перша доступна дата`,\n    maximumDate: `Остання доступна дата`\n  },\n  'zh-CN': {\n    todayDate: (args) => `今天，即 ${args?.date}`,\n    todayDateSelected: (args) => `已选择今天，即 ${args?.date}`,\n    dateSelected: (args) => `已选择 ${args?.date}`,\n    minimumDate: `第一个可用日期`,\n    maximumDate: `最后一个可用日期`\n  },\n  'zh-TW': {\n    todayDate: (args) => `今天，${args?.date}`,\n    todayDateSelected: (args) => `已選取今天，${args?.date}`,\n    dateSelected: (args) => `已選取 ${args?.date}`,\n    minimumDate: `第一個可用日期`,\n    maximumDate: `最後一個可用日期`\n  }\n}\n","import { CalendarDate, isSameDay, isToday } from '@internationalized/date'\nimport { useLocalizedStringFormatter } from 'react-aria'\nimport type { CalendarState, RangeCalendarState } from 'react-stately'\n\nimport { useHydrated } from '../portal/Portal'\nimport { todayLabelStrings } from './todayLabelStrings'\n\n// Stands in for the date in a wrapper string, to split the wrapper around it.\nconst DATE = '\\u0000'\n\ninterface CellToday {\n  /** Whether the cell is marked as today: its class and `aria-current`. */\n  isCurrentDate: boolean\n  /** The cell button's `aria-label`. */\n  label: string | undefined\n}\n\n// \"Today\" depends on the time zone, and a server's is rarely the viewer's, so a cell marks it only\n// once hydration has finished. The zone is the calendar's, as in react-aria's label: a\n// `ZonedDateTime` value's own, otherwise the browser's.\n//\n// That covers the label too, which `useCalendarCell` writes during render with no such guard\n// (\"Today, Thursday, October 1, 2026 selected\"). Until hydration the cell's label is react-aria's\n// for a day that isn't today: the \"Today\" wrapper taken off the label react-aria wrote, and, for a\n// selected day, its \"selected\" wrapper put on instead. The wrappers come from the same strings\n// react-aria formats with, a `LocalizedStringProvider`'s or else a copy of react-aria's own\n// (`todayLabelStrings.ts`). What's inside the wrapper (a range's description, the date) and the\n// first/last available date note after it stay react-aria's. Should react-aria's label ever not\n// match those wrappers, it's left as it is.\nexport function useCellToday(\n  date: CalendarDate,\n  state: CalendarState<'single' | 'multiple'> | RangeCalendarState,\n  isSelected: boolean,\n  label: string | undefined\n): CellToday {\n  const hydrated = useHydrated()\n  const strings = useLocalizedStringFormatter(todayLabelStrings, '@react-aria/calendar')\n  const today = isToday(date, state.timeZone)\n  if (hydrated || !today || !label) return { isCurrentDate: hydrated && today, label }\n\n  const wrapper = strings.format(isSelected ? 'todayDateSelected' : 'todayDate', { date: DATE })\n  const [before = '', after = ''] = wrapper.split(DATE)\n  let note = ''\n  if (state.minValue && isSameDay(date, state.minValue)) {\n    note = `, ${strings.format('minimumDate')}`\n  } else if (state.maxValue && isSameDay(date, state.maxValue)) {\n    note = `, ${strings.format('maximumDate')}`\n  }\n  const end = label.length - after.length - note.length\n  if (!label.startsWith(before) || !label.endsWith(after + note) || end < before.length) {\n    return { isCurrentDate: false, label }\n  }\n\n  const inner = label.slice(before.length, end)\n  return {\n    isCurrentDate: false,\n    label: (isSelected ? strings.format('dateSelected', { date: inner }) : inner) + note\n  }\n}\n","import React, { forwardRef, HTMLAttributes, useMemo, useRef, useState } from 'react'\nimport classNames from 'classnames'\nimport { AriaCalendarProps, mergeProps, useCalendar, useCalendarCell, useLocale } from 'react-aria'\nimport { CalendarState as StatelyCalendarState, DateValue, useCalendarState } from 'react-stately'\nimport {\n  CalendarDate,\n  createCalendar,\n  getLocalTimeZone,\n  isWeekend,\n  today\n} from '@internationalized/date'\n\nimport { useForkedRef } from '../../hooks'\nimport { CalendarMonthBlock } from './CalendarMonthBlock'\nimport { CalendarMonthYearPicker } from './CalendarMonthYearPicker'\nimport { CalendarNavButton } from './CalendarNavButton'\nimport { CalendarWeekGrid } from './CalendarWeekGrid'\nimport { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'\nimport './Calendar.scss'\nimport { CalendarLabels, CalendarLabelsProvider } from './labels'\nimport { useCellToday } from './todayLabel'\n\ninterface CalendarBaseProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the calendar, used when there's no visible label. Required for\n   * standalone use — a calendar grid has no other accessible name of its own.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible label element for the calendar.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Whether to automatically focus the calendar when it mounts.\n   */\n  autoFocus?: boolean\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The date the calendar first shows and focuses, in place of the selected date or today.\n   * `DatePicker` and `DateRangePicker` pass their `placeholderValue` here while empty.\n   */\n  defaultFocusedValue?: DateValue | null\n  /**\n   * Prevents the calendar from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * The day that starts the week, overriding the default set by the active locale.\n   *\n   * @default 'mon'\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  /**\n   * Callback that is called for each date in the calendar. If it returns `true`, that date is\n   * shown but cannot be selected.\n   */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /**\n   * Overrides for the handful of strings this component renders itself rather than getting from\n   * the active locale (the year view's paging arrows, its live-region announcements, and the\n   * month/year header buttons). Everything else — month and weekday names, the calendar system —\n   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English\n   * defaults, so passing one key leaves the rest alone.\n   */\n  labels?: Partial<CalendarLabels>\n  /**\n   * The maximum allowed date that a user may select.\n   */\n  maxValue?: DateValue | null\n  /**\n   * The minimum allowed date that a user may select.\n   */\n  minValue?: DateValue | null\n  /**\n   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to\n   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed\n   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.\n   */\n  unavailableDates?: string[]\n  /**\n   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in\n   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is\n   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of\n   * where the calendar is embedded.\n   *\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\nexport interface CalendarSingleProps extends CalendarBaseProps {\n  /**\n   * The initial selected date (uncontrolled).\n   */\n  defaultValue?: DateValue | null\n  /**\n   * Callback fired when the selected date changes. Unlike `DatePicker`'s `onChange` (whose\n   * segmented field can be cleared to `null`), a calendar selection is always a concrete date.\n   */\n  onChange?: (value: DateValue) => void\n  /**\n   * Whether a single date or multiple, independently toggled dates can be selected.\n   *\n   * @default 'single'\n   */\n  selectionMode?: 'single'\n  /**\n   * The selected date (controlled).\n   */\n  value?: DateValue | null\n}\n\nexport interface CalendarMultipleProps extends CalendarBaseProps {\n  /**\n   * The initial selected dates (uncontrolled).\n   */\n  defaultValue?: DateValue[] | null\n  /**\n   * Callback fired when the set of selected dates changes.\n   */\n  onChange?: (value: DateValue[]) => void\n  /**\n   * Whether a single date or multiple, independently toggled dates can be selected.\n   *\n   * @default 'single'\n   */\n  selectionMode: 'multiple'\n  /**\n   * The selected dates (controlled).\n   */\n  value?: DateValue[] | null\n}\n\nexport type CalendarProps = CalendarSingleProps | CalendarMultipleProps\n\n// Public, standalone calendar grid — also used internally by `DatePicker` to render the grid\n// inside its popover. Deliberately has no knowledge of dialog/popover semantics (role=\"dialog\",\n// focus trapping, etc.) — that's the caller's concern, layered on via the `...rest` passthrough\n// below (see `DatePicker`, which merges its own `useDialog` output in this way).\n//\n// `selectionMode` is a discriminated union on the public props (single vs. multiple value/\n// onChange shapes), bridged onto one underlying `useCalendarState`/`useCalendar` call instantiated\n// over the union of both modes — react-stately/react-aria are natively selection-mode-aware at\n// that layer (including `useCalendarCell`'s `isSelected`), so no custom multi-select logic is\n// needed here, just narrow, provably-safe casts at the seam between the public union and the\n// single generic call (react-stately always reports/expects the value shape matching whichever\n// `selectionMode` was actually passed in).\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, forwardedRef) => {\n  const {\n    autoFocus,\n    className,\n    defaultFocusedValue: defaultFocusedValueProp,\n    defaultValue,\n    disabled,\n    firstDayOfWeek = 'mon',\n    isDateUnavailable,\n    labels,\n    maxValue,\n    minValue,\n    onChange,\n    selectionMode = 'single',\n    unavailableDates,\n    value,\n    visibleMonths = 1,\n    ...rest\n  } = props\n\n  const { locale } = useLocale()\n  const internalRef = useRef<HTMLDivElement>(null)\n  const ref = useForkedRef(internalRef, forwardedRef)\n  const combinedIsDateUnavailable = useMemo(\n    () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n    [unavailableDates, isDateUnavailable]\n  )\n  // Tracks each visible month block's own view, keyed by `monthIndex` — same reasoning as\n  // `RangeCalendar`'s identical state: needed only to know whether *any* block has switched\n  // away from the day grid, so the global `.datepicker-controls` overlay can hide itself rather\n  // than sit on top of `CalendarYearGrid`'s own pager.\n  const [monthViews, setMonthViews] = useState<Record<number, 'days' | 'months' | 'years'>>({})\n  const hasPickerView = Object.values(monthViews).some((view) => view !== 'days')\n\n  const handleChange = (next: DateValue | readonly DateValue[]) => {\n    if (selectionMode === 'multiple') {\n      ;(onChange as ((value: DateValue[]) => void) | undefined)?.(next as DateValue[])\n    } else {\n      ;(onChange as ((value: DateValue) => void) | undefined)?.(next as DateValue)\n    }\n  }\n  const normalizedValue = value as DateValue | readonly DateValue[] | null | undefined\n  const normalizedDefaultValue = defaultValue as DateValue | readonly DateValue[] | null | undefined\n  // react-stately's `useCalendarState` crashes computing the initial focused date for\n  // `selectionMode: 'multiple'` when the (controlled or default) value is a genuinely empty\n  // array — its own fallback-to-today logic only runs when the value is nullish, but an empty\n  // array is truthy, so it instead indexes the (nonexistent) first element and calls `.subtract`\n  // on the resulting `undefined`. Supplying `defaultFocusedValue` ourselves in exactly that case\n  // short-circuits react-stately's logic before it ever reaches the buggy branch, without\n  // affecting the normal \"focus follows the selection\" behavior whenever there is one.\n  const resolvedValue = normalizedValue !== undefined ? normalizedValue : normalizedDefaultValue\n  const defaultFocusedValue =\n    defaultFocusedValueProp ??\n    (selectionMode === 'multiple' && Array.isArray(resolvedValue) && resolvedValue.length === 0\n      ? today(getLocalTimeZone())\n      : undefined)\n\n  const state = useCalendarState<DateValue, 'single' | 'multiple'>({\n    autoFocus,\n    createCalendar,\n    defaultFocusedValue,\n    defaultValue: normalizedDefaultValue,\n    firstDayOfWeek,\n    isDateUnavailable: combinedIsDateUnavailable,\n    isDisabled: disabled,\n    locale,\n    maxValue,\n    minValue,\n    onChange: handleChange,\n    // Prev/next always slide the visible window by one month, regardless of `visibleMonths` —\n    // same reasoning as `RangeCalendar`'s identical setting (see that component's own comment).\n    pageBehavior: 'single',\n    selectionMode,\n    value: normalizedValue,\n    visibleDuration: { months: visibleMonths }\n  })\n\n  const ariaProps: AriaCalendarProps<DateValue, 'single' | 'multiple'> = {\n    'aria-label': rest['aria-label'],\n    'aria-labelledby': rest['aria-labelledby'],\n    autoFocus,\n    defaultFocusedValue,\n    defaultValue: normalizedDefaultValue,\n    isDateUnavailable: combinedIsDateUnavailable,\n    isDisabled: disabled,\n    maxValue,\n    minValue,\n    onChange: handleChange,\n    selectionMode,\n    value: normalizedValue\n  }\n\n  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(ariaProps, state)\n  const prevButton = <CalendarNavButton buttonProps={prevButtonProps} direction=\"prev\" />\n  const nextButton = <CalendarNavButton buttonProps={nextButtonProps} direction=\"next\" />\n\n  return (\n    <CalendarLabelsProvider labels={labels}>\n      <div\n        {...mergeProps(calendarProps, rest)}\n        className={classNames('datepicker', className)}\n        data-cx-inline=\"true\"\n        ref={ref}\n      >\n        {visibleMonths === 1 ? (\n          <CalendarMonthYearPicker\n            monthStart={state.visibleRange.start}\n            nextArrow={nextButton}\n            prevArrow={prevButton}\n            state={state}\n          >\n            <CalendarWeekGrid\n              firstDayOfWeek={firstDayOfWeek}\n              renderCell={(date, _index, _week, isOutsideMonth) => (\n                <CalendarCell\n                  date={date}\n                  isOutsideMonth={isOutsideMonth}\n                  locale={locale}\n                  state={state}\n                />\n              )}\n              state={state}\n            />\n          </CalendarMonthYearPicker>\n        ) : (\n          <>\n            {/* `.datepicker[data-cx-inline]` (the root above) is already `position: relative` in\n              chassis-css, so this overlay needs no extra positioning wrapper of its own — unlike\n              `RangeCalendar`, which has a `presets` column sharing that root and so scopes its\n              own copy of this overlay to a nested `.datepicker-body` instead. */}\n            {!hasPickerView && (\n              <div className=\"datepicker-controls\">\n                {prevButton}\n                {nextButton}\n              </div>\n            )}\n            <div className=\"datepicker-grid\">\n              {[...new Array(visibleMonths).keys()].map((monthIndex) => (\n                <CalendarMonthBlock\n                  firstDayOfWeek={firstDayOfWeek}\n                  key={monthIndex}\n                  monthIndex={monthIndex}\n                  onViewChange={(view) =>\n                    setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))\n                  }\n                  renderCell={(date, _index, _week, isOutsideMonth) => (\n                    <CalendarCell\n                      date={date}\n                      isOutsideMonth={isOutsideMonth}\n                      locale={locale}\n                      state={state}\n                    />\n                  )}\n                  state={state}\n                />\n              ))}\n            </div>\n          </>\n        )}\n      </div>\n    </CalendarLabelsProvider>\n  )\n})\n\nCalendar.displayName = 'Calendar'\n\ntype CalendarState = StatelyCalendarState<'single' | 'multiple'>\n\ninterface CalendarCellProps {\n  date: CalendarDate\n  // A day of the month before or after the one this grid shows: see `CalendarWeekGrid`.\n  isOutsideMonth: boolean\n  locale: string\n  state: CalendarState\n}\n\nconst CalendarCell = ({ date, isOutsideMonth, locale, state }: CalendarCellProps) => {\n  const ref = useRef<HTMLButtonElement>(null)\n  const {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isOutsideVisibleRange,\n    isDisabled,\n    isUnavailable,\n    formattedDate\n  } = useCalendarCell({ date, isOutsideMonth }, state, ref)\n  // Today only once hydrated, in the class, `aria-current` and the label alike: see `useCellToday`.\n  const { isCurrentDate, label } = useCellToday(date, state, isSelected, buttonProps['aria-label'])\n\n  return (\n    <div\n      {...cellProps}\n      aria-current={isCurrentDate ? 'date' : undefined}\n      className={classNames('datepicker-date', {\n        'datepicker-date-selected': isSelected,\n        'datepicker-date-today': isCurrentDate,\n        'datepicker-date-outside': isOutsideVisibleRange || isOutsideMonth,\n        'datepicker-date-disabled': isDisabled,\n        'datepicker-date-unavailable': isUnavailable,\n        'datepicker-date-weekend': isWeekend(date, locale)\n      })}\n    >\n      <button\n        {...buttonProps}\n        aria-label={label}\n        type=\"button\"\n        className=\"datepicker-date-btn\"\n        ref={ref}\n        // react-aria leaves `tabIndex` off a day that can't be focused, which keeps its own `<div>`\n        // out of the tab order but not a `<button>`.\n        tabIndex={buttonProps.tabIndex ?? -1}\n      >\n        {formattedDate}\n      </button>\n    </div>\n  )\n}\n","import React, { forwardRef, HTMLAttributes, useMemo, useRef, useState } from 'react'\nimport classNames from 'classnames'\nimport {\n  AriaRangeCalendarProps,\n  mergeProps,\n  RangeValue,\n  useCalendarCell,\n  useLocale,\n  useRangeCalendar\n} from 'react-aria'\nimport { DateValue, RangeCalendarState, useRangeCalendarState } from 'react-stately'\nimport {\n  CalendarDate,\n  createCalendar,\n  isSameDay,\n  isSameMonth,\n  isWeekend,\n  startOfMonth,\n  toCalendar,\n  toCalendarDate\n} from '@internationalized/date'\n\nimport { useForkedRef } from '../../hooks'\nimport { CalendarMonthBlock } from './CalendarMonthBlock'\nimport { CalendarNavButton } from './CalendarNavButton'\nimport { DateRangePreset } from '../../utils/dateRangePresets'\nimport { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'\nimport { setVisibleRangeStart } from '../../utils/setVisibleRangeStart'\nimport { suppressFocusRing } from '../../utils/suppressFocusRingGlobally'\nimport './Calendar.scss'\nimport './RangeCalendar.scss'\nimport { CalendarLabels, CalendarLabelsProvider } from './labels'\nimport { useCellToday } from './todayLabel'\n\nexport interface RangeCalendarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the calendar, used when there's no visible label. Required for\n   * standalone use — a calendar grid has no other accessible name of its own.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible label element for the calendar.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Whether to automatically focus the calendar when it mounts.\n   */\n  autoFocus?: boolean\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The date the calendar first shows and focuses, in place of the selected date or today.\n   * `DatePicker` and `DateRangePicker` pass their `placeholderValue` here while empty.\n   */\n  defaultFocusedValue?: DateValue | null\n  /**\n   * The initial selected date range (uncontrolled).\n   */\n  defaultValue?: RangeValue<DateValue> | null\n  /**\n   * Prevents the calendar from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * The day that starts the week, overriding the default set by the active locale.\n   *\n   * @default 'mon'\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  /**\n   * Callback that is called for each date in the calendar. If it returns `true`, that date is\n   * shown but cannot be selected.\n   */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /**\n   * Overrides for the handful of strings this component renders itself rather than getting from\n   * the active locale (the year view's paging arrows, its live-region announcements, and the\n   * month/year header buttons). Everything else — month and weekday names, the calendar system —\n   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English\n   * defaults, so passing one key leaves the rest alone.\n   */\n  labels?: Partial<CalendarLabels>\n  /**\n   * The maximum allowed date that a user may select.\n   */\n  maxValue?: DateValue | null\n  /**\n   * The minimum allowed date that a user may select.\n   */\n  minValue?: DateValue | null\n  /**\n   * Callback fired when a complete range is selected (both a start and end date).\n   */\n  onChange?: (value: RangeValue<DateValue>) => void\n  /**\n   * A list of quick-select range presets shown beside the calendar. Selecting a preset commits\n   * its range immediately, the same as picking a start and end date from the grid. The preset\n   * matching the current selection (if any) is marked selected. Omit to not show a preset list.\n   */\n  presets?: DateRangePreset[]\n  /**\n   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to\n   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed\n   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.\n   */\n  unavailableDates?: string[]\n  /**\n   * The selected date range (controlled).\n   */\n  value?: RangeValue<DateValue> | null\n  /**\n   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in\n   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is\n   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of\n   * where the calendar is embedded.\n   *\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\n// Range counterpart to `Calendar` — same dialog-agnostic composition boundary (see that\n// component's own comment) and the same header/month-year-picker/grid visual language, reusing\n// `Calendar.scss`'s shared classes directly. Kept as its own component rather than a `mode` prop\n// on `Calendar`: the underlying react-stately/react-aria hooks are a genuinely different pair\n// (`useRangeCalendarState`/`useRangeCalendar` vs `useCalendarState`/`useCalendar`), and the cell\n// rendering has range-only concerns (start/end/in-between pill styling) with no single-date\n// equivalent.\nexport const RangeCalendar = forwardRef<HTMLDivElement, RangeCalendarProps>(\n  (\n    {\n      autoFocus,\n      className,\n      defaultFocusedValue,\n      defaultValue,\n      disabled,\n      firstDayOfWeek = 'mon',\n      isDateUnavailable,\n      labels,\n      maxValue,\n      minValue,\n      onChange,\n      presets,\n      unavailableDates,\n      value,\n      visibleMonths = 1,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const { locale } = useLocale()\n    const internalRef = useRef<HTMLDivElement>(null)\n    const ref = useForkedRef(internalRef, forwardedRef)\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n    const resolvedPresets = presets && presets.length > 0 ? presets : null\n    // Tracks each visible month block's own view, keyed by `monthIndex` — needed only to know\n    // whether *any* block has switched away from the day grid. `CalendarYearGrid` owns its own\n    // prev/next pager, which would otherwise sit right underneath the global `.datepicker-controls`\n    // overlay below (see its own comment) — and even in the month view, where there's no such\n    // literal overlap, the global pager would still page the day grid one block is no longer\n    // showing, which reads as it doing nothing.\n    const [monthViews, setMonthViews] = useState<Record<number, 'days' | 'months' | 'years'>>({})\n    const hasPickerView = Object.values(monthViews).some((view) => view !== 'days')\n\n    const state = useRangeCalendarState({\n      autoFocus,\n      createCalendar,\n      defaultFocusedValue,\n      defaultValue,\n      firstDayOfWeek,\n      isDateUnavailable: combinedIsDateUnavailable,\n      isDisabled: disabled,\n      locale,\n      maxValue,\n      minValue,\n      onChange,\n      // Prev/next always slide the visible window by one month, regardless of `visibleMonths` —\n      // react-stately's own default (`pageBehavior: 'visible'`) instead pages by the *entire*\n      // visible span at once (e.g. jumping straight from Nov/Dec to Jan/Feb for `visibleMonths={2}`,\n      // skipping Dec/Jan entirely), which reads as broken next to `CalendarMonthYearDropdowns`'\n      // own one-month-at-a-time jumps.\n      pageBehavior: 'single',\n      value,\n      visibleDuration: { months: visibleMonths }\n    })\n\n    const ariaProps: AriaRangeCalendarProps<DateValue> = {\n      'aria-label': rest['aria-label'],\n      'aria-labelledby': rest['aria-labelledby'],\n      autoFocus,\n      defaultFocusedValue,\n      defaultValue,\n      isDateUnavailable: combinedIsDateUnavailable,\n      isDisabled: disabled,\n      maxValue,\n      minValue,\n      onChange,\n      value\n    }\n\n    const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(\n      ariaProps,\n      state,\n      internalRef\n    )\n    // A single pair of buttons, placed in exactly one spot depending on `visibleMonths` — inline\n    // in the (only) month's own header for a single month, or once as a global overlay for\n    // several — never both, so there's no risk of two DOM nodes fighting over one ref.\n    const prevButton = <CalendarNavButton buttonProps={prevButtonProps} direction=\"prev\" />\n    const nextButton = <CalendarNavButton buttonProps={nextButtonProps} direction=\"next\" />\n    const singleMonthArrows = visibleMonths === 1 ? { next: nextButton, prev: prevButton } : null\n\n    // Goes through the same `state.setValue` path a two-click grid selection does (rather than\n    // calling `onChange` directly), so it behaves identically whether `value` is controlled or\n    // uncontrolled — including `DateRangePicker`, which relies on this to auto-close its popover\n    // the same way completing a range in the grid already does.\n    const handlePresetSelect = (range: RangeValue<DateValue>) => {\n      // A range that starts outside the visible months would be selected out of sight, so the\n      // calendar moves to its first month.\n      const start = toCalendar(toCalendarDate(range.start), state.focusedDate.calendar)\n      const { end: visibleEnd, start: visibleStart } = state.visibleRange\n      if (start.compare(visibleStart) < 0 || start.compare(visibleEnd) > 0) {\n        setVisibleRangeStart(state, startOfMonth(start))\n      }\n      // A selection begun in the grid would otherwise stay pending over the preset's range: the\n      // grid kept showing it, and the next day pressed finished it.\n      state.setAnchorDate(null)\n      state.setValue(range)\n    }\n\n    // Whether the grid of the month starting at `monthStart` draws `date` inside the range's band.\n    // A day of another month, a disabled one and an unavailable one are not, whatever the range.\n    const isInBand = (date: CalendarDate | null | undefined, monthStart: CalendarDate) =>\n      Boolean(date && isSameMonth(date, monthStart) && state.isSelected(date))\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        <div\n          {...mergeProps(calendarProps, rest)}\n          className={classNames('datepicker', className)}\n          data-cx-inline=\"true\"\n          ref={ref}\n        >\n          <div className=\"datepicker-grid\">\n            {resolvedPresets && (\n              <DateRangePresets\n                disabled={state.isDisabled}\n                onSelect={handlePresetSelect}\n                presets={resolvedPresets}\n                value={state.value}\n              />\n            )}\n            <div className=\"datepicker-body\">\n              {visibleMonths > 1 && !hasPickerView && (\n                <div className=\"datepicker-controls\">\n                  {prevButton}\n                  {nextButton}\n                </div>\n              )}\n              <div className=\"datepicker-grid\">\n                {[...new Array(visibleMonths).keys()].map((monthIndex) => {\n                  const monthStart = state.visibleRange.start.add({ months: monthIndex })\n\n                  return (\n                    <CalendarMonthBlock\n                      arrows={monthIndex === 0 ? singleMonthArrows : null}\n                      firstDayOfWeek={firstDayOfWeek}\n                      key={monthIndex}\n                      monthIndex={monthIndex}\n                      onViewChange={(view) =>\n                        setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))\n                      }\n                      renderCell={(date, i, week, isOutsideMonth) => (\n                        <CalendarCell\n                          date={date}\n                          isBandEnd={!isInBand(week[i + 1], monthStart)}\n                          isBandStart={!isInBand(week[i - 1], monthStart)}\n                          isOutsideMonth={isOutsideMonth}\n                          locale={locale}\n                          state={state}\n                        />\n                      )}\n                      state={state}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n          </div>\n        </div>\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nRangeCalendar.displayName = 'RangeCalendar'\n\ninterface CalendarCellProps {\n  date: CalendarDate\n  // Whether the band stops after this day and starts at it: the day next to it in the row is\n  // not drawn in the range, or there is none. That is a row's last and first day, and also a day\n  // beside an unavailable or disabled one, or beside another month's.\n  isBandEnd: boolean\n  isBandStart: boolean\n  // A day of the month before or after the one this grid shows: see `CalendarWeekGrid`.\n  isOutsideMonth: boolean\n  locale: string\n  state: RangeCalendarState\n}\n\nconst CalendarCell = ({\n  date,\n  isBandEnd,\n  isBandStart,\n  isOutsideMonth,\n  locale,\n  state\n}: CalendarCellProps) => {\n  const ref = useRef<HTMLButtonElement>(null)\n  const {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isOutsideVisibleRange,\n    isDisabled,\n    isUnavailable,\n    formattedDate\n  } = useCalendarCell({ date, isOutsideMonth }, state, ref)\n\n  // `isSelected` is true for every day in the range, not just its endpoints — the pill's rounded\n  // caps belong only at the true start/end (or wherever the band breaks: a row wrapping mid-range,\n  // so it still reads as continuous week to week, and a day the range can't hold, where it used\n  // to stop square); everything else in between is a flush, square-edged band. An endpoint that\n  // isn't drawn as selected, the copy of a day in the next month's grid, isn't drawn as one.\n  const { highlightedRange } = state\n  const isRangeStart = Boolean(highlightedRange && isSameDay(date, highlightedRange.start))\n  const isRangeEnd = Boolean(highlightedRange && isSameDay(date, highlightedRange.end))\n  // Today only once hydrated, in the class, `aria-current` and the label alike: see `useCellToday`.\n  const { isCurrentDate, label } = useCellToday(date, state, isSelected, buttonProps['aria-label'])\n\n  return (\n    <div\n      {...cellProps}\n      aria-current={isCurrentDate ? 'date' : undefined}\n      className={classNames('datepicker-date', {\n        'datepicker-date-today': isCurrentDate,\n        'datepicker-date-in-range': isSelected,\n        'datepicker-date-range-start': isSelected && (isRangeStart || isBandStart),\n        'datepicker-date-range-end': isSelected && (isRangeEnd || isBandEnd),\n        'datepicker-date-outside': isOutsideVisibleRange || isOutsideMonth,\n        'datepicker-date-disabled': isDisabled,\n        'datepicker-date-unavailable': isUnavailable,\n        'datepicker-date-weekend': isWeekend(date, locale)\n      })}\n    >\n      <button\n        {...mergeProps(buttonProps, {\n          'aria-label': label,\n          // Hovering to preview a range's end date moves real DOM focus via `element.focus()`\n          // (`useCalendarCell`'s `onPointerEnter` -> `state.highlightDate`), which browsers can\n          // paint as a visible focus ring even though the input modality is a pointer, not a\n          // keyboard — suppress it the same way a mouse press does elsewhere in the library.\n          onPointerEnter: () => {\n            if (state.anchorDate && ref.current) suppressFocusRing(ref.current)\n          },\n          // react-aria leaves `tabIndex` off a day that can't be focused, which keeps its own\n          // `<div>` out of the tab order but not a `<button>`.\n          tabIndex: buttonProps.tabIndex ?? -1\n        })}\n        type=\"button\"\n        className={classNames('datepicker-date-btn', {\n          'datepicker-date-range-start': isSelected && isRangeStart,\n          'datepicker-date-range-end': isSelected && isRangeEnd\n        })}\n        ref={ref}\n      >\n        {formattedDate}\n      </button>\n    </div>\n  )\n}\n\ninterface DateRangePresetsProps {\n  disabled: boolean\n  onSelect: (range: RangeValue<DateValue>) => void\n  presets: DateRangePreset[]\n  value: RangeValue<DateValue> | null\n}\n\n// A preset \"matches\" the current selection when both endpoints land on the same day — the same\n// granularity `CalendarCell` already uses to compare dates, so a preset stays marked selected\n// regardless of whether `value` is a `CalendarDate`, `CalendarDateTime`, or `ZonedDateTime`.\nconst isSameRange = (a: RangeValue<DateValue>, b: RangeValue<DateValue>) =>\n  isSameDay(a.start, b.start) && isSameDay(a.end, b.end)\n\n// Plain buttons in a list, not a listbox — a group of independent actions (each one commits\n// immediately) rather than a single-selection widget, so native Tab/Enter/Space is the right\n// interaction model without extra roving-tabindex/arrow-key wiring.\nconst DateRangePresets = ({ disabled, onSelect, presets, value }: DateRangePresetsProps) => (\n  <ul className=\"datepicker-presets\">\n    {presets.map((preset) => {\n      const isSelected = Boolean(value && isSameRange(value, preset.range))\n\n      return (\n        <li key={preset.label}>\n          <button\n            aria-current={isSelected ? 'true' : undefined}\n            className={classNames('datepicker-preset', { selected: isSelected })}\n            disabled={disabled}\n            onClick={() => onSelect(preset.range)}\n            type=\"button\"\n          >\n            {preset.label}\n          </button>\n        </li>\n      )\n    })}\n  </ul>\n)\n"],"mappings":"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"}

package/dist/chunks/VisuallyHidden-C2dM7HhC.js

@@ -0,0 +1,2 @@
+import{t as e}from"./polymorphic-BhGNZQja.js";import t from"react";import n from"classnames";function r({children:e,className:r,component:i,focusable:a,...o},s){let c=i??`span`;return t.createElement(c,{className:n(a?`visually-hidden-focusable`:`visually-hidden`,r),...o,ref:s},e)}const i=e(r,`VisuallyHidden`);export{i as t};
+//# sourceMappingURL=VisuallyHidden-C2dM7HhC.js.map

package/dist/chunks/VisuallyHidden-C2dM7HhC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden-C2dM7HhC.js","names":[],"sources":["../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype VisuallyHiddenOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Shows the element while it, or an element inside it, has keyboard focus: a skip link, or a\n   * group of controls only keyboard users reach. Renders `.visually-hidden-focusable` instead of\n   * `.visually-hidden`.\n   */\n  focusable?: boolean\n}\n\nexport type VisuallyHiddenProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  VisuallyHiddenOwnProps<C>\n>\n\ntype VisuallyHiddenComponent = (<C extends ElementType = 'span'>(\n  props: VisuallyHiddenProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction VisuallyHiddenRender<C extends ElementType = 'span'>(\n  { children, className, component, focusable, ...rest }: VisuallyHiddenProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n\n  return (\n    <Component\n      className={classNames(focusable ? 'visually-hidden-focusable' : 'visually-hidden', className)}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </Component>\n  )\n}\n\nexport const VisuallyHidden = createPolymorphicComponent<VisuallyHiddenComponent>(\n  VisuallyHiddenRender as ForwardRefRenderFunction<Element, VisuallyHiddenProps<ElementType>>,\n  'VisuallyHidden'\n)\n"],"mappings":"6FAqCA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,YAAW,GAAG,GAChD,EACA,CACA,IAAM,EAAY,GAAa,OAE/B,OACE,EAAA,cAAC,EAAD,CACE,UAAW,EAAW,EAAY,4BAA8B,kBAAmB,CAAS,EAC5F,GAAI,EACC,KAGI,EADR,CACQ,CAEf,CAEA,MAAa,EAAiB,EAC5B,EACA,gBACF"}

package/dist/chunks/accordion-B8UWyvQB.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{v as e}from"./slot-CNhFZdHF.js";import{t}from"./polymorphic-BhGNZQja.js";import n,{createContext as r,forwardRef as i,useContext as a,useId as o,useRef as s,useState as c}from"react";import l from"classnames";function u({children:e,className:t,component:r,...i},a){let o=r??`div`;return n.createElement(o,{className:l(`accordion-body`,t),...i,ref:a},e)}const d=t(u,`AccordionBody`),f=i(({children:e,className:t,...r},i)=>n.createElement(`summary`,{className:l(t)||void 0,...r,ref:i},n.createElement(`span`,{className:`accordion-title`},e)));f.displayName=`AccordionHeader`;const p=r({}),m=i(({children:t,alwaysOpen:r,className:i,name:o,open:s,itemKey:c,...u},d)=>{e(c!==void 0,`AccordionItem: the itemKey prop is deprecated and no longer used — the native <details> element manages its own state. It will be removed in a future major version.`);let f=a(p),m=r??f.alwaysOpen,h=o??f.name,g=m?{}:{name:h};return n.createElement(`details`,{className:l(`accordion-item`,i),open:s,...g,...u,ref:d},t)});m.displayName=`AccordionItem`;const h=i(({children:e,alwaysOpen:t=!1,caretEnd:r,className:i,defaultExpandedKeys:a,expandedKeys:u,flush:h,items:g,name:_,onExpandedChange:v,size:y,...b},x)=>{let S=o(),C=_??S,w=l(`accordion`,{flush:h,"caret-end":r},y,i),T=u!==void 0,E=T||a!==void 0||v!==void 0,[D,O]=c(()=>a??g?.filter(e=>e.open).map((e,t)=>e.id??t)??[]),k=T?u:D,A=s(new Map),j=(e,t)=>n=>{if(t?.(n),!g)return;let r=g.map((e,t)=>e.id??t).filter(e=>A.current.get(e)?.open);T?n.currentTarget.open=u.includes(e):O(r),v?.(r)},M=g?g.map((e,t)=>{let r=e.id??t;return n.createElement(m,{key:r,className:e.className,open:E?k.includes(r):e.open,name:e.name,alwaysOpen:e.alwaysOpen,onToggle:j(r,e.onToggle),ref:e=>{A.current.set(r,e)}},n.createElement(f,null,e.header),n.createElement(d,null,e.body))}):e;return n.createElement(`div`,{className:w,...b,ref:x},n.createElement(p.Provider,{value:{alwaysOpen:t,name:C}},M))});h.displayName=`Accordion`;export{d as i,m as n,f as r,h as t};
+//# sourceMappingURL=accordion-B8UWyvQB.js.map

package/dist/chunks/accordion-B8UWyvQB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-B8UWyvQB.js","names":[],"sources":["../../src/components/accordion/AccordionBody.tsx","../../src/components/accordion/AccordionHeader.tsx","../../src/components/accordion/context.ts","../../src/components/accordion/AccordionItem.tsx","../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype AccordionBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type AccordionBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  AccordionBodyOwnProps<C>\n>\n\ntype AccordionBodyComponent = (<C extends ElementType = 'div'>(\n  props: AccordionBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction AccordionBodyRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: AccordionBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n\n  return (\n    <Component className={classNames('accordion-body', className)} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const AccordionBody = createPolymorphicComponent<AccordionBodyComponent>(\n  AccordionBodyRender as ForwardRefRenderFunction<Element, AccordionBodyProps<ElementType>>,\n  'AccordionBody'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nexport interface AccordionHeaderProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n}\n\nexport const AccordionHeader = forwardRef<HTMLElement, AccordionHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <summary className={classNames(className) || undefined} {...rest} ref={ref}>\n        <span className=\"accordion-title\">{children}</span>\n      </summary>\n    )\n  }\n)\n\nAccordionHeader.displayName = 'AccordionHeader'\n","import { createContext } from 'react'\n\nexport interface AccordionContextProps {\n  alwaysOpen?: boolean\n  name?: string\n}\n\nexport const AccordionContext = createContext<AccordionContextProps>({})\n","import React, { forwardRef, DetailsHTMLAttributes, useContext } from 'react'\nimport classNames from 'classnames'\n\nimport { AccordionContext } from './context'\nimport { devWarning } from '../../utils/devWarning'\n\nexport interface AccordionItemProps extends DetailsHTMLAttributes<HTMLDetailsElement> {\n  /**\n   * Let this item stay open when another item opens, overriding the accordion's `alwaysOpen` setting.\n   */\n  alwaysOpen?: boolean\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The group this item shares with other items so only one can be open at a time, overriding the\n   * accordion's shared `name`.\n   */\n  name?: string\n  /**\n   * Start the item in the open state.\n   */\n  open?: boolean\n  /**\n   * @deprecated No longer used. The native details element manages its own state.\n   */\n  itemKey?: number | string\n}\n\nexport const AccordionItem = forwardRef<HTMLDetailsElement, AccordionItemProps>(\n  ({ children, alwaysOpen, className, name, open, itemKey: _itemKey, ...rest }, ref) => {\n    devWarning(\n      _itemKey !== undefined,\n      'AccordionItem: the itemKey prop is deprecated and no longer used — the native ' +\n        '<details> element manages its own state. It will be removed in a future major version.'\n    )\n\n    const context = useContext(AccordionContext)\n    const isAlwaysOpen = alwaysOpen ?? context.alwaysOpen\n    const groupName = name ?? context.name\n\n    const groupProps = isAlwaysOpen ? {} : { name: groupName }\n\n    return (\n      <details\n        className={classNames('accordion-item', className)}\n        open={open}\n        {...(groupProps as React.HTMLAttributes<HTMLDetailsElement>)}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </details>\n    )\n  }\n)\n\nAccordionItem.displayName = 'AccordionItem'\n","import React, { forwardRef, HTMLAttributes, ReactNode, useId, useRef, useState } from 'react'\nimport classNames from 'classnames'\n\nimport { AccordionBody } from './AccordionBody'\nimport { AccordionHeader } from './AccordionHeader'\nimport { AccordionItem } from './AccordionItem'\nimport { AccordionContext } from './context'\n\nexport interface AccordionItemDef {\n  /**\n   * Let this item stay open when another item opens, overriding the accordion's `alwaysOpen` setting.\n   */\n  alwaysOpen?: boolean\n  /**\n   * Body content, rendered inside a `AccordionBody`.\n   */\n  body: ReactNode\n  /**\n   * A string of all className you want applied to this item.\n   */\n  className?: string\n  /**\n   * Header content, rendered inside a `AccordionHeader`.\n   */\n  header: ReactNode\n  /**\n   * React key for this item. Falls back to its index when omitted.\n   */\n  id?: number | string\n  /**\n   * The group this item shares with other items so only one can be open at a time, overriding the\n   * accordion's shared `name`.\n   */\n  name?: string\n  /**\n   * Callback fired when this item's open state changes. Chained after `Accordion`'s own handling\n   * of `expandedKeys`/`onExpandedChange`, so it fires regardless of whether those are used.\n   */\n  onToggle?: (event: React.SyntheticEvent<HTMLDetailsElement>) => void\n  /**\n   * Start the item in the open state (uncontrolled). Ignored for items whose key is included in\n   * `expandedKeys`/`defaultExpandedKeys` on the parent `Accordion`.\n   */\n  open?: boolean\n}\n\nexport interface AccordionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Make accordion items stay open when another item is opened.\n   */\n  alwaysOpen?: boolean\n  /**\n   * Move the caret icon to the end of the header.\n   */\n  caretEnd?: boolean\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The keys of the initially expanded items (uncontrolled). Only applies to items rendered via\n   * the `items` prop — a composed `AccordionItem` already supports native controlled `open`/\n   * `onToggle` directly.\n   */\n  defaultExpandedKeys?: Array<number | string>\n  /**\n   * The keys of the currently expanded items (controlled). Only applies to items rendered via the\n   * `items` prop — a composed `AccordionItem` already supports native controlled `open`/`onToggle`\n   * directly.\n   */\n  expandedKeys?: Array<number | string>\n  /**\n   * Removes the default background-context, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.\n   */\n  flush?: boolean\n  /**\n   * Array of item definitions for data-driven rendering. When provided, children are ignored.\n   */\n  items?: AccordionItemDef[]\n  /**\n   * The shared group name used by items that don't set their own `name`. Defaults to an auto-generated id.\n   */\n  name?: string\n  /**\n   * Callback fired with the updated set of expanded item keys, reflecting the native `<details>`\n   * elements' actual open state (including items the browser closed itself via a shared `name`\n   * group). Only fires for items rendered via the `items` prop.\n   */\n  onExpandedChange?: (keys: Array<number | string>) => void\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      children,\n      alwaysOpen = false,\n      caretEnd,\n      className,\n      defaultExpandedKeys,\n      expandedKeys,\n      flush,\n      items,\n      name,\n      onExpandedChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const generatedName = useId()\n    const groupName = name ?? generatedName\n    const _className = classNames('accordion', { flush, 'caret-end': caretEnd }, size, className)\n\n    const isExpandedControlled = expandedKeys !== undefined\n    const isTrackingExpanded =\n      isExpandedControlled || defaultExpandedKeys !== undefined || onExpandedChange !== undefined\n\n    const [uncontrolledExpandedKeys, setUncontrolledExpandedKeys] = useState<\n      Array<number | string>\n    >(\n      () =>\n        defaultExpandedKeys ??\n        items?.filter((item) => item.open).map((item, index) => item.id ?? index) ??\n        []\n    )\n    const currentExpandedKeys = isExpandedControlled ? expandedKeys : uncontrolledExpandedKeys\n\n    // Keyed by each item's id (or index) so a toggle handler can read every sibling's *actual*\n    // DOM open state — the browser settles a whole shared-`name` group's open attributes\n    // synchronously before dispatching any `toggle` events, so this is always the true next set,\n    // regardless of which affected item's handler happens to run first.\n    const itemRefs = useRef(new Map<number | string, HTMLDetailsElement | null>())\n\n    const handleItemToggle =\n      (id: number | string, itemOnToggle?: AccordionItemDef['onToggle']) =>\n      (event: React.SyntheticEvent<HTMLDetailsElement>) => {\n        itemOnToggle?.(event)\n        if (!items) return\n        const next = items\n          .map((item, index) => item.id ?? index)\n          .filter((key) => itemRefs.current.get(key)?.open)\n        if (isExpandedControlled) {\n          // React doesn't intercept a native <details> click the way it does controlled form\n          // inputs, so the DOM has already toggled by the time this fires. Snap this element back\n          // to the still-current controlled value — if the consumer's onExpandedChange updates\n          // `expandedKeys` in response, the next render sets it back to the new value anyway.\n          ;(event.currentTarget as HTMLDetailsElement).open = expandedKeys.includes(id)\n        } else {\n          setUncontrolledExpandedKeys(next)\n        }\n        onExpandedChange?.(next)\n      }\n\n    const content = items\n      ? items.map((item, index) => {\n          const id = item.id ?? index\n          return (\n            <AccordionItem\n              key={id}\n              className={item.className}\n              open={isTrackingExpanded ? currentExpandedKeys.includes(id) : item.open}\n              name={item.name}\n              alwaysOpen={item.alwaysOpen}\n              onToggle={handleItemToggle(id, item.onToggle)}\n              ref={(node) => {\n                itemRefs.current.set(id, node)\n              }}\n            >\n              <AccordionHeader>{item.header}</AccordionHeader>\n              <AccordionBody>{item.body}</AccordionBody>\n            </AccordionItem>\n          )\n        })\n      : children\n\n    return (\n      <div className={_className} {...rest} ref={ref}>\n        <AccordionContext.Provider value={{ alwaysOpen, name: groupName }}>\n          {content}\n        </AccordionContext.Provider>\n      </div>\n    )\n  }\n)\n\nAccordion.displayName = 'Accordion'\n"],"mappings":"yPA6BA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,MAE/B,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAW,iBAAkB,CAAS,EAAG,GAAI,EAAW,KAEnE,EADR,CACQ,CAEf,CAEA,MAAa,EAAgB,EAC3B,EACA,eACF,ECnCa,EAAkB,GAC5B,CAAE,WAAU,YAAW,GAAG,GAAQ,IAE/B,EAAA,cAAC,UAAD,CAAS,UAAW,EAAW,CAAS,GAAK,IAAA,GAAW,GAAI,EAAW,KAE9D,EADP,EAAA,cAAC,OAAD,CAAM,UAAU,iBAAkC,EAAf,CAAe,CAC3C,CAGf,EAEA,EAAgB,YAAc,kBCb9B,MAAa,EAAmB,EAAqC,CAAC,CAAC,ECuB1D,EAAgB,GAC1B,CAAE,WAAU,aAAY,YAAW,OAAM,OAAM,QAAS,EAAU,GAAG,GAAQ,IAAQ,CACpF,EACE,IAAa,IAAA,GACb,sKAEF,EAEA,IAAM,EAAU,EAAW,CAAgB,EACrC,EAAe,GAAc,EAAQ,WACrC,EAAY,GAAQ,EAAQ,KAE5B,EAAa,EAAe,CAAC,EAAI,CAAE,KAAM,CAAU,EAEzD,OACE,EAAA,cAAC,UAAD,CACE,UAAW,EAAW,iBAAkB,CAAS,EAC3C,OACN,GAAK,EACL,GAAI,EACC,KAGE,EADN,CACM,CAEb,CACF,EAEA,EAAc,YAAc,gBCqC5B,MAAa,EAAY,GAErB,CACE,WACA,aAAa,GACb,WACA,YACA,sBACA,eACA,QACA,QACA,OACA,mBACA,OACA,GAAG,GAEL,IACG,CACH,IAAM,EAAgB,EAAM,EACtB,EAAY,GAAQ,EACpB,EAAa,EAAW,YAAa,CAAE,QAAO,YAAa,CAAS,EAAG,EAAM,CAAS,EAEtF,EAAuB,IAAiB,IAAA,GACxC,EACJ,GAAwB,IAAwB,IAAA,IAAa,IAAqB,IAAA,GAE9E,CAAC,EAA0B,GAA+B,MAI5D,GACA,GAAO,OAAQ,GAAS,EAAK,IAAI,CAAC,CAAC,KAAK,EAAM,IAAU,EAAK,IAAM,CAAK,GACxE,CAAC,CACL,EACM,EAAsB,EAAuB,EAAe,EAM5D,EAAW,EAAO,IAAI,GAAiD,EAEvE,GACH,EAAqB,IACrB,GAAoD,CAEnD,GADA,IAAe,CAAK,EAChB,CAAC,EAAO,OACZ,IAAM,EAAO,EACV,KAAK,EAAM,IAAU,EAAK,IAAM,CAAK,CAAC,CACtC,OAAQ,GAAQ,EAAS,QAAQ,IAAI,CAAG,CAAC,EAAE,IAAI,EAC9C,EAKD,EAAO,cAAqC,KAAO,EAAa,SAAS,CAAE,EAE5E,EAA4B,CAAI,EAElC,IAAmB,CAAI,CACzB,EAEI,EAAU,EACZ,EAAM,KAAK,EAAM,IAAU,CACzB,IAAM,EAAK,EAAK,IAAM,EACtB,OACE,EAAA,cAAC,EAAD,CACE,IAAK,EACL,UAAW,EAAK,UAChB,KAAM,EAAqB,EAAoB,SAAS,CAAE,EAAI,EAAK,KACnE,KAAM,EAAK,KACX,WAAY,EAAK,WACjB,SAAU,EAAiB,EAAI,EAAK,QAAQ,EAC5C,IAAM,GAAS,CACb,EAAS,QAAQ,IAAI,EAAI,CAAI,CAC/B,CAIa,EAFb,EAAA,cAAC,EAAA,KAAiB,EAAK,MAAwB,EAC/C,EAAA,cAAC,EAAA,KAAe,EAAK,IAAoB,CAC5B,CAEnB,CAAC,EACD,EAEJ,OACE,EAAA,cAAC,MAAD,CAAK,UAAW,EAAY,GAAI,EAAW,KAItC,EAHH,EAAA,cAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,aAAY,KAAM,CAAU,CAErC,EADxB,CACwB,CACxB,CAET,CACF,EAEA,EAAU,YAAc"}

package/dist/chunks/alert-BXI-_qlt.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{c as e}from"./slot-CNhFZdHF.js";import{t}from"./useForkedRef-DVEfT-KI.js";import{t as n}from"./polymorphic-BhGNZQja.js";import{t as r}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t as i}from"./useDialogElement-CgOnJAzu.js";import{t as a}from"./Icon-DLB1f88W.js";import{t as o}from"./CloseButton-DPgQztE0.js";import{t as s}from"./Button-BoymWE-L.js";import c,{createContext as l,forwardRef as u,useCallback as d,useContext as f,useId as p,useRef as m,useState as h}from"react";import g from"classnames";const _=l({close:()=>{},registerPart:()=>()=>{}}),v=()=>f(_),y=u(({"aria-describedby":t,"aria-labelledby":n,backdrop:r=`static`,children:a,className:s,closeButton:l,closeLabel:u,defaultVisible:f,instant:p,keyboard:m=!1,onClick:v,onClose:y,onClosePrevented:b,onHidden:x,onShow:S,onShown:C,onVisibleChange:w,open:T,visible:E,...D},O)=>{let{close:k,forkedRef:A,handleBackdropClick:j,handleCancel:M,hiding:N,staticBounce:P}=i({backdrop:r,defaultVisible:f,instant:p,isModal:!0,keyboard:m,onClick:v,onClose:y,onClosePrevented:b,onHidden:x,onShow:S,onShown:C,onVisibleChange:w,open:T,ref:O,visible:E}),[F,I]=h([]),L=d((e,t,n)=>{let r={id:n,kind:e,node:t};return I(e=>[...e,r]),()=>I(e=>e.filter(e=>e!==r))},[]),R=e=>F.filter(t=>t.kind===e).sort((e,t)=>e.node.compareDocumentPosition(t.node)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1).map(({id:e})=>e),z=n||e(...R(`title`)),B=t||e(...R(`description`)),V={close:k,registerPart:L};return c.createElement(_.Provider,{value:V},c.createElement(`dialog`,{"aria-describedby":B,"aria-labelledby":z,role:`alertdialog`,...D,open:T,className:g(`alert`,`dialog`,{instant:p,hiding:N,"dialog-static":P},s),onCancel:M,onClick:j,ref:A},a,l&&c.createElement(o,{label:u,onClick:k})))});y.displayName=`Alert`;function b({children:e,className:t,component:n,...r},i){let a=n??`div`;return c.createElement(a,{className:g(`alert-body`,t),...r,ref:i},e)}const x=n(b,`AlertBody`),S=u(({color:e=`default`,onClick:t,...n},r)=>{let{close:i}=v();return c.createElement(s,{color:e,"data-autofocus":``,...n,onClick:e=>{t?.(e),e.defaultPrevented||i()},ref:r})});S.displayName=`AlertCancel`;function C(e){let t=m(null),{registerPart:n}=v(),i=m({});return r(()=>{let r=t.current,a=r?.id||void 0;a!==i.current.id&&(i.current.unregister?.(),i.current=r&&a?{id:a,unregister:n(e,r,a)}:{})}),r(()=>()=>{i.current.unregister?.(),i.current={}},[n]),t}function w({children:e,className:n,component:r,id:i,...a},o){let s=r??`code`,l=p(),u=C(`description`),d=t(o,u);return c.createElement(s,{className:g(`alert-code`,n),id:i??l,...a,ref:d},e)}const T=n(w,`AlertCode`);function E({children:e,className:t,component:n,stacked:r,...i},a){let o=n??`div`;return c.createElement(o,{className:g(`alert-footer`,{stacked:r},t),...i,ref:a},e)}const D=n(E,`AlertFooter`),O=u(({className:e,color:t,...n},r)=>c.createElement(a,{className:g(`alert-icon`,t&&`icon-${t}`,e),...n,ref:r}));O.displayName=`AlertIcon`;function k({children:e,className:n,component:r,id:i,...a},o){let s=r??`p`,l=p(),u=C(`description`),d=t(o,u);return c.createElement(s,{className:n,id:i??l,...a,ref:d},e)}const A=n(k,`AlertText`);function j({children:e,className:n,component:r,id:i,...a},o){let s=r??`h2`,l=p(),u=C(`title`),d=t(o,u);return c.createElement(s,{className:g(`alert-title`,n),id:i??l,...a,ref:d},e)}const M=n(j,`AlertTitle`);export{T as a,y as c,D as i,A as n,S as o,O as r,x as s,M as t};
+//# sourceMappingURL=alert-BXI-_qlt.js.map

package/dist/chunks/alert-BXI-_qlt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-BXI-_qlt.js","names":[],"sources":["../../src/components/alert/Alert.tsx","../../src/components/alert/AlertBody.tsx","../../src/components/alert/AlertCancel.tsx","../../src/components/alert/useAlertPart.ts","../../src/components/alert/AlertCode.tsx","../../src/components/alert/AlertFooter.tsx","../../src/components/alert/AlertIcon.tsx","../../src/components/alert/AlertText.tsx","../../src/components/alert/AlertTitle.tsx"],"sourcesContent":["import React, {\n  createContext,\n  DialogHTMLAttributes,\n  forwardRef,\n  useCallback,\n  useContext,\n  useState\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useDialogElement } from '../../hooks'\nimport { joinIds } from '../../utils/idRefs'\nimport { CloseButton } from '../close-button/CloseButton'\n\nexport interface AlertProps extends Omit<\n  DialogHTMLAttributes<HTMLDialogElement>,\n  'onCancel' | 'onClose'\n> {\n  /**\n   * Whether a click on the backdrop closes the alert. By default it doesn't (`'static'`): the\n   * alert bounces, since an alert dialog waits for an explicit choice. Set `true` to let it close.\n   */\n  backdrop?: true | 'static'\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Adds a close button in the corner, for an alert that needs a way out besides its actions.\n   */\n  closeButton?: boolean\n  /**\n   * The close button's accessible name. Defaults to `'Close'`; set it for non-English UIs.\n   */\n  closeLabel?: string\n  /**\n   * Whether the alert is open when it first renders. Such an alert is uncontrolled: it closes\n   * itself on a close request. Use `visible` to open and close it from outside.\n   */\n  defaultVisible?: boolean\n  /**\n   * Disable the open/close transition entirely.\n   */\n  instant?: boolean\n  /**\n   * Whether the Escape key closes the alert. By default it doesn't: the alert bounces instead.\n   */\n  keyboard?: boolean\n  /**\n   * Renders the alert open from its first paint, server HTML included, as a non-modal dialog: a\n   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to\n   * open it as a modal dialog.\n   */\n  open?: boolean\n  /**\n   * Callback fired when the alert asks to be closed: `AlertCancel`, the close button, and, when\n   * allowed, Escape or a backdrop click.\n   */\n  onClose?: () => void\n  /**\n   * Callback fired when a close attempt is blocked: a click on a static backdrop, or Escape\n   * while `keyboard` is off.\n   */\n  onClosePrevented?: () => void\n  /**\n   * Callback fired after the exit transition completes and the alert is fully hidden.\n   */\n  onHidden?: () => void\n  /**\n   * Callback fired when the alert starts to open.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired after the entry transition completes and the alert is fully visible.\n   */\n  onShown?: () => void\n  /**\n   * Callback fired with `false` when the alert asks to be closed, at the same moments as\n   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Whether the alert is open. The alert is then controlled: a close request only fires `onClose`\n   * and `onVisibleChange`, and the alert closes when this becomes `false`.\n   */\n  visible?: boolean\n}\n\nexport type AlertPartKind = 'title' | 'description'\n\nexport interface AlertContextProps {\n  /**\n   * Asks the alert to close: fires `onClose` and `onVisibleChange(false)`.\n   */\n  close: () => void\n  /**\n   * Adds a rendered element to the alert's `aria-labelledby` (a title) or `aria-describedby` (a\n   * code or text), under the id it has in the DOM, and returns the function that takes it out.\n   * The parts call it through `useAlertPart`.\n   */\n  registerPart: (kind: AlertPartKind, node: HTMLElement, id: string) => () => void\n}\n\nexport const AlertContext = createContext<AlertContextProps>({\n  close: () => {},\n  registerPart: () => () => {}\n})\n\nexport const useAlertContext = () => useContext(AlertContext)\n\n// chassis-css's alert dialog: a `<dialog class=\"alert dialog\" role=\"alertdialog\">`, opened with\n// `showModal()` by the same machinery as `Modal` (`useDialogElement`). What differs is the\n// defaults an alert dialog wants (a static backdrop, no Escape) and how it is named and\n// described. `aria-labelledby` and `aria-describedby` list the `AlertTitle`, `AlertCode` and\n// `AlertText` elements that are rendered, under the ids they have in the DOM (a child's own id\n// under `asChild`, a caller's `id`), in document order. The parts register from a layout effect\n// (`useAlertPart`), so the server's HTML names no id that isn't in it, and both attributes are\n// set before the first paint.\nexport const Alert = forwardRef<HTMLDialogElement, AlertProps>(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      'aria-labelledby': ariaLabelledBy,\n      backdrop = 'static',\n      children,\n      className,\n      closeButton,\n      closeLabel,\n      defaultVisible,\n      instant,\n      keyboard = false,\n      onClick,\n      onClose,\n      onClosePrevented,\n      onHidden,\n      onShow,\n      onShown,\n      onVisibleChange,\n      open,\n      visible,\n      ...rest\n    },\n    ref\n  ) => {\n    const { close, forkedRef, handleBackdropClick, handleCancel, hiding, staticBounce } =\n      useDialogElement({\n        backdrop,\n        defaultVisible,\n        instant,\n        isModal: true,\n        keyboard,\n        onClick,\n        onClose,\n        onClosePrevented,\n        onHidden,\n        onShow,\n        onShown,\n        onVisibleChange,\n        open,\n        ref,\n        visible\n      })\n\n    const [parts, setParts] = useState<{ id: string; kind: AlertPartKind; node: HTMLElement }[]>([])\n    const registerPart = useCallback((kind: AlertPartKind, node: HTMLElement, id: string) => {\n      const part = { id, kind, node }\n      setParts((current) => [...current, part])\n      return () => setParts((current) => current.filter((entry) => entry !== part))\n    }, [])\n\n    const idsOf = (kind: AlertPartKind) =>\n      parts\n        .filter((part) => part.kind === kind)\n        .sort((a, b) =>\n          a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n        )\n        .map(({ id }) => id)\n    // An empty string counts as unset.\n    const labelledBy = ariaLabelledBy || joinIds(...idsOf('title'))\n    const describedBy = ariaDescribedBy || joinIds(...idsOf('description'))\n\n    const contextValue = { close, registerPart }\n\n    return (\n      <AlertContext.Provider value={contextValue}>\n        <dialog\n          aria-describedby={describedBy}\n          aria-labelledby={labelledBy}\n          role=\"alertdialog\"\n          {...rest}\n          open={open}\n          className={classNames(\n            'alert',\n            'dialog',\n            { instant, hiding, 'dialog-static': staticBounce },\n            className\n          )}\n          onCancel={handleCancel}\n          onClick={handleBackdropClick}\n          ref={forkedRef}\n        >\n          {children}\n          {closeButton && <CloseButton label={closeLabel} onClick={close} />}\n        </dialog>\n      </AlertContext.Provider>\n    )\n  }\n)\n\nAlert.displayName = 'Alert'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype AlertBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'div'\n   */\n  component?: C\n}\n\nexport type AlertBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  AlertBodyOwnProps<C>\n>\n\ntype AlertBodyComponent = (<C extends ElementType = 'div'>(\n  props: AlertBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// `.alert-body`: the column that holds the title, an optional code and the message.\n\nfunction AlertBodyRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: AlertBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n\n  return (\n    <Component className={classNames('alert-body', className)} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const AlertBody = createPolymorphicComponent<AlertBodyComponent>(\n  AlertBodyRender as ForwardRefRenderFunction<Element, AlertBodyProps<ElementType>>,\n  'AlertBody'\n)\n","import React, { forwardRef, MouseEvent } from 'react'\n\nimport { Button, ButtonProps } from '../button/Button'\nimport { useAlertContext } from './Alert'\n\nexport type AlertCancelProps = Omit<ButtonProps<'button'>, 'asChild' | 'component' | 'href'>\n\n// The least destructive action: it closes the alert, and it has focus when the alert opens, as\n// an alert dialog should (WAI-ARIA APG). An element of your own with `data-autofocus` earlier in\n// the alert takes focus instead.\nexport const AlertCancel = forwardRef<HTMLButtonElement, AlertCancelProps>(\n  ({ color = 'default', onClick, ...rest }, ref) => {\n    const { close } = useAlertContext()\n    return (\n      <Button\n        color={color}\n        data-autofocus=\"\"\n        {...rest}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (!event.defaultPrevented) close()\n        }}\n        ref={ref}\n      />\n    )\n  }\n)\n\nAlertCancel.displayName = 'AlertCancel'\n","import { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { AlertPartKind, useAlertContext } from './Alert'\n\n// Registers the element behind the returned ref with the enclosing `Alert`, under the id it has in\n// the DOM after each commit. That is the part's own id, a caller's `id`, or, under `asChild`, the\n// child's own id, which wins over the part's. A changed id registers again; unmounting takes the\n// element out. Outside an `Alert` it does nothing.\nexport function useAlertPart(kind: AlertPartKind) {\n  const nodeRef = useRef<HTMLElement | null>(null)\n  const { registerPart } = useAlertContext()\n  const registered = useRef<{ id?: string; unregister?: () => void }>({})\n\n  useIsomorphicLayoutEffect(() => {\n    const node = nodeRef.current\n    const id = node?.id || undefined\n    if (id === registered.current.id) return\n    registered.current.unregister?.()\n    registered.current = node && id ? { id, unregister: registerPart(kind, node, id) } : {}\n  })\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      registered.current.unregister?.()\n      registered.current = {}\n    },\n    [registerPart]\n  )\n\n  return nodeRef\n}\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, useId } from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../hooks/useForkedRef'\nimport { useAlertPart } from './useAlertPart'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype AlertCodeOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'code'\n   */\n  component?: C\n}\n\nexport type AlertCodeProps<C extends ElementType = 'code'> = PolymorphicComponentProps<\n  C,\n  AlertCodeOwnProps<C>\n>\n\ntype AlertCodeComponent = (<C extends ElementType = 'code'>(\n  props: AlertCodeProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// `.alert-code`: a machine-readable reference, such as an error code, shown under the title. Its\n// id joins the alert's `aria-describedby`, in document order with the text's.\n\nfunction AlertCodeRender<C extends ElementType = 'code'>(\n  { children, className, component, id, ...rest }: AlertCodeProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'code'\n  const generatedId = useId()\n  const nodeRef = useAlertPart('description')\n  const forkedRef = useForkedRef(ref, nodeRef)\n\n  return (\n    <Component\n      className={classNames('alert-code', className)}\n      id={id ?? generatedId}\n      {...rest}\n      ref={forkedRef}\n    >\n      {children}\n    </Component>\n  )\n}\n\nexport const AlertCode = createPolymorphicComponent<AlertCodeComponent>(\n  AlertCodeRender as ForwardRefRenderFunction<Element, AlertCodeProps<ElementType>>,\n  'AlertCode'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype AlertFooterOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'div'\n   */\n  component?: C\n  /**\n   * Stacks the actions as full-width rows on small screens, instead of sharing one row.\n   */\n  stacked?: boolean\n}\n\nexport type AlertFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  AlertFooterOwnProps<C>\n>\n\ntype AlertFooterComponent = (<C extends ElementType = 'div'>(\n  props: AlertFooterProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// `.alert-footer`: the actions. chassis-css lays them out right to left, so write the primary\n// action first. Give a separate destructive action `className=\"me-auto\"` to push it to the other\n// end.\n\nfunction AlertFooterRender<C extends ElementType = 'div'>(\n  { children, className, component, stacked, ...rest }: AlertFooterProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n\n  return (\n    <Component className={classNames('alert-footer', { stacked }, className)} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const AlertFooter = createPolymorphicComponent<AlertFooterComponent>(\n  AlertFooterRender as ForwardRefRenderFunction<Element, AlertFooterProps<ElementType>>,\n  'AlertFooter'\n)\n","import React, { forwardRef } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport { Icon, IconProps } from '../icon/Icon'\n\nexport type AlertIconProps = IconProps & {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Colors the icon with one of Chassis context colors, such as `danger` for a destructive\n   * confirmation.\n   */\n  color?: ContextColor\n}\n\n// `.alert-icon`: an icon before the body. With it, chassis-css lays the alert out in two columns\n// from the `md` breakpoint up.\nexport const AlertIcon = forwardRef<HTMLSpanElement | SVGSVGElement, AlertIconProps>(\n  ({ className, color, ...rest }, ref) => (\n    <Icon\n      className={classNames('alert-icon', color && `icon-${color}`, className)}\n      {...rest}\n      ref={ref}\n    />\n  )\n)\n\nAlertIcon.displayName = 'AlertIcon'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, useId } from 'react'\n\nimport { useForkedRef } from '../../hooks/useForkedRef'\nimport { useAlertPart } from './useAlertPart'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype AlertTextOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'p'\n   */\n  component?: C\n}\n\nexport type AlertTextProps<C extends ElementType = 'p'> = PolymorphicComponentProps<\n  C,\n  AlertTextOwnProps<C>\n>\n\ntype AlertTextComponent = (<C extends ElementType = 'p'>(\n  props: AlertTextProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// The alert's message. Its id joins the alert's `aria-describedby`. chassis-css styles it as a\n// `<p>` inside `.alert-body`, with no class of its own.\n\nfunction AlertTextRender<C extends ElementType = 'p'>(\n  { children, className, component, id, ...rest }: AlertTextProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'p'\n  const generatedId = useId()\n  const nodeRef = useAlertPart('description')\n  const forkedRef = useForkedRef(ref, nodeRef)\n\n  return (\n    <Component className={className} id={id ?? generatedId} {...rest} ref={forkedRef}>\n      {children}\n    </Component>\n  )\n}\n\nexport const AlertText = createPolymorphicComponent<AlertTextComponent>(\n  AlertTextRender as ForwardRefRenderFunction<Element, AlertTextProps<ElementType>>,\n  'AlertText'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, useId } from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../hooks/useForkedRef'\nimport { useAlertPart } from './useAlertPart'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype AlertTitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   *\n   * @default 'h2'\n   */\n  component?: C\n}\n\nexport type AlertTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<\n  C,\n  AlertTitleOwnProps<C>\n>\n\ntype AlertTitleComponent = (<C extends ElementType = 'h2'>(\n  props: AlertTitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// `.alert-title`: its id, whichever reaches the DOM, joins the alert's `aria-labelledby`.\n\nfunction AlertTitleRender<C extends ElementType = 'h2'>(\n  { children, className, component, id, ...rest }: AlertTitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'h2'\n  const generatedId = useId()\n  const nodeRef = useAlertPart('title')\n  const forkedRef = useForkedRef(ref, nodeRef)\n\n  return (\n    <Component\n      className={classNames('alert-title', className)}\n      id={id ?? generatedId}\n      {...rest}\n      ref={forkedRef}\n    >\n      {children}\n    </Component>\n  )\n}\n\nexport const AlertTitle = createPolymorphicComponent<AlertTitleComponent>(\n  AlertTitleRender as ForwardRefRenderFunction<Element, AlertTitleProps<ElementType>>,\n  'AlertTitle'\n)\n"],"mappings":"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"}

package/dist/chunks/autocomplete-Baf9VSHN.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./useForkedRef-DVEfT-KI.js";import{t}from"./Portal-CgeR1WXV.js";import{r as ee}from"./useFloatingOverlay-DLIvwx-8.js";import{t as te}from"./useFormField-BOqmBTC4.js";import{i as ne,r as re,t as n}from"./overlayPlacement-BtS90IVf.js";import{a as r,i,n as a,r as o,t as s}from"./ComboboxListBox-Cm3L1ULl.js";import{t as ie}from"./renderFormField-Brkw1yA6.js";import c,{forwardRef as l,useEffect as u,useMemo as d,useRef as f}from"react";import p from"classnames";import{mergeProps as m,useButton as h,useComboBox as g,useFilter as _,useOverlayPosition as v}from"react-aria";import{useComboBoxState as y}from"react-stately";const b=e=>null;b.displayName=`AutocompleteGroup`;const x=e=>null;x.displayName=`AutocompleteItem`;const S=e=>{if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]},C=e=>e==null?[]:Array.isArray(e)?e:[e],w=l(function({children:l,className:w,defaultValue:ae,disabled:T,help:E,id:oe,invalid:D,invalidFeedback:O,items:k,label:A,multiple:j=!1,name:M,noResultsText:N=`No results found`,onChange:P,placeholder:F,searchPlaceholder:I,size:L,valid:R,validFeedback:z,value:B,...V},H){let U=d(()=>k?o(k):a(l,{Group:b,Item:x}),[k,l]),W=d(()=>r(U),[U]),{contains:G}=_({sensitivity:`base`}),K=y({children:i,defaultItems:U,disabledKeys:W,defaultFilter:G,selectionMode:j?`multiple`:`single`,defaultValue:S(ae),value:S(B),onChange:e=>{let t=C(e);P?.(j?t:t[0]??null)},allowsEmptyCollection:!0,menuTrigger:`manual`}),q=f(null),se=e(H,q),J=f(null),Y=f(null),X=f(null),{describedBy:ce,feedbackId:le,helpId:ue,inputId:de,labelId:fe,labelledBy:Z}=te({ariaDescribedBy:V[`aria-describedby`],ariaLabelledBy:V[`aria-labelledby`],help:E,id:oe,invalid:D,invalidFeedback:O,label:A,valid:R,validFeedback:z}),{buttonProps:pe,inputProps:me,listBoxProps:he}=g({"aria-label":V[`aria-label`],"aria-labelledby":Z,buttonRef:q,id:de,inputRef:J,listBoxRef:Y,popoverRef:X,isDisabled:T,placeholder:I},K),{buttonProps:ge}=h({...pe,elementType:`div`,isDisabled:T,excludeFromTabOrder:!1},q),Q=f(K.isOpen);u(()=>{K.isOpen&&!Q.current?J.current?.focus():!K.isOpen&&Q.current&&q.current?.focus(),Q.current=K.isOpen},[K.isOpen]),u(()=>{if(!K.isOpen)return;let e=q.current;for(;e&&e!==document.body;)e.removeAttribute(`aria-hidden`),e=e.parentElement},[K.isOpen]);let{overlayProps:_e,placement:ve}=v({targetRef:q,overlayRef:X,placement:ne(`bottom-start`),offset:2,isOpen:K.isOpen,onClose:null}),ye=ee({close:K.close,isOpen:K.isOpen,triggerRef:q}),{menuStyle:be,placementAttr:xe}=re(_e.style,`bottom-start`,ve),Se={...n,...be},Ce=e=>K.selectionManager.toggleSelection(e),we=m(me,{onKeyDown:e=>{if(!j||e.key!==`Backspace`||e.currentTarget.value!==``)return;let t=K.selectedItems[K.selectedItems.length-1];t&&Ce(t.key)}}),$=K.selectedItems.length>0,Te=$?K.selectedItems.length===1?K.selectedItems[0]?.textValue??``:`${K.selectedItems.length} selected`:F;return ie({children:c.createElement(c.Fragment,null,c.createElement(`div`,{className:p(`form-input`,`combobox`,{sm:L===`sm`,lg:L===`lg`,disabled:T},{"is-invalid":D,"is-valid":R},w),...V,...ge,"aria-label":V[`aria-label`],"aria-labelledby":Z,"aria-describedby":ce,"aria-invalid":D||void 0,ref:se},c.createElement(`span`,{className:p(`combobox-value`,{"combobox-placeholder":!$})},Te)),c.createElement(t,{container:ye},c.createElement(`div`,{className:p(`menu`,{show:K.isOpen}),"data-cx-placement":xe,style:Se,hidden:!K.isOpen,ref:X},c.createElement(`div`,{className:`combobox-search`},c.createElement(`input`,{autoComplete:`off`,className:`form-input combobox-search-input sm`,...we,ref:J})),c.createElement(s,{state:K,listBoxProps:he,listBoxRef:Y}),K.collection.size===0&&c.createElement(`div`,{className:`combobox-no-results`},N))),M&&(j?C(K.value).map(e=>c.createElement(`input`,{key:e,type:`hidden`,name:M,value:e,disabled:T})):c.createElement(`input`,{type:`hidden`,name:M,value:C(K.value)[0]??``,disabled:T}))),help:E,ids:{feedback:le,help:ue,label:fe},invalid:D,invalidFeedback:O,label:A,valid:R,validFeedback:z})});w.displayName=`Autocomplete`;export{x as n,b as r,w as t};
+//# sourceMappingURL=autocomplete-Baf9VSHN.js.map

package/dist/chunks/autocomplete-Baf9VSHN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-Baf9VSHN.js","names":[],"sources":["../../src/components/autocomplete/AutocompleteGroup.tsx","../../src/components/autocomplete/AutocompleteItem.tsx","../../src/components/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { ComboboxGroupProps } from '../combobox/ComboboxGroup'\n\n// Same shape as `ComboboxGroupProps` — see `AutocompleteItemProps` for why this is its own\n// named type instead of a re-export.\nexport type AutocompleteGroupProps = ComboboxGroupProps\n\n// `AutocompleteGroup` is never actually mounted — like `ComboboxGroup`, it's read as data by\n// `Autocomplete`, which splits its top-level children into groups (wrapping react-stately\n// `Section` nodes) and bare items. Groups and bare items can be mixed at the top level:\n//\n//   <Autocomplete aria-label=\"Language\">\n//     <AutocompleteGroup label=\"Frontend\">\n//       <AutocompleteItem id=\"html\">HTML</AutocompleteItem>\n//       <AutocompleteItem id=\"css\">CSS</AutocompleteItem>\n//     </AutocompleteGroup>\n//     <AutocompleteItem id=\"python\">Python</AutocompleteItem>\n//   </Autocomplete>\nexport const AutocompleteGroup = (_props: AutocompleteGroupProps): null => null\n\nAutocompleteGroup.displayName = 'AutocompleteGroup'\n","import { ComboboxItemProps } from '../combobox/ComboboxItem'\n\n// Same shape as `ComboboxItemProps` — kept as its own named type (rather than re-exporting\n// `ComboboxItemProps` directly) so `Autocomplete`'s public API doesn't leak an unrelated\n// component's prop type, even though the two are structurally identical under the hood.\nexport type AutocompleteItemProps = ComboboxItemProps\n\n// `AutocompleteItem` is never actually mounted — like `ComboboxItem`, it's read as data by\n// `Autocomplete`, which builds react-aria's listbox collection from each item's `id` and\n// `children`. This keeps the public authoring shape as plain composed JSX:\n//\n//   <Autocomplete aria-label=\"Fruit\">\n//     <AutocompleteItem id=\"apple\">Apple</AutocompleteItem>\n//     <AutocompleteItem id=\"banana\">Banana</AutocompleteItem>\n//   </Autocomplete>\nexport const AutocompleteItem = (_props: AutocompleteItemProps): null => null\n\nAutocompleteItem.displayName = 'AutocompleteItem'\n","import React, {\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps, useButton, useComboBox, useFilter, useOverlayPosition } from 'react-aria'\nimport { Key, useComboBoxState } from 'react-stately'\n\nimport { useFloatingOverlay, useForkedRef, useFormField } from '../../hooks'\nimport {\n  buildEntriesFromChildren,\n  buildEntriesFromItemsDef,\n  ComboboxEntry,\n  comboboxCollectionChildren,\n  getDisabledKeys\n} from '../../utils/comboboxCollection'\nimport {\n  COMBOBOX_MENU_OVERLAY_STYLE,\n  resolveMenuOverlayPositioning,\n  toAriaPlacement\n} from '../../utils/overlayPlacement'\nimport { Portal } from '../portal/Portal'\nimport { ComboboxListBox } from '../combobox/ComboboxListBox'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { MenuItemsDef } from '../menu/MenuItemDef'\nimport { AutocompleteGroup } from './AutocompleteGroup'\nimport { AutocompleteItem } from './AutocompleteItem'\n\n// `useComboBoxState`/`useComboBox` are generic over a `SelectionMode` ('single' | 'multiple')\n// that only affects *types* — actual runtime behavior (whether a selection closes the menu,\n// disallows an empty selection, *and* whether `state.value`/`onChange`'s callback argument come\n// through as a bare `Key` or a `Key[]`) is driven entirely by the `selectionMode` *string* passed\n// at the call site below, not by this type parameter. Fixing the parameter at `'multiple'` here\n// (the more permissive of the two shapes) lets one component serve both modes without a full\n// code fork, but it means the type system's claim that `state.value`/`onChange`'s argument are\n// always `Key[]` is untrustworthy for single-select at runtime — confirmed by testing (the\n// naive `keys[0]` on a bare string key silently returned its first *character*). `asKeyArray`\n// normalizes either shape; every read of `state.value` or `onChange`'s argument goes through it.\nconst toMultiValue = (value: Key | Key[] | null | undefined): Key[] | undefined => {\n  if (value === undefined) return undefined\n  if (value === null) return []\n  return Array.isArray(value) ? value : [value]\n}\n\nconst asKeyArray = (value: unknown): Key[] => {\n  if (value == null) return []\n  return Array.isArray(value) ? value : [value as Key]\n}\n\nexport interface AutocompleteProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the autocomplete, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the autocomplete.\n   */\n  'aria-labelledby'?: string\n  /**\n   * `AutocompleteItem` elements, optionally wrapped in `AutocompleteGroup` — read as data by\n   * `Autocomplete` to build the option list. Not rendered directly. Ignored when `items` is set.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The initial selected option's id(s) (uncontrolled). An array when `multiple` is set.\n   */\n  defaultValue?: Key | Key[] | null\n  /**\n   * Prevents the autocomplete from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the autocomplete.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the search input inside the popover. The toggle — the field's real,\n   * always-focusable surface — has no single labelable element `<label for>` can target (it's a\n   * `role=\"button\"` `<div>`, and the search input itself is hidden until open), so `label` is\n   * associated via `aria-labelledby` on the toggle instead. See FORMS.md's \"role=group\" pattern.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the autocomplete when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Array of item/header/divider definitions for data-driven rendering. When provided, children\n   * are ignored. A `'header'` entry starts a group that all following items join until the next\n   * header or the end of the array. `'divider'` entries are a no-op here — use\n   * `AutocompleteGroup` composition instead if you need finer control over grouping. An entry's\n   * `href`/`onClick` are `Menu`-only and are not read here — use `onChange` to react to the\n   * selection instead.\n   */\n  items?: MenuItemsDef\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the toggle.\n   */\n  label?: ReactNode\n  /**\n   * Allows more than one option to be selected. The toggle shows the single selection's label,\n   * or an \"N selected\" count once more than one is picked. The menu stays open after each\n   * selection, and `Backspace` in the empty search field removes the last selected option.\n   */\n  multiple?: boolean\n  /**\n   * `name` of auto-created hidden input(s), kept in sync with the selection, for native form\n   * submission. Single-select renders one; `multiple` renders one per selected key. Omit to skip\n   * hidden-input creation.\n   */\n  name?: string\n  /**\n   * Text shown in the listbox when no options match the current query.\n   */\n  noResultsText?: ReactNode\n  /**\n   * Callback fired when the selection changes. Receives an array of keys when `multiple` is set.\n   */\n  onChange?: (value: Key | Key[] | null) => void\n  /**\n   * Text shown on the toggle when nothing is selected.\n   */\n  placeholder?: string\n  /**\n   * Placeholder for the search field inside the dropdown.\n   */\n  searchPlaceholder?: string\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the autocomplete when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The selected option's id(s) (controlled). An array when `multiple` is set.\n   */\n  value?: Key | Key[] | null\n}\n\n// `Autocomplete` implements chassis-css's button-trigger combobox — a display-only toggle\n// (not a text input) that opens a `.menu` containing its own search field, matching\n// https://chassis-ui.com/css/docs/forms/combobox/#search-field. This is deliberately NOT the\n// same composition as `Combobox` (whose text input *is* the trigger): here, react-aria's\n// `useComboBox` is given a separate `buttonRef` — a first-class option the hook supports\n// specifically for this \"button opens a listbox with its own input\" shape — so the real\n// `role=\"combobox\"` input lives inside the popover (styled as `.combobox-search-input`) while a\n// toggle serves as the always-visible, always-focusable trigger. The toggle is a `<div\n// role=\"button\">` (via `useButton`'s `elementType: 'div'`, the same pattern `Button.tsx` uses\n// for a non-native trigger) rather than a real `<button>` — an earlier version rendered\n// removable chips inside it for `multiple` mode, which a real (or ARIA) button can't legally\n// contain per axe's `nested-interactive` check; that's now plain \"N selected\" text instead (see\n// `triggerText` below), but the `<div>` stays since reverting buys little and this is proven.\n// `useComboBox`'s own `buttonProps` also sets `excludeFromTabOrder: true` by default — correct\n// for its usual \"auxiliary button beside an always-visible input\" composition, wrong here since\n// the toggle is the *only* focusable surface before opening; overridden back to reachable below.\n// The ref goes to the toggle, the `.combobox` element, as `Combobox`'s goes to its own.\nexport const Autocomplete = forwardRef<HTMLDivElement, AutocompleteProps>(function Autocomplete(\n  {\n    children,\n    className,\n    defaultValue,\n    disabled,\n    help,\n    id,\n    invalid,\n    invalidFeedback,\n    items,\n    label,\n    multiple = false,\n    name,\n    noResultsText = 'No results found',\n    onChange,\n    placeholder,\n    searchPlaceholder,\n    size,\n    valid,\n    validFeedback,\n    value,\n    ...rest\n  },\n  ref\n) {\n  // `entries`/`disabledKeys` only need to change when the data driving them does — without this,\n  // both re-derive from scratch on every render, including every keystroke while typing.\n  const entries = useMemo(\n    () =>\n      items\n        ? buildEntriesFromItemsDef(items)\n        : buildEntriesFromChildren(children, { Group: AutocompleteGroup, Item: AutocompleteItem }),\n    [items, children]\n  )\n  const disabledKeys = useMemo(() => getDisabledKeys(entries), [entries])\n\n  // Case- and accent-insensitive substring matching, mirroring chassis-css's own\n  // always-case-insensitive combobox.js filtering.\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  const state = useComboBoxState<ComboboxEntry, 'multiple'>({\n    children: comboboxCollectionChildren,\n    defaultItems: entries,\n    disabledKeys,\n    defaultFilter: contains,\n    // Cast: the actual runtime string ('single' or 'multiple') is what drives behavior — see the\n    // `toMultiValue` comment above for why the *type* parameter above is fixed at 'multiple'.\n    selectionMode: (multiple ? 'multiple' : 'single') as 'multiple',\n    defaultValue: toMultiValue(defaultValue),\n    value: toMultiValue(value),\n    onChange: (keys) => {\n      const keyArray = asKeyArray(keys)\n      onChange?.(multiple ? keyArray : (keyArray[0] ?? null))\n    },\n    allowsEmptyCollection: true,\n    // Opening is driven only by the toggle (see `buttonProps` below) — there's no input to focus\n    // or type into until the panel is already open, so 'input'/'focus' triggers (the hook's\n    // defaults, meant for `Combobox`'s text-input trigger) don't apply here.\n    menuTrigger: 'manual'\n  })\n\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const forkedTriggerRef = useForkedRef(ref, triggerRef)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listBoxRef = useRef<HTMLElement>(null)\n  const popoverRef = useRef<HTMLDivElement>(null)\n\n  const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n    ariaDescribedBy: rest['aria-describedby'],\n    ariaLabelledBy: rest['aria-labelledby'],\n    help,\n    id,\n    invalid,\n    invalidFeedback,\n    label,\n    valid,\n    validFeedback\n  })\n\n  const { buttonProps, inputProps, listBoxProps } = useComboBox<ComboboxEntry, 'multiple'>(\n    {\n      'aria-label': rest['aria-label'],\n      'aria-labelledby': labelledBy,\n      buttonRef: triggerRef,\n      id: inputId,\n      inputRef,\n      listBoxRef,\n      popoverRef,\n      isDisabled: disabled,\n      placeholder: searchPlaceholder\n    },\n    state\n  )\n\n  // `useComboBox`'s own `buttonProps` sets `excludeFromTabOrder: true` — correct for its\n  // intended composition (an auxiliary icon button *next to* an already-focusable, always-\n  // visible input, e.g. a date picker's calendar-icon trigger), where the input is expected to\n  // be the primary tab stop. That doesn't hold here: the input lives inside the popover, `hidden`\n  // (and so untabbable) until opened, and this toggle is the *only* focusable surface before\n  // that — leaving `excludeFromTabOrder` in place would make the whole control unreachable by\n  // keyboard. Overriding it back to `false` is what actually makes the toggle the tab stop.\n  const { buttonProps: triggerButtonProps } = useButton(\n    { ...buttonProps, elementType: 'div', isDisabled: disabled, excludeFromTabOrder: false },\n    triggerRef\n  )\n\n  // The search field autofocuses once the panel is actually open (chassis-css docs: \"When the\n  // menu opens, focus jumps to the search field\"), and focus returns to the toggle once it\n  // closes — `useComboBox` only knows about `inputRef` as its focus target, and that input is\n  // `hidden` (via the panel) while closed, so without this, closing (via Escape, selection, or\n  // outside click) would drop focus entirely instead of landing back on the toggle.\n  const wasOpen = useRef(state.isOpen)\n  useEffect(() => {\n    if (state.isOpen && !wasOpen.current) {\n      inputRef.current?.focus()\n    } else if (!state.isOpen && wasOpen.current) {\n      triggerRef.current?.focus()\n    }\n    wasOpen.current = state.isOpen\n  }, [state.isOpen])\n\n  // `useComboBox` also runs react-aria's `ariaHideOutside` while open, to keep background\n  // content out of screen readers' way — but it only knows to protect `inputRef`/`popoverRef`\n  // (the elements it was given), not this separate toggle, so the toggle (and, in `multiple`\n  // mode, its chips and their focusable remove buttons) would otherwise get `aria-hidden`\n  // applied to it too while the panel is open. Walking up to `document.body` (rather than\n  // clearing just `triggerRef.current` itself) matters now that the popover portals there too\n  // (see `useFloatingOverlay` below): `ariaHideOutside` hides the *first* ancestor level whose\n  // subtree contains no protected element, which — once the toggle and the popover no longer\n  // share a common non-`body` container — can land on one of the toggle's own ancestors instead\n  // of the toggle element itself. `ariaHideOutside`'s own doc comment says it watches for *new*\n  // elements to hide, not attribute changes on existing ones, so removing it here (in an effect\n  // that necessarily runs after react-aria's own — declared later in this same component)\n  // doesn't get silently re-applied.\n  useEffect(() => {\n    if (!state.isOpen) return\n    let node: HTMLElement | null = triggerRef.current\n    while (node && node !== document.body) {\n      node.removeAttribute('aria-hidden')\n      node = node.parentElement\n    }\n  }, [state.isOpen])\n\n  const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({\n    targetRef: triggerRef,\n    overlayRef: popoverRef,\n    placement: toAriaPlacement('bottom-start'),\n    offset: 2,\n    isOpen: state.isOpen,\n    // Leaving `onClose` unset (`undefined`) doesn't actually disable react-aria's close-on-scroll\n    // listener — only an explicit `null` does (`useCloseOnScroll` only early-returns on\n    // `onClose === null`, not falsy). It happens to be a no-op today only because this toggle is\n    // never registered in react-aria's `useOverlayTrigger`/`onCloseMap` backward-compat map (this\n    // component calls `useComboBox`, not `useOverlayTrigger`) — an incidental, not guaranteed,\n    // safety net. Passing `null` here makes the opt-out explicit, matching `Menu`/`Popover`.\n    onClose: null\n  })\n\n  // Portals the panel to `document.body` (or an enclosing open `<dialog>`) instead of rendering\n  // it inline, matching `Popover`/`Tooltip`/`Combobox` — an inline-rendered panel gets clipped by\n  // any ancestor with `overflow: hidden`/`auto` (a `ModalBody`, a scrollable card, a table cell),\n  // and `Autocomplete` is commonly composed inside exactly those. See\n  // `COMBOBOX_MENU_OVERLAY_STYLE` for the styling this trades away by leaving the DOM position\n  // `.combobox + .menu` relies on.\n  const portalContainer = useFloatingOverlay({\n    close: state.close,\n    isOpen: state.isOpen,\n    triggerRef\n  })\n\n  const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(\n    overlayProps.style,\n    'bottom-start',\n    resolvedPlacement\n  )\n  const overlayStyle: React.CSSProperties = { ...COMBOBOX_MENU_OVERLAY_STYLE, ...menuStyle }\n\n  const removeSelected = (key: Key) => state.selectionManager.toggleSelection(key)\n\n  // Backspace-removes-last-chip only touches the search field's own keydown handling — no\n  // nested interactive element needed for it, unlike a rendered \"remove\" button would be (see\n  // the trigger's `combobox-value` text below for why that path was dropped).\n  const handleSearchKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!multiple || event.key !== 'Backspace' || event.currentTarget.value !== '') return\n    const last = state.selectedItems[state.selectedItems.length - 1]\n    if (last) removeSelected(last.key)\n  }\n\n  const inputHtmlProps = mergeProps(inputProps, {\n    onKeyDown: handleSearchKeyDown\n  }) as InputHTMLAttributes<HTMLInputElement>\n\n  const hasSelection = state.selectedItems.length > 0\n  // Matches chassis-css's own vanilla multi-select combobox: the toggle shows the single\n  // selected item's label, or \"N selected\" once more than one is picked — deliberately plain\n  // text, not per-item chips with their own remove buttons. An earlier version rendered chips\n  // here; that failed a real axe check (\"Interactive controls must not be nested\") because the\n  // toggle is itself `role=\"button\"`, and a button can't correctly contain other focusable\n  // controls. Deselecting an option is still possible by clicking it again in the open list\n  // (native to `useComboBoxState`'s multiple-selection toggle behavior) or via Backspace in the\n  // search field, just not from the toggle itself.\n  const triggerText = !hasSelection\n    ? placeholder\n    : state.selectedItems.length === 1\n      ? (state.selectedItems[0]?.textValue ?? '')\n      : `${state.selectedItems.length} selected`\n\n  return renderFormField({\n    children: (\n      <>\n        <div\n          className={classNames(\n            'form-input',\n            'combobox',\n            { sm: size === 'sm', lg: size === 'lg', disabled },\n            { 'is-invalid': invalid, 'is-valid': valid },\n            className\n          )}\n          {...rest}\n          {...triggerButtonProps}\n          // `useComboBox`'s own `buttonProps` defaults to a generic \"Show suggestions\" label,\n          // since its primary a11y attention goes to the search input — override with the same\n          // label the input gets, so the toggle (the element actually reachable via Tab, since\n          // the input is hidden until open) announces the field's real name, matching the\n          // vanilla docs' own `aria-label=\"Select a country\"` on the toggle button.\n          aria-label={rest['aria-label']}\n          aria-labelledby={labelledBy}\n          aria-describedby={describedBy}\n          aria-invalid={invalid || undefined}\n          ref={forkedTriggerRef}\n        >\n          <span className={classNames('combobox-value', { 'combobox-placeholder': !hasSelection })}>\n            {triggerText}\n          </span>\n        </div>\n        <Portal container={portalContainer}>\n          <div\n            className={classNames('menu', { show: state.isOpen })}\n            data-cx-placement={placementAttr}\n            style={overlayStyle}\n            hidden={!state.isOpen}\n            ref={popoverRef}\n          >\n            <div className=\"combobox-search\">\n              <input\n                autoComplete=\"off\"\n                className=\"form-input combobox-search-input sm\"\n                {...inputHtmlProps}\n                ref={inputRef}\n              />\n            </div>\n            <ComboboxListBox state={state} listBoxProps={listBoxProps} listBoxRef={listBoxRef} />\n            {state.collection.size === 0 && (\n              <div className=\"combobox-no-results\">{noResultsText}</div>\n            )}\n          </div>\n        </Portal>\n        {name &&\n          (multiple ? (\n            asKeyArray(state.value).map((key) => (\n              <input key={key} type=\"hidden\" name={name} value={key} disabled={disabled} />\n            ))\n          ) : (\n            <input\n              type=\"hidden\"\n              name={name}\n              value={asKeyArray(state.value)[0] ?? ''}\n              disabled={disabled}\n            />\n          ))}\n      </>\n    ),\n    help,\n    // No `input` id: the toggle is a `role=\"button\"` `<div>`, not a labelable element, so\n    // `htmlFor` can't target it — `aria-labelledby={labelledBy}` on the toggle above (fed by\n    // `labelId`) is what actually associates the label, matching DatePicker/OtpInput's\n    // `role=\"group\"` pattern in FORMS.md. Passing `inputId` here would point `<label for>` at\n    // the hidden search input instead, which sits inert until the popover opens.\n    ids: { feedback: feedbackId, help: helpId, label: labelId },\n    invalid,\n    invalidFeedback,\n    label,\n    valid,\n    validFeedback\n  })\n})\n\nAutocomplete.displayName = 'Autocomplete'\n"],"mappings":"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"}

package/dist/chunks/avatar-S3dGy6Qc.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{d as e,f as t,g as n,p as r}from"./slot-CNhFZdHF.js";import{t as i}from"./polymorphic-BhGNZQja.js";import{t as a}from"./Link-CZsWCnQb.js";import{t as o}from"./badge-D2oztCvs.js";import{t as s}from"./VisuallyHidden-C2dM7HhC.js";import c,{forwardRef as l}from"react";import u from"classnames";const d=l(({className:e,...t},n)=>{let r=u(`avatar-image`,e);return c.createElement(`img`,{className:r,...t,ref:n})});d.displayName=`AvatarImage`;function f({children:i,className:l,color:f,disabled:p,smooth:m,size:h,component:g,src:_,alt:v=`Profile picture`,href:y,status:b,statusLabel:x,...S},C){let w=r(g,y,`span`),T=n(w,y,S),E=t(T),D=u(`avatar`,f,h,{smooth:m},!E&&{disabled:p},l),O=E?a:w;return c.createElement(O,{className:D,...E&&{component:w},...(E||T===`component`)&&{disabled:p},...e(T,y,`Avatar`),...T===`button`&&{type:`button`},...S,ref:C},_?c.createElement(d,{src:_,alt:v}):i,b&&c.createElement(o,{color:b,circle:!0},c.createElement(s,null,x??b)))}const p=i(f,`Avatar`);function m({children:e,className:t,component:n,items:r,size:i,...a},o){let s=n??`div`,l=u(`avatar-stack`,i,t);return c.createElement(s,{className:l,...a,ref:o},r?.map(({key:e,content:t,...n},r)=>c.createElement(p,{key:e??r,...n},t)),e)}const h=i(m,`AvatarStack`);export{p as n,d as r,h as t};
+//# sourceMappingURL=avatar-S3dGy6Qc.js.map

package/dist/chunks/avatar-S3dGy6Qc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-S3dGy6Qc.js","names":[],"sources":["../../src/components/avatar/AvatarImage.tsx","../../src/components/avatar/Avatar.tsx","../../src/components/avatar/AvatarStack.tsx"],"sourcesContent":["import React, { forwardRef, ImgHTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nexport interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n}\n\nexport const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(\n  ({ className, ...rest }, ref) => {\n    const _className = classNames('avatar-image', className)\n\n    return <img className={_className} {...rest} ref={ref} />\n  }\n)\n\nAvatarImage.displayName = 'AvatarImage'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ExtendedSizing } from '../../types'\nimport { hrefProps, isInteractiveKind, linkElement, resolveLinkKind } from '../../utils/elementKind'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\nimport { Link } from '../link/Link'\nimport { Badge } from '../badge'\nimport { AvatarImage } from './AvatarImage'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ntype AvatarOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Toggle the disabled state for the component. Only applies when `component` is `a` or `button`.\n   */\n  disabled?: boolean\n  /**\n   * Renders the smooth (tinted background) context variant instead of the solid default.\n   */\n  smooth?: boolean\n  /**\n   * Sets the size of the component to one of Chassis component sizes.\n   */\n  size?: ExtendedSizing\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `span`, or `a` when `href` is set. Set explicitly to `button` (or another\n   * interactive element/component) to make a non-link avatar focusable and clickable.\n   */\n  component?: C\n  /**\n   * Image source. When set, renders an `AvatarImage` in place of `children`.\n   */\n  src?: string\n  /**\n   * Alt text for the image rendered when `src` is set.\n   */\n  alt?: string\n  /**\n   * Renders the avatar as a link to this URL. Defaults `component` to `a`. Passed through to a\n   * custom `component` too, regardless of whether it resolves to a native `a`/`button`.\n   */\n  href?: string\n  /**\n   * Renders a status badge in the bottom-end corner, in one of the Chassis themed colors.\n   */\n  status?: ContextColor\n  /**\n   * Accessible label for the status badge, exposed to assistive tech as visually hidden text.\n   * Falls back to the `status` value itself.\n   */\n  statusLabel?: string\n}\n\nexport type AvatarProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  AvatarOwnProps<C>\n>\n\ntype AvatarComponent = (<C extends ElementType = 'span'>(\n  props: AvatarProps<C> & {\n    ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>\n  }\n) => ReactElement | null) & { displayName?: string }\n\nfunction AvatarRender<C extends ElementType = 'span'>(\n  {\n    children,\n    className,\n    color,\n    disabled,\n    smooth,\n    size,\n    component,\n    src,\n    alt = 'Profile picture',\n    href,\n    status,\n    statusLabel,\n    ...rest\n  }: AvatarProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // `href` makes it an `<a>`, unless `component` or `asChild` chose the element (see\n  // `linkElement`).\n  const tag = linkElement(component, href, 'span')\n  // The kind rather than the tag, counting a router link with `href` or `to` as an anchor: under `asChild`, `tag` is a `Slot` standing in for the caller's\n  // element, and a slotted `<a>` is as interactive as `component=\"a\"`.\n  const kind = resolveLinkKind(tag, href, rest)\n  const isInteractive = isInteractiveKind(kind)\n\n  const _className = classNames(\n    'avatar',\n    color,\n    size,\n    { smooth },\n    !isInteractive && { disabled },\n    className\n  )\n\n  const Component = (isInteractive ? Link : tag) as ElementType\n\n  return (\n    <Component\n      className={_className}\n      {...(isInteractive && { component: tag })}\n      // `Link` handles `disabled` on an `<a>` or `<button>`, a router link included; any other\n      // component reference is trusted to. A plain tag has no `disabled` attribute and gets the\n      // class alone.\n      {...((isInteractive || kind === 'component') && { disabled })}\n      {...hrefProps(kind, href, 'Avatar')}\n      {...(kind === 'button' && { type: 'button' })}\n      {...rest}\n      ref={ref}\n    >\n      {src ? <AvatarImage src={src} alt={alt} /> : children}\n      {status && (\n        <Badge color={status} circle>\n          <VisuallyHidden>{statusLabel ?? status}</VisuallyHidden>\n        </Badge>\n      )}\n    </Component>\n  )\n}\n\nexport const Avatar = createPolymorphicComponent<AvatarComponent>(\n  AvatarRender as ForwardRefRenderFunction<Element, AvatarProps<ElementType>>,\n  'Avatar'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ExtendedSizing } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { Avatar } from './Avatar'\n\nexport interface AvatarStackItemDef {\n  /**\n   * React key for the rendered `Avatar`. Falls back to the item's index in `data`.\n   */\n  key?: string | number\n  /**\n   * Image source, rendered via `AvatarImage`.\n   */\n  src?: string\n  /**\n   * Alt text for the image rendered when `src` is set.\n   */\n  alt?: string\n  /**\n   * Renders the avatar as a link to this URL.\n   */\n  href?: string\n  /**\n   * Renders a status badge in one of the Chassis themed colors.\n   */\n  status?: ContextColor\n  /**\n   * Accessible label for the status badge.\n   */\n  statusLabel?: string\n  /**\n   * Content to render when `src` isn't set, e.g. initials or a \"+5\" overflow count.\n   */\n  content?: ReactNode\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: ElementType\n}\n\ntype AvatarStackOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Sets the size of every `Avatar` in the stack to one of Chassis component sizes.\n   */\n  size?: ExtendedSizing\n  /**\n   * Renders a `Avatar` for each item, ahead of any JSX `children` (handy for a trailing \"+N\"\n   * overflow avatar).\n   */\n  items?: AvatarStackItemDef[]\n}\n\nexport type AvatarStackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  AvatarStackOwnProps<C>\n>\n\ntype AvatarStackComponent = (<C extends ElementType = 'div'>(\n  props: AvatarStackProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction AvatarStackRender<C extends ElementType = 'div'>(\n  { children, className, component, items, size, ...rest }: AvatarStackProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = (component ?? 'div') as ElementType\n  const _className = classNames('avatar-stack', size, className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {items?.map(({ key, content, ...item }, index) => (\n        <Avatar key={key ?? index} {...item}>\n          {content}\n        </Avatar>\n      ))}\n      {children}\n    </Component>\n  )\n}\n\nexport const AvatarStack = createPolymorphicComponent<AvatarStackComponent>(\n  AvatarStackRender as ForwardRefRenderFunction<Element, AvatarStackProps<ElementType>>,\n  'AvatarStack'\n)\n"],"mappings":"2UAUA,MAAa,EAAc,GACxB,CAAE,YAAW,GAAG,GAAQ,IAAQ,CAC/B,IAAM,EAAa,EAAW,eAAgB,CAAS,EAEvD,OAAO,EAAA,cAAC,MAAD,CAAK,UAAW,EAAY,GAAI,EAAW,KAAM,CAAA,CAC1D,CACF,EAEA,EAAY,YAAc,cC4D1B,SAAS,EACP,CACE,WACA,YACA,QACA,WACA,SACA,OACA,YACA,MACA,MAAM,kBACN,OACA,SACA,cACA,GAAG,GAEL,EACA,CAGA,IAAM,EAAM,EAAY,EAAW,EAAM,MAAM,EAGzC,EAAO,EAAgB,EAAK,EAAM,CAAI,EACtC,EAAgB,EAAkB,CAAI,EAEtC,EAAa,EACjB,SACA,EACA,EACA,CAAE,QAAO,EACT,CAAC,GAAiB,CAAE,UAAS,EAC7B,CACF,EAEM,EAAa,EAAgB,EAAO,EAE1C,OACE,EAAA,cAAC,EAAD,CACE,UAAW,EACX,GAAK,GAAiB,CAAE,UAAW,CAAI,EAIvC,IAAM,GAAiB,IAAS,cAAgB,CAAE,UAAS,EAC3D,GAAI,EAAU,EAAM,EAAM,QAAQ,EAClC,GAAK,IAAS,UAAY,CAAE,KAAM,QAAS,EAC3C,GAAI,EACC,KAQI,EANR,EAAM,EAAA,cAAC,EAAD,CAAkB,MAAU,KAAM,CAAA,EAAI,EAC5C,GACC,EAAA,cAAC,EAAD,CAAO,MAAO,EAAQ,OAAA,EAEf,EADL,EAAA,cAAC,EAAA,KAAgB,GAAe,CAAuB,CAClD,CAEA,CAEf,CAEA,MAAa,EAAS,EACpB,EACA,QACF,EClEA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,OAAM,GAAG,GAClD,EACA,CACA,IAAM,EAAa,GAAa,MAC1B,EAAa,EAAW,eAAgB,EAAM,CAAS,EAE7D,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAOtC,EANR,GAAO,KAAK,CAAE,MAAK,UAAS,GAAG,GAAQ,IACtC,EAAA,cAAC,EAAD,CAAQ,IAAK,GAAO,EAAO,GAAI,CAEvB,EADL,CACK,CACT,EACA,CACQ,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF"}

package/dist/chunks/badge-D2oztCvs.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import t from"react";import n from"classnames";function r({children:e,className:r,color:i,variant:a,component:o,position:s,circle:c,size:l,...u},d){let f=o??`span`,p=n(`badge`,i,l,{outline:a===`outline`,smooth:a===`smooth`,"position-absolute translate-middle":s,"top-0":s?.includes(`top`),"top-100":s?.includes(`bottom`),"start-100":s?.includes(`end`),"start-0":s?.includes(`start`)},{circle:c},r);return t.createElement(f,{className:p,...u,ref:d},e)}const i=e(r,`Badge`);export{i as t};
+//# sourceMappingURL=badge-D2oztCvs.js.map

package/dist/chunks/badge-D2oztCvs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-D2oztCvs.js","names":[],"sources":["../../src/components/badge/Badge.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ContextStyle, Sizing } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype BadgeOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Sets the context style of the component. `solid`/`basic` render the default look with no extra class.\n   */\n  variant?: ContextStyle\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Position badge in one of the corners of a link or button.\n   */\n  position?: 'top-start' | 'top-end' | 'bottom-end' | 'bottom-start'\n  /**\n   * Select the shape of the component.\n   */\n  circle?: boolean\n  /**\n   * Sets the size of the component to one of Chassis component sizes.\n   */\n  size?: Sizing\n}\n\nexport type BadgeProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  BadgeOwnProps<C>\n>\n\ntype BadgeComponent = (<C extends ElementType = 'span'>(\n  props: BadgeProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction BadgeRender<C extends ElementType = 'span'>(\n  {\n    children,\n    className,\n    color,\n    variant,\n    component,\n    position,\n    circle,\n    size,\n    ...rest\n  }: BadgeProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n\n  const _className = classNames(\n    'badge',\n    color,\n    size,\n    {\n      outline: variant === 'outline',\n      smooth: variant === 'smooth',\n      'position-absolute translate-middle': position,\n      'top-0': position?.includes('top'),\n      'top-100': position?.includes('bottom'),\n      'start-100': position?.includes('end'),\n      'start-0': position?.includes('start')\n    },\n    { circle },\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Badge = createPolymorphicComponent<BadgeComponent>(\n  BadgeRender as ForwardRefRenderFunction<Element, BadgeProps<ElementType>>,\n  'Badge'\n)\n"],"mappings":"8HAkDA,SAAS,EACP,CACE,WACA,YACA,QACA,UACA,YACA,WACA,SACA,OACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,OAEzB,EAAa,EACjB,QACA,EACA,EACA,CACE,QAAS,IAAY,UACrB,OAAQ,IAAY,SACpB,qCAAsC,EACtC,QAAS,GAAU,SAAS,KAAK,EACjC,UAAW,GAAU,SAAS,QAAQ,EACtC,YAAa,GAAU,SAAS,KAAK,EACrC,UAAW,GAAU,SAAS,OAAO,CACvC,EACA,CAAE,QAAO,EACT,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAQ,EACnB,EACA,OACF"}

package/dist/chunks/breadcrumb-s6J9itez.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./Link-CZsWCnQb.js";import t,{forwardRef as n}from"react";import r from"classnames";const i=n(({children:n,active:i,className:a,href:o,...s},c)=>{let l=r(`breadcrumb-item`,{active:i},a);return t.createElement(`li`,{className:l,...i&&{"aria-current":`page`},...s,ref:c},o?t.createElement(e,{href:o},n):n)});i.displayName=`BreadcrumbItem`;const a=n(({"aria-label":e=`breadcrumb`,children:n,className:a,items:o,...s},c)=>{let l=r(`breadcrumb`,a),u=o?o.map((e,n)=>{let r=n===o.length-1;return t.createElement(i,{key:n,active:r,href:r?void 0:e.href},e.label)}):null;return t.createElement(`nav`,{"aria-label":e},t.createElement(`ol`,{className:l,...s,ref:c},u??n))});a.displayName=`Breadcrumb`;export{i as n,a as t};
+//# sourceMappingURL=breadcrumb-s6J9itez.js.map

package/dist/chunks/breadcrumb-s6J9itez.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-s6J9itez.js","names":[],"sources":["../../src/components/breadcrumb/BreadcrumbItem.tsx","../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nimport { Link } from '../link/Link'\n\nexport interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {\n  /**\n   * Toggle the active state for the component.\n   */\n  active?: boolean\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * The `href` attribute for the inner `<Link>` component.\n   */\n  href?: string\n}\n\nexport const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ children, active, className, href, ...rest }, ref) => {\n    const _className = classNames(\n      'breadcrumb-item',\n      {\n        active: active\n      },\n      className\n    )\n    return (\n      <li className={_className} {...(active && { 'aria-current': 'page' })} {...rest} ref={ref}>\n        {href ? <Link href={href}>{children}</Link> : children}\n      </li>\n    )\n  }\n)\n\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nimport { BreadcrumbItem } from './BreadcrumbItem'\n\nexport interface BreadcrumbItemDef {\n  /**\n   * Label for the breadcrumb item.\n   */\n  label: React.ReactNode\n  /**\n   * URL for the breadcrumb link. The last item in the array is always rendered as active (no link needed).\n   */\n  href?: string\n}\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLOListElement> {\n  /**\n   * Accessible name of the wrapping `<nav>` landmark. Defaults to the English `'breadcrumb'`;\n   * override it to translate the landmark, or to tell two breadcrumb trails on the same page\n   * apart (landmarks of the same role need distinct names to be distinguishable in a screen\n   * reader's landmark list).\n   *\n   * @default 'breadcrumb'\n   */\n  'aria-label'?: string\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Array of breadcrumb items for data-driven rendering. The last item is automatically marked active.\n   * When provided, children are ignored.\n   */\n  items?: BreadcrumbItemDef[]\n}\n\nexport const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n  ({ 'aria-label': ariaLabel = 'breadcrumb', children, className, items, ...rest }, ref) => {\n    const _className = classNames('breadcrumb', className)\n\n    const autoContent = items\n      ? items.map((item, idx) => {\n          const isLast = idx === items.length - 1\n          return (\n            <BreadcrumbItem\n              // eslint-disable-next-line react/no-array-index-key\n              key={idx}\n              active={isLast}\n              href={isLast ? undefined : item.href}\n            >\n              {item.label}\n            </BreadcrumbItem>\n          )\n        })\n      : null\n\n    return (\n      <nav aria-label={ariaLabel}>\n        <ol className={_className} {...rest} ref={ref}>\n          {autoContent ?? children}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nBreadcrumb.displayName = 'Breadcrumb'\n"],"mappings":"wIAoBA,MAAa,EAAiB,GAC3B,CAAE,WAAU,SAAQ,YAAW,OAAM,GAAG,GAAQ,IAAQ,CACvD,IAAM,EAAa,EACjB,kBACA,CACU,QACV,EACA,CACF,EACA,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAK,GAAU,CAAE,eAAgB,MAAO,EAAI,GAAI,EAAW,KAElF,EADD,EAAO,EAAA,cAAC,EAAD,CAAY,MAAsB,EAAf,CAAe,EAAI,CAC5C,CAER,CACF,EAEA,EAAe,YAAc,iBCA7B,MAAa,EAAa,GACvB,CAAE,aAAc,EAAY,aAAc,WAAU,YAAW,QAAO,GAAG,GAAQ,IAAQ,CACxF,IAAM,EAAa,EAAW,aAAc,CAAS,EAE/C,EAAc,EAChB,EAAM,KAAK,EAAM,IAAQ,CACvB,IAAM,EAAS,IAAQ,EAAM,OAAS,EACtC,OACE,EAAA,cAAC,EAAD,CAEE,IAAK,EACL,OAAQ,EACR,KAAM,EAAS,IAAA,GAAY,EAAK,IAGlB,EADb,EAAK,KACQ,CAEpB,CAAC,EACD,KAEJ,OACE,EAAA,cAAC,MAAD,CAAK,aAAY,CAIZ,EAHH,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,KAEtC,EADD,GAAe,CACd,CACD,CAET,CACF,EAEA,EAAW,YAAc"}

package/dist/chunks/breakpoints-CJ-498B7.d.ts

@@ -0,0 +1,7 @@
+//#region src/utils/breakpoints.d.ts
+type Span = 'auto' | number | string | boolean;
+type WidthSpan = 'auto' | number | string | boolean;
+type FlexDirection = 'row' | 'column';
+//#endregion
+export { Span as n, WidthSpan as r, FlexDirection as t };
+//# sourceMappingURL=breakpoints-CJ-498B7.d.ts.map

package/dist/chunks/breakpoints-o_2Ev7ir.js

@@ -0,0 +1,2 @@
+const e=[`sm`,`md`,`lg`,`xl`,`2xl`];function t(t,n,r){let i=r?e.filter(e=>r[e]).flatMap(e=>t(r[e],`${e}:`)):[];return[...t(n,``),...i]}const n=(e,t)=>[e&&`${t}flex-${e}`];export{n,t};
+//# sourceMappingURL=breakpoints-o_2Ev7ir.js.map

package/dist/chunks/breakpoints-o_2Ev7ir.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints-o_2Ev7ir.js","names":[],"sources":["../../src/utils/breakpoints.ts"],"sourcesContent":["import { Breakpoint } from '../types'\n\n// Mobile-first ascending order. Every responsive layout prop (`Flex`/`Stack`/`Row`/`Col`/\n// `Skeleton`'s `responsive`) keys its overrides by these literal chassis-css breakpoint names.\nexport const BREAKPOINTS: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl']\n\n// A column span: a track count, `'auto'` for a natural-width track, or `true` for the bare (no\n// explicit width) case. `Col` maps it to the `col-{n}` / `col` classes of chassis-css's flexbox\n// grid, and the type goes when `Col` does.\nexport type Span = 'auto' | number | string | boolean\n\n// A width in twelfths of the parent: a count, `'auto'` for the natural width, or `true` to fill\n// the rest of a flex row. `Skeleton` maps it to chassis-css's width utilities. The same values as\n// `Span`, kept apart so the skeleton doesn't depend on a type of the flexbox grid.\nexport type WidthSpan = 'auto' | number | string | boolean\n\n/**\n * Builds the class list for a component's base layout plus per-breakpoint overrides supplied via\n * a `responsive` prop — the pattern shared by `Flex`, `Stack`, and (from Phase 2) `Row`/`Col`.\n *\n * `toClassNames` maps one breakpoint's layout value to class name fragments for a given prefix\n * (`''` for the base/unprefixed case, `` `${breakpoint}:` `` otherwise). Falsy entries in its\n * return value are fine — `classnames` drops them at the call site — so fields the layout object\n * doesn't set can just map to `undefined`/`false`.\n */\nexport function buildResponsiveClassNames<TLayout>(\n  toClassNames: (layout: TLayout, prefix: string) => Array<string | false | null | undefined>,\n  base: TLayout,\n  responsive?: Partial<Record<Breakpoint, TLayout>>\n): Array<string | false | null | undefined> {\n  const responsiveClassNames = responsive\n    ? BREAKPOINTS.filter((bp) => responsive[bp]).flatMap((bp) =>\n        toClassNames(responsive[bp] as TLayout, `${bp}:`)\n      )\n    : []\n\n  return [...toClassNames(base, ''), ...responsiveClassNames]\n}\n\nexport type FlexDirection = 'row' | 'column'\n\n// A `buildResponsiveClassNames` `toClassNames` fn for the `flex-row`/`flex-column` direction\n// toggle shared by `Card` and `CardBody`, both of which map a `direction` prop to the same\n// chassis-css class.\nexport const flexDirectionClassNames = (\n  direction: FlexDirection | undefined,\n  prefix: string\n): Array<string | false | undefined> => [direction && `${prefix}flex-${direction}`]\n"],"mappings":"AAIA,MAAa,EAA4B,CAAC,KAAM,KAAM,KAAM,KAAM,KAAK,EAqBvE,SAAgB,EACd,EACA,EACA,EAC0C,CAC1C,IAAM,EAAuB,EACzB,EAAY,OAAQ,GAAO,EAAW,EAAG,CAAC,CAAC,QAAS,GAClD,EAAa,EAAW,GAAgB,GAAG,EAAG,EAAE,CAClD,EACA,CAAC,EAEL,MAAO,CAAC,GAAG,EAAa,EAAM,EAAE,EAAG,GAAG,CAAoB,CAC5D,CAOA,MAAa,GACX,EACA,IACsC,CAAC,GAAa,GAAG,EAAO,OAAO,GAAW"}

package/dist/chunks/button-group-BGppPrIv.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import t from"react";import n from"classnames";function r({children:e,className:r,component:i,size:a,vertical:o,...s},c){let l=i??`div`,u=n(o?`button-group-vertical`:`button-group`,a,r);return t.createElement(l,{className:u,...s,ref:c},e)}const i=e(r,`ButtonGroup`);function a({children:e,className:r,component:i,...a},o){let s=i??`div`,c=n(`button-toolbar`,r);return t.createElement(s,{className:c,...a,ref:o},e)}const o=e(a,`ButtonToolbar`);export{i as n,o as t};
+//# sourceMappingURL=button-group-BGppPrIv.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-BGppPrIv.js","names":[],"sources":["../../src/components/button-group/ButtonGroup.tsx","../../src/components/button-group/ButtonToolbar.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ButtonGroupOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Create a set of buttons that appear vertically stacked rather than horizontally, with the\n   * `.button-group-vertical` class in place of `.button-group`. Split button dropdowns are not\n   * supported here, and `size` has no effect: chassis-css sizes the buttons of a horizontal group\n   * only, so size the buttons of a vertical one themselves.\n   */\n  vertical?: boolean\n}\n\nexport type ButtonGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ButtonGroupOwnProps<C>\n>\n\ntype ButtonGroupComponent = (<C extends ElementType = 'div'>(\n  props: ButtonGroupProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ButtonGroupRender<C extends ElementType = 'div'>(\n  { children, className, component, size, vertical, ...rest }: ButtonGroupProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  // chassis-css stacks a group with `.button-group-vertical` in place of `.button-group`: the two\n  // share the base rules, and the horizontal ones (the overlap of the borders, the corners) hang\n  // on `.button-group` alone.\n  const _className = classNames(\n    vertical ? 'button-group-vertical' : 'button-group',\n    size,\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ButtonGroup = createPolymorphicComponent<ButtonGroupComponent>(\n  ButtonGroupRender as ForwardRefRenderFunction<Element, ButtonGroupProps<ElementType>>,\n  'ButtonGroup'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ButtonToolbarOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type ButtonToolbarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ButtonToolbarOwnProps<C>\n>\n\ntype ButtonToolbarComponent = (<C extends ElementType = 'div'>(\n  props: ButtonToolbarProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ButtonToolbarRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: ButtonToolbarProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('button-toolbar', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ButtonToolbar = createPolymorphicComponent<ButtonToolbarComponent>(\n  ButtonToolbarRender as ForwardRefRenderFunction<Element, ButtonToolbarProps<ElementType>>,\n  'ButtonToolbar'\n)\n"],"mappings":"8HAwCA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,OAAM,WAAU,GAAG,GACrD,EACA,CACA,IAAM,EAAY,GAAa,MAIzB,EAAa,EACjB,EAAW,wBAA0B,eACrC,EACA,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF,ECnCA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,iBAAkB,CAAS,EAEzD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAgB,EAC3B,EACA,eACF"}