bits-ui 2.6.2 → 2.8.0

package/dist/bits/tabs/tabs.svelte.d.ts

@@ -1,24 +1,26 @@
 import { SvelteMap } from "svelte/reactivity";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { TabsActivationMode } from "./types.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 { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
-type TabsRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+interface TabsRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     orientation: Orientation;
     loop: boolean;
     activationMode: TabsActivationMode;
     disabled: boolean;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: string;
-}>>;
-declare class TabsRootState {
-    readonly opts: TabsRootStateProps;
-    rovingFocusGroup: UseRovingFocusReturn;
+}> {
+}
+export declare class TabsRootState {
+    static create(opts: TabsRootStateOpts): TabsRootState;
+    readonly opts: TabsRootStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
     triggerIds: string[];
     readonly valueToTriggerId: SvelteMap<string, string>;
     readonly valueToContentId: SvelteMap<string, string>;
-    constructor(opts: TabsRootStateProps);
+    constructor(opts: TabsRootStateOpts);
     registerTrigger(id: string, value: string): () => void;
     registerContent(id: string, value: string): () => void;
     setValue(v: string): void;
@@ -27,12 +29,14 @@ declare class TabsRootState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-type TabsListStateProps = WithRefProps;
-declare class TabsListState {
+interface TabsListStateOpts extends WithRefOpts {
+}
+export declare class TabsListState {
     #private;
-    readonly opts: TabsListStateProps;
+    static create(opts: TabsListStateOpts): TabsListState;
+    readonly opts: TabsListStateOpts;
     readonly root: TabsRootState;
-    constructor(opts: TabsListStateProps, root: TabsRootState);
+    constructor(opts: TabsListStateOpts, root: TabsRootState);
     readonly props: {
         readonly id: string;
         readonly role: "tablist";
@@ -41,15 +45,17 @@ declare class TabsListState {
         readonly "data-disabled": "" | undefined;
     };
 }
-type TabsTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+interface TabsTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
-}>>;
-declare class TabsTriggerState {
+}> {
+}
+export declare class TabsTriggerState {
     #private;
-    readonly opts: TabsTriggerStateProps;
+    static create(opts: TabsTriggerStateOpts): TabsTriggerState;
+    readonly opts: TabsTriggerStateOpts;
     readonly root: TabsRootState;
-    constructor(opts: TabsTriggerStateProps, root: TabsRootState);
+    constructor(opts: TabsTriggerStateOpts, root: TabsRootState);
     onfocus(_: BitsFocusEvent): void;
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -69,15 +75,17 @@ declare class TabsTriggerState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type TabsContentStateProps = WithRefProps<ReadableBoxedValues<{
+interface TabsContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
-}>>;
-declare class TabsContentState {
+}> {
+}
+export declare class TabsContentState {
     #private;
-    readonly opts: TabsContentStateProps;
+    static create(opts: TabsContentStateOpts): TabsContentState;
+    readonly opts: TabsContentStateOpts;
     readonly root: TabsRootState;
-    constructor(opts: TabsContentStateProps, root: TabsRootState);
-    props: {
+    constructor(opts: TabsContentStateOpts, root: TabsRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "tabpanel";
         readonly hidden: true | undefined;
@@ -88,8 +96,4 @@ declare class TabsContentState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-export declare function useTabsRoot(props: TabsRootStateProps): TabsRootState;
-export declare function useTabsTrigger(props: TabsTriggerStateProps): TabsTriggerState;
-export declare function useTabsList(props: TabsListStateProps): TabsListState;
-export declare function useTabsContent(props: TabsContentStateProps): TabsContentState;
 export {};

package/dist/bits/tabs/tabs.svelte.js

@@ -3,12 +3,16 @@ import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 const tabsAttrs = createBitsAttrs({
     component: "tabs",
     parts: ["root", "list", "trigger", "content"],
 });
-class TabsRootState {
+const TabsRootContext = new Context("Tabs.Root");
+export class TabsRootState {
+    static create(opts) {
+        return TabsRootContext.set(new TabsRootState(opts));
+    }
     opts;
     rovingFocusGroup;
     triggerIds = $state([]);
@@ -18,7 +22,7 @@ class TabsRootState {
     valueToContentId = new SvelteMap();
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             candidateAttr: tabsAttrs.trigger,
             rootNode: this.opts.ref,
             loop: this.opts.loop,
@@ -51,7 +55,10 @@ class TabsRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class TabsListState {
+export class TabsListState {
+    static create(opts) {
+        return new TabsListState(opts, TabsRootContext.get());
+    }
     opts;
     root;
     #isDisabled = $derived.by(() => this.root.opts.disabled.current);
@@ -69,7 +76,10 @@ class TabsListState {
         ...attachRef(this.opts.ref),
     }));
 }
-class TabsTriggerState {
+export class TabsTriggerState {
+    static create(opts) {
+        return new TabsTriggerState(opts, TabsRootContext.get());
+    }
     opts;
     root;
     #tabIndex = $state(0);
@@ -139,7 +149,10 @@ class TabsTriggerState {
         ...attachRef(this.opts.ref),
     }));
 }
-class TabsContentState {
+export class TabsContentState {
+    static create(opts) {
+        return new TabsContentState(opts, TabsRootContext.get());
+    }
     opts;
     root;
     #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
@@ -164,19 +177,6 @@ class TabsContentState {
         ...attachRef(this.opts.ref),
     }));
 }
-const TabsRootContext = new Context("Tabs.Root");
-export function useTabsRoot(props) {
-    return TabsRootContext.set(new TabsRootState(props));
-}
-export function useTabsTrigger(props) {
-    return new TabsTriggerState(props, TabsRootContext.get());
-}
-export function useTabsList(props) {
-    return new TabsListState(props, TabsRootContext.get());
-}
-export function useTabsContent(props) {
-    return new TabsContentState(props, TabsRootContext.get());
-}
 function getTabDataState(condition) {
     return condition ? "active" : "inactive";
 }

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { useTimeFieldHiddenInput } from "../time-field.svelte.js";
+	import { TimeFieldHiddenInputState } from "../time-field.svelte.js";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	const hiddenInputState = useTimeFieldHiddenInput();
+	const hiddenInputState = TimeFieldHiddenInputState.create();
 </script>
 
 {#if hiddenInputState.shouldRender}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useTimeFieldInput } from "../time-field.svelte.js";
+	import { TimeFieldInputState } from "../time-field.svelte.js";
 	import type { TimeFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./time-field-hidden-input.svelte";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,7 +16,7 @@
 		...restProps
 	}: TimeFieldInputProps = $props();
 
-	const inputState = useTimeFieldInput({
+	const inputState = TimeFieldInputState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useTimeFieldSegment } from "../time-field.svelte.js";
+	import { DateFieldSegmentState } from "../time-field.svelte.js";
 	import type { TimeFieldSegmentProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: TimeFieldSegmentProps = $props();
 
-	const segmentState = useTimeFieldSegment(part, {
+	const segmentState = DateFieldSegmentState.create(part, {
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -7,7 +7,7 @@
 <script lang="ts" generics="T extends TimeValue = Time">
 	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
-	import { useTimeFieldRoot } from "../time-field.svelte.js";
+	import { TimeFieldRootState } from "../time-field.svelte.js";
 	import type { TimeFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultTime } from "../../../internal/date-time/utils.js";
@@ -60,7 +60,7 @@
 		}
 	);
 
-	useTimeFieldRoot({
+	TimeFieldRootState.create({
 		value: box.with(
 			() => value,
 			(v) => {

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}`);
-    }
-}