bits-ui 2.6.2 → 2.8.0

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

@@ -1,11 +1,11 @@
-import { type Box, type ReadableBox, DOMContext } from "svelte-toolbelt";
+import { type Box, type ReadableBox, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
 import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 import type { SliderLabelPosition } from "./types.js";
-declare const sliderAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "thumb", "range", "tick", "tick-label", "thumb-label"]>;
-type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
+declare const sliderAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "thumb", "range", "tick", "tick-label", "thumb-label"]>;
+export declare const SliderRootContext: Context<SliderRoot>;
+interface SliderBaseRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
     min: number;
@@ -15,37 +15,39 @@ type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     autoSort: boolean;
     thumbPositioning: SliderThumbPositioning;
     trackPadding?: number;
-}>>;
-declare class SliderBaseRootState {
+}> {
+}
+declare abstract class SliderBaseRootState {
     #private;
-    readonly opts: SliderBaseRootStateProps;
+    readonly opts: SliderBaseRootStateOpts;
     isActive: boolean;
-    direction: "rl" | "lr" | "tb" | "bt";
-    normalizedSteps: number[];
+    readonly direction: "rl" | "lr" | "tb" | "bt";
+    readonly normalizedSteps: number[];
     domContext: DOMContext;
-    constructor(opts: SliderBaseRootStateProps);
+    constructor(opts: SliderBaseRootStateOpts);
     isThumbActive(_index: number): boolean;
     getAllThumbs: () => HTMLElement[];
     getThumbScale: () => [number, number];
     getPositionFromValue: (thumbValue: number) => number;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
         readonly style: {
-            readonly touchAction: string | undefined;
+            readonly touchAction: "pan-x" | "pan-y" | undefined;
         };
     };
 }
