@solid2-aria/stately 0.0.0-stage → 0.0.1

package/dist/datepicker/create-date-field-state.js

@@ -0,0 +1,449 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDateFieldState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { getLegacyValidationState } from "../utils/legacy-props.js";
+import { parseCalendarIdentifier } from "../utils/parse-calendar-identifier.js";
+import { createFormValidationState } from "../form/create-form-validation-state.js";
+import { requireValue } from "../utils/require-value.js";
+import { IncompleteDate } from "./incomplete-date.js";
+import { getPlaceholder } from "./placeholders.js";
+import { convertValue, createDefaultProps, createPlaceholderDate, getFormatOptions, getValidationResult } from "./utils.js";
+import { createMemo, createRenderEffect, createSignal, merge, untrack } from "solid-js";
+import { DateFormatter, GregorianCalendar, isEqualCalendar, toCalendar } from "@internationalized/date";
+import { NumberFormatter } from "@internationalized/number";
+// src/datepicker/create-date-field-state.ts
+const EDITABLE_SEGMENTS = {
+	day: true,
+	dayPeriod: true,
+	era: true,
+	hour: true,
+	minute: true,
+	month: true,
+	second: true,
+	year: true
+};
+const PAGE_STEP = {
+	day: 7,
+	hour: 2,
+	minute: 15,
+	month: 2,
+	second: 15,
+	year: 5
+};
+/**
+* Provides state management for a date field component.
+* A date field allows users to enter and edit date and time values using a keyboard.
+* Each part of a date value is displayed in an individually editable segment.
+*/
+function createDateFieldState(props) {
+	const locale = createMemo(() => props.locale);
+	const createCalendar = createMemo(() => props.createCalendar);
+	const hideTimeZone = createMemo(() => props.hideTimeZone);
+	const isDisabled = createMemo(() => props.isDisabled ?? false);
+	const isReadOnly = createMemo(() => props.isReadOnly ?? false);
+	const isRequired = createMemo(() => props.isRequired ?? false);
+	const minValue = createMemo(() => props.minValue);
+	const maxValue = createMemo(() => props.maxValue);
+	const isDateUnavailable = createMemo(() => props.isDateUnavailable);
+	const v = createMemo(() => props.value ?? props.defaultValue ?? props.placeholderValue ?? null);
+	const derived1 = createDefaultProps(v, () => props.granularity);
+	const granularity = createMemo(() => {
+		const [currentGranularity] = derived1();
+		const currentValue = v();
+		if (currentValue && !(currentGranularity in currentValue)) throw new Error(`Invalid granularity ${currentGranularity} for value ${currentValue.toString()}`);
+		return currentGranularity;
+	});
+	const defaultTimeZone = createMemo(() => {
+		return derived1()[1];
+	});
+	const timeZone = createMemo(() => {
+		return defaultTimeZone() ?? "UTC";
+	});
+	const derived2 = createMemo(() => {
+		const currentLocale = locale();
+		const currentCreateCalendar = createCalendar();
+		const opts = new DateFormatter(currentLocale, {
+			dateStyle: "short",
+			hour12: props.hourCycle !== null && props.hourCycle !== void 0 ? props.hourCycle === 12 : void 0,
+			timeStyle: "short"
+		}).resolvedOptions();
+		return [currentCreateCalendar(parseCalendarIdentifier(opts.calendar)), opts.hourCycle];
+	});
+	const calendar = createMemo(() => {
+		return derived2()[0];
+	});
+	const hourCycle = createMemo(() => {
+		return derived2()[1];
+	});
+	const [value, setDate] = createControlledSignal(() => props.value, untrack(() => props.defaultValue ?? null), (localValue) => props.onChange?.(localValue));
+	const initialValue = untrack(() => value());
+	const calendarValue = createMemo(() => {
+		const currentValue = value();
+		const currentCalendar = calendar();
+		return convertValue(currentValue, currentCalendar) ?? null;
+	});
+	const [displayValue, setDisplayValue] = createSignal(untrack(() => (() => {
+		const currentCalendar = calendar();
+		const currentHourCycle = hourCycle();
+		const currentCalendarValue = calendarValue();
+		return new IncompleteDate(currentCalendar, currentHourCycle ?? "h23", currentCalendarValue);
+	})()), { ownedWrite: true });
+	const showEra = createMemo(() => {
+		const currentCalendar = calendar();
+		const currentDisplayValue = displayValue();
+		return currentCalendar.identifier === "gregory" && currentDisplayValue.era === "BC";
+	});
+	const formatOpts = createMemo(() => {
+		const currentGranularity = granularity();
+		const currentDefaultTimeZone = defaultTimeZone();
+		const currentHideTimeZone = hideTimeZone();
+		const currentShowEra = showEra();
+		return {
+			granularity: currentGranularity,
+			hideTimeZone: currentHideTimeZone,
+			hourCycle: props.hourCycle,
+			maxGranularity: props.maxGranularity ?? "year",
+			shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+			showEra: currentShowEra,
+			timeZone: currentDefaultTimeZone
+		};
+	});
+	const opts = createMemo(() => {
+		const currentFormatOpts = formatOpts();
+		return getFormatOptions({}, currentFormatOpts);
+	});
+	const dateFormatter = createMemo(() => {
+		const currentLocale = locale();
+		const currentOpts = opts();
+		return new DateFormatter(currentLocale, currentOpts);
+	});
+	const resolvedOptions = createMemo(() => {
+		return dateFormatter().resolvedOptions();
+	});
+	const placeholder = createMemo(() => {
+		const currentGranularity = granularity();
+		const currentCalendar = calendar();
+		const currentDefaultTimeZone = defaultTimeZone();
+		return createPlaceholderDate(props.placeholderValue, currentGranularity, currentCalendar, currentDefaultTimeZone);
+	});
+	const displaySegments = createMemo(() => {
+		const currentHourCycle = hourCycle();
+		const currentGranularity = granularity();
+		const is12HourClock = currentHourCycle === "h11" || currentHourCycle === "h12";
+		const segments = [
+			"era",
+			"year",
+			"month",
+			"day",
+			"hour",
+			...is12HourClock ? ["dayPeriod"] : [],
+			"minute",
+			"second"
+		];
+		const minIndex = segments.indexOf(props.maxGranularity ?? "era");
+		const maxIndex = segments.indexOf(currentGranularity === "hour" && is12HourClock ? "dayPeriod" : currentGranularity);
+		return segments.slice(minIndex, maxIndex + 1);
+	});
+	const [lastValue, setLastValue] = createSignal(untrack(() => calendarValue()), { ownedWrite: true });
+	const [lastCalendar, setLastCalendar] = createSignal(untrack(() => calendar()), { ownedWrite: true });
+	const [lastHourCycle, setLastHourCycle] = createSignal(untrack(() => hourCycle()), { ownedWrite: true });
+	createRenderEffect(() => ({
+		currentCalendar: calendar(),
+		currentCalendarValue: calendarValue(),
+		currentHourCycle: hourCycle(),
+		currentLastCalendar: lastCalendar(),
+		currentLastHourCycle: lastHourCycle(),
+		currentLastValue: lastValue()
+	}), ({ currentCalendarValue, currentLastValue, currentHourCycle, currentLastHourCycle, currentCalendar, currentLastCalendar }) => {
+		if (currentCalendarValue !== currentLastValue || currentHourCycle !== currentLastHourCycle || !isEqualCalendar(currentCalendar, currentLastCalendar)) {
+			setDisplayValue(new IncompleteDate(currentCalendar, currentHourCycle ?? "h23", currentCalendarValue));
+			setLastValue(currentCalendarValue);
+			setLastCalendar(currentCalendar);
+			setLastHourCycle(currentHourCycle);
+		}
+	});
+	const setValue = (initialNewValue) => {
+		let newValue = initialNewValue;
+		const currentDisplaySegments = displaySegments();
+		const currentCalendar = calendar();
+		const currentHourCycle = hourCycle();
+		const currentCalendarValue = calendarValue();
+		const currentV = v();
+		const currentPlaceholder = placeholder();
+		const currentValue = value();
+		if (props.isDisabled === true || props.isReadOnly === true) return;
+		if (newValue === null || newValue === void 0 || newValue instanceof IncompleteDate && newValue.isCleared(currentDisplaySegments)) {
+			setDisplayValue(new IncompleteDate(currentCalendar, currentHourCycle ?? "h23", currentCalendarValue));
+			setDate(null);
+		} else if (newValue instanceof IncompleteDate) {
+			if (newValue.isComplete(currentDisplaySegments)) {
+				const dateValue = newValue.toValue(currentCalendarValue ?? currentPlaceholder);
+				if (newValue.validate(dateValue, currentDisplaySegments)) {
+					const newDateValue = toCalendar(dateValue, currentV?.calendar ?? new GregorianCalendar());
+					if (!currentValue || newDateValue.compare(currentValue) !== 0) {
+						setDisplayValue(new IncompleteDate(currentCalendar, currentHourCycle ?? "h23", currentCalendarValue));
+						setDate(newDateValue);
+						return;
+					}
+				}
+			}
+			setDisplayValue(newValue);
+		} else {
+			newValue = toCalendar(newValue, currentV?.calendar ?? new GregorianCalendar());
+			setDisplayValue(new IncompleteDate(currentCalendar, currentHourCycle ?? "h23", currentCalendarValue));
+			setDate(newValue);
+		}
+	};
+	const dateValue = createMemo(() => {
+		const currentDisplayValue = displayValue();
+		const currentCalendarValue = calendarValue();
+		const currentPlaceholder = placeholder();
+		const currentTimeZone = timeZone();
+		return currentDisplayValue.toValue(currentCalendarValue ?? currentPlaceholder).toDate(currentTimeZone);
+	});
+	const segments = createMemo(() => {
+		return processSegments(dateValue(), displayValue(), dateFormatter(), resolvedOptions(), calendar(), locale(), granularity());
+	});
+	const adjustSegment = (type, amount) => {
+		const currentDisplayValue = displayValue();
+		const currentPlaceholder = placeholder();
+		const currentDisplaySegments = displaySegments();
+		setValue(currentDisplayValue.cycle(type, amount, currentPlaceholder, currentDisplaySegments));
+	};
+	const builtinValidation = createMemo(() => {
+		const currentValue = value();
+		const currentMinValue = minValue();
+		const currentMaxValue = maxValue();
+		const currentIsDateUnavailable = isDateUnavailable();
+		const currentFormatOpts = formatOpts();
+		return getValidationResult(currentValue, currentMinValue, currentMaxValue, currentIsDateUnavailable, currentFormatOpts);
+	});
+	const validation = createFormValidationState(merge(props, {
+		get builtinValidation() {
+			return builtinValidation();
+		},
+		validate: (localValue) => props.validate?.(localValue),
+		get value() {
+			return value();
+		}
+	}));
+	const isValueInvalid = createMemo(() => validation.displayValidation.isInvalid);
+	const validationState = createMemo(() => {
+		const currentIsValueInvalid = isValueInvalid();
+		return getLegacyValidationState(props) ?? (currentIsValueInvalid ? "invalid" : null);
+	});
+	return merge(validation, {
+		get calendar() {
+			return calendar();
+		},
+		clearSegment(part) {
+			const currentDisplayValue = displayValue();
+			let localValue = currentDisplayValue;
+			if (part !== "timeZoneName" && part !== "literal") localValue = currentDisplayValue.clear(part);
+			setValue(localValue);
+		},
+		confirmPlaceholder() {
+			const currentDisplayValue = displayValue();
+			const currentDisplaySegments = displaySegments();
+			const currentCalendarValue = calendarValue();
+			const currentPlaceholder = placeholder();
+			const currentV = v();
+			const currentValue = value();
+			const currentCalendar = calendar();
+			const currentHourCycle = hourCycle();
+			if (props.isDisabled === true || props.isReadOnly === true) return;
+			if (currentDisplayValue.isComplete(currentDisplaySegments)) {
+				const localDateValue = currentDisplayValue.toValue(currentCalendarValue ?? currentPlaceholder);
+				const newDateValue = toCalendar(localDateValue, currentV?.calendar ?? new GregorianCalendar());
+				if (!currentValue || newDateValue.compare(currentValue) !== 0) setDate(newDateValue);
+				setDisplayValue(new IncompleteDate(currentCalendar, currentHourCycle ?? "h23", currentCalendarValue));
+			}
+		},
+		get dateFormatter() {
+			return dateFormatter();
+		},
+		get dateValue() {
+			return dateValue();
+		},
+		decrement(part) {
+			adjustSegment(part, -1);
+		},
+		decrementPage(part) {
+			adjustSegment(part, -(PAGE_STEP[part] ?? 1));
+		},
+		decrementToMin(part) {
+			const currentHourCycle = hourCycle();
+			const currentDisplayValue = displayValue();
+			const currentPlaceholder = placeholder();
+			const localMinValue = part === "hour" && currentHourCycle === "h12" ? 12 : requireValue(currentDisplayValue.getSegmentLimits(part), "Expected currentDisplayValue.getSegmentLimits(part) to exist.").minValue;
+			setValue(currentDisplayValue.set(part, localMinValue, currentPlaceholder));
+		},
+		get defaultValue() {
+			return props.defaultValue ?? initialValue;
+		},
+		formatValue(fieldOptions) {
+			const currentCalendarValue = calendarValue();
+			const currentFormatOpts = formatOpts();
+			const currentLocale = locale();
+			const currentDateValue = dateValue();
+			if (!currentCalendarValue) return "";
+			const formatOptions = getFormatOptions(fieldOptions, currentFormatOpts);
+			return new DateFormatter(currentLocale, formatOptions).format(currentDateValue);
+		},
+		getDateFormatter(localLocale, formatOptions) {
+			const newOptions = {
+				...formatOpts(),
+				...formatOptions
+			};
+			const newFormatOptions = getFormatOptions({}, newOptions);
+			return new DateFormatter(localLocale, newFormatOptions);
+		},
+		get granularity() {
+			return granularity();
+		},
+		increment(part) {
+			adjustSegment(part, 1);
+		},
+		incrementPage(part) {
+			adjustSegment(part, PAGE_STEP[part] ?? 1);
+		},
+		incrementToMax(part) {
+			const currentHourCycle = hourCycle();
+			const currentDisplayValue = displayValue();
+			const currentPlaceholder = placeholder();
+			const localMaxValue = part === "hour" && currentHourCycle === "h12" ? 11 : requireValue(currentDisplayValue.getSegmentLimits(part), "Expected currentDisplayValue.getSegmentLimits(part) to exist.").maxValue;
+			setValue(currentDisplayValue.set(part, localMaxValue, currentPlaceholder));
+		},
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isInvalid() {
+			return isValueInvalid();
+		},
+		get isReadOnly() {
+			return isReadOnly();
+		},
+		get isRequired() {
+			return isRequired();
+		},
+		get maxGranularity() {
+			return props.maxGranularity ?? "year";
+		},
+		get segments() {
+			return segments();
+		},
+		setSegment(part, localV) {
+			const currentDisplayValue = displayValue();
+			const currentPlaceholder = placeholder();
+			setValue(currentDisplayValue.set(part, localV, currentPlaceholder));
+		},
+		setValue,
+		get validationState() {
+			return validationState();
+		},
+		get value() {
+			return calendarValue();
+		}
+	});
+}
+function processSegments(dateValue, displayValue, dateFormatter, resolvedOptions, calendar, locale, granularity) {
+	const timeValue = /* @__PURE__ */ new Set([
+		"hour",
+		"minute",
+		"second"
+	]);
+	const segments = dateFormatter.formatToParts(dateValue);
+	formatNumericSegments(segments, displayValue, resolvedOptions, locale);
+	const processedSegments = [];
+	for (const segment of segments) {
+		const mapped = mapDateSegmentType(segment.type);
+		const type = isDateSegmentType(mapped) ? mapped : "literal";
+		let isEditable = type in EDITABLE_SEGMENTS;
+		if (type === "era" && calendar.getEras().length === 1) isEditable = false;
+		const isPlaceholder = type !== "literal" && type !== "timeZoneName" && (displayValue[type] === null || displayValue[type] === void 0);
+		const placeholder = type in EDITABLE_SEGMENTS ? getPlaceholder(type, segment.value, locale) : null;
+		const dateSegment = {
+			text: isPlaceholder ? placeholder ?? "" : segment.value,
+			type,
+			...displayValue.getSegmentLimits(type),
+			isEditable,
+			isPlaceholder,
+			placeholder: placeholder ?? ""
+		};
+		if (type === "hour") {
+			processedSegments.push({
+				isEditable: false,
+				isPlaceholder: false,
+				placeholder: "",
+				text: "⁦",
+				type: "literal"
+			}, dateSegment);
+			if (type === granularity) processedSegments.push({
+				isEditable: false,
+				isPlaceholder: false,
+				placeholder: "",
+				text: "⁩",
+				type: "literal"
+			});
+		} else if (timeValue.has(type) && type === granularity) processedSegments.push(dateSegment, {
+			isEditable: false,
+			isPlaceholder: false,
+			placeholder: "",
+			text: "⁩",
+			type: "literal"
+		});
+		else processedSegments.push(dateSegment);
+	}
+	return processedSegments;
+}
+function isDateSegmentType(value) {
+	return [
+		"era",
+		"year",
+		"month",
+		"day",
+		"hour",
+		"minute",
+		"second",
+		"dayPeriod",
+		"timeZoneName",
+		"literal"
+	].includes(value);
+}
+function mapDateSegmentType(type) {
+	switch (type) {
+		case "dayperiod": return "dayPeriod";
+		case "relatedYear":
+		case "yearName": return "year";
+		case "unknown": return "literal";
+		default: return type;
+	}
+}
+function formatNumericSegments(segments, displayValue, resolvedOptions, locale) {
+	const numberFormatter = new NumberFormatter(locale, { useGrouping: false });
+	const twoDigitFormatter = new NumberFormatter(locale, {
+		minimumIntegerDigits: 2,
+		useGrouping: false
+	});
+	for (const segment of segments) if (segment.type === "year" || segment.type === "month" || segment.type === "day" || segment.type === "hour") {
+		const value = displayValue[segment.type] ?? 0;
+		segment.value = resolvedOptions[segment.type] === "2-digit" ? twoDigitFormatter.format(value) : numberFormatter.format(value);
+	}
+}
+export { createDateFieldState };
+
+//# sourceMappingURL=create-date-field-state.js.map

