@mortenbrudvik/waveui 0.9.0 → 0.11.0

package/dist/components/input/Calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.mjs","names":["useId","_Fragment","useId$1","React","NAV_BUTTON_CLASSES","HEADING_BUTTON_CLASSES","FOOTER_BUTTON_CLASSES","DEFAULT_WORK_WEEK_DAYS","toWeeks","weeks","i","days","inDecadeGrid","year","decade","clampYear","min","max","CalendarView","todayProp","Heading","today","startOfDay","viewState","setView","view","showMonthPicker","viewMonth","setViewMonth","startOfMonth","clampDate","value","initialVisibleDate","minDate","maxDate","focusedDay","setFocusedDay","monthViewYear","setMonthViewYear","focusedMonth","setFocusedMonth","setDecade","getDecadeStart","focusedYear","setFocusedYear","gridRef","focusGridRef","focusRequest","setFocusRequest","gridId","hintId","valueIso","formatISODate","seenValueIso","setSeenValueIso","isSameMonth","isUnavailable","isDayUnavailable","date","disabledDates","selectedDays","getSelectionRange","selectionRange","firstDayOfWeek","workWeekDays","getCalendarDays","inView","inGrid","clampedToday","firstInRange","focusTarget","focusIso","moveFocus","target","next","navigateMonth","nextView","addMonths","delta","moved","handleDayFocus","isSameDay","day","minMonth","maxMonth","clampMonth","month","inMonthView","firstMonthInRange","makeDate","monthTarget","moveMonthFocus","navigateYear","nextYear","firstYearInRange","yearTarget","moveYearFocus","preferredDecade","navigateDecade","nextDecade","changeView","goToToday","request","showMonths","showYears","pickMonth","monthsAway","pickYear","yearDate","handleEscape","event","isOwnEvent","periodKey","cellKey","headerRef","viewHadFocusRef","onFocusIn","previousViewRef","viewChanged","requested","grid","active","lost","button","previousLabel","nextLabel","previousDisabled","nextDisabled","navigate","headingText","labels","addDays","formatMonthYear","locale","isYearOutOfRange","formatYear","formatDecade","todayOutOfRange","isDateInRange","headingButtonTarget","hint","CalendarDayGrid","months","getYearMonths","CalendarPickerGrid","formatMonthShort","isMonthOutOfRange","direction","partClassNames","years","getDecadeYears","Fragment","cn","focusableDisabledProps","preventIfDisabled","focusRing","disabledStyles","ChevronLeftIcon","headingId","ChevronRightIcon","showGoToToday","onClose","closeLabel","CALENDAR_PART_CLASS_NAMES","calendarClassNames","Calendar","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","setValue","useControllable","defaultValue","onValueChange","commit","normalized","isClient","useIsClient","isValidLocaleTag","warnOnce","hasDate","field","useFieldContext","fieldAriaRequired","fieldDescribedBy","fieldProps","useFieldControl","required","isRequired","requiredHintId","showRequiredHint","rootRef","mergedRef","useMergedRefs","ref","form","focusTabStop","joinIds","className","HiddenInput"],"sources":["../../../src/components/input/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DayOfWeek, FirstWeekOfYear } from '../../lib/types';\nimport { cn } from '../../lib/cn';\nimport { focusableDisabledProps, joinIds, preventIfDisabled } from '../../lib/aria';\nimport { calendarClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../lib/icons';\nimport { disabledStyles, focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { makeDate } from '../../lib/date';\nimport {\n  CalendarDayGrid,\n  CalendarPickerGrid,\n  type CalendarDayGridPartClassNames,\n} from './Calendar.views';\nimport {\n  addDays,\n  addMonths,\n  clampDate,\n  formatDecade,\n  formatISODate,\n  formatMonthShort,\n  formatMonthYear,\n  formatYear,\n  getCalendarDays,\n  getDecadeStart,\n  getDecadeYears,\n  getSelectionRange,\n  getYearMonths,\n  isDateInRange,\n  isDayUnavailable,\n  isMonthOutOfRange,\n  isSameDay,\n  isSameMonth,\n  isValidLocaleTag,\n  isYearOutOfRange,\n  startOfDay,\n  startOfMonth,\n  type CalendarSelectionRange,\n} from './dateUtils';\n\n/**\n * The built-in texts of the calendar, for localization: the names of the navigation buttons in\n * the day, month and year views, the hints of the heading button, the \"Go to today\" button, the\n * week-number column and the marked days, and (Calendar only) the required hint. Each member is\n * optional and falls back to its English default. Month and weekday names and the day labels follow\n * `locale`. DatePicker's labels extend this type.\n */\nexport interface CalendarLabels {\n  /** Name of the previous-month button.\n   * @default 'Previous month'\n   */\n  previousMonth?: string;\n  /** Name of the next-month button.\n   * @default 'Next month'\n   */\n  nextMonth?: string;\n  /** Name of the previous-year button of the month view.\n   * @default 'Previous year'\n   */\n  previousYear?: string;\n  /** Name of the next-year button of the month view.\n   * @default 'Next year'\n   */\n  nextYear?: string;\n  /** Name of the previous-decade button of the year view.\n   * @default 'Previous decade'\n   */\n  previousDecade?: string;\n  /** Name of the next-decade button of the year view.\n   * @default 'Next decade'\n   */\n  nextDecade?: string;\n  /** Description of the heading button that shows the month view.\n   * @default 'Choose a month'\n   */\n  chooseMonth?: string;\n  /** Description of the heading button that shows the year view.\n   * @default 'Choose a year'\n   */\n  chooseYear?: string;\n  /** Name of the \"Go to today\" button.\n   * @default 'Go to today'\n   */\n  goToToday?: string;\n  /** Hidden text of the week-number column header.\n   * @default 'Week'\n   */\n  week?: string;\n  /** Name of a week-number row header.\n   * @default (week) => `Week ${week}`\n   */\n  weekNumber?: (week: number) => string;\n  /** Name of a marked day, built from its default name.\n   * @default (dayLabel) => `${dayLabel}, marked`\n   */\n  markedDay?: (dayLabel: string) => string;\n  /**\n   * Said in the calendar's description while it is required (`required`, a required Field, or a\n   * consumer `aria-required` alone), since its role cannot carry `aria-required`.\n   * @default 'Required'\n   */\n  required?: string;\n}\n\n/** Second argument of `Calendar`'s `onValueChange`. */\nexport interface CalendarValueChangeDetails {\n  /**\n   * The selected days in order (local midnight): the picked day, or with `selectionRange` its\n   * week, work week or month (the days that are not available left out); `[]` for `null`.\n   */\n  range: Date[];\n}\n\n/** Properties for the Calendar component. */\nexport interface CalendarProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled selected day (`null` for none). */\n  value?: Date | null;\n  /**\n   * Initial selected day for uncontrolled usage.\n   * @default null\n   */\n  defaultValue?: Date | null;\n  /**\n   * Called with the new day (local midnight) when the selected day changes: a pick of another day\n   * or a form reset (Fluent's `onSelectDate` fires on every pick). Picking the selected day again\n   * does nothing. WaveUI always passes `details`.\n   */\n  onValueChange?: (date: Date | null, details?: CalendarValueChangeDetails) => void;\n  /** Earliest available day (the whole day is included). */\n  minDate?: Date;\n  /** Latest available day (the whole day is included). */\n  maxDate?: Date;\n  /** Returns `true` for days that cannot be picked (called with local-midnight dates). */\n  disabledDates?: (date: Date) => boolean;\n  /**\n   * First day of the week (0 = Sunday, 1 = Monday, etc.).\n   * @default 0\n   */\n  firstDayOfWeek?: DayOfWeek;\n  /**\n   * BCP 47 locale of the month text, the weekday names and the day labels. Pass it when rendering\n   * on the server, so the server and the browser render the same text. The grid is Gregorian, as\n   * in DatePicker. A tag `Intl` rejects (the POSIX `de_DE`, a typo) falls back to the runtime\n   * default locale (development warning).\n   * @default the runtime default locale\n   */\n  locale?: string;\n  /**\n   * The day marked as today (`aria-current=\"date\"`), and the tab stop when no day is selected in\n   * the shown month. Without it, the server HTML and the hydration render mark no day and the\n   * browser applies the current date once hydrated: pass it when rendering on the server, so the\n   * mark is in the HTML.\n   * @default the current date (applied after hydration when not passed)\n   */\n  today?: Date;\n  /**\n   * The month shown first when there is no value (Fluent's `initialPickerDate`), clamped into\n   * `minDate`/`maxDate` like the value's month and today's.\n   * @default today's month\n   */\n  initialVisibleDate?: Date;\n  /**\n   * Turns the month text into a button that shows the month view (the 12 months of the year),\n   * whose heading, the year, is a button to the year view (a decade with the year before and\n   * after it). A picked year shows its months and a picked month its days; Escape goes back a\n   * level to the period shown before. Fluent's `isMonthPickerVisible`, here as a drill-down in one\n   * pane.\n   * @default true\n   */\n  showMonthPicker?: boolean;\n  /**\n   * Adds a leading column of week numbers: a row header per week (`Week 23`, from\n   * `labels.weekNumber`) under a header cell named `labels.week`. The numbers follow\n   * `firstDayOfWeek` and `firstWeekOfYear`; the column is not focusable and the keys skip it.\n   * @default false\n   */\n  showWeekNumbers?: boolean;\n  /**\n   * Which week is week 1 of a year. ISO 8601 is `'first-four-day-week'` with `firstDayOfWeek={1}`.\n   * @default 'first-day'\n   */\n  firstWeekOfYear?: FirstWeekOfYear;\n  /**\n   * Adds a footer button that shows today's month in the day view and focuses today without\n   * selecting it. It is disabled while today is outside `minDate`/`maxDate`.\n   * @default false\n   */\n  showGoToToday?: boolean;\n  /**\n   * Days that draw a dot under the number (in the text colour of the day) and say \"marked\" in\n   * their name (`labels.markedDay`); also `data-marked` on the day's button (Fluent's\n   * `getMarkedDays`). Called with local-midnight dates.\n   */\n  markedDates?: (date: Date) => boolean;\n  /**\n   * Replaces the content inside a day's button, which keeps its role, state and keys;\n   * `defaultContent` is the day number. The content must be non-interactive (no buttons or links),\n   * and the button's name does not follow it: set the name with `dayLabel`. The marked-day dot is\n   * drawn next to the content.\n   */\n  renderDay?: (date: Date, defaultContent: React.ReactNode) => React.ReactNode;\n  /**\n   * The accessible name of a day, from its default name (the date in words, `Monday, June 2,\n   * 2025`, with `labels.markedDay` applied for a marked day). Use it to say what `renderDay` shows.\n   */\n  dayLabel?: (date: Date, defaultLabel: string) => string;\n  /**\n   * What a pick selects: the day, or its week, work week (`workWeekDays`) or month. The value is\n   * the picked day, `details.range` the selected days, and every day of the range is\n   * `aria-selected`, `aria-pressed` and `data-selected`. Days that are not available are left\n   * out. Fluent's `dateRangeType`.\n   * @default 'day'\n   */\n  selectionRange?: CalendarSelectionRange;\n  /**\n   * The days of `selectionRange=\"work-week\"` (0 = Sunday), within the week that starts on\n   * `firstDayOfWeek`.\n   * @default [1, 2, 3, 4, 5]\n   */\n  workWeekDays?: readonly DayOfWeek[];\n  /**\n   * Names of the navigation buttons, the heading button's hints, the \"Go to today\" button, the\n   * week-number column, the marked days and the required hint, for localization.\n   */\n  labels?: CalendarLabels;\n  /** Form field name: the day is submitted as ISO `yyyy-mm-dd` (hidden input). */\n  name?: string;\n  /** Id of the `<form>` the value belongs to, when the calendar is outside it. */\n  form?: string;\n  /**\n   * Blocks form submission while no day is selected; the form's report focuses the calendar's\n   * tab stop. Said in the description (`labels.required`), as the group cannot carry\n   * `aria-required`. A consumer `aria-required` alone also shows that hint (assistive technology\n   * only: it does not block submission).\n   */\n  required?: boolean;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Internal: the stable classes of a calendar view's parts, passed in by the component that\n * renders the view (DatePicker passes its own).\n */\nexport interface CalendarViewPartClassNames extends CalendarDayGridPartClassNames {\n  /** On the row of the navigation buttons and the heading. */\n  header?: string;\n  /** On the previous button (previous month, year or decade). */\n  previousMonthButton?: string;\n  /** On the heading (the month, the year or the decade). */\n  heading?: string;\n  /** On the heading's button, which shows the month or the year view. */\n  headingButton?: string;\n  /** On the next button (next month, year or decade). */\n  nextMonthButton?: string;\n  /** On each month button of the month view. */\n  month?: string;\n  /** On each year button of the year view. */\n  year?: string;\n  /** On the row of the footer buttons. */\n  footer?: string;\n  /** On the \"Go to today\" button. */\n  todayButton?: string;\n  /** On the \"Close\" button. */\n  closeButton?: string;\n}\n\n/** Internal props of {@link CalendarView}. */\nexport interface CalendarViewProps {\n  /** The selected day, or `null` for none. */\n  value: Date | null;\n  /** Called with an available day the user picks (click, Enter or Space on a day button). */\n  onPick: (date: Date) => void;\n  /** Earliest available day (the whole day is included). */\n  minDate?: Date;\n  /** Latest available day (the whole day is included). */\n  maxDate?: Date;\n  /** Returns `true` for days that cannot be picked (called with local-midnight dates). */\n  disabledDates?: (date: Date) => boolean;\n  /** First day of the week (0 = Sunday). */\n  firstDayOfWeek: DayOfWeek;\n  /** BCP 47 locale of the heading, the weekday names and the day labels. */\n  locale?: string;\n  /**\n   * The day marked as today; `null` while it is unknown (the server HTML and the hydration render\n   * of a Calendar without `today`): no day is marked, and the tab stop skips today.\n   * @default the current date\n   */\n  today?: Date | null;\n  /** The month shown first when there is no value (else today's, else the clock's). */\n  initialVisibleDate?: Date;\n  /**\n   * The heading is a button that shows the month view, whose heading shows the year view.\n   * @default true\n   */\n  showMonthPicker?: boolean;\n  /** Adds a leading column of week numbers to the day view. @default false */\n  showWeekNumbers?: boolean;\n  /** Which week is week 1 of a year. @default 'first-day' */\n  firstWeekOfYear?: FirstWeekOfYear;\n  /** Returns `true` for days that draw a dot and are named \"marked\". */\n  markedDates?: (date: Date) => boolean;\n  /** Replaces the content of a day button. */\n  renderDay?: (date: Date, defaultContent: React.ReactNode) => React.ReactNode;\n  /** The accessible name of a day, from its default name. */\n  dayLabel?: (date: Date, defaultLabel: string) => string;\n  /**\n   * What a pick selects (the day, or its week, work week or month): the days drawn selected. The\n   * parent receives only the picked day.\n   * @default 'day'\n   */\n  selectionRange?: CalendarSelectionRange;\n  /** The days of the `'work-week'` range. @default [1, 2, 3, 4, 5] */\n  workWeekDays?: readonly DayOfWeek[];\n  /** Adds a footer button that shows today's month and focuses today. @default false */\n  showGoToToday?: boolean;\n  /** Adds a footer \"Close\" button that calls this (DatePicker closes its dialog). */\n  onClose?: () => void;\n  /** Name of the \"Close\" button. @default 'Close' */\n  closeLabel?: string;\n  /** Names of the navigation buttons, the heading button's hints and the footer buttons. */\n  labels?: CalendarLabels;\n  /** Element of the heading: `h2` in DatePicker's dialog (its title), else `div`. */\n  headingAs: 'h2' | 'div';\n  /** Id of the heading (it labels the grid; DatePicker also labels its dialog with it). */\n  headingId: string;\n  /** Stable classes of the view's parts. */\n  partClassNames?: CalendarViewPartClassNames;\n}\n\n// Every button sets its own padding and background (C-NATIVE): an app-wide `button` rule would\n// otherwise pad and fill them.\nconst NAV_BUTTON_CLASSES =\n  'flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover';\n\n// The heading's button keeps the heading's text style, set on itself (C-NATIVE).\nconst HEADING_BUTTON_CLASSES =\n  'flex h-8 items-center justify-center rounded bg-transparent p-0 px-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover';\n\n// The footer's text buttons (C-NATIVE: their own padding and background).\nconst FOOTER_BUTTON_CLASSES =\n  'flex h-8 items-center justify-center rounded bg-transparent p-0 px-3 text-body-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover';\n\n/** The days of `'work-week'` unless `workWeekDays` says otherwise (Monday to Friday). */\nconst DEFAULT_WORK_WEEK_DAYS: readonly DayOfWeek[] = [1, 2, 3, 4, 5];\n\n/** The 42 grid days as 6 weeks. */\nfunction toWeeks(days: Date[]): Date[][] {\n  const weeks: Date[][] = [];\n  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));\n  return weeks;\n}\n\n/** The years of the year view of the decade starting at `decade` (the year before and after it). */\nfunction inDecadeGrid(year: number, decade: number): boolean {\n  return year >= decade - 1 && year <= decade + 10;\n}\n\n/** `year` clamped into the years of `[min, max]` (as `clampDate` clamps a day). */\nfunction clampYear(year: number, min?: Date, max?: Date): number {\n  if (min && year < min.getFullYear()) return min.getFullYear();\n  if (max && year > max.getFullYear()) return max.getFullYear();\n  return year;\n}\n\n/** Which grid a calendar view shows. */\ntype CalendarViewKind = 'day' | 'month' | 'year';\n\n/**\n * Internal: the header (the previous button, the heading, the next button), the grid and the\n * optional footer (Go to today, Close) of a calendar, in one of three views: the days of a month, the months of a year (the month view) and\n * the years of a decade (the year view). It renders no element of its own (a fragment). It opens\n * on the day view of the month of `value`, else `initialVisibleDate`'s, else today's, clamped into\n * `minDate`/`maxDate`, and keeps that month until navigated or until `value` changes to a day of\n * another month, whose month it then shows (DatePicker mounts it with each opening of its dialog).\n *\n * With `showMonthPicker`, the day view's heading is a button to the month view, and the month\n * view's heading a button to the year view; a picked year shows its months and a picked month its\n * days. Escape in the year and month views goes back one level to the period shown before (and is\n * consumed, also on the footer's buttons). Each view change moves focus into the new grid in the\n * same commit. The day view can add a week-number column, a dot and a name suffix for marked\n * days, custom day content, and a range around the picked day (`selectionRange`); the footer has\n * \"Go to today\" (`showGoToToday`) and a Close button (`onClose`).\n */\nexport const CalendarView = ({\n  value,\n  onPick,\n  minDate,\n  maxDate,\n  disabledDates,\n  firstDayOfWeek,\n  locale,\n  today: todayProp,\n  initialVisibleDate,\n  showMonthPicker = true,\n  showWeekNumbers,\n  firstWeekOfYear,\n  markedDates,\n  renderDay,\n  dayLabel,\n  selectionRange = 'day',\n  workWeekDays = DEFAULT_WORK_WEEK_DAYS,\n  showGoToToday = false,\n  onClose,\n  closeLabel,\n  labels,\n  headingAs: Heading,\n  headingId,\n  partClassNames,\n}: CalendarViewProps) => {\n  const today =\n    todayProp === undefined ? startOfDay(new Date()) : todayProp && startOfDay(todayProp);\n  const [viewState, setView] = React.useState<CalendarViewKind>('day');\n  // Without the month picker the headings are no buttons: only the day view exists.\n  const view = showMonthPicker ? viewState : 'day';\n  if (viewState !== view) setView(view);\n  // Day view: the shown month and the day moved to.\n  const [viewMonth, setViewMonth] = React.useState<Date>(() =>\n    // Without a value, an `initialVisibleDate` or a known today the month comes from the clock:\n    // on the server, the server's (the Calendar warns after such a hydration render).\n    startOfMonth(clampDate(value ?? initialVisibleDate ?? today ?? new Date(), minDate, maxDate)),\n  );\n  const [focusedDay, setFocusedDay] = React.useState<Date | null>(null);\n  // Month view: the shown year and the month moved to. Year view: the first year of the shown\n  // decade and the year moved to. Each view keeps its state while a higher view is shown, so\n  // Escape shows the period it showed before.\n  const [monthViewYear, setMonthViewYear] = React.useState(() => viewMonth.getFullYear());\n  const [focusedMonth, setFocusedMonth] = React.useState<Date | null>(null);\n  const [decade, setDecade] = React.useState(() => getDecadeStart(viewMonth.getFullYear()));\n  const [focusedYear, setFocusedYear] = React.useState<number | null>(null);\n  const gridRef = React.useRef<HTMLTableElement | null>(null);\n  /** Set by a view change: the next layout effect moves focus into the new grid. */\n  const focusGridRef = React.useRef(false);\n  /** Bumped by \"Go to today\": the next layout effect moves focus to the focused day. */\n  const [focusRequest, setFocusRequest] = React.useState(0);\n  const gridId = useId('calendar-grid');\n  const hintId = useId('calendar-heading-hint');\n\n  // A value that changes to a day of another month shows that month (adjusted during render,\n  // C-HOOKS): a controlled value set by the parent, a form reset, or a picked day of the next\n  // month.\n  const valueIso = value ? formatISODate(value) : '';\n  const [seenValueIso, setSeenValueIso] = React.useState(valueIso);\n  if (seenValueIso !== valueIso) {\n    setSeenValueIso(valueIso);\n    if (value) {\n      if (!isSameMonth(value, viewMonth)) {\n        setViewMonth(startOfMonth(clampDate(value, minDate, maxDate)));\n        setFocusedDay(null);\n      }\n      // The month and year views follow the value too, to its year and its decade.\n      const year = clampYear(value.getFullYear(), minDate, maxDate);\n      setMonthViewYear(year);\n      setFocusedMonth(null);\n      setDecade(getDecadeStart(year));\n      setFocusedYear(null);\n    }\n  }\n\n  const isUnavailable = (date: Date) => isDayUnavailable(date, minDate, maxDate, disabledDates);\n\n  // The days drawn selected: the range around the value (its available days).\n  const selectedDays = new Set(\n    value\n      ? getSelectionRange(value, selectionRange, firstDayOfWeek, workWeekDays, isUnavailable).map(\n          formatISODate,\n        )\n      : [],\n  );\n\n  const weeks = React.useMemo(\n    () => toWeeks(getCalendarDays(viewMonth, firstDayOfWeek)),\n    [viewMonth, firstDayOfWeek],\n  );\n\n  /* ---- day view ----------------------------------------------------- */\n\n  // The focused day is derived: the day moved to while it is shown (a pointer-focused day of the\n  // previous/next month counts too), else the selected day of the month, else today (clamped into\n  // the range; skipped while today is unknown), else the first day of the month in range (it may\n  // be unavailable: unavailable days are focusable).\n  const inView = (date: Date | null | undefined): date is Date =>\n    !!date && isSameMonth(date, viewMonth);\n  const inGrid = (date: Date | null | undefined): date is Date =>\n    !!date && date >= weeks[0][0] && date <= weeks[weeks.length - 1][6];\n  const clampedToday = today && clampDate(today, minDate, maxDate);\n  const firstInRange = clampDate(viewMonth, minDate, maxDate);\n  const focusTarget = inGrid(focusedDay)\n    ? focusedDay\n    : inView(value)\n      ? startOfDay(value)\n      : inView(clampedToday)\n        ? clampedToday\n        : inView(firstInRange)\n          ? firstInRange\n          : viewMonth;\n  const focusIso = formatISODate(focusTarget);\n\n  const moveFocus = (next: Date) => {\n    const target = clampDate(next, minDate, maxDate);\n    setFocusedDay(target);\n    if (!isSameMonth(target, viewMonth)) setViewMonth(startOfMonth(target));\n  };\n\n  const navigateMonth = (delta: number) => {\n    const nextView = addMonths(viewMonth, delta);\n    const moved = clampDate(addMonths(focusTarget, delta), minDate, maxDate);\n    setViewMonth(nextView);\n    // From a day of the previous/next month the moved day may fall outside the new month: the\n    // focused day is then derived again (selected, today or the first day of the month).\n    setFocusedDay(isSameMonth(moved, nextView) ? moved : null);\n  };\n\n  /** Pointer (or assistive technology) focus on a day makes it the roving day; the month stays. */\n  const handleDayFocus = (day: Date) => {\n    if (!isSameDay(day, focusTarget)) setFocusedDay(day);\n  };\n\n  /* ---- month view --------------------------------------------------- */\n\n  const minMonth = minDate && startOfMonth(minDate);\n  const maxMonth = maxDate && startOfMonth(maxDate);\n  const clampMonth = (month: Date) => clampDate(startOfMonth(month), minMonth, maxMonth);\n  const inMonthView = (date: Date | null | undefined): date is Date =>\n    !!date && date.getFullYear() === monthViewYear;\n  const firstMonthInRange = clampMonth(makeDate(monthViewYear, 0, 1));\n  const monthTarget = inMonthView(focusedMonth)\n    ? focusedMonth\n    : inMonthView(value)\n      ? startOfMonth(value)\n      : inMonthView(clampedToday)\n        ? startOfMonth(clampedToday)\n        : inMonthView(firstMonthInRange)\n          ? firstMonthInRange\n          : makeDate(monthViewYear, 0, 1);\n\n  /** A key moves the focused month; the shown year follows it. */\n  const moveMonthFocus = (next: Date) => {\n    const target = clampMonth(next);\n    setFocusedMonth(target);\n    setMonthViewYear(target.getFullYear());\n  };\n\n  const navigateYear = (delta: number) => {\n    const nextYear = monthViewYear + delta;\n    const moved = clampMonth(addMonths(monthTarget, delta * 12));\n    setMonthViewYear(nextYear);\n    setFocusedMonth(moved.getFullYear() === nextYear ? moved : null);\n  };\n\n  /* ---- year view ---------------------------------------------------- */\n\n  const firstYearInRange = clampYear(decade, minDate, maxDate);\n  const yearTarget =\n    focusedYear !== null && inDecadeGrid(focusedYear, decade)\n      ? focusedYear\n      : value && inDecadeGrid(value.getFullYear(), decade)\n        ? value.getFullYear()\n        : clampedToday && inDecadeGrid(clampedToday.getFullYear(), decade)\n          ? clampedToday.getFullYear()\n          : inDecadeGrid(firstYearInRange, decade)\n            ? firstYearInRange\n            : decade;\n\n  /**\n   * A key moves the focused year. The arrows keep the decade while the year is in its grid (the\n   * year before and after it included), PageUp/PageDown show the previous and next decade; a\n   * year the bounds clamp outside that grid shows its own decade.\n   */\n  const moveYearFocus = (next: number, preferredDecade: number) => {\n    const target = clampYear(next, minDate, maxDate);\n    setFocusedYear(target);\n    setDecade(inDecadeGrid(target, preferredDecade) ? preferredDecade : getDecadeStart(target));\n  };\n\n  const navigateDecade = (delta: number) => {\n    const nextDecade = decade + delta * 10;\n    const moved = clampYear(yearTarget + delta * 10, minDate, maxDate);\n    setDecade(nextDecade);\n    setFocusedYear(inDecadeGrid(moved, nextDecade) ? moved : null);\n  };\n\n  /* ---- view changes ------------------------------------------------- */\n\n  const changeView = (next: CalendarViewKind) => {\n    focusGridRef.current = true;\n    setView(next);\n  };\n\n  /** \"Go to today\": today's month in the day view, today focused; nothing is selected. */\n  const goToToday = () => {\n    const target = clampDate(today ?? startOfDay(new Date()), minDate, maxDate);\n    setViewMonth(startOfMonth(target));\n    setFocusedDay(target);\n    setFocusRequest((request) => request + 1);\n    changeView('day');\n  };\n\n  /** The day view's heading button: the months of the focused day's year, its month focused. */\n  const showMonths = () => {\n    setFocusedDay(focusTarget);\n    setMonthViewYear(focusTarget.getFullYear());\n    setFocusedMonth(startOfMonth(focusTarget));\n    changeView('month');\n  };\n\n  /** The month view's heading button: the decade of the focused month, its year focused. */\n  const showYears = () => {\n    setFocusedMonth(monthTarget);\n    setDecade(getDecadeStart(monthTarget.getFullYear()));\n    setFocusedYear(monthTarget.getFullYear());\n    changeView('year');\n  };\n\n  /** A picked month shows its days; the focused day keeps its day of the month, clamped. */\n  const pickMonth = (month: Date) => {\n    const monthsAway =\n      (month.getFullYear() - focusTarget.getFullYear()) * 12 +\n      (month.getMonth() - focusTarget.getMonth());\n    const day = clampDate(addMonths(focusTarget, monthsAway), minDate, maxDate);\n    setViewMonth(month);\n    setFocusedDay(isSameMonth(day, month) ? day : null);\n    changeView('day');\n  };\n\n  /** A picked year shows its months; the focused month keeps its month, clamped. */\n  const pickYear = (yearDate: Date) => {\n    const year = yearDate.getFullYear();\n    const month = clampMonth(makeDate(year, monthTarget.getMonth(), 1));\n    setMonthViewYear(year);\n    setFocusedMonth(month.getFullYear() === year ? month : null);\n    changeView('month');\n  };\n\n  // Escape goes back one level (C-POPUPS: an inner widget that consumes Escape prevents its\n  // default, so a DatePicker stays open); the day view leaves it to the surroundings.\n  const handleEscape = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || view === 'day' || !isOwnEvent(event)) return;\n    if (event.defaultPrevented || event.nativeEvent.isComposing) return;\n    event.preventDefault();\n    changeView(view === 'year' ? 'month' : 'day');\n  };\n\n  /* ---- focus -------------------------------------------------------- */\n\n  const periodKey =\n    view === 'day' ? formatISODate(viewMonth) : view === 'month' ? monthViewYear : decade;\n  const cellKey =\n    view === 'day' ? focusIso : view === 'month' ? formatISODate(monthTarget) : yearTarget;\n\n  // Roving focus: while the grid holds focus, focus follows the focused cell, also when the\n  // period changes under it (the buttons are keyed by position, so the focused one shows another\n  // cell). A view change moves focus into the new grid in the same commit, since the element that\n  // had it (the heading button that becomes text, a picked cell) may be gone.\n  const headerRef = React.useRef<HTMLDivElement | null>(null);\n  /** Whether focus last rested in the header or the grid (a removed element fires no event). */\n  const viewHadFocusRef = React.useRef(false);\n  React.useEffect(() => {\n    const onFocusIn = (event: FocusEvent) => {\n      const target = event.target as Node | null;\n      viewHadFocusRef.current =\n        !!target && (!!gridRef.current?.contains(target) || !!headerRef.current?.contains(target));\n    };\n    document.addEventListener('focusin', onFocusIn);\n    return () => document.removeEventListener('focusin', onFocusIn);\n  }, []);\n  const previousViewRef = React.useRef(view);\n  React.useLayoutEffect(() => {\n    const viewChanged = previousViewRef.current !== view;\n    previousViewRef.current = view;\n    const requested = focusGridRef.current;\n    focusGridRef.current = false;\n    const grid = gridRef.current;\n    if (!grid) return;\n    const active = grid.ownerDocument.activeElement;\n    // A view change the props made (the month picker turned off) removed the element that had\n    // focus: focus then moves into the new grid, if the view had focus and it now rests on\n    // nothing. A calendar that did not have focus keeps it where it is.\n    const lost =\n      viewChanged && viewHadFocusRef.current && (!active || active === grid.ownerDocument.body);\n    if (!requested && !lost && (!active || !grid.contains(active))) return;\n    const button = grid.querySelector<HTMLElement>('button[tabindex=\"0\"]');\n    if (button && button !== active) button.focus();\n  }, [view, periodKey, cellKey, focusRequest]);\n\n  /* ---- render ------------------------------------------------------- */\n\n  let previousLabel: string;\n  let nextLabel: string;\n  let previousDisabled: boolean;\n  let nextDisabled: boolean;\n  let navigate: (delta: number) => void;\n  let headingText: string;\n  if (view === 'day') {\n    previousLabel = labels?.previousMonth ?? 'Previous month';\n    nextLabel = labels?.nextMonth ?? 'Next month';\n    previousDisabled = !!minDate && addDays(viewMonth, -1) < startOfDay(minDate);\n    nextDisabled = !!maxDate && addMonths(viewMonth, 1) > startOfDay(maxDate);\n    navigate = navigateMonth;\n    headingText = formatMonthYear(viewMonth, locale);\n  } else if (view === 'month') {\n    previousLabel = labels?.previousYear ?? 'Previous year';\n    nextLabel = labels?.nextYear ?? 'Next year';\n    previousDisabled = isYearOutOfRange(monthViewYear - 1, minDate, maxDate);\n    nextDisabled = isYearOutOfRange(monthViewYear + 1, minDate, maxDate);\n    navigate = navigateYear;\n    headingText = formatYear(makeDate(monthViewYear, 0, 1), locale);\n  } else {\n    previousLabel = labels?.previousDecade ?? 'Previous decade';\n    nextLabel = labels?.nextDecade ?? 'Next decade';\n    // A decade is wholly outside when its last year is before minDate or its first after maxDate.\n    previousDisabled =\n      isYearOutOfRange(decade - 1, minDate, undefined) ||\n      isYearOutOfRange(decade - 10, undefined, maxDate);\n    nextDisabled =\n      isYearOutOfRange(decade + 10, undefined, maxDate) ||\n      isYearOutOfRange(decade + 19, minDate, undefined);\n    navigate = navigateDecade;\n    headingText = formatDecade(decade, locale);\n  }\n\n  // Unknown today (before hydration) leaves the button enabled; the clock decides once it is known.\n  const todayOutOfRange = !!today && !isDateInRange(today, minDate, maxDate);\n\n  const headingButtonTarget = showMonthPicker && view !== 'year' ? view : null;\n  const hint =\n    view === 'day'\n      ? (labels?.chooseMonth ?? 'Choose a month')\n      : (labels?.chooseYear ?? 'Choose a year');\n\n  let grid: React.ReactNode;\n  if (view === 'day') {\n    grid = (\n      <CalendarDayGrid\n        ref={gridRef}\n        id={gridId}\n        headingId={headingId}\n        viewMonth={viewMonth}\n        weeks={weeks}\n        focusTarget={focusTarget}\n        selectedDays={selectedDays}\n        today={today}\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        showWeekNumbers={showWeekNumbers}\n        firstWeekOfYear={firstWeekOfYear}\n        markedDates={markedDates}\n        renderDay={renderDay}\n        dayLabel={dayLabel}\n        labels={labels}\n        isUnavailable={isUnavailable}\n        onMoveFocus={moveFocus}\n        onDayFocus={handleDayFocus}\n        onPick={onPick}\n        partClassNames={partClassNames}\n      />\n    );\n  } else if (view === 'month') {\n    const months = getYearMonths(monthViewYear);\n    grid = (\n      <CalendarPickerGrid\n        ref={gridRef}\n        id={gridId}\n        headingId={headingId}\n        cells={months.map((month) => ({\n          date: month,\n          text: formatMonthShort(month, locale),\n          label: formatMonthYear(month, locale),\n          selected: !!value && isSameMonth(month, value),\n          current: !!today && isSameMonth(month, today),\n          outside: false,\n          unavailable: isMonthOutOfRange(month, minDate, maxDate),\n        }))}\n        focusIndex={monthTarget.getMonth()}\n        onMoveFocus={(delta) => moveMonthFocus(addMonths(monthTarget, delta))}\n        onPage={(direction) => moveMonthFocus(addMonths(monthTarget, direction * 12))}\n        onCellFocus={(month) => {\n          if (!isSameMonth(month, monthTarget)) setFocusedMonth(month);\n        }}\n        onPick={pickMonth}\n        onKeyDown={handleEscape}\n        partClassNames={{ grid: partClassNames?.grid, cell: partClassNames?.month }}\n      />\n    );\n  } else {\n    const years = getDecadeYears(decade);\n    grid = (\n      <CalendarPickerGrid\n        ref={gridRef}\n        id={gridId}\n        headingId={headingId}\n        cells={years.map((yearDate) => {\n          const year = yearDate.getFullYear();\n          return {\n            date: yearDate,\n            text: formatYear(yearDate, locale),\n            selected: value?.getFullYear() === year,\n            current: today?.getFullYear() === year,\n            outside: year < decade || year > decade + 9,\n            unavailable: isYearOutOfRange(year, minDate, maxDate),\n          };\n        })}\n        focusIndex={yearTarget - (decade - 1)}\n        onMoveFocus={(delta) => moveYearFocus(yearTarget + delta, decade)}\n        onPage={(direction) => moveYearFocus(yearTarget + direction * 10, decade + direction * 10)}\n        onCellFocus={(yearDate) => {\n          if (yearDate.getFullYear() !== yearTarget) setFocusedYear(yearDate.getFullYear());\n        }}\n        onPick={pickYear}\n        onKeyDown={handleEscape}\n        partClassNames={{ grid: partClassNames?.grid, cell: partClassNames?.year }}\n      />\n    );\n  }\n\n  return (\n    <>\n      <div\n        ref={headerRef}\n        className={cn(partClassNames?.header, 'mb-2 flex items-center justify-between gap-2')}\n        onKeyDown={handleEscape}\n      >\n        <button\n          type=\"button\"\n          aria-label={previousLabel}\n          aria-controls={gridId}\n          {...focusableDisabledProps(previousDisabled)}\n          onClick={preventIfDisabled(previousDisabled, () => navigate(-1))}\n          className={cn(\n            partClassNames?.previousMonthButton,\n            NAV_BUTTON_CLASSES,\n            focusRing,\n            disabledStyles,\n          )}\n        >\n          <ChevronLeftIcon className=\"wave-rtl:-scale-x-100\" />\n        </button>\n        <Heading\n          id={headingId}\n          aria-live=\"polite\"\n          className={cn(partClassNames?.heading, 'text-body-1 font-semibold')}\n        >\n          {headingButtonTarget ? (\n            // Named by its text, so the grid and a DatePicker's dialog keep their names; the hint\n            // is outside the heading, which names them.\n            <button\n              type=\"button\"\n              aria-describedby={hintId}\n              onClick={headingButtonTarget === 'day' ? showMonths : showYears}\n              className={cn(partClassNames?.headingButton, HEADING_BUTTON_CLASSES, focusRing)}\n            >\n              {headingText}\n            </button>\n          ) : (\n            headingText\n          )}\n        </Heading>\n        {headingButtonTarget && (\n          <span id={hintId} hidden>\n            {hint}\n          </span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={nextLabel}\n          aria-controls={gridId}\n          {...focusableDisabledProps(nextDisabled)}\n          onClick={preventIfDisabled(nextDisabled, () => navigate(1))}\n          className={cn(\n            partClassNames?.nextMonthButton,\n            NAV_BUTTON_CLASSES,\n            focusRing,\n            disabledStyles,\n          )}\n        >\n          <ChevronRightIcon className=\"wave-rtl:-scale-x-100\" />\n        </button>\n      </div>\n      {grid}\n      {(showGoToToday || onClose) && (\n        <div\n          className={cn(partClassNames?.footer, 'mt-2 flex items-center justify-end gap-2')}\n          onKeyDown={handleEscape}\n        >\n          {showGoToToday && (\n            <button\n              type=\"button\"\n              // Natively disabled, since it never disables itself by its own activation.\n              disabled={todayOutOfRange}\n              onClick={goToToday}\n              className={cn(\n                partClassNames?.todayButton,\n                FOOTER_BUTTON_CLASSES,\n                focusRing,\n                disabledStyles,\n              )}\n            >\n              {labels?.goToToday ?? 'Go to today'}\n            </button>\n          )}\n          {onClose && (\n            <button\n              type=\"button\"\n              onClick={onClose}\n              className={cn(\n                partClassNames?.closeButton,\n                FOOTER_BUTTON_CLASSES,\n                focusRing,\n                disabledStyles,\n              )}\n            >\n              {closeLabel ?? 'Close'}\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n};\n\nCalendarView.displayName = 'CalendarView';\n\n// The Calendar's parts carry its own stable classes (the view's keys name the day view's buttons;\n// the navigation buttons of every view share them).\nconst CALENDAR_PART_CLASS_NAMES: CalendarViewPartClassNames = {\n  header: calendarClassNames.header,\n  previousMonthButton: calendarClassNames.previousButton,\n  heading: calendarClassNames.heading,\n  headingButton: calendarClassNames.headingButton,\n  nextMonthButton: calendarClassNames.nextButton,\n  grid: calendarClassNames.grid,\n  weekday: calendarClassNames.weekday,\n  day: calendarClassNames.day,\n  month: calendarClassNames.month,\n  year: calendarClassNames.year,\n  weekNumberHeader: calendarClassNames.weekNumberHeader,\n  weekNumber: calendarClassNames.weekNumber,\n  markedDot: calendarClassNames.markedDot,\n  footer: calendarClassNames.footer,\n  todayButton: calendarClassNames.todayButton,\n};\n\n/**\n * A month calendar for picking one day, without a text input: the grid of DatePicker's dialog,\n * placed in the page (APG date picker grid).\n *\n * - **Structure**: a `role=\"group\"` root, named with `aria-label`/`aria-labelledby` or by a\n *   surrounding `Field`, around the previous-month button, the month text (a polite live region\n *   that labels the grid), the next-month button and a `role=\"grid\"` table of six weeks, with an\n *   optional leading column of week numbers (`showWeekNumbers`, `firstWeekOfYear`) and an\n *   optional footer button, \"Go to today\" (`showGoToToday`), which shows today's month and focuses\n *   today without selecting it. The month text is no heading, since a component cannot know the\n *   page's heading levels.\n * - **Month and year views** (`showMonthPicker`, on by default): the month text is a button\n *   (named by that text, its hint `labels.chooseMonth`) that shows the 12 months of the year; their\n *   heading, the year, is a button to the year view, a decade with the year before and after it\n *   (muted). The header buttons move by a year, then by a decade. A picked year shows its months\n *   and a picked month its days (the focused day keeps its day of the month, clamped); Escape\n *   goes back a level to the period shown before. Each view change moves focus into the new\n *   grid. Months and years wholly outside `minDate`/`maxDate` stay focusable, `aria-disabled`.\n * - **Keyboard**: one tab stop in the grid, the focused day (the selected day of the shown month,\n *   else today, else the first day of the month in range, which may be unavailable). Arrow keys\n *   move by day and week (mirrored in RTL), PageUp/PageDown by month, Shift+PageUp/PageDown by\n *   year (the day is clamped to the month), Home/End to the start and end of the week; Enter,\n *   Space and a click pick the day. Unavailable days (`minDate`, `maxDate`, `disabledDates`) stay\n *   focusable and are `aria-disabled`. In the month and year views the arrows move by a cell and a\n *   row of four, Home/End to the row's ends, PageUp/PageDown by a year (months) or ten (years).\n * - **Value**: `onValueChange` fires only when the day changes, with local midnight and `details`;\n *   picking the selected day again does nothing. A value that moves to another month shows that\n *   month. The selected day is `aria-selected` on its gridcell and `aria-pressed` on its button;\n *   today is `aria-current=\"date\"`. With `selectionRange` a pick selects the day's week, work\n *   week (`workWeekDays`) or month: every available day of it is drawn and marked selected, the\n *   value is the picked day, and `details.range` lists the selected days in order.\n * - **Marked days and custom content**: `markedDates` draws a dot in the text colour under the\n *   number, sets `data-marked` and says \"marked\" in the day's name; `renderDay` replaces the\n *   content of the day button (non-interactive content only) and `dayLabel` sets its name.\n * - **Forms and Field**: `name`/`required` add a hidden input (ISO `yyyy-mm-dd`) that resets with\n *   its form (to `defaultValue`); a required calendar that the form reports missing focuses its\n *   tab stop. Inside a `Field` the group takes the label, the description and `aria-invalid`; it\n *   says \"required\" in its description (`labels.required`), since a group cannot carry\n *   `aria-required`.\n * - **Server rendering**: pass `locale`, and `today`, `initialVisibleDate` or a value, so the\n *   server and the browser render the same month. Only `today` marks a day in the server HTML:\n *   without it the server HTML marks none and the browser marks today once hydrated. Without any\n *   of the three the month shown first comes from the server's clock (development warning).\n *\n * @example\n * <Calendar aria-label=\"Due date\" defaultValue={new Date(2025, 5, 12)} onValueChange={setDue} />\n */\nexport const Calendar = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  minDate,\n  maxDate,\n  disabledDates,\n  firstDayOfWeek = 0,\n  locale,\n  today: todayProp,\n  initialVisibleDate,\n  showMonthPicker = true,\n  showWeekNumbers,\n  firstWeekOfYear,\n  showGoToToday,\n  markedDates,\n  renderDay,\n  dayLabel,\n  selectionRange = 'day',\n  workWeekDays,\n  labels,\n  name,\n  form,\n  required,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  className,\n  ref,\n  ...rest\n}: CalendarProps) => {\n  const isUnavailable = (date: Date) => isDayUnavailable(date, minDate, maxDate, disabledDates);\n  const [value, setValue] = useControllable<Date | null>(valueProp, defaultValue ?? null, (next) =>\n    onValueChange?.(next, {\n      range: next\n        ? getSelectionRange(\n            next,\n            selectionRange,\n            firstDayOfWeek,\n            workWeekDays ?? DEFAULT_WORK_WEEK_DAYS,\n            isUnavailable,\n          )\n        : [],\n    }),\n  );\n\n  /** Commits a day (or `null`) as local midnight; nothing is emitted when it is the same day. */\n  const commit = (next: Date | null) => {\n    const normalized = next ? startOfDay(next) : null;\n    const unchanged = normalized ? isSameDay(normalized, value) : value === null;\n    if (!unchanged) setValue(normalized);\n  };\n\n  // Today is unknown in the server HTML and the hydration render (the two clocks may name\n  // different days); the browser applies it once hydrated.\n  const isClient = useIsClient();\n  const today = todayProp ?? (isClient ? new Date() : null);\n\n  React.useEffect(() => {\n    if (locale !== undefined && !isValidLocaleTag(locale)) {\n      warnOnce(\n        `Calendar:invalid-locale:${locale}`,\n        `Calendar: \\`locale\\` \"${locale}\" is not a valid BCP 47 language tag (use hyphens, as in ` +\n          '\"en-US\"). The runtime default locale formats the dates instead, so the server and the ' +\n          'browser may render different text.',\n      );\n    }\n  }, [locale]);\n  const hasDate = todayProp !== undefined || initialVisibleDate !== undefined || value !== null;\n  React.useEffect(() => {\n    // Effects run only in the browser, where `isClient` is false after a hydration render alone.\n    if (!isClient && !hasDate) {\n      warnOnce(\n        'Calendar:hydration-date',\n        'Calendar: rendered on the server without `today`, `initialVisibleDate` or `value`, so ' +\n          \"the month shown first comes from the server's clock and the browser may show another \" +\n          'month. Pass `today` or `initialVisibleDate`.',\n      );\n    }\n  }, [isClient, hasDate]);\n\n  const field = useFieldContext();\n  const {\n    'aria-required': fieldAriaRequired,\n    'aria-describedby': fieldDescribedBy,\n    ...fieldProps\n  } = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      // An explicit `required={false}` wins over a required Field, so the hint matches\n      // `isRequired`.\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n  // `group` does not allow aria-required (a consumer's included): the description says it.\n  const requiredHintId = useId('calendar-required');\n  const showRequiredHint = fieldAriaRequired !== undefined && String(fieldAriaRequired) !== 'false';\n\n  const headingId = useId('calendar-heading');\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, rootRef);\n\n  useFormReset(rootRef, () => commit(defaultValue ?? null), form);\n\n  const focusTabStop = () => {\n    rootRef.current\n      ?.querySelector<HTMLElement>('[data-wave-calendar-grid] button[tabindex=\"0\"]')\n      ?.focus();\n  };\n\n  return (\n    <div\n      role=\"group\"\n      {...fieldProps}\n      aria-describedby={joinIds(fieldDescribedBy, showRequiredHint && requiredHintId)}\n      className={cn(\n        calendarClassNames.root,\n        'relative inline-flex flex-col text-foreground',\n        className,\n      )}\n      {...rest}\n      ref={mergedRef}\n    >\n      <CalendarView\n        value={value}\n        onPick={commit}\n        minDate={minDate}\n        maxDate={maxDate}\n        disabledDates={disabledDates}\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        today={today}\n        initialVisibleDate={initialVisibleDate}\n        showMonthPicker={showMonthPicker}\n        showWeekNumbers={showWeekNumbers}\n        firstWeekOfYear={firstWeekOfYear}\n        showGoToToday={showGoToToday}\n        markedDates={markedDates}\n        renderDay={renderDay}\n        dayLabel={dayLabel}\n        selectionRange={selectionRange}\n        workWeekDays={workWeekDays}\n        labels={labels}\n        headingAs=\"div\"\n        headingId={headingId}\n        partClassNames={CALENDAR_PART_CLASS_NAMES}\n      />\n      {showRequiredHint && (\n        <span id={requiredHintId} hidden>\n          {labels?.required ?? 'Required'}\n        </span>\n      )}\n      <HiddenInput\n        type=\"text\"\n        name={name}\n        form={form}\n        value={value ? formatISODate(value) : ''}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\n\nCalendar.displayName = 'Calendar';\n"],"mappings":"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"}

