bits-ui 2.10.0 → 2.11.0

package/dist/bits/time-range-field/time-range-field.svelte.js

@@ -1,9 +1,9 @@
-import { box, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
+import { boxWith, onDestroyEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 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 { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { createTimeFormatter } from "../../internal/date-time/formatter.js";
 import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
 import { getFirstSegment } from "../../internal/date-time/field/segments.js";
@@ -161,7 +161,7 @@ export class TimeRangeFieldRootState {
         id: this.opts.id.current,
         role: "group",
         [timeRangeFieldAttrs.root]: "",
-        "data-invalid": getDataInvalid(this.isInvalid),
+        "data-invalid": boolToEmptyStrOrUndef(this.isInvalid),
         ...this.attachment,
     }));
 }
@@ -187,8 +187,8 @@ export class TimeRangeFieldLabelState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-invalid": getDataInvalid(this.root.isInvalid),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-invalid": boolToEmptyStrOrUndef(this.root.isInvalid),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [timeRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
         ...this.attachment,
@@ -202,7 +202,7 @@ export class TimeRangeFieldInputState {
             disabled: root.opts.disabled,
             readonly: root.opts.readonly,
             readonlySegments: root.opts.readonlySegments,
-            validate: box.with(() => undefined),
+            validate: boxWith(() => undefined),
             minValue: root.opts.minValue,
             maxValue: root.opts.maxValue,
             hourCycle: root.opts.hourCycle,
@@ -213,7 +213,7 @@ export class TimeRangeFieldInputState {
             placeholder: root.opts.placeholder,
             onInvalid: root.opts.onInvalid,
             errorMessageId: root.opts.errorMessageId,
-            isInvalidProp: box.with(() => root.isInvalid),
+            isInvalidProp: boxWith(() => root.isInvalid),
         }, root);
         return new TimeFieldInputState({ name: opts.name, id: opts.id, ref: opts.ref }, fieldState);
     }

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ToggleRootProps } from "../types.js";
 	import { ToggleRootState } from "../toggle.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,16 +20,16 @@
 	}: ToggleRootProps = $props();
 
 	const toggleState = ToggleRootState.create({
-		pressed: box.with(
+		pressed: boxWith(
 			() => pressed,
 			(v) => {
 				pressed = v;
 				onPressedChange(v);
 			}
 		),
-		disabled: box.with(() => disabled ?? false),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled ?? false),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -8,7 +8,6 @@ interface ToggleRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 }> {
 }
 export declare class ToggleRootState {
-    #private;
     static create(opts: ToggleRootStateOpts): ToggleRootState;
     readonly opts: ToggleRootStateOpts;
     readonly attachment: RefAttachment;

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

@@ -1,5 +1,5 @@
 import { attachRef } from "svelte-toolbelt";
-import { createBitsAttrs, getAriaPressed, getDataDisabled, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 export const toggleAttrs = createBitsAttrs({
     component: "toggle",
     parts: ["root"],
@@ -15,15 +15,10 @@ export class ToggleRootState {
         this.attachment = attachRef(this.opts.ref);
         this.onclick = this.onclick.bind(this);
     }
-    #togglePressed() {
-        if (!this.opts.disabled.current) {
-            this.opts.pressed.current = !this.opts.pressed.current;
-        }
-    }
     onclick(_) {
         if (this.opts.disabled.current)
             return;
-        this.#togglePressed();
+        this.opts.pressed.current = !this.opts.pressed.current;
     }
     snippetProps = $derived.by(() => ({
         pressed: this.opts.pressed.current,
@@ -31,10 +26,10 @@ export class ToggleRootState {
     props = $derived.by(() => ({
         [toggleAttrs.root]: "",
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
-        "aria-pressed": getAriaPressed(this.opts.pressed.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "aria-pressed": boolToStr(this.opts.pressed.current),
         "data-state": getToggleDataState(this.opts.pressed.current),
-        disabled: getDisabled(this.opts.disabled.current),
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         onclick: this.onclick,
         ...this.attachment,
     }));

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToggleGroupRootProps } from "../types.js";
 	import { ToggleGroupRootState } from "../toggle-group.svelte.js";
@@ -40,8 +40,8 @@
 	);
 
 	const rootState = ToggleGroupRootState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -49,12 +49,12 @@
 				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		disabled: box.with(() => disabled),
-		loop: box.with(() => loop),
-		orientation: box.with(() => orientation),
-		rovingFocus: box.with(() => rovingFocus),
+		disabled: boxWith(() => disabled),
+		loop: boxWith(() => loop),
+		orientation: boxWith(() => orientation),
+		rovingFocus: boxWith(() => rovingFocus),
 		type,
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,4 +1,4 @@
 import type { ToggleGroupRootProps } from "../types.js";
-declare const ToggleGroup: import("svelte").Component<ToggleGroupRootProps, {}, "value" | "ref">;
+declare const ToggleGroup: import("svelte").Component<ToggleGroupRootProps, {}, "ref" | "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

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

@@ -18,7 +18,7 @@ declare abstract class ToggleGroupBaseState {
     readonly props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -81,7 +81,7 @@ export declare class ToggleGroupItemState {
         readonly id: string;
         readonly role: "radio" | undefined;
         readonly tabindex: number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "off" | "on";
         readonly "data-value": string;

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

@@ -1,6 +1,6 @@
 import { attachRef, } from "svelte-toolbelt";
 import { Context } from "runed";
-import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export const toggleGroupAttrs = createBitsAttrs({
@@ -26,8 +26,8 @@ class ToggleGroupBaseState {
         id: this.opts.id.current,
         [toggleGroupAttrs.root]: "",
         role: "group",
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-orientation": this.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         ...this.attachment,
     }));
 }
@@ -95,7 +95,7 @@ export class ToggleGroupItemState {
         return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
-        return this.root.isMulti ? getAriaPressed(this.isPressed) : undefined;
+        return this.root.isMulti ? boolToStr(this.isPressed) : undefined;
     });
     constructor(opts, root) {
         this.opts = opts;
@@ -142,13 +142,13 @@ export class ToggleGroupItemState {
         id: this.opts.id.current,
         role: this.root.isMulti ? undefined : "radio",
         tabindex: this.#tabIndex,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-state": getToggleItemDataState(this.isPressed),
         "data-value": this.opts.value.current,
         "aria-pressed": this.#ariaPressed,
         "aria-checked": this.#ariaChecked,
-        disabled: getDisabled(this.#isDisabled),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
         [toggleGroupAttrs.item]: "",
         //
         onclick: this.onclick,

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

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

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToolbarGroupProps } from "../types.js";
 	import { ToolbarGroupState } from "../toolbar.svelte.js";
@@ -37,10 +37,10 @@
 	);
 
 	const groupState = ToolbarGroupState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
 		type,
-		value: box.with(
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -48,7 +48,7 @@
 				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,4 +1,4 @@
 import type { ToolbarGroupProps } from "../types.js";
-declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "value" | "ref">;
+declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "ref" | "value">;
 type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
 export default ToolbarGroup;

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarRootProps } from "../types.js";
 	import { ToolbarRootState } from "../toolbar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,10 +17,10 @@
 	}: ToolbarRootProps = $props();
 
 	const rootState = ToolbarRootState.create({
-		id: box.with(() => id),
-		orientation: box.with(() => orientation),
-		loop: box.with(() => loop),
-		ref: box.with(
+		id: boxWith(() => id),
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -32,7 +32,7 @@ declare abstract class ToolbarGroupBaseState {
     readonly props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -92,7 +92,7 @@ export declare class ToolbarGroupItemState {
         readonly id: string;
         readonly role: "radio" | undefined;
         readonly tabindex: number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "off" | "on";
         readonly "data-value": string;
@@ -117,7 +117,7 @@ export declare class ToolbarLinkState {
         readonly id: string;
         readonly role: "link" | undefined;
         readonly tabindex: number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
@@ -138,7 +138,7 @@ export declare class ToolbarButtonState {
         readonly role: "button" | undefined;
         readonly tabindex: number;
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly disabled: true | undefined;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

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

@@ -1,6 +1,6 @@
 import { attachRef, } from "svelte-toolbelt";
 import { Context } from "runed";
-import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export const toolbarAttrs = createBitsAttrs({
@@ -47,8 +47,8 @@ class ToolbarGroupBaseState {
         id: this.opts.id.current,
         [toolbarAttrs.group]: "",
         role: "group",
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         ...this.attachment,
     }));
 }
@@ -152,22 +152,22 @@ export class ToolbarGroupItemState {
         return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
-        return this.group.isMulti ? getAriaPressed(this.isPressed) : undefined;
+        return this.group.isMulti ? boolToStr(this.isPressed) : undefined;
     });
     #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: this.group.isMulti ? undefined : "radio",
         tabindex: this.#tabIndex,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-state": getToggleItemDataState(this.isPressed),
         "data-value": this.opts.value.current,
         "aria-pressed": this.#ariaPressed,
         "aria-checked": this.#ariaChecked,
         [toolbarAttrs.item]: "",
         [toolbarAttrs["group-item"]]: "",
-        disabled: getDisabled(this.#isDisabled),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -208,7 +208,7 @@ export class ToolbarLinkState {
         [toolbarAttrs.item]: "",
         role: this.#role,
         tabindex: this.#tabIndex,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "data-orientation": this.root.opts.orientation.current,
         //
         onkeydown: this.onkeydown,
         ...this.attachment,
@@ -248,9 +248,9 @@ export class ToolbarButtonState {
         [toolbarAttrs.button]: "",
         role: this.#role,
         tabindex: this.#tabIndex,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        disabled: getDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         //
         onkeydown: this.onkeydown,
         ...this.attachment,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentStaticProps } from "../types.js";
 	import { TooltipContentState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -22,13 +22,13 @@
 	}: TooltipContentStaticProps = $props();
 
 	const contentState = TooltipContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipContentProps } from "../types.js";
 	import { TooltipContentState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -21,6 +21,7 @@
 		avoidCollisions = true,
 		arrowPadding = 0,
 		sticky = "partial",
+		strategy,
 		hideWhenDetached = false,
 		collisionPadding = 0,
 		onInteractOutside = noop,
@@ -30,13 +31,13 @@
 	}: TooltipContentProps = $props();
 
 	const contentState = TooltipContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onInteractOutside: box.with(() => onInteractOutside),
-		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({
@@ -48,6 +49,7 @@
 		sticky,
 		hideWhenDetached,
 		collisionPadding,
+		strategy,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { TooltipProviderProps } from "../types.js";
 	import { TooltipProviderState } from "../tooltip.svelte.js";
 
@@ -14,12 +14,12 @@
 	}: TooltipProviderProps = $props();
 
 	TooltipProviderState.create({
-		delayDuration: box.with(() => delayDuration),
-		disableCloseOnTriggerClick: box.with(() => disableCloseOnTriggerClick),
-		disableHoverableContent: box.with(() => disableHoverableContent),
-		disabled: box.with(() => disabled),
-		ignoreNonKeyboardFocus: box.with(() => ignoreNonKeyboardFocus),
-		skipDelayDuration: box.with(() => skipDelayDuration),
+		delayDuration: boxWith(() => delayDuration),
+		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+		disableHoverableContent: boxWith(() => disableHoverableContent),
+		disabled: boxWith(() => disabled),
+		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+		skipDelayDuration: boxWith(() => skipDelayDuration),
 	});
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipTriggerProps } from "../types.js";
 	import { TooltipTriggerState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,9 +18,9 @@
 	}: TooltipTriggerProps = $props();
 
 	const triggerState = TooltipTriggerState.create({
-		id: box.with(() => id),
-		disabled: box.with(() => disabled ?? false),
-		ref: box.with(
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { TooltipRootProps } from "../types.js";
 	import { TooltipRootState } from "../tooltip.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
@@ -18,19 +18,19 @@
 	}: TooltipRootProps = $props();
 
 	TooltipRootState.create({
-		open: box.with(
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		delayDuration: box.with(() => delayDuration),
-		disableCloseOnTriggerClick: box.with(() => disableCloseOnTriggerClick),
-		disableHoverableContent: box.with(() => disableHoverableContent),
-		ignoreNonKeyboardFocus: box.with(() => ignoreNonKeyboardFocus),
-		disabled: box.with(() => disabled),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		delayDuration: boxWith(() => delayDuration),
+		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+		disableHoverableContent: boxWith(() => disableHoverableContent),
+		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+		disabled: boxWith(() => disabled),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>