bits-ui

import type { Updater } from "svelte/store"; import { Time } from "@internationalized/date"; import { type WritableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt"; import type { BitsFocusEvent, BitsInputEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js"; import type { TimeSegmentObj, SegmentPart, HourCycle, TimeValidator, TimeOnInvalid, EditableTimeSegmentPart } from "../../shared/date/types.js"; import { type TimeFormatter } from "../../internal/date-time/formatter.js"; import { type Announcer } from "../../internal/date-time/announcer.js"; import type { TimeValue } from "../../shared/date/types.js"; import type { TimeRangeFieldRootState } from "../time-range-field/time-range-field.svelte.js"; export declare const timeFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["input", "label"]>; interface SegmentConfig { min: number | ((root: TimeFieldRootState) => number); max: number | ((root: TimeFieldRootState) => number); cycle: number; canBeZero?: boolean; padZero?: boolean; } export interface TimeFieldRootStateOpts<T extends TimeValue = Time> extends WritableBoxedValues<{ value: T | undefined; placeholder: TimeValue; }>, ReadableBoxedValues<{ readonlySegments: SegmentPart[]; validate: TimeValidator<T> | undefined; onInvalid: TimeOnInvalid | undefined; minValue: TimeValue | undefined; maxValue: TimeValue | undefined; disabled: boolean; readonly: boolean; granularity: "hour" | "minute" | "second" | undefined; hourCycle: HourCycle | undefined; locale: string; hideTimeZone: boolean; required: boolean; errorMessageId: string | undefined; isInvalidProp: boolean | undefined; }> { } export declare class TimeFieldRootState<T extends TimeValue = Time> { #private; static create<T extends TimeValue = Time>(opts: TimeFieldRootStateOpts<T>, rangeRoot?: TimeRangeFieldRootState<T>): TimeFieldRootState<Time>; value: TimeFieldRootStateOpts<T>["value"]; placeholder: WritableBox<TimeValue>; validate: TimeFieldRootStateOpts<T>["validate"]; minValue: TimeFieldRootStateOpts<T>["minValue"]; maxValue: TimeFieldRootStateOpts<T>["maxValue"]; disabled: TimeFieldRootStateOpts<T>["disabled"]; readonly: TimeFieldRootStateOpts<T>["readonly"]; granularity: TimeFieldRootStateOpts<T>["granularity"]; readonlySegments: TimeFieldRootStateOpts<T>["readonlySegments"]; hourCycleProp: TimeFieldRootStateOpts<T>["hourCycle"]; locale: TimeFieldRootStateOpts<T>["locale"]; hideTimeZone: TimeFieldRootStateOpts<T>["hideTimeZone"]; required: TimeFieldRootStateOpts<T>["required"]; onInvalid: TimeFieldRootStateOpts<T>["onInvalid"]; errorMessageId: TimeFieldRootStateOpts<T>["errorMessageId"]; isInvalidProp: TimeFieldRootStateOpts<T>["isInvalidProp"]; descriptionId: string; formatter: TimeFormatter; initialSegments: TimeSegmentObj; segmentValues: TimeSegmentObj; announcer: Announcer; readonly readonlySegmentsSet: Set<SegmentPart>; segmentStates: import("../../shared/date/types.js").TimeSegmentStateMap; descriptionNode: HTMLElement | null; validationNode: HTMLElement | null; states: import("../../shared/date/types.js").TimeSegmentStateMap; hourInputDayPeriodHint: TimeSegmentObj["dayPeriod"]; dayPeriodNode: HTMLElement | null; name: string; readonly maxValueTime: Time | undefined; readonly minValueTime: Time | undefined; readonly valueTime: Time | undefined; readonly hourCycle: HourCycle; readonly rangeRoot: TimeRangeFieldRootState<T> | undefined; domContext: DOMContext; constructor(props: TimeFieldRootStateOpts<T>, rangeRoot?: TimeRangeFieldRootState<T>); setName(name: string): void; setFieldNode(node: HTMLElement | null): void; /** * Gets the correct field node for the time field regardless of whether it's being * used in a standalone context or within a `TimeRangeField` component. */ getFieldNode(): HTMLElement | null; setLabelNode(node: HTMLElement | null): void; getLabelNode(): HTMLElement | null; setValue(value: T | undefined): void; syncSegmentValues(value: TimeValue): void; validationStatus: false | { readonly reason: "custom"; readonly message: string | string[]; } | { readonly reason: "min"; readonly message?: undefined; } | { readonly reason: "max"; readonly message?: undefined; }; isInvalid: boolean; inferredGranularity: "hour" | "minute" | "second"; timeRef: T; allSegmentContent: { obj: import("../../shared/date/types.js").TimeSegmentContentObj; arr: { part: import("../../internal/date-time/field/types.js").TimeSegmentPart; value: string; }[]; }; segmentContents: { part: import("../../internal/date-time/field/types.js").TimeSegmentPart; value: string; }[]; sharedSegmentAttrs: { role: string; contenteditable: string; tabindex: number; spellcheck: boolean; inputmode: string; autocorrect: string; enterkeyhint: string; style: { caretColor: string; }; }; updateSegment<T extends EditableTimeSegmentPart>(part: T, cb: Updater<TimeSegmentObj[T]>): void; handleSegmentClick(e: BitsMouseEvent): void; getBaseSegmentAttrs(part: SegmentPart, segmentId: string): { "aria-invalid": "true" | undefined; "aria-disabled": "true" | "false"; "aria-readonly": "true" | "false"; "data-invalid": "" | undefined; "data-disabled": "" | undefined; "data-readonly": "" | undefined; "data-segment": string; } | { "aria-labelledby": string; contenteditable: string | undefined; "aria-describedby": string | undefined; tabindex: number | undefined; "aria-invalid": "true" | undefined; "aria-disabled": "true" | "false"; "aria-readonly": "true" | "false"; "data-invalid": "" | undefined; "data-disabled": "" | undefined; "data-readonly": "" | undefined; "data-segment": string; }; } interface TimeFieldInputStateOpts extends WithRefOpts, ReadableBoxedValues<{ name: string; }> { } export declare class TimeFieldInputState { #private; static create(opts: TimeFieldInputStateOpts): TimeFieldInputState; readonly opts: TimeFieldInputStateOpts; readonly root: TimeFieldRootState; readonly attachment: RefAttachment; domContext: DOMContext; constructor(opts: TimeFieldInputStateOpts, root: TimeFieldRootState); readonly props: { readonly id: string; readonly role: "group"; readonly "aria-labelledby": string | undefined; readonly "aria-describedby": string | undefined; readonly "aria-disabled": "true" | "false"; readonly "data-invalid": "" | undefined; readonly "data-disabled": "" | undefined; }; } export declare class TimeFieldHiddenInputState { static create(): TimeFieldHiddenInputState; readonly root: TimeFieldRootState; readonly shouldRender: boolean; readonly isoValue: string | undefined; constructor(root: TimeFieldRootState); readonly props: { readonly name: string; readonly value: string | undefined; readonly required: boolean; }; } interface TimeFieldLabelStateOpts extends WithRefOpts { } export declare class TimeFieldLabelState { static create(opts: TimeFieldLabelStateOpts): TimeFieldLabelState; readonly opts: TimeFieldLabelStateOpts; readonly root: TimeFieldRootState; readonly attachment: RefAttachment; constructor(opts: TimeFieldLabelStateOpts, root: TimeFieldRootState); onclick(_: BitsMouseEvent): void; readonly props: { readonly id: string; readonly "data-invalid": "" | undefined; readonly "data-disabled": "" | undefined; readonly onclick: (_: BitsMouseEvent) => void; }; } declare abstract class BaseTimeSegmentState { #private; readonly opts: WithRefOpts; readonly root: TimeFieldRootState; readonly announcer: Announcer; readonly part: string; readonly config: SegmentConfig; readonly attachment: RefAttachment; constructor(opts: WithRefOpts, root: TimeFieldRootState, part: string, config: SegmentConfig); onkeydown(e: BitsKeyboardEvent): void; onfocusout(_: BitsFocusEvent): void; getSegmentProps(): { "aria-label": string; "aria-valuemin": number; "aria-valuemax": number; "aria-valuenow": number; "aria-valuetext": string; }; props: { "aria-invalid": "true" | undefined; "aria-disabled": "true" | "false"; "aria-readonly": "true" | "false"; "data-invalid": "" | undefined; "data-disabled": "" | undefined; "data-readonly": "" | undefined; "data-segment": string; onkeydown: (e: BitsKeyboardEvent) => void; onfocusout: (_: BitsFocusEvent) => void; onclick: (e: BitsMouseEvent) => void; "aria-label": string; "aria-valuemin": number; "aria-valuemax": number; "aria-valuenow": number; "aria-valuetext": string; id: string; role: string; contenteditable: string; tabindex: number; spellcheck: boolean; inputmode: string; autocorrect: string; enterkeyhint: string; style: { caretColor: string; }; } | { "aria-labelledby": string; contenteditable: string | undefined; "aria-describedby": string | undefined; tabindex: number | undefined; "aria-invalid": "true" | undefined; "aria-disabled": "true" | "false"; "aria-readonly": "true" | "false"; "data-invalid": "" | undefined; "data-disabled": "" | undefined; "data-readonly": "" | undefined; "data-segment": string; onkeydown: (e: BitsKeyboardEvent) => void; onfocusout: (_: BitsFocusEvent) => void; onclick: (e: BitsMouseEvent) => void; "aria-label": string; "aria-valuemin": number; "aria-valuemax": number; "aria-valuenow": number; "aria-valuetext": string; id: string; role: string; spellcheck: boolean; inputmode: string; autocorrect: string; enterkeyhint: string; style: { caretColor: string; }; }; } declare class TimeFieldHourSegmentState extends BaseTimeSegmentState { constructor(opts: WithRefOpts, root: TimeFieldRootState); onkeydown(e: BitsKeyboardEvent): void; } declare class TimeFieldMinuteSegmentState extends BaseTimeSegmentState { constructor(opts: WithRefOpts, root: TimeFieldRootState); } declare class TimeFieldSecondSegmentState extends BaseTimeSegmentState { constructor(opts: WithRefOpts, root: TimeFieldRootState); } interface TimeFieldDayPeriodSegmentStateOpts extends WithRefOpts { } declare class TimeFieldDayPeriodSegmentState { #private; readonly opts: TimeFieldDayPeriodSegmentStateOpts; readonly root: TimeFieldRootState; readonly attachment: RefAttachment; constructor(opts: TimeFieldDayPeriodSegmentStateOpts, root: TimeFieldRootState); onbeforeinput(e: BitsInputEvent): void; onkeydown(e: BitsKeyboardEvent): void; readonly props: { "aria-invalid": "true" | undefined; "aria-disabled": "true" | "false"; "aria-readonly": "true" | "false"; "data-invalid": "" | undefined; "data-disabled": "" | undefined; "data-readonly": "" | undefined; "data-segment": string; id: string; inputmode: string; "aria-label": string; "aria-valuemin": number; "aria-valuemax": number; "aria-valuenow": number; "aria-valuetext": string; onkeydown: (e: BitsKeyboardEvent) => void; onbeforeinput: (e: BitsInputEvent) => void; onclick: (e: BitsMouseEvent) => void; role: string; contenteditable: string; tabindex: number; spellcheck: boolean; autocorrect: string; enterkeyhint: string; style: { caretColor: string; }; } | { "aria-labelledby": string; contenteditable: string | undefined; "aria-describedby": string | undefined; tabindex: number | undefined; "aria-invalid": "true" | undefined; "aria-disabled": "true" | "false"; "aria-readonly": "true" | "false"; "data-invalid": "" | undefined; "data-disabled": "" | undefined; "data-readonly": "" | undefined; "data-segment": string; id: string; inputmode: string; "aria-label": string; "aria-valuemin": number; "aria-valuemax": number; "aria-valuenow": number; "aria-valuetext": string; onkeydown: (e: BitsKeyboardEvent) => void; onbeforeinput: (e: BitsInputEvent) => void; onclick: (e: BitsMouseEvent) => void; role: string; spellcheck: boolean; autocorrect: string; enterkeyhint: string; style: { caretColor: string; }; } | undefined; } interface TimeFieldLiteralSegmentStateOpts extends WithRefOpts { } declare class TimeFieldLiteralSegmentState { readonly opts: TimeFieldLiteralSegmentStateOpts; readonly root: TimeFieldRootState; readonly attachment: RefAttachment; constructor(opts: TimeFieldLiteralSegmentStateOpts, root: TimeFieldRootState); readonly props: { readonly "aria-invalid": "true" | undefined; readonly "aria-disabled": "true" | "false"; readonly "aria-readonly": "true" | "false"; readonly "data-invalid": "" | undefined; readonly "data-disabled": "" | undefined; readonly "data-readonly": "" | undefined; readonly "data-segment": string; readonly id: string; readonly "aria-hidden": "true" | undefined; } | { readonly "aria-labelledby": string; readonly contenteditable: string | undefined; readonly "aria-describedby": string | undefined; readonly tabindex: number | undefined; readonly "aria-invalid": "true" | undefined; readonly "aria-disabled": "true" | "false"; readonly "aria-readonly": "true" | "false"; readonly "data-invalid": "" | undefined; readonly "data-disabled": "" | undefined; readonly "data-readonly": "" | undefined; readonly "data-segment": string; readonly id: string; readonly "aria-hidden": "true" | undefined; }; } declare class TimeFieldTimeZoneSegmentState { readonly opts: TimeFieldLiteralSegmentStateOpts; readonly root: TimeFieldRootState; readonly attachment: RefAttachment; constructor(opts: TimeFieldLiteralSegmentStateOpts, root: TimeFieldRootState); onkeydown(e: BitsKeyboardEvent): void; readonly props: { readonly "data-readonly": "" | undefined; readonly "aria-invalid": "true" | undefined; readonly "aria-disabled": "true" | "false"; readonly "aria-readonly": "true" | "false"; readonly "data-invalid": "" | undefined; readonly "data-disabled": "" | undefined; readonly "data-segment": string; readonly role: "textbox"; readonly id: string; readonly "aria-label": "timezone, "; readonly style: { readonly caretColor: "transparent"; }; readonly onkeydown: (e: BitsKeyboardEvent) => void; readonly tabindex: 0; } | { readonly "data-readonly": "" | undefined; readonly "aria-labelledby": string; readonly contenteditable: string | undefined; readonly "aria-describedby": string | undefined; readonly tabindex: number | undefined; readonly "aria-invalid": "true" | undefined; readonly "aria-disabled": "true" | "false"; readonly "aria-readonly": "true" | "false"; readonly "data-invalid": "" | undefined; readonly "data-disabled": "" | undefined; readonly "data-segment": string; readonly role: "textbox"; readonly id: string; readonly "aria-label": "timezone, "; readonly style: { readonly caretColor: "transparent"; }; readonly onkeydown: (e: BitsKeyboardEvent) => void; }; } export declare class DateFieldSegmentState { static create(part: SegmentPart, opts: WithRefOpts): TimeFieldHourSegmentState | TimeFieldMinuteSegmentState | TimeFieldSecondSegmentState | TimeFieldDayPeriodSegmentState | TimeFieldLiteralSegmentState | TimeFieldTimeZoneSegmentState; } export {};