bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,425 +1,459 @@
-/**
- * This logic is adapted from Radix UI's Select component.
- * https://github.com/radix-ui/primitives/blob/main/packages/react/select/src/Select.tsx
- * Credit to the Radix UI team for the original implementation.
- */
-import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { Direction } from "../../shared/index.js";
-import { type Typeahead } from "../../internal/useTypeahead.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
-export declare const OPEN_KEYS: string[];
+import { Previous } from "runed";
+import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } 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;
-export declare const setSelectRootContext: (value: SelectRootState) => SelectRootState, getSelectRootContext: <T extends SelectRootState | null | undefined = SelectRootState>(fallback?: T | undefined) => T extends null ? SelectRootState | null : SelectRootState;
-export declare const setSelectTriggerContext: (value: SelectTriggerState) => SelectTriggerState;
-export declare const setSelectContentContext: (value: SelectContentState) => SelectContentState, getSelectContentContext: <T extends SelectContentState | null | undefined = SelectContentState>(fallback?: T | undefined) => T extends null ? SelectContentState | null : SelectContentState;
-export declare const setSelectItemContext: (value: SelectItemState) => SelectItemState, getSelectItemContext: <T extends SelectItemState | null | undefined = SelectItemState>(fallback?: T | undefined) => T extends null ? SelectItemState | null : SelectItemState;
-export declare const setSelectContentItemAlignedContext: (value: SelectItemAlignedPositionState) => SelectItemAlignedPositionState, getSelectContentItemAlignedContext: <T extends SelectItemAlignedPositionState | null | undefined = SelectItemAlignedPositionState>(fallback?: T | undefined) => T extends null ? SelectItemAlignedPositionState | null : SelectItemAlignedPositionState;
-type SelectRootStateProps = WritableBoxedValues<{
-    open: boolean;
-    value: string;
-}> & ReadableBoxedValues<{
-    dir: Direction;
+type SelectBaseRootStateProps = ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
-}>;
-type SelectNativeOption = {
-    value: string;
-    key: string;
-    disabled: boolean;
-    innerHTML?: string | null;
+    name: string;
+    loop: boolean;
+    scrollAlignment: "nearest" | "center";
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    allowDeselect: boolean;
+}> & WritableBoxedValues<{
+    open: boolean;
+}> & {
+    isCombobox: boolean;
 };
