@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/calendar/Calendar.tsx

@@ -1,338 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useMemo, useRef, useState } from 'react'
-import classNames from 'classnames'
-import { AriaCalendarProps, mergeProps, useCalendar, useCalendarCell, useLocale } from 'react-aria'
-import { CalendarState as StatelyCalendarState, DateValue, useCalendarState } from 'react-stately'
-import {
-  CalendarDate,
-  createCalendar,
-  getLocalTimeZone,
-  isToday,
-  isWeekend,
-  today
-} from '@internationalized/date'
-
-import { useForkedRef } from '../../hooks'
-import { CalendarMonthBlock } from './CalendarMonthBlock'
-import { CalendarMonthYearPicker } from './CalendarMonthYearPicker'
-import { CalendarNavButton } from './CalendarNavButton'
-import { CalendarWeekGrid } from './CalendarWeekGrid'
-import { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'
-import './Calendar.scss'
-import { CalendarLabels, CalendarLabelsProvider } from './labels'
-
-interface CalendarBaseProps extends Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'onChange' | 'defaultValue'
-> {
-  /**
-   * An accessible label for the calendar, used when there's no visible label. Required for
-   * standalone use — a calendar grid has no other accessible name of its own.
-   */
-  'aria-label'?: string
-  /**
-   * Identifies a visible label element for the calendar.
-   */
-  'aria-labelledby'?: string
-  /**
-   * Whether to automatically focus the calendar when it mounts.
-   */
-  autoFocus?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Prevents the calendar from being focused or interacted with.
-   */
-  disabled?: boolean
-  /**
-   * The day that starts the week, overriding the default set by the active locale.
-   *
-   * @default 'mon'
-   */
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
-  /**
-   * Callback that is called for each date in the calendar. If it returns `true`, that date is
-   * shown but cannot be selected.
-   */
-  isDateUnavailable?: (date: DateValue) => boolean
-  /**
-   * Overrides for the handful of strings this component renders itself rather than getting from
-   * the active locale (the year view's paging arrows, its live-region announcements, and the
-   * month/year header buttons). Everything else — month and weekday names, the calendar system —
-   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English
-   * defaults, so passing one key leaves the rest alone.
-   */
-  labels?: Partial<CalendarLabels>
-  /**
-   * The maximum allowed date that a user may select.
-   */
-  maxValue?: DateValue | null
-  /**
-   * The minimum allowed date that a user may select.
-   */
-  minValue?: DateValue | null
-  /**
-   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
-   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
-   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
-   */
-  unavailableDates?: string[]
-  /**
-   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in
-   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is
-   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of
-   * where the calendar is embedded.
-   *
-   * @default 1
-   */
-  visibleMonths?: number
-}
-
-export interface CalendarSingleProps extends CalendarBaseProps {
-  /**
-   * The initial selected date (uncontrolled).
-   */
-  defaultValue?: DateValue | null
-  /**
-   * Callback fired when the selected date changes. Unlike `DatePicker`'s `onChange` (whose
-   * segmented field can be cleared to `null`), a calendar selection is always a concrete date.
-   */
-  onChange?: (value: DateValue) => void
-  /**
-   * Whether a single date or multiple, independently toggled dates can be selected.
-   *
-   * @default 'single'
-   */
-  selectionMode?: 'single'
-  /**
-   * The selected date (controlled).
-   */
-  value?: DateValue | null
-}
-
-export interface CalendarMultipleProps extends CalendarBaseProps {
-  /**
-   * The initial selected dates (uncontrolled).
-   */
-  defaultValue?: DateValue[] | null
-  /**
-   * Callback fired when the set of selected dates changes.
-   */
-  onChange?: (value: DateValue[]) => void
-  /**
-   * Whether a single date or multiple, independently toggled dates can be selected.
-   *
-   * @default 'single'
-   */
-  selectionMode: 'multiple'
-  /**
-   * The selected dates (controlled).
-   */
-  value?: DateValue[] | null
-}
-
-export type CalendarProps = CalendarSingleProps | CalendarMultipleProps
-
-// Public, standalone calendar grid — also used internally by `DatePicker` to render the grid
-// inside its popover. Deliberately has no knowledge of dialog/popover semantics (role="dialog",
-// focus trapping, etc.) — that's the caller's concern, layered on via the `...rest` passthrough
-// below (see `DatePicker`, which merges its own `useDialog` output in this way).
-//
-// `selectionMode` is a discriminated union on the public props (single vs. multiple value/
-// onChange shapes), bridged onto one underlying `useCalendarState`/`useCalendar` call instantiated
-// over the union of both modes — react-stately/react-aria are natively selection-mode-aware at
-// that layer (including `useCalendarCell`'s `isSelected`), so no custom multi-select logic is
-// needed here, just narrow, provably-safe casts at the seam between the public union and the
-// single generic call (react-stately always reports/expects the value shape matching whichever
-// `selectionMode` was actually passed in).
-export const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, forwardedRef) => {
-  const {
-    autoFocus,
-    className,
-    defaultValue,
-    disabled,
-    firstDayOfWeek = 'mon',
-    isDateUnavailable,
-    labels,
-    maxValue,
-    minValue,
-    onChange,
-    selectionMode = 'single',
-    unavailableDates,
-    value,
-    visibleMonths = 1,
-    ...rest
-  } = props
-
-  const { locale } = useLocale()
-  const internalRef = useRef<HTMLDivElement>(null)
-  const ref = useForkedRef(internalRef, forwardedRef)
-  const combinedIsDateUnavailable = useMemo(
-    () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),
-    [unavailableDates, isDateUnavailable]
-  )
-  // Tracks each visible month block's own view, keyed by `monthIndex` — same reasoning as
-  // `RangeCalendar`'s identical state: needed only to know whether *any* block has switched
-  // away from the day grid, so the global `.datepicker-controls` overlay can hide itself rather
-  // than sit on top of `CalendarYearGrid`'s own pager.
-  const [monthViews, setMonthViews] = useState<Record<number, 'days' | 'months' | 'years'>>({})
-  const hasPickerView = Object.values(monthViews).some((view) => view !== 'days')
-
-  const handleChange = (next: DateValue | readonly DateValue[]) => {
-    if (selectionMode === 'multiple') {
-      ;(onChange as ((value: DateValue[]) => void) | undefined)?.(next as DateValue[])
-    } else {
-      ;(onChange as ((value: DateValue) => void) | undefined)?.(next as DateValue)
-    }
-  }
-  const normalizedValue = value as DateValue | readonly DateValue[] | null | undefined
-  const normalizedDefaultValue = defaultValue as DateValue | readonly DateValue[] | null | undefined
-  // react-stately's `useCalendarState` crashes computing the initial focused date for
-  // `selectionMode: 'multiple'` when the (controlled or default) value is a genuinely empty
-  // array — its own fallback-to-today logic only runs when the value is nullish, but an empty
-  // array is truthy, so it instead indexes the (nonexistent) first element and calls `.subtract`
-  // on the resulting `undefined`. Supplying `defaultFocusedValue` ourselves in exactly that case
-  // short-circuits react-stately's logic before it ever reaches the buggy branch, without
-  // affecting the normal "focus follows the selection" behavior whenever there is one.
-  const resolvedValue = normalizedValue !== undefined ? normalizedValue : normalizedDefaultValue
-  const defaultFocusedValue =
-    selectionMode === 'multiple' && Array.isArray(resolvedValue) && resolvedValue.length === 0
-      ? today(getLocalTimeZone())
-      : undefined
-
-  const state = useCalendarState<DateValue, 'single' | 'multiple'>({
-    autoFocus,
-    createCalendar,
-    defaultFocusedValue,
-    defaultValue: normalizedDefaultValue,
-    firstDayOfWeek,
-    isDateUnavailable: combinedIsDateUnavailable,
-    isDisabled: disabled,
-    locale,
-    maxValue,
-    minValue,
-    onChange: handleChange,
-    // Prev/next always slide the visible window by one month, regardless of `visibleMonths` —
-    // same reasoning as `RangeCalendar`'s identical setting (see that component's own comment).
-    pageBehavior: 'single',
-    selectionMode,
-    value: normalizedValue,
-    visibleDuration: { months: visibleMonths }
-  })
-
-  const ariaProps: AriaCalendarProps<DateValue, 'single' | 'multiple'> = {
-    'aria-label': rest['aria-label'],
-    'aria-labelledby': rest['aria-labelledby'],
-    autoFocus,
-    defaultFocusedValue,
-    defaultValue: normalizedDefaultValue,
-    isDateUnavailable: combinedIsDateUnavailable,
-    isDisabled: disabled,
-    maxValue,
-    minValue,
-    onChange: handleChange,
-    selectionMode,
-    value: normalizedValue
-  }
-
-  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(ariaProps, state)
-  const prevButton = <CalendarNavButton buttonProps={prevButtonProps} direction="prev" />
-  const nextButton = <CalendarNavButton buttonProps={nextButtonProps} direction="next" />
-
-  return (
-    <CalendarLabelsProvider labels={labels}>
-      <div
-        {...mergeProps(calendarProps, rest)}
-        className={classNames('datepicker', className)}
-        data-cx-inline="true"
-        ref={ref}
-      >
-        {visibleMonths === 1 ? (
-          <CalendarMonthYearPicker
-            monthStart={state.visibleRange.start}
-            nextArrow={nextButton}
-            prevArrow={prevButton}
-            state={state}
-          >
-            <CalendarWeekGrid
-              firstDayOfWeek={firstDayOfWeek}
-              renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
-              state={state}
-            />
-          </CalendarMonthYearPicker>
-        ) : (
-          <>
-            {/* `.datepicker[data-cx-inline]` (the root above) is already `position: relative` in
-              chassis-css, so this overlay needs no extra positioning wrapper of its own — unlike
-              `RangeCalendar`, which has a `presets` column sharing that root and so scopes its
-              own copy of this overlay to a nested `.datepicker-body` instead. */}
-            {!hasPickerView && (
-              <div className="datepicker-controls">
-                {prevButton}
-                {nextButton}
-              </div>
-            )}
-            <div className="datepicker-grid">
-              {[...new Array(visibleMonths).keys()].map((monthIndex) => (
-                <CalendarMonthBlock
-                  firstDayOfWeek={firstDayOfWeek}
-                  key={monthIndex}
-                  monthIndex={monthIndex}
-                  onViewChange={(view) =>
-                    setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))
-                  }
-                  renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
-                  state={state}
-                />
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </CalendarLabelsProvider>
-  )
-})
-
-Calendar.displayName = 'Calendar'
-
-type CalendarState = StatelyCalendarState<'single' | 'multiple'>
-
-interface CalendarCellProps {
-  date: CalendarDate
-  locale: string
-  state: CalendarState
-}
-
-const CalendarCell = ({ date, locale, state }: CalendarCellProps) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({ date }, state, ref)
-  const isCurrentDate = isToday(date, getLocalTimeZone())
-
-  return (
-    <div
-      {...cellProps}
-      aria-current={isCurrentDate ? 'date' : undefined}
-      className={classNames('datepicker-date', {
-        'datepicker-date-selected': isSelected,
-        'datepicker-date-today': isCurrentDate,
-        'datepicker-date-outside': isOutsideVisibleRange,
-        'datepicker-date-disabled': isDisabled,
-        'datepicker-date-unavailable': isUnavailable,
-        'datepicker-date-weekend': isWeekend(date, locale)
-      })}
-    >
-      <button {...buttonProps} type="button" className="datepicker-date-btn" ref={ref}>
-        {formattedDate}
-      </button>
-    </div>
-  )
-}