package/dist/components/input/Calendar.views.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/date.cjs"),i=require("../../lib/direction.cjs"),a=require("../../lib/aria.cjs"),o=require("../../lib/styles.cjs"),s=require("./dateUtils.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=`relative flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through`,d=({id:e,headingId:n,viewMonth:d,weeks:m,focusTarget:h,selectedDays:g,today:_,firstDayOfWeek:v,locale:y,showWeekNumbers:b=!1,firstWeekOfYear:x=`first-day`,markedDates:S,renderDay:C,dayLabel:w,labels:T,isUnavailable:E,onMoveFocus:D,onDayFocus:O,onPick:k,partClassNames:A,ref:j})=>{let M=c.useMemo(()=>s.getWeekdayNames(y,v),[y,v]),N=s.formatISODate(h);return(0,l.jsxs)(`table`,{ref:j,id:e,role:`grid`,"aria-labelledby":n,"data-wave-calendar-grid":``,onKeyDown:e=>{if(e.altKey||e.ctrlKey||e.metaKey)return;let t=(h.getDay()-v+7)%7,n;switch(e.key){case`ArrowLeft`:case`ArrowRight`:{let t=i.getArrowIntent(e.key,{orientation:`horizontal`,dir:i.getDirection(e.currentTarget)});n=r.addDays(h,t===`next`?1:-1);break}case`ArrowDown`:n=r.addDays(h,7);break;case`ArrowUp`:n=r.addDays(h,-7);break;case`PageDown`:n=r.addMonths(h,e.shiftKey?12:1);break;case`PageUp`:n=r.addMonths(h,e.shiftKey?-12:-1);break;case`Home`:n=r.addDays(h,-t);break;case`End`:n=r.addDays(h,6-t);break;default:return}e.preventDefault(),D(n)},className:t.cn(A?.grid,`border-collapse`),children:[(0,l.jsx)(`thead`,{children:(0,l.jsxs)(`tr`,{children:[b&&(0,l.jsxs)(`th`,{scope:`col`,className:t.cn(A?.weekNumberHeader,`h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground`),children:[(0,l.jsx)(`span`,{"aria-hidden":`true`,children:`#`}),(0,l.jsx)(`span`,{className:`sr-only`,children:T?.week??`Week`})]}),M.map(e=>(0,l.jsxs)(`th`,{scope:`col`,abbr:e.long,"aria-label":e.long,className:t.cn(A?.weekday,`h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground`),children:[(0,l.jsx)(`span`,{"aria-hidden":`true`,children:e.short}),(0,l.jsx)(`span`,{className:`sr-only`,children:e.long})]},e.long))]})}),(0,l.jsx)(`tbody`,{children:m.map((e,n)=>(0,l.jsxs)(`tr`,{children:[b&&(0,l.jsx)(`th`,{scope:`row`,"aria-label":(T?.weekNumber??p)(r.getWeekNumber(e[0],{firstDayOfWeek:v,firstWeekOfYear:x})),className:t.cn(A?.weekNumber,`h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground`),children:r.getWeekNumber(e[0],{firstDayOfWeek:v,firstWeekOfYear:x})}),e.map((e,n)=>{let i=s.formatISODate(e),c=g.has(i),p=!!S?.(e),m=s.formatDayNumber(e,y),h=s.formatDayLabel(e,y),v=p?(T?.markedDay??f)(h):h,b=r.isSameDay(e,_),x=i===N,D=E(e);return(0,l.jsx)(`td`,{role:`gridcell`,"aria-selected":c,className:`p-0`,children:(0,l.jsxs)(`button`,{type:`button`,tabIndex:x?0:-1,"aria-label":w?w(e,v):v,"aria-pressed":c||void 0,"aria-current":b?`date`:void 0,...a.focusableDisabledProps(D),"data-date":i,"data-selected":c?``:void 0,"data-today":b?``:void 0,"data-marked":p?``:void 0,"data-outside":s.isSameMonth(e,d)?void 0:``,onFocus:()=>O(e),onClick:()=>{D||k(e)},className:t.cn(A?.day,u,o.focusRing,o.disabledStyles,c&&o.forcedColors.selectedLeaf),children:[C?C(e,m):m,p&&(0,l.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(A?.markedDot,`pointer-events-none absolute inset-x-0 bottom-0.5 mx-auto h-1 w-1 rounded-full bg-current forced-colors:forced-color-adjust-none`)})]})},n)})]},n))})]})};d.displayName=`CalendarDayGrid`;var f=e=>`${e}, marked`,p=e=>`Week ${e}`,m=`flex h-12 w-14 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through`,h=4,g=({id:e,headingId:r,cells:s,focusIndex:c,onMoveFocus:u,onPage:d,onCellFocus:f,onPick:p,onKeyDown:g,partClassNames:_,ref:v})=>{let y=e=>{if(e.altKey||e.ctrlKey||e.metaKey)return;let t=c%h;switch(e.key){case`ArrowLeft`:case`ArrowRight`:{let t=i.getArrowIntent(e.key,{orientation:`horizontal`,dir:i.getDirection(e.currentTarget)});e.preventDefault(),u(t===`next`?1:-1);return}case`ArrowDown`:e.preventDefault(),u(h);return;case`ArrowUp`:e.preventDefault(),u(-4);return;case`Home`:e.preventDefault(),u(-t);return;case`End`:e.preventDefault(),u(3-t);return;case`PageDown`:case`PageUp`:e.preventDefault(),d(e.key===`PageDown`?1:-1);return}},b=[];for(let e=0;e<s.length;e+=h)b.push(s.slice(e,e+h));return(0,l.jsx)(`table`,{ref:v,id:e,role:`grid`,"aria-labelledby":r,"data-wave-calendar-grid":``,onKeyDown:n.composeEventHandlers(g,y),className:t.cn(_?.grid,`border-collapse`),children:(0,l.jsx)(`tbody`,{children:b.map((e,n)=>(0,l.jsx)(`tr`,{children:e.map((e,r)=>{let i=n*h+r;return(0,l.jsx)(`td`,{role:`gridcell`,"aria-selected":e.selected,className:`p-0`,children:(0,l.jsx)(`button`,{type:`button`,tabIndex:i===c?0:-1,"aria-label":e.label,"aria-pressed":e.selected||void 0,"aria-current":e.current?`date`:void 0,...a.focusableDisabledProps(e.unavailable),"data-selected":e.selected?``:void 0,"data-today":e.current?``:void 0,"data-outside":e.outside?``:void 0,onFocus:()=>f(e.date),onClick:()=>{e.unavailable||p(e.date)},className:t.cn(_?.cell,m,o.focusRing,o.disabledStyles,e.selected&&o.forcedColors.selectedLeaf),children:e.text})},r)})},n))})})};g.displayName=`CalendarPickerGrid`,exports.CalendarDayGrid=d,exports.CalendarPickerGrid=g;
+//# sourceMappingURL=Calendar.views.cjs.map

