@johly/bits-ui 2.18.1

package/dist/bits/date-field/components/date-field.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { watch } from "runed";
+	import { boxWith } from "svelte-toolbelt";
+	import { DateFieldRootState } from "../date-field.svelte.js";
+	import type { DateFieldRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
+	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
+
+	let {
+		disabled = false,
+		granularity,
+		hideTimeZone = false,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		onPlaceholderChange = noop,
+		onValueChange = noop,
+		validate = noop,
+		onInvalid = noop,
+		placeholder = $bindable(),
+		value = $bindable(),
+		readonly = false,
+		readonlySegments = [],
+		required = false,
+		errorMessageId,
+		children,
+	}: DateFieldRootProps = $props();
+
+	function handleDefaultPlaceholder(setPlaceholder = true) {
+		if (placeholder !== undefined) return placeholder;
+
+		const defaultPlaceholder = getDefaultDate({
+			granularity,
+			defaultValue: value,
+			minValue,
+			maxValue,
+		});
+
+		if (setPlaceholder) {
+			placeholder = defaultPlaceholder;
+		}
+
+		return defaultPlaceholder;
+	}
+
+	// SSR
+	handleDefaultPlaceholder();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make placeholder
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
+	DateFieldRootState.create({
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
+		),
+		placeholder: boxWith(
+			() => {
+				if (placeholder === undefined) return handleDefaultPlaceholder(false);
+				return placeholder;
+			},
+			(v) => {
+				if (v === undefined) return;
+				placeholder = v;
+				onPlaceholderChange(v);
+			}
+		),
+		disabled: boxWith(() => disabled),
+		granularity: boxWith(() => granularity),
+		hideTimeZone: boxWith(() => hideTimeZone),
+		hourCycle: boxWith(() => hourCycle),
+		locale: resolveLocaleProp(() => locale),
+		maxValue: boxWith(() => maxValue),
+		minValue: boxWith(() => minValue),
+		validate: boxWith(() => validate),
+		readonly: boxWith(() => readonly),
+		readonlySegments: boxWith(() => readonlySegments),
+		required: boxWith(() => required),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
+		isInvalidProp: boxWith(() => undefined),
+	});
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,3 @@
+declare const DateField: import("svelte").Component<import("../types.js").DateFieldRootPropsWithoutHTML, {}, "value" | "placeholder">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

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

