bits-ui 1.8.0 → 2.2.0

package/dist/bits/time-field/components/time-field.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { TimeValue } from "../../../shared/date/types.js";
+import type { Time } from "@internationalized/date";
+import type { TimeFieldRootProps } from "../types.js";
+declare class __sveltets_Render<T extends TimeValue = Time> {
+    props(): TimeFieldRootProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "placeholder";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TimeValue = Time>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TimeValue = Time>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TimeField: $$IsomorphicComponent;
+type TimeField<T extends TimeValue = Time> = InstanceType<typeof TimeField<T>>;
+export default TimeField;

package/dist/bits/time-field/exports.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/time-field.svelte";
+export { default as Input } from "./components/time-field-input.svelte";
+export { default as Label } from "./components/time-field-label.svelte";
+export { default as Segment } from "./components/time-field-segment.svelte";
+export type { TimeFieldRootProps as RootProps, TimeFieldInputProps as InputProps, TimeFieldLabelProps as LabelProps, TimeFieldSegmentProps as SegmentProps, } from "./types.js";

package/dist/bits/time-field/exports.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/time-field.svelte";
+export { default as Input } from "./components/time-field-input.svelte";
+export { default as Label } from "./components/time-field-label.svelte";
+export { default as Segment } from "./components/time-field-segment.svelte";

package/dist/bits/time-field/index.d.ts

@@ -0,0 +1 @@
+export * as TimeField from "./exports.js";

package/dist/bits/time-field/index.js

@@ -0,0 +1 @@
+export * as TimeField from "./exports.js";

package/dist/bits/time-field/time-field.svelte.d.ts

@@ -0,0 +1,417 @@
+import type { Updater } from "svelte/store";
+import { Time } from "@internationalized/date";
+import { type WritableBox, DOMContext } from "svelte-toolbelt";
+import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } 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 TIME_FIELD_INPUT_ATTR = "data-time-field-input";
+type SegmentConfig = {
+    min: number | ((root: TimeFieldRootState) => number);
+    max: number | ((root: TimeFieldRootState) => number);
+    cycle: number;
+    canBeZero?: boolean;
+    padZero?: boolean;
+};
+export type TimeFieldRootStateProps<T extends TimeValue = Time> = 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;
+    value: TimeFieldRootStateProps<T>["value"];
+    placeholder: WritableBox<TimeValue>;
+    validate: TimeFieldRootStateProps<T>["validate"];
+    minValue: TimeFieldRootStateProps<T>["minValue"];
+    maxValue: TimeFieldRootStateProps<T>["maxValue"];
+    disabled: TimeFieldRootStateProps<T>["disabled"];
+    readonly: TimeFieldRootStateProps<T>["readonly"];
+    granularity: TimeFieldRootStateProps<T>["granularity"];
+    readonlySegments: TimeFieldRootStateProps<T>["readonlySegments"];
+    hourCycleProp: TimeFieldRootStateProps<T>["hourCycle"];
+    locale: TimeFieldRootStateProps<T>["locale"];
+    hideTimeZone: TimeFieldRootStateProps<T>["hideTimeZone"];
+    required: TimeFieldRootStateProps<T>["required"];
+    onInvalid: TimeFieldRootStateProps<T>["onInvalid"];
+    errorMessageId: TimeFieldRootStateProps<T>["errorMessageId"];
+    isInvalidProp: TimeFieldRootStateProps<T>["isInvalidProp"];
+    descriptionId: string;
+    formatter: TimeFormatter;
+    initialSegments: TimeSegmentObj;
+    segmentValues: TimeSegmentObj;
+    announcer: Announcer;
+    readonlySegmentsSet: Set<SegmentPart>;
+    segmentStates: import("../../shared/date/types.js").TimeSegmentStateMap;
+    descriptionNode: HTMLElement | null;
+    validationNode: HTMLElement | null;
+    states: import("../../shared/date/types.js").TimeSegmentStateMap;
+    dayPeriodNode: HTMLElement | null;
+    name: string;
+    maxValueTime: Time | undefined;
+    minValueTime: Time | undefined;
+    valueTime: Time | undefined;
+    hourCycle: HourCycle;
+    rangeRoot: TimeRangeFieldRootState<T> | undefined;
+    domContext: DOMContext;
+    constructor(props: TimeFieldRootStateProps<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;
+    };
+}
+type TimeFieldInputStateProps = WithRefProps & ReadableBoxedValues<{
+    name: string;
+}>;
+export declare class TimeFieldInputState {
+    #private;
+    readonly opts: TimeFieldInputStateProps;
+    readonly root: TimeFieldRootState;
+    domContext: DOMContext;
+    constructor(opts: TimeFieldInputStateProps, root: TimeFieldRootState);
+    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;
+        readonly "data-time-field-input": "";
+    };
+}
+declare class TimeFieldHiddenInputState {
+    readonly root: TimeFieldRootState;
+    shouldRender: boolean;
+    isoValue: string | undefined;
+    constructor(root: TimeFieldRootState);
+    props: {
+        readonly name: string;
+        readonly value: string | undefined;
+        readonly required: boolean;
+    };
+}
+type TimeFieldLabelStateProps = WithRefProps;
+declare class TimeFieldLabelState {
+    readonly opts: TimeFieldLabelStateProps;
+    readonly root: TimeFieldRootState;
+    constructor(opts: TimeFieldLabelStateProps, root: TimeFieldRootState);
+    onclick(_: BitsMouseEvent): void;
+    props: {
+        readonly id: string;
+        readonly "data-invalid": "" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-time-field-label": "";
+        readonly onclick: (_: BitsMouseEvent) => void;
+    };
+}
+declare abstract class BaseTimeSegmentState {
+    #private;
+    readonly opts: WithRefProps;
+    readonly root: TimeFieldRootState;
+    readonly announcer: Announcer;
+    readonly part: string;
+    readonly config: SegmentConfig;
+    constructor(opts: WithRefProps, 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: WithRefProps, root: TimeFieldRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+}
+declare class TimeFieldMinuteSegmentState extends BaseTimeSegmentState {
+    constructor(opts: WithRefProps, root: TimeFieldRootState);
+}
+declare class TimeFieldSecondSegmentState extends BaseTimeSegmentState {
+    constructor(opts: WithRefProps, root: TimeFieldRootState);
+}
+type TimeFieldDayPeriodSegmentStateProps = WithRefProps;
+declare class TimeFieldDayPeriodSegmentState {
+    #private;
+    readonly opts: TimeFieldDayPeriodSegmentStateProps;
+    readonly root: TimeFieldRootState;
+    constructor(opts: TimeFieldDayPeriodSegmentStateProps, root: TimeFieldRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    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;
+        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;
+        onclick: (e: BitsMouseEvent) => void;
+        role: string;
+        spellcheck: boolean;
+        autocorrect: string;
+        enterkeyhint: string;
+        style: {
+            caretColor: string;
+        };
+    } | undefined;
+}
+type TimeFieldLiteralSegmentStateProps = WithRefProps;
+declare class TimeFieldLiteralSegmentState {
+    readonly opts: TimeFieldLiteralSegmentStateProps;
+    readonly root: TimeFieldRootState;
+    constructor(opts: TimeFieldLiteralSegmentStateProps, root: TimeFieldRootState);
+    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: TimeFieldLiteralSegmentStateProps;
+    readonly root: TimeFieldRootState;
+    constructor(opts: TimeFieldLiteralSegmentStateProps, root: TimeFieldRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    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 function useTimeFieldRoot<T extends TimeValue = Time>(props: TimeFieldRootStateProps<T>, rangeRoot?: TimeRangeFieldRootState<T>): TimeFieldRootState<Time>;
+export declare function useTimeFieldInput(props: TimeFieldInputStateProps): TimeFieldInputState;
+export declare function useTimeFieldHiddenInput(): TimeFieldHiddenInputState;
+export declare function useTimeFieldSegment(part: SegmentPart, props: WithRefProps): TimeFieldHourSegmentState | TimeFieldMinuteSegmentState | TimeFieldSecondSegmentState | TimeFieldDayPeriodSegmentState | TimeFieldLiteralSegmentState | TimeFieldTimeZoneSegmentState;
+export declare function useTimeFieldLabel(props: TimeFieldLabelStateProps): TimeFieldLabelState;
+export {};