package/dist/components/input/Calendar.views.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.views.cjs","names":["React","getWeekdayNames","formatISODate","getArrowIntent","getDirection","addDays","addMonths","cn","getWeekNumber","formatDayNumber","formatDayLabel","isSameDay","focusableDisabledProps","isSameMonth","focusRing","disabledStyles","forcedColors","composeEventHandlers","require_runtime","require_cn","require_composeEventHandlers","require_date","require_direction","require_aria","require_styles","require_dateUtils","react","react_jsx_runtime","DAY_CLASSES","CalendarDayGrid","weekdays","locale","firstDayOfWeek","focusIso","focusTarget","headingId","event","weekOffset","next","intent","onMoveFocus","partClassNames","showWeekNumbers","labels","weekday","weeks","defaultWeekNumber","week","iso","day","isSelected","selectedDays","isMarked","markedDates","number","baseLabel","defaultLabel","defaultMarkedDay","isToday","today","isFocused","unavailable","isUnavailable","dayLabel","viewMonth","onDayFocus","onPick","renderDay","column","row","PICKER_CELL_CLASSES","PICKER_COLUMNS","CalendarPickerGrid","handleKeyDown","focusIndex","onPage","rows","i","cells","onKeyDown","index","rowIndex","cell","onCellFocus"],"sources":["../../../src/components/input/Calendar.views.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DayOfWeek, FirstWeekOfYear } from '../../lib/types';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusableDisabledProps } from '../../lib/aria';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { disabledStyles, focusRing, forcedColors } from '../../lib/styles';\nimport { getWeekNumber } from '../../lib/date';\nimport type { CalendarLabels } from './Calendar';\nimport {\n  addDays,\n  addMonths,\n  formatDayLabel,\n  formatDayNumber,\n  formatISODate,\n  getWeekdayNames,\n  isSameDay,\n  isSameMonth,\n} from './dateUtils';\n\n// An unavailable day stays focusable in the roving grid (`aria-disabled`); the day button adds\n// `disabledStyles`, whose dimmed look lifts while the focus ring shows (opacity would dim the ring).\nconst DAY_CLASSES =\n  'relative flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through';\n\n/** Internal: the stable classes of the day view's parts (see `CalendarDayGridProps.partClassNames`). */\nexport interface CalendarDayGridPartClassNames {\n  /** On the `role=\"grid\"` table. */\n  grid?: string;\n  /** On each weekday header cell. */\n  weekday?: string;\n  /** On each day button. */\n  day?: string;\n  /** On the header cell of the week-number column. */\n  weekNumberHeader?: string;\n  /** On each week's row header (its number). */\n  weekNumber?: string;\n  /** On the dot inside the button of a marked day. */\n  markedDot?: string;\n}\n\n/** Internal props of {@link CalendarDayGrid}. */\nexport interface CalendarDayGridProps {\n  /** Id of the table (the header's month buttons control it). */\n  id: string;\n  /** Id of the month heading, which labels the table. */\n  headingId: string;\n  /** The month the grid shows; days of other months are marked `data-outside`. */\n  viewMonth: Date;\n  /** The 42 days of the grid as 6 weeks. */\n  weeks: Date[][];\n  /** The roving day: the only day button in the tab order, and the start of the arrow keys. */\n  focusTarget: Date;\n  /**\n   * The selected days as ISO dates (`yyyy-mm-dd`): `aria-selected` on their cells, `aria-pressed`\n   * and `data-selected` on their buttons.\n   */\n  selectedDays: ReadonlySet<string>;\n  /** Today's day (`aria-current=\"date\"`), or `null` while it is unknown (no day is marked). */\n  today: Date | null;\n  /** First day of the week, the first column (Home and End move to the row's ends). */\n  firstDayOfWeek: DayOfWeek;\n  /** BCP 47 locale of the weekday names, the day numbers and the day labels. */\n  locale?: string;\n  /** Adds a leading column of week numbers. @default false */\n  showWeekNumbers?: boolean;\n  /** Which week is week 1 of a year. @default 'first-day' */\n  firstWeekOfYear?: FirstWeekOfYear;\n  /** Returns `true` for days that draw a dot and are named \"marked\". */\n  markedDates?: (date: Date) => boolean;\n  /** Replaces the content of a day button (`defaultContent` is the day number). */\n  renderDay?: (date: Date, defaultContent: React.ReactNode) => React.ReactNode;\n  /** The accessible name of a day, from its default name (marked included). */\n  dayLabel?: (date: Date, defaultLabel: string) => string;\n  /** Names of the week-number column and the marked days. */\n  labels?: CalendarLabels;\n  /** Whether a day cannot be picked; it stays focusable and is `aria-disabled`. */\n  isUnavailable: (date: Date) => boolean;\n  /** Called with the day a key moves to (before clamping into the bounds). */\n  onMoveFocus: (date: Date) => void;\n  /** Called when a day button receives focus (pointer or assistive technology). */\n  onDayFocus: (date: Date) => void;\n  /** Called with an available day that is clicked (Enter and Space click the focused button). */\n  onPick: (date: Date) => void;\n  /** Stable classes of the grid's parts, from the component that renders the view. */\n  partClassNames?: CalendarDayGridPartClassNames;\n  /** Ref to the table. */\n  ref?: React.Ref<HTMLTableElement>;\n}\n\n/**\n * Internal: the day view of a calendar, a `role=\"grid\"` table of 6 weeks with one roving day\n * button in the tab order. Arrow keys move by day and week (mirrored in RTL), PageUp/PageDown by\n * month, Shift+PageUp/PageDown by year, Home/End to the start and end of the week; Enter and Space\n * click the focused day button. Marked `data-wave-calendar-grid`, so a surrounding focus trap\n * finds its tab stop.\n */\nexport const CalendarDayGrid = ({\n  id,\n  headingId,\n  viewMonth,\n  weeks,\n  focusTarget,\n  selectedDays,\n  today,\n  firstDayOfWeek,\n  locale,\n  showWeekNumbers = false,\n  firstWeekOfYear = 'first-day',\n  markedDates,\n  renderDay,\n  dayLabel,\n  labels,\n  isUnavailable,\n  onMoveFocus,\n  onDayFocus,\n  onPick,\n  partClassNames,\n  ref,\n}: CalendarDayGridProps) => {\n  const weekdays = React.useMemo(\n    () => getWeekdayNames(locale, firstDayOfWeek),\n    [locale, firstDayOfWeek],\n  );\n  const focusIso = formatISODate(focusTarget);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey) return;\n    const weekOffset = (focusTarget.getDay() - firstDayOfWeek + 7) % 7;\n    let next: Date;\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowRight': {\n        const intent = getArrowIntent(event.key, {\n          orientation: 'horizontal',\n          dir: getDirection(event.currentTarget),\n        });\n        next = addDays(focusTarget, intent === 'next' ? 1 : -1);\n        break;\n      }\n      case 'ArrowDown':\n        next = addDays(focusTarget, 7);\n        break;\n      case 'ArrowUp':\n        next = addDays(focusTarget, -7);\n        break;\n      case 'PageDown':\n        next = addMonths(focusTarget, event.shiftKey ? 12 : 1);\n        break;\n      case 'PageUp':\n        next = addMonths(focusTarget, event.shiftKey ? -12 : -1);\n        break;\n      case 'Home':\n        next = addDays(focusTarget, -weekOffset);\n        break;\n      case 'End':\n        next = addDays(focusTarget, 6 - weekOffset);\n        break;\n      default:\n        // Enter and Space activate the focused day button natively (click).\n        return;\n    }\n    event.preventDefault();\n    onMoveFocus(next);\n  };\n\n  return (\n    <table\n      ref={ref}\n      id={id}\n      role=\"grid\"\n      aria-labelledby={headingId}\n      data-wave-calendar-grid=\"\"\n      onKeyDown={handleKeyDown}\n      className={cn(partClassNames?.grid, 'border-collapse')}\n    >\n      <thead>\n        <tr>\n          {showWeekNumbers && (\n            // The weekday headers' pattern: a visible symbol hidden from assistive technology and\n            // a visually hidden name (an aria-label alone on an empty header fails axe).\n            <th\n              scope=\"col\"\n              className={cn(\n                partClassNames?.weekNumberHeader,\n                'h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground',\n              )}\n            >\n              <span aria-hidden=\"true\">#</span>\n              <span className=\"sr-only\">{labels?.week ?? 'Week'}</span>\n            </th>\n          )}\n          {weekdays.map((weekday) => (\n            <th\n              key={weekday.long}\n              scope=\"col\"\n              abbr={weekday.long}\n              aria-label={weekday.long}\n              className={cn(\n                partClassNames?.weekday,\n                'h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground',\n              )}\n            >\n              <span aria-hidden=\"true\">{weekday.short}</span>\n              <span className=\"sr-only\">{weekday.long}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {weeks.map((week, row) => (\n          // Rows and cells are keyed by position, so the focused button survives a month change\n          // and focus stays in the grid while it moves to the new day.\n          <tr key={row}>\n            {showWeekNumbers && (\n              <th\n                scope=\"row\"\n                aria-label={(labels?.weekNumber ?? defaultWeekNumber)(\n                  getWeekNumber(week[0], { firstDayOfWeek, firstWeekOfYear }),\n                )}\n                className={cn(\n                  partClassNames?.weekNumber,\n                  'h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground',\n                )}\n              >\n                {getWeekNumber(week[0], { firstDayOfWeek, firstWeekOfYear })}\n              </th>\n            )}\n            {week.map((day, column) => {\n              const iso = formatISODate(day);\n              const isSelected = selectedDays.has(iso);\n              const isMarked = !!markedDates?.(day);\n              const number = formatDayNumber(day, locale);\n              const baseLabel = formatDayLabel(day, locale);\n              const defaultLabel = isMarked\n                ? (labels?.markedDay ?? defaultMarkedDay)(baseLabel)\n                : baseLabel;\n              const isToday = isSameDay(day, today);\n              const isFocused = iso === focusIso;\n              const unavailable = isUnavailable(day);\n              return (\n                <td key={column} role=\"gridcell\" aria-selected={isSelected} className=\"p-0\">\n                  {/* Focus rests on the button, and screen readers do not reliably announce the\n                      gridcell's aria-selected from inside it: the selected day's button is also\n                      pressed. */}\n                  <button\n                    type=\"button\"\n                    tabIndex={isFocused ? 0 : -1}\n                    aria-label={dayLabel ? dayLabel(day, defaultLabel) : defaultLabel}\n                    aria-pressed={isSelected || undefined}\n                    aria-current={isToday ? 'date' : undefined}\n                    {...focusableDisabledProps(unavailable)}\n                    data-date={iso}\n                    data-selected={isSelected ? '' : undefined}\n                    data-today={isToday ? '' : undefined}\n                    data-marked={isMarked ? '' : undefined}\n                    data-outside={isSameMonth(day, viewMonth) ? undefined : ''}\n                    onFocus={() => onDayFocus(day)}\n                    onClick={() => {\n                      if (!unavailable) onPick(day);\n                    }}\n                    className={cn(\n                      partClassNames?.day,\n                      DAY_CLASSES,\n                      focusRing,\n                      disabledStyles,\n                      isSelected && forcedColors.selectedLeaf,\n                    )}\n                  >\n                    {renderDay ? renderDay(day, number) : number}\n                    {isMarked && (\n                      // Decorative: the day's name says \"marked\". It is drawn in the text colour\n                      // of the day, so it follows the selected and forced-colors looks.\n                      <span\n                        aria-hidden=\"true\"\n                        className={cn(\n                          partClassNames?.markedDot,\n                          'pointer-events-none absolute inset-x-0 bottom-0.5 mx-auto h-1 w-1 rounded-full bg-current forced-colors:forced-color-adjust-none',\n                        )}\n                      />\n                    )}\n                  </button>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\nconst defaultMarkedDay = (dayLabel: string) => `${dayLabel}, marked`;\nconst defaultWeekNumber = (week: number) => `Week ${week}`;\n\n// The month and year cells: the day buttons' look in a wider cell (C-NATIVE padding and\n// background, the gated hover, the selected fill, and an unavailable cell struck through besides\n// the dimming of `disabledStyles`).\nconst PICKER_CELL_CLASSES =\n  'flex h-12 w-14 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through';\n\n/** The cells of a row of the month and year grids. */\nconst PICKER_COLUMNS = 4;\n\n/** Internal: one cell of the month or the year grid. */\nexport interface CalendarPickerCell {\n  /** The month (its 1st) or the year (its January 1). */\n  date: Date;\n  /** The visible text (`Jun`, `2025`). */\n  text: string;\n  /** The accessible name when it differs from the text (`June 2025`). */\n  label?: string;\n  /** The value's month or year (`aria-selected` on the cell, `aria-pressed` on the button). */\n  selected: boolean;\n  /** Today's month or year (`aria-current=\"date\"`). */\n  current: boolean;\n  /** A year before or after the decade (muted). */\n  outside: boolean;\n  /** Wholly outside `minDate`/`maxDate`: `aria-disabled`, focusable, not pickable. */\n  unavailable: boolean;\n}\n\n/** Internal: the stable classes of a month or year grid's parts. */\nexport interface CalendarPickerGridPartClassNames {\n  /** On the `role=\"grid\"` table. */\n  grid?: string;\n  /** On each cell button. */\n  cell?: string;\n}\n\n/** Internal props of {@link CalendarPickerGrid}. */\nexport interface CalendarPickerGridProps {\n  /** Id of the table (the header's buttons control it). */\n  id: string;\n  /** Id of the heading, which labels the table. */\n  headingId: string;\n  /** The 12 cells, in reading order (3 rows of 4). */\n  cells: readonly CalendarPickerCell[];\n  /** Index of the roving cell: the only cell button in the tab order. */\n  focusIndex: number;\n  /** Called with the number of cells a key moves by (arrows, Home and End). */\n  onMoveFocus: (delta: number) => void;\n  /** Called with the direction of PageUp (`-1`) and PageDown (`1`). */\n  onPage: (direction: -1 | 1) => void;\n  /** Called when a cell button receives focus (pointer or assistive technology). */\n  onCellFocus: (date: Date) => void;\n  /** Called with an available cell that is clicked (Enter and Space click the focused button). */\n  onPick: (date: Date) => void;\n  /** Called before the grid's own key handling (the calendar's Escape levels). */\n  onKeyDown?: React.KeyboardEventHandler<HTMLTableElement>;\n  /** Stable classes of the grid's parts. */\n  partClassNames?: CalendarPickerGridPartClassNames;\n  /** Ref to the table. */\n  ref?: React.Ref<HTMLTableElement>;\n}\n\n/**\n * Internal: the month view (the 12 months of a year) or the year view (a decade with the year\n * before and after it) of a calendar, a `role=\"grid\"` table of 3 rows of 4 cells with one roving\n * button in the tab order. Arrow keys move by a cell and a row (mirrored in RTL), Home/End to the\n * row's ends; PageUp/PageDown are passed to the view. Marked `data-wave-calendar-grid`, as the day\n * grid.\n */\nexport const CalendarPickerGrid = ({\n  id,\n  headingId,\n  cells,\n  focusIndex,\n  onMoveFocus,\n  onPage,\n  onCellFocus,\n  onPick,\n  onKeyDown,\n  partClassNames,\n  ref,\n}: CalendarPickerGridProps) => {\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey) return;\n    const column = focusIndex % PICKER_COLUMNS;\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowRight': {\n        const intent = getArrowIntent(event.key, {\n          orientation: 'horizontal',\n          dir: getDirection(event.currentTarget),\n        });\n        event.preventDefault();\n        onMoveFocus(intent === 'next' ? 1 : -1);\n        return;\n      }\n      case 'ArrowDown':\n        event.preventDefault();\n        onMoveFocus(PICKER_COLUMNS);\n        return;\n      case 'ArrowUp':\n        event.preventDefault();\n        onMoveFocus(-PICKER_COLUMNS);\n        return;\n      case 'Home':\n        event.preventDefault();\n        onMoveFocus(-column);\n        return;\n      case 'End':\n        event.preventDefault();\n        onMoveFocus(PICKER_COLUMNS - 1 - column);\n        return;\n      case 'PageDown':\n      case 'PageUp':\n        event.preventDefault();\n        onPage(event.key === 'PageDown' ? 1 : -1);\n        return;\n      default:\n      // Enter and Space activate the focused cell button natively (click).\n    }\n  };\n\n  const rows: CalendarPickerCell[][] = [];\n  for (let i = 0; i < cells.length; i += PICKER_COLUMNS) {\n    rows.push(cells.slice(i, i + PICKER_COLUMNS));\n  }\n\n  return (\n    <table\n      ref={ref}\n      id={id}\n      role=\"grid\"\n      aria-labelledby={headingId}\n      data-wave-calendar-grid=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      className={cn(partClassNames?.grid, 'border-collapse')}\n    >\n      <tbody>\n        {rows.map((row, rowIndex) => (\n          // Keyed by position, so the focused button survives a change of the year or decade.\n          <tr key={rowIndex}>\n            {row.map((cell, column) => {\n              const index = rowIndex * PICKER_COLUMNS + column;\n              return (\n                <td key={column} role=\"gridcell\" aria-selected={cell.selected} className=\"p-0\">\n                  <button\n                    type=\"button\"\n                    tabIndex={index === focusIndex ? 0 : -1}\n                    aria-label={cell.label}\n                    aria-pressed={cell.selected || undefined}\n                    aria-current={cell.current ? 'date' : undefined}\n                    {...focusableDisabledProps(cell.unavailable)}\n                    data-selected={cell.selected ? '' : undefined}\n                    data-today={cell.current ? '' : undefined}\n                    data-outside={cell.outside ? '' : undefined}\n                    onFocus={() => onCellFocus(cell.date)}\n                    onClick={() => {\n                      if (!cell.unavailable) onPick(cell.date);\n                    }}\n                    className={cn(\n                      partClassNames?.cell,\n                      PICKER_CELL_CLASSES,\n                      focusRing,\n                      disabledStyles,\n                      cell.selected && forcedColors.selectedLeaf,\n                    )}\n                  >\n                    {cell.text}\n                  </button>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nCalendarPickerGrid.displayName = 'CalendarPickerGrid';\n"],"mappings":"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"}

