bits-ui 2.7.0 → 2.8.0

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

@@ -1,15 +1,14 @@
 import { Previous } from "runed";
-import { DOMContext } from "svelte-toolbelt";
-import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type Box } from "svelte-toolbelt";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
 export declare const INTERACTION_KEYS: string[];
 export declare const FIRST_KEYS: string[];
 export declare const LAST_KEYS: string[];
 export declare const FIRST_LAST_KEYS: string[];
 export declare const SELECTION_KEYS: string[];
 export declare const CONTENT_MARGIN = 10;
-declare const selectAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["trigger", "content", "item", "viewport", "scroll-up-button", "scroll-down-button", "group", "group-label", "separator", "arrow", "input", "content-wrapper", "item-text", "value"]>;
-type SelectBaseRootStateProps = ReadableBoxedValues<{
+declare const selectAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["trigger", "content", "item", "viewport", "scroll-up-button", "scroll-down-button", "group", "group-label", "separator", "arrow", "input", "content-wrapper", "item-text", "value"]>;
+interface SelectBaseRootStateOpts extends ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
     name: string;
@@ -21,14 +20,15 @@ type SelectBaseRootStateProps = ReadableBoxedValues<{
         disabled?: boolean;
     }[];
     allowDeselect: boolean;
-}> & WritableBoxedValues<{
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}>, WritableBoxedValues<{
     open: boolean;
     inputValue: string;
-}> & {
+}> {
     isCombobox: boolean;
-};
-declare class SelectBaseRootState {
-    readonly opts: SelectBaseRootStateProps;
+}
+declare abstract class SelectBaseRootState {
+    readonly opts: SelectBaseRootStateOpts;
     touchedInput: boolean;
     inputNode: HTMLElement | null;
     contentNode: HTMLElement | null;
@@ -41,7 +41,7 @@ declare class SelectBaseRootState {
     isUsingKeyboard: boolean;
     isCombobox: boolean;
     domContext: DOMContext;
-    constructor(opts: SelectBaseRootStateProps);
+    constructor(opts: SelectBaseRootStateOpts);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
     setHighlightedToFirstCandidate(): void;
@@ -53,41 +53,69 @@ declare class SelectBaseRootState {
     toggleMenu(): void;
     getBitsAttr: typeof selectAttrs.getAttr;
 }
-type SelectSingleRootStateProps = SelectBaseRootStateProps & WritableBoxedValues<{
+interface SelectSingleRootStateOpts extends SelectBaseRootStateOpts, WritableBoxedValues<{
     value: string;
-}>;
-declare class SelectSingleRootState extends SelectBaseRootState {
-    readonly opts: SelectSingleRootStateProps;
+}> {
+}
+export declare class SelectSingleRootState extends SelectBaseRootState {
+    readonly opts: SelectSingleRootStateOpts;
     readonly isMulti: false;
     readonly hasValue: boolean;
     readonly currentLabel: string;
     readonly candidateLabels: string[];
     readonly dataTypeaheadEnabled: boolean;
-    constructor(opts: SelectSingleRootStateProps);
+    constructor(opts: SelectSingleRootStateOpts);
     includesItem(itemValue: string): boolean;
     toggleItem(itemValue: string, itemLabel?: string): void;
     setInitialHighlightedNode(): void;
 }
-type SelectMultipleRootStateProps = SelectBaseRootStateProps & WritableBoxedValues<{
+interface SelectMultipleRootStateOpts extends SelectBaseRootStateOpts, WritableBoxedValues<{
     value: string[];
-}>;
+}> {
+}
 declare class SelectMultipleRootState extends SelectBaseRootState {
-    readonly opts: SelectMultipleRootStateProps;
+    readonly opts: SelectMultipleRootStateOpts;
     readonly isMulti: true;
     readonly hasValue: boolean;
-    constructor(opts: SelectMultipleRootStateProps);
+    constructor(opts: SelectMultipleRootStateOpts);
     includesItem(itemValue: string): boolean;
     toggleItem(itemValue: string, itemLabel?: string): void;
     setInitialHighlightedNode(): void;
 }
-type SelectRootState = SelectSingleRootState | SelectMultipleRootState;
-type SelectInputStateProps = WithRefProps & ReadableBoxedValues<{
+interface SelectRootStateOpts extends ReadableBoxedValues<{
+    disabled: boolean;
+    required: boolean;
+    loop: boolean;
+    scrollAlignment: "nearest" | "center";
+    name: string;
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    allowDeselect: boolean;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}>, WritableBoxedValues<{
+    open: boolean;
+    inputValue: string;
+}> {
+    isCombobox: boolean;
+    type: "single" | "multiple";
+    value: Box<string> | Box<string[]>;
+}
+export declare class SelectRootState {
+    static create(props: SelectRootStateOpts): SelectRoot;
+}
+type SelectRoot = SelectSingleRootState | SelectMultipleRootState;
+interface SelectInputStateOpts extends WithRefOpts, ReadableBoxedValues<{
     clearOnDeselect: boolean;
-}>;
-declare class SelectInputState {
-    readonly opts: SelectInputStateProps;
-    readonly root: SelectRootState;
-    constructor(opts: SelectInputStateProps, root: SelectRootState);
+}> {
+}
+export declare class SelectInputState {
+    static create(opts: SelectInputStateOpts): SelectInputState;
+    readonly opts: SelectInputStateOpts;
+    readonly root: SelectRoot;
+    constructor(opts: SelectInputStateOpts, root: SelectRoot);
     onkeydown(e: BitsKeyboardEvent): void;
     oninput(e: BitsEvent<Event, HTMLInputElement>): void;
     readonly props: {
@@ -103,11 +131,13 @@ declare class SelectInputState {
         readonly oninput: (e: BitsEvent<Event, HTMLInputElement>) => void;
     };
 }
-type SelectComboTriggerStateProps = WithRefProps;
-declare class SelectComboTriggerState {
-    readonly opts: SelectComboTriggerStateProps;
+interface SelectComboTriggerStateOpts extends WithRefOpts {
+}
+export declare class SelectComboTriggerState {
+    static create(opts: SelectComboTriggerStateOpts): SelectComboTriggerState;
+    readonly opts: SelectComboTriggerStateOpts;
     readonly root: SelectBaseRootState;
-    constructor(opts: SelectComboTriggerStateProps, root: SelectBaseRootState);
+    constructor(opts: SelectComboTriggerStateOpts, root: SelectBaseRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     /**
      * `pointerdown` fires before the `focus` event, so we can prevent the default
@@ -124,12 +154,14 @@ declare class SelectComboTriggerState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type SelectTriggerStateProps = WithRefProps;
-declare class SelectTriggerState {
+interface SelectTriggerStateOpts extends WithRefOpts {
+}
+export declare class SelectTriggerState {
     #private;
-    readonly opts: SelectTriggerStateProps;
-    readonly root: SelectRootState;
-    constructor(opts: SelectTriggerStateProps, root: SelectRootState);
+    static create(opts: SelectTriggerStateOpts): SelectTriggerState;
+    readonly opts: SelectTriggerStateOpts;
+    readonly root: SelectRoot;
+    constructor(opts: SelectTriggerStateOpts, root: SelectRoot);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(e: BitsMouseEvent): void;
     onpointerdown(e: BitsPointerEvent): void;
@@ -149,18 +181,20 @@ declare class SelectTriggerState {
         readonly onpointerup: (e: BitsPointerEvent) => void;
     };
 }
-type SelectContentStateProps = WithRefProps & ReadableBoxedValues<{
+interface SelectContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
-}>;
-declare class SelectContentState {
+}> {
+}
+export declare class SelectContentState {
     #private;
-    readonly opts: SelectContentStateProps;
-    readonly root: SelectRootState;
+    static create(opts: SelectContentStateOpts): SelectContentState;
+    readonly opts: SelectContentStateOpts;
+    readonly root: SelectRoot;
     viewportNode: HTMLElement | null;
     isPositioned: boolean;
     domContext: DOMContext;
-    constructor(opts: SelectContentStateProps, root: SelectRootState);
+    constructor(opts: SelectContentStateOpts, root: SelectRoot);
     onpointermove(_: BitsPointerEvent): void;
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
@@ -193,21 +227,23 @@ declare class SelectContentState {
         onPlaced: () => void;
     };
 }
-type SelectItemStateProps = WithRefProps<ReadableBoxedValues<{
+interface SelectItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
     label: string;
     onHighlight: () => void;
     onUnhighlight: () => void;
-}>>;
-declare class SelectItemState {
-    readonly opts: SelectItemStateProps;
-    readonly root: SelectRootState;
+}> {
+}
+export declare class SelectItemState {
+    static create(opts: SelectItemStateOpts): SelectItemState;
+    readonly opts: SelectItemStateOpts;
+    readonly root: SelectRoot;
     readonly isSelected: boolean;
     readonly isHighlighted: boolean;
     readonly prevHighlighted: Previous<boolean>;
     mounted: boolean;
-    constructor(opts: SelectItemStateProps, root: SelectRootState);
+    constructor(opts: SelectItemStateOpts, root: SelectRoot);
     handleSelect(): void;
     snippetProps: {
         selected: boolean;
@@ -221,7 +257,7 @@ declare class SelectItemState {
      */
     onpointerup(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "option";
         readonly "aria-selected": "true" | undefined;
@@ -235,35 +271,41 @@ declare class SelectItemState {
         readonly onpointerup: (e: BitsPointerEvent) => void;
     };
 }
-type SelectGroupStateProps = WithRefProps;
-declare class SelectGroupState {
-    readonly opts: SelectGroupStateProps;
+interface SelectGroupStateOpts extends WithRefOpts {
+}
+export declare class SelectGroupState {
+    static create(opts: SelectGroupStateOpts): SelectGroupState;
+    readonly opts: SelectGroupStateOpts;
     readonly root: SelectBaseRootState;
     labelNode: HTMLElement | null;
-    constructor(opts: SelectGroupStateProps, root: SelectBaseRootState);
+    constructor(opts: SelectGroupStateOpts, root: SelectBaseRootState);
     readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
     };
 }
-type SelectGroupHeadingStateProps = WithRefProps;
-declare class SelectGroupHeadingState {
-    readonly opts: SelectGroupHeadingStateProps;
+interface SelectGroupHeadingStateOpts extends WithRefOpts {
+}
+export declare class SelectGroupHeadingState {
+    static create(opts: SelectGroupHeadingStateOpts): SelectGroupHeadingState;
+    readonly opts: SelectGroupHeadingStateOpts;
     readonly group: SelectGroupState;
-    constructor(opts: SelectGroupHeadingStateProps, group: SelectGroupState);
+    constructor(opts: SelectGroupHeadingStateOpts, group: SelectGroupState);
     readonly props: {
         readonly id: string;
     };
 }
-type SelectHiddenInputStateProps = ReadableBoxedValues<{
+interface SelectHiddenInputStateOpts extends ReadableBoxedValues<{
     value: string;
-}>;
-declare class SelectHiddenInputState {
-    readonly opts: SelectHiddenInputStateProps;
+}> {
+}
+export declare class SelectHiddenInputState {
+    static create(opts: SelectHiddenInputStateOpts): SelectHiddenInputState;
+    readonly opts: SelectHiddenInputStateOpts;
     readonly root: SelectBaseRootState;
-    shouldRender: boolean;
-    constructor(opts: SelectHiddenInputStateProps, root: SelectBaseRootState);
+    readonly shouldRender: boolean;
+    constructor(opts: SelectHiddenInputStateOpts, root: SelectBaseRootState);
     onfocus(e: BitsFocusEvent): void;
     readonly props: {
         readonly disabled: true | undefined;
@@ -273,13 +315,15 @@ declare class SelectHiddenInputState {
         readonly onfocus: (e: BitsFocusEvent) => void;
     };
 }
-type SelectViewportStateProps = WithRefProps;
-declare class SelectViewportState {
-    readonly opts: SelectViewportStateProps;
+interface SelectViewportStateOpts extends WithRefOpts {
+}
+export declare class SelectViewportState {
+    static create(opts: SelectViewportStateOpts): SelectViewportState;
+    readonly opts: SelectViewportStateOpts;
     readonly content: SelectContentState;
-    root: SelectBaseRootState;
+    readonly root: SelectBaseRootState;
     prevScrollTop: number;
-    constructor(opts: SelectViewportStateProps, content: SelectContentState);
+    constructor(opts: SelectViewportStateOpts, content: SelectContentState);
     readonly props: {
         readonly id: string;
         readonly role: "presentation";
@@ -290,19 +334,20 @@ declare class SelectViewportState {
         };
     };
 }
-type SelectScrollButtonImplStateProps = WithRefProps & ReadableBoxedValues<{
+interface SelectScrollButtonImplStateOpts extends WithRefOpts, ReadableBoxedValues<{
     delay: (tick: number) => number;
-}>;
-declare class SelectScrollButtonImplState {
-    readonly opts: SelectScrollButtonImplStateProps;
+}> {
+}
+export declare class SelectScrollButtonImplState {
+    readonly opts: SelectScrollButtonImplStateOpts;
     readonly content: SelectContentState;
-    root: SelectBaseRootState;
+    readonly root: SelectBaseRootState;
     autoScrollTimer: number | null;
     userScrollTimer: number;
     isUserScrolling: boolean;
     onAutoScroll: () => void;
     mounted: boolean;
-    constructor(opts: SelectScrollButtonImplStateProps, content: SelectContentState);
+    constructor(opts: SelectScrollButtonImplStateOpts, content: SelectContentState);
     handleUserScroll(): void;
     clearAutoScrollInterval(): void;
     onpointerdown(_: BitsPointerEvent): void;
@@ -319,10 +364,11 @@ declare class SelectScrollButtonImplState {
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
-declare class SelectScrollDownButtonState {
+export declare class SelectScrollDownButtonState {
+    static create(opts: SelectScrollButtonImplStateOpts): SelectScrollDownButtonState;
     readonly scrollButtonState: SelectScrollButtonImplState;
-    content: SelectContentState;
-    root: SelectBaseRootState;
+    readonly content: SelectContentState;
+    readonly root: SelectBaseRootState;
     canScrollDown: boolean;
     scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null;
     constructor(scrollButtonState: SelectScrollButtonImplState);
@@ -343,10 +389,11 @@ declare class SelectScrollDownButtonState {
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
-declare class SelectScrollUpButtonState {
+export declare class SelectScrollUpButtonState {
+    static create(opts: SelectScrollButtonImplStateOpts): SelectScrollUpButtonState;
     readonly scrollButtonState: SelectScrollButtonImplState;
-    content: SelectContentState;
-    root: SelectBaseRootState;
+    readonly content: SelectContentState;
+    readonly root: SelectBaseRootState;
     canScrollUp: boolean;
     constructor(scrollButtonState: SelectScrollButtonImplState);
     /**
@@ -366,37 +413,4 @@ declare class SelectScrollUpButtonState {
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
-type InitSelectProps = {
-    type: "single" | "multiple";
-    value: Box<string> | Box<string[]>;
-} & ReadableBoxedValues<{
-    disabled: boolean;
-    required: boolean;
-    loop: boolean;
-    scrollAlignment: "nearest" | "center";
-    name: string;
-    items: {
-        value: string;
-        label: string;
-        disabled?: boolean;
-    }[];
-    allowDeselect: boolean;
-}> & WritableBoxedValues<{
-    open: boolean;
-    inputValue: string;
-}> & {
-    isCombobox: boolean;
-};
-export declare function useSelectRoot(props: InitSelectProps): SelectRootState;
-export declare function useSelectInput(props: SelectInputStateProps): SelectInputState;
-export declare function useSelectContent(props: SelectContentStateProps): SelectContentState;
-export declare function useSelectTrigger(props: SelectTriggerStateProps): SelectTriggerState;
-export declare function useSelectComboTrigger(props: SelectComboTriggerStateProps): SelectComboTriggerState;
-export declare function useSelectItem(props: SelectItemStateProps): SelectItemState;
-export declare function useSelectViewport(props: SelectViewportStateProps): SelectViewportState;
-export declare function useSelectScrollUpButton(props: SelectScrollButtonImplStateProps): SelectScrollUpButtonState;
-export declare function useSelectScrollDownButton(props: SelectScrollButtonImplStateProps): SelectScrollDownButtonState;
-export declare function useSelectGroup(props: SelectGroupStateProps): SelectGroupState;
-export declare function useSelectGroupHeading(props: SelectGroupHeadingStateProps): SelectGroupHeadingState;
-export declare function useSelectHiddenInput(props: SelectHiddenInputStateProps): SelectHiddenInputState;
 export {};

package/dist/bits/select/select.svelte.js

@@ -1,15 +1,16 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { noop } from "../../internal/noop.js";
-import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
-import { useDataTypeahead } from "../../internal/use-data-typeahead.svelte.js";
 import { isIOS } from "../../internal/is.js";
 import { createBitsAttrs } from "../../internal/attrs.js";
 import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte.js";
+import { DataTypeahead } from "../../internal/data-typeahead.svelte.js";
+import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
@@ -36,6 +37,9 @@ const selectAttrs = createBitsAttrs({
         "value",
     ],
 });
+const SelectRootContext = new Context("Select.Root | Combobox.Root");
+const SelectGroupContext = new Context("Select.Group | Combobox.Group");
+const SelectContentContext = new Context("Select.Content | Combobox.Content");
 class SelectBaseRootState {
     opts;
     touchedInput = $state(false);
@@ -65,6 +69,13 @@ class SelectBaseRootState {
     constructor(opts) {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
         $effect.pre(() => {
             if (!this.opts.open.current) {
                 this.setHighlightedNode(null);
@@ -114,7 +125,7 @@ class SelectBaseRootState {
         return selectAttrs.getAttr(part, this.isCombobox ? "combobox" : undefined);
     };
 }
-class SelectSingleRootState extends SelectBaseRootState {
+export class SelectSingleRootState extends SelectBaseRootState {
     opts;
     isMulti = false;
     hasValue = $derived.by(() => this.opts.value.current !== "");
@@ -230,7 +241,19 @@ class SelectMultipleRootState extends SelectBaseRootState {
         });
     }
 }
-class SelectInputState {
+export class SelectRootState {
+    static create(props) {
+        const { type, ...rest } = props;
+        const rootState = type === "single"
+            ? new SelectSingleRootState(rest)
+            : new SelectMultipleRootState(rest);
+        return SelectRootContext.set(rootState);
+    }
+}
+export class SelectInputState {
+    static create(opts) {
+        return new SelectInputState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -364,7 +387,10 @@ class SelectInputState {
         ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
     }));
 }
-class SelectComboTriggerState {
+export class SelectComboTriggerState {
+    static create(opts) {
+        return new SelectComboTriggerState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -409,7 +435,10 @@ class SelectComboTriggerState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectTriggerState {
+export class SelectTriggerState {
+    static create(opts) {
+        return new SelectTriggerState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     #domTypeahead;
@@ -418,7 +447,7 @@ class SelectTriggerState {
         this.opts = opts;
         this.root = root;
         this.root.domContext = new DOMContext(opts.ref);
-        this.#domTypeahead = useDOMTypeahead({
+        this.#domTypeahead = new DOMTypeahead({
             getCurrentItem: () => this.root.highlightedNode,
             onMatch: (node) => {
                 this.root.setHighlightedNode(node);
@@ -426,7 +455,7 @@ class SelectTriggerState {
             getActiveElement: () => this.root.domContext.getActiveElement(),
             getWindow: () => this.root.domContext.getWindow(),
         });
-        this.#dataTypeahead = useDataTypeahead({
+        this.#dataTypeahead = new DataTypeahead({
             getCurrentItem: () => {
                 if (this.root.isMulti)
                     return "";
@@ -523,7 +552,7 @@ class SelectTriggerState {
             // if we're currently "typing ahead", we don't want to select the item
             // just yet as the item the user is trying to get to may have a space in it,
             // so we defer handling the close for this case until further down
-            (e.key === kbd.SPACE && this.#domTypeahead.search.current === "")) &&
+            (e.key === kbd.SPACE && this.#domTypeahead.search === "")) &&
             !e.isComposing) {
             e.preventDefault();
             const shouldReturn = this.#handleKeyboardSelection();
@@ -644,7 +673,10 @@ class SelectTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
-class SelectContentState {
+export class SelectContentState {
+    static create(opts) {
+        return SelectContentContext.set(new SelectContentState(opts, SelectRootContext.get()));
+    }
     opts;
     root;
     viewportNode = $state(null);
@@ -730,7 +762,10 @@ class SelectContentState {
         },
     };
 }
-class SelectItemState {
+export class SelectItemState {
+    static create(opts) {
+        return new SelectItemState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     isSelected = $derived.by(() => this.root.includesItem(this.opts.value.current));
@@ -846,7 +881,10 @@ class SelectItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectGroupState {
+export class SelectGroupState {
+    static create(opts) {
+        return SelectGroupContext.set(new SelectGroupState(opts, SelectRootContext.get()));
+    }
     opts;
     root;
     labelNode = $state(null);
@@ -862,7 +900,10 @@ class SelectGroupState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectGroupHeadingState {
+export class SelectGroupHeadingState {
+    static create(opts) {
+        return new SelectGroupHeadingState(opts, SelectGroupContext.get());
+    }
     opts;
     group;
     constructor(opts, group) {
@@ -875,7 +916,10 @@ class SelectGroupHeadingState {
         ...attachRef(this.opts.ref, (v) => (this.group.labelNode = v)),
     }));
 }
-class SelectHiddenInputState {
+export class SelectHiddenInputState {
+    static create(opts) {
+        return new SelectHiddenInputState(opts, SelectRootContext.get());
+    }
     opts;
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== "");
@@ -901,7 +945,10 @@ class SelectHiddenInputState {
         onfocus: this.onfocus,
     }));
 }
-class SelectViewportState {
+export class SelectViewportState {
+    static create(opts) {
+        return new SelectViewportState(opts, SelectContentContext.get());
+    }
     opts;
     content;
     root;
@@ -926,7 +973,7 @@ class SelectViewportState {
         ...attachRef(this.opts.ref, (v) => (this.content.viewportNode = v)),
     }));
 }
-class SelectScrollButtonImplState {
+export class SelectScrollButtonImplState {
     opts;
     content;
     root;
@@ -996,7 +1043,10 @@ class SelectScrollButtonImplState {
         ...attachRef(this.opts.ref),
     }));
 }
-class SelectScrollDownButtonState {
+export class SelectScrollDownButtonState {
+    static create(opts) {
+        return new SelectScrollDownButtonState(new SelectScrollButtonImplState(opts, SelectContentContext.get()));
+    }
     scrollButtonState;
     content;
     root;
@@ -1052,7 +1102,10 @@ class SelectScrollDownButtonState {
         [this.root.getBitsAttr("scroll-down-button")]: "",
     }));
 }
-class SelectScrollUpButtonState {
+export class SelectScrollUpButtonState {
+    static create(opts) {
+        return new SelectScrollUpButtonState(new SelectScrollButtonImplState(opts, SelectContentContext.get()));
+    }
     scrollButtonState;
     content;
     root;
@@ -1093,46 +1146,3 @@ class SelectScrollUpButtonState {
         [this.root.getBitsAttr("scroll-up-button")]: "",
     }));
 }
-const SelectRootContext = new Context("Select.Root | Combobox.Root");
-const SelectGroupContext = new Context("Select.Group | Combobox.Group");
-const SelectContentContext = new Context("Select.Content | Combobox.Content");
-export function useSelectRoot(props) {
-    const { type, ...rest } = props;
-    const rootState = type === "single"
-        ? new SelectSingleRootState(rest)
-        : new SelectMultipleRootState(rest);
-    return SelectRootContext.set(rootState);
-}
-export function useSelectInput(props) {
-    return new SelectInputState(props, SelectRootContext.get());
-}
-export function useSelectContent(props) {
-    return SelectContentContext.set(new SelectContentState(props, SelectRootContext.get()));
-}
-export function useSelectTrigger(props) {
-    return new SelectTriggerState(props, SelectRootContext.get());
-}
-export function useSelectComboTrigger(props) {
-    return new SelectComboTriggerState(props, SelectRootContext.get());
-}
-export function useSelectItem(props) {
-    return new SelectItemState(props, SelectRootContext.get());
-}
-export function useSelectViewport(props) {
-    return new SelectViewportState(props, SelectContentContext.get());
-}
-export function useSelectScrollUpButton(props) {
-    return new SelectScrollUpButtonState(new SelectScrollButtonImplState(props, SelectContentContext.get()));
-}
-export function useSelectScrollDownButton(props) {
-    return new SelectScrollDownButtonState(new SelectScrollButtonImplState(props, SelectContentContext.get()));
-}
-export function useSelectGroup(props) {
-    return SelectGroupContext.set(new SelectGroupState(props, SelectRootContext.get()));
-}
-export function useSelectGroupHeading(props) {
-    return new SelectGroupHeadingState(props, SelectGroupContext.get());
-}
-export function useSelectHiddenInput(props) {
-    return new SelectHiddenInputState(props, SelectRootContext.get());
-}