package/src/components/calendar/CalendarMonthBlock.tsx

@@ -1,57 +0,0 @@
-import React, { ReactNode } from 'react'
-import { CalendarState, RangeCalendarState } from 'react-stately'
-import { CalendarDate } from '@internationalized/date'
-
-import { CalendarMonthYearPicker } from './CalendarMonthYearPicker'
-import { CalendarWeekGrid } from './CalendarWeekGrid'
-
-interface CalendarMonthBlockProps {
-  // `null`/omitted when a global prev/next pair elsewhere is paging every visible month block at
-  // once (`RangeCalendar` with `visibleMonths > 1`) rather than this block having its own — see
-  // that component's own `arrows` prop.
-  arrows?: { next: ReactNode; prev: ReactNode } | null
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
-  monthIndex: number
-  onViewChange: (view: 'days' | 'months' | 'years') => void
-  // The individual cell differs between `Calendar` and `RangeCalendar` (range selection needs
-  // start/end/in-between pill state a single-date cell has no equivalent for), so cell rendering
-  // is left to the caller — same shape `CalendarWeekGrid` itself already expects.
-  renderCell: (date: CalendarDate, index: number, week: (CalendarDate | null)[]) => ReactNode
-  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
-}
-
-// One visible month within `visibleMonths` — shared by `Calendar` and `RangeCalendar`, which
-// otherwise duplicated this wiring near-verbatim. `monthIndex` is the offset of this block's own
-// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`
-// (inside `CalendarMonthYearPicker`) land a pick correctly regardless of which visible block it
-// came from.
-export const CalendarMonthBlock = ({
-  arrows,
-  firstDayOfWeek,
-  monthIndex,
-  onViewChange,
-  renderCell,
-  state
-}: CalendarMonthBlockProps) => {
-  const monthStart = state.visibleRange.start.add({ months: monthIndex })
-
-  return (
-    <>
-      <CalendarMonthYearPicker
-        monthIndex={monthIndex}
-        monthStart={monthStart}
-        nextArrow={arrows?.next}
-        onViewChange={onViewChange}
-        prevArrow={arrows?.prev}
-        state={state}
-      >
-        <CalendarWeekGrid
-          firstDayOfWeek={firstDayOfWeek}
-          renderCell={renderCell}
-          startDate={monthStart}
-          state={state}
-        />
-      </CalendarMonthYearPicker>
-    </>
-  )
-}