-type SliderSingleRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
+interface SliderSingleRootStateOpts extends SliderBaseRootStateOpts, ReadableBoxedValues<{
     onValueCommit: OnChangeFn<number>;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: number;
-}>;
+}> {
+}
 declare class SliderSingleRootState extends SliderBaseRootState {
-    readonly opts: SliderSingleRootStateProps;
+    readonly opts: SliderSingleRootStateOpts;
     isMulti: false;
-    constructor(opts: SliderSingleRootStateProps);
+    constructor(opts: SliderSingleRootStateOpts);
     isTickValueSelected: (tickValue: number) => boolean;
     applyPosition({ clientXY, start, end }: {
         clientXY: number;
@@ -56,7 +58,7 @@ declare class SliderSingleRootState extends SliderBaseRootState {
     handlePointerMove: (e: PointerEvent) => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    thumbsPropsArr: {
+    readonly thumbsPropsArr: {
         readonly [sliderAttrs.thumb]: "";
         readonly role: "slider";
         readonly "aria-valuemin": number;
@@ -68,8 +70,8 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
     }[];
-    thumbsRenderArr: number[];
-    ticksPropsArr: {
+    readonly thumbsRenderArr: number[];
+    readonly ticksPropsArr: {
         readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -78,16 +80,16 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
     }[];
-    ticksRenderArr: number[];
-    tickItemsArr: {
+    readonly ticksRenderArr: number[];
+    readonly tickItemsArr: {
         value: number;
         index: number;
     }[];
-    thumbItemsArr: {
+    readonly thumbItemsArr: {
         value: number;
         index: number;
     }[];
-    snippetProps: {
+    readonly snippetProps: {
         readonly ticks: number[];
         readonly thumbs: number[];
         readonly tickItems: {
@@ -100,21 +102,22 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         }[];
     };
 }
-type SliderMultiRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
+interface SliderMultiRootStateOpts extends SliderBaseRootStateOpts, ReadableBoxedValues<{
     onValueCommit: OnChangeFn<number[]>;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: number[];
-}>;
+}> {
+}
 declare class SliderMultiRootState extends SliderBaseRootState {
     #private;
-    readonly opts: SliderMultiRootStateProps;
+    readonly opts: SliderMultiRootStateOpts;
     isMulti: true;
     activeThumb: {
         node: HTMLElement;
         idx: number;
     } | null;
     currentThumbIdx: number;
-    constructor(opts: SliderMultiRootStateProps);
+    constructor(opts: SliderMultiRootStateOpts);
     isTickValueSelected: (tickValue: number) => boolean;
     isThumbActive(index: number): boolean;
     applyPosition({ clientXY, activeThumbIdx, start, end, }: {
@@ -171,11 +174,22 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         }[];
     };
 }
-type SliderRangeStateProps = WithRefProps;
-declare class SliderRangeState {
-    readonly opts: SliderRangeStateProps;
-    readonly root: SliderRootState;
-    constructor(opts: SliderRangeStateProps, root: SliderRootState);
+type SliderRoot = SliderSingleRootState | SliderMultiRootState;
+interface SliderRootStateOpts extends Omit<SliderBaseRootStateOpts, "type"> {
+    type: "single" | "multiple";
+    value: Box<number> | Box<number[]>;
+    onValueCommit: ReadableBox<OnChangeFn<number>> | ReadableBox<OnChangeFn<number[]>>;
+}
+export declare class SliderRootState {
+    static create(opts: SliderRootStateOpts): SliderRoot;
+}
+interface SliderRangeStateOpts extends WithRefOpts {
+}
+export declare class SliderRangeState {
+    static create(opts: SliderRangeStateOpts): SliderRangeState;
+    readonly opts: SliderRangeStateOpts;
+    readonly root: SliderRoot;
+    constructor(opts: SliderRangeStateOpts, root: SliderRoot);
     readonly rangeStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
         alignContent?: import("csstype").Property.AlignContent | undefined;
@@ -1836,15 +1850,17 @@ declare class SliderRangeState {
         };
     };
 }
-type SliderThumbStateProps = WithRefProps & ReadableBoxedValues<{
+interface SliderThumbStateOpts extends WithRefOpts, ReadableBoxedValues<{
     index: number;
     disabled: boolean;
-}>;
-declare class SliderThumbState {
+}> {
+}
+export declare class SliderThumbState {
     #private;
-    readonly opts: SliderThumbStateProps;
-    readonly root: SliderRootState;
-    constructor(opts: SliderThumbStateProps, root: SliderRootState);
+    static create(opts: SliderThumbStateOpts): SliderThumbState;
+    readonly opts: SliderThumbStateOpts;
+    readonly root: SliderRoot;
+    constructor(opts: SliderThumbStateOpts, root: SliderRoot);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
         readonly id: string;
@@ -1878,13 +1894,15 @@ declare class SliderThumbState {
         readonly style: import("../../shared/index.js").StyleProperties;
     };
 }
-type SliderTickStateProps = WithRefProps & ReadableBoxedValues<{
+interface SliderTickStateOpts extends WithRefOpts, ReadableBoxedValues<{
     index: number;
-}>;
-declare class SliderTickState {
-    readonly opts: SliderTickStateProps;
-    readonly root: SliderRootState;
-    constructor(opts: SliderTickStateProps, root: SliderRootState);
+}> {
+}
+export declare class SliderTickState {
+    static create(opts: SliderTickStateOpts): SliderTickState;
+    readonly opts: SliderTickStateOpts;
+    readonly root: SliderRoot;
+    constructor(opts: SliderTickStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
@@ -1902,14 +1920,16 @@ declare class SliderTickState {
         readonly style: import("../../shared/index.js").StyleProperties;
     };
 }
-type SliderTickLabelStateProps = WithRefProps & ReadableBoxedValues<{
+interface SliderTickLabelStateOpts extends WithRefOpts, ReadableBoxedValues<{
     index: number;
     position?: SliderLabelPosition;
-}>;
-declare class SliderTickLabelState {
-    readonly opts: SliderTickLabelStateProps;
-    readonly root: SliderRootState;
-    constructor(opts: SliderTickLabelStateProps, root: SliderRootState);
+}> {
+}
+export declare class SliderTickLabelState {
+    static create(opts: SliderTickLabelStateOpts): SliderTickLabelState;
+    readonly opts: SliderTickLabelStateOpts;
+    readonly root: SliderRoot;
+    constructor(opts: SliderTickLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -1921,15 +1941,17 @@ declare class SliderTickLabelState {
         readonly style: import("../../shared/index.js").StyleProperties;
     };
 }
-type SliderThumbLabelStateProps = WithRefProps & ReadableBoxedValues<{
+interface SliderThumbLabelStateOpts extends WithRefOpts, ReadableBoxedValues<{
     index: number;
     position?: SliderLabelPosition;
-}>;
-declare class SliderThumbLabelState {
-    readonly opts: SliderThumbLabelStateProps;
-    readonly root: SliderRootState;
-    constructor(opts: SliderThumbLabelStateProps, root: SliderRootState);
-    props: {
+}> {
+}
+export declare class SliderThumbLabelState {
+    static create(opts: SliderThumbLabelStateOpts): SliderThumbLabelState;
+    readonly opts: SliderThumbLabelStateOpts;
+    readonly root: SliderRoot;
+    constructor(opts: SliderThumbLabelStateOpts, root: SliderRoot);
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -1939,17 +1961,4 @@ declare class SliderThumbLabelState {
         readonly style: import("../../shared/index.js").StyleProperties;
     };
 }
-type SliderRootState = SliderSingleRootState | SliderMultiRootState;
-type InitSliderRootStateProps = {
-    type: "single" | "multiple";
-    value: Box<number> | Box<number[]>;
-    onValueCommit: ReadableBox<OnChangeFn<number>> | ReadableBox<OnChangeFn<number[]>>;
-} & Omit<SliderBaseRootStateProps, "type">;
-export declare const SliderRootContext: Context<SliderRootState>;
-export declare function useSliderRoot(props: InitSliderRootStateProps): SliderRootState;
-export declare function useSliderRange(props: SliderRangeStateProps): SliderRangeState;
-export declare function useSliderThumb(props: SliderThumbStateProps): SliderThumbState;
-export declare function useSliderTick(props: SliderTickStateProps): SliderTickState;
-export declare function useSliderTickLabel(props: SliderTickLabelStateProps): SliderTickLabelState;
-export declare function useSliderThumbLabel(props: SliderThumbLabelStateProps): SliderThumbLabelState;
 export {};

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

@@ -16,6 +16,7 @@ const sliderAttrs = createBitsAttrs({
     component: "slider",
     parts: ["root", "thumb", "range", "tick", "tick-label", "thumb-label"],
 });
+export const SliderRootContext = new Context("Slider.Root");
 class SliderBaseRootState {
     opts;
     isActive = $state(false);
@@ -540,6 +541,15 @@ class SliderMultiRootState extends SliderBaseRootState {
         thumbItems: this.thumbItemsArr,
     }));
 }
+export class SliderRootState {
+    static create(opts) {
+        const { type, ...rest } = opts;
+        const rootState = type === "single"
+            ? new SliderSingleRootState(rest)
+            : new SliderMultiRootState(rest);
+        return SliderRootContext.set(rootState);
+    }
+}
 const VALID_SLIDER_KEYS = [
     kbd.ARROW_LEFT,
     kbd.ARROW_RIGHT,
@@ -548,7 +558,10 @@ const VALID_SLIDER_KEYS = [
     kbd.HOME,
     kbd.END,
 ];
-class SliderRangeState {
+export class SliderRangeState {
+    static create(opts) {
+        return new SliderRangeState(opts, SliderRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -595,7 +608,10 @@ class SliderRangeState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SliderThumbState {
+export class SliderThumbState {
+    static create(opts) {
+        return new SliderThumbState(opts, SliderRootContext.get());
+    }
     opts;
     root;
     #isDisabled = $derived.by(() => this.root.opts.disabled.current || this.opts.disabled.current);
@@ -704,7 +720,10 @@ class SliderThumbState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SliderTickState {
+export class SliderTickState {
+    static create(opts) {
+        return new SliderTickState(opts, SliderRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -717,7 +736,10 @@ class SliderTickState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SliderTickLabelState {
+export class SliderTickLabelState {
+    static create(opts) {
+        return new SliderTickLabelState(opts, SliderRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -745,7 +767,10 @@ class SliderTickLabelState {
         };
     });
 }
-class SliderThumbLabelState {
+export class SliderThumbLabelState {
+    static create(opts) {
+        return new SliderThumbLabelState(opts, SliderRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -771,26 +796,3 @@ class SliderThumbLabelState {
         };
     });
 }
-export const SliderRootContext = new Context("Slider.Root");
-export function useSliderRoot(props) {
-    const { type, ...rest } = props;
-    const rootState = type === "single"
-        ? new SliderSingleRootState(rest)
-        : new SliderMultiRootState(rest);
-    return SliderRootContext.set(rootState);
-}
-export function useSliderRange(props) {
-    return new SliderRangeState(props, SliderRootContext.get());
-}
-export function useSliderThumb(props) {
-    return new SliderThumbState(props, SliderRootContext.get());
-}
-export function useSliderTick(props) {
-    return new SliderTickState(props, SliderRootContext.get());
-}
-export function useSliderTickLabel(props) {
-    return new SliderTickLabelState(props, SliderRootContext.get());
-}
-export function useSliderThumbLabel(props) {
-    return new SliderThumbLabelState(props, SliderRootContext.get());
-}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import HiddenInput from "../../utilities/hidden-input.svelte";
-	import { useSwitchInput } from "../switch.svelte.js";
+	import { SwitchInputState } from "../switch.svelte.js";
 
-	const inputState = useSwitchInput();
+	const inputState = SwitchInputState.create();
 </script>
 
 {#if inputState.shouldRender}

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SwitchRootProps } from "../types.js";
-	import { useSwitchRoot } from "../switch.svelte.js";
+	import { SwitchRootState } from "../switch.svelte.js";
 	import SwitchInput from "./switch-input.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -23,7 +23,7 @@
 		...restProps
 	}: SwitchRootProps = $props();
 
-	const rootState = useSwitchRoot({
+	const rootState = SwitchRootState.create({
 		checked: box.with(
 			() => checked,
 			(v) => {

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

@@ -1,17 +1,19 @@
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
-type SwitchRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+interface SwitchRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
     name: string | undefined;
     value: string;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     checked: boolean;
-}>>;
-declare class SwitchRootState {
+}> {
+}
+export declare class SwitchRootState {
     #private;
-    readonly opts: SwitchRootStateProps;
-    constructor(opts: SwitchRootStateProps);
+    static create(opts: SwitchRootStateOpts): SwitchRootState;
+    readonly opts: SwitchRootStateOpts;
+    constructor(opts: SwitchRootStateOpts);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(_: BitsPointerEvent): void;
     readonly sharedProps: {
@@ -35,11 +37,12 @@ declare class SwitchRootState {
         readonly "data-required": "" | undefined;
     };
 }
-declare class SwitchInputState {
+export declare class SwitchInputState {
+    static create(): SwitchInputState;
     readonly root: SwitchRootState;
     readonly shouldRender: boolean;
     constructor(root: SwitchRootState);
-    props: {
+    readonly props: {
         readonly type: "checkbox";
         readonly name: string | undefined;
         readonly value: string;
@@ -48,11 +51,13 @@ declare class SwitchInputState {
         readonly required: boolean;
     };
 }
-type SwitchThumbStateProps = WithRefProps;
-declare class SwitchThumbState {
-    readonly opts: SwitchThumbStateProps;
+interface SwitchThumbStateOpts extends WithRefOpts {
+}
+export declare class SwitchThumbState {
+    static create(opts: SwitchThumbStateOpts): SwitchThumbState;
+    readonly opts: SwitchThumbStateOpts;
     readonly root: SwitchRootState;
-    constructor(opts: SwitchThumbStateProps, root: SwitchRootState);
+    constructor(opts: SwitchThumbStateOpts, root: SwitchRootState);
     readonly snippetProps: {
         checked: boolean;
     };
@@ -63,7 +68,4 @@ declare class SwitchThumbState {
         readonly "data-required": "" | undefined;
     };
 }
-export declare function useSwitchRoot(props: SwitchRootStateProps): SwitchRootState;
-export declare function useSwitchInput(): SwitchInputState;
-export declare function useSwitchThumb(props: SwitchThumbStateProps): SwitchThumbState;
 export {};

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

@@ -6,7 +6,11 @@ const switchAttrs = createBitsAttrs({
     component: "switch",
     parts: ["root", "thumb"],
 });
-class SwitchRootState {
+const SwitchRootContext = new Context("Switch.Root");
+export class SwitchRootState {
+    static create(opts) {
+        return SwitchRootContext.set(new SwitchRootState(opts));
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -49,7 +53,10 @@ class SwitchRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SwitchInputState {
+export class SwitchInputState {
+    static create() {
+        return new SwitchInputState(SwitchRootContext.get());
+    }
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
     constructor(root) {
@@ -64,7 +71,10 @@ class SwitchInputState {
         required: this.root.opts.required.current,
     }));
 }
-class SwitchThumbState {
+export class SwitchThumbState {
+    static create(opts) {
+        return new SwitchThumbState(opts, SwitchRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -81,13 +91,3 @@ class SwitchThumbState {
         ...attachRef(this.opts.ref),
     }));
 }
-const SwitchRootContext = new Context("Switch.Root");
-export function useSwitchRoot(props) {
-    return SwitchRootContext.set(new SwitchRootState(props));
-}
-export function useSwitchInput() {
-    return new SwitchInputState(SwitchRootContext.get());
-}
-export function useSwitchThumb(props) {
-    return new SwitchThumbState(props, SwitchRootContext.get());
-}

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { TabsRootProps } from "../types.js";
-	import { useTabsRoot } from "../tabs.svelte.js";
+	import { TabsRootState } from "../tabs.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -21,7 +21,7 @@
 		...restProps
 	}: TabsRootProps = $props();
 
-	const rootState = useTabsRoot({
+	const rootState = TabsRootState.create({
 		id: box.with(() => id),
 		value: box.with(
 			() => value,