bits-ui 2.7.0 → 2.8.0

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

@@ -1,25 +1,24 @@
 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 WritableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, 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").BitsAttrs<readonly ["input", "label"]>;
-type SegmentConfig = {
+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 type TimeFieldRootStateProps<T extends TimeValue = Time> = WritableBoxedValues<{
+}
+export interface TimeFieldRootStateOpts<T extends TimeValue = Time> extends WritableBoxedValues<{
     value: T | undefined;
     placeholder: TimeValue;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     readonlySegments: SegmentPart[];
     validate: TimeValidator<T> | undefined;
     onInvalid: TimeOnInvalid | undefined;
@@ -34,44 +33,46 @@ export type TimeFieldRootStateProps<T extends TimeValue = Time> = WritableBoxedV
     required: boolean;
     errorMessageId: string | undefined;
     isInvalidProp: boolean | undefined;
-}>;
+}> {
+}
 export declare class TimeFieldRootState<T extends TimeValue = Time> {
     #private;
-    value: TimeFieldRootStateProps<T>["value"];
+    static create<T extends TimeValue = Time>(opts: TimeFieldRootStateOpts<T>, rangeRoot?: TimeRangeFieldRootState<T>): TimeFieldRootState<Time>;
+    value: TimeFieldRootStateOpts<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"];
+    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;
-    readonlySegmentsSet: Set<SegmentPart>;
+    readonly 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;
+    readonly maxValueTime: Time | undefined;
+    readonly minValueTime: Time | undefined;
+    readonly valueTime: Time | undefined;
+    readonly hourCycle: HourCycle;
+    readonly rangeRoot: TimeRangeFieldRootState<T> | undefined;
     domContext: DOMContext;
-    constructor(props: TimeFieldRootStateProps<T>, rangeRoot?: TimeRangeFieldRootState<T>);
+    constructor(props: TimeFieldRootStateOpts<T>, rangeRoot?: TimeRangeFieldRootState<T>);
     setName(name: string): void;
     setFieldNode(node: HTMLElement | null): void;
     /**
@@ -143,16 +144,18 @@ export declare class TimeFieldRootState<T extends TimeValue = Time> {
         "data-segment": string;
     };
 }
-type TimeFieldInputStateProps = WithRefProps & ReadableBoxedValues<{
+interface TimeFieldInputStateOpts extends WithRefOpts, ReadableBoxedValues<{
     name: string;
-}>;
+}> {
+}
 export declare class TimeFieldInputState {
     #private;
-    readonly opts: TimeFieldInputStateProps;
+    static create(opts: TimeFieldInputStateOpts): TimeFieldInputState;
+    readonly opts: TimeFieldInputStateOpts;
     readonly root: TimeFieldRootState;
     domContext: DOMContext;
-    constructor(opts: TimeFieldInputStateProps, root: TimeFieldRootState);
-    props: {
+    constructor(opts: TimeFieldInputStateOpts, root: TimeFieldRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -162,24 +165,27 @@ export declare class TimeFieldInputState {
         readonly "data-disabled": "" | undefined;
     };
 }
-declare class TimeFieldHiddenInputState {
+export declare class TimeFieldHiddenInputState {
+    static create(): TimeFieldHiddenInputState;
     readonly root: TimeFieldRootState;
-    shouldRender: boolean;
-    isoValue: string | undefined;
+    readonly shouldRender: boolean;
+    readonly isoValue: string | undefined;
     constructor(root: TimeFieldRootState);
-    props: {
+    readonly props: {
         readonly name: string;
         readonly value: string | undefined;
         readonly required: boolean;
     };
 }
-type TimeFieldLabelStateProps = WithRefProps;
-declare class TimeFieldLabelState {
-    readonly opts: TimeFieldLabelStateProps;
+interface TimeFieldLabelStateOpts extends WithRefOpts {
+}
+export declare class TimeFieldLabelState {
+    static create(opts: TimeFieldLabelStateOpts): TimeFieldLabelState;
+    readonly opts: TimeFieldLabelStateOpts;
     readonly root: TimeFieldRootState;
-    constructor(opts: TimeFieldLabelStateProps, root: TimeFieldRootState);
+    constructor(opts: TimeFieldLabelStateOpts, root: TimeFieldRootState);
     onclick(_: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
@@ -188,12 +194,12 @@ declare class TimeFieldLabelState {
 }
 declare abstract class BaseTimeSegmentState {
     #private;
-    readonly opts: WithRefProps;
+    readonly opts: WithRefOpts;
     readonly root: TimeFieldRootState;
     readonly announcer: Announcer;
     readonly part: string;
     readonly config: SegmentConfig;
-    constructor(opts: WithRefProps, root: TimeFieldRootState, part: string, config: SegmentConfig);
+    constructor(opts: WithRefOpts, root: TimeFieldRootState, part: string, config: SegmentConfig);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
     getSegmentProps(): {
@@ -262,23 +268,24 @@ declare abstract class BaseTimeSegmentState {
     };
 }
 declare class TimeFieldHourSegmentState extends BaseTimeSegmentState {
-    constructor(opts: WithRefProps, root: TimeFieldRootState);
+    constructor(opts: WithRefOpts, root: TimeFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
 }
 declare class TimeFieldMinuteSegmentState extends BaseTimeSegmentState {
-    constructor(opts: WithRefProps, root: TimeFieldRootState);
+    constructor(opts: WithRefOpts, root: TimeFieldRootState);
 }
 declare class TimeFieldSecondSegmentState extends BaseTimeSegmentState {
-    constructor(opts: WithRefProps, root: TimeFieldRootState);
+    constructor(opts: WithRefOpts, root: TimeFieldRootState);
+}
+interface TimeFieldDayPeriodSegmentStateOpts extends WithRefOpts {
 }
-type TimeFieldDayPeriodSegmentStateProps = WithRefProps;
 declare class TimeFieldDayPeriodSegmentState {
     #private;
-    readonly opts: TimeFieldDayPeriodSegmentStateProps;
+    readonly opts: TimeFieldDayPeriodSegmentStateOpts;
     readonly root: TimeFieldRootState;
-    constructor(opts: TimeFieldDayPeriodSegmentStateProps, root: TimeFieldRootState);
+    constructor(opts: TimeFieldDayPeriodSegmentStateOpts, root: TimeFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         "aria-invalid": "true" | undefined;
         "aria-disabled": "true" | "false";
         "aria-readonly": "true" | "false";
@@ -334,12 +341,13 @@ declare class TimeFieldDayPeriodSegmentState {
         };
     } | undefined;
 }
-type TimeFieldLiteralSegmentStateProps = WithRefProps;
+interface TimeFieldLiteralSegmentStateOpts extends WithRefOpts {
+}
 declare class TimeFieldLiteralSegmentState {
-    readonly opts: TimeFieldLiteralSegmentStateProps;
+    readonly opts: TimeFieldLiteralSegmentStateOpts;
     readonly root: TimeFieldRootState;
-    constructor(opts: TimeFieldLiteralSegmentStateProps, root: TimeFieldRootState);
-    props: {
+    constructor(opts: TimeFieldLiteralSegmentStateOpts, root: TimeFieldRootState);
+    readonly props: {
         readonly "aria-invalid": "true" | undefined;
         readonly "aria-disabled": "true" | "false";
         readonly "aria-readonly": "true" | "false";
@@ -366,11 +374,11 @@ declare class TimeFieldLiteralSegmentState {
     };
 }
 declare class TimeFieldTimeZoneSegmentState {
-    readonly opts: TimeFieldLiteralSegmentStateProps;
+    readonly opts: TimeFieldLiteralSegmentStateOpts;
     readonly root: TimeFieldRootState;
-    constructor(opts: TimeFieldLiteralSegmentStateProps, root: TimeFieldRootState);
+    constructor(opts: TimeFieldLiteralSegmentStateOpts, root: TimeFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly "data-readonly": "" | undefined;
         readonly "aria-invalid": "true" | undefined;
         readonly "aria-disabled": "true" | "false";
@@ -407,9 +415,7 @@ declare class TimeFieldTimeZoneSegmentState {
         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 declare class DateFieldSegmentState {
+    static create(part: SegmentPart, opts: WithRefOpts): TimeFieldHourSegmentState | TimeFieldMinuteSegmentState | TimeFieldSecondSegmentState | TimeFieldDayPeriodSegmentState | TimeFieldLiteralSegmentState | TimeFieldTimeZoneSegmentState;
+}
 export {};

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

@@ -1,5 +1,5 @@
 import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
-import { onDestroyEffect, attachRef, box, DOMContext } from "svelte-toolbelt";
+import { onDestroyEffect, attachRef, box, DOMContext, } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
 import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
@@ -17,6 +17,7 @@ export const timeFieldAttrs = createBitsAttrs({
     component: "time-field",
     parts: ["input", "label"],
 });
+const TimeFieldRootContext = new Context("TimeField.Root");
 const SEGMENT_CONFIGS = {
     hour: {
         min: (root) => (root.hourCycle === 12 ? 1 : 0),
@@ -47,6 +48,9 @@ const SEGMENT_CONFIGS = {
     },
 };
 export class TimeFieldRootState {
+    static create(opts, rangeRoot) {
+        return TimeFieldRootContext.set(new TimeFieldRootState(opts, rangeRoot));
+    }
     value;
     placeholder;
     validate;
@@ -452,6 +456,9 @@ export class TimeFieldRootState {
     }
 }
 export class TimeFieldInputState {
+    static create(opts) {
+        return new TimeFieldInputState(opts, TimeFieldRootContext.get());
+    }
     opts;
     root;
     domContext;
@@ -484,7 +491,10 @@ export class TimeFieldInputState {
         ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
     }));
 }
-class TimeFieldHiddenInputState {
+export class TimeFieldHiddenInputState {
+    static create() {
+        return new TimeFieldHiddenInputState(TimeFieldRootContext.get());
+    }
     root;
     shouldRender = $derived.by(() => this.root.name !== "");
     isoValue = $derived.by(() => this.root.value.current ? getISOTimeValue(this.root.value.current) : undefined);
@@ -497,7 +507,10 @@ class TimeFieldHiddenInputState {
         required: this.root.required.current,
     }));
 }
-class TimeFieldLabelState {
+export class TimeFieldLabelState {
+    static create(opts) {
+        return new TimeFieldLabelState(opts, TimeFieldRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -924,6 +937,27 @@ class TimeFieldTimeZoneSegmentState {
         ...attachRef(this.opts.ref),
     }));
 }
+export class DateFieldSegmentState {
+    static create(part, opts) {
+        const root = TimeFieldRootContext.get();
+        switch (part) {
+            case "hour":
+                return new TimeFieldHourSegmentState(opts, root);
+            case "minute":
+                return new TimeFieldMinuteSegmentState(opts, root);
+            case "second":
+                return new TimeFieldSecondSegmentState(opts, root);
+            case "dayPeriod":
+                return new TimeFieldDayPeriodSegmentState(opts, root);
+            case "literal":
+                return new TimeFieldLiteralSegmentState(opts, root);
+            case "timeZoneName":
+                return new TimeFieldTimeZoneSegmentState(opts, root);
+            default:
+                throw new Error(`Invalid part: ${part}`);
+        }
+    }
+}
 // Utils/helpers
 function isAcceptableDayPeriodKey(key) {
     return (isAcceptableSegmentKey(key) ||
@@ -941,42 +975,3 @@ function isArrowDown(key) {
 function isBackspace(key) {
     return key === kbd.BACKSPACE;
 }
-const TimeFieldRootContext = new Context("TimeField.Root");
-export function useTimeFieldRoot(props, rangeRoot) {
-    return TimeFieldRootContext.set(new TimeFieldRootState(props, rangeRoot));
-}
-export function useTimeFieldInput(props) {
-    return new TimeFieldInputState(props, TimeFieldRootContext.get());
-}
-export function useTimeFieldHiddenInput() {
-    return new TimeFieldHiddenInputState(TimeFieldRootContext.get());
-}
-export function useTimeFieldSegment(part, props) {
-    return segmentPartToInstance({
-        part,
-        segmentProps: props,
-        root: TimeFieldRootContext.get(),
-    });
-}
-export function useTimeFieldLabel(props) {
-    return new TimeFieldLabelState(props, TimeFieldRootContext.get());
-}
-function segmentPartToInstance(props) {
-    switch (props.part) {
-        case "hour":
-            return new TimeFieldHourSegmentState(props.segmentProps, props.root);
-        case "minute":
-            return new TimeFieldMinuteSegmentState(props.segmentProps, props.root);
-        case "second":
-            return new TimeFieldSecondSegmentState(props.segmentProps, props.root);
-        case "dayPeriod":
-            return new TimeFieldDayPeriodSegmentState(props.segmentProps, props.root);
-        case "literal":
-            return new TimeFieldLiteralSegmentState(props.segmentProps, props.root);
-        case "timeZoneName":
-            return new TimeFieldTimeZoneSegmentState(props.segmentProps, props.root);
-        default:
-            // For any date-related parts that shouldn't appear in time field
-            throw new Error(`Invalid segment part for time field: ${props.part}`);
-    }
-}

package/dist/bits/time-range-field/components/time-range-field-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TimeRangeFieldInputProps } from "../types.js";
-	import { useTimeRangeFieldInput } from "../time-range-field.svelte.js";
+	import { TimeRangeFieldInputState } from "../time-range-field.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import TimeFieldHiddenInput from "../../time-field/components/time-field-hidden-input.svelte";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: TimeRangeFieldInputProps = $props();
 
-	const inputState = useTimeRangeFieldInput(
+	const inputState = TimeRangeFieldInputState.create(
 		{
 			id: box.with(() => id),
 			ref: box.with(

package/dist/bits/time-range-field/components/time-range-field-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useTimeRangeFieldLabel } from "../time-range-field.svelte.js";
+	import { TimeRangeFieldLabelState } from "../time-range-field.svelte.js";
 	import type { TimeRangeFieldLabelProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: TimeRangeFieldLabelProps = $props();
 
-	const labelState = useTimeRangeFieldLabel({
+	const labelState = TimeRangeFieldLabelState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/time-range-field/components/time-range-field.svelte

@@ -8,7 +8,7 @@
 <script lang="ts" generics="T extends TimeValue = Time">
 	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useTimeRangeFieldRoot } from "../time-range-field.svelte.js";
+	import { TimeRangeFieldRootState } from "../time-range-field.svelte.js";
 	import type { TimeRangeFieldRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -84,7 +84,7 @@
 		}
 	);
 
-	const rootState = useTimeRangeFieldRoot({
+	const rootState = TimeRangeFieldRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,20 +1,20 @@
 import type { Time } from "@internationalized/date";
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { TimeFieldRootState } from "../time-field/time-field.svelte.js";
+import { TimeFieldRootState } from "../time-field/time-field.svelte.js";
 import { TimeFieldInputState } from "../time-field/time-field.svelte.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { TimeSegmentPart } from "../../shared/index.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { WithRefOpts } from "../../internal/types.js";
 import type { TimeGranularity, TimeOnInvalid, TimeRange, TimeRangeValidator, TimeValue } from "../../shared/date/types.js";
 import { type TimeFormatter } from "../../internal/date-time/formatter.js";
-export declare const timeRangeFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "label"]>;
-type TimeRangeFieldRootStateProps<T extends TimeValue = Time> = WithRefProps<WritableBoxedValues<{
+export declare const timeRangeFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "label"]>;
+export declare const TimeRangeFieldRootContext: Context<TimeRangeFieldRootState<Time>>;
+interface TimeRangeFieldRootStateOpts<T extends TimeValue = Time> extends WithRefOpts, WritableBoxedValues<{
     value: TimeRange<T>;
     placeholder: TimeValue;
     startValue: T | undefined;
     endValue: T | undefined;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     readonlySegments: TimeSegmentPart[];
     validate: TimeRangeValidator<T> | undefined;
     onInvalid: TimeOnInvalid | undefined;
@@ -28,10 +28,12 @@ type TimeRangeFieldRootStateProps<T extends TimeValue = Time> = WithRefProps<Wri
     hideTimeZone: boolean;
     required: boolean;
     errorMessageId: string | undefined;
-}>>;
+}> {
+}
 export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
     #private;
-    readonly opts: TimeRangeFieldRootStateProps<T>;
+    static create<T extends TimeValue = Time>(opts: TimeRangeFieldRootStateOpts<T>): TimeRangeFieldRootState<Time>;
+    readonly opts: TimeRangeFieldRootStateOpts<T>;
     startFieldState: TimeFieldRootState | undefined;
     endFieldState: TimeFieldRootState | undefined;
     descriptionId: string;
@@ -39,16 +41,16 @@ export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
     fieldNode: HTMLElement | null;
     labelNode: HTMLElement | null;
     descriptionNode: HTMLElement | null;
-    startValueComplete: boolean;
-    endValueComplete: boolean;
-    rangeComplete: boolean;
-    startValueTime: Time | undefined;
-    endValueTime: Time | undefined;
-    minValueTime: Time | undefined;
-    maxValueTime: Time | undefined;
+    readonly startValueComplete: boolean;
+    readonly endValueComplete: boolean;
+    readonly rangeComplete: boolean;
+    readonly startValueTime: Time | undefined;
+    readonly endValueTime: Time | undefined;
+    readonly minValueTime: Time | undefined;
+    readonly maxValueTime: Time | undefined;
     domContext: DOMContext;
-    constructor(opts: TimeRangeFieldRootStateProps<T>);
-    validationStatus: false | {
+    constructor(opts: TimeRangeFieldRootStateOpts<T>);
+    readonly validationStatus: false | {
         readonly reason: "custom";
         readonly message: string | string[];
     } | {
@@ -58,33 +60,35 @@ export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
         readonly reason: "max";
         readonly message?: undefined;
     };
-    isInvalid: boolean;
+    readonly isInvalid: boolean;
     props: {
         readonly id: string;
         readonly role: "group";
         readonly "data-invalid": "" | undefined;
     };
 }
-type TimeRangeFieldLabelStateProps = WithRefProps;
-declare class TimeRangeFieldLabelState {
+interface TimeRangeFieldLabelStateOpts extends WithRefOpts {
+}
+export declare class TimeRangeFieldLabelState {
     #private;
-    readonly opts: TimeRangeFieldLabelStateProps;
+    static create(opts: TimeRangeFieldLabelStateOpts): TimeRangeFieldLabelState;
+    readonly opts: TimeRangeFieldLabelStateOpts;
     readonly root: TimeRangeFieldRootState;
-    constructor(opts: TimeRangeFieldLabelStateProps, root: TimeRangeFieldRootState);
-    props: {
+    constructor(opts: TimeRangeFieldLabelStateOpts, root: TimeRangeFieldRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
         readonly onclick: () => void;
     };
 }
-type TimeRangeFieldInputStateProps<T extends TimeValue = Time> = WritableBoxedValues<{
+interface TimeRangeFieldInputStateOpts<T extends TimeValue = Time> extends WritableBoxedValues<{
     value: T | undefined;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     name: string;
-}> & WithRefProps;
-export declare const TimeRangeFieldRootContext: Context<TimeRangeFieldRootState<Time>>;
-export declare function useTimeRangeFieldRoot<T extends TimeValue = Time>(props: TimeRangeFieldRootStateProps<T>): TimeRangeFieldRootState<Time>;
-export declare function useTimeRangeFieldLabel(props: TimeRangeFieldLabelStateProps): TimeRangeFieldLabelState;
-export declare function useTimeRangeFieldInput(props: Omit<TimeRangeFieldInputStateProps, "value">, type: "start" | "end"): TimeFieldInputState;
+}>, WithRefOpts {
+}
+export declare class TimeRangeFieldInputState {
+    static create(opts: Omit<TimeRangeFieldInputStateOpts, "value">, type: "start" | "end"): TimeFieldInputState;
+}
 export {};

package/dist/bits/time-range-field/time-range-field.svelte.js

@@ -1,6 +1,7 @@
-import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { TimeFieldInputState, useTimeFieldRoot } from "../time-field/time-field.svelte.js";
+import { TimeFieldRootState } from "../time-field/time-field.svelte.js";
+import { TimeFieldInputState } from "../time-field/time-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
 import { createBitsAttrs, getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
 import { createTimeFormatter } from "../../internal/date-time/formatter.js";
@@ -11,7 +12,11 @@ export const timeRangeFieldAttrs = createBitsAttrs({
     component: "time-range-field",
     parts: ["root", "label"],
 });
+export const TimeRangeFieldRootContext = new Context("TimeRangeField.Root");
 export class TimeRangeFieldRootState {
+    static create(opts) {
+        return TimeRangeFieldRootContext.set(new TimeRangeFieldRootState(opts));
+    }
     opts;
     startFieldState = undefined;
     endFieldState = undefined;
@@ -158,7 +163,10 @@ export class TimeRangeFieldRootState {
         ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
 }
-class TimeRangeFieldLabelState {
+export class TimeRangeFieldLabelState {
+    static create(opts) {
+        return new TimeRangeFieldLabelState(opts, TimeRangeFieldRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -175,7 +183,6 @@ class TimeRangeFieldLabelState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        // TODO: invalid state for field
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [timeRangeFieldAttrs.label]: "",
@@ -183,32 +190,27 @@ class TimeRangeFieldLabelState {
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));
 }
-export const TimeRangeFieldRootContext = new Context("TimeRangeField.Root");
-export function useTimeRangeFieldRoot(props) {
-    return TimeRangeFieldRootContext.set(new TimeRangeFieldRootState(props));
-}
-export function useTimeRangeFieldLabel(props) {
-    return new TimeRangeFieldLabelState(props, TimeRangeFieldRootContext.get());
-}
-export function useTimeRangeFieldInput(props, type) {
-    const root = TimeRangeFieldRootContext.get();
-    const fieldState = useTimeFieldRoot({
-        value: type === "start" ? root.opts.startValue : root.opts.endValue,
-        disabled: root.opts.disabled,
-        readonly: root.opts.readonly,
-        readonlySegments: root.opts.readonlySegments,
-        validate: box.with(() => undefined),
-        minValue: root.opts.minValue,
-        maxValue: root.opts.maxValue,
-        hourCycle: root.opts.hourCycle,
-        locale: root.opts.locale,
-        hideTimeZone: root.opts.hideTimeZone,
-        required: root.opts.required,
-        granularity: root.opts.granularity,
-        placeholder: root.opts.placeholder,
-        onInvalid: root.opts.onInvalid,
-        errorMessageId: root.opts.errorMessageId,
-        isInvalidProp: box.with(() => root.isInvalid),
-    }, root);
-    return new TimeFieldInputState({ name: props.name, id: props.id, ref: props.ref }, fieldState);
+export class TimeRangeFieldInputState {
+    static create(opts, type) {
+        const root = TimeRangeFieldRootContext.get();
+        const fieldState = TimeFieldRootState.create({
+            value: type === "start" ? root.opts.startValue : root.opts.endValue,
+            disabled: root.opts.disabled,
+            readonly: root.opts.readonly,
+            readonlySegments: root.opts.readonlySegments,
+            validate: box.with(() => undefined),
+            minValue: root.opts.minValue,
+            maxValue: root.opts.maxValue,
+            hourCycle: root.opts.hourCycle,
+            locale: root.opts.locale,
+            hideTimeZone: root.opts.hideTimeZone,
+            required: root.opts.required,
+            granularity: root.opts.granularity,
+            placeholder: root.opts.placeholder,
+            onInvalid: root.opts.onInvalid,
+            errorMessageId: root.opts.errorMessageId,
+            isInvalidProp: box.with(() => root.isInvalid),
+        }, root);
+        return new TimeFieldInputState({ name: opts.name, id: opts.id, ref: opts.ref }, fieldState);
+    }
 }