@torq-ui/react-date-picker 0.3.0

package/dist/index.js

@@ -0,0 +1,1478 @@
+import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback, useLayoutEffect, useId, useReducer } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTimescape } from 'timescape/react';
+import { createPortal } from 'react-dom';
+import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react-dom';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/date-picker/index.ts
+var date_picker_exports = {};
+__export(date_picker_exports, {
+  Calendar: () => Calendar,
+  Content: () => Content,
+  Day: () => Day,
+  Grid: () => Grid,
+  Input: () => Input,
+  Label: () => Label,
+  MonthCell: () => MonthCell,
+  MonthGrid: () => MonthGrid,
+  NextTrigger: () => NextTrigger,
+  PrevTrigger: () => PrevTrigger,
+  Root: () => Root,
+  Trigger: () => Trigger,
+  View: () => View,
+  ViewControl: () => ViewControl,
+  ViewTrigger: () => ViewTrigger,
+  WeekDays: () => WeekDays,
+  YearCell: () => YearCell,
+  YearGrid: () => YearGrid
+});
+var DatePickerContext = createContext(null);
+function useDatePickerContext() {
+  const ctx = useContext(DatePickerContext);
+  if (!ctx) {
+    throw new Error("DatePicker compound components must be rendered inside <DatePicker.Root>.");
+  }
+  return ctx;
+}
+var DatePickerViewContext = createContext(null);
+var MonthGridFocusContext = createContext(-1);
+var YearGridFocusContext = createContext(-1);
+
+// src/utils/locale.ts
+function getWeekStartDay(locale, override) {
+  if (override !== void 0) return override;
+  try {
+    const weekInfo = new Intl.Locale(locale).weekInfo;
+    return weekInfo.firstDay === 7 ? 0 : weekInfo.firstDay;
+  } catch {
+    return 0;
+  }
+}
+function formatDate(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(date);
+}
+function formatMonthYear(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    month: "long",
+    year: "numeric"
+  }).format(date);
+}
+function formatYear(year, locale) {
+  return new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
+}
+function getMonthNames(locale, format = "long") {
+  const formatter = new Intl.DateTimeFormat(locale, { month: format });
+  return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2024, i, 1)));
+}
+function getWeekDayNames(locale, weekStartDay, format = "short") {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: format });
+  const longFormatter = new Intl.DateTimeFormat(locale, { weekday: "long" });
+  const anchor = new Date(2025, 0, 5);
+  return Array.from({ length: 7 }, (_, i) => {
+    const day = new Date(anchor);
+    day.setDate(anchor.getDate() + (weekStartDay + i) % 7);
+    return { label: formatter.format(day), ariaLabel: longFormatter.format(day) };
+  });
+}
+function getDateFieldOrder(locale) {
+  const parts = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).formatToParts(new Date(2024, 0, 15));
+  const order = [];
+  for (const part of parts) {
+    if (part.type === "year" || part.type === "month" || part.type === "day") {
+      order.push(part.type);
+    }
+  }
+  return order;
+}
+function getSegmentInfo(locale) {
+  const parts = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).formatToParts(new Date(2024, 0, 15));
+  const order = [];
+  let separator = "/";
+  for (const part of parts) {
+    if (part.type === "year" || part.type === "month" || part.type === "day") {
+      order.push(part.type);
+    } else if (part.type === "literal" && part.value.trim()) {
+      separator = part.value.trim();
+    }
+  }
+  return { order, separator };
+}
+function parseDate(value, locale) {
+  if (!value.trim()) return null;
+  const isoMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (isoMatch) {
+    const d = new Date(Number(isoMatch[1]), Number(isoMatch[2]) - 1, Number(isoMatch[3]));
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const order = getDateFieldOrder(locale);
+  const parts = value.split(/[-/.\s]+/).map(Number);
+  if (parts.length < 3 || parts.some(isNaN)) return null;
+  const fields = { year: 0, month: 0, day: 0 };
+  order.forEach((field, i) => {
+    fields[field] = parts[i] ?? 0;
+  });
+  const { year, month, day } = fields;
+  if (!year || !month || !day) return null;
+  const date = new Date(year, month - 1, day);
+  if (isNaN(date.getTime())) return null;
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+
+// src/utils/calendar.ts
+function buildCalendarGrid(year, month, weekStartDay) {
+  const firstOfMonth = new Date(year, month, 1);
+  const offset2 = (firstOfMonth.getDay() - weekStartDay + 7) % 7;
+  const totalDays = new Date(year, month + 1, 0).getDate();
+  const rows = offset2 + totalDays <= 35 ? 5 : 6;
+  return Array.from(
+    { length: rows },
+    (_, row) => Array.from({ length: 7 }, (_2, col) => new Date(year, month, 1 - offset2 + row * 7 + col))
+  );
+}
+function buildWeekDays(locale, weekStartDay, format = "short") {
+  return getWeekDayNames(locale, weekStartDay, format);
+}
+function buildMonthItems(year, locale, selectedMonth, minDate, maxDate) {
+  const names = getMonthNames(locale, "long");
+  return names.map((label, i) => {
+    const isDisabled = minDate !== void 0 && year < minDate.getFullYear() || minDate !== void 0 && year === minDate.getFullYear() && i < minDate.getMonth() || maxDate !== void 0 && year > maxDate.getFullYear() || maxDate !== void 0 && year === maxDate.getFullYear() && i > maxDate.getMonth();
+    return {
+      value: i,
+      label,
+      isSelected: selectedMonth === i,
+      isDisabled
+    };
+  });
+}
+function buildYearItems(pageStart, count = 12, selectedYear, minDate, maxDate) {
+  return Array.from({ length: count }, (_, i) => {
+    const year = pageStart + i;
+    const isDisabled = minDate !== void 0 && year < minDate.getFullYear() || maxDate !== void 0 && year > maxDate.getFullYear();
+    return { value: year, isSelected: selectedYear === year, isDisabled };
+  });
+}
+function yearPageStart(year) {
+  return Math.floor(year / 12) * 12;
+}
+
+// src/utils/date.ts
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isInRange(date, start, end) {
+  if (!start || !end) return false;
+  const [from, to] = start.getTime() <= end.getTime() ? [start, end] : [end, start];
+  return date.getTime() > from.getTime() && date.getTime() < to.getTime();
+}
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays(date, days) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+  const d = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const maxDay = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
+  d.setDate(Math.min(date.getDate(), maxDay));
+  return d;
+}
+function isDateDisabled(date, config) {
+  if (config.disabled === true) return true;
+  if (typeof config.disabled === "function" && config.disabled(date)) return true;
+  if (config.minDate && date.getTime() < startOfDay(config.minDate).getTime()) return true;
+  if (config.maxDate && date.getTime() > startOfDay(config.maxDate).getTime()) return true;
+  return false;
+}
+
+// src/date-picker/reducer.ts
+function openState(state, anchor, source = null) {
+  const ref = anchor ?? startOfDay(/* @__PURE__ */ new Date());
+  return {
+    ...state,
+    open: true,
+    openSource: source,
+    view: "day",
+    focusedDate: ref,
+    focusedMonth: ref.getMonth(),
+    focusedYear: ref.getFullYear(),
+    yearPageStart: yearPageStart(ref.getFullYear())
+  };
+}
+function navMonth(state, delta) {
+  const d = new Date(state.focusedYear, state.focusedMonth + delta, 1);
+  return { ...state, focusedMonth: d.getMonth(), focusedYear: d.getFullYear() };
+}
+function datePickerReducer(state, action, config) {
+  switch (action.type) {
+    case "OPEN":
+      if (state.open || config.readOnly) return state;
+      return openState(state, state.selectedDate ?? state.rangeStart, action.source ?? null);
+    case "CLOSE":
+      return {
+        ...state,
+        open: false,
+        openSource: null,
+        view: "day",
+        hoverDate: null
+      };
+    case "TOGGLE":
+      if (state.open)
+        return {
+          ...state,
+          open: false,
+          openSource: null,
+          view: "day",
+          hoverDate: null
+        };
+      if (config.readOnly) return state;
+      return openState(state, state.selectedDate ?? state.rangeStart, action.source ?? "trigger");
+    case "SET_VIEW":
+      return { ...state, view: action.view };
+    case "NAV_PREV": {
+      if (state.view === "day") return navMonth(state, -1);
+      if (state.view === "month") return { ...state, focusedYear: state.focusedYear - 1 };
+      return { ...state, yearPageStart: state.yearPageStart - 12 };
+    }
+    case "NAV_NEXT": {
+      if (state.view === "day") return navMonth(state, 1);
+      if (state.view === "month") return { ...state, focusedYear: state.focusedYear + 1 };
+      return { ...state, yearPageStart: state.yearPageStart + 12 };
+    }
+    case "NAV_TO_DATE": {
+      const d = action.date;
+      return {
+        ...state,
+        focusedMonth: d.getMonth(),
+        focusedYear: d.getFullYear()
+      };
+    }
+    case "FOCUS_DATE": {
+      const d = action.date;
+      return {
+        ...state,
+        focusedDate: d,
+        focusedMonth: d.getMonth(),
+        focusedYear: d.getFullYear()
+      };
+    }
+    case "SELECT_DATE": {
+      const d = startOfDay(action.date);
+      if (isDateDisabled(d, config)) return state;
+      if (config.mode === "single") {
+        return {
+          ...state,
+          selectedDate: d,
+          inputValue: formatDate(d, config.locale),
+          open: config.closeOnSelect ? false : state.open,
+          hoverDate: null
+        };
+      }
+      if (config.mode === "range") {
+        if (!state.rangeStart || state.rangeEnd) {
+          return { ...state, rangeStart: d, rangeEnd: null, hoverDate: null };
+        }
+        const [start, end] = d.getTime() >= state.rangeStart.getTime() ? [state.rangeStart, d] : [d, state.rangeStart];
+        return {
+          ...state,
+          rangeStart: start,
+          rangeEnd: end,
+          hoverDate: null,
+          open: config.closeOnSelect ? false : state.open
+        };
+      }
+      if (config.mode === "multiple") {
+        const already = state.selectedDates.findIndex((s) => isSameDay(s, d));
+        const selectedDates = already >= 0 ? state.selectedDates.filter((_, i) => i !== already) : [...state.selectedDates, d];
+        return { ...state, selectedDates };
+      }
+      return state;
+    }
+    case "ANCHOR_DATE": {
+      const d = startOfDay(action.date);
+      if (isDateDisabled(d, config)) return state;
+      return { ...state, rangeStart: d, rangeEnd: null, hoverDate: null };
+    }
+    case "EXTEND_RANGE": {
+      const d = startOfDay(action.date);
+      if (!state.rangeStart || isDateDisabled(d, config)) return state;
+      const [start, end] = d.getTime() >= state.rangeStart.getTime() ? [state.rangeStart, d] : [d, state.rangeStart];
+      return {
+        ...state,
+        rangeStart: start,
+        rangeEnd: end,
+        hoverDate: null,
+        open: config.closeOnSelect ? false : state.open
+      };
+    }
+    case "TOGGLE_DATE": {
+      const d = startOfDay(action.date);
+      if (isDateDisabled(d, config)) return state;
+      const already = state.selectedDates.findIndex((s) => isSameDay(s, d));
+      const selectedDates = already >= 0 ? state.selectedDates.filter((_, i) => i !== already) : [...state.selectedDates, d];
+      return { ...state, selectedDates };
+    }
+    case "HOVER_DATE":
+      return {
+        ...state,
+        hoverDate: action.date ? startOfDay(action.date) : null
+      };
+    case "SET_RANGE": {
+      const start = action.start ? startOfDay(action.start) : null;
+      const end = action.end ? startOfDay(action.end) : null;
+      const anchor = end ?? start;
+      return {
+        ...state,
+        rangeStart: start,
+        rangeEnd: end,
+        hoverDate: null,
+        ...anchor ? {
+          focusedDate: anchor,
+          focusedMonth: anchor.getMonth(),
+          focusedYear: anchor.getFullYear(),
+          yearPageStart: yearPageStart(anchor.getFullYear())
+        } : {}
+      };
+    }
+    case "SET_INPUT":
+      return { ...state, inputValue: action.value };
+    case "COMMIT_INPUT": {
+      const parsed = parseDate(state.inputValue, config.locale);
+      if (!parsed || isDateDisabled(parsed, config)) return { ...state, inputValue: "" };
+      const d = startOfDay(parsed);
+      return {
+        ...state,
+        selectedDate: d,
+        focusedDate: d,
+        focusedMonth: d.getMonth(),
+        focusedYear: d.getFullYear(),
+        open: false
+      };
+    }
+    case "SELECT_MONTH":
+      return { ...state, focusedMonth: action.month, view: "day" };
+    case "SELECT_YEAR":
+      return {
+        ...state,
+        focusedYear: action.year,
+        yearPageStart: yearPageStart(action.year),
+        view: "month"
+      };
+    case "YEAR_PAGE_PREV":
+      return { ...state, yearPageStart: state.yearPageStart - 12 };
+    case "YEAR_PAGE_NEXT":
+      return { ...state, yearPageStart: state.yearPageStart + 12 };
+    default:
+      return state;
+  }
+}
+function createInitialState(config) {
+  const ref = config.selectedDate ?? config.rangeStart ?? /* @__PURE__ */ new Date();
+  return {
+    open: config.open ?? false,
+    openSource: null,
+    view: "day",
+    focusedMonth: ref.getMonth(),
+    focusedYear: ref.getFullYear(),
+    focusedDate: config.open ? startOfDay(ref) : null,
+    selectedDate: config.selectedDate ?? null,
+    rangeStart: config.rangeStart ?? null,
+    rangeEnd: config.rangeEnd ?? null,
+    hoverDate: null,
+    selectedDates: config.selectedDates ?? [],
+    inputValue: config.selectedDate ? formatDate(config.selectedDate, config.locale) : "",
+    yearPageStart: yearPageStart(ref.getFullYear())
+  };
+}
+
+// src/date-picker/use-date-picker.ts
+function resolveConfig(props) {
+  const base = {
+    mode: props.mode ?? "single",
+    locale: props.locale ?? (typeof navigator !== "undefined" ? navigator.language : "en-US"),
+    readOnly: props.readOnly ?? false,
+    closeOnSelect: props.closeOnSelect ?? (props.mode !== "range" && props.mode !== "multiple"),
+    ...props.weekStartsOn !== void 0 && { weekStartsOn: props.weekStartsOn },
+    ...props.minDate !== void 0 && { minDate: props.minDate },
+    ...props.maxDate !== void 0 && { maxDate: props.maxDate },
+    ...props.disabled !== void 0 && { disabled: props.disabled }
+  };
+  return base;
+}
+function resolveInitialValue(props) {
+  if (!props.mode || props.mode === "single") {
+    const v = "value" in props && props.value !== void 0 ? props.value : "defaultValue" in props ? props.defaultValue : void 0;
+    return { selectedDate: v ?? null };
+  }
+  if (props.mode === "range") {
+    const v = "value" in props && props.value !== void 0 ? props.value : "defaultValue" in props ? props.defaultValue : void 0;
+    return { rangeStart: v?.start ?? null, rangeEnd: v?.end ?? null };
+  }
+  if (props.mode === "multiple") {
+    const v = "defaultValue" in props ? props.defaultValue : void 0;
+    return { selectedDates: v ?? [] };
+  }
+  return {};
+}
+function useDatePicker(props) {
+  const uid = useId();
+  const { mode, locale, weekStartsOn, minDate, maxDate, disabled, readOnly, closeOnSelect } = props;
+  const config = useMemo(
+    () => resolveConfig({
+      mode,
+      locale,
+      weekStartsOn,
+      minDate,
+      maxDate,
+      disabled,
+      readOnly,
+      closeOnSelect
+    }),
+    [mode, locale, weekStartsOn, minDate, maxDate, disabled, readOnly, closeOnSelect]
+  );
+  const initialValue = resolveInitialValue(props);
+  const [state, dispatch] = useReducer(
+    (s, a) => datePickerReducer(s, a, config),
+    createInitialState({
+      locale: config.locale,
+      ...props.defaultOpen !== void 0 && { open: props.defaultOpen },
+      ...initialValue
+    })
+  );
+  const onValueChangeRef = useRef(
+    !props.mode || props.mode === "single" ? props.onValueChange : void 0
+  );
+  useEffect(() => {
+    if (!props.mode || props.mode === "single") {
+      onValueChangeRef.current = props.onValueChange;
+    }
+  });
+  const prevSelectedRef = useRef(void 0);
+  useEffect(() => {
+    if (prevSelectedRef.current === void 0) {
+      prevSelectedRef.current = state.selectedDate;
+      return;
+    }
+    if (state.selectedDate !== prevSelectedRef.current) {
+      onValueChangeRef.current?.(state.selectedDate);
+      prevSelectedRef.current = state.selectedDate;
+    }
+  }, [state.selectedDate]);
+  const controlledRangeValue = props.mode === "range" && "value" in props && props.value !== void 0 ? props.value : void 0;
+  const lastSyncedPropRangeRef = useRef(
+    null
+  );
+  const propRangeStartT = controlledRangeValue?.start?.getTime() ?? null;
+  const propRangeEndT = controlledRangeValue?.end?.getTime() ?? null;
+  useEffect(() => {
+    if (controlledRangeValue === void 0) return;
+    const last = lastSyncedPropRangeRef.current;
+    if (last?.startT === propRangeStartT && last?.endT === propRangeEndT) return;
+    lastSyncedPropRangeRef.current = { startT: propRangeStartT, endT: propRangeEndT };
+    const stateStartT = state.rangeStart?.getTime() ?? null;
+    const stateEndT = state.rangeEnd?.getTime() ?? null;
+    if (propRangeStartT === stateStartT && propRangeEndT === stateEndT) return;
+    dispatch({
+      type: "SET_RANGE",
+      start: controlledRangeValue.start ?? null,
+      end: controlledRangeValue.end ?? null
+    });
+  }, [propRangeStartT, propRangeEndT, dispatch]);
+  const prevRangeRef = useRef(
+    void 0
+  );
+  useEffect(() => {
+    if (props.mode !== "range") return;
+    const p = props;
+    const startT = state.rangeStart?.getTime() ?? null;
+    const endT = state.rangeEnd?.getTime() ?? null;
+    if (prevRangeRef.current === void 0) {
+      prevRangeRef.current = { startT, endT };
+      return;
+    }
+    if (startT !== prevRangeRef.current.startT || endT !== prevRangeRef.current.endT) {
+      p.onValueChange?.({ start: state.rangeStart, end: state.rangeEnd });
+      prevRangeRef.current = { startT, endT };
+    }
+  }, [state.rangeStart, state.rangeEnd]);
+  const prevMultipleRef = useRef(void 0);
+  useEffect(() => {
+    if (props.mode !== "multiple") return;
+    const p = props;
+    if (prevMultipleRef.current === void 0) {
+      prevMultipleRef.current = state.selectedDates;
+      return;
+    }
+    if (state.selectedDates !== prevMultipleRef.current) {
+      p.onValueChange?.(state.selectedDates);
+      prevMultipleRef.current = state.selectedDates;
+    }
+  }, [state.selectedDates]);
+  const isControlledOpen = props.open !== void 0;
+  const effectiveOpen = isControlledOpen ? props.open ?? false : state.open;
+  const prevOpenRef = useRef(effectiveOpen);
+  useEffect(() => {
+    if (prevOpenRef.current !== effectiveOpen) {
+      props.onOpenChange?.(effectiveOpen);
+    }
+    prevOpenRef.current = effectiveOpen;
+  }, [effectiveOpen]);
+  const weekStartDay = useMemo(
+    () => getWeekStartDay(config.locale, config.weekStartsOn),
+    [config.locale, config.weekStartsOn]
+  );
+  const weeks = useMemo(
+    () => buildCalendarGrid(state.focusedYear, state.focusedMonth, weekStartDay),
+    [state.focusedYear, state.focusedMonth, weekStartDay]
+  );
+  const weekDays = useMemo(
+    () => buildWeekDays(config.locale, weekStartDay),
+    [config.locale, weekStartDay]
+  );
+  const monthItems = useMemo(
+    () => buildMonthItems(
+      state.focusedYear,
+      config.locale,
+      state.focusedMonth,
+      config.minDate,
+      config.maxDate
+    ),
+    [state.focusedYear, config.locale, state.focusedMonth, config.minDate, config.maxDate]
+  );
+  const yearItems = useMemo(
+    () => buildYearItems(state.yearPageStart, 12, state.focusedYear, config.minDate, config.maxDate),
+    [state.yearPageStart, state.focusedYear, config.minDate, config.maxDate]
+  );
+  const ids = useMemo(
+    () => ({
+      root: `dp-${uid}`,
+      label: `dp-label-${uid}`,
+      input: `dp-input-${uid}`,
+      trigger: `dp-trigger-${uid}`,
+      content: `dp-content-${uid}`
+    }),
+    [uid]
+  );
+  return {
+    state: { ...state, open: effectiveOpen },
+    dispatch,
+    config,
+    ids,
+    derived: { weeks, weekDays, monthItems, yearItems, weekStartDay }
+  };
+}
+function Root(props) {
+  const { children, ...pickerProps } = props;
+  const picker = useDatePicker(pickerProps);
+  return /* @__PURE__ */ jsx(
+    DatePickerContext.Provider,
+    {
+      value: {
+        state: picker.state,
+        dispatch: picker.dispatch,
+        config: picker.config,
+        ids: picker.ids
+      },
+      children
+    }
+  );
+}
+function Label({ children, ...props }) {
+  const { ids } = useDatePickerContext();
+  return /* @__PURE__ */ jsx("label", { id: ids.label, htmlFor: ids.input, ...props, children });
+}
+function wrapRef(ref) {
+  return (el) => {
+    ref(el);
+  };
+}
+var DEFAULT_LABELS = { month: "Month", day: "Day", year: "Year" };
+var FIELD_MAP = {
+  year: "years",
+  month: "months",
+  day: "days"
+};
+function Segments({
+  sourceDate,
+  segmentOrder,
+  separator,
+  labels,
+  onDateChange,
+  groupId,
+  className,
+  style
+}) {
+  const { state, dispatch, ids, config } = useDatePickerContext();
+  const onDateChangeRef = useRef(onDateChange);
+  onDateChangeRef.current = onDateChange;
+  const opts = {
+    wrapAround: true,
+    onChangeDate: (d) => onDateChangeRef.current(d)
+  };
+  if (config.minDate) opts.minDate = config.minDate;
+  if (config.maxDate) opts.maxDate = config.maxDate;
+  if (sourceDate) opts.date = sourceDate;
+  const { getRootProps, getInputProps } = useTimescape(opts);
+  const [focused, setFocused] = useState(null);
+  function handleSegmentFocus(field) {
+    setFocused(field);
+    if (!state.open && !config.readOnly) dispatch({ type: "OPEN", source: "input" });
+  }
+  function handleSegmentBlur(field, e) {
+    const relatedTarget = e.relatedTarget;
+    const isMovingWithin = e.currentTarget.parentElement?.contains(relatedTarget);
+    if (!isMovingWithin) setFocused(null);
+  }
+  function handleKeyDown(e) {
+    if (config.readOnly) {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      if (state.open) dispatch({ type: "CLOSE" });
+    }
+  }
+  const { ref: rootRef, ...rootProps } = getRootProps();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      id: groupId ?? ids.input,
+      "aria-labelledby": ids.label,
+      tabIndex: -1,
+      className,
+      style,
+      ...rootProps,
+      ref: wrapRef(rootRef),
+      ...config.readOnly ? { "data-readonly": "true" } : {},
+      children: segmentOrder.map((field, i) => {
+        const type = FIELD_MAP[field];
+        const isFocused = focused === field;
+        const isTabStop = isFocused || focused === null && i === 0;
+        const { ref: inputRef, ...inputProps } = getInputProps(type);
+        const wrappedInputRef = wrapRef(inputRef);
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-separator": "true", children: separator }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref: wrappedInputRef,
+              "aria-label": labels[field],
+              "data-segment": field,
+              tabIndex: config.readOnly ? -1 : isTabStop ? 0 : -1,
+              disabled: config.readOnly,
+              onFocus: (e) => {
+                inputRef(e.currentTarget);
+                handleSegmentFocus(field);
+              },
+              onBlur: (e) => handleSegmentBlur(field, e),
+              onKeyDown: handleKeyDown,
+              className: "timescape-input",
+              style: {
+                width: field === "year" ? "4ch" : "2ch",
+                border: "none",
+                background: "transparent",
+                padding: 0,
+                margin: 0,
+                textAlign: "center",
+                font: "inherit",
+                outline: "none"
+              }
+            }
+          )
+        ] }, field);
+      })
+    }
+  );
+}
+function Input({ index, segmentLabels, className, style }) {
+  const { state, dispatch, config, ids } = useDatePickerContext();
+  const { order: segmentOrder, separator } = useMemo(
+    () => getSegmentInfo(config.locale),
+    [config.locale]
+  );
+  const labels = {
+    month: segmentLabels?.month ?? DEFAULT_LABELS.month,
+    day: segmentLabels?.day ?? DEFAULT_LABELS.day,
+    year: segmentLabels?.year ?? DEFAULT_LABELS.year
+  };
+  const sourceDate = index === 1 ? state.rangeEnd : index === 0 ? state.rangeStart : state.selectedDate;
+  const isInternalChangeRef = useRef(false);
+  const prevSourceDateRef = useRef(sourceDate);
+  const [timescapeKey, setTimescapeKey] = useState(0);
+  useEffect(() => {
+    const prev = prevSourceDateRef.current;
+    prevSourceDateRef.current = sourceDate;
+    if (isInternalChangeRef.current) {
+      isInternalChangeRef.current = false;
+      return;
+    }
+    const prevTime = prev?.getTime();
+    const currTime = sourceDate?.getTime();
+    if (prevTime !== currTime) {
+      setTimescapeKey((k) => k + 1);
+    }
+  }, [sourceDate]);
+  const onDateChange = useCallback(
+    (nextDate) => {
+      if (!nextDate) return;
+      if (isDateDisabled(nextDate, config)) return;
+      const prevDate = prevSourceDateRef.current;
+      if (prevDate && prevDate.getTime() === nextDate.getTime()) return;
+      if (config.mode === "multiple") {
+        dispatch({ type: "FOCUS_DATE", date: nextDate });
+        dispatch({ type: "TOGGLE_DATE", date: nextDate });
+        setTimescapeKey((k) => k + 1);
+        return;
+      }
+      isInternalChangeRef.current = true;
+      dispatch({ type: "FOCUS_DATE", date: nextDate });
+      if (config.mode === "single") {
+        dispatch({ type: "SELECT_DATE", date: nextDate });
+      } else if (config.mode === "range" && index === 0) {
+        dispatch({ type: "ANCHOR_DATE", date: nextDate });
+      } else if (config.mode === "range" && index === 1) {
+        dispatch({ type: "EXTEND_RANGE", date: nextDate });
+      }
+    },
+    [config, dispatch, index]
+  );
+  const groupId = index !== void 0 ? `${ids.input}-${index}` : ids.input;
+  return /* @__PURE__ */ jsx(
+    Segments,
+    {
+      sourceDate,
+      segmentOrder,
+      separator,
+      labels,
+      onDateChange,
+      groupId,
+      className,
+      style
+    },
+    timescapeKey
+  );
+}
+function Trigger({ children, onClick, disabled, ...props }) {
+  const { state, dispatch, ids, config } = useDatePickerContext();
+  const isDisabled = disabled ?? config.disabled === true;
+  const isReadOnly = config.readOnly;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      id: ids.trigger,
+      "aria-haspopup": "dialog",
+      "aria-expanded": state.open,
+      "aria-controls": state.open ? ids.content : void 0,
+      "aria-label": children ? void 0 : "Open date picker",
+      disabled: isDisabled || isReadOnly,
+      "data-disabled": isDisabled || isReadOnly ? "true" : void 0,
+      onClick: (e) => {
+        if (isDisabled || isReadOnly) return;
+        dispatch({ type: "TOGGLE", source: "trigger" });
+        onClick?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+function useClickOutside(refs, handler, enabled = true) {
+  const refsRef = useRef(refs);
+  refsRef.current = refs;
+  useEffect(() => {
+    if (!enabled) return;
+    function onPointerDown(e) {
+      const target = e.target;
+      if (refsRef.current.every((r) => !r.current?.contains(target))) {
+        handler();
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled, handler]);
+}
+
+// src/utils/aria.ts
+function getFocusableElements(container) {
+  const selector = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(", ");
+  return Array.from(container.querySelectorAll(selector)).filter(
+    (el) => !el.closest("[hidden]") && el.offsetParent !== null
+  );
+}
+
+// src/date-picker/use-focus-trap.ts
+function useFocusTrap(containerRef, enabled = true) {
+  useEffect(() => {
+    if (!enabled || !containerRef.current) return;
+    const container = containerRef.current;
+    function onKeyDown(e) {
+      if (e.key !== "Tab") return;
+      const focusable = getFocusableElements(container);
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+    const observer = new MutationObserver(() => {
+      const active = document.activeElement;
+      if (active?.getAttribute("role") === "spinbutton") return;
+      if (!container.contains(active)) {
+        const firstFocusable = getFocusableElements(container)[0];
+        firstFocusable?.focus();
+      }
+    });
+    observer.observe(container, { childList: true, subtree: true });
+    container.addEventListener("keydown", onKeyDown);
+    return () => {
+      container.removeEventListener("keydown", onKeyDown);
+      observer.disconnect();
+    };
+  }, [enabled, containerRef]);
+}
+function toPlacement(side, align) {
+  return align === "center" ? side : `${side}-${align}`;
+}
+function useDatePickerFloating({
+  referenceElement,
+  open,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8
+}) {
+  const { refs, floatingStyles, isPositioned } = useFloating({
+    placement: toPlacement(side, align),
+    strategy: "fixed",
+    open,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset({ mainAxis: sideOffset, crossAxis: alignOffset }),
+      ...avoidCollisions ? [flip(), shift({ padding: collisionPadding })] : []
+    ],
+    ...referenceElement !== void 0 ? { elements: { reference: referenceElement } } : {}
+  });
+  return {
+    setReference: refs.setReference,
+    setFloating: refs.setFloating,
+    floatingStyles,
+    isPositioned
+  };
+}
+function Content({
+  children,
+  forceMount,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  portal = false,
+  style,
+  onKeyDown,
+  ...props
+}) {
+  const { state, dispatch, ids, config } = useDatePickerContext();
+  const contentRef = useRef(null);
+  const isOpen = state.open;
+  const shouldRender = forceMount || isOpen;
+  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
+  const input0Ref = useRef(null);
+  const input1Ref = useRef(null);
+  useEffect(() => {
+    triggerRef.current = document.getElementById(ids.trigger);
+    inputRef.current = document.getElementById(ids.input);
+    input0Ref.current = document.getElementById(`${ids.input}-0`);
+    input1Ref.current = document.getElementById(`${ids.input}-1`);
+  });
+  const { setReference, setFloating, floatingStyles, isPositioned } = useDatePickerFloating({
+    open: isOpen,
+    ...side !== void 0 && { side },
+    ...align !== void 0 && { align },
+    ...sideOffset !== void 0 && { sideOffset },
+    ...alignOffset !== void 0 && { alignOffset },
+    ...avoidCollisions !== void 0 && { avoidCollisions },
+    ...collisionPadding !== void 0 && { collisionPadding }
+  });
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    const resolveAnchor = () => {
+      const input = document.getElementById(ids.input) ?? document.getElementById(`${ids.input}-0`);
+      const trigger = document.getElementById(ids.trigger);
+      if (input && trigger) {
+        const row = input.parentElement;
+        if (row && row === trigger.parentElement) return row;
+      }
+      return input ?? document.getElementById(`${ids.input}-1`) ?? trigger;
+    };
+    let current = resolveAnchor();
+    setReference(current);
+    const observer = new MutationObserver(() => {
+      const next = resolveAnchor();
+      if (next && next !== current) {
+        current = next;
+        setReference(next);
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [isOpen, ids.input, ids.trigger, setReference]);
+  const mergedRef = useCallback(
+    (node) => {
+      contentRef.current = node;
+      setFloating(node);
+    },
+    [setFloating]
+  );
+  useClickOutside(
+    [contentRef, triggerRef, inputRef, input0Ref, input1Ref],
+    () => dispatch({ type: "CLOSE" }),
+    isOpen
+  );
+  useFocusTrap(contentRef, isOpen);
+  const [transitionsReady, setTransitionsReady] = useState(false);
+  useEffect(() => {
+    if (!isOpen || !isPositioned) {
+      setTransitionsReady(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setTransitionsReady(true));
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen, isPositioned]);
+  useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+    if (state.openSource === "input") return;
+    const active = document.activeElement;
+    const activeRole = active?.getAttribute("role");
+    if (activeRole === "combobox" || activeRole === "spinbutton") return;
+    const firstFocusable = contentRef.current.querySelector(
+      'button:not([disabled]), [tabindex="0"]'
+    );
+    firstFocusable?.focus();
+  }, [isOpen, state.openSource]);
+  const announcement = state.view === "day" ? formatMonthYear(new Date(state.focusedYear, state.focusedMonth, 1), config.locale) : state.view === "month" ? formatYear(state.focusedYear, config.locale) : `${state.yearPageStart}\u2013${state.yearPageStart + 11}`;
+  if (!shouldRender) return null;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      id: ids.content,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": ids.label,
+      "data-state": isOpen ? "open" : "closed",
+      style: {
+        ...floatingStyles,
+        ...!isOpen ? { display: "none" } : void 0,
+        // Hide via opacity (not `visibility`/`display`) while Floating UI
+        // resolves the first position: this keeps the popover at (0,0)
+        // invisible to sighted users for one frame without removing it from
+        // the accessibility tree, so assistive tech still sees the dialog.
+        ...isOpen && !isPositioned ? { opacity: 0, pointerEvents: "none" } : void 0,
+        ...isOpen && !transitionsReady ? { transition: "none" } : void 0,
+        ...style
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          dispatch({ type: "CLOSE" });
+          document.getElementById(ids.trigger)?.focus();
+        }
+        onKeyDown?.(e);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0,0,0,0)",
+              whiteSpace: "nowrap"
+            },
+            children: isOpen ? announcement : ""
+          }
+        ),
+        children
+      ]
+    }
+  );
+  return portal ? createPortal(content, document.body) : content;
+}
+function ViewControl({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { role: "group", ...props, children });
+}
+function PrevTrigger({ children, onClick, ...props }) {
+  const { state, dispatch } = useDatePickerContext();
+  const labels = {
+    day: "Go to previous month",
+    month: "Go to previous year",
+    year: "Go to previous years"
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": labels[state.view],
+      onClick: (e) => {
+        dispatch({ type: "NAV_PREV" });
+        onClick?.(e);
+      },
+      ...props,
+      children: children ?? "\u2039"
+    }
+  );
+}
+function NextTrigger({ children, onClick, ...props }) {
+  const { state, dispatch } = useDatePickerContext();
+  const labels = {
+    day: "Go to next month",
+    month: "Go to next year",
+    year: "Go to next years"
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": labels[state.view],
+      onClick: (e) => {
+        dispatch({ type: "NAV_NEXT" });
+        onClick?.(e);
+      },
+      ...props,
+      children: children ?? "\u203A"
+    }
+  );
+}
+var nextView = {
+  day: "month",
+  month: "year",
+  year: "day"
+};
+var ariaLabel = {
+  day: "Switch to month view",
+  month: "Switch to year view",
+  year: "Switch to day view"
+};
+function ViewTrigger({ children, onClick, ...props }) {
+  const { state, dispatch, config } = useDatePickerContext();
+  const label = formatMonthYear(new Date(state.focusedYear, state.focusedMonth, 1), config.locale);
+  const yearRange = `${state.yearPageStart}\u2013${state.yearPageStart + 11}`;
+  const displayLabel = state.view === "year" ? yearRange : state.view === "month" ? String(state.focusedYear) : label;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel[state.view],
+      "aria-live": "polite",
+      onClick: (e) => {
+        dispatch({ type: "SET_VIEW", view: nextView[state.view] });
+        onClick?.(e);
+      },
+      ...props,
+      children: children ?? displayLabel
+    }
+  );
+}
+function View({ view, children }) {
+  const { state } = useDatePickerContext();
+  if (state.view !== view) return null;
+  return /* @__PURE__ */ jsx(DatePickerViewContext.Provider, { value: { view }, children });
+}
+function WeekDays({ format = "short", className }) {
+  const { config } = useDatePickerContext();
+  const weekStartDay = getWeekStartDay(config.locale, config.weekStartsOn);
+  const days = buildWeekDays(config.locale, weekStartDay, format);
+  return /* @__PURE__ */ jsx("tr", { className, children: days.map((day) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: day.ariaLabel, children: day.label }, day.ariaLabel)) });
+}
+function Day({ date, children, className, style }) {
+  const { state, dispatch, config } = useDatePickerContext();
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const meta = {
+    date,
+    isCurrentMonth: date.getMonth() === state.focusedMonth,
+    isToday: isSameDay(date, today),
+    isSelected: config.mode === "single" ? isSameDay(date, state.selectedDate) : config.mode === "multiple" ? state.selectedDates.some((d) => isSameDay(d, date)) : isSameDay(date, state.rangeStart) || isSameDay(date, state.rangeEnd),
+    isDisabled: isDateDisabled(date, config),
+    isRangeStart: isSameDay(date, state.rangeStart),
+    isRangeEnd: isSameDay(date, state.rangeEnd ?? state.hoverDate),
+    isInRange: isInRange(date, state.rangeStart, state.rangeEnd ?? state.hoverDate),
+    isHovered: isSameDay(date, state.hoverDate)
+  };
+  const isFocused = isSameDay(date, state.focusedDate);
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      role: "gridcell",
+      "aria-selected": meta.isSelected,
+      "aria-disabled": meta.isDisabled,
+      "aria-current": meta.isToday ? "date" : void 0,
+      tabIndex: isFocused ? 0 : -1,
+      className,
+      style,
+      "data-selected": meta.isSelected || void 0,
+      "data-today": meta.isToday || void 0,
+      "data-disabled": meta.isDisabled || void 0,
+      "data-outside-month": !meta.isCurrentMonth || void 0,
+      "data-range-start": meta.isRangeStart || void 0,
+      "data-range-end": meta.isRangeEnd || void 0,
+      "data-in-range": meta.isInRange || void 0,
+      onClick: () => {
+        if (!meta.isDisabled && !config.readOnly) dispatch({ type: "SELECT_DATE", date });
+      },
+      onMouseEnter: () => {
+        if (config.mode === "range") dispatch({ type: "HOVER_DATE", date });
+      },
+      onMouseLeave: () => {
+        if (config.mode === "range") dispatch({ type: "HOVER_DATE", date: null });
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!meta.isDisabled && !config.readOnly) dispatch({ type: "SELECT_DATE", date });
+        }
+      },
+      children: children ? children(meta) : date.getDate()
+    }
+  );
+}
+function defaultRender(ws) {
+  return ws.map((week, wi) => /* @__PURE__ */ jsx("tr", { children: week.map((day, di) => /* @__PURE__ */ jsx(Day, { date: day }, di)) }, wi));
+}
+function Grid({ children, header, className }) {
+  const { state, dispatch, config } = useDatePickerContext();
+  const gridRef = useRef(null);
+  const weekStartDay = getWeekStartDay(config.locale, config.weekStartsOn);
+  const weeks = buildCalendarGrid(state.focusedYear, state.focusedMonth, weekStartDay);
+  const label = formatMonthYear(new Date(state.focusedYear, state.focusedMonth, 1), config.locale);
+  const focusedDateStr = state.focusedDate?.toDateString();
+  useEffect(() => {
+    if (!gridRef.current || !focusedDateStr) return;
+    if (document.activeElement?.getAttribute("role") === "spinbutton") return;
+    if (state.openSource === "input" && !gridRef.current.contains(document.activeElement)) {
+      return;
+    }
+    const focused = gridRef.current.querySelector('[tabindex="0"]');
+    if (focused && document.activeElement !== focused) focused.focus();
+  }, [focusedDateStr, state.openSource]);
+  function handleKeyDown(e) {
+    if (!state.focusedDate) return;
+    let next = null;
+    switch (e.key) {
+      case "ArrowRight":
+        next = addDays(state.focusedDate, 1);
+        break;
+      case "ArrowLeft":
+        next = addDays(state.focusedDate, -1);
+        break;
+      case "ArrowDown":
+        next = addDays(state.focusedDate, 7);
+        break;
+      case "ArrowUp":
+        next = addDays(state.focusedDate, -7);
+        break;
+      case "PageDown":
+        next = e.ctrlKey ? new Date(state.focusedYear + 1, state.focusedMonth, state.focusedDate.getDate()) : addMonths(state.focusedDate, 1);
+        break;
+      case "PageUp":
+        next = e.ctrlKey ? new Date(state.focusedYear - 1, state.focusedMonth, state.focusedDate.getDate()) : addMonths(state.focusedDate, -1);
+        break;
+      case "Home": {
+        const d = new Date(state.focusedDate);
+        const diff = (d.getDay() - weekStartDay + 7) % 7;
+        next = addDays(d, -diff);
+        break;
+      }
+      case "End": {
+        const d = new Date(state.focusedDate);
+        const diff = (weekStartDay + 6 - d.getDay() + 7) % 7;
+        next = addDays(d, diff);
+        break;
+      }
+      default:
+        return;
+    }
+    e.preventDefault();
+    dispatch({ type: "FOCUS_DATE", date: next });
+  }
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ref: gridRef,
+      role: "grid",
+      "aria-label": label,
+      className,
+      onKeyDown: handleKeyDown,
+      children: [
+        header && /* @__PURE__ */ jsx("thead", { children: header }),
+        /* @__PURE__ */ jsx("tbody", { children: children ? children({ weeks }) : defaultRender(weeks) })
+      ]
+    }
+  );
+}
+function MonthGrid({ children, className }) {
+  const { state, config, dispatch } = useDatePickerContext();
+  const months = buildMonthItems(
+    state.focusedYear,
+    config.locale,
+    state.focusedMonth,
+    config.minDate,
+    config.maxDate
+  );
+  const [focusedIndex, setFocusedIndex] = useState(state.focusedMonth);
+  const gridRef = useRef(null);
+  const focusedMonthRef = useRef(state.focusedMonth);
+  focusedMonthRef.current = state.focusedMonth;
+  useEffect(() => {
+    setFocusedIndex(focusedMonthRef.current);
+  }, [state.focusedYear]);
+  useEffect(() => {
+    const focused = gridRef.current?.querySelector('[tabindex="0"]');
+    if (focused && gridRef.current?.contains(document.activeElement)) {
+      focused.focus();
+    }
+  }, [focusedIndex, state.focusedYear]);
+  function handleKeyDown(e) {
+    let next = focusedIndex;
+    switch (e.key) {
+      case "ArrowRight":
+        next = Math.min(focusedIndex + 1, 11);
+        break;
+      case "ArrowLeft":
+        next = Math.max(focusedIndex - 1, 0);
+        break;
+      case "ArrowDown":
+        next = Math.min(focusedIndex + 3, 11);
+        break;
+      case "ArrowUp":
+        next = Math.max(focusedIndex - 3, 0);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = 11;
+        break;
+      case "PageDown":
+        dispatch({ type: "NAV_NEXT" });
+        e.preventDefault();
+        return;
+      case "PageUp":
+        dispatch({ type: "NAV_PREV" });
+        e.preventDefault();
+        return;
+      case "Escape":
+        dispatch({ type: "SET_VIEW", view: "day" });
+        e.preventDefault();
+        return;
+      case "Enter":
+      case " ":
+        dispatch({ type: "SELECT_MONTH", month: focusedIndex });
+        e.preventDefault();
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    setFocusedIndex(next);
+  }
+  return /* @__PURE__ */ jsx(MonthGridFocusContext.Provider, { value: focusedIndex, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: gridRef,
+      role: "grid",
+      "aria-label": String(state.focusedYear),
+      className,
+      onKeyDown: handleKeyDown,
+      children: children({ months })
+    }
+  ) });
+}
+function MonthCell({ value, children, onClick, ...props }) {
+  const { dispatch } = useDatePickerContext();
+  const focusedIndex = useContext(MonthGridFocusContext);
+  const isFocused = focusedIndex === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "gridcell",
+      "aria-selected": isFocused,
+      tabIndex: isFocused ? 0 : -1,
+      "data-selected": isFocused || void 0,
+      onClick: (e) => {
+        dispatch({ type: "SELECT_MONTH", month: value });
+        onClick?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+function YearGrid({ children, className }) {
+  const { state, config, dispatch } = useDatePickerContext();
+  const years = buildYearItems(
+    state.yearPageStart,
+    12,
+    state.focusedYear,
+    config.minDate,
+    config.maxDate
+  );
+  const [focusedYear, setFocusedYear] = useState(state.focusedYear);
+  const gridRef = useRef(null);
+  useEffect(() => {
+    const inPage = focusedYear >= state.yearPageStart && focusedYear < state.yearPageStart + 12;
+    if (!inPage) setFocusedYear(state.yearPageStart);
+  }, [state.yearPageStart]);
+  useEffect(() => {
+    const focused = gridRef.current?.querySelector('[tabindex="0"]');
+    if (focused && gridRef.current?.contains(document.activeElement)) {
+      focused.focus();
+    }
+  }, [focusedYear, state.yearPageStart]);
+  function handleKeyDown(e) {
+    let next = focusedYear;
+    const pageStart = state.yearPageStart;
+    const pageEnd = pageStart + 11;
+    switch (e.key) {
+      case "ArrowRight":
+        next = Math.min(focusedYear + 1, pageEnd);
+        break;
+      case "ArrowLeft":
+        next = Math.max(focusedYear - 1, pageStart);
+        break;
+      // 4-column grid: ↓/↑ = ±4 years (next/prev row)
+      case "ArrowDown":
+        next = Math.min(focusedYear + 4, pageEnd);
+        break;
+      case "ArrowUp":
+        next = Math.max(focusedYear - 4, pageStart);
+        break;
+      case "Home":
+        next = pageStart;
+        break;
+      case "End":
+        next = pageEnd;
+        break;
+      case "PageDown":
+        dispatch({ type: "YEAR_PAGE_NEXT" });
+        e.preventDefault();
+        return;
+      case "PageUp":
+        dispatch({ type: "YEAR_PAGE_PREV" });
+        e.preventDefault();
+        return;
+      case "Escape":
+        dispatch({ type: "SET_VIEW", view: "month" });
+        e.preventDefault();
+        return;
+      case "Enter":
+      case " ":
+        dispatch({ type: "SELECT_YEAR", year: focusedYear });
+        e.preventDefault();
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    setFocusedYear(next);
+  }
+  return /* @__PURE__ */ jsx(YearGridFocusContext.Provider, { value: focusedYear, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: gridRef,
+      role: "grid",
+      "aria-label": `${state.yearPageStart}\u2013${state.yearPageStart + 11}`,
+      className,
+      onKeyDown: handleKeyDown,
+      children: children({ years })
+    }
+  ) });
+}
+function YearCell({ value, children, onClick, ...props }) {
+  const { dispatch } = useDatePickerContext();
+  const focusedYear = useContext(YearGridFocusContext);
+  const isFocused = focusedYear === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "gridcell",
+      "aria-selected": isFocused,
+      tabIndex: isFocused ? 0 : -1,
+      "data-selected": isFocused || void 0,
+      onClick: (e) => {
+        dispatch({ type: "SELECT_YEAR", year: value });
+        onClick?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+function Calendar({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(ViewControl, { children: [
+      /* @__PURE__ */ jsx(PrevTrigger, {}),
+      /* @__PURE__ */ jsx(ViewTrigger, {}),
+      /* @__PURE__ */ jsx(NextTrigger, {})
+    ] }),
+    /* @__PURE__ */ jsx(View, { view: "day", children: /* @__PURE__ */ jsx(Grid, { header: /* @__PURE__ */ jsx(WeekDays, {}) }) }),
+    /* @__PURE__ */ jsx(View, { view: "month", children: /* @__PURE__ */ jsx(MonthGrid, { children: ({ months }) => /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, children: months.map((m) => /* @__PURE__ */ jsx(MonthCell, { value: m.value, disabled: m.isDisabled, children: m.label }, m.value)) }) }) }),
+    /* @__PURE__ */ jsx(View, { view: "year", children: /* @__PURE__ */ jsx(YearGrid, { children: ({ years }) => /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }, children: years.map((y) => /* @__PURE__ */ jsx(YearCell, { value: y.value, disabled: y.isDisabled, children: y.value }, y.value)) }) }) })
+  ] });
+}
+
+export { date_picker_exports as DatePicker, useDatePickerContext };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map