bits-ui 2.7.0 → 2.8.0

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),

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

@@ -2,7 +2,7 @@
 	import { type WritableBox, box } from "svelte-toolbelt";
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToolbarGroupProps } from "../types.js";
-	import { useToolbarGroup } from "../toolbar.svelte.js";
+	import { ToolbarGroupState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
@@ -36,7 +36,7 @@
 		}
 	);
 
-	const groupState = useToolbarGroup({
+	const groupState = ToolbarGroupState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
 		type,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useToolbarLink } from "../toolbar.svelte.js";
+	import { ToolbarLinkState } from "../toolbar.svelte.js";
 	import type { ToolbarLinkProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: ToolbarLinkProps = $props();
 
-	const linkState = useToolbarLink({
+	const linkState = ToolbarLinkState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarRootProps } from "../types.js";
-	import { useToolbarRoot } from "../toolbar.svelte.js";
+	import { ToolbarRootState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: ToolbarRootProps = $props();
 
-	const rootState = useToolbarRoot({
+	const rootState = ToolbarRootState.create({
 		id: box.with(() => id),
 		orientation: box.with(() => orientation),
 		loop: box.with(() => loop),

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

@@ -1,30 +1,32 @@
-import { type WritableBox } from "svelte-toolbelt";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
+import { type WritableBox, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { Orientation } from "../../shared/index.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-export declare const toolbarAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "item", "group", "group-item", "link", "button"]>;
-type ToolbarRootStateProps = WithRefProps<ReadableBoxedValues<{
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+export declare const toolbarAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item", "group", "group-item", "link", "button"]>;
+interface ToolbarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     orientation: Orientation;
     loop: boolean;
-}>>;
-declare class ToolbarRootState {
-    readonly opts: ToolbarRootStateProps;
-    rovingFocusGroup: UseRovingFocusReturn;
-    constructor(opts: ToolbarRootStateProps);
+}> {
+}
+export declare class ToolbarRootState {
+    static create(opts: ToolbarRootStateOpts): ToolbarRootState;
+    readonly opts: ToolbarRootStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    constructor(opts: ToolbarRootStateOpts);
     readonly props: {
         readonly id: string;
         readonly role: "toolbar";
         readonly "data-orientation": Orientation;
     };
 }
-type ToolbarGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
+interface ToolbarGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>>;
-declare class ToolbarGroupBaseState {
-    readonly opts: ToolbarGroupBaseStateProps;
+}> {
+}
+declare abstract class ToolbarGroupBaseState {
+    readonly opts: ToolbarGroupBaseStateOpts;
     readonly root: ToolbarRootState;
-    constructor(opts: ToolbarGroupBaseStateProps, root: ToolbarRootState);
+    constructor(opts: ToolbarGroupBaseStateOpts, root: ToolbarRootState);
     readonly props: {
         readonly id: string;
         readonly role: "group";
@@ -32,41 +34,54 @@ declare class ToolbarGroupBaseState {
         readonly "data-disabled": "" | undefined;
     };
 }
-type ToolbarGroupSingleStateProps = ToolbarGroupBaseStateProps & WritableBoxedValues<{
+interface ToolbarGroupSingleStateOpts extends ToolbarGroupBaseStateOpts, WritableBoxedValues<{
     value: string;
-}>;
+}> {
+}
 declare class ToolbarGroupSingleState extends ToolbarGroupBaseState {
-    readonly opts: ToolbarGroupSingleStateProps;
+    readonly opts: ToolbarGroupSingleStateOpts;
     readonly root: ToolbarRootState;
     readonly isMulti: false;
     readonly anyPressed: boolean;
-    constructor(opts: ToolbarGroupSingleStateProps, root: ToolbarRootState);
+    constructor(opts: ToolbarGroupSingleStateOpts, root: ToolbarRootState);
     includesItem(item: string): boolean;
     toggleItem(item: string): void;
 }
-type ToolbarGroupMultipleStateProps = ToolbarGroupBaseStateProps & WritableBoxedValues<{
+interface ToolbarGroupMultipleStateOpts extends ToolbarGroupBaseStateOpts, WritableBoxedValues<{
     value: string[];
-}>;
+}> {
+}
 declare class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
-    readonly opts: ToolbarGroupMultipleStateProps;
+    readonly opts: ToolbarGroupMultipleStateOpts;
     readonly root: ToolbarRootState;
     readonly isMulti: true;
     readonly anyPressed: boolean;
-    constructor(opts: ToolbarGroupMultipleStateProps, root: ToolbarRootState);
+    constructor(opts: ToolbarGroupMultipleStateOpts, root: ToolbarRootState);
     includesItem(item: string): boolean;
     toggleItem(item: string): void;
 }
-type ToolbarGroupState = ToolbarGroupSingleState | ToolbarGroupMultipleState;
-type ToolbarGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
+type ToolbarGroup = ToolbarGroupSingleState | ToolbarGroupMultipleState;
+interface ToolbarGroupRootOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+}> {
+    type: "single" | "multiple";
+    value: WritableBox<string> | WritableBox<string[]>;
+}
+export declare class ToolbarGroupState {
+    static create(opts: ToolbarGroupRootOpts): ToolbarGroup;
+}
+interface ToolbarGroupItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
-}>>;
-declare class ToolbarGroupItemState {
+}> {
+}
+export declare class ToolbarGroupItemState {
     #private;
-    readonly opts: ToolbarGroupItemStateProps;
-    readonly group: ToolbarGroupState;
+    static create(opts: ToolbarGroupItemStateOpts): ToolbarGroupItemState;
+    readonly opts: ToolbarGroupItemStateOpts;
+    readonly group: ToolbarGroup;
     readonly root: ToolbarRootState;
-    constructor(opts: ToolbarGroupItemStateProps, group: ToolbarGroupState, root: ToolbarRootState);
+    constructor(opts: ToolbarGroupItemStateOpts, group: ToolbarGroup, root: ToolbarRootState);
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     readonly isPressed: boolean;
@@ -85,12 +100,14 @@ declare class ToolbarGroupItemState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type ToolbarLinkStateProps = WithRefProps;
-declare class ToolbarLinkState {
+interface ToolbarLinkStateOpts extends WithRefOpts {
+}
+export declare class ToolbarLinkState {
     #private;
-    readonly opts: ToolbarLinkStateProps;
+    static create(opts: ToolbarLinkStateOpts): ToolbarLinkState;
+    readonly opts: ToolbarLinkStateOpts;
     readonly root: ToolbarRootState;
-    constructor(opts: ToolbarLinkStateProps, root: ToolbarRootState);
+    constructor(opts: ToolbarLinkStateOpts, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
         readonly id: string;
@@ -100,14 +117,16 @@ declare class ToolbarLinkState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type ToolbarButtonStateProps = WithRefProps<ReadableBoxedValues<{
+interface ToolbarButtonStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>>;
-declare class ToolbarButtonState {
+}> {
+}
+export declare class ToolbarButtonState {
     #private;
-    readonly opts: ToolbarButtonStateProps;
+    static create(opts: ToolbarButtonStateOpts): ToolbarButtonState;
+    readonly opts: ToolbarButtonStateOpts;
     readonly root: ToolbarRootState;
-    constructor(opts: ToolbarButtonStateProps, root: ToolbarRootState);
+    constructor(opts: ToolbarButtonStateOpts, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
         readonly id: string;
@@ -119,15 +138,4 @@ declare class ToolbarButtonState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-export declare function useToolbarRoot(props: ToolbarRootStateProps): ToolbarRootState;
-type InitToolbarGroupProps = WithRefProps<{
-    type: "single" | "multiple";
-    value: WritableBox<string> | WritableBox<string[]>;
-} & ReadableBoxedValues<{
-    disabled: boolean;
-}>>;
-export declare function useToolbarGroup(props: InitToolbarGroupProps): ToolbarGroupState;
-export declare function useToolbarGroupItem(props: ToolbarGroupItemStateProps): ToolbarGroupItemState;
-export declare function useToolbarButton(props: ToolbarButtonStateProps): ToolbarButtonState;
-export declare function useToolbarLink(props: ToolbarLinkStateProps): ToolbarLinkState;
 export {};