@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,165 @@
+import { Density } from "../../tokens/density.js";
+import { DescriptionAria, WrapperRootDOMProps } from "../../utils/root-props.js";
+import { DateInputLabels } from "./DateInput.js";
+import { CSSProperties, Ref } from "react";
+import { CalendarDate, DateValue } from "@internationalized/date";
+//#region src/components/date-picker/DatePicker.d.ts
+/** The picker's labels, for localisation. */
+export interface DatePickerLabels extends DateInputLabels {
+  /** The header's title in calendar mode. @default "Select date", or "Select dates" for a range */
+  title: string;
+  /**
+   * The title in text input mode (the M3 modal date input's "Enter date").
+   * @default "Enter date", or "Enter dates" for a range
+   */
+  inputTitle: string;
+  /** Headline when nothing is selected. @default "Selected date" / "Start date – End date" */
+  noSelection: string;
+  /** The previous month button. @default "Previous month" */
+  previousMonth: string;
+  /** The next month button. @default "Next month" */
+  nextMonth: string;
+  /** Tooltip of the previous-month button, naming its shortcut. @default "Previous month (Page Up)" */
+  previousMonthTooltip: string;
+  /** Tooltip of the next-month button, naming its shortcut. @default "Next month (Page Down)" */
+  nextMonthTooltip: string;
+  /** The month and year button while the days show. @default "Switch to selecting a year" */
+  showYears: string;
+  /** The month and year button while the years show. @default "Switch to selecting a day" */
+  showDays: string;
+  /** Tooltip of the month and year button, naming its shortcut. @default "Choose a year (Shift+Y)" */
+  yearsTooltip: string;
+  /** Name of the year list. @default "Year" */
+  yearList: string;
+  /** The mode toggle in calendar mode. @default "Switch to text input mode" */
+  inputMode: string;
+  /** The mode toggle in text input mode. @default "Switch to calendar input mode" */
+  calendarMode: string;
+  /** Label of the input mode's field. @default "Date" */
+  dateLabel: string;
+  /** Label of a range's start field in input mode. @default "Start date" */
+  startDateLabel: string;
+  /**
+   * Label of a range's end field in input mode, and the headline's end while a range is
+   * being picked ("Mar 20 – End date"). @default "End date"
+   */
+  endDateLabel: string;
+}
+export interface DatePickerClassNames {
+  /** The picker's root; `className` is merged here too. */
+  root?: string;
+  /** The header: title, headline and mode toggle. */
+  header?: string;
+  /** The header's title ("Select date"). */
+  title?: string;
+  /** The header's headline: the chosen date or range. */
+  headline?: string;
+  /** The calendar or the text input below the header. */
+  body?: string;
+  /** The weekday names above the days. */
+  weekday?: string;
+  /** Each day of the calendar. */
+  day?: string;
+  /** Each year of the year list. */
+  year?: string;
+  /** The month and year button above the days, which shows the year list. */
+  yearButton?: string;
+  /** Each month's subhead in the range picker's scrolling month list. */
+  monthSubhead?: string;
+}
+export interface DateRangePickerClassNames extends DatePickerClassNames {
+  /**
+   * The band behind a range's days: each calendar cell it spans (`data-range` is `start`,
+   * `middle` or `end`), whose background paints it.
+   */
+  rangeBand?: string;
+}
+interface DatePickerCommonProps extends Omit<WrapperRootDOMProps, DescriptionAria> {
+  /** Earliest date allowed; earlier days are disabled. */
+  min?: DateValue;
+  /** Latest date allowed; later days are disabled. */
+  max?: DateValue;
+  /** Returns `true` for a day that can't be picked (it shows disabled). */
+  isDateUnavailable?: (date: DateValue) => boolean;
+  /** Show the header (title, headline and mode toggle). @default true */
+  header?: boolean;
+  /** Show the calendar ↔ text input toggle. @default true */
+  modeToggle?: boolean;
+  /** Start in calendar or text input mode. @default "calendar" */
+  defaultMode?: 'calendar' | 'input';
+  /**
+   * First and last years of the year list (and of a range's month list). Years outside
+   * `min` / `max` are shown disabled. @default [1900, 2100]
+   */
+  yearRange?: [number, number];
+  /** Words the picker shows and announces, with English defaults. */
+  labels?: Partial<DatePickerLabels>;
+  /**
+   * Web density of the input mode's text fields, `0` to `-3`: each step takes 4px off them
+   * (56px at 0, 44px at -3). The calendar keeps its size: M3 doesn't make date pickers denser,
+   * since their 48px day targets are part of their accessibility. Left out, the fields take
+   * the density of the nearest `ThemeProvider` or `ThemeScope`.
+   * @default 0
+   */
+  density?: Density;
+  /** The root `<div>`'s id. */
+  id?: string;
+  /** Ref to the root `<div>` element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: DatePickerClassNames;
+  /** `data-*` attributes go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+export type DatePickerProps = DatePickerCommonProps & {
+  /** The selected date (controlled); `null` for none. */
+  value?: CalendarDate | null;
+  /** Initial date when uncontrolled. @default null */
+  defaultValue?: CalendarDate | null;
+  /** Called with the date the user picks or types. */
+  onChange?: (value: CalendarDate) => void;
+};
+export interface DateRange {
+  start: CalendarDate;
+  end: CalendarDate;
+}
+export type DateRangePickerProps = Omit<DatePickerCommonProps, 'classNames'> & {
+  /** Classes for each part, by slot. */
+  classNames?: DateRangePickerClassNames;
+  /** The selected range (controlled); `null` for none. */
+  value?: DateRange | null;
+  /** Initial range when uncontrolled. @default null */
+  defaultValue?: DateRange | null;
+  /** Called with the range once both its start and end are picked or typed. */
+  onChange?: (value: DateRange) => void;
+  /**
+   * `scroll` lists the months one under another and scrolls vertically, as the M3 modal
+   * range picker does; `paged` shows one month at a time with previous / next buttons and
+   * a year list, like the date picker. @default "scroll"
+   */
+  monthLayout?: 'scroll' | 'paged';
+};
+/**
+ * M3 modal date picker (Compose's `DatePicker`): a header with the selected date, a month
+ * grid you page with the arrows, a horizontal swipe or Page Up / Down, a year list, and a
+ * text input mode. Put it in a {@link PickerDialog} for the modal form; {@link DateField}
+ * is the docked form. Values are `@internationalized/date` dates.
+ *
+ * @example
+ * <DatePicker value={date} onChange={setDate} />
+ */
+export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;
+/**
+ * M3 date range picker (Compose's `DateRangePicker`): select a start and an end date on a
+ * vertically scrolling list of months, or type them in input mode.
+ *
+ * @example
+ * <DateRangePicker value={range} onChange={setRange} />
+ */
+export declare function DateRangePicker(props: DateRangePickerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,492 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { Button } from "../button/Button.js";
+import { TooltipTrigger } from "../tooltip/tooltip-trigger.js";
+import { LazyTooltip } from "../tooltip/lazy-tooltip.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
+import { splitRootProps } from "../../utils/root-props.js";
+import { useSizeTransform } from "./use-size-transform.js";
+import { useViewExit } from "./use-view-exit.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { ChoiceButton, ShortcutIconButton, useMonthSwipe, usePickerKeys } from "./calendar-parts.js";
+import { DateInput } from "./DateInput.js";
+import { datePickerStyles } from "./date-picker-styles.js";
+import { PickerDialogContext } from "./picker-dialog-context.js";
+import { ArrowDropDownIcon, CalendarIcon, ChevronLeftIcon, ChevronRightIcon, EditIcon } from "./picker-icons.js";
+import { useContext, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useCalendar, useDateFormatter, useLocale, useRangeCalendar } from "react-aria";
+import { useCalendarState, useRangeCalendarState } from "react-stately";
+import { useControlledState } from "react-stately/useControlledState";
+import { CalendarDate, createCalendar, getLocalTimeZone, maxDate, minDate, startOfWeek, toCalendarDate, today } from "@internationalized/date";
+//#region src/components/date-picker/DatePicker.tsx
+/**
+* M3 modal date picker (Compose's `DatePicker`): a header with the selected date, a month
+* grid you page with the arrows, a horizontal swipe or Page Up / Down, a year list, and a
+* text input mode. Put it in a {@link PickerDialog} for the modal form; {@link DateField}
+* is the docked form. Values are `@internationalized/date` dates.
+*
+* @example
+* <DatePicker value={date} onChange={setDate} />
+*/
+function DatePicker(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(SingleDatePicker, {
+		...props,
+		directionRef
+	}) });
+}
+/**
+* M3 date range picker (Compose's `DateRangePicker`): select a start and an end date on a
+* vertically scrolling list of months, or type them in input mode.
+*
+* @example
+* <DateRangePicker value={range} onChange={setRange} />
+*/
+function DateRangePicker(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(RangeDatePicker, {
+		...props,
+		directionRef
+	}) });
+}
+function SingleDatePicker(props) {
+	const { locale } = useLocale();
+	const confirm = useContext(PickerDialogContext);
+	const [value, setValue] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);
+	const state = useCalendarState({
+		value,
+		onChange: (date) => setValue(date),
+		minValue: props.min,
+		maxValue: props.max,
+		isDateUnavailable: props.isDateUnavailable,
+		locale,
+		createCalendar
+	});
+	const formatter = useDateFormatter({ dateStyle: "medium" });
+	const labels = props.labels ?? {};
+	const headline = value ? formatter.format(value.toDate(getLocalTimeZone())) : labels.noSelection ?? "Selected date";
+	return /* @__PURE__ */ jsx(PickerFrame, {
+		...props,
+		range: false,
+		state,
+		headline,
+		input: /* @__PURE__ */ jsx(DateInput, {
+			label: labels.dateLabel ?? "Date",
+			value,
+			onCommit: (date) => date && setValue(date),
+			onEnter: (date) => date && confirm?.requestConfirm(),
+			min: props.min,
+			max: props.max,
+			isDateUnavailable: props.isDateUnavailable,
+			labels,
+			density: props.density,
+			className: "w-full"
+		})
+	});
+}
+/** Whole months from `from` to `to`. */
+const monthsBetween = (from, to) => (to.year - from.year) * 12 + (to.month - from.month);
+function RangeDatePicker({ monthLayout = "scroll", ...props }) {
+	const { locale } = useLocale();
+	const confirm = useContext(PickerDialogContext);
+	const [value, setValue] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);
+	const [firstYear, lastYear] = props.yearRange ?? [1900, 2100];
+	const scroll = monthLayout === "scroll";
+	const listStart = maxDate(new CalendarDate(firstYear, 1, 1), props.min ? toCalendarDate(props.min) : null);
+	const listEnd = minDate(new CalendarDate(lastYear, 12, 31), props.max ? toCalendarDate(props.max) : null);
+	const state = useRangeCalendarState({
+		value,
+		onChange: (range) => setValue(range),
+		minValue: scroll ? listStart : props.min,
+		maxValue: scroll ? listEnd : props.max,
+		isDateUnavailable: props.isDateUnavailable,
+		visibleDuration: scroll ? { months: monthsBetween(listStart, listEnd) + 1 } : void 0,
+		locale,
+		createCalendar
+	});
+	const formatter = useDateFormatter({
+		month: "short",
+		day: "numeric"
+	});
+	const labels = props.labels ?? {};
+	const format = (date) => formatter.format(date.toDate(getLocalTimeZone()));
+	const anchor = state.anchorDate;
+	const headline = anchor ? `${format(anchor)} – ${labels.endDateLabel ?? "End date"}` : value ? `${format(value.start)} – ${format(value.end)}` : labels.noSelection ?? "Start date – End date";
+	const common = {
+		min: props.min,
+		max: props.max,
+		isDateUnavailable: props.isDateUnavailable,
+		labels,
+		density: props.density,
+		className: "w-full"
+	};
+	return /* @__PURE__ */ jsx(PickerFrame, {
+		...props,
+		range: true,
+		scroll,
+		state,
+		headline,
+		input: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DateInput, {
+			...common,
+			label: labels.startDateLabel ?? "Start date",
+			value: value?.start ?? null,
+			onCommit: (start) => start && setValue({
+				start,
+				end: value && value.end >= start ? value.end : start
+			})
+		}), /* @__PURE__ */ jsx(DateInput, {
+			...common,
+			label: labels.endDateLabel ?? "End date",
+			value: value?.end ?? null,
+			onCommit: (end) => end && setValue({
+				start: value && value.start <= end ? value.start : end,
+				end
+			}),
+			onEnter: (end) => end && value && confirm?.requestConfirm()
+		})] })
+	});
+}
+function PickerFrame({ range, scroll = false, state, headline, input, header = true, modeToggle = true, defaultMode = "calendar", yearRange = [1900, 2100], labels = {}, id, ref, className, style, classNames, directionRef, ...rest }) {
+	const { root: data } = splitRootProps(rest, { wrapper: true });
+	const [mode, setMode] = useState(defaultMode);
+	const [switched, setSwitched] = useState(false);
+	const [years, setYears] = useState(false);
+	const { attach: attachSize, capture: captureSize } = useSizeTransform(mode);
+	const { attachView: attachExitView, attachSlot: attachExitSlot, capture: captureExit } = useViewExit(mode);
+	const styles = datePickerStyles({ range });
+	const title = mode === "input" ? labels.inputTitle ?? (range ? "Enter dates" : "Enter date") : labels.title ?? (range ? "Select dates" : "Select date");
+	const bodyProps = {
+		styles,
+		years,
+		setYears,
+		yearRange,
+		labels,
+		className: classNames?.body,
+		classNames
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...data,
+		id,
+		ref: (element) => {
+			attachSize(element);
+			directionRef(element);
+			if (typeof ref === "function") ref(element);
+			else if (ref) ref.current = element;
+		},
+		style,
+		"data-tokens": mergeDataTokens("md-comp-date-picker-modal", data),
+		"data-years": years || void 0,
+		"data-mode": mode,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [header && /* @__PURE__ */ jsxs("div", {
+			className: styles.header({ class: classNames?.header }),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: styles.title({ class: classNames?.title }),
+				children: title
+			}), /* @__PURE__ */ jsxs("div", {
+				className: styles.headlineRow(),
+				children: [/* @__PURE__ */ jsx("div", {
+					"aria-live": "polite",
+					"data-slot": "headline",
+					className: styles.headline({ class: classNames?.headline }),
+					children: headline
+				}), modeToggle && /* @__PURE__ */ jsx(IconButton, {
+					variant: "standard",
+					density: 0,
+					icon: mode === "calendar" ? /* @__PURE__ */ jsx(EditIcon, {}) : /* @__PURE__ */ jsx(CalendarIcon, {}),
+					"aria-label": mode === "calendar" ? labels.inputMode ?? "Switch to text input mode" : labels.calendarMode ?? "Switch to calendar input mode",
+					onPress: () => {
+						captureSize();
+						captureExit(mode === "calendar" ? "-48px" : "100%");
+						setSwitched(true);
+						setMode(mode === "calendar" ? "input" : "calendar");
+					}
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.modeStack(),
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: attachExitView,
+				"data-enter": switched ? mode : void 0,
+				className: styles.modeView(),
+				children: mode === "input" ? /* @__PURE__ */ jsx("div", {
+					className: styles.input({ class: classNames?.body }),
+					children: input
+				}) : range && scroll ? /* @__PURE__ */ jsx(RangeMonthList, {
+					state,
+					...bodyProps
+				}) : range ? /* @__PURE__ */ jsx(RangeCalendarBody, {
+					state,
+					...bodyProps
+				}) : /* @__PURE__ */ jsx(SingleCalendarBody, {
+					state,
+					...bodyProps
+				})
+			}, mode), /* @__PURE__ */ jsx("div", {
+				ref: attachExitSlot,
+				"aria-hidden": "true",
+				inert: true,
+				className: styles.modeExit()
+			})]
+		})]
+	});
+}
+function SingleCalendarBody({ state, ...props }) {
+	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar({}, state);
+	return /* @__PURE__ */ jsx(CalendarBody, {
+		...props,
+		state,
+		calendarProps,
+		prevButtonProps,
+		nextButtonProps
+	});
+}
+function RangeCalendarBody({ state, ...props }) {
+	const ref = useRef(null);
+	const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar({}, state, ref);
+	return /* @__PURE__ */ jsx(CalendarBody, {
+		...props,
+		bodyRef: ref,
+		state,
+		calendarProps,
+		prevButtonProps,
+		nextButtonProps
+	});
+}
+function CalendarBody({ state, calendarProps, prevButtonProps, nextButtonProps, styles, years, setYears, yearRange, labels, className, classNames, bodyRef }) {
+	const confirm = useContext(PickerDialogContext);
+	const monthLabel = useDateFormatter({
+		month: "long",
+		year: "numeric"
+	}).format(state.visibleRange.start.toDate(getLocalTimeZone()));
+	const menuRef = useRef(null);
+	const [focusYears, setFocusYears] = useState(false);
+	const yearsPresence = usePresence(years, ["clip-path", "opacity"]);
+	const { swipeProps, slideKey, slideDirection } = useMonthSwipe(state);
+	const onKeyDownCapture = usePickerKeys(state, {
+		onConfirm: confirm?.requestConfirm,
+		onMonthMenu: () => menuRef.current?.focus(),
+		onYearMenu: () => {
+			setFocusYears(true);
+			setYears(true);
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...calendarProps,
+		ref: bodyRef,
+		onKeyDownCapture,
+		className: styles.body({ class: className }),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.nav(),
+				children: [/* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+					ref: menuRef,
+					variant: "text",
+					className: cn("text-on-surface-variant", classNames?.yearButton),
+					"aria-label": `${monthLabel}, ${years ? labels.showDays ?? "Switch to selecting a day" : labels.showYears ?? "Switch to selecting a year"}`,
+					onPress: () => {
+						setFocusYears(false);
+						setYears(!years);
+					},
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-[8px]",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-live": "polite",
+							children: monthLabel
+						}), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "inline-flex size-[20px] items-center justify-center",
+							children: /* @__PURE__ */ jsx("span", {
+								className: styles.yearButtonIcon(),
+								children: /* @__PURE__ */ jsx(ArrowDropDownIcon, {})
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx(LazyTooltip, { children: labels.yearsTooltip ?? "Choose a year (Shift+Y)" })] }), !years && /* @__PURE__ */ jsxs("div", {
+					className: styles.navButtons(),
+					children: [/* @__PURE__ */ jsx(ShortcutIconButton, {
+						icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+						label: labels.previousMonth ?? "Previous month",
+						tooltip: labels.previousMonthTooltip ?? "Previous month (Page Up)",
+						onPress: prevButtonProps.onPress,
+						disabled: prevButtonProps.isDisabled
+					}), /* @__PURE__ */ jsx(ShortcutIconButton, {
+						icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+						label: labels.nextMonth ?? "Next month",
+						tooltip: labels.nextMonthTooltip ?? "Next month (Page Down)",
+						onPress: nextButtonProps.onPress,
+						disabled: nextButtonProps.isDisabled
+					})]
+				})]
+			}),
+			!years && /* @__PURE__ */ jsx("div", {
+				...swipeProps,
+				className: styles.swipe(),
+				children: /* @__PURE__ */ jsx("div", {
+					"data-direction": slideDirection,
+					className: styles.slide(),
+					children: /* @__PURE__ */ jsx(CalendarGrid, {
+						state,
+						styles,
+						classNames
+					})
+				}, slideKey)
+			}),
+			yearsPresence.isPresent && /* @__PURE__ */ jsx(YearList, {
+				state,
+				styles,
+				yearRange,
+				className: classNames?.year,
+				label: labels.yearList ?? "Year",
+				autoFocus: focusYears,
+				exiting: yearsPresence.isExiting,
+				exitProps: yearsPresence.exitProps,
+				onPick: () => setYears(false)
+			})
+		]
+	});
+}
+/**
+* The range picker's months, one under another in a vertical scroll (M3: "To navigate
+* across months, scroll vertically"), under a single weekday row. Only the months in view
+* (and the focused one) are rendered; the rest are spacers of the same fixed height.
+*/
+function RangeMonthList({ state, styles, className, classNames }) {
+	const confirm = useContext(PickerDialogContext);
+	const ref = useRef(null);
+	const listRef = useRef(null);
+	const { calendarProps } = useRangeCalendar({}, state, ref);
+	const { locale } = useLocale();
+	const first = state.visibleRange.start;
+	const count = monthsBetween(first, state.visibleRange.end) + 1;
+	const focusedIndex = monthsBetween(first, state.focusedDate);
+	const [view, setView] = useState(() => ({
+		top: focusedIndex * MONTH_HEIGHT,
+		height: 0
+	}));
+	const weekdays = useDateFormatter({ weekday: "narrow" });
+	const longWeekdays = useDateFormatter({ weekday: "long" });
+	const subhead = useDateFormatter({
+		month: "long",
+		year: "numeric"
+	});
+	const onKeyDownCapture = usePickerKeys(state, {
+		onConfirm: confirm?.requestConfirm,
+		onMonthMenu: () => void 0,
+		onYearMenu: () => void 0
+	});
+	const initialTop = useRef(view.top);
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		list.scrollTop = initialTop.current;
+		const measure = () => setView({
+			top: list.scrollTop,
+			height: list.clientHeight
+		});
+		measure();
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		observer?.observe(list);
+		list.addEventListener("scroll", measure, { passive: true });
+		return () => {
+			observer?.disconnect();
+			list.removeEventListener("scroll", measure);
+		};
+	}, []);
+	const height = view.height || MONTH_HEIGHT;
+	let from = Math.max(0, Math.floor(view.top / MONTH_HEIGHT) - 1);
+	let to = Math.min(count - 1, Math.floor((view.top + height) / MONTH_HEIGHT) + 1);
+	if (state.isFocused) {
+		from = Math.min(from, focusedIndex);
+		to = Math.max(to, focusedIndex);
+	}
+	const weekStart = startOfWeek(today(getLocalTimeZone()), locale);
+	return /* @__PURE__ */ jsxs("div", {
+		...mergeProps(calendarProps, { onKeyDownCapture }),
+		ref,
+		className: styles.body({ class: cn("min-h-0 flex-1", className) }),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: styles.weekdayRow(),
+			children: Array.from({ length: 7 }, (_, index) => {
+				const day = weekStart.add({ days: index }).toDate(getLocalTimeZone());
+				return /* @__PURE__ */ jsx("span", {
+					title: longWeekdays.format(day),
+					className: styles.weekdayCell({ class: classNames?.weekday }),
+					children: weekdays.format(day)
+				}, index);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: listRef,
+			className: styles.months(),
+			children: [
+				/* @__PURE__ */ jsx("div", { style: { height: from * MONTH_HEIGHT } }),
+				Array.from({ length: to - from + 1 }, (_, i) => {
+					const month = first.add({ months: from + i });
+					return /* @__PURE__ */ jsxs("div", {
+						className: "h-[336px]",
+						children: [/* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: styles.monthSubhead({ class: classNames?.monthSubhead }),
+							children: subhead.format(month.toDate(getLocalTimeZone()))
+						}), /* @__PURE__ */ jsx(CalendarGrid, {
+							state,
+							styles,
+							month,
+							classNames
+						})]
+					}, month.toString());
+				}),
+				/* @__PURE__ */ jsx("div", { style: { height: (count - 1 - to) * MONTH_HEIGHT } })
+			]
+		})]
+	});
+}
+/** A month in the scrolling list: its 48px subhead and six 48px weeks. */
+const MONTH_HEIGHT = 336;
+function YearList({ state, styles, yearRange, className, label, autoFocus, exiting, exitProps, onPick }) {
+	const current = today(getLocalTimeZone()).year;
+	const focusedYear = state.focusedDate.year;
+	const minYear = state.minValue?.year ?? -Infinity;
+	const maxYear = state.maxValue?.year ?? Infinity;
+	return /* @__PURE__ */ jsx("div", {
+		...exitProps,
+		role: "radiogroup",
+		"aria-label": label,
+		"aria-hidden": exiting || void 0,
+		inert: exiting || void 0,
+		"data-exiting": exiting || void 0,
+		className: styles.years(),
+		ref: (element) => {
+			if (exiting) return;
+			const selected = element?.querySelector("[aria-checked=\"true\"]");
+			selected?.scrollIntoView?.({ block: "center" });
+			if (autoFocus) selected?.focus({ preventScroll: true });
+		},
+		children: Array.from({ length: yearRange[1] - yearRange[0] + 1 }, (_, i) => yearRange[0] + i).map((year) => /* @__PURE__ */ jsx(ChoiceButton, {
+			selected: year === focusedYear,
+			disabled: year < minYear || year > maxYear,
+			"data-current": year === current || void 0,
+			steps: YEAR_STEPS,
+			className: styles.year({ class: className }),
+			onPick: () => {
+				state.setFocusedDate(state.focusedDate.set({ year }));
+				onPick();
+			},
+			children: year
+		}, year))
+	});
+}
+/** Three years to a row. */
+const YEAR_STEPS = {
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -3,
+	ArrowDown: 3
+};
+//#endregion
+export { DatePicker, DateRangePicker };
+
+//# sourceMappingURL=DatePicker.js.map