-export declare class SelectRootState {
-    #private;
-    open: SelectRootStateProps["open"];
-    value: SelectRootStateProps["value"];
-    dir: SelectRootStateProps["dir"];
-    disabled: SelectRootStateProps["disabled"];
-    required: SelectRootStateProps["required"];
-    triggerNode: HTMLElement | null;
-    valueId: WritableBox<string>;
-    valueNodeHasChildren: WritableBox<boolean>;
-    valueNode: HTMLElement | null;
+declare class SelectBaseRootState {
+    disabled: SelectBaseRootStateProps["disabled"];
+    required: SelectBaseRootStateProps["required"];
+    name: SelectBaseRootStateProps["name"];
+    loop: SelectBaseRootStateProps["loop"];
+    open: SelectBaseRootStateProps["open"];
+    scrollAlignment: SelectBaseRootStateProps["scrollAlignment"];
+    items: SelectBaseRootStateProps["items"];
+    allowDeselect: SelectBaseRootStateProps["allowDeselect"];
+    touchedInput: boolean;
+    inputValue: string;
+    inputNode: HTMLElement | null;
     contentNode: HTMLElement | null;
-    contentId: string | undefined;
-    triggerPointerDownPos: WritableBox<{
+    triggerNode: HTMLElement | null;
+    valueId: string;
+    highlightedNode: HTMLElement | null;
+    highlightedValue: string | null;
+    highlightedId: string | undefined;
+    highlightedLabel: string | null;
+    isUsingKeyboard: boolean;
+    isCombobox: boolean;
+    bitsAttrs: SelectBitsAttrs;
+    triggerPointerDownPos: {
         x: number;
         y: number;
-    } | null>;
-    contentFragment: DocumentFragment | null;
-    nativeSelectKey: string;
-    nativeOptionsArr: ReadableBox<SelectNativeOption>[];
-    isFormControl: {
-        readonly current: boolean;
-    };
-    constructor(props: SelectRootStateProps);
-    handleClose: () => void;
-    focusTriggerNode: (preventScroll?: boolean) => void;
-    onNativeOptionAdd: (option: ReadableBox<SelectNativeOption>) => void;
-    onNativeOptionRemove: (option: ReadableBox<SelectNativeOption>) => void;
-    getTriggerTypeaheadCandidateNodes: () => HTMLElement[];
-    getCandidateNodes: () => HTMLElement[];
-    createTrigger(props: SelectTriggerStateProps): SelectTriggerState;
-    createValue(): SelectValueState;
-    createContent(): SelectContentFragState;
-    createContentImpl(props: SelectContentStateProps): SelectContentState;
+    } | null;
+    constructor(props: SelectBaseRootStateProps);
+    setHighlightedNode(node: HTMLElement | null): void;
+    getCandidateNodes(): HTMLElement[];
+    setHighlightedToFirstCandidate(): void;
+    getNodeByValue(value: string): HTMLElement | null;
+    setOpen(open: boolean): void;
+    toggleOpen(): void;
+    handleOpen(): void;
+    handleClose(): void;
+    toggleMenu(): void;
 }
-type SelectTriggerStateProps = WithRefProps<ReadableBoxedValues<{
-    disabled: boolean;
-}>>;
-declare class SelectTriggerState {
+type SelectSingleRootStateProps = SelectBaseRootStateProps & WritableBoxedValues<{
+    value: string;
+}>;
+declare class SelectSingleRootState extends SelectBaseRootState {
+    value: SelectSingleRootStateProps["value"];
+    isMulti: false;
+    hasValue: boolean;
+    currentLabel: string;
+    candidateLabels: string[];
+    dataTypeaheadEnabled: boolean;
+    constructor(props: SelectSingleRootStateProps);
+    includesItem(itemValue: string): boolean;
+    toggleItem(itemValue: string, itemLabel?: string): void;
+    setInitialHighlightedNode(): void;
+}
+type SelectMultipleRootStateProps = SelectBaseRootStateProps & WritableBoxedValues<{
+    value: string[];
+}>;
+declare class SelectMultipleRootState extends SelectBaseRootState {
+    value: SelectMultipleRootStateProps["value"];
+    isMulti: true;
+    hasValue: boolean;
+    constructor(props: SelectMultipleRootStateProps);
+    includesItem(itemValue: string): boolean;
+    toggleItem(itemValue: string, itemLabel?: string): void;
+    setInitialHighlightedNode(): void;
+}
+type SelectRootState = SelectSingleRootState | SelectMultipleRootState;
+type SelectInputStateProps = WithRefProps;
+declare class SelectInputState {
     #private;
-    constructor(props: SelectTriggerStateProps, root: SelectRootState);
+    root: SelectRootState;
+    constructor(props: SelectInputStateProps, root: SelectRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    oninput(e: BitsEvent<Event, HTMLInputElement>): void;
     props: {
+        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsEvent<Event, HTMLInputElement>) => void) | undefined;
         readonly id: string;
-        readonly disabled: boolean;
         readonly role: "combobox";
-        readonly type: "button";
-        readonly "aria-controls": string | undefined;
-        readonly "aria-expanded": "false" | "true";
-        readonly "aria-required": "false" | "true";
-        readonly "aria-autocomplete": "none";
-        readonly dir: Direction;
+        readonly disabled: true | undefined;
+        readonly "aria-activedescendant": string | undefined;
+        readonly "aria-autocomplete": "list";
+        readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-placeholder": "" | undefined;
-        readonly "data-select-trigger": "";
-        readonly onclick: (e: MouseEvent) => void;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly oninput: (e: BitsEvent<Event, HTMLInputElement>) => void;
     };
 }
-declare class SelectValueState {
-    root: SelectRootState;
-    showPlaceholder: boolean;
-    ref: WritableBox<HTMLElement | null>;
-    constructor(root: SelectRootState);
+type SelectComboTriggerStateProps = WithRefProps;
+declare class SelectComboTriggerState {
+    #private;
+    root: SelectBaseRootState;
+    constructor(props: SelectComboTriggerStateProps, root: SelectBaseRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    /**
+     * `pointerdown` fires before the `focus` event, so we can prevent the default
+     * behavior of focusing the button and keep focus on the input.
+     */
+    onpointerdown(e: BitsPointerEvent): void;
     props: {
+        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
+        readonly disabled: true | undefined;
+        readonly "aria-haspopup": "listbox";
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-select-value": "";
-        readonly style: {
-            readonly pointerEvents: "none";
-        };
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-declare class SelectContentFragState {
+type SelectTriggerStateProps = WithRefProps;
+declare class SelectTriggerState {
+    #private;
     root: SelectRootState;
-    constructor(root: SelectRootState);
+    constructor(props: SelectTriggerStateProps, root: SelectRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    onclick(e: BitsMouseEvent): void;
+    /**
+     * `pointerdown` fires before the `focus` event, so we can prevent the default
+     * behavior of focusing the button and keep focus on the input.
+     */
+    onpointerdown: (e: BitsPointerEvent) => void;
+    onpointerup: (e: BitsPointerEvent) => void;
+    props: {
+        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
+        readonly id: string;
+        readonly disabled: true | undefined;
+        readonly "aria-haspopup": "listbox";
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-placeholder": "" | undefined;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onpointerup: (e: BitsPointerEvent) => void;
+    };
 }
-type SelectContentStateProps = WithRefProps<ReadableBoxedValues<{
-    position: "item-aligned" | "floating";
-}>>;
-export declare class SelectContentState {
+type SelectContentStateProps = WithRefProps;
+declare class SelectContentState {
     #private;
     id: SelectContentStateProps["id"];
     ref: SelectContentStateProps["ref"];
-    root: SelectRootState;
     viewportNode: HTMLElement | null;
-    selectedItemId: WritableBox<string>;
-    selectedItemTextId: WritableBox<string>;
-    selectedItemText: WritableBox<HTMLElement | null>;
-    position: SelectContentStateProps["position"];
-    isPositioned: WritableBox<boolean>;
-    firstValidItemFound: WritableBox<boolean>;
-    typeahead: Typeahead;
-    alignedPositionState: SelectItemAlignedPositionState | null;
+    root: SelectRootState;
+    isPositioned: boolean;
     constructor(props: SelectContentStateProps, root: SelectRootState);
-    focusFirst: (candidates: Array<HTMLElement | null>) => void;
-    onItemLeave: () => void;
-    getSelectedItem: () => {
-        selectedItemNode: HTMLElement;
-        selectedItemTextNode: HTMLElement | null;
-    } | {
-        selectedItemNode: null;
-        selectedItemTextNode: null;
+    onpointermove(_: BitsPointerEvent): void;
+    handleInteractOutside(e: PointerEvent): void;
+    snippetProps: {
+        open: boolean;
     };
-    focusSelectedItem: () => void;
-    itemRegister: (value: string, disabled: boolean) => void;
-    itemTextRegister: (node: HTMLElement | null, value: string, disabled: boolean) => void;
     props: {
+        readonly [x: string]: string | ((_: BitsPointerEvent) => void) | {
+            readonly "--bits-combobox-content-transform-origin": string;
+            readonly "--bits-combobox-content-available-width": string;
+            readonly "--bits-combobox-content-available-height": string;
+            readonly "--bits-combobox-anchor-width": string;
+            readonly "--bits-combobox-anchor-height": string;
+            readonly "--bits-select-content-transform-origin"?: undefined;
+            readonly "--bits-select-content-available-width"?: undefined;
+            readonly "--bits-select-content-available-height"?: undefined;
+            readonly "--bits-select-anchor-width"?: undefined;
+            readonly "--bits-select-anchor-height"?: undefined;
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly outline: "none";
+            readonly boxSizing: "border-box";
+            readonly pointerEvents: "auto";
+        } | {
+            readonly "--bits-select-content-transform-origin": string;
+            readonly "--bits-select-content-available-width": string;
+            readonly "--bits-select-content-available-height": string;
+            readonly "--bits-select-anchor-width": string;
+            readonly "--bits-select-anchor-height": string;
+            readonly "--bits-combobox-content-transform-origin"?: undefined;
+            readonly "--bits-combobox-content-available-width"?: undefined;
+            readonly "--bits-combobox-content-available-height"?: undefined;
+            readonly "--bits-combobox-anchor-width"?: undefined;
+            readonly "--bits-combobox-anchor-height"?: undefined;
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly outline: "none";
+            readonly boxSizing: "border-box";
+            readonly pointerEvents: "auto";
+        };
         readonly id: string;
         readonly role: "listbox";
         readonly "data-state": "open" | "closed";
         readonly style: {
+            readonly "--bits-combobox-content-transform-origin": string;
+            readonly "--bits-combobox-content-available-width": string;
+            readonly "--bits-combobox-content-available-height": string;
+            readonly "--bits-combobox-anchor-width": string;
+            readonly "--bits-combobox-anchor-height": string;
+            readonly "--bits-select-content-transform-origin"?: undefined;
+            readonly "--bits-select-content-available-width"?: undefined;
+            readonly "--bits-select-content-available-height"?: undefined;
+            readonly "--bits-select-anchor-width"?: undefined;
+            readonly "--bits-select-anchor-height"?: undefined;
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly outline: "none";
+            readonly boxSizing: "border-box";
+            readonly pointerEvents: "auto";
+        } | {
+            readonly "--bits-select-content-transform-origin": string;
+            readonly "--bits-select-content-available-width": string;
+            readonly "--bits-select-content-available-height": string;
+            readonly "--bits-select-anchor-width": string;
+            readonly "--bits-select-anchor-height": string;
+            readonly "--bits-combobox-content-transform-origin"?: undefined;
+            readonly "--bits-combobox-content-available-width"?: undefined;
+            readonly "--bits-combobox-content-available-height"?: undefined;
+            readonly "--bits-combobox-anchor-width"?: undefined;
+            readonly "--bits-combobox-anchor-height"?: undefined;
             readonly display: "flex";
             readonly flexDirection: "column";
             readonly outline: "none";
+            readonly boxSizing: "border-box";
+            readonly pointerEvents: "auto";
         };
-        readonly oncontextmenu: (e: Event) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
-        readonly tabIndex: -1;
-        readonly "data-select-content": "";
+        readonly onpointermove: (_: BitsPointerEvent) => void;
     };
-    createItem(props: SelectItemStateProps): SelectItemState;
-    createViewport(props: SelectViewportStateProps): SelectViewportState;
-    createItemAlignedPosition(props: SelectItemAlignedPositionStateProps): SelectItemAlignedPositionState;
-    createFloatingPosition(): SelectFloatingPositionState;
-    createScrollDownButton(props: SelectScrollButtonImplStateProps): SelectScrollDownButtonState;
-    createScrollUpButton(props: SelectScrollButtonImplStateProps): SelectScrollUpButtonState;
 }
 type SelectItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;
     disabled: boolean;
-    textValue?: string;
+    label: string;
+    onHighlight: () => void;
+    onUnhighlight: () => void;
 }>>;
 declare class SelectItemState {
     #private;
     root: SelectRootState;
-    content: SelectContentState;
-    textId: WritableBox<string | undefined>;
     value: SelectItemStateProps["value"];
+    label: SelectItemStateProps["label"];
+    onHighlight: SelectItemStateProps["onHighlight"];
+    onUnhighlight: SelectItemStateProps["onUnhighlight"];
     disabled: SelectItemStateProps["disabled"];
-    textValue: SelectItemStateProps["textValue"];
     isSelected: boolean;
-    isFocused: WritableBox<boolean>;
-    node: WritableBox<HTMLElement | null>;
-    trueTextValue: WritableBox<string>;
-    constructor(props: SelectItemStateProps, content: SelectContentState);
-    onItemTextChange: (node: HTMLElement | null) => void;
-    setTextId: (id: string) => void;
-    handleSelect: (e?: PointerEvent) => Promise<void>;
+    isHighlighted: boolean;
+    prevHighlighted: Previous<boolean>;
+    textId: string;
+    mounted: boolean;
+    constructor(props: SelectItemStateProps, root: SelectRootState);
+    snippetProps: {
+        selected: boolean;
+        highlighted: boolean;
+    };
+    onpointerdown(e: BitsPointerEvent): void;
+    /**
+     * Using `pointerup` instead of `click` allows power users to pointerdown
+     * the trigger, then release pointerup on an item to select it vs having to do
+     * multiple clicks.
+     */
+    onpointerup(e: BitsPointerEvent): void;
+    onpointermove(_: BitsPointerEvent): void;
     props: {
+        readonly [x: string]: string | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly role: "option";
-        readonly "aria-labelledby": string | undefined;
-        readonly "data-highlighted": "" | undefined;
-        readonly "aria-selected": "false" | "true";
-        readonly "data-state": "checked" | "unchecked";
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-selected": "true" | undefined;
+        readonly "data-value": string;
         readonly "data-disabled": "" | undefined;
+        readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
-        readonly "data-value": string;
-        readonly tabindex: -1 | undefined;
-        readonly "data-select-item": "";
-        readonly onfocus: () => void;
-        readonly onpointermove: (e: PointerEvent) => Promise<void>;
-        readonly onpointerleave: (e: PointerEvent) => Promise<void>;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => Promise<void>;
-        readonly onkeydown: (e: KeyboardEvent) => Promise<void>;
-        readonly onblur: () => void;
-        readonly ontouchend: (e: TouchEvent) => void;
+        readonly "data-label": string;
+        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onpointerup: (e: BitsPointerEvent) => void;
     };
-    createText(props: SelectItemTextStateProps): SelectItemTextState;
 }
-type SelectItemTextStateProps = WithRefProps;
-declare class SelectItemTextState {
+type SelectGroupStateProps = WithRefProps;
+declare class SelectGroupState {
     #private;
-    item: SelectItemState;
-    node: WritableBox<HTMLElement | null>;
-    nativeOption: ReadableBox<{
-        readonly key: string;
-        readonly value: string;
-        readonly disabled: boolean;
-        readonly innerHTML: string | null | undefined;
-    }>;
-    constructor(props: SelectItemTextStateProps, item: SelectItemState);
+    root: SelectBaseRootState;
+    labelNode: HTMLElement | null;
+    constructor(props: SelectGroupStateProps, root: SelectBaseRootState);
     props: {
+        readonly [x: string]: string | undefined;
         readonly id: string;
-        readonly "data-select-item-text": "";
+        readonly role: "group";
+        readonly "aria-labelledby": string | undefined;
     };
 }
-type SelectItemAlignedPositionStateProps = ReadableBoxedValues<{
-    onPlaced: () => void;
-}>;
-declare class SelectItemAlignedPositionState {
-    root: SelectRootState;
-    content: SelectContentState;
-    shouldExpandOnScroll: boolean;
-    shouldReposition: boolean;
-    contentWrapperId: string;
-    onPlaced: SelectItemAlignedPositionStateProps["onPlaced"];
-    contentZIndex: string;
-    constructor(props: SelectItemAlignedPositionStateProps, content: SelectContentState);
-    position: () => void;
-    handleScrollButtonChange: (id: string) => void;
-    wrapperProps: {
-        readonly id: string;
-        readonly style: {
-            readonly display: "flex";
-            readonly flexDirection: "column";
-            readonly position: "fixed";
-            readonly zIndex: string;
-        };
-        readonly "data-select-content-wrapper": "";
-    };
+type SelectGroupHeadingStateProps = WithRefProps;
+declare class SelectGroupHeadingState {
+    #private;
+    group: SelectGroupState;
+    constructor(props: SelectGroupHeadingStateProps, group: SelectGroupState);
     props: {
+        readonly [x: string]: string;
         readonly id: string;
-        readonly style: {
-            readonly boxSizing: "border-box";
-            readonly maxHeight: "100%";
-        };
     };
 }
-declare class SelectFloatingPositionState {
-    root: SelectRootState;
-    content: SelectContentState;
-    constructor(content: SelectContentState);
+type SelectHiddenInputStateProps = ReadableBoxedValues<{
+    value: string;
+}>;
+declare class SelectHiddenInputState {
+    #private;
+    root: SelectBaseRootState;
+    shouldRender: boolean;
+    constructor(props: SelectHiddenInputStateProps, root: SelectBaseRootState);
+    onfocus(e: BitsFocusEvent): void;
     props: {
-        readonly style: {
-            readonly boxSizing: "border-box";
-            readonly "--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)";
-            readonly "--bits-select-content-available-width": "var(--bits-floating-available-width)";
-            readonly "--bits-select-content-available-height": "var(--bits-floating-available-height)";
-            readonly "--bits-select-anchor-width": "var(--bits-floating-anchor-width)";
-            readonly "--bits-select-anchor-height": "var(--bits-floating-anchor-height)";
-        };
+        readonly disabled: true | undefined;
+        readonly required: true | undefined;
+        readonly name: string;
+        readonly value: string;
+        readonly style: string;
+        readonly tabindex: -1;
+        readonly onfocus: (e: BitsFocusEvent) => void;
     };
 }
 type SelectViewportStateProps = WithRefProps;
 declare class SelectViewportState {
     #private;
-    id: SelectViewportStateProps["id"];
-    ref: SelectViewportStateProps["ref"];
+    root: SelectBaseRootState;
     content: SelectContentState;
     prevScrollTop: number;
     constructor(props: SelectViewportStateProps, content: SelectContentState);
     props: {
+        readonly [x: string]: string | {
+            readonly position: "relative";
+            readonly flex: 1;
+            readonly overflow: "auto";
+        };
         readonly id: string;
         readonly role: "presentation";
-        readonly "data-select-viewport": "";
         readonly style: {
             readonly position: "relative";
             readonly flex: 1;
             readonly overflow: "auto";
         };
-        readonly onscroll: (e: WheelEvent) => void;
     };
 }
 type SelectScrollButtonImplStateProps = WithRefProps<ReadableBoxedValues<{
     mounted: boolean;
 }>>;
 declare class SelectScrollButtonImplState {
-    #private;
     id: SelectScrollButtonImplStateProps["id"];
     ref: SelectScrollButtonImplStateProps["ref"];
     content: SelectContentState;
-    alignedPositionState: SelectItemAlignedPositionState | null;
+    root: SelectBaseRootState;
     autoScrollTimer: number | null;
     onAutoScroll: () => void;
     mounted: SelectScrollButtonImplStateProps["mounted"];
     constructor(props: SelectScrollButtonImplStateProps, content: SelectContentState);
-    clearAutoScrollTimer: () => void;
+    clearAutoScrollTimer(): void;
+    onpointerdown(_: BitsPointerEvent): void;
+    onpointermove(_: BitsPointerEvent): void;
+    onpointerleave(_: BitsPointerEvent): void;
     props: {
         readonly id: string;
-        readonly "aria-hidden": "true";
+        readonly "aria-hidden": "true" | undefined;
         readonly style: {
             readonly flexShrink: 0;
         };
-        readonly onpointerdown: () => void;
-        readonly onpointermove: () => void;
-        readonly onpointerleave: () => void;
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
 declare class SelectScrollDownButtonState {
     state: SelectScrollButtonImplState;
     content: SelectContentState;
+    root: SelectBaseRootState;
     canScrollDown: boolean;
     constructor(state: SelectScrollButtonImplState);
     handleAutoScroll: () => void;
     props: {
-        readonly "data-select-scroll-down-button": "";
         readonly id: string;
-        readonly "aria-hidden": "true";
+        readonly "aria-hidden": "true" | undefined;
         readonly style: {
             readonly flexShrink: 0;
         };
-        readonly onpointerdown: () => void;
-        readonly onpointermove: () => void;
-        readonly onpointerleave: () => void;
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
 declare class SelectScrollUpButtonState {
     state: SelectScrollButtonImplState;
     content: SelectContentState;
+    root: SelectBaseRootState;
     canScrollUp: boolean;
     constructor(state: SelectScrollButtonImplState);
     handleAutoScroll: () => void;
     props: {
-        readonly "data-select-scroll-up-button": "";
         readonly id: string;
-        readonly "aria-hidden": "true";
+        readonly "aria-hidden": "true" | undefined;
         readonly style: {
             readonly flexShrink: 0;
         };
-        readonly onpointerdown: () => void;
-        readonly onpointermove: () => void;
-        readonly onpointerleave: () => void;
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
-type SelectGroupStateProps = WithRefProps;
-declare class SelectGroupState {
-    #private;
-    labelNode: HTMLElement | null;
-    constructor(props: SelectGroupStateProps);
-    props: {
-        readonly id: string;
-        readonly role: "group";
-        readonly "aria-labelledby": string | undefined;
-        readonly "data-select-group": "";
-    };
-    createGroupHeading(props: SelectGroupHeadingStateProps): SelectGroupHeading;
-}
-type SelectGroupHeadingStateProps = WithRefProps;
-declare class SelectGroupHeading {
-    #private;
-    group: SelectGroupState;
-    constructor(props: SelectGroupHeadingStateProps, group: SelectGroupState);
-    props: {
-        readonly id: string;
-        readonly "data-select-group-label": "";
-    };
-}
-type SelectSeparatorStateProps = WithRefProps;
-declare class SelectSeparatorState {
-    #private;
-    constructor(props: SelectSeparatorStateProps);
-    props: {
-        readonly id: string;
-        readonly "data-select-separator": "";
-        readonly "aria-hidden": "true" | undefined;
-    };
-}
-type SelectArrowStateProps = WithRefProps;
-declare class SelectArrowState {
-    #private;
-    constructor(props: SelectArrowStateProps);
-    props: {
-        readonly id: string;
-        readonly "data-select-arrow": "";
-        readonly "aria-hidden": "true" | undefined;
-    };
-}
-type SelectIconStateProps = WithRefProps;
-declare class SelectIconState {
-    #private;
-    constructor(props: SelectIconStateProps);
-    props: {
-        readonly id: string;
-        readonly "data-select-icon": "";
-        readonly "aria-hidden": "true" | undefined;
-    };
-}
-export declare function useSelectRoot(props: SelectRootStateProps): SelectRootState;
-export declare function useSelectContentFrag(): SelectContentFragState;
+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;
+}> & {
+    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 useSelectItemAlignedPosition(props: SelectItemAlignedPositionStateProps): SelectItemAlignedPositionState;
-export declare function useSelectFloatingPosition(): SelectFloatingPositionState;
 export declare function useSelectTrigger(props: SelectTriggerStateProps): SelectTriggerState;
-export declare function useSelectValue(): SelectValueState;
+export declare function useSelectComboTrigger(props: SelectComboTriggerStateProps): SelectComboTriggerState;
 export declare function useSelectItem(props: SelectItemStateProps): SelectItemState;
-export declare function useSelectItemText(props: SelectItemTextStateProps): SelectItemTextState;
 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): SelectGroupHeading;
-export declare function useSelectArrow(props: SelectArrowStateProps): SelectArrowState;
-export declare function useSelectSeparator(props: SelectSeparatorStateProps): SelectSeparatorState;
-export declare function useSelectIcon(props: SelectIconStateProps): SelectIconState;
-export declare function shouldShowPlaceholder(value?: string): value is "" | undefined;
+export declare function useSelectGroupHeading(props: SelectGroupHeadingStateProps): SelectGroupHeadingState;
+export declare function useSelectHiddenInput(props: SelectHiddenInputStateProps): SelectHiddenInputState;
+declare const selectParts: readonly ["trigger", "content", "item", "viewport", "scroll-up-button", "scroll-down-button", "group", "group-label", "separator", "arrow", "input", "content-wrapper", "item-text", "value"];
+type SelectBitsAttrs = Record<(typeof selectParts)[number], string>;
+export declare function getSelectBitsAttrs(root: SelectBaseRootState): SelectBitsAttrs;
 export {};