import * as React from 'react'; import { type Granularity, type HourCycle, type SegmentPlaceholderResolver, type SegmentType, type SegmentValues } from './date-segments.js'; import { type Direction } from './direction.js'; import { type FormValidityHandle } from './formControl.js'; import { type PrimitivePropsWithRef } from './primitive.js'; /** The `aria-valuetext` an untyped segment announces, so a spinbutton never reads a value the user did not enter. */ export declare const EMPTY_VALUE_TEXT = "Empty"; /** Accessible name of each segment, spelled for speech not code; exported so `getSegmentLabel` can fall back to it for types a consumer doesn't want to re-word. */ export declare const SEGMENT_LABELS: Record; /** Props for {@link SegmentedField}. @internal */ export interface SegmentedFieldProps extends Omit, 'defaultValue' | 'onChange' | 'dir'> { /** @internal The family rendering this field, so each segment can name itself (`skdx-date-field__segment` or `skdx-time-field__segment`). */ family: 'date-field' | 'time-field'; /** `'date'` renders year/month/day ahead of the time segments. */ kind: 'date' | 'time'; /** How far down the field is editable. */ granularity: Granularity; /** BCP-47 locale deciding segment order, literals and AM/PM names. */ locale?: string | undefined; /** Forced hour cycle; omitted follows the locale. */ hourCycle?: HourCycle | undefined; /** Current per-segment values. */ values: SegmentValues; /** See {@link DateFieldProps.shouldForceLeadingZeros}. */ shouldForceLeadingZeros?: boolean | undefined; /** * See {@link TimeFieldProps.step} — seconds, driving both the finest * segment's arrow increment and the mirrored input's `step` attribute. */ step?: number | undefined; /** Called with the next per-segment values after any edit. */ onValuesChange: (values: SegmentValues) => void; /** Value submitted by the hidden input; `null` submits an empty entry. */ formValue: string | null; /** `type` of the mirrored input; not cosmetic, since it's what makes the browser check `min`/`max` natively and report `rangeUnderflow`/`rangeOverflow` through `checkValidity()`. */ formType: 'date' | 'datetime-local' | 'time'; /** `min` of the mirrored input, in the same wire shape as `formValue`. */ formMin?: string | undefined; /** `max` of the mirrored input, in the same wire shape as `formValue`. */ formMax?: string | undefined; /** Pulls the values a `Home`/`End` keystroke produced back inside the field's own `min`/`max`; only these two clamp, since typing and arrow-stepping must still reach out-of-range values for `rangeUnderflow`/`rangeOverflow` to fire. */ clampEdgeValues?: ((values: SegmentValues) => SegmentValues) | undefined; disabled?: boolean | undefined; readOnly?: boolean | undefined; invalid?: boolean | undefined; required?: boolean | undefined; name?: string | undefined; /** Id of the `
` this field submits into when rendered outside it (a portalled Dialog); forwarded to the hidden input and to `useFormReset`. */ form?: string | undefined; /** Writing direction override; without it, direction is read off the DOM. */ dir?: Direction | undefined; /** See {@link SegmentedLabelProps.getSegmentLabel}. */ getSegmentLabel?: ((type: SegmentType) => string) | undefined; /** See {@link SegmentedLabelProps.emptySegmentText}. */ emptySegmentText?: string | undefined; /** See {@link SegmentedLabelProps.getSegmentPlaceholder}. */ getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined; /** Called when the owning `` is reset, so the field can put its segments back to the value it declared; `DateField`/`TimeField` own that value. */ onFormReset?: (() => void) | undefined; } /** The three strings a segmented field shows or announces that `locale` cannot translate: each segment's accessible name, an untyped segment's `aria-valuetext`, and its placeholder letters; shared verbatim by `DateFieldProps` and `TimeFieldProps`. */ export interface SegmentedLabelProps { /** * Words the accessible name of one segment, called per segment type; return the built-in {@link SEGMENT_LABELS} entry for the ones you don't want to change. * @default undefined — the built-in English names ('year', 'month', 'AM/PM', …). */ getSegmentLabel?: ((type: SegmentType) => string) | undefined; /** * The `aria-valuetext` an untyped segment announces instead of a number it * does not have. * @default 'Empty' */ emptySegmentText?: string | undefined; /** * Words the placeholder letters one segment shows before typed, called per segment type; return the built-in {@link SEGMENT_PLACEHOLDERS} entry for the ones you don't want to change. The separators are locale-derived, these letters are not. * @default undefined — the built-in English letters ('yyyy', 'mm', 'dd', …). */ getSegmentPlaceholder?: SegmentPlaceholderResolver | undefined; } /** @internal Renders one segmented field: a `role="group"` holding a `role="spinbutton"` per editable segment plus a hidden input for form submission; a `
` ancestor does not disable the spinbuttons on its own, since they aren't native controls. */ export declare const SegmentedField: { ({ family, kind, granularity, locale, hourCycle, values, shouldForceLeadingZeros, step, onValuesChange, formValue, formType, formMin, formMax, clampEdgeValues, disabled, readOnly, invalid, required, name, form, dir, getSegmentLabel, emptySegmentText, getSegmentPlaceholder, onFormReset, asChild, children, ref: forwardedRef, ...props }: Omit & { ref?: React.Ref | undefined; }): React.ReactNode; displayName: string; };