bits-ui 2.6.2 → 2.8.0

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

@@ -2,7 +2,7 @@
 	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
-	import { useDateFieldRoot } from "../date-field.svelte.js";
+	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";
@@ -55,7 +55,7 @@
 		}
 	);
 
-	useDateFieldRoot({
+	DateFieldRootState.create({
 		value: box.with(
 			() => value,
 			(v) => {

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

@@ -1,14 +1,13 @@
 import type { Updater } from "svelte/store";
 import type { DateValue } from "@internationalized/date";
-import { type WritableBox, DOMContext } from "svelte-toolbelt";
+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 { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } 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").BitsAttrs<readonly ["input", "label", "segment"]>;
-type SegmentConfig = {
+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;
@@ -23,11 +22,11 @@ type SegmentConfig = {
             value: boolean;
         };
     }) => string | null;
-};
-export type DateFieldRootStateProps = WritableBoxedValues<{
+}
+interface DateFieldRootStateOpts extends WritableBoxedValues<{
     value: DateValue | undefined;
     placeholder: DateValue;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     readonlySegments: SegmentPart[];
     validate: DateValidator | undefined;
     onInvalid: DateOnInvalid | undefined;
@@ -42,31 +41,33 @@ export type DateFieldRootStateProps = WritableBoxedValues<{
     required: boolean;
     errorMessageId: string | undefined;
     isInvalidProp: boolean | undefined;
-}>;
+}> {
+}
 export declare class DateFieldRootState {
     #private;
-    value: DateFieldRootStateProps["value"];
+    static create(opts: DateFieldRootStateOpts, rangeRoot?: DateRangeFieldRootState): DateFieldRootState;
+    value: DateFieldRootStateOpts["value"];
     placeholder: WritableBox<DateValue>;
-    validate: DateFieldRootStateProps["validate"];
-    minValue: DateFieldRootStateProps["minValue"];
-    maxValue: DateFieldRootStateProps["maxValue"];
-    disabled: DateFieldRootStateProps["disabled"];
-    readonly: DateFieldRootStateProps["readonly"];
-    granularity: DateFieldRootStateProps["granularity"];
-    readonlySegments: DateFieldRootStateProps["readonlySegments"];
-    hourCycle: DateFieldRootStateProps["hourCycle"];
-    locale: DateFieldRootStateProps["locale"];
-    hideTimeZone: DateFieldRootStateProps["hideTimeZone"];
-    required: DateFieldRootStateProps["required"];
-    onInvalid: DateFieldRootStateProps["onInvalid"];
-    errorMessageId: DateFieldRootStateProps["errorMessageId"];
-    isInvalidProp: DateFieldRootStateProps["isInvalidProp"];
+    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;
-    readonlySegmentsSet: Set<SegmentPart>;
+    readonly readonlySegmentsSet: Set<SegmentPart>;
     segmentStates: import("../../internal/date-time/field/types.js").SegmentStateMap;
     descriptionNode: HTMLElement | null;
     validationNode: HTMLElement | null;
@@ -75,7 +76,7 @@ export declare class DateFieldRootState {
     rangeRoot: DateRangeFieldRootState | undefined;
     name: string;
     domContext: DOMContext;
-    constructor(props: DateFieldRootStateProps, rangeRoot?: DateRangeFieldRootState);
+    constructor(props: DateFieldRootStateOpts, rangeRoot?: DateRangeFieldRootState);
     setName(name: string): void;
     /**
      * Sets the field node for the `DateFieldRootState` instance. We use this method so we can
@@ -99,7 +100,7 @@ export declare class DateFieldRootState {
     getLabelNode(): HTMLElement | null;
     setValue(value: DateValue | undefined): void;
     syncSegmentValues(value: DateValue): void;
-    validationStatus: false | {
+    readonly validationStatus: false | {
         readonly reason: "custom";
         readonly message: string | string[];
     } | {
@@ -109,21 +110,21 @@ export declare class DateFieldRootState {
         readonly reason: "max";
         readonly message?: undefined;
     };
-    isInvalid: boolean;
-    inferredGranularity: Granularity;
-    dateRef: DateValue;
-    allSegmentContent: {
+    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;
         }[];
     };
-    segmentContents: {
+    readonly segmentContents: {
         part: import("../../internal/date-time/field/types.js").SegmentPart;
         value: string;
     }[];
-    sharedSegmentAttrs: {
+    readonly sharedSegmentAttrs: {
         role: string;
         contenteditable: string;
         tabindex: number;
@@ -160,16 +161,18 @@ export declare class DateFieldRootState {
         "data-segment": string;
     };
 }
-type DateFieldInputStateProps = WithRefProps & ReadableBoxedValues<{
+interface DateFieldInputStateOpts extends WithRefOpts, ReadableBoxedValues<{
     name: string;
-}>;
+}> {
+}
 export declare class DateFieldInputState {
     #private;
-    readonly opts: DateFieldInputStateProps;
+    static create(opts: DateFieldInputStateOpts): DateFieldInputState;
+    readonly opts: DateFieldInputStateOpts;
     readonly root: DateFieldRootState;
     readonly domContext: DOMContext;
-    constructor(opts: DateFieldInputStateProps, root: DateFieldRootState);
-    props: {
+    constructor(opts: DateFieldInputStateOpts, root: DateFieldRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -179,24 +182,27 @@ export declare class DateFieldInputState {
         readonly "data-disabled": "" | undefined;
     };
 }
-declare class DateFieldHiddenInputState {
+export declare class DateFieldHiddenInputState {
+    static create(): DateFieldHiddenInputState;
     readonly root: DateFieldRootState;
-    shouldRender: boolean;
-    isoValue: string;
+    readonly shouldRender: boolean;
+    readonly isoValue: string;
     constructor(root: DateFieldRootState);
-    props: {
+    readonly props: {
         name: string;
         value: string;
         required: boolean;
     };
 }
-type DateFieldLabelStateProps = WithRefProps;
-declare class DateFieldLabelState {
-    readonly opts: DateFieldLabelStateProps;
+interface DateFieldLabelStateOpts extends WithRefOpts {
+}
+export declare class DateFieldLabelState {
+    static create(opts: DateFieldLabelStateOpts): DateFieldLabelState;
+    readonly opts: DateFieldLabelStateOpts;
     readonly root: DateFieldRootState;
-    constructor(opts: DateFieldLabelStateProps, root: DateFieldRootState);
+    constructor(opts: DateFieldLabelStateOpts, root: DateFieldRootState);
     onclick(_: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
@@ -205,12 +211,12 @@ declare class DateFieldLabelState {
 }
 declare abstract class BaseNumericSegmentState {
     #private;
-    readonly opts: WithRefProps;
+    readonly opts: WithRefOpts;
     readonly root: DateFieldRootState;
     readonly announcer: Announcer;
     readonly part: string;
     readonly config: SegmentConfig;
-    constructor(opts: WithRefProps, root: DateFieldRootState, part: string, config: SegmentConfig);
+    constructor(opts: WithRefOpts, root: DateFieldRootState, part: string, config: SegmentConfig);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
     getSegmentProps(): {
@@ -280,34 +286,36 @@ declare abstract class BaseNumericSegmentState {
 }
 declare class DateFieldYearSegmentState extends BaseNumericSegmentState {
     #private;
-    constructor(opts: WithRefProps, root: DateFieldRootState);
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
 }
 declare class DateFieldDaySegmentState extends BaseNumericSegmentState {
-    constructor(opts: WithRefProps, root: DateFieldRootState);
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
 }
 declare class DateFieldMonthSegmentState extends BaseNumericSegmentState {
-    constructor(opts: WithRefProps, root: DateFieldRootState);
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
 }
 declare class DateFieldHourSegmentState extends BaseNumericSegmentState {
-    constructor(opts: WithRefProps, root: DateFieldRootState);
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
 }
 declare class DateFieldMinuteSegmentState extends BaseNumericSegmentState {
-    constructor(opts: WithRefProps, root: DateFieldRootState);
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
 }
 declare class DateFieldSecondSegmentState extends BaseNumericSegmentState {
-    constructor(opts: WithRefProps, root: DateFieldRootState);
+    constructor(opts: WithRefOpts, root: DateFieldRootState);
 }
-type DateFieldDayPeriodSegmentStateProps = WithRefProps;
-declare class DateFieldDayPeriodSegmentState {
+interface DateFieldDayPeriodSegmentStateOpts extends WithRefOpts {
+}
+export declare class DateFieldDayPeriodSegmentState {
     #private;
-    readonly opts: DateFieldDayPeriodSegmentStateProps;
+    static create(opts: DateFieldDayPeriodSegmentStateOpts): DateFieldDayPeriodSegmentState;
+    readonly opts: DateFieldDayPeriodSegmentStateOpts;
     readonly root: DateFieldRootState;
-    constructor(opts: DateFieldDayPeriodSegmentStateProps, root: DateFieldRootState);
+    constructor(opts: DateFieldDayPeriodSegmentStateOpts, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         "aria-invalid": "true" | undefined;
         "aria-disabled": "true" | "false";
         "aria-readonly": "true" | "false";
@@ -363,12 +371,14 @@ declare class DateFieldDayPeriodSegmentState {
         };
     } | undefined;
 }
-type DateFieldLiteralSegmentStateProps = WithRefProps;
-declare class DateFieldDayLiteralSegmentState {
-    readonly opts: DateFieldLiteralSegmentStateProps;
+interface DateFieldLiteralSegmentStateOpts extends WithRefOpts {
+}
+export declare class DateFieldLiteralSegmentState {
+    static create(opts: DateFieldLiteralSegmentStateOpts): DateFieldLiteralSegmentState;
+    readonly opts: DateFieldLiteralSegmentStateOpts;
     readonly root: DateFieldRootState;
-    constructor(opts: DateFieldLiteralSegmentStateProps, root: DateFieldRootState);
-    props: {
+    constructor(opts: DateFieldLiteralSegmentStateOpts, root: DateFieldRootState);
+    readonly props: {
         readonly "aria-invalid": "true" | undefined;
         readonly "aria-disabled": "true" | "false";
         readonly "aria-readonly": "true" | "false";
@@ -394,12 +404,15 @@ declare class DateFieldDayLiteralSegmentState {
         readonly "aria-hidden": "true" | undefined;
     };
 }
-declare class DateFieldTimeZoneSegmentState {
-    readonly opts: DateFieldLiteralSegmentStateProps;
+interface DateFieldTimeZoneSegmentStateOpts extends WithRefOpts {
+}
+export declare class DateFieldTimeZoneSegmentState {
+    static create(opts: DateFieldTimeZoneSegmentStateOpts): DateFieldTimeZoneSegmentState;
+    readonly opts: DateFieldTimeZoneSegmentStateOpts;
     readonly root: DateFieldRootState;
-    constructor(opts: DateFieldLiteralSegmentStateProps, root: DateFieldRootState);
+    constructor(opts: DateFieldTimeZoneSegmentStateOpts, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly "data-readonly": "" | undefined;
         readonly "aria-invalid": "true" | undefined;
         readonly "aria-disabled": "true" | "false";
@@ -435,9 +448,7 @@ declare class DateFieldTimeZoneSegmentState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-export declare function useDateFieldRoot(props: DateFieldRootStateProps, rangeRoot?: DateRangeFieldRootState): DateFieldRootState;
-export declare function useDateFieldInput(props: DateFieldInputStateProps): DateFieldInputState;
-export declare function useDateFieldHiddenInput(): DateFieldHiddenInputState;
-export declare function useDateFieldSegment(part: SegmentPart, props: WithRefProps): DateFieldYearSegmentState | DateFieldDaySegmentState | DateFieldMonthSegmentState | DateFieldHourSegmentState | DateFieldMinuteSegmentState | DateFieldSecondSegmentState | DateFieldDayPeriodSegmentState | DateFieldDayLiteralSegmentState | DateFieldTimeZoneSegmentState;
-export declare function useDateFieldLabel(props: DateFieldLabelStateProps): DateFieldLabelState;
+export declare class DateFieldSegmentState {
+    static create(part: SegmentPart, opts: WithRefOpts): DateFieldYearSegmentState | DateFieldDaySegmentState | DateFieldMonthSegmentState | DateFieldHourSegmentState | DateFieldMinuteSegmentState | DateFieldSecondSegmentState | DateFieldDayPeriodSegmentState | DateFieldLiteralSegmentState | DateFieldTimeZoneSegmentState;
+}
 export {};

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

@@ -1,4 +1,4 @@
-import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef, 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";
@@ -69,7 +69,11 @@ const SEGMENT_CONFIGS = {
         padZero: true,
     },
 };
+const DateFieldRootContext = new Context("DateField.Root");
 export class DateFieldRootState {
+    static create(opts, rangeRoot) {
+        return DateFieldRootContext.set(new DateFieldRootState(opts, rangeRoot));
+    }
     value;
     placeholder;
     validate;
@@ -564,6 +568,9 @@ export class DateFieldRootState {
     }
 }
 export class DateFieldInputState {
+    static create(opts) {
+        return new DateFieldInputState(opts, DateFieldRootContext.get());
+    }
     opts;
     root;
     domContext;
@@ -572,8 +579,8 @@ export class DateFieldInputState {
         this.root = root;
         this.domContext = new DOMContext(opts.ref);
         this.root.domContext = this.domContext;
-        $effect(() => {
-            this.root.setName(this.opts.name.current);
+        watch(() => this.opts.name.current, (v) => {
+            this.root.setName(v);
         });
     }
     #ariaDescribedBy = $derived.by(() => {
@@ -596,7 +603,10 @@ export class DateFieldInputState {
         ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
     }));
 }
-class DateFieldHiddenInputState {
+export class DateFieldHiddenInputState {
+    static create() {
+        return new DateFieldHiddenInputState(DateFieldRootContext.get());
+    }
     root;
     shouldRender = $derived.by(() => this.root.name !== "");
     isoValue = $derived.by(() => this.root.value.current ? this.root.value.current.toString() : "");
@@ -611,7 +621,10 @@ class DateFieldHiddenInputState {
         };
     });
 }
-class DateFieldLabelState {
+export class DateFieldLabelState {
+    static create(opts) {
+        return new DateFieldLabelState(opts, DateFieldRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -899,7 +912,6 @@ class BaseNumericSegmentState {
         };
     });
 }
-// Year segment needs special handling
 class DateFieldYearSegmentState extends BaseNumericSegmentState {
     #pressedKeys = [];
     #backspaceCount = 0;
@@ -1018,7 +1030,6 @@ class DateFieldYearSegmentState extends BaseNumericSegmentState {
         });
     }
 }
-// Create segment states using the base class
 class DateFieldDaySegmentState extends BaseNumericSegmentState {
     constructor(opts, root) {
         super(opts, root, "day", SEGMENT_CONFIGS.day);
@@ -1068,7 +1079,10 @@ class DateFieldSecondSegmentState extends BaseNumericSegmentState {
         super(opts, root, "second", SEGMENT_CONFIGS.second);
     }
 }
-class DateFieldDayPeriodSegmentState {
+export class DateFieldDayPeriodSegmentState {
+    static create(opts) {
+        return new DateFieldDayPeriodSegmentState(opts, DateFieldRootContext.get());
+    }
     opts;
     root;
     #announcer;
@@ -1141,7 +1155,10 @@ class DateFieldDayPeriodSegmentState {
         };
     });
 }
-class DateFieldDayLiteralSegmentState {
+export class DateFieldLiteralSegmentState {
+    static create(opts) {
+        return new DateFieldLiteralSegmentState(opts, DateFieldRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -1155,7 +1172,10 @@ class DateFieldDayLiteralSegmentState {
         ...attachRef(this.opts.ref),
     }));
 }
-class DateFieldTimeZoneSegmentState {
+export class DateFieldTimeZoneSegmentState {
+    static create(opts) {
+        return new DateFieldTimeZoneSegmentState(opts, DateFieldRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -1185,7 +1205,31 @@ class DateFieldTimeZoneSegmentState {
         ...attachRef(this.opts.ref),
     }));
 }
-// Utils/helpers
+export class DateFieldSegmentState {
+    static create(part, opts) {
+        const root = DateFieldRootContext.get();
+        switch (part) {
+            case "day":
+                return new DateFieldDaySegmentState(opts, root);
+            case "month":
+                return new DateFieldMonthSegmentState(opts, root);
+            case "year":
+                return new DateFieldYearSegmentState(opts, root);
+            case "hour":
+                return new DateFieldHourSegmentState(opts, root);
+            case "minute":
+                return new DateFieldMinuteSegmentState(opts, root);
+            case "second":
+                return new DateFieldSecondSegmentState(opts, root);
+            case "dayPeriod":
+                return new DateFieldDayPeriodSegmentState(opts, root);
+            case "literal":
+                return new DateFieldLiteralSegmentState(opts, root);
+            case "timeZoneName":
+                return new DateFieldTimeZoneSegmentState(opts, root);
+        }
+    }
+}
 function isAcceptableDayPeriodKey(key) {
     return (isAcceptableSegmentKey(key) ||
         key === kbd.A ||
@@ -1202,48 +1246,6 @@ function isArrowDown(key) {
 function isBackspace(key) {
     return key === kbd.BACKSPACE;
 }
-const DateFieldRootContext = new Context("DateField.Root");
-export function useDateFieldRoot(props, rangeRoot) {
-    return DateFieldRootContext.set(new DateFieldRootState(props, rangeRoot));
-}
-export function useDateFieldInput(props) {
-    return new DateFieldInputState(props, DateFieldRootContext.get());
-}
-export function useDateFieldHiddenInput() {
-    return new DateFieldHiddenInputState(DateFieldRootContext.get());
-}
-export function useDateFieldSegment(part, props) {
-    return segmentPartToInstance({
-        part,
-        segmentProps: props,
-        root: DateFieldRootContext.get(),
-    });
-}
-export function useDateFieldLabel(props) {
-    return new DateFieldLabelState(props, DateFieldRootContext.get());
-}
-function segmentPartToInstance(props) {
-    switch (props.part) {
-        case "day":
-            return new DateFieldDaySegmentState(props.segmentProps, props.root);
-        case "month":
-            return new DateFieldMonthSegmentState(props.segmentProps, props.root);
-        case "year":
-            return new DateFieldYearSegmentState(props.segmentProps, props.root);
-        case "hour":
-            return new DateFieldHourSegmentState(props.segmentProps, props.root);
-        case "minute":
-            return new DateFieldMinuteSegmentState(props.segmentProps, props.root);
-        case "second":
-            return new DateFieldSecondSegmentState(props.segmentProps, props.root);
-        case "dayPeriod":
-            return new DateFieldDayPeriodSegmentState(props.segmentProps, props.root);
-        case "literal":
-            return new DateFieldDayLiteralSegmentState(props.segmentProps, props.root);
-        case "timeZoneName":
-            return new DateFieldTimeZoneSegmentState(props.segmentProps, props.root);
-    }
-}
 function prependYearZeros(year) {
     const digits = String(year).length;
     const diff = 4 - digits;

package/dist/bits/date-picker/components/date-picker-calendar.svelte

@@ -2,7 +2,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DatePickerCalendarProps } from "../types.js";
 	import { DatePickerRootContext } from "../date-picker.svelte.js";
-	import { useCalendarRoot } from "../../calendar/calendar.svelte.js";
+	import { CalendarRootState } from "../../calendar/calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 
 	const datePickerRootState = DatePickerRootContext.get();
 
-	const calendarState = useCalendarRoot({
+	const calendarState = CalendarRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -3,11 +3,11 @@
 	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
-	import { useDatePickerRoot } from "../date-picker.svelte.js";
+	import { DatePickerRootState } from "../date-picker.svelte.js";
 	import type { DatePickerRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
-	import { usePopoverRoot } from "../../popover/popover.svelte.js";
-	import { useDateFieldRoot } from "../../date-field/date-field.svelte.js";
+	import { PopoverRootState } from "../../popover/popover.svelte.js";
+	import { DateFieldRootState } from "../../date-field/date-field.svelte.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
@@ -15,6 +15,7 @@
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		value = $bindable(),
 		onValueChange = noop,
 		placeholder = $bindable(),
@@ -80,7 +81,7 @@
 		}
 	}
 
-	const pickerRootState = useDatePickerRoot({
+	const pickerRootState = DatePickerRootState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -129,11 +130,12 @@
 		yearFormat: box.with(() => yearFormat),
 	});
 
-	usePopoverRoot({
+	PopoverRootState.create({
 		open: pickerRootState.opts.open,
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 
-	useDateFieldRoot({
+	DateFieldRootState.create({
 		value: pickerRootState.opts.value,
 		disabled: pickerRootState.opts.disabled,
 		readonly: pickerRootState.opts.readonly,

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

@@ -1,13 +1,14 @@
 import type { DateValue } from "@internationalized/date";
 import { Context } from "runed";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { DateMatcher, SegmentPart } from "../../shared/index.js";
 import type { Granularity, HourCycle, WeekStartsOn } from "../../shared/date/types.js";
-type DatePickerRootStateProps = WritableBoxedValues<{
+export declare const DatePickerRootContext: Context<DatePickerRootState>;
+interface DatePickerRootStateOpts extends WritableBoxedValues<{
     value: DateValue | undefined;
     open: boolean;
     placeholder: DateValue;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     readonlySegments: SegmentPart[];
     isDateUnavailable: DateMatcher;
     isDateDisabled: DateMatcher;
@@ -32,13 +33,12 @@ type DatePickerRootStateProps = WritableBoxedValues<{
     onDateSelect?: () => void;
     monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
     yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
-}> & {
+}> {
     defaultPlaceholder: DateValue;
-};
-declare class DatePickerRootState {
-    readonly opts: DatePickerRootStateProps;
-    constructor(opts: DatePickerRootStateProps);
 }
-export declare const DatePickerRootContext: Context<DatePickerRootState>;
-export declare function useDatePickerRoot(props: DatePickerRootStateProps): DatePickerRootState;
+export declare class DatePickerRootState {
+    static create(opts: DatePickerRootStateOpts): DatePickerRootState;
+    readonly opts: DatePickerRootStateOpts;
+    constructor(opts: DatePickerRootStateOpts);
+}
 export {};

package/dist/bits/date-picker/date-picker.svelte.js

@@ -1,11 +1,12 @@
 import { Context } from "runed";
-class DatePickerRootState {
+import {} from "svelte-toolbelt";
+export const DatePickerRootContext = new Context("DatePicker.Root");
+export class DatePickerRootState {
+    static create(opts) {
+        return DatePickerRootContext.set(new DatePickerRootState(opts));
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
     }
 }
-export const DatePickerRootContext = new Context("DatePicker.Root");
-export function useDatePickerRoot(props) {
-    return DatePickerRootContext.set(new DatePickerRootState(props));
-}

package/dist/bits/date-picker/types.d.ts

@@ -36,6 +36,10 @@ export type DatePickerRootPropsWithoutHTML = WithChildren<{
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback function called when the open state changes complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * A function that returns true if the given date is unavailable,
      * where if selected, the date field will be marked as invalid.