bits-ui 2.6.2 → 2.8.0

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

package/dist/bits/toggle/components/toggle.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToggleRootProps } from "../types.js";
-	import { useToggleRoot } from "../toggle.svelte.js";
+	import { ToggleRootState } from "../toggle.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -19,7 +19,7 @@
 		...restProps
 	}: ToggleRootProps = $props();
 
-	const toggleState = useToggleRoot({
+	const toggleState = ToggleRootState.create({
 		pressed: box.with(
 			() => pressed,
 			(v) => {

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

@@ -1,15 +1,17 @@
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-export declare const toggleAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root"]>;
-type ToggleRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+export declare const toggleAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root"]>;
+interface ToggleRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     pressed: boolean;
-}>>;
-declare class ToggleRootState {
+}> {
+}
+export declare class ToggleRootState {
     #private;
-    readonly opts: ToggleRootStateProps;
-    constructor(opts: ToggleRootStateProps);
+    static create(opts: ToggleRootStateOpts): ToggleRootState;
+    readonly opts: ToggleRootStateOpts;
+    constructor(opts: ToggleRootStateOpts);
     onclick(_: BitsMouseEvent): void;
     readonly snippetProps: {
         pressed: boolean;
@@ -23,6 +25,5 @@ declare class ToggleRootState {
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
-export declare function useToggleRoot(props: ToggleRootStateProps): ToggleRootState;
 export declare function getToggleDataState(condition: boolean): "on" | "off";
 export {};

package/dist/bits/toggle/toggle.svelte.js

@@ -4,7 +4,10 @@ export const toggleAttrs = createBitsAttrs({
     component: "toggle",
     parts: ["root"],
 });
-class ToggleRootState {
+export class ToggleRootState {
+    static create(opts) {
+        return new ToggleRootState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -34,9 +37,6 @@ class ToggleRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-export function useToggleRoot(props) {
-    return new ToggleRootState(props);
-}
 export function getToggleDataState(condition) {
     return condition ? "on" : "off";
 }

package/dist/bits/toggle-group/components/toggle-group-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToggleGroupItemProps } from "../types.js";
-	import { useToggleGroupItem } from "../toggle-group.svelte.js";
+	import { ToggleGroupItemState } from "../toggle-group.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: ToggleGroupItemProps = $props();
 
-	const itemState = useToggleGroupItem({
+	const itemState = ToggleGroupItemState.create({
 		id: box.with(() => id),
 		value: box.with(() => value),
 		disabled: box.with(() => disabled ?? false),

package/dist/bits/toggle-group/components/toggle-group.svelte

@@ -2,7 +2,7 @@
 	import { type WritableBox, box } from "svelte-toolbelt";
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToggleGroupRootProps } from "../types.js";
-	import { useToggleGroupRoot } from "../toggle-group.svelte.js";
+	import { ToggleGroupRootState } from "../toggle-group.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
@@ -39,7 +39,7 @@
 		}
 	);
 
-	const rootState = useToggleGroupRoot({
+	const rootState = ToggleGroupRootState.create({
 		id: box.with(() => id),
 		value: box.with(
 			() => value!,

package/dist/bits/toggle-group/toggle-group.svelte.d.ts

@@ -1,65 +1,81 @@
-import { type WritableBox } from "svelte-toolbelt";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import { type WritableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-export declare const toggleGroupAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "item"]>;
-type ToggleGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+export declare const toggleGroupAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item"]>;
+interface ToggleGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     rovingFocus: boolean;
     loop: boolean;
     orientation: Orientation;
-}>>;
-declare class ToggleGroupBaseState {
-    readonly opts: ToggleGroupBaseStateProps;
-    rovingFocusGroup: UseRovingFocusReturn;
-    constructor(opts: ToggleGroupBaseStateProps);
-    props: {
+}> {
+}
+declare abstract class ToggleGroupBaseState {
+    readonly opts: ToggleGroupBaseStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    constructor(opts: ToggleGroupBaseStateOpts);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
     };
 }
-type ToggleGroupSingleStateProps = ToggleGroupBaseStateProps & WritableBoxedValues<{
+interface ToggleGroupSingleStateOpts extends ToggleGroupBaseStateOpts, WritableBoxedValues<{
     value: string;
-}>;
+}> {
+}
 declare class ToggleGroupSingleState extends ToggleGroupBaseState {
-    readonly opts: ToggleGroupSingleStateProps;
+    readonly opts: ToggleGroupSingleStateOpts;
     isMulti: boolean;
-    anyPressed: boolean;
-    constructor(opts: ToggleGroupSingleStateProps);
+    readonly anyPressed: boolean;
+    constructor(opts: ToggleGroupSingleStateOpts);
     includesItem(item: string): boolean;
     toggleItem(item: string, id: string): void;
 }
-type ToggleGroupMultipleStateProps = ToggleGroupBaseStateProps & WritableBoxedValues<{
+interface ToggleGroupMultipleStateOpts extends ToggleGroupBaseStateOpts, WritableBoxedValues<{
     value: string[];
-}>;
+}> {
+}
 declare class ToggleGroupMultipleState extends ToggleGroupBaseState {
-    readonly opts: ToggleGroupMultipleStateProps;
+    readonly opts: ToggleGroupMultipleStateOpts;
     isMulti: boolean;
-    anyPressed: boolean;
-    constructor(opts: ToggleGroupMultipleStateProps);
+    readonly anyPressed: boolean;
+    constructor(opts: ToggleGroupMultipleStateOpts);
     includesItem(item: string): boolean;
     toggleItem(item: string, id: string): void;
 }
-type ToggleGroupState = ToggleGroupSingleState | ToggleGroupMultipleState;
-type ToggleGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
+type ToggleGroup = ToggleGroupSingleState | ToggleGroupMultipleState;
+interface ToggleGroupRootOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    rovingFocus: boolean;
+    loop: boolean;
+    orientation: Orientation;
+}> {
+    type: "single" | "multiple";
+    value: WritableBox<string> | WritableBox<string[]>;
+}
+export declare class ToggleGroupRootState {
+    static create(opts: ToggleGroupRootOpts): ToggleGroup;
+}
+interface ToggleGroupItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
-}>>;
-declare class ToggleGroupItemState {
+}> {
+}
+export declare class ToggleGroupItemState {
     #private;
-    readonly opts: ToggleGroupItemStateProps;
-    readonly root: ToggleGroupState;
-    constructor(opts: ToggleGroupItemStateProps, root: ToggleGroupState);
+    static create(opts: ToggleGroupItemStateOpts): ToggleGroupItemState;
+    readonly opts: ToggleGroupItemStateOpts;
+    readonly root: ToggleGroup;
+    readonly isPressed: boolean;
+    constructor(opts: ToggleGroupItemStateOpts, root: ToggleGroup);
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    isPressed: boolean;
-    snippetProps: {
+    readonly snippetProps: {
         pressed: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "radio" | undefined;
         readonly tabindex: number;
@@ -74,15 +90,4 @@ declare class ToggleGroupItemState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type InitToggleGroupProps = WithRefProps<{
-    type: "single" | "multiple";
-    value: WritableBox<string> | WritableBox<string[]>;
-} & ReadableBoxedValues<{
-    disabled: boolean;
-    rovingFocus: boolean;
-    loop: boolean;
-    orientation: Orientation;
-}>>;
-export declare function useToggleGroupRoot(props: InitToggleGroupProps): ToggleGroupState;
-export declare function useToggleGroupItem(props: Omit<ToggleGroupItemStateProps, "rootState">): ToggleGroupItemState;
 export {};

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -1,18 +1,19 @@
-import { attachRef } from "svelte-toolbelt";
+import { attachRef, } from "svelte-toolbelt";
 import { Context } from "runed";
 import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } 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";
 export const toggleGroupAttrs = createBitsAttrs({
     component: "toggle-group",
     parts: ["root", "item"],
 });
+const ToggleGroupRootContext = new Context("ToggleGroup.Root");
 class ToggleGroupBaseState {
     opts;
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             candidateAttr: toggleGroupAttrs.item,
             rootNode: opts.ref,
             loop: opts.loop,
@@ -70,10 +71,29 @@ class ToggleGroupMultipleState extends ToggleGroupBaseState {
         }
     }
 }
-class ToggleGroupItemState {
+export class ToggleGroupRootState {
+    static create(opts) {
+        const { type, ...rest } = opts;
+        const rootState = type === "single"
+            ? new ToggleGroupSingleState(rest)
+            : new ToggleGroupMultipleState(rest);
+        return ToggleGroupRootContext.set(rootState);
+    }
+}
+export class ToggleGroupItemState {
+    static create(opts) {
+        return new ToggleGroupItemState(opts, ToggleGroupRootContext.get());
+    }
     opts;
     root;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
+    #ariaChecked = $derived.by(() => {
+        return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
+    });
+    #ariaPressed = $derived.by(() => {
+        return this.root.isMulti ? getAriaPressed(this.isPressed) : undefined;
+    });
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -110,13 +130,6 @@ class ToggleGroupItemState {
             return;
         this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
     }
-    isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
-    #ariaChecked = $derived.by(() => {
-        return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
-    });
-    #ariaPressed = $derived.by(() => {
-        return this.root.isMulti ? getAriaPressed(this.isPressed) : undefined;
-    });
     #tabIndex = $state(0);
     snippetProps = $derived.by(() => ({
         pressed: this.isPressed,
@@ -139,20 +152,6 @@ class ToggleGroupItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-//
-// HELPERS
-//
 function getToggleItemDataState(condition) {
     return condition ? "on" : "off";
 }
-const ToggleGroupRootContext = new Context("ToggleGroup.Root");
-export function useToggleGroupRoot(props) {
-    const { type, ...rest } = props;
-    const rootState = type === "single"
-        ? new ToggleGroupSingleState(rest)
-        : new ToggleGroupMultipleState(rest);
-    return ToggleGroupRootContext.set(rootState);
-}
-export function useToggleGroupItem(props) {
-    return new ToggleGroupItemState(props, ToggleGroupRootContext.get());
-}

package/dist/bits/toolbar/components/toolbar-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarButtonProps } from "../types.js";
-	import { useToolbarButton } from "../toolbar.svelte.js";
+	import { ToolbarButtonState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: ToolbarButtonProps = $props();
 
-	const buttonState = useToolbarButton({
+	const buttonState = ToolbarButtonState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled ?? false),
 		ref: box.with(

package/dist/bits/toolbar/components/toolbar-group-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarGroupItemProps } from "../types.js";
-	import { useToolbarGroupItem } from "../toolbar.svelte.js";
+	import { ToolbarGroupItemState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: ToolbarGroupItemProps = $props();
 
-	const groupItemState = useToolbarGroupItem({
+	const groupItemState = ToolbarGroupItemState.create({
 		id: box.with(() => id),
 		value: box.with(() => value),
 		disabled: box.with(() => disabled ?? false),