ropav 0.2.0 → 0.3.0

package/dist/composables/use-date-field-state.js

@@ -0,0 +1,289 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { useFormValidationState } from "./use-form-validation-state.js";
+import { useLocale } from "./use-locale.js";
+import { convertValue, createPlaceholderDate, getFormatOptions } from "../utils/date-format.js";
+import { getDatePlaceholder } from "../utils/date-placeholder.js";
+import { getDateValidationResult } from "../utils/date-validation.js";
+import { IncompleteDate } from "../utils/incomplete-date.js";
+import { useDefaultDateProps } from "./use-default-date-props.js";
+import { computed, shallowRef, toValue } from "vue";
+import { DateFormatter, GregorianCalendar, isEqualCalendar, toCalendar } from "@internationalized/date";
+import { NumberFormatter } from "@internationalized/number";
+//#region src/composables/use-date-field-state.ts
+/** Segments the user can type into. Literals and the time zone name are display only. */
+var EDITABLE_SEGMENTS = {
+	day: true,
+	dayPeriod: true,
+	era: true,
+	hour: true,
+	minute: true,
+	month: true,
+	second: true,
+	year: true
+};
+/** How far Page Up and Page Down move each segment. */
+var PAGE_STEP = {
+	day: 7,
+	hour: 2,
+	minute: 15,
+	month: 2,
+	second: 15,
+	year: 5
+};
+/** Part types `Intl.DateTimeFormat` reports under other names. */
+var TYPE_MAPPING = {
+	dayperiod: "dayPeriod",
+	relatedYear: "year",
+	unknown: "literal",
+	yearName: "literal"
+};
+/** Unicode isolates, used to keep a time reading left to right inside a right-to-left field. */
+var LTR_ISOLATE = "⁦";
+var POP_ISOLATE = "⁩";
+/**
+* The state behind a date field: which segments it has, what each one shows, and what typing or
+* stepping one of them does.
+*
+* Ported from react-stately's `packages/react-stately/src/datepicker/useDateFieldState.ts`
+* (react-stately 3.49.0).
+*
+* The value the owner sees and the value on screen are deliberately two different things. A field
+* being typed into can hold "February 30" or a year with no month, neither of which is a real date,
+* so an `IncompleteDate` carries what is displayed and `onChange` only fires once the segments add
+* up to a date that survives its own validation.
+*/
+var useDateFieldState = (options) => {
+	const { createCalendar } = options;
+	const resolvedLocale = useLocale();
+	const locale = computed(() => toValue(options.locale) ?? resolvedLocale.value.locale);
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)));
+	const isReadOnly = computed(() => Boolean(toValue(options.isReadOnly)));
+	const isRequired = computed(() => Boolean(toValue(options.isRequired)));
+	const maxGranularity = computed(() => toValue(options.maxGranularity) ?? "year");
+	/** Whatever value the field can learn its shape from, even before anything is typed. */
+	const shape = computed(() => toValue(options.value) || toValue(options.defaultValue) || toValue(options.placeholderValue) || null);
+	const { defaultTimeZone, granularity } = useDefaultDateProps(shape, () => toValue(options.granularity));
+	const timeZone = computed(() => defaultTimeZone.value || "UTC");
+	/** The calendar system and clock the locale implies, unless the caller overrode the clock. */
+	const calendarAndHourCycle = computed(() => {
+		const requested = toValue(options.hourCycle);
+		const resolved = new DateFormatter(locale.value, {
+			dateStyle: "short",
+			hour12: requested != null ? requested === 12 : void 0,
+			timeStyle: "short"
+		}).resolvedOptions();
+		return [createCalendar(resolved.calendar), resolved.hourCycle];
+	});
+	const calendar = computed(() => calendarAndHourCycle.value[0]);
+	const hourCycle = computed(() => calendarAndHourCycle.value[1]);
+	const { setState: setDate, state: value } = useControllableState({
+		defaultValue: toValue(options.defaultValue) ?? null,
+		onValueChange: options.onChange,
+		value: () => toValue(options.value)
+	});
+	const initialValue = value.value;
+	const calendarValue = computed(() => convertValue(value.value, calendar.value) ?? null);
+	/**
+	* A half-typed value the field is showing instead of its real one.
+	*
+	* Stamped with the inputs it was derived from: when the value, calendar or clock changes
+	* underneath, the override is stale and the display goes back to following the real value.
+	* React does the same check by comparing against `useState` copies during render.
+	*/
+	const override = shallowRef(null);
+	const displayValue = computed(() => {
+		const current = override.value;
+		if (current && current.value === calendarValue.value && current.hourCycle === hourCycle.value && isEqualCalendar(current.calendar, calendar.value)) return current.date;
+		return new IncompleteDate(calendar.value, hourCycle.value, calendarValue.value);
+	});
+	const setDisplayValue = (date) => {
+		override.value = date == null ? null : {
+			calendar: calendar.value,
+			date,
+			hourCycle: hourCycle.value,
+			value: calendarValue.value
+		};
+	};
+	const showEra = computed(() => calendar.value.identifier === "gregory" && displayValue.value.era === "BC");
+	const formatOpts = computed(() => ({
+		granularity: granularity.value,
+		hideTimeZone: toValue(options.hideTimeZone),
+		hourCycle: toValue(options.hourCycle),
+		maxGranularity: maxGranularity.value,
+		shouldForceLeadingZeros: toValue(options.shouldForceLeadingZeros),
+		showEra: showEra.value,
+		timeZone: defaultTimeZone.value
+	}));
+	const dateFormatter = computed(() => new DateFormatter(locale.value, getFormatOptions({}, formatOpts.value)));
+	const resolvedOptions = computed(() => dateFormatter.value.resolvedOptions());
+	const placeholder = computed(() => createPlaceholderDate(toValue(options.placeholderValue), granularity.value, calendar.value, defaultTimeZone.value));
+	/**
+	* The segments the field is meant to show, in order.
+	*
+	* Kept separate from the formatter's own parts because this list drives "is the value complete
+	* enough to emit", where literals and the time zone name have no say.
+	*/
+	const displaySegments = computed(() => {
+		const is12Hour = hourCycle.value === "h11" || hourCycle.value === "h12";
+		const all = [
+			"era",
+			"year",
+			"month",
+			"day",
+			"hour",
+			...is12Hour ? ["dayPeriod"] : [],
+			"minute",
+			"second"
+		];
+		const from = all.indexOf(toValue(options.maxGranularity) ?? "era");
+		const to = all.indexOf(granularity.value === "hour" && is12Hour ? "dayPeriod" : granularity.value);
+		return all.slice(from, to + 1);
+	});
+	const setValue = (next) => {
+		if (isDisabled.value || isReadOnly.value) return;
+		if (next == null || next instanceof IncompleteDate && next.isCleared(displaySegments.value)) {
+			setDisplayValue(null);
+			setDate(null);
+			return;
+		}
+		if (!(next instanceof IncompleteDate)) {
+			setDisplayValue(null);
+			setDate(toCalendar(next, shape.value?.calendar ?? new GregorianCalendar()));
+			return;
+		}
+		if (next.isComplete(displaySegments.value)) {
+			const asDate = next.toValue(calendarValue.value ?? placeholder.value);
+			if (next.validate(asDate, displaySegments.value)) {
+				const emitted = toCalendar(asDate, shape.value?.calendar ?? new GregorianCalendar());
+				if (!value.value || emitted.compare(value.value) !== 0) {
+					setDisplayValue(null);
+					setDate(emitted);
+					return;
+				}
+			}
+		}
+		setDisplayValue(next);
+	};
+	const dateValue = computed(() => displayValue.value.toValue(calendarValue.value ?? placeholder.value).toDate(timeZone.value));
+	const segments = computed(() => processSegments(dateValue.value, displayValue.value, dateFormatter.value, resolvedOptions.value, calendar.value, locale.value, granularity.value));
+	const builtinValidation = computed(() => getDateValidationResult(value.value, toValue(options.minValue), toValue(options.maxValue), options.isDateUnavailable, formatOpts.value));
+	const validation = useFormValidationState({
+		builtinValidation,
+		isInvalid: () => toValue(options.isInvalid),
+		name: () => toValue(options.name),
+		validate: () => options.validate,
+		validationBehavior: () => toValue(options.validationBehavior),
+		validationState: options.validationState,
+		value: () => value.value
+	});
+	const adjustSegment = (type, amount) => {
+		setValue(displayValue.value.cycle(type, amount, placeholder.value, displaySegments.value));
+	};
+	return {
+		...validation,
+		calendar,
+		clearSegment: (type) => {
+			const cleared = type === "timeZoneName" || type === "literal" ? displayValue.value : displayValue.value.clear(type);
+			setValue(cleared);
+		},
+		confirmPlaceholder: () => {
+			if (isDisabled.value || isReadOnly.value) return;
+			if (displayValue.value.isComplete(displaySegments.value)) {
+				const asDate = displayValue.value.toValue(calendarValue.value ?? placeholder.value);
+				const emitted = toCalendar(asDate, shape.value?.calendar ?? new GregorianCalendar());
+				if (!value.value || emitted.compare(value.value) !== 0) setDate(emitted);
+				setDisplayValue(null);
+			}
+		},
+		dateFormatter,
+		dateValue,
+		decrement: (type) => adjustSegment(type, -1),
+		decrementPage: (type) => adjustSegment(type, -(PAGE_STEP[type] ?? 1)),
+		decrementToMin: (type) => {
+			const min = type === "hour" && hourCycle.value === "h12" ? 12 : displayValue.value.getSegmentLimits(type).minValue;
+			setValue(displayValue.value.set(type, min, placeholder.value));
+		},
+		defaultValue: computed(() => toValue(options.defaultValue) ?? initialValue),
+		formatValue: (fieldOptions) => {
+			if (!calendarValue.value) return "";
+			return new DateFormatter(locale.value, getFormatOptions(fieldOptions, formatOpts.value)).format(dateValue.value);
+		},
+		getDateFormatter: (formatterLocale, formatOptions) => new DateFormatter(formatterLocale, getFormatOptions({}, {
+			...formatOpts.value,
+			...formatOptions
+		})),
+		granularity,
+		increment: (type) => adjustSegment(type, 1),
+		incrementPage: (type) => adjustSegment(type, PAGE_STEP[type] ?? 1),
+		incrementToMax: (type) => {
+			const max = type === "hour" && hourCycle.value === "h12" ? 11 : displayValue.value.getSegmentLimits(type).maxValue;
+			setValue(displayValue.value.set(type, max, placeholder.value));
+		},
+		isDisabled,
+		isInvalid: computed(() => validation.displayValidation.value.isInvalid),
+		isReadOnly,
+		isRequired,
+		maxGranularity,
+		segments,
+		setSegment: (type, next) => setValue(displayValue.value.set(type, next, placeholder.value)),
+		setValue,
+		value: calendarValue
+	};
+};
+/**
+* Turn a formatted date into the segments a field renders.
+*
+* The numbers are written from the raw values rather than taken from `formatToParts`, because the
+* date handed to the formatter has already been constrained — showing its output would snap a
+* half-typed February 30 back to the 28th while the user is still on the day segment.
+*/
+var processSegments = (dateValue, displayValue, dateFormatter, resolvedOptions, calendar, locale, granularity) => {
+	const parts = dateFormatter.formatToParts(dateValue);
+	const numberFormatter = new NumberFormatter(locale, { useGrouping: false });
+	const twoDigitFormatter = new NumberFormatter(locale, {
+		minimumIntegerDigits: 2,
+		useGrouping: false
+	});
+	const written = parts.map((part) => {
+		if (part.type === "year" || part.type === "month" || part.type === "day" || part.type === "hour") {
+			const raw = displayValue[part.type] ?? 0;
+			const formatter = resolvedOptions[part.type] === "2-digit" ? twoDigitFormatter : numberFormatter;
+			return {
+				...part,
+				value: formatter.format(raw)
+			};
+		}
+		return part;
+	});
+	const result = [];
+	const isTime = (type) => type === "hour" || type === "minute" || type === "second";
+	const literal = (text) => ({
+		isEditable: false,
+		isPlaceholder: false,
+		placeholder: "",
+		text,
+		type: "literal"
+	});
+	for (const part of written) {
+		const type = TYPE_MAPPING[part.type] ?? part.type;
+		const isEditable = Boolean(EDITABLE_SEGMENTS[type]) && !(type === "era" && calendar.getEras().length === 1);
+		const isPlaceholder = Boolean(EDITABLE_SEGMENTS[type]) && displayValue[part.type] == null;
+		const placeholder = EDITABLE_SEGMENTS[type] ? getDatePlaceholder(type, part.value, locale) : "";
+		const segment = {
+			...displayValue.getSegmentLimits(type),
+			isEditable,
+			isPlaceholder,
+			placeholder,
+			text: isPlaceholder ? placeholder : part.value,
+			type
+		};
+		if (type === "hour") {
+			result.push(literal(LTR_ISOLATE), segment);
+			if (type === granularity) result.push(literal(POP_ISOLATE));
+		} else if (isTime(type) && type === granularity) result.push(segment, literal(POP_ISOLATE));
+		else result.push(segment);
+	}
+	return result;
+};
+//#endregion
+export { useDateFieldState };

