bits-ui 2.7.0 → 2.8.0

package/dist/bits/toolbar/toolbar.svelte.js

@@ -1,18 +1,23 @@
-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 toolbarAttrs = createBitsAttrs({
     component: "toolbar",
     parts: ["root", "item", "group", "group-item", "link", "button"],
 });
-class ToolbarRootState {
+const ToolbarRootContext = new Context("Toolbar.Root");
+const ToolbarGroupContext = new Context("Toolbar.Group");
+export class ToolbarRootState {
+    static create(opts) {
+        return ToolbarRootContext.set(new ToolbarRootState(opts));
+    }
     opts;
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             orientation: this.opts.orientation,
             loop: this.opts.loop,
             rootNode: this.opts.ref,
@@ -87,7 +92,21 @@ class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
         }
     }
 }
-class ToolbarGroupItemState {
+export class ToolbarGroupState {
+    static create(opts) {
+        const { type, ...rest } = opts;
+        const rootState = ToolbarRootContext.get();
+        const groupState = type === "single"
+            ? new ToolbarGroupSingleState(rest, rootState)
+            : new ToolbarGroupMultipleState(rest, rootState);
+        return ToolbarGroupContext.set(groupState);
+    }
+}
+export class ToolbarGroupItemState {
+    static create(opts) {
+        const group = ToolbarGroupContext.get();
+        return new ToolbarGroupItemState(opts, group, group.root);
+    }
     opts;
     group;
     root;
@@ -149,7 +168,10 @@ class ToolbarGroupItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class ToolbarLinkState {
+export class ToolbarLinkState {
+    static create(opts) {
+        return new ToolbarLinkState(opts, ToolbarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -184,7 +206,10 @@ class ToolbarLinkState {
         ...attachRef(this.opts.ref),
     }));
 }
-class ToolbarButtonState {
+export class ToolbarButtonState {
+    static create(opts) {
+        return new ToolbarButtonState(opts, ToolbarRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -227,26 +252,3 @@ class ToolbarButtonState {
 function getToggleItemDataState(condition) {
     return condition ? "on" : "off";
 }
-const ToolbarRootContext = new Context("Toolbar.Root");
-const ToolbarGroupContext = new Context("Toolbar.Group");
-export function useToolbarRoot(props) {
-    return ToolbarRootContext.set(new ToolbarRootState(props));
-}
-export function useToolbarGroup(props) {
-    const { type, ...rest } = props;
-    const rootState = ToolbarRootContext.get();
-    const groupState = type === "single"
-        ? new ToolbarGroupSingleState(rest, rootState)
-        : new ToolbarGroupMultipleState(rest, rootState);
-    return ToolbarGroupContext.set(groupState);
-}
-export function useToolbarGroupItem(props) {
-    const group = ToolbarGroupContext.get();
-    return new ToolbarGroupItemState(props, group, group.root);
-}
-export function useToolbarButton(props) {
-    return new ToolbarButtonState(props, ToolbarRootContext.get());
-}
-export function useToolbarLink(props) {
-    return new ToolbarLinkState(props, ToolbarRootContext.get());
-}

package/dist/bits/tooltip/components/tooltip-content-static.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentStaticProps } from "../types.js";
-	import { useTooltipContent } from "../tooltip.svelte.js";
+	import { TooltipContentState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
@@ -21,7 +21,7 @@
 		...restProps
 	}: TooltipContentStaticProps = $props();
 
-	const contentState = useTooltipContent({
+	const contentState = TooltipContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -67,7 +67,7 @@
 		{...contentState.popperProps}
 		tooltip={true}
 		isStatic
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}
 		loop={false}

package/dist/bits/tooltip/components/tooltip-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentProps } from "../types.js";
-	import { useTooltipContent } from "../tooltip.svelte.js";
+	import { TooltipContentState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
@@ -29,7 +29,7 @@
 		...restProps
 	}: TooltipContentProps = $props();
 
-	const contentState = useTooltipContent({
+	const contentState = TooltipContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -85,7 +85,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}
 		loop={false}

package/dist/bits/tooltip/components/tooltip-provider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { TooltipProviderProps } from "../types.js";
-	import { useTooltipProvider } from "../tooltip.svelte.js";
+	import { TooltipProviderState } from "../tooltip.svelte.js";
 
 	let {
 		children,
@@ -13,7 +13,7 @@
 		skipDelayDuration = 300,
 	}: TooltipProviderProps = $props();
 
-	useTooltipProvider({
+	TooltipProviderState.create({
 		delayDuration: box.with(() => delayDuration),
 		disableCloseOnTriggerClick: box.with(() => disableCloseOnTriggerClick),
 		disableHoverableContent: box.with(() => disableHoverableContent),

package/dist/bits/tooltip/components/tooltip-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TooltipTriggerProps } from "../types.js";
-	import { useTooltipTrigger } from "../tooltip.svelte.js";
+	import { TooltipTriggerState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: TooltipTriggerProps = $props();
 
-	const triggerState = useTooltipTrigger({
+	const triggerState = TooltipTriggerState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled ?? false),
 		ref: box.with(

package/dist/bits/tooltip/components/tooltip.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { TooltipRootProps } from "../types.js";
-	import { useTooltipRoot } from "../tooltip.svelte.js";
+	import { TooltipRootState } from "../tooltip.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		disabled,
 		delayDuration,
 		disableCloseOnTriggerClick,
@@ -16,7 +17,7 @@
 		children,
 	}: TooltipRootProps = $props();
 
-	useTooltipRoot({
+	TooltipRootState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -29,6 +30,7 @@
 		disableHoverableContent: box.with(() => disableHoverableContent),
 		ignoreNonKeyboardFocus: box.with(() => ignoreNonKeyboardFocus),
 		disabled: box.with(() => disabled),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>
 

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

@@ -1,38 +1,42 @@
-import { DOMContext } from "svelte-toolbelt";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
+import { DOMContext, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
+import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
-export declare const tooltipAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["content", "trigger"]>;
-type TooltipProviderStateProps = ReadableBoxedValues<{
+export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
+interface TooltipProviderStateOpts extends ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
     disableCloseOnTriggerClick: boolean;
     disabled: boolean;
     ignoreNonKeyboardFocus: boolean;
     skipDelayDuration: number;
-}>;
-declare class TooltipProviderState {
+}> {
+}
+export declare class TooltipProviderState {
     #private;
-    readonly opts: TooltipProviderStateProps;
+    static create(opts: TooltipProviderStateOpts): TooltipProviderState;
+    readonly opts: TooltipProviderStateOpts;
     isOpenDelayed: boolean;
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
-    constructor(opts: TooltipProviderStateProps);
+    constructor(opts: TooltipProviderStateOpts);
     onOpen: (tooltip: TooltipRootState) => void;
     onClose: (tooltip: TooltipRootState) => void;
     isTooltipOpen: (tooltip: TooltipRootState) => boolean;
 }
-type TooltipRootStateProps = ReadableBoxedValues<{
+interface TooltipRootStateOpts extends ReadableBoxedValues<{
     delayDuration: number | undefined;
     disableHoverableContent: boolean | undefined;
     disableCloseOnTriggerClick: boolean | undefined;
     disabled: boolean | undefined;
     ignoreNonKeyboardFocus: boolean | undefined;
-}> & WritableBoxedValues<{
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}>, WritableBoxedValues<{
     open: boolean;
-}>;
-declare class TooltipRootState {
+}> {
+}
+export declare class TooltipRootState {
     #private;
-    readonly opts: TooltipRootStateProps;
+    static create(opts: TooltipRootStateOpts): TooltipRootState;
+    readonly opts: TooltipRootStateOpts;
     readonly provider: TooltipProviderState;
     readonly delayDuration: number;
     readonly disableHoverableContent: boolean;
@@ -42,21 +46,23 @@ declare class TooltipRootState {
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
     readonly stateAttr: string;
-    constructor(opts: TooltipRootStateProps, provider: TooltipProviderState);
+    constructor(opts: TooltipRootStateOpts, provider: TooltipProviderState);
     handleOpen: () => void;
     handleClose: () => void;
     onTriggerEnter: () => void;
     onTriggerLeave: () => void;
 }
-type TooltipTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+interface TooltipTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>>;
-declare class TooltipTriggerState {
+}> {
+}
+export declare class TooltipTriggerState {
     #private;
-    readonly opts: TooltipTriggerStateProps;
+    static create(opts: TooltipTriggerStateOpts): TooltipTriggerState;
+    readonly opts: TooltipTriggerStateOpts;
     readonly root: TooltipRootState;
     domContext: DOMContext;
-    constructor(opts: TooltipTriggerStateProps, root: TooltipRootState);
+    constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState);
     handlePointerUp: () => void;
     readonly props: {
         readonly id: string;
@@ -75,14 +81,16 @@ declare class TooltipTriggerState {
         readonly onclick: MouseEventHandler<HTMLElement>;
     };
 }
-type TooltipContentStateProps = WithRefProps & ReadableBoxedValues<{
+interface TooltipContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
-}>;
-declare class TooltipContentState {
-    readonly opts: TooltipContentStateProps;
+}> {
+}
+export declare class TooltipContentState {
+    static create(opts: TooltipContentStateOpts): TooltipContentState;
+    readonly opts: TooltipContentStateOpts;
     readonly root: TooltipRootState;
-    constructor(opts: TooltipContentStateProps, root: TooltipRootState);
+    constructor(opts: TooltipContentStateOpts, root: TooltipRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
@@ -106,8 +114,4 @@ declare class TooltipContentState {
         onCloseAutoFocus: (e: Event) => void;
     };
 }
-export declare function useTooltipProvider(props: TooltipProviderStateProps): TooltipProviderState;
-export declare function useTooltipRoot(props: TooltipRootStateProps): TooltipRootState;
-export declare function useTooltipTrigger(props: TooltipTriggerStateProps): TooltipTriggerState;
-export declare function useTooltipContent(props: TooltipContentStateProps): TooltipContentState;
 export {};

package/dist/bits/tooltip/tooltip.svelte.js

@@ -1,15 +1,21 @@
-import { box, onMountEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { box, onMountEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
-import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
 import { isElement, isFocusVisible } from "../../internal/is.js";
-import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { createBitsAttrs, getDataDisabled } from "../../internal/attrs.js";
+import { TimeoutFn } from "../../internal/timeout-fn.js";
+import { GraceArea } from "../../internal/grace-area.svelte.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 export const tooltipAttrs = createBitsAttrs({
     component: "tooltip",
     parts: ["content", "trigger"],
 });
-class TooltipProviderState {
+const TooltipProviderContext = new Context("Tooltip.Provider");
+const TooltipRootContext = new Context("Tooltip.Root");
+export class TooltipProviderState {
+    static create(opts) {
+        return TooltipProviderContext.set(new TooltipProviderState(opts));
+    }
     opts;
     isOpenDelayed = $state(true);
     isPointerInTransit = box(false);
@@ -17,7 +23,7 @@ class TooltipProviderState {
     #openTooltip = $state(null);
     constructor(opts) {
         this.opts = opts;
-        this.#timerFn = useTimeoutFn(() => {
+        this.#timerFn = new TimeoutFn(() => {
             this.isOpenDelayed = true;
         }, this.opts.skipDelayDuration.current, { immediate: false });
     }
@@ -51,7 +57,10 @@ class TooltipProviderState {
         return this.#openTooltip === tooltip;
     };
 }
-class TooltipRootState {
+export class TooltipRootState {
+    static create(opts) {
+        return TooltipRootContext.set(new TooltipRootState(opts, TooltipProviderContext.get()));
+    }
     opts;
     provider;
     delayDuration = $derived.by(() => this.opts.delayDuration.current ?? this.provider.opts.delayDuration.current);
@@ -74,14 +83,21 @@ class TooltipRootState {
     constructor(opts, provider) {
         this.opts = opts;
         this.provider = provider;
-        this.#timerFn = useTimeoutFn(() => {
+        this.#timerFn = new TimeoutFn(() => {
             this.#wasOpenDelayed = true;
             this.opts.open.current = true;
         }, this.delayDuration ?? 0, { immediate: false });
+        new OpenChangeComplete({
+            open: this.opts.open,
+            ref: box.with(() => this.contentNode),
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
         watch(() => this.delayDuration, () => {
             if (this.delayDuration === undefined)
                 return;
-            this.#timerFn = useTimeoutFn(() => {
+            this.#timerFn = new TimeoutFn(() => {
                 this.#wasOpenDelayed = true;
                 this.opts.open.current = true;
             }, this.delayDuration, { immediate: false });
@@ -131,7 +147,10 @@ class TooltipRootState {
         }
     };
 }
-class TooltipTriggerState {
+export class TooltipTriggerState {
+    static create(opts) {
+        return new TooltipTriggerState(opts, TooltipRootContext.get());
+    }
     opts;
     root;
     #isPointerDown = box(false);
@@ -215,13 +234,16 @@ class TooltipTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
-class TooltipContentState {
+export class TooltipContentState {
+    static create(opts) {
+        return new TooltipContentState(opts, TooltipRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useGraceArea({
+        new GraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
@@ -287,20 +309,3 @@ class TooltipContentState {
         onCloseAutoFocus: this.onCloseAutoFocus,
     };
 }
-//
-// CONTEXT METHODS
-//
-const TooltipProviderContext = new Context("Tooltip.Provider");
-const TooltipRootContext = new Context("Tooltip.Root");
-export function useTooltipProvider(props) {
-    return TooltipProviderContext.set(new TooltipProviderState(props));
-}
-export function useTooltipRoot(props) {
-    return TooltipRootContext.set(new TooltipRootState(props, TooltipProviderContext.get()));
-}
-export function useTooltipTrigger(props) {
-    return new TooltipTriggerState(props, TooltipRootContext.get());
-}
-export function useTooltipContent(props) {
-    return new TooltipContentState(props, TooltipRootContext.get());
-}

package/dist/bits/tooltip/types.d.ts

@@ -57,6 +57,10 @@ export type TooltipRootPropsWithoutHTML = WithChildren<{
      * A callback that will be called when the tooltip is opened or closed.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that will be called when the tooltip is opened or closed.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * The delay in milliseconds before the tooltip opens.
      *

package/dist/bits/utilities/config/bits-config.d.ts

@@ -1,5 +1,5 @@
 import { Context } from "runed";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
+import { type ReadableBoxedValues } from "svelte-toolbelt";
 import type { BitsConfigPropsWithoutChildren } from "./types.js";
 type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
 export declare const BitsConfigContext: Context<BitsConfigState>;

package/dist/bits/utilities/dismissible-layer/dismissible-layer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { DismissibleLayerImplProps } from "./types.js";
-	import { useDismissibleLayer } from "./use-dismissable-layer.svelte.js";
+	import { DismissibleLayerState } from "./use-dismissable-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 
 	let {
@@ -15,7 +15,7 @@
 		ref,
 	}: DismissibleLayerImplProps = $props();
 
-	const dismissibleLayerState = useDismissibleLayer({
+	const dismissibleLayerState = DismissibleLayerState.create({
 		id: box.with(() => id),
 		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
 		onInteractOutside: box.with(() => onInteractOutside),

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.d.ts

@@ -1,19 +1,18 @@
-import { type WritableBox } from "svelte-toolbelt";
+import { type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { DismissibleLayerImplProps } from "./types.js";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type DismissibleLayerStateProps = ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> & {
+interface DismissibleLayerStateOpts extends ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> {
     ref: WritableBox<HTMLElement | null>;
-};
+}
 export declare class DismissibleLayerState {
     #private;
-    readonly opts: DismissibleLayerStateProps;
-    constructor(opts: DismissibleLayerStateProps);
+    static create(opts: DismissibleLayerStateOpts): DismissibleLayerState;
+    readonly opts: DismissibleLayerStateOpts;
+    constructor(opts: DismissibleLayerStateOpts);
     props: {
         onfocuscapture: () => void;
         onblurcapture: () => void;
     };
 }
-export declare function useDismissibleLayer(props: DismissibleLayerStateProps): DismissibleLayerState;
 export type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -9,6 +9,9 @@ import { isElement } from "../../../internal/is.js";
 import { isClickTrulyOutside } from "../../../internal/dom.js";
 globalThis.bitsDismissableLayers ??= new Map();
 export class DismissibleLayerState {
+    static create(opts) {
+        return new DismissibleLayerState(opts);
+    }
     opts;
     #interactOutsideProp;
     #behaviorType;
@@ -162,9 +165,6 @@ export class DismissibleLayerState {
         onblurcapture: this.#onblurcapture,
     };
 }
-export function useDismissibleLayer(props) {
-    return new DismissibleLayerState(props);
-}
 function getTopMostLayer(layersArr) {
     return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
 }

package/dist/bits/utilities/escape-layer/escape-layer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { EscapeLayerImplProps } from "./types.js";
-	import { useEscapeLayer } from "./use-escape-layer.svelte.js";
+	import { EscapeLayerState } from "./use-escape-layer.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 
 	let {
@@ -12,7 +12,7 @@
 		ref,
 	}: EscapeLayerImplProps = $props();
 
-	useEscapeLayer({
+	EscapeLayerState.create({
 		escapeKeydownBehavior: box.with(() => escapeKeydownBehavior),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
 		enabled: box.with(() => enabled),

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.d.ts

@@ -1,14 +1,13 @@
-import { DOMContext, type Box } from "svelte-toolbelt";
+import { DOMContext, type Box, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { EscapeLayerImplProps } from "./types.js";
-import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> & {
+interface EscapeLayerStateOpts extends ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> {
     ref: Box<HTMLElement | null>;
-};
+}
 export declare class EscapeLayerState {
     #private;
-    readonly opts: EscapeLayerStateProps;
+    static create(opts: EscapeLayerStateOpts): EscapeLayerState;
+    readonly opts: EscapeLayerStateOpts;
     readonly domContext: DOMContext;
-    constructor(opts: EscapeLayerStateProps);
+    constructor(opts: EscapeLayerStateOpts);
 }
-export declare function useEscapeLayer(props: EscapeLayerStateProps): EscapeLayerState;
 export {};

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.js

@@ -5,6 +5,9 @@ import { kbd } from "../../../internal/kbd.js";
 import { noop } from "../../../internal/noop.js";
 globalThis.bitsEscapeLayers ??= new Map();
 export class EscapeLayerState {
+    static create(opts) {
+        return new EscapeLayerState(opts);
+    }
     opts;
     domContext;
     constructor(opts) {
@@ -36,9 +39,6 @@ export class EscapeLayerState {
         this.opts.onEscapeKeydown.current(clonedEvent);
     };
 }
-export function useEscapeLayer(props) {
-    return new EscapeLayerState(props);
-}
 function isResponsibleEscapeLayer(instance) {
     const layersArr = [...globalThis.bitsEscapeLayers];
     /**

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useFloatingAnchorState } from "../use-floating-layer.svelte.js";
+	import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
 	import type { AnchorProps } from "./index.js";
 	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
 
 	let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
 
-	useFloatingAnchorState(
+	FloatingAnchorState.create(
 		{
 			id: box.with(() => id),
 			virtualEl: box.with(() => virtualEl as unknown as Measurable | null),

package/dist/bits/utilities/floating-layer/components/floating-layer-arrow.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useFloatingArrowState } from "../use-floating-layer.svelte.js";
+	import { FloatingArrowState } from "../use-floating-layer.svelte.js";
 	import { Arrow, type ArrowProps } from "../../arrow/index.js";
 	import { useId } from "../../../../internal/use-id.js";
 
 	let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
 
-	const arrowState = useFloatingArrowState({
+	const arrowState = FloatingArrowState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useFloatingContentState } from "../use-floating-layer.svelte.js";
+	import { FloatingContentState } from "../use-floating-layer.svelte.js";
 	import type { ContentImplProps } from "./index.js";
 	import { useId } from "../../../../internal/use-id.js";
 
@@ -28,7 +28,7 @@
 		tooltip = false,
 	}: ContentImplProps = $props();
 
-	const contentState = useFloatingContentState(
+	const contentState = FloatingContentState.create(
 		{
 			side: box.with(() => side),
 			sideOffset: box.with(() => sideOffset),