@johly/bits-ui 2.18.1

package/dist/bits/collapsible/collapsible.svelte.js

@@ -0,0 +1,197 @@
+import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { on } from "svelte/events";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+const collapsibleAttrs = createBitsAttrs({
+    component: "collapsible",
+    parts: ["root", "content", "trigger"],
+});
+const CollapsibleRootContext = new Context("Collapsible.Root");
+export class CollapsibleRootState {
+    static create(opts) {
+        return CollapsibleRootContext.set(new CollapsibleRootState(opts));
+    }
+    opts;
+    attachment;
+    contentNode = $state(null);
+    contentPresence;
+    contentId = $state(undefined);
+    constructor(opts) {
+        this.opts = opts;
+        this.toggleOpen = this.toggleOpen.bind(this);
+        this.attachment = attachRef(this.opts.ref);
+        this.contentPresence = new PresenceManager({
+            ref: boxWith(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
+    }
+    toggleOpen() {
+        this.opts.open.current = !this.opts.open.current;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-state": getDataOpenClosed(this.opts.open.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        [collapsibleAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+export class CollapsibleContentState {
+    static create(opts) {
+        return new CollapsibleContentState(opts, CollapsibleRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    present = $derived.by(() => {
+        if (this.opts.hiddenUntilFound.current)
+            return this.root.opts.open.current;
+        return this.opts.forceMount.current || this.root.opts.open.current;
+    });
+    #originalStyles;
+    #isMountAnimationPrevented = $state(false);
+    #width = $state(0);
+    #height = $state(0);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.#isMountAnimationPrevented = root.opts.open.current;
+        this.root.contentId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.contentId = id;
+        });
+        $effect.pre(() => {
+            const rAF = requestAnimationFrame(() => {
+                this.#isMountAnimationPrevented = false;
+            });
+            return () => {
+                cancelAnimationFrame(rAF);
+            };
+        });
+        watch.pre([() => this.opts.ref.current, () => this.opts.hiddenUntilFound.current], ([node, hiddenUntilFound]) => {
+            if (!node || !hiddenUntilFound)
+                return;
+            const handleBeforeMatch = () => {
+                if (this.root.opts.open.current)
+                    return;
+                // we need to defer opening until after browser completes search highlighting
+                // otherwise the browser will immediately open the collapsible
+                // and the search highlighting will not be visible
+                requestAnimationFrame(() => {
+                    this.root.opts.open.current = true;
+                });
+            };
+            return on(node, "beforematch", handleBeforeMatch);
+        });
+        watch([() => this.opts.ref.current, () => this.present], ([node]) => {
+            if (!node)
+                return;
+            afterTick(() => {
+                if (!this.opts.ref.current)
+                    return;
+                // get the dimensions of the element
+                this.#originalStyles = this.#originalStyles || {
+                    transitionDuration: node.style.transitionDuration,
+                    animationName: node.style.animationName,
+                };
+                // block any animations/transitions so the element renders at full dimensions
+                node.style.transitionDuration = "0s";
+                node.style.animationName = "none";
+                const rect = node.getBoundingClientRect();
+                this.#height = rect.height;
+                this.#width = rect.width;
+                // unblock any animations/transitions that were originally set if not the initial render
+                if (!this.#isMountAnimationPrevented) {
+                    const { animationName, transitionDuration } = this.#originalStyles;
+                    node.style.transitionDuration = transitionDuration;
+                    node.style.animationName = animationName;
+                }
+            });
+        });
+    }
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
+    snippetProps = $derived.by(() => ({
+        open: this.root.opts.open.current,
+    }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        style: {
+            "--bits-collapsible-content-height": this.#height
+                ? `${this.#height}px`
+                : undefined,
+            "--bits-collapsible-content-width": this.#width
+                ? `${this.#width}px`
+                : undefined,
+        },
+        hidden: this.opts.hiddenUntilFound.current && !this.root.opts.open.current
+            ? "until-found"
+            : undefined,
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        [collapsibleAttrs.content]: "",
+        ...(this.opts.hiddenUntilFound.current && !this.shouldRender
+            ? {}
+            : {
+                hidden: this.opts.hiddenUntilFound.current
+                    ? !this.shouldRender
+                    : this.opts.forceMount.current
+                        ? undefined
+                        : !this.shouldRender,
+            }),
+        ...this.attachment,
+    }));
+}
+export class CollapsibleTriggerState {
+    static create(opts) {
+        return new CollapsibleTriggerState(opts, CollapsibleRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.button !== 0)
+            return e.preventDefault();
+        this.root.toggleOpen();
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.root.toggleOpen();
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        type: "button",
+        disabled: this.#isDisabled,
+        "aria-controls": this.root.contentId,
+        "aria-expanded": boolToStr(this.root.opts.open.current),
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        [collapsibleAttrs.trigger]: "",
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { CollapsibleContentState } from "../collapsible.svelte.js";
+	import type { CollapsibleContentProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		ref = $bindable(null),
+		forceMount = false,
+		hiddenUntilFound = false,
+		children,
+		id = createId(uid),
+		...restProps
+	}: CollapsibleContentProps = $props();
+
+	const contentState = CollapsibleContentState.create({
+		id: boxWith(() => id),
+		forceMount: boxWith(() => forceMount),
+		hiddenUntilFound: boxWith(() => hiddenUntilFound),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if child}
+	{@render child({
+		...contentState.snippetProps,
+		props: mergedProps,
+	})}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/collapsible/components/collapsible-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleContentProps } from "../types.js";
+declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CollapsibleTriggerProps } from "../types.js";
+	import { CollapsibleTriggerState } from "../collapsible.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		disabled = false,
+		...restProps
+	}: CollapsibleTriggerProps = $props();
+
+	const triggerState = CollapsibleTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: boxWith(() => disabled),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/collapsible/components/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleTriggerProps } from "../types.js";
+declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