package/dist/composables/use-date-field.d.ts

@@ -0,0 +1,95 @@
+import type { FocusManager } from "../utils/focus";
+import type { DateFieldState } from "./use-date-field-state";
+import type { FieldIdsContext } from "./use-field-ids";
+import type { UsePressHandlers } from "./use-press";
+import type { TimeFieldState } from "./use-time-field-state";
+import type { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+/** What a segment needs from the field it belongs to. */
+export interface DateFieldSegmentInfo {
+    /** Moves focus along the row of segments. Shared with the picker above, when there is one. */
+    focusManager: FocusManager;
+    ariaLabel: ComputedRef<string | undefined>;
+    ariaLabelledBy: ComputedRef<string | undefined>;
+    ariaDescribedBy: ComputedRef<string | undefined>;
+}
+export interface UseDateFieldOptions {
+    state: DateFieldState;
+    /** The group element around the segments. A getter, because it does not exist yet at setup. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /** The hidden input a form submits and the browser validates against. */
+    inputElement: Ref<HTMLInputElement | null | undefined>;
+    /**
+     * What that input carries, when it is not the field's own value. A time field holds a whole date
+     * internally so the segment machinery has something to work with; a form gets the time alone.
+     */
+    inputValue?: MaybeRefOrGetter<string | undefined>;
+    /** Id for the group around the segments, which is where React puts a field's own id too. */
+    id?: MaybeRefOrGetter<string | undefined>;
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledBy?: MaybeRefOrGetter<string | undefined>;
+    ariaDescribedBy?: MaybeRefOrGetter<string | undefined>;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
+    name?: MaybeRefOrGetter<string | undefined>;
+    form?: MaybeRefOrGetter<string | undefined>;
+    autoFocus?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * `"presentation"` for a field nested in a picker.
+     *
+     * The picker already carries the group role, its label and its description, and the segments are
+     * already labelled by all of it, so a second group there would be announced twice over.
+     */
+    role?: MaybeRefOrGetter<"group" | "presentation" | undefined>;
+    /** A focus manager belonging to a picker whose row of segments spans two fields. */
+    focusManager?: FocusManager;
+    /** Opens the overlay a picker owns, so Alt with an arrow reaches it from the field. */
+    setOpen?: (open: boolean) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+}
+export interface UseDateFieldReturn {
+    /** Pass to `provideFieldIdsContext`. */
+    fieldIds: FieldIdsContext;
+    /** Attributes for the group around the segments. Spread with `v-bind`. */
+    attrs: ComputedRef<Record<string, unknown>>;
+    /** Inline styles for the group, which keep the segments in their own bidi run. */
+    style: ComputedRef<Record<string, string>>;
+    /** Attributes for the hidden input a form reads. */
+    inputAttrs: ComputedRef<Record<string, unknown>>;
+    segment: DateFieldSegmentInfo;
+    onKeydown: (event: KeyboardEvent) => void;
+    onFocusin: (event: FocusEvent) => void;
+    onFocusout: (event: FocusEvent) => void;
+    /** Press listeners for the group. Attach each one statically, never through `v-bind`. */
+    handlers: UsePressHandlers;
+    /** Clicking a label that names a group has to put focus somewhere itself. */
+    onLabelClick: () => void;
+    isFocusWithin: ComputedRef<boolean>;
+    isInvalid: ComputedRef<boolean>;
+    validationErrors: ComputedRef<string[]>;
+    validationDetails: ComputedRef<ValidityState>;
+}
+/**
+ * Behaviour and accessibility for a date field: the group around the segments, the hidden input a
+ * form reads, and the labelling every segment repeats.
+ *
+ * Ported from React Aria's `packages/react-aria/src/datepicker/useDateField.ts`
+ * (react-aria 3.51.0).
+ *
+ * React passes the labelling and the focus manager down to the segments through a module-level
+ * `WeakMap` keyed by the state, plus two string keys standing in for symbols. Here they are
+ * returned as `segment` instead, for the field to publish however it likes — which is what lets a
+ * picker's segments work with no field root of their own above them.
+ */
+export declare const useDateField: (options: UseDateFieldOptions) => UseDateFieldReturn;
+export interface UseTimeFieldOptions extends Omit<UseDateFieldOptions, "state"> {
+    state: TimeFieldState;
+}
+/**
+ * The same field, submitting a time rather than a date.
+ *
+ * Ported from React Aria's `useTimeField`. A time field carries a date internally so the segment
+ * machinery has something whole to work with; what a form receives has to be the time alone.
+ */
+export declare const useTimeField: (options: UseTimeFieldOptions) => UseDateFieldReturn;

package/dist/composables/use-date-field.js

@@ -0,0 +1,170 @@
+import { useId as useId$1 } from "./use-id.js";
+import { useFocusWithin } from "./use-interaction-states.js";
+import { createFocusManager } from "../utils/focus.js";
+import { useFieldIds } from "./use-field-ids.js";
+import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
+import { useDescription } from "./use-description.js";
+import { datepickerStrings } from "../i18n/datepicker.js";
+import { useFormReset } from "./use-form-reset.js";
+import { useFormValidation } from "./use-form-validation.js";
+import { setFormValue } from "../utils/form-value.js";
+import { useDatePickerGroup } from "./use-date-picker-group.js";
+import { computed, toValue, watch, watchEffect } from "vue";
+//#region src/composables/use-date-field.ts
+/**
+* Behaviour and accessibility for a date field: the group around the segments, the hidden input a
+* form reads, and the labelling every segment repeats.
+*
+* Ported from React Aria's `packages/react-aria/src/datepicker/useDateField.ts`
+* (react-aria 3.51.0).
+*
+* React passes the labelling and the focus manager down to the segments through a module-level
+* `WeakMap` keyed by the state, plus two string keys standing in for symbols. Here they are
+* returned as `segment` instead, for the field to publish however it likes — which is what lets a
+* picker's segments work with no field root of their own above them.
+*/
+var useDateField = (options) => {
+	const { state } = options;
+	const isPresentation = computed(() => toValue(options.role) === "presentation");
+	const { context: fieldIds, describedBy: fieldDescribedBy, labelId } = useFieldIds({
+		labelElementType: "span",
+		onLabelClick: () => focusManager.focusFirst(),
+		slots: [
+			"label",
+			"description",
+			"errorMessage"
+		]
+	});
+	const focusManager = options.focusManager ?? createFocusManager(() => toValue(options.element));
+	const group = useDatePickerGroup({
+		disableArrowNavigation: isPresentation,
+		element: options.element,
+		setOpen: options.setOpen
+	});
+	const groupId = useId$1(() => toValue(options.id));
+	const strings = useLocalizedStringFormatter(datepickerStrings);
+	/**
+	* The value in words, for a screen reader to read after the field's own name.
+	*
+	* Written out in full rather than left to the segments: "6/5/2026" read segment by segment is
+	* three numbers, and the month spelled out is what makes it a date.
+	*/
+	const valueDescription = computed(() => {
+		if (!state.value.value) return "";
+		const isTime = state.maxGranularity.value === "hour";
+		return strings.value.format(isTime ? "selectedTimeDescription" : "selectedDateDescription", { [isTime ? "time" : "date"]: state.formatValue({ month: "long" }) });
+	});
+	const { describedBy: valueDescribedBy } = useDescription(valueDescription);
+	const ownDescribedBy = computed(() => {
+		const ids = [fieldDescribedBy.value, toValue(options.ariaDescribedBy)].filter(Boolean);
+		return ids.length > 0 ? ids.join(" ") : void 0;
+	});
+	const describedBy = computed(() => {
+		if (isPresentation.value) return ownDescribedBy.value;
+		const ids = [valueDescribedBy.value, ownDescribedBy.value].filter(Boolean);
+		return ids.length > 0 ? ids.join(" ") : void 0;
+	});
+	const labelledBy = computed(() => {
+		const ids = [labelId.value, toValue(options.ariaLabelledBy)].filter(Boolean);
+		return ids.length > 0 ? ids.join(" ") : void 0;
+	});
+	const focusWithin = useFocusWithin();
+	/** What the field held when focus arrived, so leaving it can tell whether anything changed. */
+	let valueOnFocus = state.value.value;
+	const onFocusin = (event) => {
+		const wasWithin = focusWithin.isFocusWithin.value;
+		focusWithin.onFocusin();
+		if (wasWithin) return;
+		valueOnFocus = state.value.value;
+		options.onFocus?.(event);
+		options.onFocusChange?.(true);
+	};
+	const onFocusout = (event) => {
+		const wasWithin = focusWithin.isFocusWithin.value;
+		focusWithin.onFocusout(event);
+		if (!wasWithin || focusWithin.isFocusWithin.value) return;
+		state.confirmPlaceholder();
+		if (state.value.value !== valueOnFocus) state.commitValidation();
+		options.onBlur?.(event);
+		options.onFocusChange?.(false);
+	};
+	const inputValue = computed(() => toValue(options.inputValue) ?? state.value.value?.toString() ?? "");
+	useFormReset(options.inputElement, state.defaultValue, state.setValue);
+	watch([options.inputElement, inputValue], ([input, text]) => setFormValue(input, text), {
+		flush: "post",
+		immediate: true
+	});
+	useFormValidation(options.inputElement, state, { focus: () => focusManager.focusFirst() });
+	let pendingAutoFocus = true;
+	watchEffect(() => {
+		if (!pendingAutoFocus) return;
+		pendingAutoFocus = false;
+		if (toValue(options.autoFocus)) focusManager.focusFirst();
+	}, { flush: "post" });
+	const attrs = computed(() => {
+		if (isPresentation.value) {
+			const ownId = toValue(options.id);
+			return ownId ? {
+				id: ownId,
+				role: "presentation"
+			} : { role: "presentation" };
+		}
+		const all = {
+			"aria-describedby": describedBy.value,
+			"aria-disabled": toValue(options.isDisabled) || void 0,
+			"aria-label": toValue(options.ariaLabel),
+			"aria-labelledby": labelledBy.value,
+			id: groupId.value,
+			role: "group"
+		};
+		for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
+		return all;
+	});
+	const inputAttrs = computed(() => {
+		const isNative = state.validationBehavior.value === "native";
+		const all = {
+			disabled: toValue(options.isDisabled) || void 0,
+			form: toValue(options.form),
+			hidden: isNative || void 0,
+			name: toValue(options.name),
+			required: isNative && toValue(options.isRequired) || void 0,
+			type: isNative ? "text" : "hidden",
+			value: inputValue.value
+		};
+		for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
+		return all;
+	});
+	return {
+		attrs,
+		fieldIds,
+		handlers: group.handlers,
+		inputAttrs,
+		isFocusWithin: focusWithin.isFocusWithin,
+		isInvalid: computed(() => state.displayValidation.value.isInvalid),
+		onFocusin,
+		onFocusout,
+		onKeydown: group.onKeydown,
+		onLabelClick: () => focusManager.focusFirst(),
+		segment: {
+			ariaDescribedBy: describedBy,
+			ariaLabel: computed(() => toValue(options.ariaLabel)),
+			ariaLabelledBy: labelledBy,
+			focusManager
+		},
+		style: computed(() => ({ unicodeBidi: "isolate" })),
+		validationDetails: computed(() => state.displayValidation.value.validationDetails),
+		validationErrors: computed(() => state.displayValidation.value.validationErrors)
+	};
+};
+/**
+* The same field, submitting a time rather than a date.
+*
+* Ported from React Aria's `useTimeField`. A time field carries a date internally so the segment
+* machinery has something whole to work with; what a form receives has to be the time alone.
+*/
+var useTimeField = (options) => useDateField({
+	...options,
+	inputValue: () => options.state.timeValue.value?.toString() ?? ""
+});
+//#endregion
+export { useDateField, useTimeField };

package/dist/composables/use-date-formatter.d.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+import { DateFormatter } from "@internationalized/date";
+export interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
+    /** The calendar system to format in, when it should not follow the locale's own. */
+    calendar?: string;
+}
+/**
+ * An `Intl.DateTimeFormat` for the locale that applies here, ported from React Aria's
+ * `packages/react-aria/src/i18n/useDateFormatter.ts` (react-aria 3.51.0).
+ *
+ * `@internationalized/date`'s `DateFormatter` rather than `Intl` directly, because it carries the
+ * `formatToParts` and calendar handling the date components read.
+ *
+ * React Aria memoises the options object here, so that re-rendering with an equal-but-new literal
+ * does not rebuild the formatter. That guard is not carried over, because two separate things
+ * already do its job: a `computed` only re-runs when something it read actually changed, and Vapor
+ * hands a prop on only when its value differs — an equal replacement never reaches this code.
+ * `DateFormatter` also caches the underlying `Intl.DateTimeFormat` per locale and options, so the
+ * expensive half is shared even when the wrapper is rebuilt.
+ */
+export declare const useDateFormatter: (options?: MaybeRefOrGetter<DateFormatterOptions | undefined>) => ComputedRef<DateFormatter>;

