bits-ui 2.6.2 → 2.8.0

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -12,11 +12,11 @@ import { noop } from "../../internal/noop.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { kbd } from "../../internal/kbd.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
-import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { useArrowNavigation } from "../../internal/use-arrow-navigation.js";
 import { boxAutoReset } from "../../internal/box-auto-reset.svelte.js";
-import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 import { isElement } from "../../internal/is.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { SvelteResizeObserver } from "../../internal/svelte-resize-observer.svelte.js";
 const navigationMenuAttrs = createBitsAttrs({
     component: "navigation-menu",
     parts: [
@@ -32,7 +32,15 @@ const navigationMenuAttrs = createBitsAttrs({
         "indicator",
     ],
 });
+const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
+export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
+const NavigationMenuListContext = new Context("NavigationMenu.List");
+const NavigationMenuContentContext = new Context("NavigationMenu.Content");
+const NavigationMenuSubContext = new Context("NavigationMenu.Sub");
 class NavigationMenuProviderState {
+    static create(opts) {
+        return NavigationMenuProviderContext.set(new NavigationMenuProviderState(opts));
+    }
     opts;
     indicatorTrackRef = box(null);
     viewportRef = box(null);
@@ -59,7 +67,10 @@ class NavigationMenuProviderState {
         this.activeItem = item;
     };
 }
-class NavigationMenuRootState {
+export class NavigationMenuRootState {
+    static create(opts) {
+        return new NavigationMenuRootState(opts);
+    }
     opts;
     provider;
     previousValue = box("");
@@ -80,7 +91,7 @@ class NavigationMenuRootState {
             afterMs: this.opts.skipDelayDuration.current,
             getWindow: () => getWindow(opts.ref.current),
         });
-        this.provider = useNavigationMenuProvider({
+        this.provider = NavigationMenuProviderState.create({
             value: this.opts.value,
             previousValue: this.previousValue,
             dir: this.opts.dir,
@@ -145,7 +156,10 @@ class NavigationMenuRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class NavigationMenuSubState {
+export class NavigationMenuSubState {
+    static create(opts) {
+        return new NavigationMenuSubState(opts, NavigationMenuProviderContext.get());
+    }
     opts;
     context;
     previousValue = box("");
@@ -153,7 +167,7 @@ class NavigationMenuSubState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        this.subProvider = useNavigationMenuProvider({
+        this.subProvider = NavigationMenuProviderState.create({
             isRootMenu: false,
             value: this.opts.value,
             dir: this.context.opts.dir,
@@ -183,7 +197,10 @@ class NavigationMenuSubState {
         ...attachRef(this.opts.ref),
     }));
 }
-class NavigationMenuListState {
+export class NavigationMenuListState {
+    static create(opts) {
+        return NavigationMenuListContext.set(new NavigationMenuListState(opts, NavigationMenuProviderContext.get()));
+    }
     opts;
     context;
     wrapperId = box(useId());
@@ -194,7 +211,7 @@ class NavigationMenuListState {
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: opts.ref,
             candidateSelector: `${navigationMenuAttrs.selector("trigger")}:not([data-disabled]), ${navigationMenuAttrs.selector("link")}:not([data-disabled])`,
             loop: box.with(() => false),
@@ -220,6 +237,9 @@ class NavigationMenuListState {
     }));
 }
 export class NavigationMenuItemState {
+    static create(opts) {
+        return NavigationMenuItemContext.set(new NavigationMenuItemState(opts, NavigationMenuListContext.get()));
+    }
     opts;
     listContext;
     contentNode = $state(null);
@@ -262,7 +282,15 @@ export class NavigationMenuItemState {
         [navigationMenuAttrs.item]: "",
     }));
 }
-class NavigationMenuTriggerState {
+export class NavigationMenuTriggerState {
+    static create(opts) {
+        return new NavigationMenuTriggerState(opts, {
+            provider: NavigationMenuProviderContext.get(),
+            item: NavigationMenuItemContext.get(),
+            list: NavigationMenuListContext.get(),
+            sub: NavigationMenuSubContext.getOr(null),
+        });
+    }
     opts;
     focusProxyId = box(useId());
     focusProxyRef = box(null);
@@ -271,8 +299,8 @@ class NavigationMenuTriggerState {
     listContext;
     hasPointerMoveOpened = box(false);
     wasClickClose = false;
-    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     focusProxyMounted = $state(false);
+    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     constructor(opts, context) {
         this.opts = opts;
         this.hasPointerMoveOpened = boxAutoReset(false, {
@@ -366,9 +394,6 @@ class NavigationMenuTriggerState {
         onfocus: this.focusProxyOnFocus,
         ...attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v)),
     }));
-    restructureSpanProps = $derived.by(() => ({
-        "aria-owns": this.itemContext.contentId,
-    }));
 }
 const LINK_SELECT_EVENT = new CustomEventDispatcher("bitsLinkSelect", {
     bubbles: true,
@@ -378,7 +403,13 @@ const ROOT_CONTENT_DISMISS_EVENT = new CustomEventDispatcher("bitsRootContentDis
     cancelable: true,
     bubbles: true,
 });
-class NavigationMenuLinkState {
+export class NavigationMenuLinkState {
+    static create(opts) {
+        return new NavigationMenuLinkState(opts, {
+            provider: NavigationMenuProviderContext.get(),
+            item: NavigationMenuItemContext.get(),
+        });
+    }
     opts;
     context;
     isFocused = $state(false);
@@ -437,14 +468,23 @@ class NavigationMenuLinkState {
         ...attachRef(this.opts.ref),
     }));
 }
-class NavigationMenuIndicatorState {
+export class NavigationMenuIndicatorState {
+    static create() {
+        return new NavigationMenuIndicatorState(NavigationMenuProviderContext.get());
+    }
     context;
     isVisible = $derived.by(() => Boolean(this.context.opts.value.current));
     constructor(context) {
         this.context = context;
     }
 }
-class NavigationMenuIndicatorImplState {
+export class NavigationMenuIndicatorImplState {
+    static create(opts) {
+        return new NavigationMenuIndicatorImplState(opts, {
+            provider: NavigationMenuProviderContext.get(),
+            list: NavigationMenuListContext.get(),
+        });
+    }
     opts;
     context;
     listContext;
@@ -461,8 +501,8 @@ class NavigationMenuIndicatorImplState {
         this.opts = opts;
         this.context = context.provider;
         this.listContext = context.list;
-        useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
-        useResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
+        new SvelteResizeObserver(() => this.activeTrigger, this.handlePositionChange);
+        new SvelteResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
     }
     handlePositionChange = () => {
         if (!this.activeTrigger)
@@ -498,13 +538,20 @@ class NavigationMenuIndicatorImplState {
         ...attachRef(this.opts.ref),
     }));
 }
-class NavigationMenuContentState {
+export class NavigationMenuContentState {
+    static create(opts) {
+        return NavigationMenuContentContext.set(new NavigationMenuContentState(opts, {
+            provider: NavigationMenuProviderContext.get(),
+            item: NavigationMenuItemContext.get(),
+            list: NavigationMenuListContext.get(),
+        }));
+    }
     opts;
     context;
     itemContext;
     listContext;
-    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     mounted = $state(false);
+    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     value = $derived.by(() => this.itemContext.opts.value.current);
     // We persist the last active content value as the viewport may be animating out
     // and we want the content to remain mounted for the lifecycle of the viewport.
@@ -537,7 +584,10 @@ class NavigationMenuContentState {
         ...attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v)),
     }));
 }
-class NavigationMenuContentImplState {
+export class NavigationMenuContentImplState {
+    static create(opts, itemState) {
+        return new NavigationMenuContentImplState(opts, itemState ?? NavigationMenuItemContext.get());
+    }
     opts;
     itemContext;
     context;
@@ -697,15 +747,18 @@ class NavigationMenuContentImplState {
         ...attachRef(this.opts.ref),
     }));
 }
-class NavigationMenuViewportState {
+export class NavigationMenuViewportState {
+    static create(opts) {
+        return new NavigationMenuViewportState(opts, NavigationMenuProviderContext.get());
+    }
     opts;
     context;
     open = $derived.by(() => !!this.context.opts.value.current);
-    size = $state(null);
-    contentNode = $state(null);
     viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
     viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
     activeContentValue = $derived.by(() => this.context.opts.value.current);
+    size = $state(null);
+    contentNode = $state(null);
     mounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
@@ -726,7 +779,7 @@ class NavigationMenuViewportState {
          * For example, if content animates in from `scale(0.5)` the dimensions would be anything
          * from `0.5` to `1` of the intended size.
          */
-        useResizeObserver(() => this.contentNode, () => {
+        new SvelteResizeObserver(() => this.contentNode, () => {
             if (this.contentNode) {
                 this.size = {
                     width: this.contentNode.offsetWidth,
@@ -756,62 +809,6 @@ class NavigationMenuViewportState {
         ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),
     }));
 }
-const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
-export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
-const NavigationMenuListContext = new Context("NavigationMenu.List");
-const NavigationMenuContentContext = new Context("NavigationMenu.Content");
-const NavigationMenuSubContext = new Context("NavigationMenu.Sub");
-export function useNavigationMenuRoot(props) {
-    return new NavigationMenuRootState(props);
-}
-export function useNavigationMenuProvider(props) {
-    return NavigationMenuProviderContext.set(new NavigationMenuProviderState(props));
-}
-export function useNavigationMenuSub(props) {
-    return new NavigationMenuSubState(props, NavigationMenuProviderContext.get());
-}
-export function useNavigationMenuList(props) {
-    return NavigationMenuListContext.set(new NavigationMenuListState(props, NavigationMenuProviderContext.get()));
-}
-export function useNavigationMenuItem(props) {
-    return NavigationMenuItemContext.set(new NavigationMenuItemState(props, NavigationMenuListContext.get()));
-}
-export function useNavigationMenuIndicatorImpl(props) {
-    return new NavigationMenuIndicatorImplState(props, {
-        provider: NavigationMenuProviderContext.get(),
-        list: NavigationMenuListContext.get(),
-    });
-}
-export function useNavigationMenuTrigger(props) {
-    return new NavigationMenuTriggerState(props, {
-        provider: NavigationMenuProviderContext.get(),
-        item: NavigationMenuItemContext.get(),
-        list: NavigationMenuListContext.get(),
-        sub: NavigationMenuSubContext.getOr(null),
-    });
-}
-export function useNavigationMenuContent(props) {
-    return NavigationMenuContentContext.set(new NavigationMenuContentState(props, {
-        provider: NavigationMenuProviderContext.get(),
-        item: NavigationMenuItemContext.get(),
-        list: NavigationMenuListContext.get(),
-    }));
-}
-export function useNavigationMenuLink(props) {
-    return new NavigationMenuLinkState(props, {
-        provider: NavigationMenuProviderContext.get(),
-        item: NavigationMenuItemContext.get(),
-    });
-}
-export function useNavigationMenuContentImpl(props, itemState) {
-    return new NavigationMenuContentImplState(props, itemState ?? NavigationMenuItemContext.get());
-}
-export function useNavigationMenuViewport(props) {
-    return new NavigationMenuViewportState(props, NavigationMenuProviderContext.get());
-}
-export function useNavigationMenuIndicator() {
-    return new NavigationMenuIndicatorState(NavigationMenuProviderContext.get());
-}
 //
 function focusFirst(candidates, getActiveElement) {
     const previouslyFocusedElement = getActiveElement();

package/dist/bits/pagination/components/pagination-next-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationNextButtonProps } from "../types.js";
-	import { usePaginationButton } from "../pagination.svelte.js";
+	import { PaginationButtonState } from "../pagination.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: PaginationNextButtonProps = $props();
 
-	const nextButtonState = usePaginationButton({
+	const nextButtonState = PaginationButtonState.create({
 		type: "next",
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/pagination/components/pagination-page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPageProps } from "../types.js";
-	import { usePaginationPage } from "../pagination.svelte.js";
+	import { PaginationPageState } from "../pagination.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: PaginationPageProps = $props();
 
-	const pageState = usePaginationPage({
+	const pageState = PaginationPageState.create({
 		id: box.with(() => id),
 		page: box.with(() => page),
 		ref: box.with(

package/dist/bits/pagination/components/pagination-prev-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPrevButtonProps } from "../types.js";
-	import { usePaginationButton } from "../pagination.svelte.js";
+	import { PaginationButtonState } from "../pagination.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -16,7 +16,7 @@
 		...restProps
 	}: PaginationPrevButtonProps = $props();
 
-	const prevButtonState = usePaginationButton({
+	const prevButtonState = PaginationButtonState.create({
 		type: "prev",
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/pagination/components/pagination.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationRootProps } from "../types.js";
-	import { usePaginationRoot } from "../pagination.svelte.js";
+	import { PaginationRootState } from "../pagination.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -22,7 +22,7 @@
 		...restProps
 	}: PaginationRootProps = $props();
 
-	const rootState = usePaginationRoot({
+	const rootState = PaginationRootState.create({
 		id: box.with(() => id),
 		count: box.with(() => count),
 		perPage: box.with(() => perPage),

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

@@ -1,33 +1,35 @@
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { Page, PageItem } from "./types.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 import { type Orientation } from "../../shared/index.js";
-type PaginationRootStateProps = WithRefProps<ReadableBoxedValues<{
+interface PaginationRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     count: number;
     perPage: number;
     siblingCount: number;
     orientation: Orientation;
     loop: boolean;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     page: number;
-}>>;
-declare class PaginationRootState {
-    readonly opts: PaginationRootStateProps;
-    totalPages: number;
-    range: {
+}> {
+}
+export declare class PaginationRootState {
+    static create(opts: PaginationRootStateOpts): PaginationRootState;
+    readonly opts: PaginationRootStateOpts;
+    readonly totalPages: number;
+    readonly range: {
         start: number;
         end: number;
     };
-    pages: PageItem[];
-    constructor(opts: PaginationRootStateProps);
+    readonly pages: PageItem[];
+    readonly hasPrevPage: boolean;
+    readonly hasNextPage: boolean;
+    constructor(opts: PaginationRootStateOpts);
     setPage(page: number): void;
     getPageTriggerNodes(): HTMLElement[];
     getButtonNode(type: "prev" | "next"): HTMLElement | null | undefined;
-    hasPrevPage: boolean;
-    hasNextPage: boolean;
     prevPage(): void;
     nextPage(): void;
-    snippetProps: {
+    readonly snippetProps: {
         pages: PageItem[];
         range: {
             start: number;
@@ -35,23 +37,25 @@ declare class PaginationRootState {
         };
         currentPage: number;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-type PaginationPageStateProps = WithRefProps<ReadableBoxedValues<{
+interface PaginationPageStateOpts extends WithRefOpts, ReadableBoxedValues<{
     page: Page;
     disabled: boolean;
-}>>;
-declare class PaginationPageState {
+}> {
+}
+export declare class PaginationPageState {
     #private;
-    readonly opts: PaginationPageStateProps;
+    static create(opts: PaginationPageStateOpts): PaginationPageState;
+    readonly opts: PaginationPageStateOpts;
     readonly root: PaginationRootState;
-    constructor(opts: PaginationPageStateProps, root: PaginationRootState);
+    constructor(opts: PaginationPageStateOpts, root: PaginationRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-label": `Page ${number}`;
         readonly "data-value": `${number}`;
@@ -60,26 +64,24 @@ declare class PaginationPageState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type PaginationButtonStateProps = WithRefProps<{
-    type: "prev" | "next";
-}> & ReadableBoxedValues<{
+interface PaginationButtonStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
-declare class PaginationButtonState {
+}> {
+    type: "prev" | "next";
+}
+export declare class PaginationButtonState {
     #private;
-    readonly opts: PaginationButtonStateProps;
+    static create(opts: PaginationButtonStateOpts): PaginationButtonState;
+    readonly opts: PaginationButtonStateOpts;
     readonly root: PaginationRootState;
-    constructor(opts: PaginationButtonStateProps, root: PaginationRootState);
+    constructor(opts: PaginationButtonStateOpts, root: PaginationRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: boolean;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-export declare function usePaginationRoot(props: PaginationRootStateProps): PaginationRootState;
-export declare function usePaginationPage(props: PaginationPageStateProps): PaginationPageState;
-export declare function usePaginationButton(props: PaginationButtonStateProps): PaginationButtonState;
 export {};

package/dist/bits/pagination/pagination.svelte.js

@@ -9,7 +9,11 @@ const paginationAttrs = createBitsAttrs({
     component: "pagination",
     parts: ["root", "page", "prev", "next"],
 });
-class PaginationRootState {
+const PaginationRootContext = new Context("Pagination.Root");
+export class PaginationRootState {
+    static create(opts) {
+        return PaginationRootContext.set(new PaginationRootState(opts));
+    }
     opts;
     totalPages = $derived.by(() => {
         if (this.opts.count.current === 0)
@@ -26,6 +30,8 @@ class PaginationRootState {
         totalPages: this.totalPages,
         siblingCount: this.opts.siblingCount.current,
     }));
+    hasPrevPage = $derived.by(() => this.opts.page.current > 1);
+    hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
     constructor(opts) {
         this.opts = opts;
     }
@@ -44,8 +50,6 @@ class PaginationRootState {
             return;
         return node.querySelector(paginationAttrs.selector(type));
     }
-    hasPrevPage = $derived.by(() => this.opts.page.current > 1);
-    hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
     prevPage() {
         this.opts.page.current = Math.max(this.opts.page.current - 1, 1);
     }
@@ -64,7 +68,10 @@ class PaginationRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class PaginationPageState {
+export class PaginationPageState {
+    static create(opts) {
+        return new PaginationPageState(opts, PaginationRootContext.get());
+    }
     opts;
     root;
     #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.current);
@@ -102,7 +109,10 @@ class PaginationPageState {
         ...attachRef(this.opts.ref),
     }));
 }
-class PaginationButtonState {
+export class PaginationButtonState {
+    static create(opts) {
+        return new PaginationButtonState(opts, PaginationRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -246,13 +256,3 @@ function getPageItems({ page = 1, totalPages, siblingCount = 1 }) {
     }
     return pageItems;
 }
-const PaginationRootContext = new Context("Pagination.Root");
-export function usePaginationRoot(props) {
-    return PaginationRootContext.set(new PaginationRootState(props));
-}
-export function usePaginationPage(props) {
-    return new PaginationPageState(props, PaginationRootContext.get());
-}
-export function usePaginationButton(props) {
-    return new PaginationButtonState(props, PaginationRootContext.get());
-}

package/dist/bits/pin-input/components/pin-input-cell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputCellProps } from "../types.js";
-	import { usePinInputCell } from "../pin-input.svelte.js";
+	import { PinInputCellState } from "../pin-input.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: PinInputCellProps = $props();
 
-	const cellState = usePinInputCell({
+	const cellState = PinInputCellState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputRootProps } from "../types.js";
-	import { usePinInput } from "../pin-input.svelte.js";
+	import { PinInputRootState } from "../pin-input.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -27,7 +27,7 @@
 		...restProps
 	}: PinInputRootProps = $props();
 
-	const rootState = usePinInput({
+	const rootState = PinInputRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,