ropav 0.2.0 → 0.3.0

package/dist/composables/use-date-range-picker-state.js

@@ -0,0 +1,237 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { useOverlayTriggerState } from "./use-overlay-trigger-state.js";
+import { useFormValidationState } from "./use-form-validation-state.js";
+import { getFormatOptions, getPlaceholderTime } from "../utils/date-format.js";
+import { getRangeValidationResult } from "../utils/date-validation.js";
+import { useDefaultDateProps } from "./use-default-date-props.js";
+import { computed, shallowRef, toValue } from "vue";
+import { DateFormatter, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+//#region src/composables/use-date-range-picker-state.ts
+var EMPTY = Object.freeze({
+	end: null,
+	start: null
+});
+var isComplete = (range) => range?.start != null && range.end != null;
+var isCompleteTime = (range) => range?.start != null && range.end != null;
+/**
+* The state behind a date range picker: the two ends of the range, whether the popover is open, and
+* how the dates and the times are assembled into one value.
+*
+* Ported from react-stately's `packages/react-stately/src/datepicker/useDateRangePickerState.ts`
+* (react-stately 3.49.0).
+*
+* Two things separate this from a single picker. The value the caller owns is only ever a complete
+* range, so a half-typed one is held here instead and emitted as `null` — which is why what is on
+* screen and what has been emitted are two different things. And the picker owns the validation for
+* both fields inside it: they report through this state rather than each reaching a verdict about
+* one end in isolation.
+*/
+var useDateRangePickerState = (options) => {
+	const overlay = useOverlayTriggerState({
+		defaultOpen: options.defaultOpen,
+		isOpen: () => toValue(options.isOpen),
+		onOpenChange: options.onOpenChange
+	});
+	const { setState: setControlledValue, state: controlledValue } = useControllableState({
+		defaultValue: toValue(options.defaultValue) ?? null,
+		onValueChange: options.onChange,
+		value: () => toValue(options.value)
+	});
+	const initialValue = controlledValue.value;
+	/**
+	* The half-typed range, kept here because the caller only ever sees a complete one.
+	*
+	* Cleared when the value is taken away, so a picker reset from outside does not go on showing the
+	* range it used to hold.
+	*/
+	const pending = shallowRef(controlledValue.value ?? EMPTY);
+	const value = computed(() => {
+		const current = controlledValue.value;
+		if (current) return current;
+		if (pending.value.start && pending.value.end) return EMPTY;
+		return pending.value;
+	});
+	const setValue = (next) => {
+		pending.value = next ?? EMPTY;
+		setControlledValue(isComplete(pending.value) ? pending.value : null);
+	};
+	/** Whatever end the picker can learn its shape from, even before anything is chosen. */
+	const shape = computed(() => value.value.start || value.value.end || toValue(options.placeholderValue) || null);
+	const { defaultTimeZone, granularity } = useDefaultDateProps(shape, () => toValue(options.granularity));
+	const hasTime = computed(() => granularity.value === "hour" || granularity.value === "minute" || granularity.value === "second");
+	const pendingDates = shallowRef(null);
+	const pendingTimes = shallowRef(null);
+	const dateRange = computed(() => isComplete(value.value) ? value.value : pendingDates.value);
+	const timeRange = computed(() => {
+		const current = value.value;
+		if (isComplete(current) && "hour" in current.start) return current;
+		return pendingTimes.value;
+	});
+	const showEra = computed(() => value.value.start?.calendar.identifier === "gregory" && value.value.start.era === "BC" || value.value.end?.calendar.identifier === "gregory" && value.value.end.era === "BC");
+	const formatOpts = computed(() => ({
+		granularity: granularity.value,
+		hideTimeZone: toValue(options.hideTimeZone),
+		hourCycle: toValue(options.hourCycle),
+		shouldForceLeadingZeros: toValue(options.shouldForceLeadingZeros),
+		showEra: showEra.value,
+		timeZone: defaultTimeZone.value
+	}));
+	const validation = useFormValidationState({
+		builtinValidation: computed(() => getRangeValidationResult(value.value, toValue(options.minValue), toValue(options.maxValue), options.isDateUnavailable, formatOpts.value)),
+		isInvalid: () => toValue(options.isInvalid),
+		name: () => [toValue(options.startName), toValue(options.endName)].filter(Boolean),
+		validate: () => options.validate,
+		validationBehavior: () => toValue(options.validationBehavior),
+		value: () => controlledValue.value
+	});
+	/** Whether picking a range should close the popover, which the caller may decide per press. */
+	const shouldCloseOnSelect = () => {
+		const requested = toValue(options.shouldCloseOnSelect) ?? true;
+		return typeof requested === "function" ? requested() : requested;
+	};
+	const placeholderTime = () => getPlaceholderTime(toValue(options.placeholderValue));
+	const commitValue = (dates, times) => {
+		setValue({
+			end: "timeZone" in times.end ? times.end.set(toCalendarDate(dates.end)) : toCalendarDateTime(dates.end, times.end),
+			start: "timeZone" in times.start ? times.start.set(toCalendarDate(dates.start)) : toCalendarDateTime(dates.start, times.start)
+		});
+		pendingDates.value = null;
+		pendingTimes.value = null;
+		validation.commitValidation();
+	};
+	/**
+	* Take a range of days from the calendar without disturbing the times.
+	*
+	* The calendar only knows about days, so committing its answer directly would reset the clock on
+	* a range that already had one.
+	*/
+	const setDateRange = (range) => {
+		const shouldClose = shouldCloseOnSelect();
+		const times = timeRange.value;
+		if (hasTime.value) {
+			if (isComplete(range) && (shouldClose || times?.start && times.end)) commitValue(range, {
+				end: times?.end ?? placeholderTime(),
+				start: times?.start ?? placeholderTime()
+			});
+			else pendingDates.value = range;
+		} else if (isComplete(range)) {
+			setValue(range);
+			validation.commitValidation();
+		} else pendingDates.value = range;
+		if (shouldClose) overlay.setOpen(false);
+	};
+	const setTimeRange = (range) => {
+		const dates = dateRange.value;
+		if (isComplete(dates) && isCompleteTime(range)) commitValue(dates, range);
+		else pendingTimes.value = range;
+	};
+	return {
+		...validation,
+		...overlay,
+		dateRange,
+		defaultValue: computed(() => toValue(options.defaultValue) ?? initialValue),
+		formatValue: (locale, fieldOptions) => {
+			const current = value.value;
+			if (!isComplete(current)) return null;
+			const startTimeZone = "timeZone" in current.start ? current.start.timeZone : void 0;
+			const endTimeZone = "timeZone" in current.end ? current.end.timeZone : void 0;
+			const requested = toValue(options.granularity);
+			const startGranularity = requested ?? ("minute" in current.start ? "minute" : "day");
+			const endGranularity = requested ?? ("minute" in current.end ? "minute" : "day");
+			const era = current.start.calendar.identifier === "gregory" && current.start.era === "BC" || current.end.calendar.identifier === "gregory" && current.end.era === "BC";
+			const startOptions = getFormatOptions(fieldOptions, {
+				granularity: startGranularity,
+				hideTimeZone: toValue(options.hideTimeZone),
+				hourCycle: toValue(options.hourCycle),
+				showEra: era,
+				timeZone: startTimeZone
+			});
+			const startDate = current.start.toDate(startTimeZone || "UTC");
+			const endDate = current.end.toDate(endTimeZone || "UTC");
+			const startFormatter = new DateFormatter(locale, startOptions);
+			let endFormatter;
+			if (startTimeZone === endTimeZone && startGranularity === endGranularity && current.start.compare(current.end) !== 0) {
+				try {
+					const parts = startFormatter.formatRangeToParts(startDate, endDate);
+					let separator = -1;
+					for (let index = 0; index < parts.length; index += 1) {
+						const part = parts[index];
+						if (part.source === "shared" && part.type === "literal") separator = index;
+						else if (part.source === "endRange") break;
+					}
+					let start = "";
+					let end = "";
+					for (let index = 0; index < parts.length; index += 1) if (index < separator) start += parts[index].value;
+					else if (index > separator) end += parts[index].value;
+					return {
+						end,
+						start
+					};
+				} catch {}
+				endFormatter = startFormatter;
+			} else endFormatter = new DateFormatter(locale, getFormatOptions(fieldOptions, {
+				granularity: endGranularity,
+				hideTimeZone: toValue(options.hideTimeZone),
+				hourCycle: toValue(options.hourCycle),
+				timeZone: endTimeZone
+			}));
+			return {
+				end: endFormatter.format(endDate),
+				start: startFormatter.format(startDate)
+			};
+		},
+		getDateFormatter: (locale, formatOptions) => new DateFormatter(locale, getFormatOptions({}, {
+			...formatOpts.value,
+			...formatOptions
+		})),
+		granularity,
+		hasTime,
+		isInvalid: computed(() => validation.displayValidation.value.isInvalid),
+		setDate: (part, date) => {
+			const dates = dateRange.value;
+			setDateRange(part === "start" ? {
+				end: dates?.end ?? null,
+				start: date
+			} : {
+				end: date,
+				start: dates?.start ?? null
+			});
+		},
+		setDateRange,
+		setDateTime: (part, dateTime) => {
+			const current = value.value;
+			setValue(part === "start" ? {
+				end: current.end,
+				start: dateTime
+			} : {
+				end: dateTime,
+				start: current.start
+			});
+		},
+		setOpen: (isOpen) => {
+			const dates = dateRange.value;
+			const times = timeRange.value;
+			if (!isOpen && !isComplete(value.value) && isComplete(dates) && hasTime.value) commitValue(dates, {
+				end: times?.end ?? placeholderTime(),
+				start: times?.start ?? placeholderTime()
+			});
+			overlay.setOpen(isOpen);
+		},
+		setTime: (part, time) => {
+			const times = timeRange.value;
+			setTimeRange(part === "start" ? {
+				end: times?.end ?? null,
+				start: time
+			} : {
+				end: time,
+				start: times?.start ?? null
+			});
+		},
+		setTimeRange,
+		setValue,
+		timeRange,
+		value
+	};
+};
+//#endregion
+export { useDateRangePickerState };

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

@@ -0,0 +1,119 @@
+import type { DayOfWeek } from "../utils/calendar";
+import type { FocusManager } from "../utils/focus";
+import type { PageBehavior } from "./use-calendar-state";
+import type { DateRangePickerState } from "./use-date-range-picker-state";
+import type { FieldIdsContext } from "./use-field-ids";
+import type { FormValidationState } from "./use-form-validation-state";
+import type { UsePressHandlers } from "./use-press";
+import type { DateValue } from "@internationalized/date";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseDateRangePickerOptions {
+    id?: MaybeRefOrGetter<string | undefined>;
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
+    ariaDescribedby?: MaybeRefOrGetter<string | undefined>;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    isReadOnly?: MaybeRefOrGetter<boolean | undefined>;
+    minValue?: MaybeRefOrGetter<DateValue | null | undefined>;
+    maxValue?: MaybeRefOrGetter<DateValue | null | undefined>;
+    /**
+     * Rules a date out even though it is inside the range.
+     *
+     * A plain callback rather than a getter: `toValue` cannot tell a predicate from a getter that
+     * returns one, so it would invoke the predicate with no date and use whatever came back.
+     */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** Whether a range may span a date that is unavailable. */
+    allowsNonContiguousRanges?: MaybeRefOrGetter<boolean | undefined>;
+    /** Which month the calendar opens on while nothing is chosen yet. */
+    placeholderValue?: MaybeRefOrGetter<DateValue | null | undefined>;
+    firstDayOfWeek?: MaybeRefOrGetter<DayOfWeek | undefined>;
+    pageBehavior?: MaybeRefOrGetter<PageBehavior | undefined>;
+    /** The group around both rows of segments and the trigger. A getter: it does not exist yet. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+}
+/** What one of the two date fields nested inside the picker needs from it. */
+export interface DateRangePickerFieldOptions {
+    ariaLabel: ComputedRef<string>;
+    ariaDescribedBy: ComputedRef<string | undefined>;
+    ariaLabelledBy: ComputedRef<string | undefined>;
+    /**
+     * `"presentation"`, always.
+     *
+     * The picker already carries the group role, its name and its description; a second group role on
+     * either row of segments would have a screen reader announce the same thing twice.
+     */
+    role: "presentation";
+    /**
+     * The picker's own focus manager, shared by both fields.
+     *
+     * One row of segments spans *two* fields here, so arrow keys have to move across a boundary
+     * neither field can see — which is why the manager belongs to the picker.
+     */
+    focusManager: FocusManager;
+    /** The verdict this end reports through, which the picker merges with the other end's. */
+    validationState: FormValidationState;
+}
+/** What the range calendar inside the popover is driven by. */
+export interface DateRangePickerCalendarProps {
+    ariaLabel: string;
+    autoFocus: boolean;
+    value: {
+        start: DateValue;
+        end: DateValue;
+    } | null;
+    onChange: (value: {
+        start: DateValue;
+        end: DateValue;
+    } | null) => void;
+    minValue?: DateValue | null;
+    maxValue?: DateValue | null;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    allowsNonContiguousRanges?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid: boolean;
+    defaultFocusedValue?: DateValue | null;
+    firstDayOfWeek?: DayOfWeek;
+    pageBehavior?: PageBehavior;
+}
+export interface UseDateRangePickerReturn {
+    /** Spread with `v-bind` onto the group around both rows of segments. No `on*` key. */
+    groupAttrs: ComputedRef<Record<string, unknown>>;
+    /** Wire with `@event`, never with `v-bind`. */
+    groupHandlers: UsePressHandlers & {
+        onKeydown: (event: KeyboardEvent) => void;
+        onFocusin: (event: FocusEvent) => void;
+        onFocusout: (event: FocusEvent) => void;
+    };
+    /** Spread onto the button that opens the popover. */
+    triggerAttrs: ComputedRef<Record<string, unknown>>;
+    /** Whether the button is out of action: a read-only picker has nothing to pick. */
+    isTriggerDisabled: ComputedRef<boolean>;
+    onTriggerPress: () => void;
+    /** Spread onto the popover's dialog element. */
+    dialogAttrs: ComputedRef<Record<string, unknown>>;
+    /** Bind onto the range calendar inside the popover. */
+    calendarProps: ComputedRef<DateRangePickerCalendarProps>;
+    startField: DateRangePickerFieldOptions;
+    endField: DateRangePickerFieldOptions;
+    /** Pass to `provideFieldIdsContext` so the label, description and error message get their ids. */
+    fieldIds: FieldIdsContext;
+}
+/**
+ * The behaviour and accessibility wiring for a date range picker.
+ *
+ * Ported from react-aria's `packages/react-aria/src/datepicker/useDateRangePicker.ts`
+ * (react-aria 3.51.0).
+ *
+ * Where a single picker hands one field its wiring, this hands two — and that is the whole reason
+ * the wiring travels at all. One row of segments spans both fields, so the focus manager has to be
+ * the picker's; and one value spans both ends, so neither field may reach a verdict of its own.
+ * Each reports its browser-level verdict here, and the picker merges the two before either is
+ * shown. react-aria smuggles the same things through a module-level `WeakMap` keyed by the state
+ * object plus two symbol props; here they are returned for the root to publish through `provide`.
+ */
+export declare const useDateRangePicker: (options: UseDateRangePickerOptions, state: DateRangePickerState) => UseDateRangePickerReturn;

package/dist/composables/use-date-range-picker.js

@@ -0,0 +1,187 @@
+import { useId as useId$1 } from "./use-id.js";
+import { createFocusManager } from "../utils/focus.js";
+import { useFieldIds } from "./use-field-ids.js";
+import { DEFAULT_VALIDATION_RESULT, mergeValidation } from "./use-form-validation-state.js";
+import { useLocale } from "./use-locale.js";
+import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
+import { useDescription } from "./use-description.js";
+import { datepickerStrings } from "../i18n/datepicker.js";
+import { useDatePickerGroup } from "./use-date-picker-group.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-date-range-picker.ts
+/**
+* The behaviour and accessibility wiring for a date range picker.
+*
+* Ported from react-aria's `packages/react-aria/src/datepicker/useDateRangePicker.ts`
+* (react-aria 3.51.0).
+*
+* Where a single picker hands one field its wiring, this hands two — and that is the whole reason
+* the wiring travels at all. One row of segments spans both fields, so the focus manager has to be
+* the picker's; and one value spans both ends, so neither field may reach a verdict of its own.
+* Each reports its browser-level verdict here, and the picker merges the two before either is
+* shown. react-aria smuggles the same things through a module-level `WeakMap` keyed by the state
+* object plus two symbol props; here they are returned for the root to publish through `provide`.
+*/
+var useDateRangePicker = (options, state) => {
+	const strings = useLocalizedStringFormatter(datepickerStrings);
+	const locale = useLocale();
+	const groupId = useId$1(() => toValue(options.id));
+	const triggerId = useId$1();
+	const dialogId = useId$1();
+	const focusManager = createFocusManager(() => toValue(options.element), { accept: (element) => element.id !== triggerId.value });
+	const { context: fieldIds, describedBy: fieldDescribedBy, labelId } = useFieldIds({
+		labelElementType: "span",
+		onLabelClick: () => focusManager.focusFirst(),
+		slots: [
+			"label",
+			"description",
+			"errorMessage"
+		]
+	});
+	/**
+	* The range in words, for a screen reader to read after the picker's own name.
+	*
+	* The segments read as bare numbers, so the months spelled out are what make them dates.
+	*/
+	const valueDescription = computed(() => {
+		const range = state.formatValue(locale.value.locale, { month: "long" });
+		return range ? strings.value.format("selectedRangeDescription", {
+			endDate: range.end,
+			startDate: range.start
+		}) : "";
+	});
+	const { describedBy: valueDescribedBy } = useDescription(valueDescription);
+	const describedBy = computed(() => [
+		valueDescribedBy.value,
+		fieldDescribedBy.value,
+		toValue(options.ariaDescribedby)
+	].filter(Boolean).join(" ") || void 0);
+	/** The label this picker actually has, which is nothing at all when none was rendered. */
+	const ownLabelledBy = computed(() => [labelId.value, toValue(options.ariaLabelledby)].filter(Boolean).join(" ") || void 0);
+	/**
+	* What names the picker: an explicit reference, else its own label, else the group itself.
+	*
+	* The last fallback looks circular and is upstream's: with no label rendered, the group is named
+	* by its own contents, and pointing at itself is what keeps the trigger's name — which is built
+	* from this — from being left dangling.
+	*/
+	const labelledBy = computed(() => ownLabelledBy.value || groupId.value);
+	const group = useDatePickerGroup({
+		element: options.element,
+		setOpen: (open) => state.setOpen(open)
+	});
+	/**
+	* Whether focus is somewhere inside the picker, tracked by hand rather than through
+	* `useFocusWithin`.
+	*
+	* Moving between the two fields never left the picker, and neither does opening the popover —
+	* focus lands in the calendar, which is not in this subtree at all but is still part of the same
+	* picker as far as the caller is concerned.
+	*/
+	let isFocused = false;
+	const onFocusin = (event) => {
+		if (isFocused) return;
+		isFocused = true;
+		options.onFocus?.(event);
+		options.onFocusChange?.(true);
+	};
+	const onFocusout = (event) => {
+		if (!isFocused) return;
+		const next = event.relatedTarget;
+		if (next instanceof Node) {
+			if (toValue(options.element)?.contains(next)) return;
+			if (document.getElementById(dialogId.value)?.contains(next)) return;
+		}
+		isFocused = false;
+		options.onBlur?.(event);
+		options.onFocusChange?.(false);
+	};
+	let startValidation = DEFAULT_VALIDATION_RESULT;
+	let endValidation = DEFAULT_VALIDATION_RESULT;
+	/**
+	* A validation state for one end, reporting through the picker's.
+	*
+	* Only `updateValidation` differs from the picker's own: what a field hands in describes half the
+	* value, so it is merged with whatever the other half last said before the picker takes it.
+	*/
+	const fieldValidation = (part) => ({
+		commitValidation: state.commitValidation,
+		displayValidation: state.displayValidation,
+		realtimeValidation: state.realtimeValidation,
+		resetValidation: state.resetValidation,
+		updateValidation: (result) => {
+			if (part === "start") startValidation = result;
+			else endValidation = result;
+			state.updateValidation(mergeValidation(startValidation, endValidation));
+		},
+		validationBehavior: state.validationBehavior
+	});
+	const field = (part) => ({
+		ariaDescribedBy: describedBy,
+		ariaLabel: computed(() => strings.value.format(part === "start" ? "startDate" : "endDate")),
+		ariaLabelledBy: ownLabelledBy,
+		focusManager,
+		role: "presentation",
+		validationState: fieldValidation(part)
+	});
+	return {
+		calendarProps: computed(() => {
+			const range = state.dateRange.value;
+			return {
+				allowsNonContiguousRanges: toValue(options.allowsNonContiguousRanges),
+				ariaLabel: strings.value.format("calendar"),
+				autoFocus: true,
+				defaultFocusedValue: range ? void 0 : toValue(options.placeholderValue),
+				firstDayOfWeek: toValue(options.firstDayOfWeek),
+				isDateUnavailable: options.isDateUnavailable,
+				isDisabled: toValue(options.isDisabled),
+				isInvalid: state.isInvalid.value,
+				isReadOnly: toValue(options.isReadOnly),
+				maxValue: toValue(options.maxValue),
+				minValue: toValue(options.minValue),
+				onChange: (value) => state.setDateRange(value ?? {
+					end: null,
+					start: null
+				}),
+				pageBehavior: toValue(options.pageBehavior),
+				value: range?.start && range.end ? {
+					end: range.end,
+					start: range.start
+				} : null
+			};
+		}),
+		dialogAttrs: computed(() => ({
+			"aria-labelledby": [triggerId.value, labelledBy.value].filter(Boolean).join(" ") || void 0,
+			id: dialogId.value
+		})),
+		endField: field("end"),
+		fieldIds,
+		groupAttrs: computed(() => ({
+			"aria-describedby": describedBy.value,
+			"aria-disabled": toValue(options.isDisabled) || void 0,
+			"aria-label": toValue(options.ariaLabel) || void 0,
+			"aria-labelledby": labelledBy.value,
+			id: groupId.value,
+			role: "group"
+		})),
+		groupHandlers: {
+			...group.handlers,
+			onFocusin,
+			onFocusout,
+			onKeydown: group.onKeydown
+		},
+		isTriggerDisabled: computed(() => Boolean(toValue(options.isDisabled)) || Boolean(toValue(options.isReadOnly))),
+		onTriggerPress: () => state.setOpen(true),
+		startField: field("start"),
+		triggerAttrs: computed(() => ({
+			"aria-describedby": describedBy.value,
+			"aria-expanded": state.isOpen.value,
+			"aria-haspopup": "dialog",
+			"aria-label": strings.value.format("calendar"),
+			"aria-labelledby": [triggerId.value, labelledBy.value].filter(Boolean).join(" ") || void 0,
+			id: triggerId.value
+		}))
+	};
+};
+//#endregion
+export { useDateRangePicker };

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

@@ -0,0 +1,43 @@
+import type { FocusManager } from "../utils/focus";
+import type { DateFieldState, DateSegment } from "./use-date-field-state";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseDateSegmentOptions {
+    /** The segment this is behaviour for. A getter, because the field rebuilds them on every edit. */
+    segment: MaybeRefOrGetter<DateSegment>;
+    state: DateFieldState;
+    /** Moves focus to the next or previous segment. The field owns it; the segment only uses it. */
+    focusManager: FocusManager;
+    /** The segment's element. A getter, because it does not exist yet at setup. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /** The field's own label, repeated on each segment because VoiceOver skips groups on iOS. */
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledBy?: MaybeRefOrGetter<string | undefined>;
+    ariaDescribedBy?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseDateSegmentReturn {
+    /** Attributes for the segment. Spread with `v-bind`; never carries an `on*` key. */
+    attrs: ComputedRef<Record<string, unknown>>;
+    /** Inline styles for the segment, which carry the bidi handling. */
+    style: ComputedRef<Record<string, string>>;
+    onKeydown: (event: KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onBeforeinput: (event: InputEvent) => void;
+    onInput: (event: Event) => void;
+    /** Keeps a press on a segment from reaching the field, which would move focus elsewhere. */
+    onPointerdown: (event: PointerEvent) => void;
+    onMousedown: (event: MouseEvent) => void;
+}
+/**
+ * Behaviour and accessibility for one segment of a date field.
+ *
+ * Ported from React Aria's `packages/react-aria/src/datepicker/useDateSegment.ts`
+ * (react-aria 3.51.0).
+ *
+ * A segment is a `contenteditable` span that behaves like a spin button: arrows step it, digits
+ * type into it, and it hands focus on to the next segment as soon as no further digit could fit.
+ * Everything the browser would normally do with the typed text is cancelled — `beforeinput` is
+ * always prevented and the state decides what the segment shows — so the DOM never disagrees with
+ * the value.
+ */
+export declare const useDateSegment: (options: UseDateSegmentOptions) => UseDateSegmentReturn;