package/dist/bits/collapsible/components/collapsible.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CollapsibleRootProps } from "../types.js";
+	import { CollapsibleRootState } from "../collapsible.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		open = $bindable(false),
+		disabled = false,
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		...restProps
+	}: CollapsibleRootProps = $props();
+
+	const rootState = CollapsibleRootState.create({
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		disabled: boxWith(() => disabled),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/collapsible/components/collapsible.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleRootProps } from "../types.js";
+declare const Collapsible: import("svelte").Component<CollapsibleRootProps, {}, "ref" | "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/bits/collapsible/exports.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/collapsible.svelte";
+export { default as Content } from "./components/collapsible-content.svelte";
+export { default as Trigger } from "./components/collapsible-trigger.svelte";
+export type { CollapsibleRootProps as RootProps, CollapsibleContentProps as ContentProps, CollapsibleTriggerProps as TriggerProps, } from "./types.js";

package/dist/bits/collapsible/exports.js

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/collapsible.svelte";
+export { default as Content } from "./components/collapsible-content.svelte";
+export { default as Trigger } from "./components/collapsible-trigger.svelte";

package/dist/bits/collapsible/index.d.ts

@@ -0,0 +1 @@
+export * as Collapsible from "./exports.js";

package/dist/bits/collapsible/index.js

@@ -0,0 +1 @@
+export * as Collapsible from "./exports.js";

package/dist/bits/collapsible/types.d.ts

@@ -0,0 +1,48 @@
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type CollapsibleRootPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the collapsible is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the collapsible is open.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * A callback function called when the open state changes.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback function called when the open state changes complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
+}>;
+export type CollapsibleRootProps = CollapsibleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleRootPropsWithoutHTML>;
+export type CollapsibleContentSnippetProps = {
+    open: boolean;
+};
+export type CollapsibleContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<{
+    /**
+     * Whether to force mount the content to the DOM.
+     *
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Whether to allow the browser to expand the content when searching for content
+     * within the panel via the browser's built-in search functionality.
+     *
+     * When `true`, this prop will override the `forceMount` prop.
+     *
+     * @default true
+     */
+    hiddenUntilFound?: boolean;
+}, CollapsibleContentSnippetProps>;
+export type CollapsibleContentProps = CollapsibleContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleContentPropsWithoutHTML>;
+export type CollapsibleTriggerPropsWithoutHTML = WithChild;
+export type CollapsibleTriggerProps = CollapsibleTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CollapsibleTriggerPropsWithoutHTML>;