package/dist/components/input/Calendar.views.mjs

@@ -0,0 +1,194 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
+import { addDays as n, addMonths as r, getWeekNumber as i, isSameDay as a } from "../../lib/date.mjs";
+import { getArrowIntent as o, getDirection as s } from "../../lib/direction.mjs";
+import { focusableDisabledProps as c } from "../../lib/aria.mjs";
+import { disabledStyles as l, focusRing as u, forcedColors as d } from "../../lib/styles.mjs";
+import { formatDayLabel as f, formatDayNumber as p, formatISODate as m, getWeekdayNames as h, isSameMonth as g } from "./dateUtils.mjs";
+import * as _ from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/input/Calendar.views.tsx
+var b = "relative flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through", x = ({ id: t, headingId: x, viewMonth: w, weeks: T, focusTarget: E, selectedDays: D, today: O, firstDayOfWeek: k, locale: A, showWeekNumbers: j = !1, firstWeekOfYear: M = "first-day", markedDates: N, renderDay: P, dayLabel: F, labels: I, isUnavailable: L, onMoveFocus: R, onDayFocus: z, onPick: B, partClassNames: V, ref: H }) => {
+	let U = _.useMemo(() => h(A, k), [A, k]), W = m(E);
+	return /* @__PURE__ */ y("table", {
+		ref: H,
+		id: t,
+		role: "grid",
+		"aria-labelledby": x,
+		"data-wave-calendar-grid": "",
+		onKeyDown: (e) => {
+			if (e.altKey || e.ctrlKey || e.metaKey) return;
+			let t = (E.getDay() - k + 7) % 7, i;
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowRight": {
+					let t = o(e.key, {
+						orientation: "horizontal",
+						dir: s(e.currentTarget)
+					});
+					i = n(E, t === "next" ? 1 : -1);
+					break;
+				}
+				case "ArrowDown":
+					i = n(E, 7);
+					break;
+				case "ArrowUp":
+					i = n(E, -7);
+					break;
+				case "PageDown":
+					i = r(E, e.shiftKey ? 12 : 1);
+					break;
+				case "PageUp":
+					i = r(E, e.shiftKey ? -12 : -1);
+					break;
+				case "Home":
+					i = n(E, -t);
+					break;
+				case "End":
+					i = n(E, 6 - t);
+					break;
+				default: return;
+			}
+			e.preventDefault(), R(i);
+		},
+		className: e(V?.grid, "border-collapse"),
+		children: [/* @__PURE__ */ v("thead", { children: /* @__PURE__ */ y("tr", { children: [j && /* @__PURE__ */ y("th", {
+			scope: "col",
+			className: e(V?.weekNumberHeader, "h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground"),
+			children: [/* @__PURE__ */ v("span", {
+				"aria-hidden": "true",
+				children: "#"
+			}), /* @__PURE__ */ v("span", {
+				className: "sr-only",
+				children: I?.week ?? "Week"
+			})]
+		}), U.map((t) => /* @__PURE__ */ y("th", {
+			scope: "col",
+			abbr: t.long,
+			"aria-label": t.long,
+			className: e(V?.weekday, "h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground"),
+			children: [/* @__PURE__ */ v("span", {
+				"aria-hidden": "true",
+				children: t.short
+			}), /* @__PURE__ */ v("span", {
+				className: "sr-only",
+				children: t.long
+			})]
+		}, t.long))] }) }), /* @__PURE__ */ v("tbody", { children: T.map((t, n) => /* @__PURE__ */ y("tr", { children: [j && /* @__PURE__ */ v("th", {
+			scope: "row",
+			"aria-label": (I?.weekNumber ?? C)(i(t[0], {
+				firstDayOfWeek: k,
+				firstWeekOfYear: M
+			})),
+			className: e(V?.weekNumber, "h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground"),
+			children: i(t[0], {
+				firstDayOfWeek: k,
+				firstWeekOfYear: M
+			})
+		}), t.map((t, n) => {
+			let r = m(t), i = D.has(r), o = !!N?.(t), s = p(t, A), h = f(t, A), _ = o ? (I?.markedDay ?? S)(h) : h, x = a(t, O), C = r === W, T = L(t);
+			return /* @__PURE__ */ v("td", {
+				role: "gridcell",
+				"aria-selected": i,
+				className: "p-0",
+				children: /* @__PURE__ */ y("button", {
+					type: "button",
+					tabIndex: C ? 0 : -1,
+					"aria-label": F ? F(t, _) : _,
+					"aria-pressed": i || void 0,
+					"aria-current": x ? "date" : void 0,
+					...c(T),
+					"data-date": r,
+					"data-selected": i ? "" : void 0,
+					"data-today": x ? "" : void 0,
+					"data-marked": o ? "" : void 0,
+					"data-outside": g(t, w) ? void 0 : "",
+					onFocus: () => z(t),
+					onClick: () => {
+						T || B(t);
+					},
+					className: e(V?.day, b, u, l, i && d.selectedLeaf),
+					children: [P ? P(t, s) : s, o && /* @__PURE__ */ v("span", {
+						"aria-hidden": "true",
+						className: e(V?.markedDot, "pointer-events-none absolute inset-x-0 bottom-0.5 mx-auto h-1 w-1 rounded-full bg-current forced-colors:forced-color-adjust-none")
+					})]
+				})
+			}, n);
+		})] }, n)) })]
+	});
+};
+x.displayName = "CalendarDayGrid";
+var S = (e) => `${e}, marked`, C = (e) => `Week ${e}`, w = "flex h-12 w-14 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through", T = 4, E = ({ id: n, headingId: r, cells: i, focusIndex: a, onMoveFocus: f, onPage: p, onCellFocus: m, onPick: h, onKeyDown: g, partClassNames: _, ref: y }) => {
+	let b = (e) => {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = a % T;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowRight": {
+				let t = o(e.key, {
+					orientation: "horizontal",
+					dir: s(e.currentTarget)
+				});
+				e.preventDefault(), f(t === "next" ? 1 : -1);
+				return;
+			}
+			case "ArrowDown":
+				e.preventDefault(), f(T);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), f(-4);
+				return;
+			case "Home":
+				e.preventDefault(), f(-t);
+				return;
+			case "End":
+				e.preventDefault(), f(3 - t);
+				return;
+			case "PageDown":
+			case "PageUp":
+				e.preventDefault(), p(e.key === "PageDown" ? 1 : -1);
+				return;
+		}
+	}, x = [];
+	for (let e = 0; e < i.length; e += T) x.push(i.slice(e, e + T));
+	return /* @__PURE__ */ v("table", {
+		ref: y,
+		id: n,
+		role: "grid",
+		"aria-labelledby": r,
+		"data-wave-calendar-grid": "",
+		onKeyDown: t(g, b),
+		className: e(_?.grid, "border-collapse"),
+		children: /* @__PURE__ */ v("tbody", { children: x.map((t, n) => /* @__PURE__ */ v("tr", { children: t.map((t, r) => {
+			let i = n * T + r;
+			return /* @__PURE__ */ v("td", {
+				role: "gridcell",
+				"aria-selected": t.selected,
+				className: "p-0",
+				children: /* @__PURE__ */ v("button", {
+					type: "button",
+					tabIndex: i === a ? 0 : -1,
+					"aria-label": t.label,
+					"aria-pressed": t.selected || void 0,
+					"aria-current": t.current ? "date" : void 0,
+					...c(t.unavailable),
+					"data-selected": t.selected ? "" : void 0,
+					"data-today": t.current ? "" : void 0,
+					"data-outside": t.outside ? "" : void 0,
+					onFocus: () => m(t.date),
+					onClick: () => {
+						t.unavailable || h(t.date);
+					},
+					className: e(_?.cell, w, u, l, t.selected && d.selectedLeaf),
+					children: t.text
+				})
+			}, r);
+		}) }, n)) })
+	});
+};
+E.displayName = "CalendarPickerGrid";
+//#endregion
+export { x as CalendarDayGrid, E as CalendarPickerGrid };
+
+//# sourceMappingURL=Calendar.views.mjs.map