@@ -0,0 +1,465 @@
+import type { Updater } from "svelte/store";
+import type { DateValue } from "@internationalized/date";
+import { type WritableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.svelte.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts, RefAttachment } from "../../internal/types.js";
+import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, EditableTimeSegmentPart } from "../../shared/date/types.js";
+import { type Formatter } from "../../internal/date-time/formatter.js";
+import { type Announcer } from "../../internal/date-time/announcer.js";
+export declare const dateFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["input", "label", "segment"]>;
+interface SegmentConfig {
+    min: number | ((root: DateFieldRootState) => number);
+    max: number | ((root: DateFieldRootState) => number);
+    cycle: number;
+    canBeZero?: boolean;
+    padZero?: boolean;
+    getAnnouncement?: (value: number, root: DateFieldRootState) => string | number;
+    updateLogic?: (props: {
+        root: DateFieldRootState;
+        prev: string | null;
+        num: number;
+        moveToNext: {
+            value: boolean;
+        };
+    }) => string | null;
+}
+interface DateFieldRootStateOpts extends WritableBoxedValues<{
+    value: DateValue | undefined;
+    placeholder: DateValue;
+}>, ReadableBoxedValues<{
+    readonlySegments: SegmentPart[];
+    validate: DateValidator | undefined;
+    onInvalid: DateOnInvalid | undefined;
+    minValue: DateValue | undefined;
+    maxValue: DateValue | undefined;
+    disabled: boolean;
+    readonly: boolean;
+    granularity: Granularity | undefined;
+    hourCycle: HourCycle | undefined;
+    locale: string;
+    hideTimeZone: boolean;
+    required: boolean;
+    errorMessageId: string | undefined;
+    isInvalidProp: boolean | undefined;
+}> {
+}
+export declare class DateFieldRootState {
+    #private;
+    static create(opts: DateFieldRootStateOpts, rangeRoot?: DateRangeFieldRootState): DateFieldRootState;
+    value: DateFieldRootStateOpts["value"];
+    placeholder: WritableBox<DateValue>;
+    validate: DateFieldRootStateOpts["validate"];
+    minValue: DateFieldRootStateOpts["minValue"];
+    maxValue: DateFieldRootStateOpts["maxValue"];
+    disabled: DateFieldRootStateOpts["disabled"];
+    readonly: DateFieldRootStateOpts["readonly"];
+    granularity: DateFieldRootStateOpts["granularity"];
+    readonlySegments: DateFieldRootStateOpts["readonlySegments"];
+    hourCycle: DateFieldRootStateOpts["hourCycle"];
+    locale: DateFieldRootStateOpts["locale"];
+    hideTimeZone: DateFieldRootStateOpts["hideTimeZone"];
+    required: DateFieldRootStateOpts["required"];
+    onInvalid: DateFieldRootStateOpts["onInvalid"];
+    errorMessageId: DateFieldRootStateOpts["errorMessageId"];
+    isInvalidProp: DateFieldRootStateOpts["isInvalidProp"];
+    descriptionId: string;
+    formatter: Formatter;
+    initialSegments: SegmentValueObj;
+    segmentValues: SegmentValueObj;
+    announcer: Announcer;
+    readonly readonlySegmentsSet: Set<SegmentPart>;
+    segmentStates: import("../../internal/date-time/field/types.js").SegmentStateMap;
+    descriptionNode: HTMLElement | null;
+    validationNode: HTMLElement | null;
+    states: import("../../internal/date-time/field/types.js").SegmentStateMap;
+    dayPeriodNode: HTMLElement | null;
+    rangeRoot: DateRangeFieldRootState | undefined;
+    name: string;
+    domContext: DOMContext;
+    constructor(props: DateFieldRootStateOpts, rangeRoot?: DateRangeFieldRootState);
+    setName(name: string): void;
+    /**
+     * Sets the field node for the `DateFieldRootState` instance. We use this method so we can
+     * keep `#fieldNode` private to prevent accidental usage of the incorrect field node.
+     */
+    setFieldNode(node: HTMLElement | null): void;
+    /**
+     * Gets the correct field node for the date field regardless of whether it's being
+     * used in a standalone context or within a `DateRangeField` component.
+     */
+    getFieldNode(): HTMLElement | null;
+    /**
+     * Sets the label node for the `DateFieldRootState` instance. We use this method so we can
+     * keep `#labelNode` private to prevent accidental usage of the incorrect label node.
+     */
+    setLabelNode(node: HTMLElement | null): void;
+    /**
+     * Gets the correct label node for the date field regardless of whether it's being used in
+     * a standalone context or within a `DateRangeField` component.
+     */
+    getLabelNode(): HTMLElement | null;
+    setValue(value: DateValue | undefined): void;
+    syncSegmentValues(value: DateValue): void;
+    readonly validationStatus: false | {
+        readonly reason: "custom";
+        readonly message: string | string[];
+    } | {
+        readonly reason: "min";
+        readonly message?: undefined;
+    } | {
+        readonly reason: "max";
+        readonly message?: undefined;
+    };
+    readonly isInvalid: boolean;
+    readonly inferredGranularity: Granularity;
+    readonly dateRef: DateValue;
+    readonly allSegmentContent: {
+        obj: import("../../internal/date-time/field/types.js").SegmentContentObj;
+        arr: {
+            part: import("../../internal/date-time/field/types.js").SegmentPart;
+            value: string;
+        }[];
+    };
+    readonly segmentContents: {
+        part: import("../../internal/date-time/field/types.js").SegmentPart;
+        value: string;
+    }[];
+    readonly sharedSegmentAttrs: {
+        role: string;
+        contenteditable: string;
+        tabindex: number;
+        spellcheck: boolean;
+        inputmode: string;
+        autocorrect: string;
+        enterkeyhint: string;
+        style: {
+            caretColor: string;
+        };
+        onbeforeinput: (e: InputEvent) => void;
+    };
+    updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends EditableTimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
+    handleSegmentClick(e: BitsMouseEvent): void;
+    getBaseSegmentAttrs(part: SegmentPart, segmentId: string): {
+        [dateFieldAttrs.segment]: 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 DateFieldInputStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    name: string;
+}> {
+}
+export declare class DateFieldInputState {
+    #private;
+    static create(opts: DateFieldInputStateOpts): DateFieldInputState;
+    readonly opts: DateFieldInputStateOpts;
+    readonly root: DateFieldRootState;
+    readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
+    constructor(opts: DateFieldInputStateOpts, root: DateFieldRootState);
+    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 DateFieldHiddenInputState {
+    static create(): DateFieldHiddenInputState;
+    readonly root: DateFieldRootState;
+    readonly shouldRender: boolean;
+    readonly isoValue: string;
+    constructor(root: DateFieldRootState);
+    readonly props: {
+        name: string;
+        value: string;
+        required: boolean;
+    };
+}
+interface DateFieldLabelStateOpts extends WithRefOpts {
+}
+export declare class DateFieldLabelState {
+    static create(opts: DateFieldLabelStateOpts): DateFieldLabelState;
+    readonly opts: DateFieldLabelStateOpts;
+    readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: DateFieldLabelStateOpts, root: DateFieldRootState);
+    onclick(_: BitsMouseEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-invalid": "" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly onclick: (_: BitsMouseEvent) => void;
+    };
+}
+declare abstract class BaseNumericSegmentState {
+    #private;
+    readonly opts: WithRefOpts;
+    readonly root: DateFieldRootState;
+    readonly announcer: Announcer;
+    readonly part: string;
+    readonly config: SegmentConfig;
+    readonly attachment: RefAttachment;
+    constructor(opts: WithRefOpts, root: DateFieldRootState, 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;
+    };
+    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;
+        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;
+        };
+        onbeforeinput: (e: InputEvent) => void;
+    } | {
+        "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;
+        };
+        onbeforeinput: (e: InputEvent) => void;
+    };
+}
+declare class DateFieldYearSegmentState extends BaseNumericSegmentState {
+    #private;
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    onfocusout(_: BitsFocusEvent): void;
+}
+declare class DateFieldDaySegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
+}
+declare class DateFieldMonthSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
+}
+declare class DateFieldHourSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+}
+declare class DateFieldMinuteSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
+}
+declare class DateFieldSecondSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
+}
+interface DateFieldDayPeriodSegmentStateOpts extends WithRefOpts {
+}
+export declare class DateFieldDayPeriodSegmentState {
+    #private;
+    static create(opts: DateFieldDayPeriodSegmentStateOpts): DateFieldDayPeriodSegmentState;
+    readonly opts: DateFieldDayPeriodSegmentStateOpts;
+    readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: DateFieldDayPeriodSegmentStateOpts, root: DateFieldRootState);
+    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": "AM" | "PM";
+        onkeydown: (e: BitsKeyboardEvent) => void;
+        onclick: (e: BitsMouseEvent) => void;
+        role: string;
+        contenteditable: string;
+        tabindex: number;
+        spellcheck: boolean;
+        autocorrect: string;
+        enterkeyhint: string;
+        style: {
+            caretColor: string;
+        };
+        onbeforeinput: (e: InputEvent) => void;
+    } | {
+        "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": "AM" | "PM";
+        onkeydown: (e: BitsKeyboardEvent) => void;
+        onclick: (e: BitsMouseEvent) => void;
+        role: string;
+        spellcheck: boolean;
+        autocorrect: string;
+        enterkeyhint: string;
+        style: {
+            caretColor: string;
+        };
+        onbeforeinput: (e: InputEvent) => void;
+    } | undefined;
+}
+interface DateFieldLiteralSegmentStateOpts extends WithRefOpts {
+}
+export declare class DateFieldLiteralSegmentState {
+    static create(opts: DateFieldLiteralSegmentStateOpts): DateFieldLiteralSegmentState;
+    readonly opts: DateFieldLiteralSegmentStateOpts;
+    readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: DateFieldLiteralSegmentStateOpts, root: DateFieldRootState);
+    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;
+    };
+}
+interface DateFieldTimeZoneSegmentStateOpts extends WithRefOpts {
+}
+export declare class DateFieldTimeZoneSegmentState {
+    static create(opts: DateFieldTimeZoneSegmentStateOpts): DateFieldTimeZoneSegmentState;
+    readonly opts: DateFieldTimeZoneSegmentStateOpts;
+    readonly root: DateFieldRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: DateFieldTimeZoneSegmentStateOpts, root: DateFieldRootState);
+    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 "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): DateFieldYearSegmentState | DateFieldDaySegmentState | DateFieldMonthSegmentState | DateFieldHourSegmentState | DateFieldMinuteSegmentState | DateFieldSecondSegmentState | DateFieldDayPeriodSegmentState | DateFieldLiteralSegmentState | DateFieldTimeZoneSegmentState;
+}
+export {};