@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,393 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { onDemand, usePreloadOnIntent } from "../../utils/load-on-demand.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 { ariaFlag, pickDescriptionAria, splitRootProps } from "../../utils/root-props.js";
+import { COMPACT_WINDOW, useMediaQuery } from "./use-media-query.js";
+import { OptionPopover } from "../select/option-list.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { ChoiceButton, ShortcutIconButton, useMonthSwipe, usePickerKeys } from "./calendar-parts.js";
+import { DateInput } from "./DateInput.js";
+import { datePickerStyles, dockedDatePickerStyles } from "./date-picker-styles.js";
+import { ArrowDropDownIcon, CalendarIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon } from "./picker-icons.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useCalendar, useDateFormatter, useDialog, useLocale } from "react-aria";
+import { useCalendarState, useOverlayTriggerState } from "react-stately";
+import { useControlledState } from "react-stately/useControlledState";
+import { createCalendar, getLocalTimeZone, toCalendarDate } from "@internationalized/date";
+//#region src/components/date-picker/DateField.tsx
+/**
+* The full-screen modal picker a {@link DateField} opens on compact windows, loaded with
+* `import()`: a field on a wider window never needs it.
+*/
+const compactDialog = onDemand(() => import("./CompactDateDialog.js").then((module) => module.CompactDateDialog));
+/**
+* M3 docked date picker: an outlined date field you can type in (no input mask; the
+* locale's format as helper text), whose calendar button opens a calendar just below it
+* with month and year menus, previous / next month and year buttons, the days of the
+* months around the shown one, and Cancel / OK. On compact windows (below 600px) the
+* button opens the modal {@link DatePicker} in a full-screen {@link PickerDialog} instead,
+* as M3 recommends there: the 360px docked calendar doesn't fit a phone. That picker's
+* code loads on demand, only on a compact window: when the browser is next idle, or as soon
+* as the pointer or focus reaches the field, so it's in before the first press.
+*
+* @example
+* <DateField label="Date" value={date} onChange={setDate} />
+*/
+function DateField(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(DateFieldInner, {
+		...props,
+		directionRef
+	}) });
+}
+function DateFieldInner({ label, value: valueProp, defaultValue, onChange, min, max, isDateUnavailable, yearRange = [1900, 2100], open, defaultOpen, onOpenChange, supportingText, invalid: invalidProp, errorMessage, required: requiredProp, disabled, readOnly: readOnlyProp, "aria-describedby": describedBy, "aria-details": details, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-readonly": ariaReadonly, name, id, calendarIcon, density, labels = {}, ref, inputRef, className, style, classNames, directionRef, ...rest }) {
+	const { root, rest: aria } = splitRootProps(rest, { wrapper: true });
+	const invalid = invalidProp ?? ariaFlag(ariaInvalid);
+	const required = requiredProp ?? ariaFlag(ariaRequired);
+	const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);
+	const data = {
+		...root,
+		...pickDescriptionAria(aria),
+		...describedBy !== void 0 && { "aria-describedby": describedBy },
+		...details !== void 0 && { "aria-details": details }
+	};
+	const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);
+	const overlay = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const fieldRef = useRef(null);
+	const popoverRef = useRef(null);
+	const compact = useMediaQuery(COMPACT_WINDOW);
+	usePreloadOnIntent(fieldRef, compactDialog.preload, compact);
+	const [compactOpened, setCompactOpened] = useState(compact && overlay.isOpen);
+	if (compact && overlay.isOpen && !compactOpened) setCompactOpened(true);
+	const { root: rootClassName, calendar, menuButton, weekday, day, item, ...fieldClassNames } = classNames ?? {};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DateInput, {
+		ref: (element) => {
+			fieldRef.current = element;
+			directionRef(element);
+			if (typeof ref === "function") ref(element);
+			else if (ref) ref.current = element;
+		},
+		inputRef,
+		label,
+		value,
+		onCommit: setValue,
+		min,
+		max,
+		isDateUnavailable,
+		labels,
+		supportingText,
+		invalid,
+		errorMessage,
+		required,
+		disabled,
+		readOnly,
+		name,
+		id,
+		style,
+		data,
+		className: cn(rootClassName, className),
+		classNames: fieldClassNames,
+		density,
+		trailingIcon: /* @__PURE__ */ jsx(IconButton, {
+			variant: "standard",
+			icon: calendarIcon ?? /* @__PURE__ */ jsx(CalendarIcon, {}),
+			"aria-label": labels.openCalendar ?? "Open calendar",
+			"aria-haspopup": "dialog",
+			"aria-expanded": overlay.isOpen,
+			disabled: disabled || readOnly,
+			onPress: overlay.open
+		})
+	}), compact ? compactOpened && /* @__PURE__ */ jsx(compactDialog.Component, {
+		open: overlay.isOpen,
+		onOpenChange: overlay.setOpen,
+		value,
+		onCommit: setValue,
+		min,
+		max,
+		isDateUnavailable,
+		yearRange,
+		labels,
+		classNames: {
+			calendar,
+			menuButton,
+			weekday,
+			day,
+			item
+		}
+	}) : /* @__PURE__ */ jsx(OptionPopover, {
+		state: overlay,
+		triggerRef: fieldRef,
+		popoverRef,
+		children: /* @__PURE__ */ jsx(DockedCalendar, {
+			value,
+			onCommit: (date) => {
+				setValue(date);
+				overlay.close();
+			},
+			onCancel: overlay.close,
+			min,
+			max,
+			isDateUnavailable,
+			yearRange,
+			labels,
+			className: calendar,
+			classNames: {
+				menuButton,
+				weekday,
+				day,
+				item
+			}
+		})
+	})] });
+}
+/** The dropdown calendar of a {@link DateField}. */
+function DockedCalendar({ value, onCommit, onCancel, min: minValue, max: maxValue, isDateUnavailable, yearRange, labels, className, classNames }) {
+	const { locale } = useLocale();
+	const [draft, setDraft] = useState(value);
+	const state = useCalendarState({
+		value: draft,
+		onChange: (date) => setDraft(date),
+		minValue,
+		maxValue,
+		isDateUnavailable,
+		autoFocus: true,
+		locale,
+		createCalendar
+	});
+	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar({}, state);
+	const panelRef = useRef(null);
+	const { dialogProps } = useDialog({ "aria-label": labels.calendar ?? "Choose a date" }, panelRef);
+	const [view, setView] = useState("days");
+	const [focusList, setFocusList] = useState(false);
+	const monthRef = useRef(null);
+	const yearRef = useRef(null);
+	const styles = dockedDatePickerStyles();
+	const grid = datePickerStyles({ docked: true });
+	const { swipeProps, slideKey, slideDirection } = useMonthSwipe(state);
+	const shortMonth = useDateFormatter({ month: "short" });
+	const longMonth = useDateFormatter({ month: "long" });
+	const yearFormat = useDateFormatter({ year: "numeric" });
+	const shown = state.focusedDate;
+	const at = (date) => date.toDate(getLocalTimeZone());
+	const min = minValue ? toCalendarDate(minValue) : void 0;
+	const max = maxValue ? toCalendarDate(maxValue) : void 0;
+	const firstYear = Math.max(yearRange[0], min?.year ?? -Infinity);
+	const lastYear = Math.min(yearRange[1], max?.year ?? Infinity);
+	const openList = (next, byKeyboard) => {
+		setFocusList(byKeyboard);
+		setView(view === next ? "days" : next);
+	};
+	const pick = (date, menu) => {
+		state.setFocusedDate(date);
+		setView("days");
+		(menu === "months" ? monthRef : yearRef).current?.focus();
+	};
+	const onKeyDownCapture = usePickerKeys(state, {
+		onConfirm: () => onCommit(state.focusedDate),
+		onMonthMenu: () => openList("months", true),
+		onYearMenu: () => openList("years", true)
+	});
+	const monthOutside = (month) => {
+		const date = shown.set({
+			month,
+			day: 1
+		});
+		const last = date.add({ months: 1 }).subtract({ days: 1 });
+		return max !== void 0 && date.compare(max) > 0 || min !== void 0 && last.compare(min) < 0;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...dialogProps,
+		ref: panelRef,
+		onKeyDownCapture,
+		"data-view": view,
+		className: styles.panel({ class: className }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...calendarProps,
+			className: styles.calendar(),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: styles.header(),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: styles.group(),
+						children: [
+							/* @__PURE__ */ jsx(ShortcutIconButton, {
+								icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+								label: labels.previousMonth ?? "Previous month",
+								tooltip: labels.previousMonthTooltip ?? "Previous month (Page Up)",
+								onPress: prevButtonProps.onPress,
+								disabled: view !== "days" || prevButtonProps.isDisabled
+							}),
+							/* @__PURE__ */ jsx(MenuButton, {
+								buttonRef: monthRef,
+								label: `${longMonth.format(at(shown))}, ${labels.chooseMonth ?? "Choose a month"}`,
+								tooltip: labels.monthMenuTooltip ?? "Choose a month (Shift+M)",
+								open: view === "months",
+								disabled: view === "years",
+								styles,
+								className: classNames.menuButton,
+								onPress: () => openList("months", false),
+								children: shortMonth.format(at(shown))
+							}),
+							/* @__PURE__ */ jsx(ShortcutIconButton, {
+								icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+								label: labels.nextMonth ?? "Next month",
+								tooltip: labels.nextMonthTooltip ?? "Next month (Page Down)",
+								onPress: nextButtonProps.onPress,
+								disabled: view !== "days" || nextButtonProps.isDisabled
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: styles.group(),
+						children: [
+							/* @__PURE__ */ jsx(ShortcutIconButton, {
+								icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+								label: labels.previousYear ?? "Previous year",
+								tooltip: labels.previousYearTooltip ?? "Previous year (Shift+Page Up)",
+								onPress: () => state.setFocusedDate(shown.subtract({ years: 1 })),
+								disabled: view !== "days" || shown.year <= firstYear
+							}),
+							/* @__PURE__ */ jsx(MenuButton, {
+								buttonRef: yearRef,
+								label: `${yearFormat.format(at(shown))}, ${labels.chooseYear ?? "Choose a year"}`,
+								tooltip: labels.yearMenuTooltip ?? "Choose a year (Shift+Y)",
+								open: view === "years",
+								disabled: view === "months",
+								styles,
+								className: classNames.menuButton,
+								onPress: () => openList("years", false),
+								children: yearFormat.format(at(shown))
+							}),
+							/* @__PURE__ */ jsx(ShortcutIconButton, {
+								icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+								label: labels.nextYear ?? "Next year",
+								tooltip: labels.nextYearTooltip ?? "Next year (Shift+Page Down)",
+								onPress: () => state.setFocusedDate(shown.add({ years: 1 })),
+								disabled: view !== "days" || shown.year >= lastYear
+							})
+						]
+					})]
+				}),
+				view === "days" && /* @__PURE__ */ jsx("div", {
+					...swipeProps,
+					className: grid.swipe({ class: styles.view() }),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-direction": slideDirection,
+						className: grid.slide(),
+						children: /* @__PURE__ */ jsx(CalendarGrid, {
+							state,
+							styles: grid,
+							classNames
+						})
+					}, slideKey)
+				}),
+				view === "months" && /* @__PURE__ */ jsx(ChoiceList, {
+					label: labels.monthList ?? "Month",
+					autoFocus: focusList,
+					styles,
+					children: Array.from({ length: 12 }, (_, i) => i + 1).map((month) => /* @__PURE__ */ jsxs(ChoiceButton, {
+						selected: month === shown.month,
+						disabled: monthOutside(month),
+						steps: LIST_STEPS,
+						className: styles.item({ class: classNames.item }),
+						onPick: () => pick(shown.set({ month }), "months"),
+						children: [/* @__PURE__ */ jsx(Check, {
+							selected: month === shown.month,
+							styles
+						}), longMonth.format(at(shown.set({
+							month,
+							day: 1
+						})))]
+					}, month))
+				}),
+				view === "years" && /* @__PURE__ */ jsx(ChoiceList, {
+					label: labels.yearList ?? "Year",
+					autoFocus: focusList,
+					styles,
+					children: Array.from({ length: yearRange[1] - yearRange[0] + 1 }, (_, i) => yearRange[0] + i).map((year) => /* @__PURE__ */ jsxs(ChoiceButton, {
+						selected: year === shown.year,
+						disabled: year < firstYear || year > lastYear,
+						steps: LIST_STEPS,
+						className: styles.item({ class: classNames.item }),
+						onPick: () => pick(shown.set({ year }), "years"),
+						children: [/* @__PURE__ */ jsx(Check, {
+							selected: year === shown.year,
+							styles
+						}), year]
+					}, year))
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.actions(),
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onPress: onCancel,
+				children: labels.cancel ?? "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onPress: () => onCommit(draft),
+				children: labels.ok ?? "OK"
+			})]
+		})]
+	});
+}
+/** One option per row. */
+const LIST_STEPS = {
+	ArrowUp: -1,
+	ArrowDown: 1
+};
+function MenuButton({ buttonRef, label, tooltip, open, disabled, styles, className, onPress, children }) {
+	return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+		ref: buttonRef,
+		variant: "text",
+		"aria-label": label,
+		"aria-expanded": open,
+		"data-menu-open": open || void 0,
+		disabled,
+		onPress,
+		className: styles.menuButton({ class: className }),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-[8px]",
+			children: [children, /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "inline-flex size-[20px] items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					"data-open": open || void 0,
+					className: styles.menuIcon(),
+					children: /* @__PURE__ */ jsx(ArrowDropDownIcon, {})
+				})
+			})]
+		})
+	}), /* @__PURE__ */ jsx(LazyTooltip, { children: tooltip })] });
+}
+function ChoiceList({ label, autoFocus, styles, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": label,
+		className: styles.list(),
+		ref: (element) => {
+			const selected = element?.querySelector("[aria-checked=\"true\"]");
+			selected?.scrollIntoView?.({ block: "center" });
+			if (autoFocus) selected?.focus({ preventScroll: true });
+		},
+		children
+	});
+}
+function Check({ selected, styles }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: styles.check(),
+		children: selected && /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
+//#endregion
+export { DateField };
+
+//# sourceMappingURL=DateField.js.map

package/dist/components/date-picker/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-picker/DateField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createCalendar,\n  getLocalTimeZone,\n  toCalendarDate,\n  type CalendarDate,\n  type DateValue,\n} from '@internationalized/date';\nimport {\n  useRef,\n  useState,\n  type AriaAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useCalendar, useDateFormatter, useDialog, useLocale } from 'react-aria';\nimport { useCalendarState, useOverlayTriggerState } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport { cn } from '../../utils/cn';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { Button } from '../button/Button';\nimport { IconButton } from '../icon-button/IconButton';\nimport type { Density } from '../../tokens/density';\nimport { OptionPopover } from '../select/option-list';\nimport type { TextFieldClassNames } from '../text-field/TextField';\nimport { LazyTooltip } from '../tooltip/lazy-tooltip';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport { TooltipTrigger } from '../tooltip/tooltip-trigger';\nimport { CalendarGrid } from './CalendarGrid';\nimport { ChoiceButton, ShortcutIconButton, useMonthSwipe, usePickerKeys } from './calendar-parts';\nimport { DateInput, type DateInputLabels } from './DateInput';\nimport type { CompactDateDialogProps } from './CompactDateDialog';\nimport { COMPACT_WINDOW, useMediaQuery } from './use-media-query';\nimport { datePickerStyles, dockedDatePickerStyles } from './date-picker-styles';\nimport {\n  ArrowDropDownIcon,\n  CalendarIcon,\n  CheckIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from './picker-icons';\n\n/** Words of a {@link DateField}, for localisation. */\nexport interface DateFieldLabels extends DateInputLabels {\n  /** The calendar icon button. @default \"Open calendar\" */\n  openCalendar: string;\n  /** Name of the dropdown calendar. @default \"Choose a date\" */\n  calendar: string;\n  /** The previous month button. @default \"Previous month\" */\n  previousMonth: string;\n  /** The next month button. @default \"Next month\" */\n  nextMonth: string;\n  /** Tooltip of the previous month button. @default \"Previous month (Page Up)\" */\n  previousMonthTooltip: string;\n  /** Tooltip of the next month button. @default \"Next month (Page Down)\" */\n  nextMonthTooltip: string;\n  /** The previous year button. @default \"Previous year\" */\n  previousYear: string;\n  /** The next year button. @default \"Next year\" */\n  nextYear: string;\n  /** Tooltip of the previous year button. @default \"Previous year (Shift+Page Up)\" */\n  previousYearTooltip: string;\n  /** Tooltip of the next year button. @default \"Next year (Shift+Page Down)\" */\n  nextYearTooltip: string;\n  /** Added to the month menu button's name. @default \"Choose a month\" */\n  chooseMonth: string;\n  /** Added to the year menu button's name. @default \"Choose a year\" */\n  chooseYear: string;\n  /** Tooltip of the month menu button. @default \"Choose a month (Shift+M)\" */\n  monthMenuTooltip: string;\n  /** Tooltip of the year menu button. @default \"Choose a year (Shift+Y)\" */\n  yearMenuTooltip: string;\n  /** Name of the month list. @default \"Month\" */\n  monthList: string;\n  /** Name of the year list. @default \"Year\" */\n  yearList: string;\n  /** The calendar's dismissing action. @default \"Cancel\" */\n  cancel: string;\n  /** The calendar's confirming action. @default \"OK\" */\n  ok: string;\n}\n\nexport interface DateFieldClassNames extends Omit<\n  TextFieldClassNames,\n  'leadingIcon' | 'prefix' | 'suffix' | 'counter'\n> {\n  /** The text field's root; `className` goes here too. */\n  root?: string;\n  /** The `<input>`. */\n  input?: string;\n  /**\n   * The calendar's panel: the dropdown panel, or on compact windows the full-screen\n   * dialog's surface.\n   */\n  calendar?: string;\n  /**\n   * The calendar's month and year menu buttons (on compact windows, the modal picker's one\n   * month and year button).\n   */\n  menuButton?: string;\n  /** The calendar's weekday names. */\n  weekday?: string;\n  /** Each day of the calendar. */\n  day?: string;\n  /** Each month or year in the calendar's month and year lists. */\n  item?: string;\n}\n\nexport interface DateFieldProps extends WrapperRootDOMProps {\n  /** The field's label, e.g. \"Date of birth\". */\n  label: ReactNode;\n  /** The date (controlled); `null` for none. */\n  value?: CalendarDate | null;\n  /** Initial date when uncontrolled. @default null */\n  defaultValue?: CalendarDate | null;\n  /** A date was typed and committed, or picked and confirmed; `null` when cleared. */\n  onChange?: (value: CalendarDate | null) => void;\n  /** Earliest date allowed; earlier days are disabled. */\n  min?: DateValue;\n  /** Latest date allowed; later days are disabled. */\n  max?: DateValue;\n  /** Returns `true` for a day that can't be picked (it shows disabled). */\n  isDateUnavailable?: (date: DateValue) => boolean;\n  /** First and last years of the year menu; years outside min / max are disabled. @default [1900, 2100] */\n  yearRange?: [number, number];\n  /** Whether the dropdown calendar is open (controlled). */\n  open?: boolean;\n  /** Whether the dropdown calendar starts open when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the dropdown calendar opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Helper text below the field. @default the locale's format, such as \"MM/DD/YYYY\" in en-US */\n  supportingText?: ReactNode;\n  /** Marks the field invalid, with `errorMessage` below it. */\n  invalid?: boolean;\n  /** Error text shown below the field while it's invalid, in place of `supportingText`. */\n  errorMessage?: ReactNode;\n  /** The field must have a date. @default false */\n  required?: boolean;\n  /** The field and its calendar button can't be used. @default false */\n  disabled?: boolean;\n  /** The date can be read and focused but not changed. @default false */\n  readOnly?: boolean;\n  /**\n   * More description for the `<input>`, after the supporting or error text: the ids of\n   * elements such as a hint that the date must come after another field's.\n   */\n  'aria-describedby'?: string;\n  /** The id of an element with more details about the `<input>`. */\n  'aria-details'?: string;\n  /** Read as `invalid` when that's left out, for a form library that sets the attribute. */\n  'aria-invalid'?: AriaAttributes['aria-invalid'];\n  /** Read as `required` when that's left out, for a form library that sets the attribute. */\n  'aria-required'?: AriaAttributes['aria-required'];\n  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */\n  'aria-readonly'?: AriaAttributes['aria-readonly'];\n  /** Form field name; the input submits the typed text. */\n  name?: string;\n  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** Icon of the button that opens the calendar. */\n  calendarIcon?: ReactElement;\n  /**\n   * Web density of the typed field, `0` to `-3`: each step takes 4px off it (56px at 0, 44px\n   * at -3). The calendar keeps its size: M3 doesn't make date pickers denser, since their 48px\n   * day targets are part of their accessibility. Left out, the field takes the density of the\n   * nearest `ThemeProvider` or `ThemeScope`.\n   * @default 0\n   */\n  density?: Density;\n  /** Words the field and its calendar show and announce, with English defaults. */\n  labels?: Partial<DateFieldLabels>;\n  /** The text field's root. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: DateFieldClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/**\n * The full-screen modal picker a {@link DateField} opens on compact windows, loaded with\n * `import()`: a field on a wider window never needs it.\n */\nconst compactDialog = onDemand<CompactDateDialogProps>(() =>\n  import('./CompactDateDialog').then((module) => module.CompactDateDialog),\n);\n\n/**\n * M3 docked date picker: an outlined date field you can type in (no input mask; the\n * locale's format as helper text), whose calendar button opens a calendar just below it\n * with month and year menus, previous / next month and year buttons, the days of the\n * months around the shown one, and Cancel / OK. On compact windows (below 600px) the\n * button opens the modal {@link DatePicker} in a full-screen {@link PickerDialog} instead,\n * as M3 recommends there: the 360px docked calendar doesn't fit a phone. That picker's\n * code loads on demand, only on a compact window: when the browser is next idle, or as soon\n * as the pointer or focus reaches the field, so it's in before the first press.\n *\n * @example\n * <DateField label=\"Date\" value={date} onChange={setDate} />\n */\nexport function DateField(props: DateFieldProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <DateFieldInner {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nfunction DateFieldInner({\n  label,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  isDateUnavailable,\n  yearRange = [1900, 2100],\n  open,\n  defaultOpen,\n  onOpenChange,\n  supportingText,\n  invalid: invalidProp,\n  errorMessage,\n  required: requiredProp,\n  disabled,\n  readOnly: readOnlyProp,\n  'aria-describedby': describedBy,\n  'aria-details': details,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-readonly': ariaReadonly,\n  name,\n  id,\n  calendarIcon,\n  density,\n  labels = {},\n  ref,\n  inputRef,\n  className,\n  style,\n  classNames,\n  directionRef,\n  ...rest\n}: DateFieldProps & { directionRef: (element: HTMLElement | null) => void }) {\n  const { root, rest: aria } = splitRootProps(rest, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);\n  // The text field splits them again: the description reaches its `<input>`, after its own.\n  const data = {\n    ...root,\n    ...pickDescriptionAria(aria),\n    ...(describedBy !== undefined && { 'aria-describedby': describedBy }),\n    ...(details !== undefined && { 'aria-details': details }),\n  };\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);\n  const overlay = useOverlayTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  // M3: \"On compact breakpoints … a full-screen modal date picker is recommended\". Below\n  // 600px the docked calendar's header was cut off and its day targets overlapped.\n  const compact = useMediaQuery(COMPACT_WINDOW);\n  usePreloadOnIntent(fieldRef, compactDialog.preload, compact);\n  // Mounted from the first open on, so it can play its exit; the module is usually in by\n  // then, and if not it opens as it arrives, taking focus as it would have.\n  const [compactOpened, setCompactOpened] = useState(compact && overlay.isOpen);\n  if (compact && overlay.isOpen && !compactOpened) setCompactOpened(true);\n  const {\n    root: rootClassName,\n    calendar,\n    menuButton,\n    weekday,\n    day,\n    item,\n    ...fieldClassNames\n  } = classNames ?? {};\n  return (\n    <>\n      <DateInput\n        ref={(element) => {\n          fieldRef.current = element;\n          directionRef(element);\n          if (typeof ref === 'function') ref(element);\n          else if (ref) ref.current = element;\n        }}\n        inputRef={inputRef}\n        label={label}\n        value={value}\n        onCommit={setValue}\n        min={min}\n        max={max}\n        isDateUnavailable={isDateUnavailable}\n        labels={labels}\n        supportingText={supportingText}\n        invalid={invalid}\n        errorMessage={errorMessage}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        id={id}\n        style={style}\n        data={data}\n        className={cn(rootClassName, className)}\n        classNames={fieldClassNames}\n        density={density}\n        trailingIcon={\n          <IconButton\n            variant=\"standard\"\n            icon={calendarIcon ?? <CalendarIcon />}\n            aria-label={labels.openCalendar ?? 'Open calendar'}\n            aria-haspopup=\"dialog\"\n            aria-expanded={overlay.isOpen}\n            disabled={disabled || readOnly}\n            onPress={overlay.open}\n          />\n        }\n      />\n      {compact ? (\n        compactOpened && (\n          <compactDialog.Component\n            open={overlay.isOpen}\n            onOpenChange={overlay.setOpen}\n            value={value}\n            onCommit={setValue}\n            min={min}\n            max={max}\n            isDateUnavailable={isDateUnavailable}\n            yearRange={yearRange}\n            labels={labels}\n            classNames={{ calendar, menuButton, weekday, day, item }}\n          />\n        )\n      ) : (\n        <OptionPopover state={overlay} triggerRef={fieldRef} popoverRef={popoverRef}>\n          <DockedCalendar\n            value={value}\n            onCommit={(date) => {\n              setValue(date);\n              overlay.close();\n            }}\n            onCancel={overlay.close}\n            min={min}\n            max={max}\n            isDateUnavailable={isDateUnavailable}\n            yearRange={yearRange}\n            labels={labels}\n            className={calendar}\n            classNames={{ menuButton, weekday, day, item }}\n          />\n        </OptionPopover>\n      )}\n    </>\n  );\n}\n\ntype View = 'days' | 'months' | 'years';\n\n/** The dropdown calendar of a {@link DateField}. */\nfunction DockedCalendar({\n  value,\n  onCommit,\n  onCancel,\n  min: minValue,\n  max: maxValue,\n  isDateUnavailable,\n  yearRange,\n  labels,\n  className,\n  classNames,\n}: {\n  value: CalendarDate | null;\n  onCommit: (date: CalendarDate | null) => void;\n  onCancel: () => void;\n  min: DateValue | undefined;\n  max: DateValue | undefined;\n  isDateUnavailable: ((date: DateValue) => boolean) | undefined;\n  yearRange: [number, number];\n  labels: Partial<DateFieldLabels>;\n  className: string | undefined;\n  classNames: Pick<DateFieldClassNames, 'menuButton' | 'weekday' | 'day' | 'item'>;\n}) {\n  const { locale } = useLocale();\n  const [draft, setDraft] = useState(value);\n  const state = useCalendarState({\n    value: draft,\n    onChange: (date) => setDraft(date as CalendarDate),\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    autoFocus: true,\n    locale,\n    createCalendar,\n  });\n  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar({}, state);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const { dialogProps } = useDialog({ 'aria-label': labels.calendar ?? 'Choose a date' }, panelRef);\n  const [view, setView] = useState<View>('days');\n  const [focusList, setFocusList] = useState(false);\n  const monthRef = useRef<HTMLButtonElement>(null);\n  const yearRef = useRef<HTMLButtonElement>(null);\n  const styles = dockedDatePickerStyles();\n  const grid = datePickerStyles({ docked: true });\n  const { swipeProps, slideKey, slideDirection } = useMonthSwipe(state);\n  const shortMonth = useDateFormatter({ month: 'short' });\n  const longMonth = useDateFormatter({ month: 'long' });\n  const yearFormat = useDateFormatter({ year: 'numeric' });\n  const shown = state.focusedDate;\n  const at = (date: CalendarDate) => date.toDate(getLocalTimeZone());\n  const min = minValue ? toCalendarDate(minValue) : undefined;\n  const max = maxValue ? toCalendarDate(maxValue) : undefined;\n  const firstYear = Math.max(yearRange[0], min?.year ?? -Infinity);\n  const lastYear = Math.min(yearRange[1], max?.year ?? Infinity);\n\n  const openList = (next: View, byKeyboard: boolean) => {\n    setFocusList(byKeyboard);\n    setView(view === next ? 'days' : next);\n  };\n  const pick = (date: CalendarDate, menu: View) => {\n    state.setFocusedDate(date);\n    setView('days');\n    (menu === 'months' ? monthRef : yearRef).current?.focus();\n  };\n  const onKeyDownCapture = usePickerKeys(state, {\n    onConfirm: () => onCommit(state.focusedDate),\n    onMonthMenu: () => openList('months', true),\n    onYearMenu: () => openList('years', true),\n  });\n  const monthOutside = (month: number) => {\n    const date = shown.set({ month, day: 1 });\n    const last = date.add({ months: 1 }).subtract({ days: 1 });\n    return (\n      (max !== undefined && date.compare(max) > 0) || (min !== undefined && last.compare(min) < 0)\n    );\n  };\n\n  return (\n    <div\n      {...dialogProps}\n      ref={panelRef}\n      onKeyDownCapture={onKeyDownCapture}\n      data-view={view}\n      className={styles.panel({ class: className })}\n    >\n      <div {...calendarProps} className={styles.calendar()}>\n        <div className={styles.header()}>\n          <div className={styles.group()}>\n            <ShortcutIconButton\n              icon={<ChevronLeftIcon />}\n              label={labels.previousMonth ?? 'Previous month'}\n              tooltip={labels.previousMonthTooltip ?? 'Previous month (Page Up)'}\n              onPress={prevButtonProps.onPress as () => void}\n              disabled={view !== 'days' || prevButtonProps.isDisabled}\n            />\n            <MenuButton\n              buttonRef={monthRef}\n              label={`${longMonth.format(at(shown))}, ${labels.chooseMonth ?? 'Choose a month'}`}\n              tooltip={labels.monthMenuTooltip ?? 'Choose a month (Shift+M)'}\n              open={view === 'months'}\n              disabled={view === 'years'}\n              styles={styles}\n              className={classNames.menuButton}\n              onPress={() => openList('months', false)}\n            >\n              {shortMonth.format(at(shown))}\n            </MenuButton>\n            <ShortcutIconButton\n              icon={<ChevronRightIcon />}\n              label={labels.nextMonth ?? 'Next month'}\n              tooltip={labels.nextMonthTooltip ?? 'Next month (Page Down)'}\n              onPress={nextButtonProps.onPress as () => void}\n              disabled={view !== 'days' || nextButtonProps.isDisabled}\n            />\n          </div>\n          <div className={styles.group()}>\n            <ShortcutIconButton\n              icon={<ChevronLeftIcon />}\n              label={labels.previousYear ?? 'Previous year'}\n              tooltip={labels.previousYearTooltip ?? 'Previous year (Shift+Page Up)'}\n              onPress={() => state.setFocusedDate(shown.subtract({ years: 1 }))}\n              disabled={view !== 'days' || shown.year <= firstYear}\n            />\n            <MenuButton\n              buttonRef={yearRef}\n              label={`${yearFormat.format(at(shown))}, ${labels.chooseYear ?? 'Choose a year'}`}\n              tooltip={labels.yearMenuTooltip ?? 'Choose a year (Shift+Y)'}\n              open={view === 'years'}\n              disabled={view === 'months'}\n              styles={styles}\n              className={classNames.menuButton}\n              onPress={() => openList('years', false)}\n            >\n              {yearFormat.format(at(shown))}\n            </MenuButton>\n            <ShortcutIconButton\n              icon={<ChevronRightIcon />}\n              label={labels.nextYear ?? 'Next year'}\n              tooltip={labels.nextYearTooltip ?? 'Next year (Shift+Page Down)'}\n              onPress={() => state.setFocusedDate(shown.add({ years: 1 }))}\n              disabled={view !== 'days' || shown.year >= lastYear}\n            />\n          </div>\n        </div>\n        {view === 'days' && (\n          <div {...swipeProps} className={grid.swipe({ class: styles.view() })}>\n            <div key={slideKey} data-direction={slideDirection} className={grid.slide()}>\n              <CalendarGrid state={state} styles={grid} classNames={classNames} />\n            </div>\n          </div>\n        )}\n        {view === 'months' && (\n          <ChoiceList label={labels.monthList ?? 'Month'} autoFocus={focusList} styles={styles}>\n            {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (\n              <ChoiceButton\n                key={month}\n                selected={month === shown.month}\n                disabled={monthOutside(month)}\n                steps={LIST_STEPS}\n                className={styles.item({ class: classNames.item })}\n                onPick={() => pick(shown.set({ month }), 'months')}\n              >\n                <Check selected={month === shown.month} styles={styles} />\n                {longMonth.format(at(shown.set({ month, day: 1 })))}\n              </ChoiceButton>\n            ))}\n          </ChoiceList>\n        )}\n        {view === 'years' && (\n          <ChoiceList label={labels.yearList ?? 'Year'} autoFocus={focusList} styles={styles}>\n            {Array.from(\n              { length: yearRange[1] - yearRange[0] + 1 },\n              (_, i) => yearRange[0] + i,\n            ).map((year) => (\n              <ChoiceButton\n                key={year}\n                selected={year === shown.year}\n                disabled={year < firstYear || year > lastYear}\n                steps={LIST_STEPS}\n                className={styles.item({ class: classNames.item })}\n                onPick={() => pick(shown.set({ year }), 'years')}\n              >\n                <Check selected={year === shown.year} styles={styles} />\n                {year}\n              </ChoiceButton>\n            ))}\n          </ChoiceList>\n        )}\n      </div>\n      <div className={styles.actions()}>\n        <Button variant=\"text\" onPress={onCancel}>\n          {labels.cancel ?? 'Cancel'}\n        </Button>\n        <Button variant=\"text\" onPress={() => onCommit(draft)}>\n          {labels.ok ?? 'OK'}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/** One option per row. */\nconst LIST_STEPS = { ArrowUp: -1, ArrowDown: 1 };\n\nfunction MenuButton({\n  buttonRef,\n  label,\n  tooltip,\n  open,\n  disabled,\n  styles,\n  className,\n  onPress,\n  children,\n}: {\n  buttonRef: Ref<HTMLButtonElement>;\n  label: string;\n  tooltip: string;\n  open: boolean;\n  disabled: boolean;\n  styles: ReturnType<typeof dockedDatePickerStyles>;\n  className: string | undefined;\n  onPress: () => void;\n  children: string;\n}) {\n  return (\n    <TooltipTrigger>\n      <Button\n        ref={buttonRef}\n        variant=\"text\"\n        aria-label={label}\n        aria-expanded={open}\n        // M3 menus: while its list is open the button looks the same, plus a pressed state.\n        data-menu-open={open || undefined}\n        disabled={disabled}\n        onPress={onPress}\n        className={styles.menuButton({ class: className })}\n      >\n        {/* The drop-down arrow trails the label here, which Button's one leading icon can't do. */}\n        <span className=\"inline-flex items-center gap-[8px]\">\n          {children}\n          <span aria-hidden=\"true\" className=\"inline-flex size-[20px] items-center justify-center\">\n            <span data-open={open || undefined} className={styles.menuIcon()}>\n              <ArrowDropDownIcon />\n            </span>\n          </span>\n        </span>\n      </Button>\n      <LazyTooltip>{tooltip}</LazyTooltip>\n    </TooltipTrigger>\n  );\n}\n\nfunction ChoiceList({\n  label,\n  autoFocus,\n  styles,\n  children,\n}: {\n  label: string;\n  autoFocus: boolean;\n  styles: ReturnType<typeof dockedDatePickerStyles>;\n  children: ReactNode;\n}) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      className={styles.list()}\n      ref={(element) => {\n        const selected = element?.querySelector<HTMLElement>('[aria-checked=\"true\"]');\n        selected?.scrollIntoView?.({ block: 'center' });\n        if (autoFocus) selected?.focus({ preventScroll: true });\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Check({\n  selected,\n  styles,\n}: {\n  selected: boolean;\n  styles: ReturnType<typeof dockedDatePickerStyles>;\n}) {\n  return <span className={styles.check()}>{selected && <CheckIcon />}</span>;\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import "../text-field/TextField.js";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { CalendarDate, DateValue } from "@internationalized/date";
+//#region src/components/date-picker/DateInput.d.ts
+/** Words of a typed date field, for localisation. */
+export interface DateInputLabels {
+  /**
+   * The format hint shown below the field and as its placeholder.
+   * @default the locale's format, such as "MM/DD/YYYY" in en-US
+   */
+  dateFormatHint: string;
+  /** Error when the text isn't a date. @default "Enter a date as {hint}" */
+  invalidDate: string;
+  /** Error for a date before `min` or after `max`. @default "Date out of range" */
+  dateOutOfRange: string;
+  /** Error for a date `isDateUnavailable` turns away. @default "Date not available" */
+  dateUnavailable: string;
+}
+//#endregion
+//# sourceMappingURL=DateInput.d.ts.map

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

@@ -0,0 +1,99 @@
+"use client";
+import { TextField } from "../text-field/TextField.js";
+import { dateFormat, parseDate } from "./date-format.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useLocale } from "react-aria";
+import { toCalendarDate } from "@internationalized/date";
+//#region src/components/date-picker/DateInput.tsx
+/**
+* A typed date, as the M3 date input asks: an outlined text field with no input mask that
+* reads dashes, spaces, slashes or dots between the parts and an optional leading zero,
+* reformats on Enter or blur, shows the locale's format below as its helper text, and
+* says in the supporting text why a date can't be used.
+*/
+function DateInput({ label, value, onCommit, onEnter, min: minValue, max: maxValue, isDateUnavailable, labels = {}, supportingText, trailingIcon, required, disabled, readOnly, name, id, autoFocus, invalid, errorMessage, className, style, data, classNames, density, ref, inputRef }) {
+	const { locale } = useLocale();
+	const format = dateFormat(locale);
+	const hint = labels.dateFormatHint ?? format.hint;
+	const show = (date) => date ? format.format(date) : "";
+	const [text, setText] = useState(() => show(value));
+	const [error, setError] = useState(null);
+	const [shown, setShown] = useState(value?.toString());
+	if (value?.toString() !== shown) {
+		setShown(value?.toString());
+		setText(show(value));
+		setError(null);
+	}
+	const problem = (date) => {
+		const min = minValue && toCalendarDate(minValue);
+		const max = maxValue && toCalendarDate(maxValue);
+		if (min && date.compare(min) < 0 || max && date.compare(max) > 0) return labels.dateOutOfRange ?? "Date out of range";
+		if (isDateUnavailable?.(date)) return labels.dateUnavailable ?? "Date not available";
+		return null;
+	};
+	/** Reads the text; returns the date (or `null` when empty), or `undefined` when unusable. */
+	const commit = () => {
+		if (text.trim() === "") {
+			setError(null);
+			if (value) onCommit(null);
+			return null;
+		}
+		const date = parseDate(text, format.order);
+		if (!date) {
+			setError(labels.invalidDate ?? `Enter a date as ${hint}`);
+			return;
+		}
+		const reason = problem(date);
+		if (reason) {
+			setError(reason);
+			return;
+		}
+		setError(null);
+		setText(format.format(date));
+		if (date.toString() !== value?.toString()) onCommit(date);
+		return date;
+	};
+	return /* @__PURE__ */ jsx(TextField, {
+		...data,
+		...id !== void 0 && { id },
+		ref,
+		style,
+		inputRef,
+		variant: "outlined",
+		...density !== void 0 && { density },
+		label,
+		value: text,
+		onChange: (next) => {
+			setText(next);
+			if (error) setError(null);
+		},
+		onBlur: () => commit(),
+		onKeyDown: (event) => {
+			if (event.key !== "Enter") {
+				event.continuePropagation();
+				return;
+			}
+			const date = commit();
+			if (date !== void 0) onEnter?.(date);
+		},
+		placeholder: hint,
+		supportingText: supportingText ?? hint,
+		invalid: invalid || error !== null,
+		errorMessage: error ?? errorMessage,
+		inputMode: "decimal",
+		autoComplete: "off",
+		autoFocus,
+		required,
+		disabled,
+		readOnly,
+		name,
+		trailingIcon,
+		className,
+		classNames
+	});
+}
+//#endregion
+export { DateInput };
+
+//# sourceMappingURL=DateInput.js.map

package/dist/components/date-picker/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-picker/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport { toCalendarDate, type CalendarDate, type DateValue } from '@internationalized/date';\nimport { useState, type CSSProperties, type ReactNode, type Ref } from 'react';\nimport { useLocale } from 'react-aria';\nimport type { Density } from '../../tokens/density';\nimport { TextField, type TextFieldClassNames } from '../text-field/TextField';\nimport { dateFormat, parseDate } from './date-format';\n\n/** Words of a typed date field, for localisation. */\nexport interface DateInputLabels {\n  /**\n   * The format hint shown below the field and as its placeholder.\n   * @default the locale's format, such as \"MM/DD/YYYY\" in en-US\n   */\n  dateFormatHint: string;\n  /** Error when the text isn't a date. @default \"Enter a date as {hint}\" */\n  invalidDate: string;\n  /** Error for a date before `min` or after `max`. @default \"Date out of range\" */\n  dateOutOfRange: string;\n  /** Error for a date `isDateUnavailable` turns away. @default \"Date not available\" */\n  dateUnavailable: string;\n}\n\nexport interface DateInputProps {\n  label: ReactNode;\n  value: CalendarDate | null;\n  /** A date was typed and committed (Enter or leaving the field); `null` when cleared. */\n  onCommit: (value: CalendarDate | null) => void;\n  /** Enter was pressed and the text is a valid date (or empty). */\n  onEnter?: (value: CalendarDate | null) => void;\n  min?: DateValue | undefined;\n  max?: DateValue | undefined;\n  isDateUnavailable?: ((date: DateValue) => boolean) | undefined;\n  labels?: Partial<DateInputLabels> | undefined;\n  /** Replaces the format hint below the field. */\n  supportingText?: ReactNode;\n  trailingIcon?: ReactNode;\n  required?: boolean | undefined;\n  disabled?: boolean | undefined;\n  readOnly?: boolean | undefined;\n  name?: string | undefined;\n  id?: string | undefined;\n  autoFocus?: boolean | undefined;\n  invalid?: boolean | undefined;\n  errorMessage?: ReactNode;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n  /** `data-*` attributes for the root. */\n  data?: Record<string, unknown> | undefined;\n  classNames?: TextFieldClassNames | undefined;\n  /** The field's own density; left out, it inherits the theme's. */\n  density?: Density | undefined;\n  ref?: Ref<HTMLDivElement> | undefined;\n  inputRef?: Ref<HTMLInputElement> | undefined;\n}\n\n/**\n * A typed date, as the M3 date input asks: an outlined text field with no input mask that\n * reads dashes, spaces, slashes or dots between the parts and an optional leading zero,\n * reformats on Enter or blur, shows the locale's format below as its helper text, and\n * says in the supporting text why a date can't be used.\n */\nexport function DateInput({\n  label,\n  value,\n  onCommit,\n  onEnter,\n  min: minValue,\n  max: maxValue,\n  isDateUnavailable,\n  labels = {},\n  supportingText,\n  trailingIcon,\n  required,\n  disabled,\n  readOnly,\n  name,\n  id,\n  autoFocus,\n  invalid,\n  errorMessage,\n  className,\n  style,\n  data,\n  classNames,\n  density,\n  ref,\n  inputRef,\n}: DateInputProps) {\n  const { locale } = useLocale();\n  const format = dateFormat(locale);\n  const hint = labels.dateFormatHint ?? format.hint;\n  const show = (date: CalendarDate | null) => (date ? format.format(date) : '');\n  const [text, setText] = useState(() => show(value));\n  const [error, setError] = useState<string | null>(null);\n  // A new value from outside (the calendar, a reset) replaces what is typed.\n  const [shown, setShown] = useState(value?.toString());\n  if (value?.toString() !== shown) {\n    setShown(value?.toString());\n    setText(show(value));\n    setError(null);\n  }\n\n  const problem = (date: CalendarDate) => {\n    const min = minValue && toCalendarDate(minValue);\n    const max = maxValue && toCalendarDate(maxValue);\n    if ((min && date.compare(min) < 0) || (max && date.compare(max) > 0)) {\n      return labels.dateOutOfRange ?? 'Date out of range';\n    }\n    if (isDateUnavailable?.(date)) return labels.dateUnavailable ?? 'Date not available';\n    return null;\n  };\n\n  /** Reads the text; returns the date (or `null` when empty), or `undefined` when unusable. */\n  const commit = (): CalendarDate | null | undefined => {\n    if (text.trim() === '') {\n      setError(null);\n      if (value) onCommit(null);\n      return null;\n    }\n    const date = parseDate(text, format.order);\n    if (!date) {\n      setError(labels.invalidDate ?? `Enter a date as ${hint}`);\n      return undefined;\n    }\n    const reason = problem(date);\n    if (reason) {\n      setError(reason);\n      return undefined;\n    }\n    setError(null);\n    setText(format.format(date));\n    if (date.toString() !== value?.toString()) onCommit(date);\n    return date;\n  };\n\n  return (\n    <TextField\n      {...data}\n      {...(id !== undefined && { id })}\n      ref={ref}\n      style={style}\n      inputRef={inputRef as Ref<HTMLInputElement | HTMLTextAreaElement>}\n      variant=\"outlined\"\n      {...(density !== undefined && { density })}\n      label={label}\n      value={text}\n      onChange={(next) => {\n        setText(next);\n        if (error) setError(null);\n      }}\n      onBlur={() => commit()}\n      onKeyDown={(event) => {\n        if (event.key !== 'Enter') {\n          event.continuePropagation();\n          return;\n        }\n        const date = commit();\n        if (date !== undefined) onEnter?.(date);\n      }}\n      placeholder={hint}\n      supportingText={supportingText ?? hint}\n      invalid={invalid || error !== null}\n      errorMessage={error ?? errorMessage}\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      autoFocus={autoFocus}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      name={name}\n      trailingIcon={trailingIcon}\n      className={className}\n      classNames={classNames}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+DA,SAAgB,UAAU,EACxB,OACA,OACA,UACA,SACA,KAAK,UACL,KAAK,UACL,mBACA,SAAS,CAAC,GACV,gBACA,cACA,UACA,UACA,UACA,MACA,IACA,WACA,SACA,cACA,WACA,OACA,MACA,YACA,SACA,KACA,YACiB;CACjB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,SAAS,WAAW,MAAM;CAChC,MAAM,OAAO,OAAO,kBAAkB,OAAO;CAC7C,MAAM,QAAQ,SAA+B,OAAO,OAAO,OAAO,IAAI,IAAI;CAC1E,MAAM,CAAC,MAAM,WAAW,eAAe,KAAK,KAAK,CAAC;CAClD,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CAEtD,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO,SAAS,CAAC;CACpD,IAAI,OAAO,SAAS,MAAM,OAAO;EAC/B,SAAS,OAAO,SAAS,CAAC;EAC1B,QAAQ,KAAK,KAAK,CAAC;EACnB,SAAS,IAAI;CACf;CAEA,MAAM,WAAW,SAAuB;EACtC,MAAM,MAAM,YAAY,eAAe,QAAQ;EAC/C,MAAM,MAAM,YAAY,eAAe,QAAQ;EAC/C,IAAK,OAAO,KAAK,QAAQ,GAAG,IAAI,KAAO,OAAO,KAAK,QAAQ,GAAG,IAAI,GAChE,OAAO,OAAO,kBAAkB;EAElC,IAAI,oBAAoB,IAAI,GAAG,OAAO,OAAO,mBAAmB;EAChE,OAAO;CACT;;CAGA,MAAM,eAAgD;EACpD,IAAI,KAAK,KAAK,MAAM,IAAI;GACtB,SAAS,IAAI;GACb,IAAI,OAAO,SAAS,IAAI;GACxB,OAAO;EACT;EACA,MAAM,OAAO,UAAU,MAAM,OAAO,KAAK;EACzC,IAAI,CAAC,MAAM;GACT,SAAS,OAAO,eAAe,mBAAmB,MAAM;GACxD;EACF;EACA,MAAM,SAAS,QAAQ,IAAI;EAC3B,IAAI,QAAQ;GACV,SAAS,MAAM;GACf;EACF;EACA,SAAS,IAAI;EACb,QAAQ,OAAO,OAAO,IAAI,CAAC;EAC3B,IAAI,KAAK,SAAS,MAAM,OAAO,SAAS,GAAG,SAAS,IAAI;EACxD,OAAO;CACT;CAEA,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,GAAK,OAAO,KAAA,KAAa,EAAE,GAAG;EACzB;EACE;EACG;EACV,SAAQ;EACR,GAAK,YAAY,KAAA,KAAa,EAAE,QAAQ;EACjC;EACP,OAAO;EACP,WAAW,SAAS;GAClB,QAAQ,IAAI;GACZ,IAAI,OAAO,SAAS,IAAI;EAC1B;EACA,cAAc,OAAO;EACrB,YAAY,UAAU;GACpB,IAAI,MAAM,QAAQ,SAAS;IACzB,MAAM,oBAAoB;IAC1B;GACF;GACA,MAAM,OAAO,OAAO;GACpB,IAAI,SAAS,KAAA,GAAW,UAAU,IAAI;EACxC;EACA,aAAa;EACb,gBAAgB,kBAAkB;EAClC,SAAS,WAAW,UAAU;EAC9B,cAAc,SAAS;EACvB,WAAU;EACV,cAAa;EACF;EACD;EACA;EACA;EACJ;EACQ;EACH;EACC;CACb,CAAA;AAEL"}