package/dist/components/input/Calendar.views.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.views.mjs","names":["React","DAY_CLASSES","CalendarDayGrid","weekdays","getWeekdayNames","locale","firstDayOfWeek","focusIso","formatISODate","focusTarget","headingId","event","weekOffset","next","intent","getArrowIntent","getDirection","addDays","addMonths","onMoveFocus","cn","partClassNames","showWeekNumbers","labels","weekday","weeks","defaultWeekNumber","getWeekNumber","week","iso","day","isSelected","selectedDays","isMarked","markedDates","number","formatDayNumber","baseLabel","formatDayLabel","defaultLabel","defaultMarkedDay","isToday","isSameDay","today","isFocused","unavailable","isUnavailable","dayLabel","focusableDisabledProps","isSameMonth","viewMonth","onDayFocus","onPick","focusRing","disabledStyles","forcedColors","renderDay","column","row","PICKER_CELL_CLASSES","PICKER_COLUMNS","CalendarPickerGrid","handleKeyDown","focusIndex","onPage","rows","i","cells","composeEventHandlers","onKeyDown","index","rowIndex","cell","onCellFocus"],"sources":["../../../src/components/input/Calendar.views.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DayOfWeek, FirstWeekOfYear } from '../../lib/types';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { focusableDisabledProps } from '../../lib/aria';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { disabledStyles, focusRing, forcedColors } from '../../lib/styles';\nimport { getWeekNumber } from '../../lib/date';\nimport type { CalendarLabels } from './Calendar';\nimport {\n  addDays,\n  addMonths,\n  formatDayLabel,\n  formatDayNumber,\n  formatISODate,\n  getWeekdayNames,\n  isSameDay,\n  isSameMonth,\n} from './dateUtils';\n\n// An unavailable day stays focusable in the roving grid (`aria-disabled`); the day button adds\n// `disabledStyles`, whose dimmed look lifts while the focus ring shows (opacity would dim the ring).\nconst DAY_CLASSES =\n  'relative flex h-8 w-8 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through';\n\n/** Internal: the stable classes of the day view's parts (see `CalendarDayGridProps.partClassNames`). */\nexport interface CalendarDayGridPartClassNames {\n  /** On the `role=\"grid\"` table. */\n  grid?: string;\n  /** On each weekday header cell. */\n  weekday?: string;\n  /** On each day button. */\n  day?: string;\n  /** On the header cell of the week-number column. */\n  weekNumberHeader?: string;\n  /** On each week's row header (its number). */\n  weekNumber?: string;\n  /** On the dot inside the button of a marked day. */\n  markedDot?: string;\n}\n\n/** Internal props of {@link CalendarDayGrid}. */\nexport interface CalendarDayGridProps {\n  /** Id of the table (the header's month buttons control it). */\n  id: string;\n  /** Id of the month heading, which labels the table. */\n  headingId: string;\n  /** The month the grid shows; days of other months are marked `data-outside`. */\n  viewMonth: Date;\n  /** The 42 days of the grid as 6 weeks. */\n  weeks: Date[][];\n  /** The roving day: the only day button in the tab order, and the start of the arrow keys. */\n  focusTarget: Date;\n  /**\n   * The selected days as ISO dates (`yyyy-mm-dd`): `aria-selected` on their cells, `aria-pressed`\n   * and `data-selected` on their buttons.\n   */\n  selectedDays: ReadonlySet<string>;\n  /** Today's day (`aria-current=\"date\"`), or `null` while it is unknown (no day is marked). */\n  today: Date | null;\n  /** First day of the week, the first column (Home and End move to the row's ends). */\n  firstDayOfWeek: DayOfWeek;\n  /** BCP 47 locale of the weekday names, the day numbers and the day labels. */\n  locale?: string;\n  /** Adds a leading column of week numbers. @default false */\n  showWeekNumbers?: boolean;\n  /** Which week is week 1 of a year. @default 'first-day' */\n  firstWeekOfYear?: FirstWeekOfYear;\n  /** Returns `true` for days that draw a dot and are named \"marked\". */\n  markedDates?: (date: Date) => boolean;\n  /** Replaces the content of a day button (`defaultContent` is the day number). */\n  renderDay?: (date: Date, defaultContent: React.ReactNode) => React.ReactNode;\n  /** The accessible name of a day, from its default name (marked included). */\n  dayLabel?: (date: Date, defaultLabel: string) => string;\n  /** Names of the week-number column and the marked days. */\n  labels?: CalendarLabels;\n  /** Whether a day cannot be picked; it stays focusable and is `aria-disabled`. */\n  isUnavailable: (date: Date) => boolean;\n  /** Called with the day a key moves to (before clamping into the bounds). */\n  onMoveFocus: (date: Date) => void;\n  /** Called when a day button receives focus (pointer or assistive technology). */\n  onDayFocus: (date: Date) => void;\n  /** Called with an available day that is clicked (Enter and Space click the focused button). */\n  onPick: (date: Date) => void;\n  /** Stable classes of the grid's parts, from the component that renders the view. */\n  partClassNames?: CalendarDayGridPartClassNames;\n  /** Ref to the table. */\n  ref?: React.Ref<HTMLTableElement>;\n}\n\n/**\n * Internal: the day view of a calendar, a `role=\"grid\"` table of 6 weeks with one roving day\n * button in the tab order. Arrow keys move by day and week (mirrored in RTL), PageUp/PageDown by\n * month, Shift+PageUp/PageDown by year, Home/End to the start and end of the week; Enter and Space\n * click the focused day button. Marked `data-wave-calendar-grid`, so a surrounding focus trap\n * finds its tab stop.\n */\nexport const CalendarDayGrid = ({\n  id,\n  headingId,\n  viewMonth,\n  weeks,\n  focusTarget,\n  selectedDays,\n  today,\n  firstDayOfWeek,\n  locale,\n  showWeekNumbers = false,\n  firstWeekOfYear = 'first-day',\n  markedDates,\n  renderDay,\n  dayLabel,\n  labels,\n  isUnavailable,\n  onMoveFocus,\n  onDayFocus,\n  onPick,\n  partClassNames,\n  ref,\n}: CalendarDayGridProps) => {\n  const weekdays = React.useMemo(\n    () => getWeekdayNames(locale, firstDayOfWeek),\n    [locale, firstDayOfWeek],\n  );\n  const focusIso = formatISODate(focusTarget);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey) return;\n    const weekOffset = (focusTarget.getDay() - firstDayOfWeek + 7) % 7;\n    let next: Date;\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowRight': {\n        const intent = getArrowIntent(event.key, {\n          orientation: 'horizontal',\n          dir: getDirection(event.currentTarget),\n        });\n        next = addDays(focusTarget, intent === 'next' ? 1 : -1);\n        break;\n      }\n      case 'ArrowDown':\n        next = addDays(focusTarget, 7);\n        break;\n      case 'ArrowUp':\n        next = addDays(focusTarget, -7);\n        break;\n      case 'PageDown':\n        next = addMonths(focusTarget, event.shiftKey ? 12 : 1);\n        break;\n      case 'PageUp':\n        next = addMonths(focusTarget, event.shiftKey ? -12 : -1);\n        break;\n      case 'Home':\n        next = addDays(focusTarget, -weekOffset);\n        break;\n      case 'End':\n        next = addDays(focusTarget, 6 - weekOffset);\n        break;\n      default:\n        // Enter and Space activate the focused day button natively (click).\n        return;\n    }\n    event.preventDefault();\n    onMoveFocus(next);\n  };\n\n  return (\n    <table\n      ref={ref}\n      id={id}\n      role=\"grid\"\n      aria-labelledby={headingId}\n      data-wave-calendar-grid=\"\"\n      onKeyDown={handleKeyDown}\n      className={cn(partClassNames?.grid, 'border-collapse')}\n    >\n      <thead>\n        <tr>\n          {showWeekNumbers && (\n            // The weekday headers' pattern: a visible symbol hidden from assistive technology and\n            // a visually hidden name (an aria-label alone on an empty header fails axe).\n            <th\n              scope=\"col\"\n              className={cn(\n                partClassNames?.weekNumberHeader,\n                'h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground',\n              )}\n            >\n              <span aria-hidden=\"true\">#</span>\n              <span className=\"sr-only\">{labels?.week ?? 'Week'}</span>\n            </th>\n          )}\n          {weekdays.map((weekday) => (\n            <th\n              key={weekday.long}\n              scope=\"col\"\n              abbr={weekday.long}\n              aria-label={weekday.long}\n              className={cn(\n                partClassNames?.weekday,\n                'h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground',\n              )}\n            >\n              <span aria-hidden=\"true\">{weekday.short}</span>\n              <span className=\"sr-only\">{weekday.long}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {weeks.map((week, row) => (\n          // Rows and cells are keyed by position, so the focused button survives a month change\n          // and focus stays in the grid while it moves to the new day.\n          <tr key={row}>\n            {showWeekNumbers && (\n              <th\n                scope=\"row\"\n                aria-label={(labels?.weekNumber ?? defaultWeekNumber)(\n                  getWeekNumber(week[0], { firstDayOfWeek, firstWeekOfYear }),\n                )}\n                className={cn(\n                  partClassNames?.weekNumber,\n                  'h-8 w-8 text-center text-caption-1 font-normal text-muted-foreground',\n                )}\n              >\n                {getWeekNumber(week[0], { firstDayOfWeek, firstWeekOfYear })}\n              </th>\n            )}\n            {week.map((day, column) => {\n              const iso = formatISODate(day);\n              const isSelected = selectedDays.has(iso);\n              const isMarked = !!markedDates?.(day);\n              const number = formatDayNumber(day, locale);\n              const baseLabel = formatDayLabel(day, locale);\n              const defaultLabel = isMarked\n                ? (labels?.markedDay ?? defaultMarkedDay)(baseLabel)\n                : baseLabel;\n              const isToday = isSameDay(day, today);\n              const isFocused = iso === focusIso;\n              const unavailable = isUnavailable(day);\n              return (\n                <td key={column} role=\"gridcell\" aria-selected={isSelected} className=\"p-0\">\n                  {/* Focus rests on the button, and screen readers do not reliably announce the\n                      gridcell's aria-selected from inside it: the selected day's button is also\n                      pressed. */}\n                  <button\n                    type=\"button\"\n                    tabIndex={isFocused ? 0 : -1}\n                    aria-label={dayLabel ? dayLabel(day, defaultLabel) : defaultLabel}\n                    aria-pressed={isSelected || undefined}\n                    aria-current={isToday ? 'date' : undefined}\n                    {...focusableDisabledProps(unavailable)}\n                    data-date={iso}\n                    data-selected={isSelected ? '' : undefined}\n                    data-today={isToday ? '' : undefined}\n                    data-marked={isMarked ? '' : undefined}\n                    data-outside={isSameMonth(day, viewMonth) ? undefined : ''}\n                    onFocus={() => onDayFocus(day)}\n                    onClick={() => {\n                      if (!unavailable) onPick(day);\n                    }}\n                    className={cn(\n                      partClassNames?.day,\n                      DAY_CLASSES,\n                      focusRing,\n                      disabledStyles,\n                      isSelected && forcedColors.selectedLeaf,\n                    )}\n                  >\n                    {renderDay ? renderDay(day, number) : number}\n                    {isMarked && (\n                      // Decorative: the day's name says \"marked\". It is drawn in the text colour\n                      // of the day, so it follows the selected and forced-colors looks.\n                      <span\n                        aria-hidden=\"true\"\n                        className={cn(\n                          partClassNames?.markedDot,\n                          'pointer-events-none absolute inset-x-0 bottom-0.5 mx-auto h-1 w-1 rounded-full bg-current forced-colors:forced-color-adjust-none',\n                        )}\n                      />\n                    )}\n                  </button>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\nconst defaultMarkedDay = (dayLabel: string) => `${dayLabel}, marked`;\nconst defaultWeekNumber = (week: number) => `Week ${week}`;\n\n// The month and year cells: the day buttons' look in a wider cell (C-NATIVE padding and\n// background, the gated hover, the selected fill, and an unavailable cell struck through besides\n// the dimming of `disabledStyles`).\nconst PICKER_CELL_CLASSES =\n  'flex h-12 w-14 items-center justify-center rounded bg-transparent p-0 text-caption-1 text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover data-[outside]:text-muted-foreground data-[today]:border data-[today]:border-primary data-[today]:font-semibold data-[selected]:bg-primary data-[selected]:font-semibold data-[selected]:text-primary-foreground not-disabled:not-aria-disabled:data-[selected]:hover:bg-primary-hover aria-disabled:line-through';\n\n/** The cells of a row of the month and year grids. */\nconst PICKER_COLUMNS = 4;\n\n/** Internal: one cell of the month or the year grid. */\nexport interface CalendarPickerCell {\n  /** The month (its 1st) or the year (its January 1). */\n  date: Date;\n  /** The visible text (`Jun`, `2025`). */\n  text: string;\n  /** The accessible name when it differs from the text (`June 2025`). */\n  label?: string;\n  /** The value's month or year (`aria-selected` on the cell, `aria-pressed` on the button). */\n  selected: boolean;\n  /** Today's month or year (`aria-current=\"date\"`). */\n  current: boolean;\n  /** A year before or after the decade (muted). */\n  outside: boolean;\n  /** Wholly outside `minDate`/`maxDate`: `aria-disabled`, focusable, not pickable. */\n  unavailable: boolean;\n}\n\n/** Internal: the stable classes of a month or year grid's parts. */\nexport interface CalendarPickerGridPartClassNames {\n  /** On the `role=\"grid\"` table. */\n  grid?: string;\n  /** On each cell button. */\n  cell?: string;\n}\n\n/** Internal props of {@link CalendarPickerGrid}. */\nexport interface CalendarPickerGridProps {\n  /** Id of the table (the header's buttons control it). */\n  id: string;\n  /** Id of the heading, which labels the table. */\n  headingId: string;\n  /** The 12 cells, in reading order (3 rows of 4). */\n  cells: readonly CalendarPickerCell[];\n  /** Index of the roving cell: the only cell button in the tab order. */\n  focusIndex: number;\n  /** Called with the number of cells a key moves by (arrows, Home and End). */\n  onMoveFocus: (delta: number) => void;\n  /** Called with the direction of PageUp (`-1`) and PageDown (`1`). */\n  onPage: (direction: -1 | 1) => void;\n  /** Called when a cell button receives focus (pointer or assistive technology). */\n  onCellFocus: (date: Date) => void;\n  /** Called with an available cell that is clicked (Enter and Space click the focused button). */\n  onPick: (date: Date) => void;\n  /** Called before the grid's own key handling (the calendar's Escape levels). */\n  onKeyDown?: React.KeyboardEventHandler<HTMLTableElement>;\n  /** Stable classes of the grid's parts. */\n  partClassNames?: CalendarPickerGridPartClassNames;\n  /** Ref to the table. */\n  ref?: React.Ref<HTMLTableElement>;\n}\n\n/**\n * Internal: the month view (the 12 months of a year) or the year view (a decade with the year\n * before and after it) of a calendar, a `role=\"grid\"` table of 3 rows of 4 cells with one roving\n * button in the tab order. Arrow keys move by a cell and a row (mirrored in RTL), Home/End to the\n * row's ends; PageUp/PageDown are passed to the view. Marked `data-wave-calendar-grid`, as the day\n * grid.\n */\nexport const CalendarPickerGrid = ({\n  id,\n  headingId,\n  cells,\n  focusIndex,\n  onMoveFocus,\n  onPage,\n  onCellFocus,\n  onPick,\n  onKeyDown,\n  partClassNames,\n  ref,\n}: CalendarPickerGridProps) => {\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey) return;\n    const column = focusIndex % PICKER_COLUMNS;\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowRight': {\n        const intent = getArrowIntent(event.key, {\n          orientation: 'horizontal',\n          dir: getDirection(event.currentTarget),\n        });\n        event.preventDefault();\n        onMoveFocus(intent === 'next' ? 1 : -1);\n        return;\n      }\n      case 'ArrowDown':\n        event.preventDefault();\n        onMoveFocus(PICKER_COLUMNS);\n        return;\n      case 'ArrowUp':\n        event.preventDefault();\n        onMoveFocus(-PICKER_COLUMNS);\n        return;\n      case 'Home':\n        event.preventDefault();\n        onMoveFocus(-column);\n        return;\n      case 'End':\n        event.preventDefault();\n        onMoveFocus(PICKER_COLUMNS - 1 - column);\n        return;\n      case 'PageDown':\n      case 'PageUp':\n        event.preventDefault();\n        onPage(event.key === 'PageDown' ? 1 : -1);\n        return;\n      default:\n      // Enter and Space activate the focused cell button natively (click).\n    }\n  };\n\n  const rows: CalendarPickerCell[][] = [];\n  for (let i = 0; i < cells.length; i += PICKER_COLUMNS) {\n    rows.push(cells.slice(i, i + PICKER_COLUMNS));\n  }\n\n  return (\n    <table\n      ref={ref}\n      id={id}\n      role=\"grid\"\n      aria-labelledby={headingId}\n      data-wave-calendar-grid=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      className={cn(partClassNames?.grid, 'border-collapse')}\n    >\n      <tbody>\n        {rows.map((row, rowIndex) => (\n          // Keyed by position, so the focused button survives a change of the year or decade.\n          <tr key={rowIndex}>\n            {row.map((cell, column) => {\n              const index = rowIndex * PICKER_COLUMNS + column;\n              return (\n                <td key={column} role=\"gridcell\" aria-selected={cell.selected} className=\"p-0\">\n                  <button\n                    type=\"button\"\n                    tabIndex={index === focusIndex ? 0 : -1}\n                    aria-label={cell.label}\n                    aria-pressed={cell.selected || undefined}\n                    aria-current={cell.current ? 'date' : undefined}\n                    {...focusableDisabledProps(cell.unavailable)}\n                    data-selected={cell.selected ? '' : undefined}\n                    data-today={cell.current ? '' : undefined}\n                    data-outside={cell.outside ? '' : undefined}\n                    onFocus={() => onCellFocus(cell.date)}\n                    onClick={() => {\n                      if (!cell.unavailable) onPick(cell.date);\n                    }}\n                    className={cn(\n                      partClassNames?.cell,\n                      PICKER_CELL_CLASSES,\n                      focusRing,\n                      disabledStyles,\n                      cell.selected && forcedColors.selectedLeaf,\n                    )}\n                  >\n                    {cell.text}\n                  </button>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nCalendarPickerGrid.displayName = 'CalendarPickerGrid';\n"],"mappings":"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"}