package/dist/datepicker/create-date-field-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-date-field-state.js","names":[],"sources":["../../src/datepicker/create-date-field-state.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDateFieldState.ts.\n * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport {\n  DateFormatter,\n  GregorianCalendar,\n  isEqualCalendar,\n  toCalendar,\n} from \"@internationalized/date\";\nimport type { Calendar, CalendarIdentifier } from \"@internationalized/date\";\nimport { NumberFormatter } from \"@internationalized/number\";\nimport type { ValidationState } from \"@solid2-aria/types-shared\";\nimport {\n  createMemo,\n  createSignal,\n  createRenderEffect,\n  untrack,\n  merge,\n} from \"solid-js\";\n\nimport { createFormValidationState } from \"../form/create-form-validation-state\";\nimport type { FormValidationState } from \"../form/create-form-validation-state\";\nimport { createControlledSignal } from \"../utils/create-controlled-signal\";\nimport { getLegacyValidationState } from \"../utils/legacy-props\";\nimport { parseCalendarIdentifier } from \"../utils/parse-calendar-identifier\";\nimport { requireValue } from \"../utils/require-value\";\nimport { IncompleteDate } from \"./incomplete-date\";\nimport { getPlaceholder } from \"./placeholders\";\nimport type {\n  DatePickerProps,\n  DateValue,\n  Granularity,\n  MappedDateValue,\n} from \"./types\";\nimport {\n  convertValue,\n  createPlaceholderDate,\n  getFormatOptions,\n  getValidationResult,\n  createDefaultProps,\n} from \"./utils\";\nimport type { FieldOptions, FormatterOptions } from \"./utils\";\n\nexport type DateSegmentType =\n  | \"era\"\n  | \"year\"\n  | \"month\"\n  | \"day\"\n  | \"hour\"\n  | \"minute\"\n  | \"second\"\n  | \"dayPeriod\"\n  | \"literal\"\n  | \"timeZoneName\";\n\nexport interface DateSegment {\n  /** The type of segment. */\n  type: DateSegmentType;\n  /** The formatted text for the segment. */\n  text: string;\n  /** The numeric value for the segment, if applicable. */\n  value?: number | null;\n  /** The minimum numeric value for the segment, if applicable. */\n  minValue?: number;\n  /** The maximum numeric value for the segment, if applicable. */\n  maxValue?: number;\n  /** Whether the value is a placeholder. */\n  isPlaceholder: boolean;\n  /** A placeholder string for the segment. */\n  placeholder: string;\n  /** Whether the segment is editable. */\n  isEditable: boolean;\n}\n\nexport interface DateFieldState extends FormValidationState {\n  /** The current field value. */\n  value: DateValue | null;\n  /** The default field value. */\n  defaultValue: DateValue | null;\n  /** The current value, converted to a native JavaScript `Date` object. */\n  dateValue: Date;\n  /** The calendar system currently in use. */\n  calendar: Calendar;\n  /** Sets the field's value. */\n  setValue: (value: DateValue | null) => void;\n  /** A list of segments for the current value. */\n  segments: DateSegment[];\n  /** A date formatter configured for the current locale and format. */\n  dateFormatter: DateFormatter;\n  /**\n   * The current validation state of the date field, based on the `validationState`, `minValue`, and\n   * `maxValue` props.\n   *\n   * @deprecated Use `isInvalid` instead.\n   */\n  validationState: ValidationState | null;\n  /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */\n  isInvalid: boolean;\n  /** The granularity for the field, based on the `granularity` prop and current value. */\n  granularity: Granularity;\n  /** The maximum date or time unit that is displayed in the field. */\n  maxGranularity: \"year\" | \"month\" | Granularity;\n  /** Whether the field is disabled. */\n  isDisabled: boolean;\n  /** Whether the field is read only. */\n  isReadOnly: boolean;\n  /** Whether the field is required. */\n  isRequired: boolean;\n  /**\n   * Increments the given segment. Upon reaching the minimum or maximum value, the value wraps\n   * around to the opposite limit.\n   */\n  increment: (type: DateSegmentType) => void;\n  /**\n   * Decrements the given segment. Upon reaching the minimum or maximum value, the value wraps\n   * around to the opposite limit.\n   */\n  decrement: (type: DateSegmentType) => void;\n  /**\n   * Increments the given segment by a larger amount, rounding it to the nearest increment.\n   * The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years.\n   * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.\n   */\n  incrementPage: (type: DateSegmentType) => void;\n  /**\n   * Decrements the given segment by a larger amount, rounding it to the nearest increment.\n   * The amount to decrement by depends on the field, for example 15 minutes, 7 days, and 5 years.\n   * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.\n   */\n  decrementPage: (type: DateSegmentType) => void;\n  /** Increments the given segment to its maxiumum value. */\n  incrementToMax: (type: DateSegmentType) => void;\n  /** Decrements the given segment to its minimum value. */\n  decrementToMin: (type: DateSegmentType) => void;\n  /** Sets the value of the given segment. */\n  setSegment: {\n    (type: \"era\", value: string): void;\n    (type: DateSegmentType, value: number): void;\n  };\n  /** Updates the remaining unfilled segments with the placeholder value. */\n  confirmPlaceholder: () => void;\n  /** Clears the value of the given segment, reverting it to the placeholder. */\n  clearSegment: (type: DateSegmentType) => void;\n  /** Formats the current date value using the given options. */\n  formatValue: (fieldOptions: FieldOptions) => string;\n  /** Gets a formatter based on state's props. */\n  getDateFormatter: (\n    locale: string,\n    formatOptions: FormatterOptions\n  ) => DateFormatter;\n}\n\nconst EDITABLE_SEGMENTS = {\n  day: true,\n  dayPeriod: true,\n  era: true,\n  hour: true,\n  minute: true,\n  month: true,\n  second: true,\n  year: true,\n};\n\nconst PAGE_STEP: Partial<Record<DateSegmentType, number>> = {\n  day: 7,\n  hour: 2,\n  minute: 15,\n  month: 2,\n  second: 15,\n  year: 5,\n};\n\nexport interface DateFieldStateOptions<\n  T extends DateValue = DateValue,\n> extends DatePickerProps<T> {\n  /**\n   * The maximum unit to display in the date field.\n   *\n   * @default 'year'\n   */\n  maxGranularity?: \"year\" | \"month\" | Granularity;\n  /** The locale to display and edit the value according to. */\n  locale: string;\n  /**\n   * A function that creates a [Calendar](../internationalized/date/Calendar.html)\n   * object for a given calendar identifier. Such a function may be imported from the\n   * `@internationalized/date` package, or manually implemented to include support for\n   * only certain calendars.\n   */\n  createCalendar: (name: CalendarIdentifier) => Calendar;\n}\n\n/**\n * Provides state management for a date field component.\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport function createDateFieldState<T extends DateValue = DateValue>(\n  props: DateFieldStateOptions<T>\n): DateFieldState {\n  const locale = createMemo(() => props.locale);\n  const createCalendar = createMemo(() => props.createCalendar);\n  const hideTimeZone = createMemo(() => props.hideTimeZone);\n  const isDisabled = createMemo(() => props.isDisabled ?? false);\n  const isReadOnly = createMemo(() => props.isReadOnly ?? false);\n  const isRequired = createMemo(() => props.isRequired ?? false);\n  const minValue = createMemo(() => props.minValue);\n  const maxValue = createMemo(() => props.maxValue);\n  const isDateUnavailable = createMemo(() => props.isDateUnavailable);\n\n  const v = createMemo(\n    () => props.value ?? props.defaultValue ?? props.placeholderValue ?? null\n  );\n\n  const derived1 = createDefaultProps(v, () => props.granularity);\n\n  const granularity = createMemo(() => {\n    const [currentGranularity] = derived1();\n    const currentValue = v();\n\n    if (currentValue && !(currentGranularity in currentValue)) {\n      throw new Error(\n        `Invalid granularity ${currentGranularity} for value ${currentValue.toString()}`\n      );\n    }\n\n    return currentGranularity;\n  });\n\n  const defaultTimeZone = createMemo(() => {\n    const currentDerived1 = derived1();\n\n    return currentDerived1[1];\n  });\n\n  const timeZone = createMemo(() => {\n    const currentDefaultTimeZone = defaultTimeZone();\n\n    return currentDefaultTimeZone ?? \"UTC\";\n  });\n\n  // Resolve default hour cycle and calendar system.\n  const derived2 = createMemo(() => {\n    const currentLocale = locale();\n    const currentCreateCalendar = createCalendar();\n\n    const formatter = new DateFormatter(currentLocale, {\n      dateStyle: \"short\",\n      hour12:\n        props.hourCycle !== null && props.hourCycle !== undefined\n          ? props.hourCycle === 12\n          : undefined,\n      timeStyle: \"short\",\n    });\n\n    const opts = formatter.resolvedOptions();\n\n    const calendar = currentCreateCalendar(\n      parseCalendarIdentifier(opts.calendar)\n    );\n\n    return [calendar, opts.hourCycle] as const;\n  });\n\n  // Resolve default hour cycle and calendar system.\n  const calendar = createMemo(() => {\n    const currentDerived2 = derived2();\n\n    return currentDerived2[0];\n  });\n\n  // Resolve default hour cycle and calendar system.\n  const hourCycle = createMemo(() => {\n    const currentDerived2 = derived2();\n\n    return currentDerived2[1];\n  });\n\n  const [value, setDate] = createControlledSignal<DateValue | null>(\n    () => props.value,\n    untrack(() => props.defaultValue ?? null),\n    // SAFETY: Date edits preserve the input date/time class; the mapped generic callback widens subclasses to that class.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion\n    (localValue) => props.onChange?.(localValue as MappedDateValue<T> | null)\n  );\n\n  const initialValue = untrack(() => value());\n\n  const calendarValue = createMemo(() => {\n    const currentValue = value();\n    const currentCalendar = calendar();\n\n    return convertValue(currentValue, currentCalendar) ?? null;\n  });\n\n  const [displayValue, setDisplayValue] = createSignal(\n    untrack(() =>\n      (() => {\n        const currentCalendar = calendar();\n        const currentHourCycle = hourCycle();\n        const currentCalendarValue = calendarValue();\n\n        return new IncompleteDate(\n          currentCalendar,\n          currentHourCycle ?? \"h23\",\n          currentCalendarValue\n        );\n      })()\n    ),\n    { ownedWrite: true }\n  );\n\n  const showEra = createMemo(() => {\n    const currentCalendar = calendar();\n    const currentDisplayValue = displayValue();\n\n    return (\n      currentCalendar.identifier === \"gregory\" &&\n      currentDisplayValue.era === \"BC\"\n    );\n  });\n\n  const formatOpts = createMemo(() => {\n    const currentGranularity = granularity();\n    const currentDefaultTimeZone = defaultTimeZone();\n    const currentHideTimeZone = hideTimeZone();\n    const currentShowEra = showEra();\n\n    return {\n      granularity: currentGranularity,\n      hideTimeZone: currentHideTimeZone,\n      hourCycle: props.hourCycle,\n      maxGranularity: props.maxGranularity ?? \"year\",\n      shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n      showEra: currentShowEra,\n      timeZone: currentDefaultTimeZone,\n    };\n  });\n\n  const opts = createMemo(() => {\n    const currentFormatOpts = formatOpts();\n\n    return getFormatOptions({}, currentFormatOpts);\n  });\n\n  const dateFormatter = createMemo(() => {\n    const currentLocale = locale();\n    const currentOpts = opts();\n\n    return new DateFormatter(currentLocale, currentOpts);\n  });\n\n  const resolvedOptions = createMemo(() => {\n    const currentDateFormatter = dateFormatter();\n\n    return currentDateFormatter.resolvedOptions();\n  });\n\n  const placeholder = createMemo(() => {\n    const currentGranularity = granularity();\n    const currentCalendar = calendar();\n    const currentDefaultTimeZone = defaultTimeZone();\n\n    return createPlaceholderDate(\n      props.placeholderValue,\n      currentGranularity,\n      currentCalendar,\n      currentDefaultTimeZone\n    );\n  });\n\n  const displaySegments = createMemo(() => {\n    const currentHourCycle = hourCycle();\n    const currentGranularity = granularity();\n\n    const is12HourClock =\n      currentHourCycle === \"h11\" || currentHourCycle === \"h12\";\n\n    const segments: DateSegmentType[] = [\n      \"era\",\n      \"year\",\n      \"month\",\n      \"day\",\n      \"hour\",\n      ...(is12HourClock ? [\"dayPeriod\" as const] : []),\n      \"minute\",\n      \"second\",\n    ];\n\n    const minIndex = segments.indexOf(props.maxGranularity ?? \"era\");\n\n    const maxIndex = segments.indexOf(\n      currentGranularity === \"hour\" && is12HourClock\n        ? \"dayPeriod\"\n        : currentGranularity\n    );\n\n    return segments.slice(minIndex, maxIndex + 1);\n  });\n\n  const [lastValue, setLastValue] = createSignal(\n    untrack(() => calendarValue()),\n    { ownedWrite: true }\n  );\n\n  const [lastCalendar, setLastCalendar] = createSignal(\n    untrack(() => calendar()),\n    { ownedWrite: true }\n  );\n\n  const [lastHourCycle, setLastHourCycle] = createSignal(\n    untrack(() => hourCycle()),\n    { ownedWrite: true }\n  );\n\n  createRenderEffect(\n    () => ({\n      currentCalendar: calendar(),\n      currentCalendarValue: calendarValue(),\n      currentHourCycle: hourCycle(),\n      currentLastCalendar: lastCalendar(),\n      currentLastHourCycle: lastHourCycle(),\n      currentLastValue: lastValue(),\n    }),\n    ({\n      currentCalendarValue,\n      currentLastValue,\n      currentHourCycle,\n      currentLastHourCycle,\n      currentCalendar,\n      currentLastCalendar,\n    }) => {\n      if (\n        currentCalendarValue !== currentLastValue ||\n        currentHourCycle !== currentLastHourCycle ||\n        !isEqualCalendar(currentCalendar, currentLastCalendar)\n      ) {\n        setDisplayValue(\n          new IncompleteDate(\n            currentCalendar,\n            currentHourCycle ?? \"h23\",\n            currentCalendarValue\n          )\n        );\n        setLastValue(currentCalendarValue);\n        setLastCalendar(currentCalendar);\n        setLastHourCycle(currentHourCycle);\n      }\n    }\n  );\n\n  const setValue = (initialNewValue: DateValue | IncompleteDate | null) => {\n    let newValue = initialNewValue;\n\n    const currentDisplaySegments = displaySegments();\n    const currentCalendar = calendar();\n    const currentHourCycle = hourCycle();\n    const currentCalendarValue = calendarValue();\n    const currentV = v();\n    const currentPlaceholder = placeholder();\n    const currentValue = value();\n\n    if (props.isDisabled === true || props.isReadOnly === true) {\n      return;\n    }\n\n    if (\n      newValue === null ||\n      newValue === undefined ||\n      (newValue instanceof IncompleteDate &&\n        newValue.isCleared(currentDisplaySegments))\n    ) {\n      setDisplayValue(\n        new IncompleteDate(\n          currentCalendar,\n          currentHourCycle ?? \"h23\",\n          currentCalendarValue\n        )\n      );\n      setDate(null);\n    } else if (newValue instanceof IncompleteDate) {\n      // If the new value is complete and valid, trigger onChange eagerly.\n      // If it represents an incomplete or invalid value (e.g. February 30th),\n      // wait until the field is blurred to trigger onChange.\n      if (newValue.isComplete(currentDisplaySegments)) {\n        const dateValue = newValue.toValue(\n          currentCalendarValue ?? currentPlaceholder\n        );\n\n        if (newValue.validate(dateValue, currentDisplaySegments)) {\n          const newDateValue = toCalendar(\n            dateValue,\n            currentV?.calendar ?? new GregorianCalendar()\n          );\n\n          if (!currentValue || newDateValue.compare(currentValue) !== 0) {\n            setDisplayValue(\n              new IncompleteDate(\n                currentCalendar,\n                currentHourCycle ?? \"h23\",\n                currentCalendarValue\n              )\n              // reset in case prop isn't updated\n            );\n            setDate(newDateValue);\n\n            return;\n          }\n        }\n      }\n\n      // Incomplete/invalid value. Set temporary display override.\n      setDisplayValue(newValue);\n    } else {\n      // The display calendar should not have any effect on the emitted value.\n      // Emit dates in the same calendar as the original value, if any, otherwise gregorian.\n      newValue = toCalendar(\n        newValue,\n        currentV?.calendar ?? new GregorianCalendar()\n      );\n      setDisplayValue(\n        new IncompleteDate(\n          currentCalendar,\n          currentHourCycle ?? \"h23\",\n          currentCalendarValue\n        )\n      );\n      setDate(newValue);\n    }\n  };\n\n  const dateValue = createMemo(() => {\n    const currentDisplayValue = displayValue();\n    const currentCalendarValue = calendarValue();\n    const currentPlaceholder = placeholder();\n    const currentTimeZone = timeZone();\n\n    const localV = currentDisplayValue.toValue(\n      currentCalendarValue ?? currentPlaceholder\n    );\n\n    return localV.toDate(currentTimeZone);\n  });\n\n  const segments = createMemo(() => {\n    const currentDateValue = dateValue();\n    const currentDisplayValue = displayValue();\n    const currentDateFormatter = dateFormatter();\n    const currentResolvedOptions = resolvedOptions();\n    const currentCalendar = calendar();\n    const currentLocale = locale();\n    const currentGranularity = granularity();\n\n    return processSegments(\n      currentDateValue,\n      currentDisplayValue,\n      currentDateFormatter,\n      currentResolvedOptions,\n      currentCalendar,\n      currentLocale,\n      currentGranularity\n    );\n  });\n\n  const adjustSegment = (type: DateSegmentType, amount: number) => {\n    const currentDisplayValue = displayValue();\n    const currentPlaceholder = placeholder();\n    const currentDisplaySegments = displaySegments();\n    setValue(\n      currentDisplayValue.cycle(\n        type,\n        amount,\n        currentPlaceholder,\n        currentDisplaySegments\n      )\n    );\n  };\n\n  const builtinValidation = createMemo(() => {\n    const currentValue = value();\n    const currentMinValue = minValue();\n    const currentMaxValue = maxValue();\n    const currentIsDateUnavailable = isDateUnavailable();\n    const currentFormatOpts = formatOpts();\n\n    return getValidationResult(\n      currentValue,\n      currentMinValue,\n      currentMaxValue,\n      currentIsDateUnavailable,\n      currentFormatOpts\n    );\n  });\n\n  const validation = createFormValidationState<DateValue>(\n    merge(props, {\n      get builtinValidation() {\n        return builtinValidation();\n      },\n      validate: (localValue: DateValue) =>\n        // SAFETY: Date edits preserve the input date/time class; the mapped generic callback widens subclasses to that class.\n        // oxlint-disable-next-line typescript/no-unsafe-type-assertion\n        props.validate?.(localValue as MappedDateValue<T>),\n      get value() {\n        return value();\n      },\n    })\n  );\n\n  const isValueInvalid = createMemo(\n    () => validation.displayValidation.isInvalid\n  );\n\n  const validationState = createMemo(() => {\n    const currentIsValueInvalid = isValueInvalid();\n\n    return (\n      getLegacyValidationState(props) ??\n      (currentIsValueInvalid ? \"invalid\" : null)\n    );\n  });\n\n  return merge(validation, {\n    get calendar() {\n      return calendar();\n    },\n    clearSegment(part) {\n      const currentDisplayValue = displayValue();\n      let localValue = currentDisplayValue;\n\n      if (part !== \"timeZoneName\" && part !== \"literal\") {\n        localValue = currentDisplayValue.clear(part);\n      }\n\n      setValue(localValue);\n    },\n    confirmPlaceholder() {\n      const currentDisplayValue = displayValue();\n      const currentDisplaySegments = displaySegments();\n      const currentCalendarValue = calendarValue();\n      const currentPlaceholder = placeholder();\n      const currentV = v();\n      const currentValue = value();\n      const currentCalendar = calendar();\n      const currentHourCycle = hourCycle();\n\n      if (props.isDisabled === true || props.isReadOnly === true) {\n        return;\n      }\n\n      // If the display value is complete but invalid, we need to constrain it and emit onChange on blur.\n      if (currentDisplayValue.isComplete(currentDisplaySegments)) {\n        const localDateValue = currentDisplayValue.toValue(\n          currentCalendarValue ?? currentPlaceholder\n        );\n\n        const newDateValue = toCalendar(\n          localDateValue,\n          currentV?.calendar ?? new GregorianCalendar()\n        );\n\n        if (!currentValue || newDateValue.compare(currentValue) !== 0) {\n          setDate(newDateValue);\n        }\n\n        setDisplayValue(\n          new IncompleteDate(\n            currentCalendar,\n            currentHourCycle ?? \"h23\",\n            currentCalendarValue\n          )\n        );\n      }\n    },\n    get dateFormatter() {\n      return dateFormatter();\n    },\n    get dateValue() {\n      return dateValue();\n    },\n    decrement(part) {\n      adjustSegment(part, -1);\n    },\n    decrementPage(part) {\n      adjustSegment(part, -(PAGE_STEP[part] ?? 1));\n    },\n    decrementToMin(part) {\n      const currentHourCycle = hourCycle();\n      const currentDisplayValue = displayValue();\n      const currentPlaceholder = placeholder();\n\n      const localMinValue =\n        part === \"hour\" && currentHourCycle === \"h12\"\n          ? 12\n          : requireValue(\n              currentDisplayValue.getSegmentLimits(part),\n              \"Expected currentDisplayValue.getSegmentLimits(part) to exist.\"\n            ).minValue;\n\n      setValue(\n        currentDisplayValue.set(part, localMinValue, currentPlaceholder)\n      );\n    },\n    get defaultValue() {\n      return props.defaultValue ?? initialValue;\n    },\n    formatValue(fieldOptions: FieldOptions) {\n      const currentCalendarValue = calendarValue();\n      const currentFormatOpts = formatOpts();\n      const currentLocale = locale();\n      const currentDateValue = dateValue();\n\n      if (!currentCalendarValue) {\n        return \"\";\n      }\n\n      const formatOptions = getFormatOptions(fieldOptions, currentFormatOpts);\n      const formatter = new DateFormatter(currentLocale, formatOptions);\n\n      return formatter.format(currentDateValue);\n    },\n    getDateFormatter(localLocale, formatOptions: FormatterOptions) {\n      const currentFormatOpts = formatOpts();\n      const newOptions = { ...currentFormatOpts, ...formatOptions };\n      const newFormatOptions = getFormatOptions({}, newOptions);\n\n      return new DateFormatter(localLocale, newFormatOptions);\n    },\n    get granularity() {\n      return granularity();\n    },\n    increment(part) {\n      adjustSegment(part, 1);\n    },\n    incrementPage(part) {\n      adjustSegment(part, PAGE_STEP[part] ?? 1);\n    },\n    incrementToMax(part) {\n      const currentHourCycle = hourCycle();\n      const currentDisplayValue = displayValue();\n      const currentPlaceholder = placeholder();\n\n      const localMaxValue =\n        part === \"hour\" && currentHourCycle === \"h12\"\n          ? 11\n          : requireValue(\n              currentDisplayValue.getSegmentLimits(part),\n              \"Expected currentDisplayValue.getSegmentLimits(part) to exist.\"\n            ).maxValue;\n\n      setValue(\n        currentDisplayValue.set(part, localMaxValue, currentPlaceholder)\n      );\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n    get isInvalid() {\n      return isValueInvalid();\n    },\n    get isReadOnly() {\n      return isReadOnly();\n    },\n    get isRequired() {\n      return isRequired();\n    },\n    get maxGranularity() {\n      return props.maxGranularity ?? \"year\";\n    },\n    get segments() {\n      return segments();\n    },\n    setSegment(part, localV: string | number) {\n      const currentDisplayValue = displayValue();\n      const currentPlaceholder = placeholder();\n      setValue(currentDisplayValue.set(part, localV, currentPlaceholder));\n    },\n    setValue,\n    // oxlint-disable-next-line typescript/no-deprecated -- Expose the legacy output alias for existing consumers; internal state uses its modern replacement.\n    get validationState() {\n      return validationState();\n    },\n    get value() {\n      return calendarValue();\n    },\n  } satisfies Partial<DateFieldState>);\n}\n\nfunction processSegments(\n  dateValue: Date,\n  displayValue: IncompleteDate,\n  dateFormatter: Intl.DateTimeFormat,\n  resolvedOptions: Intl.ResolvedDateTimeFormatOptions,\n  calendar: Calendar,\n  locale: string,\n  granularity: Granularity\n): DateSegment[] {\n  const timeValue = new Set([\"hour\", \"minute\", \"second\"]);\n  const segments = dateFormatter.formatToParts(dateValue);\n  formatNumericSegments(segments, displayValue, resolvedOptions, locale);\n  const processedSegments: DateSegment[] = [];\n\n  for (const segment of segments) {\n    const mapped = mapDateSegmentType(segment.type);\n\n    const type = isDateSegmentType(mapped) ? mapped : \"literal\";\n    let isEditable = type in EDITABLE_SEGMENTS;\n\n    if (type === \"era\" && calendar.getEras().length === 1) {\n      isEditable = false;\n    }\n\n    const isPlaceholder =\n      type !== \"literal\" &&\n      type !== \"timeZoneName\" &&\n      (displayValue[type] === null || displayValue[type] === undefined);\n\n    const placeholder =\n      type in EDITABLE_SEGMENTS\n        ? getPlaceholder(type, segment.value, locale)\n        : null;\n\n    const dateSegment: DateSegment = {\n      text: isPlaceholder ? (placeholder ?? \"\") : segment.value,\n      type,\n      ...displayValue.getSegmentLimits(type),\n      isEditable,\n      isPlaceholder,\n      placeholder: placeholder ?? \"\",\n    };\n\n    // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).\n    // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.\n    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change.\n    if (type === \"hour\") {\n      // This marks the start of the embedded direction change.\n      processedSegments.push(\n        {\n          isEditable: false,\n          isPlaceholder: false,\n          placeholder: \"\",\n          text: \"\\u2066\",\n          type: \"literal\",\n        },\n        dateSegment\n      );\n\n      // This marks the end of the embedded direction change in the case that the granularity it set to \"hour\".\n      if (type === granularity) {\n        processedSegments.push({\n          isEditable: false,\n          isPlaceholder: false,\n          placeholder: \"\",\n          text: \"\\u2069\",\n          type: \"literal\",\n        });\n      }\n    } else if (timeValue.has(type) && type === granularity) {\n      // This marks the end of the embedded direction change.\n      processedSegments.push(dateSegment, {\n        isEditable: false,\n        isPlaceholder: false,\n        placeholder: \"\",\n        text: \"\\u2069\",\n        type: \"literal\",\n      });\n    } else {\n      // We only want to \"wrap\" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal.\n      processedSegments.push(dateSegment);\n    }\n  }\n\n  return processedSegments;\n}\n\nfunction isDateSegmentType(value: string): value is DateSegmentType {\n  return [\n    \"era\",\n    \"year\",\n    \"month\",\n    \"day\",\n    \"hour\",\n    \"minute\",\n    \"second\",\n    \"dayPeriod\",\n    \"timeZoneName\",\n    \"literal\",\n  ].includes(value);\n}\n\nfunction mapDateSegmentType(type: string): string {\n  switch (type) {\n    case \"dayperiod\": {\n      return \"dayPeriod\";\n    }\n\n    case \"relatedYear\":\n    case \"yearName\": {\n      return \"year\";\n    }\n\n    case \"unknown\": {\n      return \"literal\";\n    }\n\n    default: {\n      return type;\n    }\n  }\n}\n\nfunction formatNumericSegments(\n  segments: Intl.DateTimeFormatPart[],\n  displayValue: IncompleteDate,\n  resolvedOptions: Intl.ResolvedDateTimeFormatOptions,\n  locale: string\n): void {\n  // In order to allow formatting temporarily invalid dates during editing (e.g. February 30th),\n  // use a NumberFormatter to manually format segments directly from raw numbers.\n  // When the user blurs the date field, the invalid segments will be constrained.\n  const numberFormatter = new NumberFormatter(locale, { useGrouping: false });\n\n  const twoDigitFormatter = new NumberFormatter(locale, {\n    minimumIntegerDigits: 2,\n    useGrouping: false,\n  });\n\n  for (const segment of segments) {\n    if (\n      segment.type === \"year\" ||\n      segment.type === \"month\" ||\n      segment.type === \"day\" ||\n      segment.type === \"hour\"\n    ) {\n      const value = displayValue[segment.type] ?? 0;\n\n      segment.value =\n        resolvedOptions[segment.type] === \"2-digit\"\n          ? twoDigitFormatter.format(value)\n          : numberFormatter.format(value);\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/datepicker/create-date-picker-state.d.ts

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDatePickerState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { FormValidationState } from "../form/create-form-validation-state.js";
+import { OverlayTriggerState } from "../overlays/create-overlay-trigger-state.js";
+import { DatePickerProps, DateValue, Granularity, TimeValue } from "./types.js";
+import { FieldOptions, FormatterOptions } from "./utils.js";
+import { DateFormatter } from "@internationalized/date";
+import { ValidationState } from "@solid2-aria/types-shared";
+export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> {
+  /**
+   * Determines whether the date picker popover should close automatically when a date is selected.
+   *
+   * @default true
+   */
+  shouldCloseOnSelect?: boolean | (() => boolean);
+}
+export interface DatePickerState extends OverlayTriggerState, FormValidationState {
+  /** The currently selected date. */
+  value: DateValue | null;
+  /** The default date. */
+  defaultValue: DateValue | null;
+  /** Sets the selected date. */
+  setValue: (value: DateValue | null) => void;
+  /**
+   * The date portion of the value. This may be set prior to `value` if the user has
+   * selected a date but has not yet selected a time.
+   */
+  dateValue: DateValue | null;
+  /** Sets the date portion of the value. */
+  setDateValue: (value: DateValue) => void;
+  /**
+   * The time portion of the value. This may be set prior to `value` if the user has
+   * selected a time but has not yet selected a date.
+   */
+  timeValue: TimeValue | null;
+  /** Sets the time portion of the value. */
+  setTimeValue: (value: TimeValue) => void;
+  /** The granularity for the field, based on the `granularity` prop and current value. */
+  granularity: Granularity;
+  /**
+   * Whether the date picker supports selecting a time, according to the `granularity` prop and
+   * current value.
+   */
+  hasTime: boolean;
+  /** Whether the calendar popover is currently open. */
+  isOpen: boolean;
+  /** Sets whether the calendar popover is open. */
+  setOpen: (isOpen: boolean) => void;
+  /**
+   * The current validation state of the date picker, based on the `validationState`, `minValue`,
+   * and `maxValue` props.
+   *
+   * @deprecated Use `isInvalid` instead.
+   */
+  validationState: ValidationState | null;
+  /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+  isInvalid: boolean;
+  /** Formats the selected value using the given options. */
+  formatValue: (locale: string, fieldOptions: FieldOptions) => string;
+  /** Gets a formatter based on state's props. */
+  getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter;
+}
+/**
+ * Provides state management for a date picker component. A date picker combines a DateField and a
+ * Calendar popover to allow users to enter or select a date and time value.
+ */
+export declare function createDatePickerState<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerState;
+//# sourceMappingURL=create-date-picker-state.d.ts.map