package/dist/bits/collapsible/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { ComboboxInputProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import { SelectInputState } from "../../select/select.svelte.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		defaultValue,
+		clearOnDeselect = false,
+		...restProps
+	}: ComboboxInputProps = $props();
+
+	const inputState = SelectInputState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		clearOnDeselect: boxWith(() => clearOnDeselect),
+	});
+
+	if (defaultValue) {
+		inputState.root.opts.inputValue.current = defaultValue;
+	}
+
+	const mergedProps = $derived(
+		mergeProps(restProps, inputState.props, { value: inputState.root.opts.inputValue.current })
+	);
+</script>
+
+<FloatingLayer.Anchor {id} ref={inputState.opts.ref}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<input {...mergedProps} />
+	{/if}
+</FloatingLayer.Anchor>

package/dist/bits/combobox/components/combobox-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxInputProps } from "../types.js";
+declare const ComboboxInput: import("svelte").Component<ComboboxInputProps, {}, "ref">;
+type ComboboxInput = ReturnType<typeof ComboboxInput>;
+export default ComboboxInput;

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { ComboboxTriggerProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { SelectComboTriggerState } from "../../select/select.svelte.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		type = "button",
+		...restProps
+	}: ComboboxTriggerProps = $props();
+
+	const triggerState = SelectComboTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/combobox/components/combobox-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxTriggerProps } from "../types.js";
+declare const ComboboxTrigger: import("svelte").Component<ComboboxTriggerProps, {}, "ref">;
+type ComboboxTrigger = ReturnType<typeof ComboboxTrigger>;
+export default ComboboxTrigger;

