bits-ui 2.10.0 → 2.11.1

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

@@ -32,7 +32,7 @@ declare abstract class SliderBaseRootState {
     getPositionFromValue: (thumbValue: number) => number;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly style: {
             readonly touchAction: "pan-x" | "pan-y" | undefined;
@@ -66,16 +66,16 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     }[];
     readonly thumbsRenderArr: number[];
     readonly ticksPropsArr: {
         readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
@@ -139,16 +139,16 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     }[];
     readonly thumbsRenderArr: number[];
     readonly ticksPropsArr: {
         readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
@@ -1021,7 +1021,7 @@ export declare class SliderRangeState {
     };
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly style: {
             accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -1876,9 +1876,9 @@ export declare class SliderThumbState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     } | {
         readonly id: string;
@@ -1891,9 +1891,9 @@ export declare class SliderThumbState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     };
 }
@@ -1910,7 +1910,7 @@ export declare class SliderTickState {
     readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
@@ -1918,7 +1918,7 @@ export declare class SliderTickState {
     } | {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
@@ -1937,7 +1937,7 @@ export declare class SliderTickLabelState {
     constructor(opts: SliderTickLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
@@ -1959,7 +1959,7 @@ export declare class SliderThumbLabelState {
     constructor(opts: SliderThumbLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-value": number;
         readonly "data-active": "" | undefined;

package/dist/bits/slider/slider.svelte.js

@@ -7,7 +7,7 @@ import { executeCallbacks, onMountEffect, attachRef, DOMContext, } from "svelte-
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
-import { createBitsAttrs, getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
@@ -90,8 +90,8 @@ class SliderBaseRootState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "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),
         style: {
             touchAction: this.#touchAction,
         },
@@ -223,10 +223,10 @@ class SliderSingleRootState extends SliderBaseRootState {
                 "aria-valuemin": this.opts.min.current,
                 "aria-valuemax": this.opts.max.current,
                 "aria-valuenow": thumbValue,
-                "aria-disabled": getAriaDisabled(this.opts.disabled.current),
-                "aria-orientation": getAriaOrientation(this.opts.orientation.current),
+                "aria-disabled": boolToStr(this.opts.disabled.current),
+                "aria-orientation": this.opts.orientation.current,
                 "data-value": thumbValue,
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-orientation": this.opts.orientation.current,
                 style,
                 [sliderAttrs.thumb]: "",
             };
@@ -247,8 +247,8 @@ class SliderSingleRootState extends SliderBaseRootState {
             const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
             const bounded = tickValue <= currValue;
             return {
-                "data-disabled": getDataDisabled(this.opts.disabled.current),
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+                "data-orientation": this.opts.orientation.current,
                 "data-bounded": bounded ? "" : undefined,
                 "data-value": tickValue,
                 "data-selected": this.isTickValueSelected(tickValue) ? "" : undefined,
@@ -485,10 +485,10 @@ class SliderMultiRootState extends SliderBaseRootState {
                 "aria-valuemin": this.opts.min.current,
                 "aria-valuemax": this.opts.max.current,
                 "aria-valuenow": thumbValue,
-                "aria-disabled": getAriaDisabled(this.opts.disabled.current),
-                "aria-orientation": getAriaOrientation(this.opts.orientation.current),
+                "aria-disabled": boolToStr(this.opts.disabled.current),
+                "aria-orientation": this.opts.orientation.current,
                 "data-value": thumbValue,
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-orientation": this.opts.orientation.current,
                 style,
                 [sliderAttrs.thumb]: "",
             };
@@ -511,8 +511,8 @@ class SliderMultiRootState extends SliderBaseRootState {
                 ? tickValue <= currValue[0]
                 : currValue[0] <= tickValue && tickValue <= currValue[currValue.length - 1];
             return {
-                "data-disabled": getDataDisabled(this.opts.disabled.current),
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+                "data-orientation": this.opts.orientation.current,
                 "data-bounded": bounded ? "" : undefined,
                 "data-value": tickValue,
                 style,
@@ -605,8 +605,8 @@ export class SliderRangeState {
     });
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         style: this.rangeStyles,
         [sliderAttrs.range]: "",
         ...this.attachment,
@@ -721,7 +721,7 @@ export class SliderThumbState {
         id: this.opts.id.current,
         onkeydown: this.onkeydown,
         "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
-        "data-disabled": getDataDisabled(this.opts.disabled.current || this.root.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current || this.root.opts.disabled.current),
         tabindex: this.opts.disabled.current || this.root.opts.disabled.current ? -1 : 0,
         ...this.attachment,
     }));
@@ -765,8 +765,8 @@ export class SliderTickLabelState {
         const style = getTickLabelStyles(this.root.direction, tickPosition, labelPosition);
         return {
             id: this.opts.id.current,
-            "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-            "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+            "data-orientation": this.root.opts.orientation.current,
+            "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
             "data-bounded": tickProps["data-bounded"],
             "data-value": tickValue,
             "data-selected": this.root.isTickValueSelected(tickValue) ? "" : undefined,
@@ -797,8 +797,8 @@ export class SliderThumbLabelState {
         const style = getThumbLabelStyles(this.root.direction, thumbPosition, labelPosition);
         return {
             id: this.opts.id.current,
-            "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-            "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+            "data-orientation": this.root.opts.orientation.current,
+            "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
             "data-value": thumbValue,
             "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
             "data-position": labelPosition,

package/dist/bits/switch/components/switch-thumb.svelte

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

package/dist/bits/switch/components/switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SwitchRootProps } from "../types.js";
 	import { SwitchRootState } from "../switch.svelte.js";
 	import SwitchInput from "./switch-input.svelte";
@@ -24,19 +24,19 @@
 	}: SwitchRootProps = $props();
 
 	const rootState = SwitchRootState.create({
-		checked: box.with(
+		checked: boxWith(
 			() => checked,
 			(v) => {
 				checked = v;
 				onCheckedChange?.(v);
 			}
 		),
-		disabled: box.with(() => disabled ?? false),
-		required: box.with(() => required),
-		value: box.with(() => value),
-		name: box.with(() => name),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled ?? false),
+		required: boxWith(() => required),
+		value: boxWith(() => value),
+		name: boxWith(() => name),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/switch/components/switch.svelte.d.ts

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

package/dist/bits/switch/switch.svelte.js

@@ -1,6 +1,6 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, createBitsAttrs, } from "../../internal/attrs.js";
+import { getAriaChecked, boolToStr, getDataChecked, boolToTrueOrUndef, createBitsAttrs, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 const switchAttrs = createBitsAttrs({
     component: "switch",
@@ -34,9 +34,9 @@ export class SwitchRootState {
         this.#toggle();
     }
     sharedProps = $derived.by(() => ({
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-state": getDataChecked(this.opts.checked.current),
-        "data-required": getDataRequired(this.opts.required.current),
+        "data-required": boolToEmptyStrOrUndef(this.opts.required.current),
     }));
     snippetProps = $derived.by(() => ({
         checked: this.opts.checked.current,
@@ -45,9 +45,9 @@ export class SwitchRootState {
         ...this.sharedProps,
         id: this.opts.id.current,
         role: "switch",
-        disabled: getDisabled(this.opts.disabled.current),
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
         "aria-checked": getAriaChecked(this.opts.checked.current, false),
-        "aria-required": getAriaRequired(this.opts.required.current),
+        "aria-required": boolToStr(this.opts.required.current),
         [switchAttrs.root]: "",
         //
         onclick: this.onclick,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TabsContentProps } from "../types.js";
 	import { TabsContentState } from "../tabs.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,9 +16,9 @@
 	}: TabsContentProps = $props();
 
 	const contentState = TabsContentState.create({
-		value: box.with(() => value),
-		id: box.with(() => id),
-		ref: box.with(
+		value: boxWith(() => value),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/tabs/components/tabs-list.svelte

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

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

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

package/dist/bits/tabs/components/tabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TabsRootProps } from "../types.js";
 	import { TabsRootState } from "../tabs.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -22,19 +22,19 @@
 	}: TabsRootProps = $props();
 
 	const rootState = TabsRootState.create({
-		id: box.with(() => id),
-		value: box.with(
+		id: boxWith(() => id),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		orientation: box.with(() => orientation),
-		loop: box.with(() => loop),
-		activationMode: box.with(() => activationMode),
-		disabled: box.with(() => disabled),
-		ref: box.with(
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		activationMode: boxWith(() => activationMode),
+		disabled: boxWith(() => disabled),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

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

@@ -27,7 +27,7 @@ export declare class TabsRootState {
     setValue(v: string): void;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 interface TabsListStateOpts extends WithRefOpts {
@@ -42,8 +42,8 @@ export declare class TabsListState {
     readonly props: {
         readonly id: string;
         readonly role: "tablist";
-        readonly "aria-orientation": "horizontal" | "vertical";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -67,7 +67,7 @@ export declare class TabsTriggerState {
         readonly role: "tab";
         readonly "data-state": "active" | "inactive";
         readonly "data-value": string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "aria-selected": "true" | "false";
         readonly "aria-controls": string | undefined;
@@ -97,7 +97,7 @@ export declare class TabsContentState {
         readonly "data-value": string;
         readonly "data-state": "active" | "inactive";
         readonly "aria-labelledby": string | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 export {};

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

@@ -1,7 +1,7 @@
 import { SvelteMap } from "svelte/reactivity";
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 const tabsAttrs = createBitsAttrs({
@@ -52,7 +52,7 @@ export class TabsRootState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "data-orientation": this.opts.orientation.current,
         [tabsAttrs.root]: "",
         ...this.attachment,
     }));
@@ -73,10 +73,10 @@ export class TabsListState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "tablist",
-        "aria-orientation": getAriaOrientation(this.root.opts.orientation.current),
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "aria-orientation": this.root.opts.orientation.current,
+        "data-orientation": this.root.opts.orientation.current,
         [tabsAttrs.list]: "",
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         ...this.attachment,
     }));
 }
@@ -141,12 +141,12 @@ export class TabsTriggerState {
         role: "tab",
         "data-state": getTabDataState(this.#isActive),
         "data-value": this.opts.value.current,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
-        "aria-selected": getAriaSelected(this.#isActive),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "aria-selected": boolToStr(this.#isActive),
         "aria-controls": this.#ariaControls,
         [tabsAttrs.trigger]: "",
-        disabled: getDisabled(this.#isDisabled),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
         tabindex: this.#tabIndex,
         //
         onclick: this.onclick,
@@ -175,12 +175,12 @@ export class TabsContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "tabpanel",
-        hidden: getHidden(!this.#isActive),
+        hidden: boolToTrueOrUndef(!this.#isActive),
         tabindex: 0,
         "data-value": this.opts.value.current,
         "data-state": getTabDataState(this.#isActive),
         "aria-labelledby": this.#ariaLabelledBy,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "data-orientation": this.root.opts.orientation.current,
         [tabsAttrs.content]: "",
         ...this.attachment,
     }));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { TimeFieldInputState } from "../time-field.svelte.js";
 	import type { TimeFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./time-field-hidden-input.svelte";
@@ -17,12 +17,12 @@
 	}: TimeFieldInputProps = $props();
 
 	const inputState = TimeFieldInputState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		name: box.with(() => name),
+		name: boxWith(() => name),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, inputState.props));

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

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

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

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

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

@@ -6,7 +6,7 @@
 
 <script lang="ts" generics="T extends TimeValue = Time">
 	import { watch } from "runed";
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { TimeFieldRootState } from "../time-field.svelte.js";
 	import type { TimeFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
@@ -61,34 +61,34 @@
 	);
 
 	TimeFieldRootState.create({
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 				onValueChange(v);
 			}
 		),
-		placeholder: box.with(
+		placeholder: boxWith(
 			() => placeholder as TimeValue,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v);
 			}
 		),
-		disabled: box.with(() => disabled),
-		granularity: box.with(() => granularity),
-		hideTimeZone: box.with(() => hideTimeZone),
-		hourCycle: box.with(() => hourCycle),
+		disabled: boxWith(() => disabled),
+		granularity: boxWith(() => granularity),
+		hideTimeZone: boxWith(() => hideTimeZone),
+		hourCycle: boxWith(() => hourCycle),
 		locale: resolveLocaleProp(() => locale),
-		maxValue: box.with(() => maxValue),
-		minValue: box.with(() => minValue),
-		validate: box.with(() => validate),
-		readonly: box.with(() => readonly),
-		readonlySegments: box.with(() => readonlySegments),
-		required: box.with(() => required),
-		onInvalid: box.with(() => onInvalid),
-		errorMessageId: box.with(() => errorMessageId),
-		isInvalidProp: box.with(() => undefined),
+		maxValue: boxWith(() => maxValue),
+		minValue: boxWith(() => minValue),
+		validate: boxWith(() => validate),
+		readonly: boxWith(() => readonly),
+		readonlySegments: boxWith(() => readonlySegments),
+		required: boxWith(() => required),
+		onInvalid: boxWith(() => onInvalid),
+		errorMessageId: boxWith(() => errorMessageId),
+		isInvalidProp: boxWith(() => undefined),
 	});
 </script>