@sprawlify/primitives 0.1.10 → 0.1.12

package/dist/machines/date-input/index.mjs

@@ -0,0 +1,1813 @@
+import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
+import { C as queryAll, W as raf, a as visuallyHiddenStyle, bn as ariaAttr, ft as getEventKey, gt as getNativeEvent, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
+import { t as _defineProperty } from "../../defineProperty-D5oW_HU_.mjs";
+import { u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
+import { a as createMachine, h as memo } from "../../core-CTtbW9qh.mjs";
+import { F as isDateEqual, K as constrainValue, p as getTodayDate } from "../../date-utils-BdeeOQRI.mjs";
+import { t as createLiveRegion } from "../../live-region-TgEDzvS4.mjs";
+import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
+import { CalendarDate, DateFormatter, parseDate, toCalendarDateTime } from "@internationalized/date";
+//#region src/machines/date-input/date-input.anatomy.ts
+const anatomy = createAnatomy("date-input").parts("root", "label", "control", "segmentGroup", "segment", "hiddenInput");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/date-input/date-input.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `date-input:${ctx.id}`;
+const getLabelId = (ctx, index) => ctx.ids?.label?.(index) ?? `date-input:${ctx.id}:label:${index}`;
+const getControlId = (ctx) => ctx.ids?.control ?? `date-input:${ctx.id}:control`;
+const getSegmentGroupId = (ctx, index) => ctx.ids?.segmentGroup?.(index) ?? `date-input:${ctx.id}:segment-group:${index}`;
+const getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `date-input:${ctx.id}:hidden-input:${index}`;
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getSegmentEls = (ctx) => queryAll(getControlEl(ctx), `[data-part=segment]`);
+//#endregion
+//#region src/machines/date-input/utils/locale.ts
+const isValidCharacter = (char, separator) => {
+	if (!char) return true;
+	return /\d/.test(char) || char === separator || char.length !== 1;
+};
+function getLocaleSeparator(locale) {
+	const literalPart = new Intl.DateTimeFormat(locale).formatToParts(/* @__PURE__ */ new Date()).find((part) => part.type === "literal");
+	return literalPart ? literalPart.value : "/";
+}
+//#endregion
+//#region src/machines/date-input/utils/segments.ts
+const EDITABLE_SEGMENTS = {
+	year: true,
+	month: true,
+	day: true,
+	hour: true,
+	minute: true,
+	second: true,
+	dayPeriod: true,
+	era: true,
+	literal: false,
+	timeZoneName: false,
+	weekday: false,
+	unknown: false,
+	fractionalSecond: false
+};
+const PAGE_STEP = {
+	year: 5,
+	month: 2,
+	day: 7,
+	hour: 2,
+	minute: 15,
+	second: 15,
+	dayPeriod: void 0,
+	era: void 0,
+	literal: void 0,
+	timeZoneName: void 0,
+	weekday: void 0,
+	unknown: void 0,
+	fractionalSecond: void 0
+};
+const SEGMENT_LABELS = {
+	era: "Era",
+	year: "Year",
+	month: "Month",
+	day: "Day",
+	hour: "Hour",
+	minute: "Minute",
+	second: "Second",
+	dayPeriod: "AM/PM",
+	timeZoneName: "Time zone"
+};
+function getSegmentLabel(type) {
+	return SEGMENT_LABELS[type] ?? type;
+}
+const TYPE_MAPPING = {
+	dayperiod: "dayPeriod",
+	relatedYear: "year",
+	yearName: "literal",
+	unknown: "literal"
+};
+function getSafeType(type) {
+	return TYPE_MAPPING[type] ?? type;
+}
+function getPlaceholder(type, translations, locale) {
+	return translations.placeholder(locale)[type];
+}
+function isEditableSegment(type) {
+	return EDITABLE_SEGMENTS[type] === true;
+}
+function getSafeFormatParts(formatter, dateValue, displayValue) {
+	try {
+		return formatter.formatToParts(dateValue);
+	} catch {
+		return formatter.formatToParts(/* @__PURE__ */ new Date()).map((part) => {
+			switch (part.type) {
+				case "year":
+				case "relatedYear": return {
+					...part,
+					value: String(displayValue.year ?? 0)
+				};
+				case "month": return {
+					...part,
+					value: String(displayValue.month ?? 0)
+				};
+				case "day": return {
+					...part,
+					value: String(displayValue.day ?? 0)
+				};
+			}
+			return part;
+		});
+	}
+}
+function processSegments({ dateValue, displayValue, formatter, locale, translations, granularity }) {
+	const timeValue = [
+		"hour",
+		"minute",
+		"second"
+	];
+	const segments = getSafeFormatParts(formatter, dateValue, displayValue);
+	const processedSegments = [];
+	for (const segment of segments) {
+		const type = getSafeType(segment.type);
+		let isEditable = isEditableSegment(type);
+		if (type === "era" && displayValue.calendar.getEras().length === 1) isEditable = false;
+		const isPlaceholder = isEditable && displayValue[type] == null;
+		let placeholder = isEditableSegment(type) ? getPlaceholder(type, translations, locale) : null;
+		if ((type === "dayPeriod" || type === "era") && segment.value) placeholder = segment.value;
+		const dateSegment = {
+			type,
+			text: isPlaceholder ? placeholder : segment.value,
+			...displayValue.getSegmentLimits(type) ?? {},
+			isPlaceholder,
+			placeholder,
+			isEditable
+		};
+		if (type === "hour") {
+			processedSegments.push({
+				type: "literal",
+				text: "⁦",
+				isPlaceholder: false,
+				placeholder: "",
+				isEditable: false
+			});
+			processedSegments.push(dateSegment);
+			if (type === granularity) processedSegments.push({
+				type: "literal",
+				text: "⁩",
+				isPlaceholder: false,
+				placeholder: "",
+				isEditable: false
+			});
+		} else if (timeValue.includes(type) && type === granularity) {
+			processedSegments.push(dateSegment);
+			processedSegments.push({
+				type: "literal",
+				text: "⁩",
+				isPlaceholder: false,
+				placeholder: "",
+				isEditable: false
+			});
+		} else processedSegments.push(dateSegment);
+	}
+	return processedSegments;
+}
+//#endregion
+//#region src/machines/date-input/utils/validity.ts
+function getGroupOffset(allSegments, index) {
+	return allSegments.slice(0, index).reduce((acc, segs) => acc + segs.length, 0);
+}
+function resolveActiveSegment(ctx) {
+	const { context, computed } = ctx;
+	const index = context.get("activeIndex");
+	const activeSegmentIndex = context.get("activeSegmentIndex");
+	const allSegments = computed("segments");
+	const offset = getGroupOffset(allSegments, index);
+	return {
+		allSegments,
+		segments: allSegments[index],
+		offset,
+		localIndex: activeSegmentIndex - offset
+	};
+}
+function getActiveSegment(ctx) {
+	const { allSegments, localIndex } = resolveActiveSegment(ctx);
+	return allSegments[ctx.context.get("activeIndex")]?.[localIndex];
+}
+function advanceToNextSegment(ctx) {
+	const { context } = ctx;
+	const index = context.get("activeIndex");
+	const { allSegments, segments, offset, localIndex } = resolveActiveSegment(ctx);
+	const nextLocalIndex = segments.findIndex((s, i) => i > localIndex && s.isEditable);
+	if (nextLocalIndex !== -1) {
+		context.set("activeSegmentIndex", offset + nextLocalIndex);
+		return;
+	}
+	const nextGroupSegments = allSegments[index + 1];
+	if (!nextGroupSegments) return;
+	const firstNextGroupEditableLocalIndex = nextGroupSegments.findIndex((s) => s.isEditable);
+	if (firstNextGroupEditableLocalIndex === -1) return;
+	context.set("activeIndex", index + 1);
+	context.set("activeSegmentIndex", offset + segments.length + firstNextGroupEditableLocalIndex);
+}
+function getActiveDisplayValue(ctx) {
+	const index = ctx.context.get("activeIndex");
+	return ctx.context.get("displayValues")[index];
+}
+function setDisplayValue(ctx, index, dv) {
+	const displayValues = [...ctx.context.get("displayValues")];
+	displayValues[index] = dv;
+	ctx.context.set("displayValues", displayValues);
+}
+//#endregion
+//#region src/machines/date-input/date-input.connect.ts
+function connect(service, normalize) {
+	const { state, context, prop, send, computed, scope } = service;
+	const disabled = Boolean(prop("disabled"));
+	const readOnly = Boolean(prop("readOnly"));
+	const invalid = Boolean(prop("invalid"));
+	const focused = state.matches("focused");
+	const separator = getLocaleSeparator(prop("locale"));
+	function getSegmentState(props) {
+		const { segment } = props;
+		return { editable: !disabled && !readOnly && segment.isEditable };
+	}
+	return {
+		focused,
+		disabled,
+		invalid,
+		groupCount: computed("segments").length,
+		value: context.get("value"),
+		valueAsDate: context.get("value").filter((date) => date != null).map((date) => date.toDate(prop("timeZone"))),
+		valueAsString: computed("valueAsString"),
+		placeholderValue: context.get("placeholderValue"),
+		displayValues: context.get("displayValues"),
+		setValue(values) {
+			send({
+				type: "VALUE.SET",
+				value: values
+			});
+		},
+		clearValue() {
+			send({ type: "VALUE.CLEAR" });
+		},
+		getSegments(props = {}) {
+			const { index = 0 } = props;
+			const allSegments = computed("segments");
+			const segments = allSegments[index] ?? [];
+			const enteredKeys = context.get("enteredKeys");
+			const activeIndex = context.get("activeIndex");
+			const activeSegmentIndex = context.get("activeSegmentIndex");
+			if (focused && enteredKeys && index === activeIndex && activeSegmentIndex >= 0) {
+				const localActiveSegmentIndex = activeSegmentIndex - getGroupOffset(allSegments, index);
+				return segments.map((seg, i) => {
+					if (i !== localActiveSegmentIndex) return seg;
+					return {
+						...seg,
+						text: enteredKeys,
+						isPlaceholder: false
+					};
+				});
+			}
+			return segments;
+		},
+		getSegmentState,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid)
+			});
+		},
+		getLabelProps(props = {}) {
+			const { index = 0 } = props;
+			return normalize.label({
+				...parts.label.attrs,
+				id: getLabelId(scope, index),
+				dir: prop("dir"),
+				htmlFor: getSegmentGroupId(scope, index),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getSegmentGroupProps(props = {}) {
+			const { index = 0 } = props;
+			return normalize.element({
+				...parts.segmentGroup.attrs,
+				id: getSegmentGroupId(scope, index),
+				dir: prop("dir"),
+				role: "group",
+				"aria-labelledby": getLabelId(scope, index),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused),
+				style: { unicodeBidi: "isolate" }
+			});
+		},
+		getSegmentProps(props) {
+			const { segment, index = 0 } = props;
+			const segmentState = getSegmentState(props);
+			if (segment.type === "literal") return normalize.element({
+				...parts.segment.attrs,
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-type": segment.type,
+				"data-readonly": dataAttr(true),
+				"data-disabled": dataAttr(true)
+			});
+			return normalize.element({
+				...parts.segment.attrs,
+				dir: prop("dir"),
+				role: "spinbutton",
+				tabIndex: disabled ? void 0 : 0,
+				autoComplete: "off",
+				spellCheck: segmentState.editable ? "false" : void 0,
+				autoCorrect: segmentState.editable ? "off" : void 0,
+				contentEditable: segmentState.editable,
+				suppressContentEditableWarning: segmentState.editable,
+				inputMode: disabled || segment.type === "dayPeriod" || segment.type === "era" || !segmentState.editable ? void 0 : "numeric",
+				enterKeyHint: "next",
+				"aria-label": getSegmentLabel(segment.type),
+				"aria-valuenow": segment.isPlaceholder ? void 0 : segment.value,
+				"aria-valuetext": segment.isPlaceholder ? segment.placeholder : segment.text,
+				"aria-valuemin": segment.minValue,
+				"aria-valuemax": segment.maxValue,
+				"aria-invalid": ariaAttr(invalid),
+				"aria-readonly": ariaAttr(!segment.isEditable || readOnly),
+				"aria-disabled": ariaAttr(disabled),
+				"data-value": segment.value,
+				"data-type": segment.type,
+				"data-readonly": dataAttr(!segment.isEditable || readOnly),
+				"data-disabled": dataAttr(disabled),
+				"data-editable": dataAttr(segment.isEditable && !readOnly && !disabled),
+				"data-placeholder": dataAttr(segment.isPlaceholder),
+				style: { caretColor: "transparent" },
+				onFocus(event) {
+					send({
+						type: "SEGMENT.FOCUS",
+						dateIndex: index,
+						segmentIndex: getSegmentEls(scope).indexOf(event.currentTarget)
+					});
+					const selection = event.currentTarget?.ownerDocument?.getSelection?.();
+					if (selection && event.currentTarget) selection.collapse(event.currentTarget);
+				},
+				onBlur() {
+					send({
+						type: "SEGMENT.BLUR",
+						index: -1
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || readOnly || event.nativeEvent.isComposing) return;
+					const exec = {
+						ArrowLeft() {
+							send({ type: "SEGMENT.ARROW_LEFT" });
+						},
+						ArrowRight() {
+							send({ type: "SEGMENT.ARROW_RIGHT" });
+						},
+						ArrowUp() {
+							send({
+								type: "SEGMENT.ADJUST",
+								segment,
+								amount: 1
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "SEGMENT.ADJUST",
+								segment,
+								amount: -1
+							});
+						},
+						PageUp() {
+							send({
+								type: "SEGMENT.ADJUST",
+								segment,
+								amount: PAGE_STEP[segment.type] ?? 1
+							});
+						},
+						PageDown() {
+							send({
+								type: "SEGMENT.ADJUST",
+								segment,
+								amount: -(PAGE_STEP[segment.type] ?? 1)
+							});
+						},
+						Backspace() {
+							send({
+								type: "SEGMENT.BACKSPACE",
+								segment
+							});
+						},
+						Delete() {
+							send({
+								type: "SEGMENT.BACKSPACE",
+								segment
+							});
+						},
+						Home() {
+							send({
+								type: "SEGMENT.HOME",
+								segment
+							});
+						},
+						End() {
+							send({
+								type: "SEGMENT.END",
+								segment
+							});
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+						event.stopPropagation();
+					}
+				},
+				onPointerDown(event) {
+					event.stopPropagation();
+				},
+				onMouseDown(event) {
+					event.stopPropagation();
+				},
+				onBeforeInput(event) {
+					const { data, inputType } = getNativeEvent(event);
+					if ([
+						"deleteContentBackward",
+						"deleteContentForward",
+						"deleteByCut",
+						"deleteByDrag"
+					].includes(inputType)) {
+						event.preventDefault();
+						return;
+					}
+					if (inputType === "insertFromPaste") {
+						event.preventDefault();
+						return;
+					}
+					if (inputType === "insertCompositionText") {
+						if (event.currentTarget || event.target) {
+							event.preventDefault();
+							if (data != null) send({
+								type: "SEGMENT.INPUT",
+								segment,
+								input: data
+							});
+						}
+						return;
+					}
+					const isTextSegment = segment.type === "dayPeriod" || segment.type === "era";
+					if (data && (isTextSegment || isValidCharacter(data, separator))) {
+						event.preventDefault();
+						send({
+							type: "SEGMENT.INPUT",
+							segment,
+							input: data
+						});
+					} else event.preventDefault();
+				},
+				onPaste(event) {
+					event.preventDefault();
+				}
+			});
+		},
+		getHiddenInputProps(props = {}) {
+			const { index = 0, name } = props;
+			const value = context.get("value");
+			const inputName = name || prop("name");
+			return normalize.input({
+				...parts.hiddenInput.attrs,
+				type: "hidden",
+				id: getHiddenInputId(scope, index),
+				name: inputName ? value.length > 1 ? `${inputName}[${index}]` : inputName : void 0,
+				form: prop("form"),
+				required: prop("required"),
+				disabled,
+				readOnly,
+				value: computed("valueAsString")[index] ?? "",
+				style: visuallyHiddenStyle
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/date-input/utils/incomplete-date.ts
+var IncompleteDate = class IncompleteDate {
+	constructor(calendar, hourCycle, dateValue) {
+		_defineProperty(this, "calendar", void 0);
+		_defineProperty(this, "era", void 0);
+		_defineProperty(this, "year", void 0);
+		_defineProperty(this, "month", void 0);
+		_defineProperty(this, "day", void 0);
+		_defineProperty(this, "hour", void 0);
+		_defineProperty(this, "hourCycle", void 0);
+		_defineProperty(this, "dayPeriod", void 0);
+		_defineProperty(this, "minute", void 0);
+		_defineProperty(this, "second", void 0);
+		_defineProperty(this, "millisecond", void 0);
+		_defineProperty(this, "offset", void 0);
+		this.era = dateValue?.era ?? null;
+		this.calendar = calendar;
+		this.year = dateValue?.year ?? null;
+		this.month = dateValue?.month ?? null;
+		this.day = dateValue?.day ?? null;
+		this.hour = dateValue?.hour ?? null;
+		this.hourCycle = hourCycle;
+		this.dayPeriod = null;
+		this.minute = dateValue?.minute ?? null;
+		this.second = dateValue?.second ?? null;
+		this.millisecond = dateValue?.millisecond ?? null;
+		this.offset = "offset" in (dateValue ?? {}) ? dateValue.offset : null;
+		if (this.hour != null) {
+			const [dayPeriod, hour] = toHourCycle(this.hour, hourCycle);
+			this.dayPeriod = dayPeriod;
+			this.hour = hour;
+		}
+	}
+	copy() {
+		const res = new IncompleteDate(this.calendar, this.hourCycle);
+		res.era = this.era;
+		res.year = this.year;
+		res.month = this.month;
+		res.day = this.day;
+		res.hour = this.hour;
+		res.dayPeriod = this.dayPeriod;
+		res.minute = this.minute;
+		res.second = this.second;
+		res.millisecond = this.millisecond;
+		res.offset = this.offset;
+		return res;
+	}
+	isComplete(segments) {
+		return segments.every((segment) => this[segment] != null);
+	}
+	isCleared(segments) {
+		return segments.every((segment) => this[segment] === null);
+	}
+	set(field, value, placeholder) {
+		const result = this.copy();
+		result[field] = value;
+		if (field === "hour" && result.dayPeriod == null && "hour" in placeholder) result.dayPeriod = toHourCycle(placeholder.hour, this.hourCycle)[0];
+		if (field === "year" && result.era == null) result.era = placeholder.era;
+		if (field !== "second" && field !== "literal" && field !== "timeZoneName") result.offset = null;
+		return result;
+	}
+	clear(field) {
+		const result = this.copy();
+		result[field] = null;
+		if (field === "year") result.era = null;
+		result.offset = null;
+		return result;
+	}
+	cycle(field, amount, placeholder, displaySegments) {
+		const res = this.copy();
+		if (res[field] == null && field !== "dayPeriod" && field !== "era") {
+			if (field === "hour" && "hour" in placeholder) {
+				const [dayPeriod, hour] = toHourCycle(placeholder.hour, this.hourCycle);
+				res.dayPeriod = dayPeriod;
+				res.hour = hour;
+			} else res[field] = placeholder[field];
+			if (field === "year" && res.era == null) res.era = placeholder.era;
+			return res;
+		}
+		switch (field) {
+			case "era": {
+				const eras = this.calendar.getEras();
+				let index = eras.indexOf(res.era);
+				index = cycleValue(index, amount, 0, eras.length - 1);
+				res.era = eras[index];
+				break;
+			}
+			case "year": {
+				let date = new CalendarDate(this.calendar, this.era ?? placeholder.era, this.year ?? placeholder.year, this.month ?? 1, this.day ?? 1);
+				date = date.cycle(field, amount, { round: field === "year" });
+				res.era = date.era;
+				res.year = date.year;
+				break;
+			}
+			case "month":
+				res.month = cycleValue(res.month ?? 1, amount, 1, this.calendar.getMaximumMonthsInYear());
+				break;
+			case "day":
+				res.day = cycleValue(res.day ?? 1, amount, 1, this.calendar.getMaximumDaysInMonth());
+				break;
+			case "hour": {
+				const hasDateSegments = displaySegments.some((s) => [
+					"year",
+					"month",
+					"day"
+				].includes(s));
+				if ("timeZone" in placeholder && (!hasDateSegments || res.year != null && res.month != null && res.day != null)) {
+					let date = this.toValue(placeholder);
+					date = date.cycle("hour", amount, {
+						hourCycle: this.hourCycle === "h12" ? 12 : 24,
+						round: false
+					});
+					const [dayPeriod, adjustedHour] = toHourCycle(date.hour, this.hourCycle);
+					res.hour = adjustedHour;
+					res.dayPeriod = dayPeriod;
+					res.offset = date.offset;
+				} else {
+					const hours = res.hour ?? 0;
+					const limits = this.getSegmentLimits("hour");
+					res.hour = cycleValue(hours, amount, limits.minValue, limits.maxValue);
+					if (res.dayPeriod == null && "hour" in placeholder) res.dayPeriod = toHourCycle(placeholder.hour, this.hourCycle)[0];
+				}
+				break;
+			}
+			case "dayPeriod":
+				res.dayPeriod = cycleValue(res.dayPeriod ?? 0, amount, 0, 1);
+				break;
+			case "minute":
+				res.minute = cycleValue(res.minute ?? 0, amount, 0, 59, true);
+				break;
+			case "second":
+				res.second = cycleValue(res.second ?? 0, amount, 0, 59, true);
+				break;
+		}
+		return res;
+	}
+	toValue(value) {
+		if ("hour" in value) {
+			let hour = this.hour;
+			if (hour != null) hour = fromHourCycle(hour, this.dayPeriod ?? 0, this.hourCycle);
+			else if (this.hourCycle === "h12" || this.hourCycle === "h11") hour = this.dayPeriod === 1 ? 12 : 0;
+			const res = value.set({
+				era: this.era ?? value.era,
+				year: this.year ?? value.year,
+				month: this.month ?? value.month,
+				day: this.day ?? value.day,
+				hour: hour ?? value.hour,
+				minute: this.minute ?? value.minute,
+				second: this.second ?? value.second,
+				millisecond: this.millisecond ?? value.millisecond
+			});
+			if ("offset" in res && this.offset != null && res.offset !== this.offset) return res.add({ milliseconds: res.offset - this.offset });
+			return res;
+		} else return value.set({
+			era: this.era ?? value.era,
+			year: this.year ?? value.year,
+			month: this.month ?? value.month,
+			day: this.day ?? value.day
+		});
+	}
+	getSegmentLimits(type) {
+		switch (type) {
+			case "era": {
+				const eras = this.calendar.getEras();
+				return {
+					value: this.era != null ? eras.indexOf(this.era) : eras.length - 1,
+					minValue: 0,
+					maxValue: eras.length - 1
+				};
+			}
+			case "year": return {
+				value: this.year,
+				minValue: 1,
+				maxValue: 9999
+			};
+			case "month": return {
+				value: this.month,
+				minValue: 1,
+				maxValue: this.calendar.getMaximumMonthsInYear()
+			};
+			case "day": return {
+				value: this.day,
+				minValue: 1,
+				maxValue: this.calendar.getMaximumDaysInMonth()
+			};
+			case "dayPeriod": return {
+				value: this.dayPeriod,
+				minValue: 0,
+				maxValue: 1
+			};
+			case "hour": {
+				let minValue = 0;
+				let maxValue = 23;
+				if (this.hourCycle === "h12") {
+					minValue = 1;
+					maxValue = 12;
+				} else if (this.hourCycle === "h11") {
+					minValue = 0;
+					maxValue = 11;
+				}
+				return {
+					value: this.hour,
+					minValue,
+					maxValue
+				};
+			}
+			case "minute": return {
+				value: this.minute,
+				minValue: 0,
+				maxValue: 59
+			};
+			case "second": return {
+				value: this.second,
+				minValue: 0,
+				maxValue: 59
+			};
+		}
+	}
+	toString() {
+		const fields = {
+			era: this.era,
+			year: this.year,
+			month: this.month,
+			day: this.day,
+			hour: this.hour,
+			dayPeriod: this.dayPeriod,
+			minute: this.minute,
+			second: this.second
+		};
+		const parts = Object.entries(fields).filter(([, v]) => v != null).map(([k, v]) => `${k}=${v}`);
+		return parts.length > 0 ? parts.join(",") : "-";
+	}
+};
+function cycleValue(value, amount, min, max, round = false) {
+	if (round) {
+		value += Math.sign(amount);
+		if (value < min) value = max;
+		const div = Math.abs(amount);
+		if (amount > 0) value = Math.ceil(value / div) * div;
+		else value = Math.floor(value / div) * div;
+		if (value > max) value = min;
+	} else {
+		value += amount;
+		if (value < min) value = max - (min - value - 1);
+		else if (value > max) value = min + (value - max - 1);
+	}
+	return value;
+}
+function toHourCycle(hour, hourCycle) {
+	let dayPeriod = hour >= 12 ? 1 : 0;
+	switch (hourCycle) {
+		case "h11":
+			if (hour >= 12) hour -= 12;
+			break;
+		case "h12":
+			if (hour === 0) hour = 12;
+			else if (hour > 12) hour -= 12;
+			break;
+		case "h23":
+			dayPeriod = null;
+			break;
+		case "h24":
+			hour += 1;
+			dayPeriod = null;
+	}
+	return [dayPeriod, hour];
+}
+function fromHourCycle(hour, dayPeriod, hourCycle) {
+	switch (hourCycle) {
+		case "h11":
+			if (dayPeriod === 1) hour += 12;
+			break;
+		case "h12":
+			if (hour === 12) hour = 0;
+			if (dayPeriod === 1) hour += 12;
+			break;
+		case "h24":
+			hour -= 1;
+			break;
+	}
+	return hour;
+}
+//#endregion
+//#region src/machines/date-input/utils/input.ts
+function isNumberString(value) {
+	return !Number.isNaN(Number.parseInt(value));
+}
+function updateSegmentValue(ctx, segment, input) {
+	const { context, prop } = ctx;
+	const type = segment.type;
+	const index = context.get("activeIndex");
+	const formatter = prop("formatter");
+	const enteredKeys = context.get("enteredKeys");
+	const placeholderValue = context.get("placeholderValue");
+	let dv = getActiveDisplayValue(ctx);
+	switch (type) {
+		case "dayPeriod": {
+			if (!("hour" in dv.toValue(placeholderValue))) return;
+			const amPmFormatter = new DateFormatter(prop("locale"), {
+				hour: "numeric",
+				hour12: true
+			});
+			const amDate = /* @__PURE__ */ new Date();
+			amDate.setHours(0);
+			const pmDate = /* @__PURE__ */ new Date();
+			pmDate.setHours(12);
+			const am = amPmFormatter.formatToParts(amDate).find((p) => p.type === "dayPeriod")?.value || "AM";
+			const pm = amPmFormatter.formatToParts(pmDate).find((p) => p.type === "dayPeriod")?.value || "PM";
+			const lowerInput = input.toLowerCase();
+			if (am.toLowerCase().startsWith(lowerInput)) setDisplayValue(ctx, index, dv.set("dayPeriod", 0, placeholderValue));
+			else if (pm.toLowerCase().startsWith(lowerInput)) setDisplayValue(ctx, index, dv.set("dayPeriod", 12, placeholderValue));
+			else break;
+			advanceToNextSegment(ctx);
+			break;
+		}
+		case "era": {
+			const eras = dv.calendar.getEras();
+			const eraFormatter = new DateFormatter(prop("locale"), { era: "short" });
+			const lowerInput = input.toLowerCase();
+			for (let i = 0; i < eras.length; i++) {
+				const eraDate = dv.toValue(placeholderValue).set({ year: 1 }).toDate(prop("timeZone"));
+				const formattedEra = eraFormatter.formatToParts(eraDate).find((p) => p.type === "era")?.value;
+				if (formattedEra && formattedEra.toLowerCase().startsWith(lowerInput)) {
+					setDisplayValue(ctx, index, dv.set("era", eras[i], placeholderValue));
+					advanceToNextSegment(ctx);
+					break;
+				}
+			}
+			break;
+		}
+		case "day":
+		case "hour":
+		case "minute":
+		case "second":
+		case "month":
+		case "year": {
+			let newValue = enteredKeys + input;
+			let numberValue = Number.parseInt(newValue);
+			let segmentValue = numberValue;
+			let allowsZero = segment.minValue === 0;
+			if (!isNumberString(input)) return;
+			if (segment.type === "hour" && formatter.resolvedOptions().hour12) {
+				switch (formatter.resolvedOptions().hourCycle) {
+					case "h11":
+						if (numberValue > 11) segmentValue = Number.parseInt(input);
+						break;
+					case "h12":
+						allowsZero = false;
+						if (numberValue > 12) segmentValue = Number.parseInt(input);
+						break;
+				}
+				if (segment.value !== void 0 && segment.value >= 12 && numberValue > 1) numberValue += 12;
+			} else if (segment.maxValue !== void 0 && numberValue > segment.maxValue) segmentValue = Number.parseInt(input);
+			if (isNaN(numberValue)) return;
+			const shouldSetValue = segmentValue !== 0 || allowsZero;
+			if (shouldSetValue) {
+				dv = dv.set(type, segmentValue, placeholderValue);
+				setDisplayValue(ctx, index, dv);
+			}
+			if (segment.maxValue !== void 0 && (Number(numberValue + "0") > segment.maxValue || newValue.length >= String(segment.maxValue).length)) {
+				context.set("enteredKeys", "");
+				if (shouldSetValue) advanceToNextSegment(ctx);
+			} else context.set("enteredKeys", newValue);
+			break;
+		}
+	}
+}
+//#endregion
+//#region src/machines/date-input/utils/placeholders.ts
+const LOCALE_PLACEHOLDERS = {
+	ach: {
+		year: "mwaka",
+		month: "dwe",
+		day: "nino"
+	},
+	af: {
+		year: "jjjj",
+		month: "mm",
+		day: "dd"
+	},
+	am: {
+		year: "ዓዓዓዓ",
+		month: "ሚሜ",
+		day: "ቀቀ"
+	},
+	an: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	ar: {
+		year: "سنة",
+		month: "شهر",
+		day: "يوم"
+	},
+	ast: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	az: {
+		year: "iiii",
+		month: "aa",
+		day: "gg"
+	},
+	be: {
+		year: "гггг",
+		month: "мм",
+		day: "дд"
+	},
+	bg: {
+		year: "гггг",
+		month: "мм",
+		day: "дд"
+	},
+	bn: {
+		year: "yyyy",
+		month: "মিমি",
+		day: "dd"
+	},
+	br: {
+		year: "bbbb",
+		month: "mm",
+		day: "dd"
+	},
+	bs: {
+		year: "gggg",
+		month: "mm",
+		day: "dd"
+	},
+	ca: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	cak: {
+		year: "jjjj",
+		month: "ii",
+		day: "q'q'"
+	},
+	ckb: {
+		year: "ساڵ",
+		month: "مانگ",
+		day: "ڕۆژ"
+	},
+	cs: {
+		year: "rrrr",
+		month: "mm",
+		day: "dd"
+	},
+	cy: {
+		year: "bbbb",
+		month: "mm",
+		day: "dd"
+	},
+	da: {
+		year: "åååå",
+		month: "mm",
+		day: "dd"
+	},
+	de: {
+		year: "jjjj",
+		month: "mm",
+		day: "tt"
+	},
+	dsb: {
+		year: "llll",
+		month: "mm",
+		day: "źź"
+	},
+	el: {
+		year: "εεεε",
+		month: "μμ",
+		day: "ηη"
+	},
+	en: {
+		year: "yyyy",
+		month: "mm",
+		day: "dd"
+	},
+	eo: {
+		year: "jjjj",
+		month: "mm",
+		day: "tt"
+	},
+	es: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	et: {
+		year: "aaaa",
+		month: "kk",
+		day: "pp"
+	},
+	eu: {
+		year: "uuuu",
+		month: "hh",
+		day: "ee"
+	},
+	fa: {
+		year: "سال",
+		month: "ماه",
+		day: "روز"
+	},
+	ff: {
+		year: "hhhh",
+		month: "ll",
+		day: "ññ"
+	},
+	fi: {
+		year: "vvvv",
+		month: "kk",
+		day: "pp"
+	},
+	fr: {
+		year: "aaaa",
+		month: "mm",
+		day: "jj"
+	},
+	fy: {
+		year: "jjjj",
+		month: "mm",
+		day: "dd"
+	},
+	ga: {
+		year: "bbbb",
+		month: "mm",
+		day: "ll"
+	},
+	gd: {
+		year: "bbbb",
+		month: "mm",
+		day: "ll"
+	},
+	gl: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	he: {
+		year: "שנה",
+		month: "חודש",
+		day: "יום"
+	},
+	hr: {
+		year: "gggg",
+		month: "mm",
+		day: "dd"
+	},
+	hsb: {
+		year: "llll",
+		month: "mm",
+		day: "dd"
+	},
+	hu: {
+		year: "éééé",
+		month: "hh",
+		day: "nn"
+	},
+	ia: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	id: {
+		year: "tttt",
+		month: "bb",
+		day: "hh"
+	},
+	it: {
+		year: "aaaa",
+		month: "mm",
+		day: "gg"
+	},
+	ja: {
+		year: "年",
+		month: "月",
+		day: "日"
+	},
+	ka: {
+		year: "წწწწ",
+		month: "თთ",
+		day: "რრ"
+	},
+	kk: {
+		year: "жжжж",
+		month: "аа",
+		day: "кк"
+	},
+	kn: {
+		year: "ವವವವ",
+		month: "ಮಿಮೀ",
+		day: "ದಿದಿ"
+	},
+	ko: {
+		year: "연도",
+		month: "월",
+		day: "일"
+	},
+	lb: {
+		year: "jjjj",
+		month: "mm",
+		day: "dd"
+	},
+	lo: {
+		year: "ປປປປ",
+		month: "ດດ",
+		day: "ວວ"
+	},
+	lt: {
+		year: "mmmm",
+		month: "mm",
+		day: "dd"
+	},
+	lv: {
+		year: "gggg",
+		month: "mm",
+		day: "dd"
+	},
+	meh: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	ml: {
+		year: "വർഷം",
+		month: "മാസം",
+		day: "തീയതി"
+	},
+	ms: {
+		year: "tttt",
+		month: "mm",
+		day: "hh"
+	},
+	nl: {
+		year: "jjjj",
+		month: "mm",
+		day: "dd"
+	},
+	nn: {
+		year: "åååå",
+		month: "mm",
+		day: "dd"
+	},
+	no: {
+		year: "åååå",
+		month: "mm",
+		day: "dd"
+	},
+	oc: {
+		year: "aaaa",
+		month: "mm",
+		day: "jj"
+	},
+	pl: {
+		year: "rrrr",
+		month: "mm",
+		day: "dd"
+	},
+	pt: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	rm: {
+		year: "oooo",
+		month: "mm",
+		day: "dd"
+	},
+	ro: {
+		year: "aaaa",
+		month: "ll",
+		day: "zz"
+	},
+	ru: {
+		year: "гггг",
+		month: "мм",
+		day: "дд"
+	},
+	sc: {
+		year: "aaaa",
+		month: "mm",
+		day: "dd"
+	},
+	scn: {
+		year: "aaaa",
+		month: "mm",
+		day: "jj"
+	},
+	sk: {
+		year: "rrrr",
+		month: "mm",
+		day: "dd"
+	},
+	sl: {
+		year: "llll",
+		month: "mm",
+		day: "dd"
+	},
+	sr: {
+		year: "гггг",
+		month: "мм",
+		day: "дд"
+	},
+	sv: {
+		year: "åååå",
+		month: "mm",
+		day: "dd"
+	},
+	szl: {
+		year: "rrrr",
+		month: "mm",
+		day: "dd"
+	},
+	tg: {
+		year: "сссс",
+		month: "мм",
+		day: "рр"
+	},
+	th: {
+		year: "ปปปป",
+		month: "ดด",
+		day: "วว"
+	},
+	tr: {
+		year: "yyyy",
+		month: "aa",
+		day: "gg"
+	},
+	uk: {
+		year: "рррр",
+		month: "мм",
+		day: "дд"
+	},
+	"zh-CN": {
+		year: "年",
+		month: "月",
+		day: "日"
+	},
+	"zh-TW": {
+		year: "年",
+		month: "月",
+		day: "日"
+	}
+};
+function getLocaleLanguage(locale) {
+	if (typeof Intl !== "undefined" && Intl.Locale) return new Intl.Locale(locale).language;
+	return locale.split("-")[0];
+}
+function getLocalePlaceholders(locale) {
+	if (locale in LOCALE_PLACEHOLDERS) return LOCALE_PLACEHOLDERS[locale];
+	const lang = getLocaleLanguage(locale);
+	if (lang in LOCALE_PLACEHOLDERS) return LOCALE_PLACEHOLDERS[lang];
+	return LOCALE_PLACEHOLDERS.en;
+}
+const defaultTranslations = { placeholder(locale) {
+	const localized = getLocalePlaceholders(locale);
+	return {
+		day: localized.day,
+		month: localized.month,
+		year: localized.year,
+		hour: "––",
+		minute: "––",
+		second: "––",
+		dayPeriod: "AM/PM",
+		era: "era",
+		timeZoneName: "timeZone",
+		weekday: "weekday",
+		unknown: "unknown",
+		fractionalSecond: "ff"
+	};
+} };
+//#endregion
+//#region src/machines/date-input/utils/formatting.ts
+function getValueAsString(value, prop) {
+	return value.map((date) => {
+		if (date == null) return "";
+		try {
+			return prop("format")(date, {
+				locale: prop("locale"),
+				timeZone: prop("timeZone")
+			});
+		} catch {
+			return "";
+		}
+	});
+}
+//#endregion
+//#region src/machines/date-input/date-input.machine.ts
+function resolvedHourCycle(formatter) {
+	const hc = formatter.resolvedOptions().hourCycle;
+	if (hc === "h11" || hc === "h12" || hc === "h23" || hc === "h24") return hc;
+	return "h23";
+}
+function initDisplayValues(value, placeholderValue, hourCycle, count) {
+	const calendar = placeholderValue.calendar;
+	if (value?.length) return Array.from({ length: count }, (_, i) => value[i] ? new IncompleteDate(calendar, hourCycle, value[i]) : new IncompleteDate(calendar, hourCycle));
+	return Array.from({ length: count }, () => new IncompleteDate(calendar, hourCycle));
+}
+function incompleteDateHash(dv) {
+	return `${dv.year}|${dv.month}|${dv.day}|${dv.hour}|${dv.dayPeriod}|${dv.minute}|${dv.second}|${dv.era}`;
+}
+function incompleteDateEqual(a, b) {
+	return incompleteDateHash(a) === incompleteDateHash(b);
+}
+const machine = createMachine({
+	props({ props }) {
+		const locale = props.locale || "en-US";
+		const timeZone = props.timeZone || "UTC";
+		const selectionMode = props.selectionMode || "single";
+		const granularity = props.granularity || "day";
+		const translations = {
+			...defaultTranslations,
+			...props.translations
+		};
+		const defaultValue = props.defaultValue ? props.defaultValue.map((date) => constrainValue(date, props.min, props.max)) : void 0;
+		const value = props.value ? props.value.map((date) => constrainValue(date, props.min, props.max)) : void 0;
+		let placeholderValue = props.placeholderValue || props.defaultPlaceholderValue || value?.[0] || defaultValue?.[0] || getTodayDate(timeZone);
+		placeholderValue = constrainValue(placeholderValue, props.min, props.max);
+		if ((granularity === "hour" || granularity === "minute" || granularity === "second") && !("hour" in placeholderValue)) placeholderValue = toCalendarDateTime(placeholderValue);
+		const hourCycle = props.hourCycle === 12 ? "h12" : props.hourCycle === 24 ? "h23" : void 0;
+		const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? false;
+		const digitStyle = shouldForceLeadingZeros ? "2-digit" : "numeric";
+		const formatterOptions = {
+			timeZone,
+			day: digitStyle,
+			month: digitStyle,
+			year: "numeric",
+			hourCycle
+		};
+		if (granularity === "hour" || granularity === "minute" || granularity === "second") formatterOptions.hour = digitStyle;
+		if (granularity === "minute" || granularity === "second") formatterOptions.minute = "2-digit";
+		if (granularity === "second") formatterOptions.second = "2-digit";
+		const formatter = props.formatter ?? new DateFormatter(locale, formatterOptions);
+		const allSegments = props.allSegments ?? (() => {
+			const segs = formatter.formatToParts(/* @__PURE__ */ new Date()).filter((seg) => EDITABLE_SEGMENTS[seg.type]).reduce((p, seg) => {
+				const key = TYPE_MAPPING[seg.type] || seg.type;
+				p[key] = true;
+				return p;
+			}, {});
+			segs.era = true;
+			return segs;
+		})();
+		return {
+			locale,
+			timeZone,
+			selectionMode,
+			format(date, { timeZone }) {
+				const jsd = date.toDate(timeZone);
+				if (date.calendar?.identifier === "gregory" && date.era === "BC") {
+					const prolYear = jsd.getUTCFullYear();
+					const safeDate = new Date(Date.UTC(2e3, jsd.getUTCMonth(), jsd.getUTCDate()));
+					return formatter.formatToParts(safeDate).map((p) => p.type === "year" ? String(prolYear) : p.value).join("");
+				}
+				return formatter.format(jsd);
+			},
+			...props,
+			translations,
+			value,
+			defaultValue: defaultValue ?? [],
+			granularity,
+			shouldForceLeadingZeros,
+			formatter,
+			placeholderValue: typeof props.placeholderValue === "undefined" ? void 0 : placeholderValue,
+			defaultPlaceholderValue: placeholderValue,
+			allSegments
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	refs() {
+		return {
+			announcer: null,
+			segmentToAnnounceIndex: null
+		};
+	},
+	effects: ["setupLiveRegion"],
+	context({ prop, bindable }) {
+		const hc = resolvedHourCycle(prop("formatter"));
+		const placeholderValue = prop("defaultPlaceholderValue");
+		const groupCount = prop("selectionMode") === "range" ? 2 : 1;
+		const initialValue = prop("value") || prop("defaultValue");
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual(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;
+				},
+				hash: (v) => v.map((date) => date?.toString() ?? "").join(","),
+				onChange(value) {
+					const valueAsString = getValueAsString(value, prop);
+					prop("onValueChange")?.({
+						value,
+						valueAsString
+					});
+				}
+			})),
+			activeIndex: bindable(() => ({
+				defaultValue: 0,
+				sync: true
+			})),
+			activeSegmentIndex: bindable(() => ({
+				defaultValue: -1,
+				sync: true
+			})),
+			placeholderValue: bindable(() => ({
+				defaultValue: prop("defaultPlaceholderValue"),
+				isEqual: isDateEqual,
+				hash: (v) => v.toString(),
+				onChange(placeholderValue) {
+					prop("onPlaceholderChange")?.({
+						value: prop("value") ?? [],
+						valueAsString: [],
+						placeholderValue
+					});
+				}
+			})),
+			displayValues: bindable(() => ({
+				defaultValue: initDisplayValues(initialValue, placeholderValue ?? getTodayDate(prop("timeZone")), hc, groupCount),
+				isEqual: (a, b) => b != null && a.length === b.length && a.every((d, i) => incompleteDateEqual(d, b[i])),
+				hash: (v) => v.map(incompleteDateHash).join("||")
+			})),
+			enteredKeys: bindable(() => ({
+				defaultValue: "",
+				sync: true
+			}))
+		};
+	},
+	computed: {
+		isInteractive: ({ prop }) => !prop("disabled") && !prop("readOnly"),
+		valueAsString: ({ context, prop }) => getValueAsString(context.get("value"), prop),
+		segments: memo(({ context, prop }) => [
+			context.hash("value"),
+			prop("selectionMode"),
+			context.hash("placeholderValue"),
+			context.hash("displayValues"),
+			prop("allSegments"),
+			prop("timeZone"),
+			prop("translations"),
+			prop("granularity"),
+			prop("formatter"),
+			prop("locale")
+		], (_deps, { context, prop }) => {
+			const value = context.get("value");
+			const selectionMode = prop("selectionMode");
+			const placeholderValue = context.get("placeholderValue");
+			const displayValues = context.get("displayValues");
+			const allSegments = prop("allSegments");
+			const timeZone = prop("timeZone");
+			const translations = prop("translations") || defaultTranslations;
+			const granularity = prop("granularity");
+			const formatter = prop("formatter");
+			const locale = prop("locale");
+			const allSegmentTypes = Object.keys(allSegments);
+			const groupCount = selectionMode === "range" ? 2 : 1;
+			return Array.from({ length: groupCount }, (_, i) => {
+				const dv = displayValues[i] ?? new IncompleteDate(placeholderValue.calendar, resolvedHourCycle(formatter));
+				const committedValue = value?.[i];
+				const displayDate = committedValue && dv.isComplete(allSegmentTypes) ? committedValue : dv.toValue(placeholderValue);
+				const segmentFormatter = dv.era === "BC" && dv.calendar.identifier === "gregory" ? new DateFormatter(locale, {
+					...formatter.resolvedOptions(),
+					era: "short"
+				}) : formatter;
+				return processSegments({
+					dateValue: displayDate.toDate(timeZone),
+					displayValue: dv,
+					formatter: segmentFormatter,
+					locale,
+					translations,
+					granularity
+				});
+			});
+		})
+	},
+	watch({ track, context, prop, action }) {
+		track([() => context.hash("value")], () => {
+			action(["syncDisplayValues"]);
+		});
+		track([() => context.get("activeSegmentIndex")], () => {
+			action(["focusActiveSegment"]);
+		});
+		track([() => prop("placeholderValue")?.toString()], () => {
+			action(["syncPlaceholderProp"]);
+		});
+	},
+	on: {
+		"VALUE.SET": { actions: ["setDateValue"] },
+		"VALUE.CLEAR": { actions: [
+			"clearDateValue",
+			"clearDisplayValues",
+			"clearEnteredKeys"
+		] }
+	},
+	states: {
+		idle: { on: { "SEGMENT.FOCUS": {
+			target: "focused",
+			actions: ["setActiveSegmentIndex", "invokeOnFocus"]
+		} } },
+		focused: { on: {
+			"SEGMENT.FOCUS": { actions: ["setActiveSegmentIndex", "clearEnteredKeys"] },
+			"SEGMENT.BLUR": {
+				target: "idle",
+				actions: [
+					"confirmPlaceholder",
+					"clearEnteredKeys",
+					"invokeOnBlur"
+				]
+			},
+			"SEGMENT.INPUT": { actions: ["setSegmentValue", "announceSegmentValue"] },
+			"SEGMENT.ADJUST": { actions: [
+				"invokeOnSegmentAdjust",
+				"clearEnteredKeys",
+				"announceSegmentValue"
+			] },
+			"SEGMENT.ARROW_LEFT": { actions: ["setPreviousActiveSegmentIndex", "clearEnteredKeys"] },
+			"SEGMENT.ARROW_RIGHT": { actions: ["setNextActiveSegmentIndex", "clearEnteredKeys"] },
+			"SEGMENT.BACKSPACE": [{
+				guard: "isActiveSegmentPlaceholder",
+				actions: ["setPreviousActiveSegmentIndex", "clearEnteredKeys"]
+			}, { actions: [
+				"clearSegmentValue",
+				"clearEnteredKeys",
+				"announceSegmentValue"
+			] }],
+			"SEGMENT.HOME": { actions: [
+				"setSegmentToLowestValue",
+				"clearEnteredKeys",
+				"announceSegmentValue"
+			] },
+			"SEGMENT.END": { actions: [
+				"setSegmentToHighestValue",
+				"clearEnteredKeys",
+				"announceSegmentValue"
+			] }
+		} }
+	},
+	implementations: {
+		effects: { setupLiveRegion({ scope, refs }) {
+			const liveRegion = createLiveRegion({
+				level: "assertive",
+				document: scope.getDoc()
+			});
+			refs.set("announcer", liveRegion);
+			return () => liveRegion.destroy();
+		} },
+		guards: { isActiveSegmentPlaceholder: (ctx) => {
+			if (ctx.context.get("enteredKeys") !== "") return false;
+			return getActiveSegment(ctx)?.isPlaceholder === true;
+		} },
+		actions: {
+			invokeOnFocus({ prop }) {
+				prop("onFocusChange")?.({ focused: true });
+			},
+			invokeOnBlur({ prop }) {
+				prop("onFocusChange")?.({ focused: false });
+			},
+			setActiveSegmentIndex({ context, event }) {
+				if (event.dateIndex != null) context.set("activeIndex", event.dateIndex);
+				context.set("activeSegmentIndex", event.segmentIndex);
+			},
+			clearDisplayValues({ context, prop }) {
+				const hc = resolvedHourCycle(prop("formatter"));
+				const placeholderValue = context.get("placeholderValue");
+				const count = prop("selectionMode") === "range" ? 2 : 1;
+				context.set("displayValues", Array.from({ length: count }, () => new IncompleteDate(placeholderValue.calendar, hc)));
+			},
+			clearEnteredKeys({ context }) {
+				context.set("enteredKeys", "");
+			},
+			setPreviousActiveSegmentIndex(ctx) {
+				const { context } = ctx;
+				const index = context.get("activeIndex");
+				const { allSegments, segments, offset, localIndex } = resolveActiveSegment(ctx);
+				const prevLocalIndex = segments.findLastIndex((segment, i) => i < localIndex && segment.isEditable);
+				if (prevLocalIndex !== -1) {
+					context.set("activeSegmentIndex", offset + prevLocalIndex);
+					return;
+				}
+				const prevGroupIndex = index - 1;
+				if (prevGroupIndex < 0) return;
+				const prevGroupSegments = allSegments[prevGroupIndex];
+				if (!prevGroupSegments) return;
+				const lastPrevGroupEditableLocalIndex = prevGroupSegments.findLastIndex((s) => s.isEditable);
+				if (lastPrevGroupEditableLocalIndex === -1) return;
+				context.set("activeIndex", prevGroupIndex);
+				context.set("activeSegmentIndex", getGroupOffset(allSegments, prevGroupIndex) + lastPrevGroupEditableLocalIndex);
+			},
+			setNextActiveSegmentIndex(ctx) {
+				const { context } = ctx;
+				const { segments, offset, localIndex } = resolveActiveSegment(ctx);
+				const nextLocalIndex = segments.findIndex((segment, i) => i > localIndex && segment.isEditable);
+				if (nextLocalIndex === -1) return;
+				context.set("activeSegmentIndex", offset + nextLocalIndex);
+			},
+			focusActiveSegment({ scope, context }) {
+				raf(() => {
+					getSegmentEls(scope)[context.get("activeSegmentIndex")]?.focus({ preventScroll: true });
+				});
+			},
+			clearSegmentValue(params) {
+				const { context, prop, event } = params;
+				const index = context.get("activeIndex");
+				const allSegments = prop("allSegments");
+				const allSegmentTypes = Object.keys(allSegments);
+				const placeholderValue = context.get("placeholderValue");
+				const segment = getActiveSegment(params) ?? event.segment;
+				const type = segment.type;
+				let dv = getActiveDisplayValue(params);
+				if (type === "dayPeriod") {
+					const cleared = dv.clear(type);
+					setDisplayValue(params, index, cleared);
+					if (cleared.isCleared(allSegmentTypes)) commitClear(params, index);
+					return;
+				}
+				if (type === "hour") {
+					const cleared = dv.clear(type);
+					setDisplayValue(params, index, cleared);
+					if (cleared.isCleared(allSegmentTypes)) commitClear(params, index);
+					return;
+				}
+				const enteredKeys = context.get("enteredKeys");
+				const newValue = (enteredKeys !== "" ? enteredKeys : segment.text).slice(0, -1);
+				if (newValue === "" || newValue === "0") {
+					const cleared = dv.clear(type);
+					setDisplayValue(params, index, cleared);
+					if (cleared.isCleared(allSegmentTypes)) commitClear(params, index);
+				} else {
+					dv = dv.set(type, Number(newValue), placeholderValue);
+					setDisplayValue(params, index, dv);
+					if (dv.isComplete(allSegmentTypes)) commitValue(params, index, dv);
+				}
+			},
+			invokeOnSegmentAdjust(params) {
+				const { context, prop, event } = params;
+				const { segment, amount } = event;
+				const type = segment.type;
+				const index = context.get("activeIndex");
+				const allSegments = prop("allSegments");
+				const allSegmentTypes = Object.keys(allSegments);
+				const placeholderValue = context.get("placeholderValue");
+				const displaySegmentTypes = allSegmentTypes;
+				const next = getActiveDisplayValue(params).cycle(type, amount, placeholderValue, displaySegmentTypes);
+				setDisplayValue(params, index, next);
+				if (next.isComplete(allSegmentTypes)) commitValue(params, index, next);
+			},
+			setSegmentValue(params) {
+				const { event, context, refs } = params;
+				const { segment, input } = event;
+				refs.set("segmentToAnnounceIndex", context.get("activeSegmentIndex"));
+				const index = context.get("activeIndex");
+				updateSegmentValue(params, segment, input);
+				const allSegmentTypes = Object.keys(params.prop("allSegments"));
+				const dv = context.get("displayValues")[index];
+				if (dv && dv.isComplete(allSegmentTypes)) commitValue(params, index, dv);
+			},
+			setSegmentToLowestValue(params) {
+				const { event, context, prop } = params;
+				const { segment } = event;
+				const index = context.get("activeIndex");
+				const allSegmentTypes = Object.keys(prop("allSegments"));
+				const placeholderValue = context.get("placeholderValue");
+				if (segment.minValue == null) return;
+				const dv = getActiveDisplayValue(params).set(segment.type, segment.minValue, placeholderValue);
+				setDisplayValue(params, index, dv);
+				if (dv.isComplete(allSegmentTypes)) commitValue(params, index, dv);
+			},
+			setSegmentToHighestValue(params) {
+				const { event, context, prop } = params;
+				const { segment } = event;
+				const index = context.get("activeIndex");
+				const allSegmentTypes = Object.keys(prop("allSegments"));
+				const placeholderValue = context.get("placeholderValue");
+				if (segment.maxValue == null) return;
+				const dv = getActiveDisplayValue(params).set(segment.type, segment.maxValue, placeholderValue);
+				setDisplayValue(params, index, dv);
+				if (dv.isComplete(allSegmentTypes)) commitValue(params, index, dv);
+			},
+			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", []);
+			},
+			syncDisplayValues({ context, prop }) {
+				const value = context.get("value");
+				const hc = resolvedHourCycle(prop("formatter"));
+				const placeholderValue = context.get("placeholderValue");
+				const count = prop("selectionMode") === "range" ? 2 : 1;
+				context.set("displayValues", initDisplayValues(value?.length ? value : void 0, placeholderValue, hc, count));
+			},
+			syncPlaceholderProp({ prop, context }) {
+				const propValue = prop("placeholderValue");
+				if (propValue) {
+					context.set("placeholderValue", propValue);
+					const value = context.get("value");
+					if (value?.length) {
+						const hc = resolvedHourCycle(prop("formatter"));
+						const count = prop("selectionMode") === "range" ? 2 : 1;
+						context.set("displayValues", initDisplayValues(value, propValue, hc, count));
+					}
+				}
+			},
+			announceSegmentValue({ refs, computed, context }) {
+				const announcer = refs.get("announcer");
+				if (!announcer) return;
+				const index = context.get("activeIndex");
+				const activeSegmentIndex = context.get("activeSegmentIndex");
+				const segmentIndexToUse = refs.get("segmentToAnnounceIndex") ?? activeSegmentIndex;
+				refs.set("segmentToAnnounceIndex", null);
+				const allSegments = computed("segments");
+				const segment = allSegments[index]?.[segmentIndexToUse - getGroupOffset(allSegments, index)];
+				if (!segment || segment.type === "literal") return;
+				const valueText = segment.isPlaceholder ? "Empty" : segment.text;
+				announcer.announce(`${getSegmentLabel(segment.type)}, ${valueText}`);
+			},
+			confirmPlaceholder(params) {
+				const { context, prop } = params;
+				const allSegments = prop("allSegments");
+				const allSegmentTypes = Object.keys(allSegments);
+				const dateCount = prop("selectionMode") === "range" ? 2 : 1;
+				const placeholderValue = context.get("placeholderValue");
+				for (let i = 0; i < dateCount; i++) {
+					const dv = context.get("displayValues")[i];
+					if (!dv) continue;
+					const allExceptDayPeriod = allSegmentTypes.filter((s) => s !== "dayPeriod");
+					if (allSegments.dayPeriod && dv.isComplete(allExceptDayPeriod) && dv.dayPeriod == null) {
+						const filled = dv.set("dayPeriod", placeholderValue && "hour" in placeholderValue ? placeholderValue.hour >= 12 ? 1 : 0 : 0, placeholderValue);
+						setDisplayValue(params, i, filled);
+						commitValue(params, i, filled);
+					}
+				}
+			}
+		}
+	}
+});
+function commitValue(params, index, dv) {
+	const { context, prop } = params;
+	const placeholderValue = context.get("placeholderValue");
+	const date = constrainValue(dv.toValue(placeholderValue), prop("min"), prop("max"));
+	const values = Array.from(context.get("value"));
+	values[index] = date;
+	context.set("value", values);
+}
+function commitClear(params, index) {
+	const { context } = params;
+	const values = context.get("value");
+	if (index < values.length) context.set("value", values.slice(0, index));
+}
+//#endregion
+//#region src/machines/date-input/date-input.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-input/date-input.props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"locale",
+	"max",
+	"min",
+	"name",
+	"form",
+	"onFocusChange",
+	"onPlaceholderChange",
+	"onValueChange",
+	"readOnly",
+	"required",
+	"selectionMode",
+	"timeZone",
+	"translations",
+	"value",
+	"defaultValue",
+	"hourCycle",
+	"granularity",
+	"shouldForceLeadingZeros",
+	"allSegments",
+	"formatter",
+	"placeholderValue",
+	"defaultPlaceholderValue",
+	"format"
+]);
+const splitProps = createSplitProps(props);
+const segmentProps = createProps()(["segment", "index"]);
+const splitSegmentProps = createSplitProps(segmentProps);
+const segmentGroupProps = createProps()(["index"]);
+const splitSegmentGroupProps = createSplitProps(segmentGroupProps);
+const segmentsProps = createProps()(["index"]);
+const splitSegmentsProps = createSplitProps(segmentsProps);
+const labelProps = createProps()(["index"]);
+const splitLabelProps = createSplitProps(labelProps);
+const hiddenInputProps = createProps()(["index", "name"]);
+const splitHiddenInputProps = createSplitProps(hiddenInputProps);
+//#endregion
+export { anatomy, connect, hiddenInputProps, labelProps, machine, parse, props, segmentGroupProps, segmentProps, segmentsProps, splitHiddenInputProps, splitLabelProps, splitProps, splitSegmentGroupProps, splitSegmentProps, splitSegmentsProps };