package/dist/bits/combobox/components/combobox.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
+	import type { ComboboxRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { SelectRootState } from "../../select/select.svelte.js";
+	import ListboxHiddenInput from "../../select/components/select-hidden-input.svelte";
+	import { watch } from "runed";
+
+	let {
+		value = $bindable(),
+		onValueChange = noop,
+		name = "",
+		disabled = false,
+		type,
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		loop = false,
+		scrollAlignment = "nearest",
+		required = false,
+		items = [],
+		allowDeselect = true,
+		inputValue = "",
+		children,
+	}: ComboboxRootProps = $props();
+
+	if (value === undefined) {
+		const defaultValue = type === "single" ? "" : [];
+		value = defaultValue;
+	}
+
+	watch.pre(
+		() => value,
+		() => {
+			if (value !== undefined) return;
+			value = type === "single" ? "" : [];
+		}
+	);
+
+	const rootState = SelectRootState.create({
+		type,
+		value: boxWith(
+			() => value!,
+			(v) => {
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
+			}
+		) as WritableBox<string> | WritableBox<string[]>,
+		disabled: boxWith(() => disabled),
+		required: boxWith(() => required),
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		loop: boxWith(() => loop),
+		scrollAlignment: boxWith(() => scrollAlignment),
+		name: boxWith(() => name),
+		isCombobox: true,
+		items: boxWith(() => items),
+		allowDeselect: boxWith(() => allowDeselect),
+		inputValue: boxWith(
+			() => inputValue,
+			(v) => (inputValue = v)
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+<FloatingLayer>
+	{@render children?.()}
+</FloatingLayer>
+
+{#if Array.isArray(rootState.opts.value.current)}
+	{#if rootState.opts.value.current.length}
+		{#each rootState.opts.value.current as item (item)}
+			<ListboxHiddenInput value={item} />
+		{/each}
+	{/if}
+{:else}
+	<ListboxHiddenInput bind:value={rootState.opts.value.current as string} />
+{/if}

package/dist/bits/combobox/components/combobox.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Combobox: import("svelte").Component<import("../types.js").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/bits/combobox/exports.d.ts

@@ -0,0 +1,15 @@
+export { default as Root } from "./components/combobox.svelte";
+export { default as Input } from "./components/combobox-input.svelte";
+export { default as Separator } from "../separator/components/separator.svelte";
+export { default as Arrow } from "../utilities/arrow/arrow.svelte";
+export { default as Trigger } from "./components/combobox-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "../select/components/select-content.svelte";
+export { default as ContentStatic } from "../select/components/select-content-static.svelte";
+export { default as Item } from "../select/components/select-item.svelte";
+export { default as Group } from "../select/components/select-group.svelte";
+export { default as GroupHeading } from "../select/components/select-group-heading.svelte";
+export { default as Viewport } from "../select/components/select-viewport.svelte";
+export { default as ScrollDownButton } from "../select/components/select-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "../select/components/select-scroll-up-button.svelte";
+export type { ComboboxRootProps as RootProps, ComboboxContentProps as ContentProps, ComboboxContentStaticProps as ContentStaticProps, ComboboxInputProps as InputProps, ComboboxItemProps as ItemProps, ComboboxGroupProps as GroupProps, ComboboxGroupHeadingProps as GroupHeadingProps, ComboboxPortalProps as PortalProps, ComboboxArrowProps as ArrowProps, ComboboxTriggerProps as TriggerProps, ComboboxScrollDownButtonProps as ScrollDownButtonProps, ComboboxScrollUpButtonProps as ScrollUpButtonProps, ComboboxViewportProps as ViewportProps, } from "./types.js";

package/dist/bits/combobox/exports.js

@@ -0,0 +1,14 @@
+export { default as Root } from "./components/combobox.svelte";
+export { default as Input } from "./components/combobox-input.svelte";
+export { default as Separator } from "../separator/components/separator.svelte";
+export { default as Arrow } from "../utilities/arrow/arrow.svelte";
+export { default as Trigger } from "./components/combobox-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "../select/components/select-content.svelte";
+export { default as ContentStatic } from "../select/components/select-content-static.svelte";
+export { default as Item } from "../select/components/select-item.svelte";
+export { default as Group } from "../select/components/select-group.svelte";
+export { default as GroupHeading } from "../select/components/select-group-heading.svelte";
+export { default as Viewport } from "../select/components/select-viewport.svelte";
+export { default as ScrollDownButton } from "../select/components/select-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "../select/components/select-scroll-up-button.svelte";

package/dist/bits/combobox/index.d.ts

@@ -0,0 +1 @@
+export * as Combobox from "./exports.js";

package/dist/bits/combobox/index.js

@@ -0,0 +1 @@
+export * as Combobox from "./exports.js";

package/dist/bits/combobox/types.d.ts

@@ -0,0 +1,34 @@
+import type { BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
+import type { SelectBaseRootPropsWithoutHTML, SelectMultipleRootPropsWithoutHTML, SelectSingleRootPropsWithoutHTML } from "../select/types.js";
+import type { WithChild, Without } from "../../internal/types.js";
+export type ComboboxBaseRootPropsWithoutHTML = Omit<SelectBaseRootPropsWithoutHTML, "autocomplete"> & {
+    /**
+     * A read-only value that can be used to programmatically
+     * update the input value.
+     *
+     * This is useful for updating the displayed label/input
+     * when the value changes outside of Bits UI.
+     */
+    inputValue?: string;
+};
+export type ComboboxSingleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML;
+export type ComboboxSingleRootProps = ComboboxSingleRootPropsWithoutHTML;
+export type ComboboxMultipleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML;
+export type ComboboxMultipleRootProps = ComboboxMultipleRootPropsWithoutHTML;
+export type ComboboxRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & (ComboboxSingleRootPropsWithoutHTML | ComboboxMultipleRootPropsWithoutHTML);
+export type ComboboxRootProps = ComboboxRootPropsWithoutHTML;
+export type { SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
+export type ComboboxInputPropsWithoutHTML = WithChild<{
+    /**
+     * The default value of the input. This is not a reactive prop and is only used to populate
+     * the input when the combobox is first mounted if there is already a value set.
+     */
+    defaultValue?: string;
+    /**
+     * Whether to clear the input when the last item is deselected.
+     *
+     * @default false
+     */
+    clearOnDeselect?: boolean;
+}>;
+export type ComboboxInputProps = ComboboxInputPropsWithoutHTML & Without<Omit<BitsPrimitiveInputAttributes, "value">, ComboboxInputPropsWithoutHTML>;