package/dist/components/input/ColorArea.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/color.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../lib/direction.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),ee=require("../../hooks/useMediaQuery.cjs"),l=require("../../hooks/useFormReset.cjs"),u=require("../internal/HiddenInput.cjs"),d=require("./colorUtils.cjs"),f=require("./ColorPicker.parts.cjs"),p=require("../../lib/events.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var te={saturation:`Saturation`,brightness:`Brightness`,roleDescription:`2D slider`};function g(e){return Math.min(100,Math.max(0,e))}var _=`(pointer: coarse)`,v=({value:e,defaultValue:v,onValueChange:y,shape:b,labels:x,disabled:S=!1,name:C,form:w,required:ne,controlRef:re,className:ie,style:ae,id:oe,"aria-label":se,"aria-labelledby":T,"aria-describedby":ce,"aria-invalid":le,"aria-required":E,"aria-errormessage":ue,autoFocus:de,tabIndex:fe,onKeyDown:D,onPointerDown:O,onPointerMove:k,ref:A,...j})=>{let M=f.useColorPartState({value:e,defaultValue:v,onValueChange:y,disabled:S}),{picker:N}=M,P={...te,...N&&{saturation:N.labels.saturation,brightness:N.labels.brightness,roleDescription:N.labels.roleDescription,colorName:N.labels.colorName,valueText:N.labels.valueText},...x},F=b??N?.shape??`rounded`,I=M.color,L=d.displayColor(I),R=d.toPercent(L.s),z=d.toPercent(L.v),[B,V]=m.useState(`saturation`),pe=ee.useMediaQuery(_),H=m.useRef(null),[U,me]=m.useState(0),W=m.useRef(null),G=m.useRef(null),K=m.useRef(null),he=s.useMergedRefs(A,W),ge=s.useMergedRefs(G,re),q=m.useRef(0);m.useLayoutEffect(()=>{q.current!==U&&(q.current=U,(B===`saturation`?G:K).current?.focus({preventScroll:!0}))},[B,U]);let _e=c.useFieldContext(),{"aria-invalid":J,"aria-required":ve,required:ye,...be}=c.useFieldControl({id:oe,"aria-label":se??(N&&T===void 0?N.labels.area:void 0),"aria-labelledby":T,"aria-describedby":ce,"aria-invalid":le},{labelable:!1}),xe=J!==void 0&&J!==!1&&J!==`false`&&ue||void 0,Se=ne??(E===!0||E===`true`||(_e?.required??!1));l.useFormReset(W,M.reset,w);let Y=(e,t)=>{t!==(e===`saturation`?R:z)&&M.setColor(e===`saturation`?{...I,s:t/100}:{...I,v:t/100})},Ce=n.composeEventHandlers(D,e=>{if(M.disabled||!p.isOwnEvent(e)||e.nativeEvent.isComposing||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.shiftKey?10:1,n,r;switch(e.key){case`ArrowLeft`:case`ArrowRight`:{let i=o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.getDirection(e.currentTarget)});n=`saturation`,r=R+(i===`next`?t:-t);break}case`ArrowUp`:n=`value`,r=z+t;break;case`ArrowDown`:n=`value`,r=z-t;break;case`PageUp`:n=`value`,r=z+10;break;case`PageDown`:n=`value`,r=z-10;break;case`Home`:n=`saturation`,r=0;break;case`End`:n=`saturation`,r=100;break;default:return}e.preventDefault(),n!==B&&V(n),me(e=>e+1),Y(n,g(r))}),X=e=>t=>{M.disabled||(e!==B&&V(e),Y(e,g(Math.round(Number(t.currentTarget.value)))))},we=e=>()=>{e!==B&&V(e)},Z=a.useEventCallback(e=>{let t=H.current;if(!t)return;let n=t.getBoundingClientRect();if(n.width<=0||n.height<=0)return;let r=Math.min(1,Math.max(0,(e.clientX-n.left)/n.width)),i=o.getDirection(e.currentTarget)===`rtl`?1-r:r,a=Math.min(1,Math.max(0,1-(e.clientY-n.top)/n.height));(i!==L.s||a!==L.v)&&M.setColor({...I,s:i,v:a})}),Te=a.useEventCallback(()=>{(B===`saturation`?G:K).current?.focus({preventScroll:!0,focusVisible:!1})}),Ee=n.composeEventHandlers(O,e=>{!M.disabled&&e.button===0&&e.isPrimary&&p.isOwnEvent(e)&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),Z(e),Te())}),De=n.composeEventHandlers(k,e=>{!M.disabled&&e.currentTarget.hasPointerCapture(e.pointerId)&&Z(e)}),Q={saturation:P.saturation,brightness:P.brightness,colorName:P.colorName,valueText:P.valueText},Oe={...ae,"--wave-color-area-gradient":d.colorAreaGradient(L.h),"--wave-color-area-x":d.toPosition(L.s),"--wave-color-area-y":d.toPosition(L.v),"--wave-color-thumb":i.hsvToHex({h:L.h,s:L.s,v:L.v})},$=e=>({type:`range`,min:0,max:100,step:1,disabled:M.disabled,"aria-roledescription":P.roleDescription,"aria-invalid":J,"aria-errormessage":xe,tabIndex:e===B?fe??0:-1,"aria-hidden":e!==B&&!pe||void 0,onChange:X(e),onFocus:we(e),className:`sr-only`});return(0,h.jsxs)(`div`,{role:`group`,"data-disabled":M.disabled?``:void 0,...be,className:t.cn(r.colorAreaClassNames.root,`group/color-area relative h-40 w-full min-w-40 touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,F===`square`?`rounded-none`:`rounded`,ie),style:Oe,...j,ref:he,onKeyDown:Ce,onPointerDown:Ee,onPointerMove:De,children:[(0,h.jsx)(`div`,{ref:H,"aria-hidden":`true`,className:t.cn(r.colorAreaClassNames.field,`absolute inset-0 rounded-[inherit] bg-(image:--wave-color-area-gradient) wave-rtl:-scale-x-100 forced-colors:forced-color-adjust-none`)}),(0,h.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(r.colorAreaClassNames.thumb,d.COLOR_THUMB_CLASSES,`start-(--wave-color-area-x) bottom-(--wave-color-area-y) -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2`,`group-has-[:focus-visible]/color-area:ring-2 group-has-[:focus-visible]/color-area:ring-background forced-colors:group-has-[:focus-visible]/color-area:ring-[Canvas] group-has-[:focus-visible]/color-area:outline-2 group-has-[:focus-visible]/color-area:outline-offset-2 group-has-[:focus-visible]/color-area:outline-ring forced-colors:group-has-[:focus-visible]/color-area:outline-[Highlight]`)}),(0,h.jsx)(`input`,{...$(`saturation`),ref:ge,value:R,"aria-label":P.saturation,"aria-valuetext":d.areaValueText(L,`saturation`,Q),autoFocus:de}),(0,h.jsx)(`input`,{...$(`value`),ref:K,value:z,"aria-label":P.brightness,"aria-orientation":`vertical`,"aria-valuetext":d.areaValueText(L,`value`,Q)}),!N&&(0,h.jsx)(u.HiddenInput,{type:`text`,name:C,form:w,disabled:M.disabled,value:i.hsvToHex(I),required:Se,onInvalid:()=>(B===`saturation`?G:K).current?.focus()})]})};v.displayName=`ColorArea`,exports.ColorArea=v;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/color.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../lib/direction.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),ee=require("../../hooks/useMediaQuery.cjs"),l=require("../../hooks/useFormReset.cjs"),u=require("../internal/HiddenInput.cjs"),d=require("../../lib/events.cjs"),f=require("./colorUtils.cjs"),p=require("./ColorPicker.parts.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var te={saturation:`Saturation`,brightness:`Brightness`,roleDescription:`2D slider`};function g(e){return Math.min(100,Math.max(0,e))}var _=`(pointer: coarse)`,v=({value:e,defaultValue:v,onValueChange:y,shape:b,labels:x,disabled:S=!1,name:C,form:w,required:ne,controlRef:re,className:ie,style:ae,id:oe,"aria-label":se,"aria-labelledby":T,"aria-describedby":ce,"aria-invalid":le,"aria-required":E,"aria-errormessage":ue,autoFocus:de,tabIndex:fe,onKeyDown:D,onPointerDown:O,onPointerMove:k,ref:A,...j})=>{let M=p.useColorPartState({value:e,defaultValue:v,onValueChange:y,disabled:S}),{picker:N}=M,P={...te,...N&&{saturation:N.labels.saturation,brightness:N.labels.brightness,roleDescription:N.labels.roleDescription,colorName:N.labels.colorName,valueText:N.labels.valueText},...x},F=b??N?.shape??`rounded`,I=M.color,L=f.displayColor(I),R=f.toPercent(L.s),z=f.toPercent(L.v),[B,V]=m.useState(`saturation`),pe=ee.useMediaQuery(_),H=m.useRef(null),[U,me]=m.useState(0),W=m.useRef(null),G=m.useRef(null),K=m.useRef(null),he=s.useMergedRefs(A,W),ge=s.useMergedRefs(G,re),q=m.useRef(0);m.useLayoutEffect(()=>{q.current!==U&&(q.current=U,(B===`saturation`?G:K).current?.focus({preventScroll:!0}))},[B,U]);let _e=c.useFieldContext(),{"aria-invalid":J,"aria-required":ve,required:ye,...be}=c.useFieldControl({id:oe,"aria-label":se??(N&&T===void 0?N.labels.area:void 0),"aria-labelledby":T,"aria-describedby":ce,"aria-invalid":le},{labelable:!1}),xe=J!==void 0&&J!==!1&&J!==`false`&&ue||void 0,Se=ne??(E===!0||E===`true`||(_e?.required??!1));l.useFormReset(W,M.reset,w);let Y=(e,t)=>{t!==(e===`saturation`?R:z)&&M.setColor(e===`saturation`?{...I,s:t/100}:{...I,v:t/100})},Ce=n.composeEventHandlers(D,e=>{if(M.disabled||!d.isOwnEvent(e)||e.nativeEvent.isComposing||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.shiftKey?10:1,n,r;switch(e.key){case`ArrowLeft`:case`ArrowRight`:{let i=o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.getDirection(e.currentTarget)});n=`saturation`,r=R+(i===`next`?t:-t);break}case`ArrowUp`:n=`value`,r=z+t;break;case`ArrowDown`:n=`value`,r=z-t;break;case`PageUp`:n=`value`,r=z+10;break;case`PageDown`:n=`value`,r=z-10;break;case`Home`:n=`saturation`,r=0;break;case`End`:n=`saturation`,r=100;break;default:return}e.preventDefault(),n!==B&&V(n),me(e=>e+1),Y(n,g(r))}),X=e=>t=>{M.disabled||(e!==B&&V(e),Y(e,g(Math.round(Number(t.currentTarget.value)))))},we=e=>()=>{e!==B&&V(e)},Z=a.useEventCallback(e=>{let t=H.current;if(!t)return;let n=t.getBoundingClientRect();if(n.width<=0||n.height<=0)return;let r=Math.min(1,Math.max(0,(e.clientX-n.left)/n.width)),i=o.getDirection(e.currentTarget)===`rtl`?1-r:r,a=Math.min(1,Math.max(0,1-(e.clientY-n.top)/n.height));(i!==L.s||a!==L.v)&&M.setColor({...I,s:i,v:a})}),Te=a.useEventCallback(()=>{(B===`saturation`?G:K).current?.focus({preventScroll:!0,focusVisible:!1})}),Ee=n.composeEventHandlers(O,e=>{!M.disabled&&e.button===0&&e.isPrimary&&d.isOwnEvent(e)&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),Z(e),Te())}),De=n.composeEventHandlers(k,e=>{!M.disabled&&e.currentTarget.hasPointerCapture(e.pointerId)&&Z(e)}),Q={saturation:P.saturation,brightness:P.brightness,colorName:P.colorName,valueText:P.valueText},Oe={...ae,"--wave-color-area-gradient":f.colorAreaGradient(L.h),"--wave-color-area-x":f.toPosition(L.s),"--wave-color-area-y":f.toPosition(L.v),"--wave-color-thumb":i.hsvToHex({h:L.h,s:L.s,v:L.v})},$=e=>({type:`range`,min:0,max:100,step:1,disabled:M.disabled,"aria-roledescription":P.roleDescription,"aria-invalid":J,"aria-errormessage":xe,tabIndex:e===B?fe??0:-1,"aria-hidden":e!==B&&!pe||void 0,onChange:X(e),onFocus:we(e),className:`sr-only`});return(0,h.jsxs)(`div`,{role:`group`,"data-disabled":M.disabled?``:void 0,...be,className:t.cn(r.colorAreaClassNames.root,`group/color-area relative h-40 w-full min-w-40 touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,F===`square`?`rounded-none`:`rounded`,ie),style:Oe,...j,ref:he,onKeyDown:Ce,onPointerDown:Ee,onPointerMove:De,children:[(0,h.jsx)(`div`,{ref:H,"aria-hidden":`true`,className:t.cn(r.colorAreaClassNames.field,`absolute inset-0 rounded-[inherit] bg-(image:--wave-color-area-gradient) wave-rtl:-scale-x-100 forced-colors:forced-color-adjust-none`)}),(0,h.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(r.colorAreaClassNames.thumb,f.COLOR_THUMB_CLASSES,`start-(--wave-color-area-x) bottom-(--wave-color-area-y) -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2`,`group-has-[:focus-visible]/color-area:ring-2 group-has-[:focus-visible]/color-area:ring-background forced-colors:group-has-[:focus-visible]/color-area:ring-[Canvas] group-has-[:focus-visible]/color-area:outline-2 group-has-[:focus-visible]/color-area:outline-offset-2 group-has-[:focus-visible]/color-area:outline-ring forced-colors:group-has-[:focus-visible]/color-area:outline-[Highlight]`)}),(0,h.jsx)(`input`,{...$(`saturation`),ref:ge,value:R,"aria-label":P.saturation,"aria-valuetext":f.areaValueText(L,`saturation`,Q),autoFocus:de}),(0,h.jsx)(`input`,{...$(`value`),ref:K,value:z,"aria-label":P.brightness,"aria-orientation":`vertical`,"aria-valuetext":f.areaValueText(L,`value`,Q)}),!N&&(0,h.jsx)(u.HiddenInput,{type:`text`,name:C,form:w,disabled:M.disabled,value:i.hsvToHex(I),required:Se,onInvalid:()=>(B===`saturation`?G:K).current?.focus()})]})};v.displayName=`ColorArea`,exports.ColorArea=v;
 //# sourceMappingURL=ColorArea.cjs.map