package/dist/composables/use-date-formatter.js

@@ -0,0 +1,24 @@
+import { useLocale } from "./use-locale.js";
+import { computed, toValue } from "vue";
+import { DateFormatter } from "@internationalized/date";
+//#region src/composables/use-date-formatter.ts
+/**
+* An `Intl.DateTimeFormat` for the locale that applies here, ported from React Aria's
+* `packages/react-aria/src/i18n/useDateFormatter.ts` (react-aria 3.51.0).
+*
+* `@internationalized/date`'s `DateFormatter` rather than `Intl` directly, because it carries the
+* `formatToParts` and calendar handling the date components read.
+*
+* React Aria memoises the options object here, so that re-rendering with an equal-but-new literal
+* does not rebuild the formatter. That guard is not carried over, because two separate things
+* already do its job: a `computed` only re-runs when something it read actually changed, and Vapor
+* hands a prop on only when its value differs — an equal replacement never reaches this code.
+* `DateFormatter` also caches the underlying `Intl.DateTimeFormat` per locale and options, so the
+* expensive half is shared even when the wrapper is rebuilt.
+*/
+var useDateFormatter = (options) => {
+	const locale = useLocale();
+	return computed(() => new DateFormatter(locale.value.locale, toValue(options) ?? {}));
+};
+//#endregion
+export { useDateFormatter };

