bits-ui 2.7.0 → 2.8.0

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,

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

@@ -1,24 +1,26 @@
 import { SvelteMap } from "svelte/reactivity";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { TabsActivationMode } from "./types.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
-type TabsRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+interface TabsRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     orientation: Orientation;
     loop: boolean;
     activationMode: TabsActivationMode;
     disabled: boolean;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: string;
-}>>;
-declare class TabsRootState {
-    readonly opts: TabsRootStateProps;
-    rovingFocusGroup: UseRovingFocusReturn;
+}> {
+}
+export declare class TabsRootState {
+    static create(opts: TabsRootStateOpts): TabsRootState;
+    readonly opts: TabsRootStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
     triggerIds: string[];
     readonly valueToTriggerId: SvelteMap<string, string>;
     readonly valueToContentId: SvelteMap<string, string>;
-    constructor(opts: TabsRootStateProps);
+    constructor(opts: TabsRootStateOpts);
     registerTrigger(id: string, value: string): () => void;
     registerContent(id: string, value: string): () => void;
     setValue(v: string): void;
@@ -27,12 +29,14 @@ declare class TabsRootState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-type TabsListStateProps = WithRefProps;
-declare class TabsListState {
+interface TabsListStateOpts extends WithRefOpts {
+}
+export declare class TabsListState {
     #private;
-    readonly opts: TabsListStateProps;
+    static create(opts: TabsListStateOpts): TabsListState;
+    readonly opts: TabsListStateOpts;
     readonly root: TabsRootState;
-    constructor(opts: TabsListStateProps, root: TabsRootState);
+    constructor(opts: TabsListStateOpts, root: TabsRootState);
     readonly props: {
         readonly id: string;
         readonly role: "tablist";
@@ -41,15 +45,17 @@ declare class TabsListState {
         readonly "data-disabled": "" | undefined;
     };
 }
-type TabsTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+interface TabsTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
-}>>;
-declare class TabsTriggerState {
+}> {
+}
+export declare class TabsTriggerState {
     #private;
-    readonly opts: TabsTriggerStateProps;
+    static create(opts: TabsTriggerStateOpts): TabsTriggerState;
+    readonly opts: TabsTriggerStateOpts;
     readonly root: TabsRootState;
-    constructor(opts: TabsTriggerStateProps, root: TabsRootState);
+    constructor(opts: TabsTriggerStateOpts, root: TabsRootState);
     onfocus(_: BitsFocusEvent): void;
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -69,15 +75,17 @@ declare class TabsTriggerState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type TabsContentStateProps = WithRefProps<ReadableBoxedValues<{
+interface TabsContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
-}>>;
-declare class TabsContentState {
+}> {
+}
+export declare class TabsContentState {
     #private;
-    readonly opts: TabsContentStateProps;
+    static create(opts: TabsContentStateOpts): TabsContentState;
+    readonly opts: TabsContentStateOpts;
     readonly root: TabsRootState;
-    constructor(opts: TabsContentStateProps, root: TabsRootState);
-    props: {
+    constructor(opts: TabsContentStateOpts, root: TabsRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "tabpanel";
         readonly hidden: true | undefined;
@@ -88,8 +96,4 @@ declare class TabsContentState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-export declare function useTabsRoot(props: TabsRootStateProps): TabsRootState;
-export declare function useTabsTrigger(props: TabsTriggerStateProps): TabsTriggerState;
-export declare function useTabsList(props: TabsListStateProps): TabsListState;
-export declare function useTabsContent(props: TabsContentStateProps): TabsContentState;
 export {};

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

@@ -3,12 +3,16 @@ import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } 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";
 const tabsAttrs = createBitsAttrs({
     component: "tabs",
     parts: ["root", "list", "trigger", "content"],
 });
-class TabsRootState {
+const TabsRootContext = new Context("Tabs.Root");
+export class TabsRootState {
+    static create(opts) {
+        return TabsRootContext.set(new TabsRootState(opts));
+    }
     opts;
     rovingFocusGroup;
     triggerIds = $state([]);
@@ -18,7 +22,7 @@ class TabsRootState {
     valueToContentId = new SvelteMap();
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             candidateAttr: tabsAttrs.trigger,
             rootNode: this.opts.ref,
             loop: this.opts.loop,
@@ -51,7 +55,10 @@ class TabsRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class TabsListState {
+export class TabsListState {
+    static create(opts) {
+        return new TabsListState(opts, TabsRootContext.get());
+    }
     opts;
     root;
     #isDisabled = $derived.by(() => this.root.opts.disabled.current);
@@ -69,7 +76,10 @@ class TabsListState {
         ...attachRef(this.opts.ref),
     }));
 }
-class TabsTriggerState {
+export class TabsTriggerState {
+    static create(opts) {
+        return new TabsTriggerState(opts, TabsRootContext.get());
+    }
     opts;
     root;
     #tabIndex = $state(0);
@@ -139,7 +149,10 @@ class TabsTriggerState {
         ...attachRef(this.opts.ref),
     }));
 }
-class TabsContentState {
+export class TabsContentState {
+    static create(opts) {
+        return new TabsContentState(opts, TabsRootContext.get());
+    }
     opts;
     root;
     #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
@@ -164,19 +177,6 @@ class TabsContentState {
         ...attachRef(this.opts.ref),
     }));
 }
-const TabsRootContext = new Context("Tabs.Root");
-export function useTabsRoot(props) {
-    return TabsRootContext.set(new TabsRootState(props));
-}
-export function useTabsTrigger(props) {
-    return new TabsTriggerState(props, TabsRootContext.get());
-}
-export function useTabsList(props) {
-    return new TabsListState(props, TabsRootContext.get());
-}
-export function useTabsContent(props) {
-    return new TabsContentState(props, TabsRootContext.get());
-}
 function getTabDataState(condition) {
     return condition ? "active" : "inactive";
 }

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { useTimeFieldHiddenInput } from "../time-field.svelte.js";
+	import { TimeFieldHiddenInputState } from "../time-field.svelte.js";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	const hiddenInputState = useTimeFieldHiddenInput();
+	const hiddenInputState = TimeFieldHiddenInputState.create();
 </script>
 
 {#if hiddenInputState.shouldRender}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useTimeFieldInput } from "../time-field.svelte.js";
+	import { TimeFieldInputState } from "../time-field.svelte.js";
 	import type { TimeFieldInputProps } from "../types.js";
 	import DateFieldHiddenInput from "./time-field-hidden-input.svelte";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,7 +16,7 @@
 		...restProps
 	}: TimeFieldInputProps = $props();
 
-	const inputState = useTimeFieldInput({
+	const inputState = TimeFieldInputState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

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

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

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

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

@@ -7,7 +7,7 @@
 <script lang="ts" generics="T extends TimeValue = Time">
 	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
-	import { useTimeFieldRoot } from "../time-field.svelte.js";
+	import { TimeFieldRootState } from "../time-field.svelte.js";
 	import type { TimeFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultTime } from "../../../internal/date-time/utils.js";
@@ -60,7 +60,7 @@
 		}
 	);
 
-	useTimeFieldRoot({
+	TimeFieldRootState.create({
 		value: box.with(
 			() => value,
 			(v) => {