import type { Granularity, HourCycle, SegmentPlaceholderResolver, SegmentType } from '../utils/date-segments.js'; import type { FormValidityHandle } from '../utils/formControl.js'; import type { PrimitivePropsWithRef } from '../utils/primitive.js'; import type { SegmentedLabelProps } from '../utils/segmentedField.js'; /** How far down a {@link TimeField} is editable — `Granularity` minus the date-only `'day'`. */ export type TimeGranularity = Exclude; /** Props for the {@link TimeField} root. */ export interface TimeFieldProps extends Omit, 'defaultValue' | 'onChange' | 'dir'>, SegmentedLabelProps { /** * Current time as a 24-hour `HH:mm[:ss]` string or `Date` (local wall-clock, date discarded); `null` while any segment is untyped. * @default undefined — uncontrolled, tracks its own value internally. */ value?: string | Date | null | undefined; /** * Initial time, for uncontrolled usage, in the same `HH:mm[:ss]` or `Date` shape as `value`. * @default undefined — every segment starts on its placeholder. */ defaultValue?: string | Date | null | undefined; /** * Fires with the new `HH:mm[:ss]` string once every segment is filled, or `null` as soon as one is cleared. * @default undefined — no-op if omitted. */ onValueChange?: ((value: string | null) => void) | undefined; /** * How far down the field is editable; `'second'` adds a seconds segment. * @default 'minute' */ granularity?: TimeGranularity | undefined; /** * Forces 12-hour (with an AM/PM segment) or 24-hour display; `value` stays 24-hour regardless. * @default undefined — whatever the locale resolves to. */ hourCycle?: HourCycle | undefined; /** * BCP-47 locale deciding segment order, the literals between segments and the * AM/PM names. * @default undefined — the runtime's default locale. */ locale?: string | undefined; /** * Earliest accepted time (24-hour `HH:mm[:ss]` or `Date`); earlier values fail with `rangeUnderflow`. * @default undefined — any time of day. */ min?: string | Date | undefined; /** * Latest accepted time (24-hour `HH:mm[:ss]` or `Date`); later values fail with `rangeOverflow`. * @default undefined — any time of day. */ max?: string | Date | undefined; /** * Step increment in seconds, like ``; times off the grid fail with `stepMismatch`. * @default undefined — one unit of the finest segment: 60 on `minute`, 1 on `second`. */ step?: number | undefined; /** * Disables the field and drops every segment out of the tab order. * @default false */ disabled?: boolean | undefined; /** * Segments stay focusable and readable but refuse every edit. * @default false */ readOnly?: boolean | undefined; /** * Marks the field invalid, exposed as `aria-invalid`/`data-invalid`. * @default false */ invalid?: boolean | undefined; /** * Marks the field required — an incomplete field is `valueMissing`. * @default false */ required?: boolean | undefined; /** * Form field name; with it the time submits as the 24-hour `HH:mm[:ss]` string. * @default undefined */ name?: string | undefined; /** * Id of the `
` this field submits into, forwarded to the hidden input's `form` attribute for a field rendered outside it. * @default undefined — the field belongs to its nearest ancestor ``, if any. */ form?: string | undefined; /** * Writing direction, which decides whether ArrowLeft moves to the previous or * the next segment. * @default undefined — read off the nearest `[dir]` ancestor or `document.dir`. */ dir?: 'ltr' | 'rtl' | undefined; /** * Words the accessible name of one segment, called per segment type; return the built-in `SEGMENT_LABELS` entry to leave one unchanged. * @default undefined — the built-in English names ('hour', 'minute', 'AM/PM', …). */ getSegmentLabel?: ((type: SegmentType) => string) | undefined; /** * Words the placeholder letters a segment shows before typing, called per segment type; return the built-in `SEGMENT_PLACEHOLDERS` entry to leave one unchanged. * @default undefined — the built-in English letters ('hh', 'mm', 'ss', '--'). */ getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined; } /** * What {@link TimeField}'s forwarded ref carries: the root `
` plus the two constraint-validation methods, answering off the hidden input's 24-hour wire value. */ export type TimeFieldHandle = HTMLDivElement & FormValidityHandle;