@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/date-picker/index.js

@@ -0,0 +1,2408 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, d as query, f as queryAll, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { c as getNativeEvent, l as isComposingEvent, r as getEventKey } from "../../event-bTItRgiw.js";
+import { o as setElementValue } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { n as restoreTextSelection, t as disableTextSelection } from "../../text-selection-DXvWvm6k.js";
+import { r as chunk } from "../../array-C4KbHsha.js";
+import { E as isValueWithinRange, H as match, l as clampValue, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { n as createGuards, p as memo, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { B as isDateUnavailable, C as getDaysInWeek, E as getMonthNames, F as getMonthFormatter, H as isPreviousRangeInvalid, I as getEndDate, L as getUnitDuration, M as formatSelectedDate, O as getWeekDays, P as getDayFormatter, R as isDateEqual, T as getMonthDays, U as alignDate, V as isNextRangeInvalid, X as constrainValue, a as isValidCharacter, b as getDefaultYearRange, f as getPreviousSection, g as getTodayDate, i as getLocaleSeparator, k as getWeekOfYear, l as getNextSection, n as parseDateString, o as getAdjustedDateFn, r as ensureValidCharacters, s as getNextPage, t as getDateRangePreset, u as getPreviousPage, x as getYearsRange, y as getDecadeRange, z as isDateOutsideRange } from "../../date-utils-D5zXW-Cs.js";
+import { n as trackDismissableElement } from "../../dismissable-KM1jPtNQ.js";
+import { t as createLiveRegion } from "../../live-region-F8YMmbrY.js";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+import { CalendarDate, DateFormatter, isEqualDay, isEqualMonth, isEqualYear, isSameDay, isToday, isWeekend, parseDate, toCalendar, toCalendarDateTime, toZoned } from "@internationalized/date";
+//#region src/machines/date-picker/anatomy.ts
+const anatomy = createAnatomy("date-picker").parts("clearTrigger", "content", "control", "input", "label", "monthSelect", "nextTrigger", "positioner", "presetTrigger", "prevTrigger", "rangeText", "root", "table", "tableBody", "tableCell", "tableCellTrigger", "tableHead", "tableHeader", "tableRow", "trigger", "view", "viewControl", "viewTrigger", "yearSelect");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/date-picker/dom.ts
+const getLabelId = (ctx, index) => ctx.ids?.label?.(index) ?? `date-picker:${ctx.id}:label:${index}`;
+const getRootId = (ctx) => ctx.ids?.root ?? `date-picker:${ctx.id}`;
+const getTableId = (ctx, id) => ctx.ids?.table?.(id) ?? `date-picker:${ctx.id}:table:${id}`;
+const getContentId = (ctx) => ctx.ids?.content ?? `date-picker:${ctx.id}:content`;
+const getCellTriggerId = (ctx, id) => ctx.ids?.cellTrigger?.(id) ?? `date-picker:${ctx.id}:cell-trigger:${id}`;
+const getPrevTriggerId = (ctx, view) => ctx.ids?.prevTrigger?.(view) ?? `date-picker:${ctx.id}:prev:${view}`;
+const getNextTriggerId = (ctx, view) => ctx.ids?.nextTrigger?.(view) ?? `date-picker:${ctx.id}:next:${view}`;
+const getViewTriggerId = (ctx, view) => ctx.ids?.viewTrigger?.(view) ?? `date-picker:${ctx.id}:view:${view}`;
+const getClearTriggerId = (ctx) => ctx.ids?.clearTrigger ?? `date-picker:${ctx.id}:clear`;
+const getControlId = (ctx) => ctx.ids?.control ?? `date-picker:${ctx.id}:control`;
+const getInputId = (ctx, index) => ctx.ids?.input?.(index) ?? `date-picker:${ctx.id}:input:${index}`;
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `date-picker:${ctx.id}:trigger`;
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `date-picker:${ctx.id}:positioner`;
+const getMonthSelectId = (ctx) => ctx.ids?.monthSelect ?? `date-picker:${ctx.id}:month-select`;
+const getYearSelectId = (ctx) => ctx.ids?.yearSelect ?? `date-picker:${ctx.id}:year-select`;
+const getFocusedCell = (ctx, view) => query(getContentEl(ctx), `[data-part=table-cell-trigger][data-view=${view}][data-focus]:not([data-outside-range])`);
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getInputEls = (ctx) => queryAll(getControlEl(ctx), `[data-part=input]`);
+const getYearSelectEl = (ctx) => ctx.getById(getYearSelectId(ctx));
+const getMonthSelectEl = (ctx) => ctx.getById(getMonthSelectId(ctx));
+const getClearTriggerEl = (ctx) => ctx.getById(getClearTriggerId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+//#endregion
+//#region src/machines/date-picker/utils.ts
+function adjustStartAndEndDate(value) {
+	const [startDate, endDate] = value;
+	let result;
+	if (!startDate || !endDate) result = value;
+	else result = startDate.compare(endDate) <= 0 ? value : [endDate, startDate];
+	return result;
+}
+function isDateWithinRange(date, value) {
+	const [startDate, endDate] = value;
+	if (!startDate || !endDate) return false;
+	return startDate.compare(date) <= 0 && endDate.compare(date) >= 0;
+}
+function sortDates(values) {
+	return values.slice().filter((date) => date != null).sort((a, b) => a.compare(b));
+}
+function getRoleDescription(view) {
+	return match(view, {
+		year: "calendar decade",
+		month: "calendar year",
+		day: "calendar month"
+	});
+}
+const PLACEHOLDERS = {
+	day: "dd",
+	month: "mm",
+	year: "yyyy"
+};
+function getInputPlaceholder(locale) {
+	return new DateFormatter(locale).formatToParts(/* @__PURE__ */ new Date()).map((item) => PLACEHOLDERS[item.type] ?? item.value).join("");
+}
+const isValidDate = (value) => {
+	return !Number.isNaN(value.day) && !Number.isNaN(value.month) && !Number.isNaN(value.year);
+};
+const defaultTranslations = {
+	dayCell(state) {
+		if (state.unavailable) return `Not available. ${state.valueText}`;
+		if (state.firstInRange) return `Starting range from ${state.valueText}`;
+		if (state.lastInRange) return `Range ending at ${state.valueText}`;
+		if (state.selected) return `Selected date. ${state.valueText}`;
+		return `Choose ${state.valueText}`;
+	},
+	trigger(open) {
+		return open ? "Close calendar" : "Open calendar";
+	},
+	viewTrigger(view) {
+		return match(view, {
+			year: "Switch to month view",
+			month: "Switch to day view",
+			day: "Switch to year view"
+		});
+	},
+	presetTrigger(value) {
+		const [start = "", end = ""] = value;
+		return `select ${start} to ${end}`;
+	},
+	prevTrigger(view) {
+		return match(view, {
+			year: "Switch to previous decade",
+			month: "Switch to previous year",
+			day: "Switch to previous month"
+		});
+	},
+	nextTrigger(view) {
+		return match(view, {
+			year: "Switch to next decade",
+			month: "Switch to next year",
+			day: "Switch to next month"
+		});
+	},
+	placeholder() {
+		return {
+			day: "dd",
+			month: "mm",
+			year: "yyyy"
+		};
+	},
+	content: "calendar",
+	monthSelect: "Select month",
+	yearSelect: "Select year",
+	clearTrigger: "Clear selected dates",
+	weekColumnHeader: "Wk",
+	weekNumberCell(weekNumber) {
+		return `Week ${weekNumber}`;
+	}
+};
+function viewToNumber(view, fallback) {
+	if (!view) return fallback || 0;
+	return view === "day" ? 0 : view === "month" ? 1 : 2;
+}
+function viewNumberToView(viewNumber) {
+	return viewNumber === 0 ? "day" : viewNumber === 1 ? "month" : "year";
+}
+function clampView(view, minView, maxView) {
+	return viewNumberToView(clampValue(viewToNumber(view, 0), viewToNumber(minView, 0), viewToNumber(maxView, 2)));
+}
+function isAboveMinView(view, minView) {
+	return viewToNumber(view, 0) > viewToNumber(minView, 0);
+}
+function isBelowMinView(view, minView) {
+	return viewToNumber(view, 0) < viewToNumber(minView, 0);
+}
+function getNextView(view, minView, maxView) {
+	return clampView(viewNumberToView(viewToNumber(view, 0) + 1), minView, maxView);
+}
+function getPreviousView(view, minView, maxView) {
+	return clampView(viewNumberToView(viewToNumber(view, 0) - 1), minView, maxView);
+}
+const views = [
+	"day",
+	"month",
+	"year"
+];
+function eachView(cb) {
+	views.forEach((view) => cb(view));
+}
+const getVisibleRangeText = memo((opts) => [
+	opts.view,
+	opts.startValue.toString(),
+	opts.endValue.toString(),
+	opts.locale,
+	opts.timeZone,
+	opts.selectionMode
+], ([view], opts) => {
+	const { startValue, endValue, locale, timeZone, selectionMode } = opts;
+	if (view === "year") {
+		const years = getDecadeRange(startValue.year, { strict: true });
+		const start = years.at(0).toString();
+		const end = years.at(-1).toString();
+		return {
+			start,
+			end,
+			formatted: `${start} - ${end}`
+		};
+	}
+	if (view === "month") {
+		const formatter = new DateFormatter(locale, {
+			year: "numeric",
+			timeZone,
+			calendar: startValue.calendar.identifier
+		});
+		const start = formatter.format(startValue.toDate(timeZone));
+		const end = formatter.format(endValue.toDate(timeZone));
+		return {
+			start,
+			end,
+			formatted: selectionMode === "range" ? `${start} - ${end}` : start
+		};
+	}
+	const formatter = new DateFormatter(locale, {
+		month: "long",
+		year: "numeric",
+		timeZone,
+		calendar: startValue.calendar.identifier
+	});
+	const start = formatter.format(startValue.toDate(timeZone));
+	const end = formatter.format(endValue.toDate(timeZone));
+	return {
+		start,
+		end,
+		formatted: selectionMode === "range" ? `${start} - ${end}` : start
+	};
+});
+//#endregion
+//#region src/machines/date-picker/connect.ts
+function connect(service, normalize) {
+	const { state, context, prop, send, computed, scope } = service;
+	const startValue = context.get("startValue");
+	const endValue = computed("endValue");
+	const selectedValue = context.get("value");
+	const focusedValue = context.get("focusedValue");
+	const hoveredValue = context.get("hoveredValue");
+	const hoveredRangeValue = hoveredValue ? adjustStartAndEndDate([selectedValue[0], hoveredValue]) : [];
+	const disabled = Boolean(prop("disabled"));
+	const readOnly = Boolean(prop("readOnly"));
+	const invalid = Boolean(prop("invalid"));
+	const interactive = computed("isInteractive");
+	const empty = selectedValue.length === 0;
+	const min = prop("min");
+	const max = prop("max");
+	const locale = prop("locale");
+	const timeZone = prop("timeZone");
+	const startOfWeek = prop("startOfWeek");
+	const focused = state.matches("focused");
+	const open = state.matches("open");
+	const isRangePicker = prop("selectionMode") === "range";
+	const isMultiPicker = prop("selectionMode") === "multiple";
+	const isDateUnavailableFn = prop("isDateUnavailable");
+	const maxSelectedDates = prop("maxSelectedDates");
+	const isMaxSelected = isMultiPicker && maxSelectedDates != null && selectedValue.length >= maxSelectedDates;
+	const currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	const separator = getLocaleSeparator(locale);
+	const translations = {
+		...defaultTranslations,
+		...prop("translations")
+	};
+	function getMonthWeeks(from = startValue) {
+		const numOfWeeks = prop("fixedWeeks") ? 6 : void 0;
+		return getMonthDays(from, locale, numOfWeeks, startOfWeek);
+	}
+	function getMonths(props = {}) {
+		const { format } = props;
+		return getMonthNames(locale, format, focusedValue).map((label, index) => {
+			const value = index + 1;
+			return {
+				label,
+				value,
+				disabled: isDateOutsideRange(focusedValue.set({ month: value }), min, max)
+			};
+		});
+	}
+	function getYears() {
+		return getYearsRange(getDefaultYearRange(focusedValue, min, max)).map((year) => ({
+			label: year.toString(),
+			value: year,
+			disabled: !isValueWithinRange(year, min?.year, max?.year)
+		}));
+	}
+	function isUnavailable(date) {
+		return isDateUnavailable(date, isDateUnavailableFn, locale, min, max);
+	}
+	function focusMonth(month) {
+		const date = startValue ?? getTodayDate(timeZone, focusedValue.calendar);
+		send({
+			type: "FOCUS.SET",
+			value: date.set({ month })
+		});
+	}
+	function focusYear(year) {
+		const date = startValue ?? getTodayDate(timeZone, focusedValue.calendar);
+		send({
+			type: "FOCUS.SET",
+			value: date.set({ year })
+		});
+	}
+	function getYearTableCellState(props) {
+		const { value, disabled } = props;
+		const dateValue = focusedValue.set({ year: value });
+		const isOutsideVisibleRange = !getDecadeRange(startValue.year, { strict: true }).includes(value);
+		const isWithinMinMax = isValueWithinRange(value, min?.year, max?.year);
+		const isInSelectedRange = isRangePicker && isDateWithinRange(dateValue, selectedValue);
+		const isFirstInSelectedRange = isRangePicker && selectedValue[0] && isEqualYear(dateValue, selectedValue[0]);
+		const isLastInSelectedRange = isRangePicker && selectedValue[1] && isEqualYear(dateValue, selectedValue[1]);
+		const hasHoveredRange = isRangePicker && hoveredRangeValue.length > 0;
+		const isInHoveredRange = hasHoveredRange && isDateWithinRange(dateValue, hoveredRangeValue);
+		const isFirstInHoveredRange = hasHoveredRange && hoveredRangeValue[0] && isEqualYear(dateValue, hoveredRangeValue[0]);
+		const isLastInHoveredRange = hasHoveredRange && hoveredRangeValue[1] && isEqualYear(dateValue, hoveredRangeValue[1]);
+		const cellState = {
+			focused: focusedValue.year === props.value,
+			selectable: !isOutsideVisibleRange && isWithinMinMax,
+			outsideRange: isOutsideVisibleRange,
+			selected: !!selectedValue.find((date) => date && date.year === value),
+			valueText: value.toString(),
+			inRange: isInSelectedRange || isInHoveredRange,
+			firstInRange: !!isFirstInSelectedRange,
+			lastInRange: !!isLastInSelectedRange,
+			inHoveredRange: !!isInHoveredRange,
+			firstInHoveredRange: !!isFirstInHoveredRange,
+			lastInHoveredRange: !!isLastInHoveredRange,
+			value: dateValue,
+			get disabled() {
+				return disabled || !cellState.selectable;
+			}
+		};
+		return cellState;
+	}
+	function getMonthTableCellState(props) {
+		const { value, disabled } = props;
+		const dateValue = focusedValue.set({ month: value });
+		const formatter = getMonthFormatter(locale, timeZone, focusedValue);
+		const isInSelectedRange = isRangePicker && isDateWithinRange(dateValue, selectedValue);
+		const isFirstInSelectedRange = isRangePicker && selectedValue[0] && isEqualMonth(dateValue, selectedValue[0]);
+		const isLastInSelectedRange = isRangePicker && selectedValue[1] && isEqualMonth(dateValue, selectedValue[1]);
+		const hasHoveredRange = isRangePicker && hoveredRangeValue.length > 0;
+		const isInHoveredRange = hasHoveredRange && isDateWithinRange(dateValue, hoveredRangeValue);
+		const isFirstInHoveredRange = hasHoveredRange && hoveredRangeValue[0] && isEqualMonth(dateValue, hoveredRangeValue[0]);
+		const isLastInHoveredRange = hasHoveredRange && hoveredRangeValue[1] && isEqualMonth(dateValue, hoveredRangeValue[1]);
+		const cellState = {
+			focused: focusedValue.month === props.value,
+			selectable: !isDateOutsideRange(dateValue, min, max),
+			selected: !!selectedValue.find((date) => date && date.month === value && date.year === focusedValue.year),
+			valueText: formatter.format(dateValue.toDate(timeZone)),
+			inRange: isInSelectedRange || isInHoveredRange,
+			firstInRange: !!isFirstInSelectedRange,
+			lastInRange: !!isLastInSelectedRange,
+			inHoveredRange: !!isInHoveredRange,
+			firstInHoveredRange: !!isFirstInHoveredRange,
+			lastInHoveredRange: !!isLastInHoveredRange,
+			outsideRange: false,
+			value: dateValue,
+			get disabled() {
+				return disabled || !cellState.selectable;
+			}
+		};
+		return cellState;
+	}
+	function getDayTableCellState(props) {
+		const { value, disabled, visibleRange = computed("visibleRange") } = props;
+		const formatter = getDayFormatter(locale, timeZone, focusedValue);
+		const unitDuration = getUnitDuration(computed("visibleDuration"));
+		const outsideDaySelectable = prop("outsideDaySelectable");
+		const end = visibleRange.start.add(unitDuration).subtract({ days: 1 });
+		const isOutsideRange = isDateOutsideRange(value, visibleRange.start, end);
+		const isInSelectedRange = isRangePicker && isDateWithinRange(value, selectedValue);
+		const isFirstInSelectedRange = isRangePicker && selectedValue[0] && isSameDay(value, selectedValue[0]);
+		const isLastInSelectedRange = isRangePicker && selectedValue[1] && isSameDay(value, selectedValue[1]);
+		const hasHoveredRange = isRangePicker && hoveredRangeValue.length > 0;
+		const isInHoveredRange = hasHoveredRange && isDateWithinRange(value, hoveredRangeValue);
+		const isFirstInHoveredRange = hasHoveredRange && hoveredRangeValue[0] && isSameDay(value, hoveredRangeValue[0]);
+		const isLastInHoveredRange = hasHoveredRange && hoveredRangeValue[1] && isSameDay(value, hoveredRangeValue[1]);
+		const isSelected = selectedValue.some((date) => date != null && isSameDay(value, date));
+		const cellState = {
+			invalid: isDateOutsideRange(value, min, max),
+			disabled: disabled || !outsideDaySelectable && isOutsideRange || isDateOutsideRange(value, min, max) || isMaxSelected && !isSelected,
+			selected: isSelected,
+			unavailable: isDateUnavailable(value, isDateUnavailableFn, locale, min, max) && !disabled,
+			outsideRange: isOutsideRange,
+			today: isToday(value, timeZone),
+			weekend: isWeekend(value, locale),
+			value,
+			valueText: formatter.format(value.toDate(timeZone)),
+			get focused() {
+				return focusedValue != null && isSameDay(value, focusedValue) && (!cellState.outsideRange || outsideDaySelectable);
+			},
+			get selectable() {
+				return !cellState.disabled && !cellState.unavailable;
+			},
+			inRange: isInSelectedRange || isInHoveredRange,
+			firstInRange: isFirstInSelectedRange,
+			lastInRange: isLastInSelectedRange,
+			inHoveredRange: isInHoveredRange,
+			firstInHoveredRange: isFirstInHoveredRange,
+			lastInHoveredRange: isLastInHoveredRange
+		};
+		return cellState;
+	}
+	function getTableId$1(props) {
+		const { view = "day", id } = props;
+		return [view, id].filter(Boolean).join(" ");
+	}
+	return {
+		focused,
+		open,
+		disabled,
+		invalid,
+		readOnly,
+		inline: !!prop("inline"),
+		numOfMonths: prop("numOfMonths"),
+		showWeekNumbers: !!prop("showWeekNumbers"),
+		selectionMode: prop("selectionMode"),
+		maxSelectedDates,
+		isMaxSelected,
+		view: context.get("view"),
+		getRangePresetValue(preset) {
+			return getDateRangePreset(preset, locale, timeZone);
+		},
+		getWeekNumber(week) {
+			const firstDay = week[0];
+			return firstDay ? getWeekOfYear(firstDay, locale) : 0;
+		},
+		getDaysInWeek(week, from = startValue) {
+			return getDaysInWeek(week, from, locale, startOfWeek);
+		},
+		getOffset(duration) {
+			const from = startValue.add(duration);
+			const end = endValue.add(duration);
+			const formatter = getMonthFormatter(locale, timeZone, focusedValue);
+			return {
+				visibleRange: {
+					start: from,
+					end
+				},
+				weeks: getMonthWeeks(from),
+				visibleRangeText: {
+					start: formatter.format(from.toDate(timeZone)),
+					end: formatter.format(end.toDate(timeZone))
+				}
+			};
+		},
+		getMonthWeeks,
+		isUnavailable,
+		weeks: getMonthWeeks(),
+		weekDays: getWeekDays(startValue, startOfWeek, timeZone, locale),
+		visibleRangeText: computed("visibleRangeText"),
+		value: selectedValue,
+		valueAsDate: selectedValue.filter((date) => date != null).map((date) => date.toDate(timeZone)),
+		valueAsString: computed("valueAsString"),
+		focusedValue,
+		focusedValueAsDate: focusedValue?.toDate(timeZone),
+		focusedValueAsString: prop("format")(focusedValue, {
+			locale,
+			timeZone
+		}),
+		visibleRange: computed("visibleRange"),
+		selectToday() {
+			const value = constrainValue(getTodayDate(timeZone, focusedValue.calendar), min, max);
+			send({
+				type: "VALUE.SET",
+				value: [value]
+			});
+		},
+		setValue(values) {
+			const computedValue = values.map((date) => constrainValue(date, min, max));
+			send({
+				type: "VALUE.SET",
+				value: computedValue
+			});
+		},
+		setTime(time, index = 0) {
+			const values = Array.from(selectedValue);
+			let dateValue = values[index];
+			if (!dateValue) return;
+			if (!("hour" in dateValue)) dateValue = toCalendarDateTime(dateValue);
+			dateValue = dateValue.set({
+				hour: time.hour ?? ("hour" in dateValue ? dateValue.hour : 0),
+				minute: time.minute ?? ("minute" in dateValue ? dateValue.minute : 0),
+				second: time.second ?? ("second" in dateValue ? dateValue.second : 0),
+				millisecond: time.millisecond ?? ("millisecond" in dateValue ? dateValue.millisecond : 0)
+			});
+			values[index] = constrainValue(dateValue, min, max);
+			send({
+				type: "VALUE.SET",
+				value: values
+			});
+		},
+		clearValue(options = {}) {
+			const { focus = true } = options;
+			send({
+				type: "VALUE.CLEAR",
+				focus
+			});
+		},
+		setFocusedValue(value) {
+			send({
+				type: "FOCUS.SET",
+				value
+			});
+		},
+		setOpen(nextOpen) {
+			if (prop("inline")) return;
+			if (state.matches("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		focusMonth,
+		focusYear,
+		getYears,
+		getMonths,
+		getYearsGrid(props = {}) {
+			const { columns = 1 } = props;
+			return chunk(getDecadeRange(startValue.year, { strict: true }).map((year) => ({
+				label: year.toString(),
+				value: year,
+				disabled: !isValueWithinRange(year, min?.year, max?.year)
+			})), columns);
+		},
+		getDecade() {
+			const years = getDecadeRange(startValue.year, { strict: true });
+			return {
+				start: years.at(0),
+				end: years.at(-1)
+			};
+		},
+		getMonthsGrid(props = {}) {
+			const { columns = 1, format } = props;
+			return chunk(getMonths({ format }), columns);
+		},
+		format(value, opts = {
+			month: "long",
+			year: "numeric"
+		}) {
+			return new DateFormatter(locale, {
+				...opts,
+				calendar: value.calendar.identifier
+			}).format(value.toDate(timeZone));
+		},
+		setView(view) {
+			send({
+				type: "VIEW.SET",
+				view
+			});
+		},
+		goToNext() {
+			send({
+				type: "GOTO.NEXT",
+				view: context.get("view")
+			});
+		},
+		goToPrev() {
+			send({
+				type: "GOTO.PREV",
+				view: context.get("view")
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-state": open ? "open" : "closed",
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-empty": dataAttr(empty)
+			});
+		},
+		getLabelProps(props = {}) {
+			const { index = 0 } = props;
+			return normalize.label({
+				...parts.label.attrs,
+				id: getLabelId(scope, index),
+				dir: prop("dir"),
+				htmlFor: getInputId(scope, index),
+				"data-state": open ? "open" : "closed",
+				"data-index": index,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-placeholder-shown": dataAttr(empty)
+			});
+		},
+		getRangeTextProps() {
+			return normalize.element({
+				...parts.rangeText.attrs,
+				dir: prop("dir")
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				hidden: !open,
+				dir: prop("dir"),
+				"data-state": open ? "open" : "closed",
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				"data-inline": dataAttr(prop("inline")),
+				id: getContentId(scope),
+				tabIndex: -1,
+				role: "application",
+				"aria-roledescription": "datepicker",
+				"aria-label": translations.content
+			});
+		},
+		getTableProps(props = {}) {
+			const { view = "day", columns = view === "day" ? 7 : 4 } = props;
+			const uid = getTableId$1(props);
+			return normalize.element({
+				...parts.table.attrs,
+				role: "grid",
+				"data-columns": columns,
+				"aria-roledescription": getRoleDescription(view),
+				id: getTableId(scope, uid),
+				"aria-readonly": ariaAttr(readOnly),
+				"aria-disabled": ariaAttr(disabled),
+				"aria-multiselectable": ariaAttr(prop("selectionMode") !== "single"),
+				"data-view": view,
+				dir: prop("dir"),
+				tabIndex: -1,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					const exec = {
+						Enter() {
+							if (!interactive) return;
+							if (view === "day" && isUnavailable(focusedValue)) return;
+							if (view === "month") {
+								if (!getMonthTableCellState({ value: focusedValue.month }).selectable) return;
+							}
+							if (view === "year") {
+								if (!getYearTableCellState({ value: focusedValue.year }).selectable) return;
+							}
+							send({
+								type: "TABLE.ENTER",
+								view,
+								columns,
+								focus: true
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "TABLE.ARROW_LEFT",
+								view,
+								columns,
+								focus: true
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "TABLE.ARROW_RIGHT",
+								view,
+								columns,
+								focus: true
+							});
+						},
+						ArrowUp() {
+							send({
+								type: "TABLE.ARROW_UP",
+								view,
+								columns,
+								focus: true
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "TABLE.ARROW_DOWN",
+								view,
+								columns,
+								focus: true
+							});
+						},
+						PageUp(event) {
+							send({
+								type: "TABLE.PAGE_UP",
+								larger: event.shiftKey,
+								view,
+								columns,
+								focus: true
+							});
+						},
+						PageDown(event) {
+							send({
+								type: "TABLE.PAGE_DOWN",
+								larger: event.shiftKey,
+								view,
+								columns,
+								focus: true
+							});
+						},
+						Home() {
+							send({
+								type: "TABLE.HOME",
+								view,
+								columns,
+								focus: true
+							});
+						},
+						End() {
+							send({
+								type: "TABLE.END",
+								view,
+								columns,
+								focus: true
+							});
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+						event.stopPropagation();
+					}
+				},
+				onPointerLeave() {
+					send({ type: "TABLE.POINTER_LEAVE" });
+				},
+				onPointerDown() {
+					send({
+						type: "TABLE.POINTER_DOWN",
+						view
+					});
+				},
+				onPointerUp() {
+					send({
+						type: "TABLE.POINTER_UP",
+						view
+					});
+				}
+			});
+		},
+		getTableHeadProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.tableHead.attrs,
+				"aria-hidden": true,
+				dir: prop("dir"),
+				"data-view": view,
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getTableHeaderProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.tableHeader.attrs,
+				dir: prop("dir"),
+				"data-view": view,
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getTableBodyProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.tableBody.attrs,
+				"data-view": view,
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getTableRowProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.tableRow.attrs,
+				"aria-disabled": ariaAttr(disabled),
+				"data-disabled": dataAttr(disabled),
+				"data-view": view
+			});
+		},
+		getWeekNumberHeaderCellProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.tableCell.attrs,
+				scope: "col",
+				"aria-label": translations.weekColumnHeader,
+				"data-view": view,
+				"data-type": "week-number",
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getWeekNumberCellProps(props) {
+			const { weekIndex, week } = props;
+			const weekNumber = week[0] ? getWeekOfYear(week[0], locale) : 0;
+			return normalize.element({
+				...parts.tableCell.attrs,
+				role: "rowheader",
+				"aria-label": translations.weekNumberCell?.(weekNumber),
+				"data-view": "day",
+				"data-week-index": weekIndex,
+				"data-type": "week-number",
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getDayTableCellState,
+		getDayTableCellProps(props) {
+			const { value } = props;
+			const cellState = getDayTableCellState(props);
+			return normalize.element({
+				...parts.tableCell.attrs,
+				role: "gridcell",
+				"aria-disabled": ariaAttr(!cellState.selectable),
+				"aria-selected": cellState.selected || cellState.inRange,
+				"aria-invalid": ariaAttr(cellState.invalid),
+				"aria-current": cellState.today ? "date" : void 0,
+				"data-value": value.toString()
+			});
+		},
+		getDayTableCellTriggerProps(props) {
+			const { value } = props;
+			const cellState = getDayTableCellState(props);
+			return normalize.element({
+				...parts.tableCellTrigger.attrs,
+				id: getCellTriggerId(scope, value.toString()),
+				role: "button",
+				dir: prop("dir"),
+				tabIndex: disabled ? -1 : cellState.focused ? 0 : -1,
+				"aria-label": translations.dayCell(cellState),
+				"aria-disabled": ariaAttr(!cellState.selectable),
+				"aria-invalid": ariaAttr(cellState.invalid),
+				"data-disabled": dataAttr(!cellState.selectable),
+				"data-selectable": dataAttr(cellState.selectable),
+				"data-selected": dataAttr(cellState.selected),
+				"data-value": value.toString(),
+				"data-view": "day",
+				"data-today": dataAttr(cellState.today),
+				"data-focus": dataAttr(cellState.focused),
+				"data-unavailable": dataAttr(cellState.unavailable),
+				"data-range-start": dataAttr(cellState.firstInRange),
+				"data-range-end": dataAttr(cellState.lastInRange),
+				"data-in-range": dataAttr(cellState.inRange),
+				"data-outside-range": dataAttr(cellState.outsideRange),
+				"data-weekend": dataAttr(cellState.weekend),
+				"data-in-hover-range": dataAttr(cellState.inHoveredRange),
+				"data-hover-range-start": dataAttr(cellState.firstInHoveredRange),
+				"data-hover-range-end": dataAttr(cellState.lastInHoveredRange),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (!cellState.selectable) return;
+					send({
+						type: "CELL.CLICK",
+						cell: "day",
+						value
+					});
+				},
+				onPointerMove: isRangePicker ? (event) => {
+					if (event.pointerType === "touch") return;
+					if (!cellState.selectable) return;
+					const focus = !scope.isActiveElement(event.currentTarget);
+					if (hoveredValue && isEqualDay(value, hoveredValue)) return;
+					send({
+						type: "CELL.POINTER_MOVE",
+						cell: "day",
+						value,
+						focus,
+						outsideRange: cellState.outsideRange
+					});
+				} : void 0
+			});
+		},
+		getMonthTableCellState,
+		getMonthTableCellProps(props) {
+			const { value, columns } = props;
+			const cellState = getMonthTableCellState(props);
+			return normalize.element({
+				...parts.tableCell.attrs,
+				dir: prop("dir"),
+				colSpan: columns,
+				role: "gridcell",
+				"aria-selected": ariaAttr(cellState.selected || cellState.inRange),
+				"data-selected": dataAttr(cellState.selected),
+				"aria-disabled": ariaAttr(!cellState.selectable),
+				"data-value": value
+			});
+		},
+		getMonthTableCellTriggerProps(props) {
+			const { value } = props;
+			const cellState = getMonthTableCellState(props);
+			return normalize.element({
+				...parts.tableCellTrigger.attrs,
+				id: getCellTriggerId(scope, value.toString()),
+				role: "button",
+				dir: prop("dir"),
+				tabIndex: disabled ? -1 : cellState.focused ? 0 : -1,
+				"aria-label": cellState.valueText,
+				"aria-disabled": ariaAttr(!cellState.selectable),
+				"data-disabled": dataAttr(!cellState.selectable),
+				"data-selectable": dataAttr(cellState.selectable),
+				"data-selected": dataAttr(cellState.selected),
+				"data-value": value,
+				"data-view": "month",
+				"data-focus": dataAttr(cellState.focused),
+				"data-outside-range": dataAttr(cellState.outsideRange),
+				"data-range-start": dataAttr(cellState.firstInRange),
+				"data-range-end": dataAttr(cellState.lastInRange),
+				"data-in-range": dataAttr(cellState.inRange),
+				"data-in-hover-range": dataAttr(cellState.inHoveredRange),
+				"data-hover-range-start": dataAttr(cellState.firstInHoveredRange),
+				"data-hover-range-end": dataAttr(cellState.lastInHoveredRange),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (!cellState.selectable) return;
+					send({
+						type: "CELL.CLICK",
+						cell: "month",
+						value
+					});
+				},
+				onPointerMove: isRangePicker ? (event) => {
+					if (event.pointerType === "touch") return;
+					if (!cellState.selectable) return;
+					const focus = !scope.isActiveElement(event.currentTarget);
+					if (hoveredValue && cellState.value && isEqualMonth(cellState.value, hoveredValue)) return;
+					send({
+						type: "CELL.POINTER_MOVE",
+						cell: "month",
+						value: cellState.value,
+						focus
+					});
+				} : void 0
+			});
+		},
+		getYearTableCellState,
+		getYearTableCellProps(props) {
+			const { value, columns } = props;
+			const cellState = getYearTableCellState(props);
+			return normalize.element({
+				...parts.tableCell.attrs,
+				dir: prop("dir"),
+				colSpan: columns,
+				role: "gridcell",
+				"aria-selected": ariaAttr(cellState.selected || cellState.inRange),
+				"data-selected": dataAttr(cellState.selected),
+				"aria-disabled": ariaAttr(!cellState.selectable),
+				"data-value": value
+			});
+		},
+		getYearTableCellTriggerProps(props) {
+			const { value } = props;
+			const cellState = getYearTableCellState(props);
+			return normalize.element({
+				...parts.tableCellTrigger.attrs,
+				id: getCellTriggerId(scope, value.toString()),
+				role: "button",
+				dir: prop("dir"),
+				tabIndex: disabled ? -1 : cellState.focused ? 0 : -1,
+				"aria-label": cellState.valueText,
+				"aria-disabled": ariaAttr(!cellState.selectable),
+				"data-disabled": dataAttr(!cellState.selectable),
+				"data-selectable": dataAttr(cellState.selectable),
+				"data-selected": dataAttr(cellState.selected),
+				"data-value": value,
+				"data-view": "year",
+				"data-focus": dataAttr(cellState.focused),
+				"data-outside-range": dataAttr(cellState.outsideRange),
+				"data-range-start": dataAttr(cellState.firstInRange),
+				"data-range-end": dataAttr(cellState.lastInRange),
+				"data-in-range": dataAttr(cellState.inRange),
+				"data-in-hover-range": dataAttr(cellState.inHoveredRange),
+				"data-hover-range-start": dataAttr(cellState.firstInHoveredRange),
+				"data-hover-range-end": dataAttr(cellState.lastInHoveredRange),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (!cellState.selectable) return;
+					send({
+						type: "CELL.CLICK",
+						cell: "year",
+						value
+					});
+				},
+				onPointerMove: isRangePicker ? (event) => {
+					if (event.pointerType === "touch") return;
+					if (!cellState.selectable) return;
+					const focus = !scope.isActiveElement(event.currentTarget);
+					if (hoveredValue && cellState.value && isEqualYear(cellState.value, hoveredValue)) return;
+					send({
+						type: "CELL.POINTER_MOVE",
+						cell: "year",
+						value: cellState.value,
+						focus
+					});
+				} : void 0
+			});
+		},
+		getNextTriggerProps(props = {}) {
+			const { view = "day" } = props;
+			const isDisabled = disabled || !computed("isNextVisibleRangeValid");
+			return normalize.button({
+				...parts.nextTrigger.attrs,
+				dir: prop("dir"),
+				id: getNextTriggerId(scope, view),
+				type: "button",
+				"aria-label": translations.nextTrigger(view),
+				disabled: isDisabled,
+				"data-disabled": dataAttr(isDisabled),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: "GOTO.NEXT",
+						view
+					});
+				}
+			});
+		},
+		getPrevTriggerProps(props = {}) {
+			const { view = "day" } = props;
+			const isDisabled = disabled || !computed("isPrevVisibleRangeValid");
+			return normalize.button({
+				...parts.prevTrigger.attrs,
+				dir: prop("dir"),
+				id: getPrevTriggerId(scope, view),
+				type: "button",
+				"aria-label": translations.prevTrigger(view),
+				disabled: isDisabled,
+				"data-disabled": dataAttr(isDisabled),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: "GOTO.PREV",
+						view
+					});
+				}
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				id: getClearTriggerId(scope),
+				dir: prop("dir"),
+				type: "button",
+				"aria-label": translations.clearTrigger,
+				hidden: !selectedValue.length,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({ type: "VALUE.CLEAR" });
+				}
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				id: getTriggerId(scope),
+				dir: prop("dir"),
+				type: "button",
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				"aria-label": translations.trigger(open),
+				"aria-controls": getContentId(scope),
+				"aria-expanded": open,
+				"data-state": open ? "open" : "closed",
+				"data-placeholder-shown": dataAttr(empty),
+				"aria-haspopup": "grid",
+				disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({ type: "TRIGGER.CLICK" });
+				}
+			});
+		},
+		getViewProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.view.attrs,
+				"data-view": view,
+				hidden: context.get("view") !== view
+			});
+		},
+		getViewTriggerProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.button({
+				...parts.viewTrigger.attrs,
+				"data-view": view,
+				dir: prop("dir"),
+				id: getViewTriggerId(scope, view),
+				type: "button",
+				disabled,
+				"aria-label": translations.viewTrigger(view),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "VIEW.TOGGLE",
+						src: "viewTrigger"
+					});
+				}
+			});
+		},
+		getViewControlProps(props = {}) {
+			const { view = "day" } = props;
+			return normalize.element({
+				...parts.viewControl.attrs,
+				"data-view": view,
+				dir: prop("dir")
+			});
+		},
+		getInputProps(props = {}) {
+			const { index = 0, fixOnBlur = true } = props;
+			return normalize.input({
+				...parts.input.attrs,
+				id: getInputId(scope, index),
+				autoComplete: "off",
+				autoCorrect: "off",
+				spellCheck: "false",
+				dir: prop("dir"),
+				name: prop("name"),
+				"data-index": index,
+				"data-state": open ? "open" : "closed",
+				"data-placeholder-shown": dataAttr(empty),
+				readOnly,
+				disabled,
+				required: prop("required"),
+				"aria-invalid": ariaAttr(invalid),
+				"data-invalid": dataAttr(invalid),
+				placeholder: prop("placeholder") || getInputPlaceholder(locale),
+				defaultValue: computed("valueAsString")[index],
+				onBeforeInput(event) {
+					const { data } = getNativeEvent(event);
+					if (!isValidCharacter(data, separator, locale)) event.preventDefault();
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!prop("openOnClick")) return;
+					if (!interactive) return;
+					send({
+						type: "OPEN",
+						src: "input.click"
+					});
+				},
+				onFocus() {
+					send({
+						type: "INPUT.FOCUS",
+						index
+					});
+				},
+				onBlur(event) {
+					const value = event.currentTarget.value.trim();
+					send({
+						type: "INPUT.BLUR",
+						value,
+						index,
+						fixOnBlur
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const exec = { Enter(event) {
+						if (isComposingEvent(event)) return;
+						if (isUnavailable(focusedValue)) return;
+						if (event.currentTarget.value.trim() === "") return;
+						send({
+							type: "INPUT.ENTER",
+							value: event.currentTarget.value,
+							index
+						});
+					} }[event.key];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				},
+				onInput(event) {
+					const value = event.currentTarget.value;
+					send({
+						type: "INPUT.CHANGE",
+						value: ensureValidCharacters(value, separator, locale),
+						index
+					});
+				}
+			});
+		},
+		getMonthSelectProps() {
+			return normalize.select({
+				...parts.monthSelect.attrs,
+				id: getMonthSelectId(scope),
+				"aria-label": translations.monthSelect,
+				disabled,
+				dir: prop("dir"),
+				defaultValue: startValue.month,
+				onChange(event) {
+					focusMonth(Number(event.currentTarget.value));
+				}
+			});
+		},
+		getYearSelectProps() {
+			return normalize.select({
+				...parts.yearSelect.attrs,
+				id: getYearSelectId(scope),
+				disabled,
+				"aria-label": translations.yearSelect,
+				dir: prop("dir"),
+				defaultValue: startValue.year,
+				onChange(event) {
+					focusYear(Number(event.currentTarget.value));
+				}
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				id: getPositionerId(scope),
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				style: popperStyles.floating
+			});
+		},
+		getPresetTriggerProps(props) {
+			const value = Array.isArray(props.value) ? props.value : getDateRangePreset(props.value, locale, timeZone);
+			const valueAsString = value.filter((item) => item != null).map((item) => item.toDate(timeZone).toDateString());
+			return normalize.button({
+				...parts.presetTrigger.attrs,
+				"aria-label": translations.presetTrigger(valueAsString),
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "PRESET.CLICK",
+						value
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/date-picker/machine.ts
+const { and } = createGuards();
+function isDateArrayEqual(a, b) {
+	if (a?.length !== b?.length) return false;
+	const len = Math.max(a.length, b.length);
+	for (let i = 0; i < len; i++) if (!isDateEqual(a[i], b[i])) return false;
+	return true;
+}
+function getValueAsString(value, prop) {
+	return value.map((date) => {
+		if (date == null) return "";
+		return prop("format")(date, {
+			locale: prop("locale"),
+			timeZone: prop("timeZone")
+		});
+	});
+}
+const machine = createMachine({
+	props({ props }) {
+		const locale = props.locale || "en-US";
+		const timeZone = props.timeZone || "UTC";
+		const selectionMode = props.selectionMode || "single";
+		const numOfMonths = props.numOfMonths || 1;
+		let calendar;
+		if (props.createCalendar) {
+			const calendarId = new Intl.DateTimeFormat(locale).resolvedOptions().calendar;
+			if (calendarId !== "gregory" && calendarId !== "iso8601") calendar = props.createCalendar(calendarId);
+		}
+		const toTargetCalendar = (date) => {
+			if (!calendar) return date;
+			if (date.calendar.identifier === calendar.identifier) return date;
+			return toCalendar(date, calendar);
+		};
+		const defaultValue = props.defaultValue ? sortDates(props.defaultValue).map((date) => constrainValue(toTargetCalendar(date), props.min, props.max)) : void 0;
+		const value = props.value ? sortDates(props.value).map((date) => constrainValue(toTargetCalendar(date), props.min, props.max)) : void 0;
+		let focusedValue = props.focusedValue || props.defaultFocusedValue || value?.[0] || defaultValue?.[0] || getTodayDate(timeZone, calendar);
+		focusedValue = constrainValue(toTargetCalendar(focusedValue), props.min, props.max);
+		const minView = props.minView || "day";
+		const maxView = props.maxView || "year";
+		const defaultView = clampView(props.defaultView || props.view || minView, minView, maxView);
+		return {
+			locale,
+			numOfMonths,
+			timeZone,
+			selectionMode,
+			minView,
+			maxView,
+			outsideDaySelectable: false,
+			closeOnSelect: true,
+			format(date, { locale, timeZone }) {
+				return new DateFormatter(locale, {
+					timeZone,
+					day: "2-digit",
+					month: "2-digit",
+					year: "numeric",
+					calendar: calendar?.identifier
+				}).format(date.toDate(timeZone));
+			},
+			parse(value, { locale, timeZone }) {
+				return parseDateString(value, locale, timeZone);
+			},
+			...props,
+			focusedValue: typeof props.focusedValue === "undefined" ? void 0 : focusedValue,
+			defaultFocusedValue: focusedValue,
+			value,
+			defaultValue: defaultValue ?? [],
+			defaultView,
+			positioning: {
+				placement: "bottom",
+				...props.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("inline") || (prop("open") ?? prop("defaultOpen")) ? "open" : "idle";
+	},
+	refs() {
+		return { announcer: void 0 };
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			focusedValue: bindable(() => ({
+				defaultValue: prop("defaultFocusedValue"),
+				value: prop("focusedValue"),
+				isEqual: isDateEqual,
+				hash: (v) => v.toString(),
+				sync: true,
+				onChange(focusedValue) {
+					const context = getContext();
+					const view = context.get("view");
+					const value = context.get("value");
+					const valueAsString = getValueAsString(value, prop);
+					prop("onFocusChange")?.({
+						value,
+						valueAsString,
+						view,
+						focusedValue
+					});
+				}
+			})),
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual: isDateArrayEqual,
+				hash: (v) => v.map((date) => date?.toString() ?? "").join(","),
+				onChange(value) {
+					const context = getContext();
+					const valueAsString = getValueAsString(value, prop);
+					prop("onValueChange")?.({
+						value,
+						valueAsString,
+						view: context.get("view")
+					});
+				}
+			})),
+			inputValue: bindable(() => ({ defaultValue: "" })),
+			activeIndex: bindable(() => ({
+				defaultValue: 0,
+				sync: true
+			})),
+			hoveredValue: bindable(() => ({
+				defaultValue: null,
+				isEqual: isDateEqual
+			})),
+			view: bindable(() => ({
+				defaultValue: prop("defaultView"),
+				value: prop("view"),
+				onChange(value) {
+					prop("onViewChange")?.({ view: value });
+				}
+			})),
+			startValue: bindable(() => {
+				return {
+					defaultValue: alignDate(prop("focusedValue") || prop("defaultFocusedValue"), "start", { months: prop("numOfMonths") }, prop("locale")),
+					isEqual: isDateEqual,
+					hash: (v) => v.toString()
+				};
+			}),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			restoreFocus: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: {
+		isInteractive: ({ prop }) => !prop("disabled") && !prop("readOnly"),
+		visibleDuration: ({ prop }) => ({ months: prop("numOfMonths") }),
+		endValue: ({ context, computed }) => getEndDate(context.get("startValue"), computed("visibleDuration")),
+		visibleRange: ({ context, computed }) => ({
+			start: context.get("startValue"),
+			end: computed("endValue")
+		}),
+		visibleRangeText: ({ context, prop, computed }) => getVisibleRangeText({
+			view: context.get("view"),
+			startValue: context.get("startValue"),
+			endValue: computed("endValue"),
+			locale: prop("locale"),
+			timeZone: prop("timeZone"),
+			selectionMode: prop("selectionMode")
+		}),
+		isPrevVisibleRangeValid: ({ context, prop }) => !isPreviousRangeInvalid(context.get("startValue"), prop("min"), prop("max")),
+		isNextVisibleRangeValid: ({ prop, computed }) => !isNextRangeInvalid(computed("endValue"), prop("min"), prop("max")),
+		valueAsString: ({ context, prop }) => getValueAsString(context.get("value"), prop)
+	},
+	effects: ["setupLiveRegion"],
+	watch({ track, prop, context, action, computed }) {
+		track([() => prop("locale")], () => {
+			action(["setStartValue", "syncInputElement"]);
+		});
+		track([() => context.hash("focusedValue")], () => {
+			action([
+				"setStartValue",
+				"focusActiveCellIfNeeded",
+				"setHoveredValueIfKeyboard"
+			]);
+		});
+		track([() => context.hash("startValue")], () => {
+			action([
+				"syncMonthSelectElement",
+				"syncYearSelectElement",
+				"invokeOnVisibleRangeChange"
+			]);
+		});
+		track([() => context.get("inputValue")], () => {
+			action(["syncInputValue"]);
+		});
+		track([() => context.hash("value")], () => {
+			action(["syncInputElement"]);
+		});
+		track([() => computed("valueAsString").toString()], () => {
+			action(["announceValueText"]);
+		});
+		track([() => context.get("view")], () => {
+			action(["focusActiveCell"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	on: {
+		"VALUE.SET": { actions: ["setDateValue", "setFocusedDate"] },
+		"VIEW.SET": { actions: ["setView"] },
+		"FOCUS.SET": { actions: ["setFocusedDate"] },
+		"VALUE.CLEAR": { actions: [
+			"clearDateValue",
+			"clearFocusedDate",
+			"setActiveIndexToStart",
+			"clearHoveredDate",
+			"focusFirstInputElement"
+		] },
+		"INPUT.CHANGE": [{
+			guard: "isInputValueEmpty",
+			actions: [
+				"setInputValue",
+				"clearDateValue",
+				"clearFocusedDate"
+			]
+		}, { actions: ["setInputValue", "focusParsedDate"] }],
+		"INPUT.ENTER": { actions: ["focusParsedDate", "selectFocusedDate"] },
+		"INPUT.FOCUS": { actions: ["setActiveIndex"] },
+		"INPUT.BLUR": [{
+			guard: "shouldFixOnBlur",
+			actions: ["setActiveIndexToStart", "selectParsedDate"]
+		}, { actions: ["setActiveIndexToStart"] }],
+		"PRESET.CLICK": [{
+			guard: "isOpenControlled",
+			actions: [
+				"setDateValue",
+				"setFocusedDate",
+				"invokeOnClose"
+			]
+		}, {
+			target: "focused",
+			actions: [
+				"setDateValue",
+				"setFocusedDate",
+				"focusInputElement"
+			]
+		}],
+		"GOTO.NEXT": [
+			{
+				guard: "isYearView",
+				actions: ["focusNextDecade", "announceVisibleRange"]
+			},
+			{
+				guard: "isMonthView",
+				actions: ["focusNextYear", "announceVisibleRange"]
+			},
+			{ actions: ["focusNextPage"] }
+		],
+		"GOTO.PREV": [
+			{
+				guard: "isYearView",
+				actions: ["focusPreviousDecade", "announceVisibleRange"]
+			},
+			{
+				guard: "isMonthView",
+				actions: ["focusPreviousYear", "announceVisibleRange"]
+			},
+			{ actions: ["focusPreviousPage"] }
+		]
+	},
+	states: {
+		idle: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": {
+					target: "open",
+					actions: [
+						"resetView",
+						"focusFirstSelectedDate",
+						"focusActiveCell"
+					]
+				},
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"resetView",
+						"focusFirstSelectedDate",
+						"focusActiveCell",
+						"invokeOnOpen"
+					]
+				}],
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"resetView",
+						"focusFirstSelectedDate",
+						"focusActiveCell",
+						"invokeOnOpen"
+					]
+				}]
+			}
+		},
+		focused: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": {
+					target: "open",
+					actions: [
+						"resetView",
+						"focusFirstSelectedDate",
+						"focusActiveCell"
+					]
+				},
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"resetView",
+						"focusFirstSelectedDate",
+						"focusActiveCell",
+						"invokeOnOpen"
+					]
+				}],
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"resetView",
+						"focusFirstSelectedDate",
+						"focusActiveCell",
+						"invokeOnOpen"
+					]
+				}]
+			}
+		},
+		open: {
+			tags: ["open"],
+			effects: ["trackDismissableElement", "trackPositioning"],
+			exit: ["clearHoveredDate"],
+			on: {
+				"CONTROLLED.CLOSE": [
+					{
+						guard: and("shouldRestoreFocus", "isInteractOutsideEvent"),
+						target: "focused",
+						actions: ["focusTriggerElement"]
+					},
+					{
+						guard: "shouldRestoreFocus",
+						target: "focused",
+						actions: ["focusInputElement"]
+					},
+					{ target: "idle" }
+				],
+				"CELL.CLICK": [
+					{
+						guard: "isAboveMinView",
+						actions: ["setFocusedValueForView", "setPreviousView"]
+					},
+					{
+						guard: and("isRangePicker", "hasSelectedRange"),
+						actions: [
+							"setActiveIndexToStart",
+							"resetSelection",
+							"setActiveIndexToEnd"
+						]
+					},
+					{
+						guard: and("isRangePicker", "isSelectingEndDate", "closeOnSelect", "isOpenControlled"),
+						actions: [
+							"setFocusedDate",
+							"setSelectedDate",
+							"setActiveIndexToStart",
+							"clearHoveredDate",
+							"invokeOnClose",
+							"setRestoreFocus"
+						]
+					},
+					{
+						guard: and("isRangePicker", "isSelectingEndDate", "closeOnSelect"),
+						target: "focused",
+						actions: [
+							"setFocusedDate",
+							"setSelectedDate",
+							"setActiveIndexToStart",
+							"clearHoveredDate",
+							"invokeOnClose",
+							"focusInputElement"
+						]
+					},
+					{
+						guard: and("isRangePicker", "isSelectingEndDate"),
+						actions: [
+							"setFocusedDate",
+							"setSelectedDate",
+							"setActiveIndexToStart",
+							"clearHoveredDate"
+						]
+					},
+					{
+						guard: "isRangePicker",
+						actions: [
+							"setFocusedDate",
+							"setSelectedDate",
+							"setActiveIndexToEnd"
+						]
+					},
+					{
+						guard: and("isMultiPicker", "canSelectDate"),
+						actions: ["setFocusedDate", "toggleSelectedDate"]
+					},
+					{
+						guard: "isMultiPicker",
+						actions: ["setFocusedDate"]
+					},
+					{
+						guard: and("closeOnSelect", "isOpenControlled"),
+						actions: [
+							"setFocusedDate",
+							"setSelectedDate",
+							"invokeOnClose"
+						]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "focused",
+						actions: [
+							"setFocusedDate",
+							"setSelectedDate",
+							"invokeOnClose",
+							"focusInputElement"
+						]
+					},
+					{ actions: ["setFocusedDate", "setSelectedDate"] }
+				],
+				"CELL.POINTER_MOVE": [{
+					guard: and("isRangePicker", "isSelectingEndDate", "isDayPointerMoveOutsideVisibleMonth"),
+					actions: ["setHoveredDate"]
+				}, {
+					guard: and("isRangePicker", "isSelectingEndDate"),
+					actions: ["setHoveredDate", "setFocusedDate"]
+				}],
+				"TABLE.POINTER_LEAVE": {
+					guard: "isRangePicker",
+					actions: ["clearHoveredDate"]
+				},
+				"TABLE.POINTER_DOWN": { actions: ["disableTextSelection"] },
+				"TABLE.POINTER_UP": { actions: ["enableTextSelection"] },
+				"TABLE.ESCAPE": [{
+					guard: "isOpenControlled",
+					actions: ["focusFirstSelectedDate", "invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: [
+						"focusFirstSelectedDate",
+						"invokeOnClose",
+						"focusTriggerElement"
+					]
+				}],
+				"TABLE.ENTER": [
+					{
+						guard: "isAboveMinView",
+						actions: ["setPreviousView"]
+					},
+					{
+						guard: and("isRangePicker", "hasSelectedRange"),
+						actions: [
+							"setActiveIndexToStart",
+							"clearDateValue",
+							"setSelectedDate",
+							"setActiveIndexToEnd"
+						]
+					},
+					{
+						guard: and("isRangePicker", "isSelectingEndDate", "closeOnSelect", "isOpenControlled"),
+						actions: [
+							"setSelectedDate",
+							"setActiveIndexToStart",
+							"clearHoveredDate",
+							"invokeOnClose"
+						]
+					},
+					{
+						guard: and("isRangePicker", "isSelectingEndDate", "closeOnSelect"),
+						target: "focused",
+						actions: [
+							"setSelectedDate",
+							"setActiveIndexToStart",
+							"clearHoveredDate",
+							"invokeOnClose",
+							"focusInputElement"
+						]
+					},
+					{
+						guard: and("isRangePicker", "isSelectingEndDate"),
+						actions: [
+							"setSelectedDate",
+							"setActiveIndexToStart",
+							"clearHoveredDate"
+						]
+					},
+					{
+						guard: "isRangePicker",
+						actions: [
+							"setSelectedDate",
+							"setActiveIndexToEnd",
+							"focusNextDay"
+						]
+					},
+					{
+						guard: and("isMultiPicker", "canSelectDate"),
+						actions: ["toggleSelectedDate"]
+					},
+					{ guard: "isMultiPicker" },
+					{
+						guard: and("closeOnSelect", "isOpenControlled"),
+						actions: ["selectFocusedDate", "invokeOnClose"]
+					},
+					{
+						guard: "closeOnSelect",
+						target: "focused",
+						actions: [
+							"selectFocusedDate",
+							"invokeOnClose",
+							"focusInputElement"
+						]
+					},
+					{ actions: ["selectFocusedDate"] }
+				],
+				"TABLE.ARROW_RIGHT": [
+					{
+						guard: "isMonthView",
+						actions: ["focusNextMonth"]
+					},
+					{
+						guard: "isYearView",
+						actions: ["focusNextYear"]
+					},
+					{ actions: ["focusNextDay", "setHoveredDate"] }
+				],
+				"TABLE.ARROW_LEFT": [
+					{
+						guard: "isMonthView",
+						actions: ["focusPreviousMonth"]
+					},
+					{
+						guard: "isYearView",
+						actions: ["focusPreviousYear"]
+					},
+					{ actions: ["focusPreviousDay"] }
+				],
+				"TABLE.ARROW_UP": [
+					{
+						guard: "isMonthView",
+						actions: ["focusPreviousMonthColumn"]
+					},
+					{
+						guard: "isYearView",
+						actions: ["focusPreviousYearColumn"]
+					},
+					{ actions: ["focusPreviousWeek"] }
+				],
+				"TABLE.ARROW_DOWN": [
+					{
+						guard: "isMonthView",
+						actions: ["focusNextMonthColumn"]
+					},
+					{
+						guard: "isYearView",
+						actions: ["focusNextYearColumn"]
+					},
+					{ actions: ["focusNextWeek"] }
+				],
+				"TABLE.PAGE_UP": { actions: ["focusPreviousSection"] },
+				"TABLE.PAGE_DOWN": { actions: ["focusNextSection"] },
+				"TABLE.HOME": [
+					{
+						guard: "isMonthView",
+						actions: ["focusFirstMonth"]
+					},
+					{
+						guard: "isYearView",
+						actions: ["focusFirstYear"]
+					},
+					{ actions: ["focusSectionStart"] }
+				],
+				"TABLE.END": [
+					{
+						guard: "isMonthView",
+						actions: ["focusLastMonth"]
+					},
+					{
+						guard: "isYearView",
+						actions: ["focusLastYear"]
+					},
+					{ actions: ["focusSectionEnd"] }
+				],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "focused",
+					actions: ["invokeOnClose"]
+				}],
+				"VIEW.TOGGLE": { actions: ["setNextView"] },
+				INTERACT_OUTSIDE: [
+					{
+						guard: "isOpenControlled",
+						actions: ["setActiveIndexToStart", "invokeOnClose"]
+					},
+					{
+						guard: "shouldRestoreFocus",
+						target: "focused",
+						actions: [
+							"setActiveIndexToStart",
+							"invokeOnClose",
+							"focusTriggerElement"
+						]
+					},
+					{
+						target: "idle",
+						actions: ["setActiveIndexToStart", "invokeOnClose"]
+					}
+				],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["setActiveIndexToStart", "invokeOnClose"]
+				}, {
+					target: "idle",
+					actions: ["setActiveIndexToStart", "invokeOnClose"]
+				}]
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			isAboveMinView: ({ context, prop }) => isAboveMinView(context.get("view"), prop("minView")),
+			isDayView: ({ context, event }) => (event.view || context.get("view")) === "day",
+			isMonthView: ({ context, event }) => (event.view || context.get("view")) === "month",
+			isYearView: ({ context, event }) => (event.view || context.get("view")) === "year",
+			isRangePicker: ({ prop }) => prop("selectionMode") === "range",
+			hasSelectedRange: ({ context }) => context.get("value").length === 2,
+			isMultiPicker: ({ prop }) => prop("selectionMode") === "multiple",
+			canSelectDate: (params) => {
+				const { context, prop, event } = params;
+				const maxSelectedDates = prop("maxSelectedDates");
+				if (maxSelectedDates == null) return true;
+				const existingValues = context.get("value");
+				const currentValue = normalizeValue(params, event.value ?? context.get("focusedValue"));
+				if (existingValues.some((date) => isDateEqual(date, currentValue))) return true;
+				return existingValues.length < maxSelectedDates;
+			},
+			shouldRestoreFocus: ({ context }) => !!context.get("restoreFocus"),
+			isSelectingEndDate: ({ context }) => context.get("activeIndex") === 1,
+			closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),
+			isOpenControlled: ({ prop }) => prop("open") != void 0 || !!prop("inline"),
+			isInteractOutsideEvent: ({ event }) => event.previousEvent?.type === "INTERACT_OUTSIDE",
+			isInputValueEmpty: ({ event }) => event.value.trim() === "",
+			shouldFixOnBlur: ({ event }) => !!event.fixOnBlur,
+			isDayPointerMoveOutsideVisibleMonth: ({ event }) => event.cell === "day" && event.outsideRange === true
+		},
+		effects: {
+			trackPositioning({ context, prop, scope }) {
+				if (prop("inline")) return;
+				if (!context.get("currentPlacement")) context.set("currentPlacement", prop("positioning").placement);
+				const anchorEl = getControlEl(scope);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				return getPlacement(anchorEl, getPositionerEl$1, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			setupLiveRegion({ scope, refs }) {
+				const doc = scope.getDoc();
+				refs.set("announcer", createLiveRegion({
+					level: "assertive",
+					document: doc
+				}));
+				return () => refs.get("announcer")?.destroy?.();
+			},
+			trackDismissableElement({ scope, send, context, prop }) {
+				if (prop("inline")) return;
+				const getContentEl$1 = () => getContentEl(scope);
+				return trackDismissableElement(getContentEl$1, {
+					type: "popover",
+					defer: true,
+					layerStyleTargets: [() => getPositionerEl(scope)],
+					exclude: [
+						...getInputEls(scope),
+						getTriggerEl(scope),
+						getClearTriggerEl(scope)
+					],
+					onInteractOutside(event) {
+						context.set("restoreFocus", !event.detail.focusable);
+					},
+					onDismiss() {
+						send({ type: "INTERACT_OUTSIDE" });
+					},
+					onEscapeKeyDown(event) {
+						event.preventDefault();
+						send({
+							type: "TABLE.ESCAPE",
+							src: "dismissable"
+						});
+					}
+				});
+			}
+		},
+		actions: {
+			setNextView({ context, prop }) {
+				const nextView = getNextView(context.get("view"), prop("minView"), prop("maxView"));
+				context.set("view", nextView);
+			},
+			setPreviousView({ context, prop }) {
+				const prevView = getPreviousView(context.get("view"), prop("minView"), prop("maxView"));
+				context.set("view", prevView);
+			},
+			setView({ context, event }) {
+				context.set("view", event.view);
+			},
+			setRestoreFocus({ context }) {
+				context.set("restoreFocus", true);
+			},
+			announceValueText({ context, prop, refs }) {
+				const value = context.get("value");
+				const locale = prop("locale");
+				const timeZone = prop("timeZone");
+				let announceText;
+				if (prop("selectionMode") === "range") {
+					const [startDate, endDate] = value;
+					if (startDate && endDate) announceText = formatSelectedDate(startDate, endDate, locale, timeZone);
+					else if (startDate) announceText = formatSelectedDate(startDate, null, locale, timeZone);
+					else if (endDate) announceText = formatSelectedDate(endDate, null, locale, timeZone);
+					else announceText = "";
+				} else announceText = value.map((date) => formatSelectedDate(date, null, locale, timeZone)).filter(Boolean).join(",");
+				refs.get("announcer")?.announce(announceText, 3e3);
+			},
+			announceVisibleRange({ computed, refs }) {
+				const { formatted } = computed("visibleRangeText");
+				refs.get("announcer")?.announce(formatted);
+			},
+			disableTextSelection({ scope }) {
+				disableTextSelection({
+					target: getContentEl(scope),
+					doc: scope.getDoc()
+				});
+			},
+			enableTextSelection({ scope }) {
+				restoreTextSelection({
+					doc: scope.getDoc(),
+					target: getContentEl(scope)
+				});
+			},
+			focusFirstSelectedDate(params) {
+				const { context } = params;
+				if (!context.get("value").length) return;
+				setFocusedValue(params, context.get("value")[0]);
+			},
+			syncInputElement({ scope, computed }) {
+				raf(() => {
+					getInputEls(scope).forEach((inputEl, index) => {
+						setElementValue(inputEl, computed("valueAsString")[index] || "");
+					});
+				});
+			},
+			setFocusedDate(params) {
+				const { event } = params;
+				setFocusedValue(params, Array.isArray(event.value) ? event.value[0] : event.value);
+			},
+			setFocusedValueForView(params) {
+				const { context, event } = params;
+				setFocusedValue(params, context.get("focusedValue").set({ [context.get("view")]: event.value }));
+			},
+			focusNextMonth(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ months: 1 }));
+			},
+			focusPreviousMonth(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ months: 1 }));
+			},
+			setDateValue({ context, event, prop }) {
+				if (!Array.isArray(event.value)) return;
+				const value = event.value.map((date) => constrainValue(date, prop("min"), prop("max")));
+				context.set("value", value);
+			},
+			clearDateValue({ context }) {
+				context.set("value", []);
+			},
+			setSelectedDate(params) {
+				const { context, event } = params;
+				const values = Array.from(context.get("value"));
+				const activeIndex = context.get("activeIndex");
+				const existingValue = values[activeIndex];
+				const newValue = normalizeValue(params, event.value ?? context.get("focusedValue"));
+				values[activeIndex] = preserveTime(existingValue, newValue);
+				context.set("value", adjustStartAndEndDate(values));
+			},
+			resetSelection(params) {
+				const { context, event } = params;
+				const existingValue = context.get("value")[0];
+				const newValue = normalizeValue(params, event.value ?? context.get("focusedValue"));
+				context.set("value", [preserveTime(existingValue, newValue)]);
+			},
+			toggleSelectedDate(params) {
+				const { context, event } = params;
+				const currentValue = normalizeValue(params, event.value ?? context.get("focusedValue"));
+				const existingValues = context.get("value");
+				const index = existingValues.findIndex((date) => isDateEqual(date, currentValue));
+				if (index === -1) {
+					const values = [...existingValues, currentValue];
+					context.set("value", sortDates(values));
+				} else {
+					const values = Array.from(existingValues);
+					values.splice(index, 1);
+					context.set("value", sortDates(values));
+				}
+			},
+			setHoveredDate({ context, event }) {
+				context.set("hoveredValue", event.value);
+			},
+			clearHoveredDate({ context }) {
+				context.set("hoveredValue", null);
+			},
+			selectFocusedDate({ context, computed }) {
+				const values = Array.from(context.get("value"));
+				const activeIndex = context.get("activeIndex");
+				const existingValue = values[activeIndex];
+				const newValue = context.get("focusedValue").copy();
+				values[activeIndex] = preserveTime(existingValue, newValue);
+				context.set("value", adjustStartAndEndDate(values));
+				const valueAsString = computed("valueAsString");
+				context.set("inputValue", valueAsString[activeIndex]);
+			},
+			focusPreviousDay(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ days: 1 }));
+			},
+			focusNextDay(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ days: 1 }));
+			},
+			focusPreviousWeek(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ weeks: 1 }));
+			},
+			focusNextWeek(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ weeks: 1 }));
+			},
+			focusNextPage(params) {
+				const { context, computed, prop } = params;
+				setAdjustedValue(params, getNextPage(context.get("focusedValue"), context.get("startValue"), computed("visibleDuration"), prop("locale"), prop("min"), prop("max")));
+			},
+			focusPreviousPage(params) {
+				const { context, computed, prop } = params;
+				setAdjustedValue(params, getPreviousPage(context.get("focusedValue"), context.get("startValue"), computed("visibleDuration"), prop("locale"), prop("min"), prop("max")));
+			},
+			focusSectionStart(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("startValue").copy());
+			},
+			focusSectionEnd(params) {
+				const { computed } = params;
+				setFocusedValue(params, computed("endValue").copy());
+			},
+			focusNextSection(params) {
+				const { context, event, computed, prop } = params;
+				const nextSection = getNextSection(context.get("focusedValue"), context.get("startValue"), event.larger, computed("visibleDuration"), prop("locale"), prop("min"), prop("max"));
+				if (!nextSection) return;
+				setAdjustedValue(params, nextSection);
+			},
+			focusPreviousSection(params) {
+				const { context, event, computed, prop } = params;
+				const previousSection = getPreviousSection(context.get("focusedValue"), context.get("startValue"), event.larger, computed("visibleDuration"), prop("locale"), prop("min"), prop("max"));
+				if (!previousSection) return;
+				setAdjustedValue(params, previousSection);
+			},
+			focusNextYear(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ years: 1 }));
+			},
+			focusPreviousYear(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ years: 1 }));
+			},
+			focusNextDecade(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ years: 10 }));
+			},
+			focusPreviousDecade(params) {
+				const { context } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ years: 10 }));
+			},
+			clearFocusedDate(params) {
+				const { context, prop } = params;
+				const calendar = context.get("focusedValue").calendar;
+				setFocusedValue(params, getTodayDate(prop("timeZone"), calendar));
+			},
+			focusPreviousMonthColumn(params) {
+				const { context, event } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ months: event.columns }));
+			},
+			focusNextMonthColumn(params) {
+				const { context, event } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ months: event.columns }));
+			},
+			focusPreviousYearColumn(params) {
+				const { context, event } = params;
+				setFocusedValue(params, context.get("focusedValue").subtract({ years: event.columns }));
+			},
+			focusNextYearColumn(params) {
+				const { context, event } = params;
+				setFocusedValue(params, context.get("focusedValue").add({ years: event.columns }));
+			},
+			focusFirstMonth(params) {
+				const { context } = params;
+				const focused = context.get("focusedValue");
+				const minMonth = focused.calendar.getMinimumMonthInYear?.(focused) ?? 1;
+				setFocusedValue(params, focused.set({ month: minMonth }));
+			},
+			focusLastMonth(params) {
+				const { context } = params;
+				const focused = context.get("focusedValue");
+				const maxMonth = focused.calendar.getMonthsInYear(focused);
+				setFocusedValue(params, focused.set({ month: maxMonth }));
+			},
+			focusFirstYear(params) {
+				const { context } = params;
+				const range = getDecadeRange(context.get("focusedValue").year);
+				setFocusedValue(params, context.get("focusedValue").set({ year: range[0] }));
+			},
+			focusLastYear(params) {
+				const { context } = params;
+				const range = getDecadeRange(context.get("focusedValue").year);
+				setFocusedValue(params, context.get("focusedValue").set({ year: range[range.length - 1] }));
+			},
+			setActiveIndex({ context, event }) {
+				context.set("activeIndex", event.index);
+			},
+			setActiveIndexToEnd({ context }) {
+				context.set("activeIndex", 1);
+			},
+			setActiveIndexToStart({ context }) {
+				context.set("activeIndex", 0);
+			},
+			focusActiveCell({ scope, context, event }) {
+				if (event.src === "input.click") return;
+				raf(() => {
+					const view = context.get("view");
+					getFocusedCell(scope, view)?.focus({ preventScroll: true });
+				});
+			},
+			focusActiveCellIfNeeded({ scope, context, event }) {
+				if (!event.focus) return;
+				raf(() => {
+					const view = context.get("view");
+					getFocusedCell(scope, view)?.focus({ preventScroll: true });
+				});
+			},
+			setHoveredValueIfKeyboard({ context, event, prop }) {
+				if (!event.type.startsWith("TABLE.ARROW") || prop("selectionMode") !== "range" || context.get("activeIndex") === 0) return;
+				context.set("hoveredValue", context.get("focusedValue").copy());
+			},
+			focusTriggerElement({ scope }) {
+				raf(() => {
+					getTriggerEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			focusFirstInputElement({ scope, event }) {
+				if (event.focus === false) return;
+				raf(() => {
+					const [inputEl] = getInputEls(scope);
+					(inputEl ?? getTriggerEl(scope))?.focus({ preventScroll: true });
+				});
+			},
+			focusInputElement({ scope }) {
+				raf(() => {
+					const inputEls = getInputEls(scope);
+					if (inputEls.length === 0) {
+						getTriggerEl(scope)?.focus({ preventScroll: true });
+						return;
+					}
+					const lastIndexWithValue = inputEls.findLastIndex((inputEl) => inputEl.value !== "");
+					const inputEl = inputEls[Math.max(lastIndexWithValue, 0)];
+					inputEl?.focus({ preventScroll: true });
+					inputEl?.setSelectionRange(inputEl.value.length, inputEl.value.length);
+				});
+			},
+			syncMonthSelectElement({ scope, context }) {
+				setElementValue(getMonthSelectEl(scope), context.get("startValue").month.toString());
+			},
+			syncYearSelectElement({ scope, context }) {
+				setElementValue(getYearSelectEl(scope), context.get("startValue").year.toString());
+			},
+			setInputValue({ context, event }) {
+				if (context.get("activeIndex") !== event.index) return;
+				context.set("inputValue", event.value);
+			},
+			syncInputValue({ scope, context, event }) {
+				queueMicrotask(() => {
+					setElementValue(getInputEls(scope)[event.index ?? context.get("activeIndex")], context.get("inputValue"));
+				});
+			},
+			focusParsedDate(params) {
+				const { event, prop } = params;
+				if (event.index == null) return;
+				const date = prop("parse")(event.value, {
+					locale: prop("locale"),
+					timeZone: prop("timeZone")
+				});
+				if (!date || !isValidDate(date)) return;
+				setFocusedValue(params, date);
+			},
+			selectParsedDate({ context, event, prop }) {
+				if (event.index == null) return;
+				let date = prop("parse")(event.value, {
+					locale: prop("locale"),
+					timeZone: prop("timeZone")
+				});
+				if (!date || !isValidDate(date)) {
+					if (event.value) date = context.get("focusedValue").copy();
+				}
+				if (!date) return;
+				date = constrainValue(date, prop("min"), prop("max"));
+				const values = Array.from(context.get("value"));
+				values[event.index] = preserveTime(values[event.index], date);
+				const adjustedValues = adjustStartAndEndDate(values);
+				context.set("value", adjustedValues);
+				const valueAsString = getValueAsString(adjustedValues, prop);
+				context.set("inputValue", valueAsString[event.index]);
+			},
+			resetView({ context }) {
+				context.set("view", context.initial("view"));
+			},
+			setStartValue({ context, computed, prop }) {
+				const focusedValue = context.get("focusedValue");
+				if (!isDateOutsideRange(focusedValue, context.get("startValue"), computed("endValue"))) return;
+				const startValue = alignDate(focusedValue, "start", { months: prop("numOfMonths") }, prop("locale"));
+				context.set("startValue", startValue);
+			},
+			invokeOnOpen({ prop, context }) {
+				if (prop("inline")) return;
+				prop("onOpenChange")?.({
+					open: true,
+					value: context.get("value")
+				});
+			},
+			invokeOnClose({ prop, context }) {
+				if (prop("inline")) return;
+				prop("onOpenChange")?.({
+					open: false,
+					value: context.get("value")
+				});
+			},
+			invokeOnVisibleRangeChange({ prop, context, computed }) {
+				prop("onVisibleRangeChange")?.({
+					view: context.get("view"),
+					visibleRange: computed("visibleRange")
+				});
+			},
+			toggleVisibility({ event, send, prop }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+const normalizeValue = (ctx, value) => {
+	const { context, prop } = ctx;
+	const view = context.get("view");
+	let dateValue = typeof value === "number" ? context.get("focusedValue").set({ [view]: value }) : value;
+	eachView((view) => {
+		if (isBelowMinView(view, prop("minView"))) dateValue = dateValue.set({ [view]: view === "day" ? 1 : 0 });
+	});
+	return dateValue;
+};
+const preserveTime = (existingDate, newDate) => {
+	if (!existingDate || !("hour" in existingDate)) return newDate;
+	const isZoned = "timeZone" in existingDate;
+	let dateWithTime = newDate;
+	if (!("hour" in newDate)) if (isZoned) dateWithTime = toZoned(toCalendarDateTime(newDate), existingDate.timeZone);
+	else dateWithTime = toCalendarDateTime(newDate);
+	return dateWithTime.set({
+		hour: existingDate.hour,
+		minute: existingDate.minute,
+		second: existingDate.second,
+		millisecond: existingDate.millisecond
+	});
+};
+function setFocusedValue(ctx, mixedValue) {
+	const { context, prop, computed } = ctx;
+	if (!mixedValue) return;
+	const value = normalizeValue(ctx, mixedValue);
+	if (isDateEqual(context.get("focusedValue"), value)) return;
+	const adjustedValue = getAdjustedDateFn(computed("visibleDuration"), prop("locale"), prop("min"), prop("max"))({
+		focusedDate: value,
+		startDate: context.get("startValue")
+	});
+	context.set("startValue", adjustedValue.startDate);
+	context.set("focusedValue", adjustedValue.focusedDate);
+}
+function setAdjustedValue(ctx, value) {
+	const { context } = ctx;
+	context.set("startValue", value.startDate);
+	if (isDateEqual(context.get("focusedValue"), value.focusedDate)) return;
+	context.set("focusedValue", value.focusedDate);
+}
+//#endregion
+//#region src/machines/date-picker/parse.ts
+function parse(value) {
+	if (Array.isArray(value)) return value.map((v) => parse(v));
+	if (value instanceof Date) return new CalendarDate(value.getFullYear(), value.getMonth() + 1, value.getDate());
+	return parseDate(value);
+}
+//#endregion
+//#region src/machines/date-picker/props.ts
+const props = createProps()([
+	"closeOnSelect",
+	"createCalendar",
+	"dir",
+	"disabled",
+	"fixedWeeks",
+	"focusedValue",
+	"format",
+	"parse",
+	"placeholder",
+	"getRootNode",
+	"id",
+	"ids",
+	"inline",
+	"invalid",
+	"isDateUnavailable",
+	"locale",
+	"max",
+	"maxSelectedDates",
+	"min",
+	"name",
+	"numOfMonths",
+	"onFocusChange",
+	"onOpenChange",
+	"onValueChange",
+	"onViewChange",
+	"onVisibleRangeChange",
+	"open",
+	"openOnClick",
+	"defaultOpen",
+	"positioning",
+	"readOnly",
+	"required",
+	"selectionMode",
+	"showWeekNumbers",
+	"startOfWeek",
+	"timeZone",
+	"translations",
+	"value",
+	"defaultView",
+	"defaultValue",
+	"view",
+	"defaultFocusedValue",
+	"outsideDaySelectable",
+	"minView",
+	"maxView"
+]);
+const splitProps = createSplitProps(props);
+const inputProps = createProps()(["index", "fixOnBlur"]);
+const splitInputProps = createSplitProps(inputProps);
+const presetTriggerProps = createProps()(["value"]);
+const splitPresetTriggerProps = createSplitProps(presetTriggerProps);
+const tableProps = createProps()([
+	"columns",
+	"id",
+	"view"
+]);
+const splitTableProps = createSplitProps(tableProps);
+const tableCellProps = createProps()([
+	"disabled",
+	"value",
+	"columns"
+]);
+const splitTableCellProps = createSplitProps(tableCellProps);
+const viewProps = createProps()(["view"]);
+const splitViewProps = createSplitProps(viewProps);
+//#endregion
+export { anatomy, connect, inputProps, machine, parse, presetTriggerProps, props, splitInputProps, splitPresetTriggerProps, splitProps, splitTableCellProps, splitTableProps, splitViewProps, tableCellProps, tableProps, viewProps };