package/src/components/calendar/CalendarMonthGrid.tsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-import { useDateFormatter } from 'react-aria'
-import { CalendarState, RangeCalendarState } from 'react-stately'
-import { CalendarDate } from '@internationalized/date'
-
-import { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'
-import { useCalendarLabels } from './labels'
-
-interface CalendarMonthGridProps {
-  // Whether to render the visually-hidden `aria-live` announcement of this view's current header
-  // (see `CalendarMonthYearPicker`'s own equivalent gate) — `false` for every visible month block
-  // but the first when `visibleMonths > 1`, so switching into this view doesn't fire one
-  // simultaneous announcement per block.
-  announce?: boolean
-  monthStart: CalendarDate
-  onBack: () => void
-  onSelect: (date: CalendarDate) => void
-  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
-}
-
-// The month view of `CalendarMonthYearPicker` — every month in `monthStart`'s own year, laid out
-// as a static 3-column grid (no paging; picking a different year is the year view's job).
-export const CalendarMonthGrid = ({
-  announce = true,
-  monthStart,
-  onBack,
-  onSelect,
-  state
-}: CalendarMonthGridProps) => {
-  const labels = useCalendarLabels()
-  const monthFormatter = useDateFormatter({
-    calendar: monthStart.calendar.identifier,
-    month: 'short',
-    timeZone: state.timeZone
-  })
-  const yearFormatter = useDateFormatter({
-    calendar: monthStart.calendar.identifier,
-    timeZone: state.timeZone,
-    year: 'numeric'
-  })
-
-  const numMonths = monthStart.calendar.getMonthsInYear(monthStart)
-  const months = [...new Array(numMonths).keys()].map((i) => {
-    const date = monthStart.set({ day: 1, month: i + 1 })
-    return { date, formatted: monthFormatter.format(date.toDate(state.timeZone)) }
-  })
-
-  return (
-    <>
-      <div className="datepicker-header">
-        <div className="datepicker-header-content">
-          <button className="datepicker-month" onClick={onBack} type="button">
-            {yearFormatter.format(monthStart.toDate(state.timeZone))}
-          </button>
-        </div>
-      </div>
-      {announce && (
-        <span role="status" className="visually-hidden">
-          {`${labels.selectMonth}, ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
-        </span>
-      )}
-      <div className="datepicker-content">
-        <div
-          aria-label={yearFormatter.format(monthStart.toDate(state.timeZone))}
-          className="datepicker-months"
-          role="group"
-        >
-          {months.map((month) => {
-            const isSelected = month.date.month === monthStart.month
-            const isDisabled = isWholeUnitDisabled(
-              state,
-              month.date,
-              month.date.add({ months: 1 }).subtract({ days: 1 })
-            )
-
-            return (
-              <button
-                aria-current={isSelected ? 'true' : undefined}
-                className={classNames('datepicker-months-month', { selected: isSelected })}
-                disabled={isDisabled}
-                key={month.date.month}
-                onClick={() => onSelect(month.date)}
-                type="button"
-              >
-                {month.formatted}
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </>
-  )
-}

package/src/components/calendar/CalendarMonthYearPicker.tsx

@@ -1,164 +0,0 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import { useDateFormatter } from 'react-aria'
-import { CalendarState, RangeCalendarState } from 'react-stately'
-import { CalendarDate } from '@internationalized/date'
-
-import { CalendarMonthGrid } from './CalendarMonthGrid'
-import { CalendarYearGrid } from './CalendarYearGrid'
-import { setVisibleRangeStart } from '../../utils/setVisibleRangeStart'
-import { useCalendarLabels } from './labels'
-
-interface CalendarMonthYearPickerProps {
-  // The day grid, shown in the default 'days' view — owned by the caller (`Calendar` and
-  // `RangeCalendar` render genuinely different cells: single-date vs. range pill styling), so
-  // this only decides *whether* it's showing, never how it's built.
-  children: ReactNode
-  monthIndex?: number
-  monthStart: CalendarDate
-  // `null` when a global prev/next pair elsewhere is paging every visible month block at once
-  // (`RangeCalendar` with `visibleMonths > 1`) rather than this block having its own — see that
-  // component's own `arrows` prop. Only ever rendered in the 'days' view; the month/year views page
-  // themselves independently (`CalendarYearGrid`) or don't page at all (`CalendarMonthGrid`).
-  nextArrow?: ReactNode
-  // Reports this block's own view whenever it changes, so a parent rendering several blocks
-  // (`RangeCalendar` with `visibleMonths > 1`) can tell when one of them has switched to the
-  // year view — `CalendarYearGrid` owns its own prev/next pager in that view, which would
-  // otherwise sit right underneath the parent's global `.datepicker-controls` overlay.
-  onViewChange?: (view: 'days' | 'months' | 'years') => void
-  prevArrow?: ReactNode
-  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
-}
-
-// Header + body for one visible month block: the day grid by default, switching in place to a
-// month or year grid when the header's own month/year button is pressed (chassis-css's actual
-// `_datepicker.scss` design for this — `[data-vc="months"]`/`[data-vc="years"]`, swapped in for
-// `[data-vc="dates"]` — not a `<select>`, which is what this component used to render here. Native
-// `<select>` turned out to be the whole problem: picking a value forced a synchronous re-render
-// from inside the browser's own `change`-event dispatch, and in Safari that corrupted `usePress`'s
-// pointerup-vs-click target check for whatever the user clicked next — a page bug specific to
-// native form controls, not present here since a grid button is a plain, ordinary press.
-//
-// Shared by `Calendar` and `RangeCalendar` — `monthIndex` is the offset of this block's own
-// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`
-// land a pick correctly regardless of which visible block it came from.
-export const CalendarMonthYearPicker = ({
-  children,
-  monthIndex = 0,
-  monthStart,
-  nextArrow,
-  onViewChange,
-  prevArrow,
-  state
-}: CalendarMonthYearPickerProps) => {
-  const labels = useCalendarLabels()
-  const [view, setView] = useState<'days' | 'months' | 'years'>('days')
-  const containerRef = useRef<HTMLDivElement>(null)
-  // Skipped on mount — there's no prior view to restore focus from yet, and stealing focus
-  // as soon as the calendar renders would fight `autoFocus`/the caller's own focus management.
-  const isFirstRender = useRef(true)
-
-  const changeView = (next: 'days' | 'months' | 'years') => {
-    setView(next)
-    onViewChange?.(next)
-  }
-
-  // Switching `view` swaps in a whole new subtree, unmounting whatever was focused (the month/
-  // year trigger button, or the month/year grid button just picked) — React has no reason to move
-  // focus anywhere on its own, so without this it drops to `document.body`, breaking out of
-  // `FocusScope`'s containment in `DatePicker`/`DateRangePicker`'s popover entirely. Lands
-  // focus on the selected month/year button when entering the month/year view (falling back to
-  // the first option if nothing is selected on the currently visible page), or back onto the
-  // day grid's own roving-tabindex cell when returning to 'days'.
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false
-      return
-    }
-
-    const container = containerRef.current
-    if (!container) return
-
-    const target =
-      view === 'days'
-        ? container.querySelector<HTMLElement>('.datepicker-date-btn[tabindex="0"]')
-        : (container.querySelector<HTMLElement>(
-            '.datepicker-months-month.selected, .datepicker-years-year.selected'
-          ) ??
-          container.querySelector<HTMLElement>('.datepicker-months-month, .datepicker-years-year'))
-
-    target?.focus()
-  }, [view])
-
-  const monthFormatter = useDateFormatter({
-    calendar: monthStart.calendar.identifier,
-    month: 'long',
-    timeZone: state.timeZone
-  })
-  const yearFormatter = useDateFormatter({
-    calendar: monthStart.calendar.identifier,
-    timeZone: state.timeZone,
-    year: 'numeric'
-  })
-
-  const commitAndReturn = (date: CalendarDate) => {
-    setVisibleRangeStart(state, date.subtract({ months: monthIndex }))
-    changeView('days')
-  }
-
-  return (
-    <div className="datepicker-column" ref={containerRef}>
-      {view === 'months' && (
-        <CalendarMonthGrid
-          announce={monthIndex === 0}
-          monthStart={monthStart}
-          onBack={() => changeView('days')}
-          onSelect={commitAndReturn}
-          state={state}
-        />
-      )}
-      {view === 'years' && (
-        <CalendarYearGrid
-          announce={monthIndex === 0}
-          monthStart={monthStart}
-          onBack={() => changeView('days')}
-          onSelect={commitAndReturn}
-          state={state}
-        />
-      )}
-      {view === 'days' && (
-        <>
-          <div className="datepicker-header">
-            {prevArrow}
-            <div className="datepicker-header-content">
-              <button
-                aria-label={`${labels.month}: ${monthFormatter.format(monthStart.toDate(state.timeZone))}`}
-                className="datepicker-month"
-                disabled={state.isDisabled}
-                onClick={() => changeView('months')}
-                type="button"
-              >
-                {monthFormatter.format(monthStart.toDate(state.timeZone))}
-              </button>
-              <button
-                aria-label={`${labels.year}: ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
-                className="datepicker-year"
-                disabled={state.isDisabled}
-                onClick={() => changeView('years')}
-                type="button"
-              >
-                {yearFormatter.format(monthStart.toDate(state.timeZone))}
-              </button>
-            </div>
-            {nextArrow}
-          </div>
-          {monthIndex === 0 && (
-            <span role="status" className="visually-hidden">
-              {`${monthFormatter.format(monthStart.toDate(state.timeZone))} ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
-            </span>
-          )}
-          {children}
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/calendar/CalendarNavButton.tsx

@@ -1,24 +0,0 @@
-import React, { useRef } from 'react'
-import { AriaButtonProps, useButton } from 'react-aria'
-
-interface CalendarNavButtonProps {
-  buttonProps: AriaButtonProps
-  direction: 'prev' | 'next'
-}
-
-// Shared prev/next arrow, used twice by both `Calendar` and `RangeCalendar` — `buttonProps`
-// comes from that caller's own `useCalendar`/`useRangeCalendar`, so this only owns the DOM ref and
-// the `useButton` wiring plus the arrow markup itself.
-export const CalendarNavButton = ({ buttonProps, direction }: CalendarNavButtonProps) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const { buttonProps: domButtonProps } = useButton(buttonProps, ref)
-
-  return (
-    <button
-      {...domButtonProps}
-      className={`datepicker-arrow datepicker-arrow-${direction}`}
-      ref={ref}
-      type="button"
-    ></button>
-  )
-}