import { Calendar, AnyDateTime, DateValue, DateFormatter, CalendarIdentifier } from '@internationalized/date'; import { Service, Machine } from '@zag-js/core'; import { DateGranularity } from '@zag-js/date-utils'; import { LiveRegion } from '@zag-js/live-region'; import { RequiredBy, DirectionProperty, CommonProperties, PropTypes } from '@zag-js/types'; type HourCycle$1 = "h12" | "h11" | "h23" | "h24"; declare function resolvedHourCycle(formatter: DateFormatter): HourCycle$1; declare function incompleteDateHash(dv: IncompleteDate): string; declare function incompleteDateEqual(a: IncompleteDate, b: IncompleteDate): boolean; declare function initDisplayValues(value: DateValue[] | undefined, placeholderValue: DateValue, hourCycle: HourCycle$1, count: number): IncompleteDate[]; /** * Represents a date that is incomplete or otherwise invalid as a result of user editing. * Each field can be independently null (= placeholder / not yet entered by the user). * Ported from React Spectrum's IncompleteDate with minimal changes. */ declare class IncompleteDate { calendar: Calendar; era: string | null; year: number | null; month: number | null; day: number | null; hour: number | null; hourCycle: HourCycle$1; dayPeriod: number | null; minute: number | null; second: number | null; millisecond: number | null; offset: number | null; constructor(calendar: Calendar, hourCycle: HourCycle$1, dateValue?: Partial> | null); copy(): IncompleteDate; /** Rebuild this date under a new hour cycle, preserving all field values. */ withHourCycle(nextHourCycle: HourCycle$1): IncompleteDate; /** Checks whether all the specified segments have a value. */ isComplete(segments: SegmentType[]): boolean; /** Checks if the date is empty (i.e. all specified segments are null). */ isCleared(segments: SegmentType[]): boolean; /** Sets the given field. */ set(field: SegmentType, value: number | string, placeholder: DateValue): IncompleteDate; /** Sets the given field to null. */ clear(field: SegmentType): IncompleteDate; /** Increments or decrements the given field. If it is null, then it is set to the placeholder value (no increment on first press). */ cycle(field: SegmentType, amount: number, placeholder: DateValue, displaySegments: SegmentType[]): IncompleteDate; /** Converts the incomplete date to a full date value, using the provided value for any unset fields. */ toValue(value: DateValue): DateValue; getSegmentLimits(type: string): { value: number | null; minValue: number; maxValue: number; } | undefined; /** Returns a debug string of all non-null fields. Returns "-" when all fields are null. */ toString(): string; } declare function toHourCycle(hour: number, hourCycle: HourCycle$1): [number | null, number]; declare function needsTimeGranularity(granularity: DateGranularity): boolean; interface FormatterOptions { granularity: DateGranularity; digitStyle: "2-digit" | "numeric"; hourCycle: "h12" | "h23" | undefined; timeZone: string; /** True when the value is a ZonedDateTime — adds the `timeZoneName` segment. */ hasTimeZone?: boolean | undefined; /** Hides the `timeZoneName` segment even when `hasTimeZone` is true. */ hideTimeZone?: boolean | undefined; } declare function getFormatterOptions(opts: FormatterOptions): Intl.DateTimeFormatOptions; declare function resolveAllSegments(formatter: DateFormatter): Segments; declare const EDITABLE_SEGMENTS: { readonly year: true; readonly month: true; readonly day: true; readonly hour: true; readonly minute: true; readonly second: true; readonly dayPeriod: true; readonly era: true; readonly literal: false; readonly timeZoneName: false; readonly weekday: false; readonly unknown: false; readonly fractionalSecond: false; }; declare const PAGE_STEP: { readonly year: 5; readonly month: 2; readonly day: 7; readonly hour: 2; readonly minute: 15; readonly second: 15; readonly dayPeriod: undefined; readonly era: undefined; readonly literal: undefined; readonly timeZoneName: undefined; readonly weekday: undefined; readonly unknown: undefined; readonly fractionalSecond: undefined; }; declare function getSegmentLabel(type: string): string; declare const TYPE_MAPPING: { readonly dayperiod: "dayPeriod"; readonly relatedYear: "year"; readonly yearName: "literal"; readonly unknown: "literal"; }; interface ProcessSegmentsProps { dateValue: Date; displayValue: IncompleteDate; formatter: DateFormatter; locale: string; translations: IntlTranslations; granularity: DateGranularity; } declare function processSegments({ dateValue, displayValue, formatter, locale, translations, granularity, }: ProcessSegmentsProps): DateSegment[]; interface ValueChangeDetails { value: DateValue[]; valueAsString: string[]; } interface PlaceholderChangeDetails extends ValueChangeDetails { placeholderValue: DateValue; } interface FocusChangeDetails { focused: boolean; } interface FormatDateDetails { locale: string; timeZone: string; } type SelectionMode = "single" | "range"; type HourCycle = 12 | 24; interface IntlTranslations { placeholder: (locale: string) => Record; } type ElementIds = Partial<{ root: string; label: (index: number) => string; control: string; segmentGroup: (index: number) => string; hiddenInput: (index: number) => string; }>; interface DateInputProps extends DirectionProperty, CommonProperties { /** * The locale (BCP 47 language tag) to use when formatting the date. * @default "en-US" */ locale?: string | undefined; /** * A function that creates a calendar object for a given calendar identifier. * Use this to support non-Gregorian calendars (e.g., Persian, Islamic, Buddhist). * * @example * import { createCalendar } from "@internationalized/date" * { locale: "fa-IR", createCalendar } */ createCalendar?: ((identifier: CalendarIdentifier) => Calendar) | undefined; /** * The localized messages to use. */ translations?: IntlTranslations | undefined; /** * The ids of the elements in the date input. Useful for composition. */ ids?: ElementIds | undefined; /** * The `name` attribute of the input element. */ name?: string | undefined; /** * The `form` attribute of the hidden input element. */ form?: string | undefined; /** * The time zone to use * @default "UTC" */ timeZone?: string | undefined; /** * Whether the date input is disabled. */ disabled?: boolean | undefined; /** * Whether the date input is read-only. */ readOnly?: boolean | undefined; /** * Whether the date input is required */ required?: boolean | undefined; /** * Whether the date input is invalid */ invalid?: boolean | undefined; /** * Returns whether a date is unavailable. * When a committed date matches, the input is marked as invalid. */ isDateUnavailable?: ((date: DateValue, locale: string) => boolean) | undefined; /** * The minimum date that can be selected. */ min?: DateValue | undefined; /** * The maximum date that can be selected. */ max?: DateValue | undefined; /** * The controlled selected date(s). */ value?: DateValue[] | undefined; /** * The initial selected date(s) when rendered. * Use when you don't need to control the selected date(s). */ defaultValue?: DateValue[] | undefined; /** * The controlled placeholder date. */ placeholderValue?: DateValue | undefined; /** * The initial placeholder date when rendered. */ defaultPlaceholderValue?: DateValue | undefined; /** * Function called when the value changes. */ onValueChange?: ((details: ValueChangeDetails) => void) | undefined; /** * A function called when the placeholder value changes. */ onPlaceholderChange?: ((details: PlaceholderChangeDetails) => void) | undefined; /** * A function called when the date input gains or loses focus. */ onFocusChange?: ((details: FocusChangeDetails) => void) | undefined; /** * The selection mode of the date input. * - `single` - only one date can be entered * - `range` - a range of dates can be entered (start and end) * * @default "single" */ selectionMode?: SelectionMode | undefined; /** * Whether to use 12-hour or 24-hour time format. * By default, this is determined by the locale. */ hourCycle?: HourCycle | undefined; /** * Whether to hide the time zone segment when the value is a `ZonedDateTime`. * Has no effect for values without a time zone. * @default false */ hideTimeZone?: boolean | undefined; /** * Determines the smallest unit that is displayed in the date input. * @default "day" */ granularity?: DateGranularity | undefined; /** * Whether to always show leading zeros in month, day, and hour fields. * When false, formatting follows the locale default (e.g. "1" instead of "01"). * @default false */ shouldForceLeadingZeros?: boolean | undefined; /** * The date formatter to use. */ formatter?: DateFormatter | undefined; /** * The computed segments map for the formatter. */ allSegments?: Segments | undefined; /** * The format function for converting a DateValue to a string. */ format?: ((date: DateValue, details: FormatDateDetails) => string) | undefined; } type PropsWithDefault = "selectionMode" | "locale" | "timeZone" | "granularity" | "translations" | "shouldForceLeadingZeros" | "formatter" | "allSegments" | "format"; interface PrivateContext { /** * The index of the currently active date (for range mode). */ activeIndex: number; /** * The index of the currently active segment. */ activeSegmentIndex: number; /** * The selected date(s). */ value: DateValue[]; /** * The placeholder date. */ placeholderValue: DateValue; /** * Per-group editing state. Each IncompleteDate tracks which segments have been * filled in by the user (non-null = entered, null = placeholder). Replaces the * previous editingValue + validSegments pair. */ displayValues: IncompleteDate[]; /** * Accumulated keys entered in the focused segment. */ enteredKeys: string; } type ComputedContext = Readonly<{ /** * Whether the date input is interactive. */ isInteractive: boolean; /** * The number of date groups (1 for single, 2 for range). */ groupCount: number; /** * The value text to display. */ valueAsString: string[]; /** * A list of segments for the selected date(s). */ segments: DateSegment[][]; }>; type Refs = { announcer: LiveRegion | null; /** Segment index to announce (for SEGMENT.INPUT with auto-advance). Set before advance, used after. */ segmentToAnnounceIndex: number | null; }; interface DateInputSchema { state: "idle" | "focused"; props: RequiredBy; context: PrivateContext; computed: ComputedContext; refs: Refs; guard: string; action: string; effect: string; } type DateInputService = Service; type DateInputMachine = Machine; type SegmentType = "era" | "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod" | "literal" | "timeZoneName"; type Segments = Partial<{ -readonly [K in keyof typeof EDITABLE_SEGMENTS]: boolean; }>; type EditableSegmentType = { [K in keyof typeof EDITABLE_SEGMENTS]: (typeof EDITABLE_SEGMENTS)[K] extends true ? K : never; }[keyof typeof EDITABLE_SEGMENTS]; interface DateSegment { /** * The type of segment. */ type: SegmentType; /** * The formatted text for the segment. */ text: string; /** * The numeric value for the segment, if applicable. */ value?: number; /** * The minimum numeric value for the segment, if applicable. */ minValue?: number; /** * The maximum numeric value for the segment, if applicable. */ maxValue?: number; /** * Whether the value is a placeholder. */ isPlaceholder: boolean; /** * A placeholder string for the segment. */ placeholder: string; /** * Whether the segment is editable. */ isEditable: boolean; } interface SegmentGroupProps { index?: number | undefined; } interface SegmentsProps { index?: number | undefined; } interface SegmentProps { segment: DateSegment; index?: number | undefined; } interface SegmentState { editable: boolean; focused: boolean; readonly: boolean; } interface LabelProps { index?: number | undefined; } interface HiddenInputProps { index?: number | undefined; name?: string | undefined; } interface DateInputApi { /** * Whether the date input is focused */ focused: boolean; /** * Whether the date input is disabled */ disabled: boolean; /** * Whether the date input is invalid */ invalid: boolean; /** * The selected date(s). */ value: DateValue[]; /** * The selected date(s) as Date objects. */ valueAsDate: Date[]; /** * The selected date(s) as strings. */ valueAsString: string[]; /** * The placeholder date. */ placeholderValue: DateValue; /** * Per-group editing state. Each IncompleteDate tracks which segments have been * filled in by the user (non-null = entered, null = placeholder). */ displayValues: IncompleteDate[]; /** * Focuses the first segment. */ focus: VoidFunction; /** * Sets the selected date(s) to the given values. */ setValue: (values: DateValue[]) => void; /** * Clears the selected date(s). */ clearValue: VoidFunction; /** * Returns the segments for the given index. */ getSegments: (props?: SegmentsProps | undefined) => DateSegment[]; /** * Returns the state details for a given segment. */ getSegmentState: (props: SegmentProps) => SegmentState; getRootProps: () => T["element"]; getLabelProps: (props?: LabelProps) => T["label"]; getControlProps: () => T["element"]; getSegmentGroupProps: (props?: SegmentGroupProps | undefined) => T["element"]; getSegmentProps: (props: SegmentProps) => T["element"]; getHiddenInputProps: (props?: HiddenInputProps | undefined) => T["input"]; } export { resolveAllSegments as A, resolvedHourCycle as B, toHourCycle as C, type DateInputApi as D, EDITABLE_SEGMENTS as E, type FocusChangeDetails as F, type HiddenInputProps as H, IncompleteDate as I, type LabelProps as L, PAGE_STEP as P, type SegmentGroupProps as S, TYPE_MAPPING as T, type ValueChangeDetails as V, type DateInputMachine as a, type DateInputProps as b, type DateInputSchema as c, type DateInputService as d, type DateSegment as e, type EditableSegmentType as f, type ElementIds as g, type FormatDateDetails as h, type FormatterOptions as i, type HourCycle as j, type HourCycle$1 as k, type IntlTranslations as l, type PlaceholderChangeDetails as m, type SegmentProps as n, type SegmentState as o, type SegmentType as p, type Segments as q, type SegmentsProps as r, type SelectionMode as s, getFormatterOptions as t, getSegmentLabel as u, incompleteDateEqual as v, incompleteDateHash as w, initDisplayValues as x, needsTimeGranularity as y, processSegments as z };