package/dist/composables/use-date-picker-group.d.ts

@@ -0,0 +1,36 @@
+import type { FocusManager } from "../utils/focus";
+import type { UsePressHandlers } from "./use-press";
+import type { MaybeRefOrGetter } from "vue";
+export interface UseDatePickerGroupOptions {
+    /** The element focus moves around inside. A getter, because it does not exist yet at setup. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /**
+     * Opens the overlay this group belongs to.
+     *
+     * Absent on a plain field, which has no overlay, and then Alt with an arrow is left alone.
+     */
+    setOpen?: (open: boolean) => void;
+    /**
+     * Leaves the arrow keys alone, for a field nested inside a picker that steers them itself.
+     */
+    disableArrowNavigation?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseDatePickerGroupReturn {
+    /** Moves focus between the group's segments. The segments themselves need it too. */
+    focusManager: FocusManager;
+    /** Wire on the group with `@keydown`. */
+    onKeydown: (event: KeyboardEvent) => void;
+    /** Press listeners for the group. Attach each one statically, never through `v-bind`. */
+    handlers: UsePressHandlers;
+}
+/**
+ * Keyboard and pointer behaviour for the group around a field's segments.
+ *
+ * Ported from React Aria's `packages/react-aria/src/datepicker/useDatePickerGroup.ts`
+ * (react-aria 3.51.0).
+ *
+ * Clicking the empty part of a field is the interesting case: it puts the cursor on the last
+ * segment before the click that still has nothing in it, so clicking a half-filled field carries
+ * on where the typing left off rather than jumping to the end.
+ */
+export declare const useDatePickerGroup: (options: UseDatePickerGroupOptions) => UseDatePickerGroupReturn;