@keboola/design 11.9.0 → 13.0.0

package/dist/Combobox-C_MTpQ1l.js

@@ -0,0 +1,1081 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip, TooltipProvider, noop } from "./utils-Bd28bWgm.js";
+import { useArgoDesign } from "./context-U293r3v-.js";
+import { Check, ChevronDown, ChevronRight, Loader2, Minus, Plus, X } from "./icons-wcA70iQx.js";
+import { hasTruncationOverflow } from "./internal/components/Truncated.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { InputGroup } from "./InputGroup-CrlMRz4X.js";
+import { forwardAccessibleName } from "./internal/utils/accessibleName.js";
+import { Badge } from "./Badge-DIjhwPvh.js";
+import { useElement } from "./useElement-D-RjrGa4.js";
+import { Fragment, createContext, isValidElement, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { measureElement, observeElementRect, useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/Combobox/blankValues.ts
+/**
+* The two blank strings a Storage filter predicates on, in list order.
+*
+* - Hand it to `items` where the blanks are the whole list — a value field whose other entries the
+*   user types. {@link withBlankValues} is for offering them ahead of a list that already exists.
+*/
+const BLANK_VALUES = ["", " "];
+const BLANK_LABELS = {
+	"": "[empty string]",
+	" ": "[space character]"
+};
+/**
+* A string as a row or a chip shows it — named when its text is blank, itself otherwise.
+*
+* - Exported so an `itemToLabel` / `itemToChipLabel` / `itemToSelectedLabel` / `renderChips`
+*   override can keep the default naming instead of retyping the labels.
+* - The two blank values get their own labels; any other whitespace-only string (a tab, a run of
+*   spaces) falls back to a generic one, so two different ones read alike.
+* - Identity is unaffected — `toLabel` keys items off the raw string.
+*/
+const namedLabel = (text) => text.trim() === "" ? BLANK_LABELS[text] ?? "[whitespace]" : text;
+/**
+* `values` with both blank values offered ahead of them, and duplicates collapsed.
+*
+* - The dedupe matters where the list is the distinct values of a Storage column: it can already
+*   hold a blank, and two `Object.is`-equal rows both report `aria-selected` and toggle each other.
+* - First occurrence wins, so the order of the values is otherwise preserved.
+* - String items only — the seven Storage filters this serves are all string-valued.
+*/
+const withBlankValues = (values) => [.../* @__PURE__ */ new Set([...BLANK_VALUES, ...values])];
+//#endregion
+//#region src/components/Combobox/ComboboxChip.tsx
+/**
+* Keeps a chip's keyboard handling off its content's.
+*
+* - Base UI's chip `preventDefault`s Enter/Space, cancelling a nested link or button.
+* - Capture phase, so the chip's own bubble handler never runs.
+* - Target-guarded, so the chip's own keys (Backspace, Delete, arrows) still reach it.
+*/
+const stopNestedKeyDown = (event) => {
+	if (event.target !== event.currentTarget) event.stopPropagation();
+};
+/**
+* One removable chip in a `MultiCombobox`'s `renderChips` slot or `Combobox.Chips`.
+*
+* - Position is identity: Base UI removes by index, so render one per `value` entry, in order.
+* - A non-removable chip is a plain `Badge`: a chip would shift the removal index.
+* - A label cut off by the chip's width shows in full in a tooltip on hover.
+*/
+const ComboboxChip = ({ children, color, variant }) => {
+	const renderArgo = useArgoDesign();
+	const [isTruncated, setIsTruncated] = useState(false);
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		render: /* @__PURE__ */ jsx(Badge.Root, {
+			color,
+			variant: variant ?? (renderArgo ? "pill" : "default"),
+			className: "tw:max-w-40"
+		}),
+		onKeyDownCapture: stopNestedKeyDown,
+		children: [/* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip, {
+			tooltip: children,
+			forceHide: !isTruncated,
+			placement: "top",
+			triggerAsChild: true,
+			children: /* @__PURE__ */ jsx(Badge.Label, {
+				className: "tw:leading-[inherit]",
+				onMouseOver: (event) => setIsTruncated(hasTruncationOverflow(event.currentTarget)),
+				children
+			})
+		}) }), /* @__PURE__ */ jsx(Badge.Addon, {
+			variant: "inline",
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(Combobox.ChipRemove, { render: /* @__PURE__ */ jsx(Badge.Button, {
+				"aria-label": "Remove value",
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
+			}) })
+		})]
+	});
+};
+//#endregion
+//#region src/components/Combobox/utils.ts
+const isPlainObject = (item) => item !== null && typeof item === "object";
+const isNumber = (item) => typeof item === "number";
+const isString = (item) => typeof item === "string";
+const isLabeledItem = (item) => isPlainObject(item) && Reflect.has(item, "label") && Reflect.has(item, "value");
+const isInternalItem = (item) => isLabeledItem(item) && "__marker" in item;
+const isSelectAllItem = (item) => isInternalItem(item) && item.__marker === "selectAll";
+const isCreatableItem = (item) => {
+	return isInternalItem(item) && item.__marker === "creatable";
+};
+const isGroupHeaderItem = (item) => isInternalItem(item) && item.__marker === "groupHeader";
+const isGroupItem = (itemOrGroup) => itemOrGroup !== null && typeof itemOrGroup === "object" && Reflect.has(itemOrGroup, "items");
+const isGroupItems = (items) => {
+	if (!Array.isArray(items)) return false;
+	if (items.length === 0) return false;
+	return isGroupItem(items[0]);
+};
+/** The options of a list, its groups flattened. */
+const flatItems = (list) => {
+	const items = [];
+	for (const entry of list) if (!isGroupItem(entry)) items.push(entry);
+	else for (const item of entry.items) items.push(item);
+	return items;
+};
+/** The create row and Select All: each is drawn outside any group, even in a grouped list. */
+const isLooseItem = (item) => isCreatableItem(item) || isSelectAllItem(item);
+/**
+* `items` as entries of `list`: one group without a label in a grouped list, else themselves.
+*
+* - Base UI reads the first entry to tell a grouped list, so every entry has to match it.
+* - The group never reaches `groupToLabel`: {@link isEntriesGroup} tells it apart.
+*/
+const toEntries = (list, items) => isGroupItems(list) ? [{
+	__marker: "entries",
+	items
+}] : items;
+/** A group {@link toEntries} made; Base UI's filter keeps the marker, as it spreads each group. */
+const isEntriesGroup = (entry) => isGroupItem(entry) && Reflect.get(entry, "__marker") === "entries";
+/**
+* Node a list row and a chip show for an item.
+*
+* - Names a blank string, so a row or chip never renders as nothing; {@link toLabel} does not.
+* - A non-string `label` (a JSX node) passes through.
+*/
+const defaultItemToLabel = (item) => {
+	if (isNumber(item)) return item;
+	if (isString(item)) return namedLabel(item);
+	if (!isLabeledItem(item)) throw new Error("Combobox: Item does not have a `label` field. Pass `itemToLabel` for custom item shapes.");
+	return isString(item.label) ? namedLabel(item.label) : item.label;
+};
+/**
+* The node a row or a chip shows for an item when the caller passes no `itemToLabel`.
+*
+* - Names a blank `itemToStringLabel` result, which would otherwise render as nothing.
+* - Falls back to the item's own string: Base UI reports the outgoing selection for one render
+*   after `items` and `itemToStringLabel` change together.
+*/
+const defaultRowLabel = (itemToStringLabel) => itemToStringLabel ? (item) => namedLabel(itemToStringLabel(item) ?? toLabel(item)) : defaultItemToLabel;
+/**
+* Display string for an item — mirrors Base UI's default.
+*
+* - Also the default search text and the closed `Combobox`'s input value.
+* - Does not name blank strings: `''` may mean "nothing selected", and must keep the placeholder.
+* - A labelled item with neither a label nor a value reads as `''`, like the string item `''`.
+* - Naming lives in {@link defaultItemToLabel}, read only by rows and chips.
+*/
+const toLabel = (item) => {
+	if (isString(item)) return item;
+	if (isLabeledItem(item)) return item.label || item.value || "";
+	return String(item);
+};
+/** Equality key for an item — prefers `.value`. */
+const toValueKey = (item) => {
+	if (isString(item)) return item;
+	if (isLabeledItem(item)) return item.value || item.label || "";
+	return String(item);
+};
+const defaultItemToIcon = (item) => isLabeledItem(item) ? item.icon : void 0;
+const defaultItemToDisabled = (item) => isLabeledItem(item) ? item.disabled ?? false : false;
+/** A group's `label`, as `Select` renders it; one that is not a node reads as none. */
+const defaultGroupToLabel = (group) => {
+	const label = Reflect.get(group, "label");
+	return isString(label) || isNumber(label) || isValidElement(label) ? label : void 0;
+};
+const selectAllItem = {
+	__marker: "selectAll",
+	value: "__select_all__",
+	label: "Select All"
+};
+/** Row for the group at `index` — keyed by position, like its collapse state. */
+const createGroupHeaderItem = (index) => ({
+	__marker: "groupHeader",
+	value: `__group_${index}__`,
+	label: ""
+});
+const createCreatableItem = (query) => ({
+	__marker: "creatable",
+	value: query,
+	label: query
+});
+/**
+* Item-equality predicate for a Base UI combobox root.
+*
+* - A sentinel equals a sentinel by marker and value key (the create row is rebuilt per keystroke).
+* - A sentinel never equals a real item.
+* - Real items use the caller's predicate, else `Object.is`.
+*/
+const toItemEquality = (isItemEqualToValue) => (a, b) => {
+	if (isInternalItem(a) || isInternalItem(b)) return isInternalItem(a) && isInternalItem(b) && a.__marker === b.__marker && toValueKey(a) === toValueKey(b);
+	return isItemEqualToValue?.(a, b) ?? Object.is(a, b);
+};
+/**
+* {@link toItemEquality} with a stable identity.
+*
+* - Base UI lists the comparer in an effect's deps; a new one per render re-renders every row.
+*/
+const useItemEquality = (isItemEqualToValue) => useMemo(() => toItemEquality(isItemEqualToValue), [isItemEqualToValue]);
+/** `itemToStringValue` that also reads the create row, whose value is its query. */
+const withCreatableStringValue = (itemToStringValue, allowCreate) => !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
+/** {@link withCreatableStringValue} with a stable identity. */
+const useCreatableStringValue = (itemToStringValue, allowCreate) => useMemo(() => withCreatableStringValue(itemToStringValue, allowCreate), [itemToStringValue, allowCreate]);
+const defaultToCreateValue = (query, value, queryToCreateValue) => {
+	if (queryToCreateValue) return queryToCreateValue(query);
+	if (value === void 0) return query;
+	if (isString(value)) return query;
+	if (isLabeledItem(value)) return {
+		value: query,
+		label: query
+	};
+	throw new Error("Combobox: Cannot infer item shape for `allowCreate`. Pass `queryToCreateValue` for custom item shapes.");
+};
+const defaultQueryToCreateLabel = (query) => `Create "${query}"`;
+//#endregion
+//#region src/components/Combobox/ComboboxChips.tsx
+const ComboboxChips = ({ maxVisible = 3, itemToChipLabel = defaultItemToLabel, itemToChipColor, pinnedChipLabels, variant = "pill", children }) => /* @__PURE__ */ jsx(Combobox.Value, { children: (rawValues) => {
+	const values = rawValues.filter((value) => !isInternalItem(value));
+	if (children) return children(values);
+	const visible = values.slice(0, maxVisible);
+	const overflow = values.slice(maxVisible);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pinnedChipLabels?.map((label, index) => /* @__PURE__ */ jsx(Badge, {
+			className: "tw:max-w-40",
+			variant,
+			children: label
+		}, index)),
+		visible.map((value, index) => /* @__PURE__ */ jsx(ComboboxChip, {
+			color: itemToChipColor?.(value),
+			variant,
+			children: itemToChipLabel(value)
+		}, index)),
+		overflow.length > 0 && /* @__PURE__ */ jsx(Badge.Root, {
+			variant: "pill",
+			children: /* @__PURE__ */ jsxs(Badge.Label, { children: ["+", overflow.length] })
+		})
+	] });
+} });
+//#endregion
+//#region src/components/Combobox/ComboboxClearButton.tsx
+/** The button that clears the selection. */
+const ComboboxClearButton = ({ disabled }) => /* @__PURE__ */ jsx(InputGroup.Button, {
+	asChild: true,
+	"aria-label": "Clear",
+	disabled,
+	children: /* @__PURE__ */ jsx(Combobox.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) })
+});
+//#endregion
+//#region src/components/Combobox/ComboboxContent.tsx
+const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4, alignOffset, anchor, container, className, children, ...popupProps }) => {
+	const effectiveVariant = useArgoDesign() ? "argo" : "default";
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(DismissableLayer, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				align,
+				side,
+				sideOffset,
+				alignOffset,
+				anchor,
+				className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
+				children: /* @__PURE__ */ jsx(Combobox.Popup, {
+					ref,
+					"data-chips": !!anchor,
+					"data-variant": effectiveVariant,
+					className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:data-[variant=default]:rounded", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
+					...popupProps,
+					children
+				})
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/Combobox/ComboboxEmpty.tsx
+const ComboboxEmpty = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.Empty, {
+	ref,
+	className: cn("tw:hidden", "tw:group-data-[empty]/combobox-content:flex", "tw:justify-center", "tw:items-center", "tw:text-center", "tw:px-2", "tw:text-muted-foreground", "tw:py-6", className),
+	...props
+});
+//#endregion
+//#region src/components/Combobox/ComboboxInput.tsx
+const ComboboxInput = ({ ref, ...props }) => /* @__PURE__ */ jsx(Combobox.Input, {
+	...props,
+	ref,
+	render: /* @__PURE__ */ jsx(InputGroup.Input, {})
+});
+//#endregion
+//#region src/components/Combobox/ComboboxInputGroup.tsx
+const ComboboxInputGroup = ({ ref, state, variant, sizing, focusVariant, className, ...props }) => /* @__PURE__ */ jsx(Combobox.InputGroup, {
+	...props,
+	ref,
+	render: /* @__PURE__ */ jsx(InputGroup, {
+		state,
+		variant,
+		focusVariant,
+		sizing,
+		className
+	})
+});
+//#endregion
+//#region src/components/Combobox/ComboboxItemIndicator.tsx
+const ComboboxItemIndicator = ({ ref, className, variant = "check", ...props }) => {
+	if (variant === "checkbox") return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		ref,
+		keepMounted: true,
+		className: cn("tw:group/combobox-item-indicator", "tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:size-4", "tw:shrink-0", "tw:rounded", "tw:border", "tw:border-input", "tw:bg-background", "tw:data-[selected]:bg-primary", "tw:data-[selected]:border-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Check, { className: cn("tw:hidden", "tw:size-3", "tw:stroke-[4px]", "tw:!text-primary-foreground", "tw:group-data-[selected]/combobox-item-indicator:block") })
+	});
+	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		...props,
+		ref,
+		className: cn("tw:pointer-events-none", "tw:absolute", "tw:right-2", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground", className),
+		render: /* @__PURE__ */ jsx(Check, {})
+	});
+};
+//#endregion
+//#region src/components/Combobox/virtualList.ts
+/** Above this many options, `virtualized="auto"` windows the list. */
+const VIRTUALIZE_THRESHOLD = 30;
+/**
+* The position a windowed list gives each option it renders.
+*
+* - `index` is the option's place in Base UI's flat filtered list, which keyboard navigation counts.
+* - `aria-setsize` / `aria-posinset` keep the set's length known while most options are out of the DOM.
+* - `undefined` outside a windowed list, so a fully rendered list keeps its markup.
+*/
+const VirtualRowContext = createContext(void 0);
+/**
+* Whether a combobox windows its list, and what ties Base UI's highlight to the window.
+*
+* - `'auto'` counts options, not groups, so a list of a few large groups windows too.
+* - `onItemHighlighted` scrolls a row the keyboard reached into view; a pointer is over its row.
+* - `ref` goes to `ComboboxVirtualList`.
+*/
+const useVirtualList = (items, virtualized) => {
+	const ref = useRef(null);
+	const count = isGroupItems(items) ? items.reduce((sum, group) => sum + group.items.length, 0) : items.length;
+	return {
+		enabled: virtualized === "auto" ? count > VIRTUALIZE_THRESHOLD : virtualized,
+		ref,
+		onItemHighlighted: ({ reason, index }) => {
+			if (reason !== "pointer") ref.current?.scrollToItem(index);
+		}
+	};
+};
+//#endregion
+//#region src/components/Combobox/ComboboxItem.tsx
+const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "check", ...props }) => /* @__PURE__ */ jsxs(Combobox.Item, {
+	...props,
+	...use(VirtualRowContext),
+	ref,
+	"data-slot": "combobox-item",
+	className: cn("tw:group/combobox-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/combobox-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/combobox-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:data-[highlighted]:bg-accent", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-secondary-foreground", "tw:data-disabled:pointer-events-none", "tw:data-disabled:opacity-50", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='size-'])]:size-4", className),
+	children: [
+		variant !== "none" && /* @__PURE__ */ jsx(ComboboxItemIndicator, { variant }),
+		icon,
+		/* @__PURE__ */ jsx("span", {
+			className: "tw:min-w-0 tw:wrap-anywhere",
+			children
+		})
+	]
+});
+//#endregion
+//#region src/components/Combobox/ComboboxList.tsx
+const ComboboxList = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.List, {
+	ref,
+	className: cn("tw:no-scrollbar", "tw:scroll-py-1", "tw:overflow-y-auto", "tw:overscroll-contain", "tw:min-h-0", "tw:flex-1", "tw:p-2", "tw:data-[empty]:p-0", "tw:group-data-[variant=default]/combobox-content:p-0", className),
+	...props
+});
+//#endregion
+//#region src/components/Combobox/ComboboxOpenButton.tsx
+/**
+* The button that opens the popup: a chevron, or a spinner while the options are loading.
+*
+* - The spinner swaps in for the icon inside the one button, which costs the control no width, so
+*   the input keeps its room whether or not a request is in flight.
+* - The button keeps opening the popup while loading, so a list that already has items stays
+*   reachable.
+*/
+const ComboboxOpenButton = ({ disabled, isLoading }) => /* @__PURE__ */ jsx(InputGroup.Button, {
+	disabled,
+	asChild: true,
+	"aria-label": "Open combobox",
+	children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
+});
+//#endregion
+//#region src/components/Combobox/Group/ComboboxGroupHeader.tsx
+/** Indent of a header's children (chevron + gap); the legacy variant pads its rows wider. */
+const GROUP_CHILD_INDENT = "tw:pl-8 tw:group-data-[variant=default]/combobox-content:pl-10";
+/**
+* A group's own row, standing for the whole group.
+*
+* - Keyboard-navigable like any other row.
+* - The chevron toggles by pointer; `ArrowRight` / `ArrowLeft` are handled by the owning control.
+*/
+const ComboboxGroupHeader = ({ value, children, expanded, onToggle, checked, indicator = "check", disabled }) => {
+	const toggleFromChevron = (event) => {
+		event.stopPropagation();
+		onToggle();
+	};
+	return /* @__PURE__ */ jsx(ComboboxItem, {
+		value,
+		disabled,
+		"aria-description": expanded === void 0 ? void 0 : expanded ? "Expanded" : "Collapsed",
+		...checked !== void 0 && { "aria-selected": checked === true },
+		indicator: "none",
+		className: "tw:font-medium",
+		onClick: checked !== void 0 ? void 0 : (event) => {
+			event.preventBaseUIHandler();
+			onToggle();
+		},
+		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [expanded !== void 0 && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-slot": "combobox-group-toggle",
+			className: "tw:inline-flex tw:shrink-0",
+			onClick: toggleFromChevron,
+			children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:transition-transform", expanded && "tw:rotate-90") })
+		}), checked !== void 0 && /* @__PURE__ */ jsx(GroupIndicator, {
+			checked,
+			variant: indicator
+		})] }),
+		children
+	});
+};
+/**
+* A group row's selection mark: all, some, or none.
+*
+* - Base UI's indicator is binary, so the row draws its own.
+* - `checkbox` matches the children's leading box; `check` their trailing mark.
+*/
+const GroupIndicator = ({ checked, variant }) => {
+	const Mark = checked === "mixed" ? Minus : Check;
+	if (variant === "checkbox") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-checked": checked,
+		className: cn("tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center", "tw:rounded tw:border tw:border-input tw:bg-background", checked !== false && "tw:border-primary tw:bg-primary"),
+		children: checked !== false && /* @__PURE__ */ jsx(Mark, { className: "tw:size-3 tw:stroke-[4px] tw:!text-primary-foreground" })
+	});
+	if (checked === false) return null;
+	return /* @__PURE__ */ jsx(Mark, {
+		"aria-hidden": true,
+		className: cn("tw:pointer-events-none tw:absolute tw:right-2 tw:size-4", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:group-data-[highlighted]/combobox-item:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground")
+	});
+};
+//#endregion
+//#region src/components/Combobox/Group/ComboboxGroup.tsx
+const ComboboxGroup = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(Combobox.Group, {
+	ref,
+	className: cn("tw:flex tw:flex-col tw:gap-0.5", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/components/Combobox/Group/ComboboxGroupLabel.tsx
+const ComboboxGroupLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+	...props,
+	ref,
+	className: cn("tw:px-2", "tw:py-1.5", "tw:text-xs", "tw:font-medium", "tw:leading-none", "tw:text-muted-foreground", "tw:group-data-[variant=default]/combobox-content:uppercase", "tw:group-data-[variant=default]/combobox-content:font-semibold", "tw:group-data-[variant=default]/combobox-content:tracking-wider", "tw:group-data-[variant=default]/combobox-content:text-[11px]", "tw:group-data-[variant=default]/combobox-content:text-black", "tw:group-data-[variant=default]/combobox-content:pt-2", "tw:group-data-[variant=default]/combobox-content:px-4", className)
+});
+//#endregion
+//#region src/components/Combobox/Group/ComboboxCollection.tsx
+const ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsx(Combobox.Collection, {
+	"data-slot": "combobox-collection",
+	...props
+});
+//#endregion
+//#region src/components/Combobox/ComboboxFullList.tsx
+/** A Base UI collection child whose rows are keyed by position, as React matches unkeyed ones. */
+const keyed = (render) => (entry, index) => /* @__PURE__ */ jsx(Fragment, { children: render(entry) }, index);
+/** A combobox list that renders every row; `ComboboxVirtualList` renders only those in view. */
+const ComboboxFullList = ({ renderItem, renderGroupItem, groupToLabel }) => {
+	const renderEntry = (entry) => {
+		if (!isGroupItem(entry)) return renderItem(entry);
+		const [lead] = entry.items;
+		if (isLooseItem(lead)) return renderItem(lead);
+		const label = groupToLabel?.(entry);
+		return /* @__PURE__ */ jsxs(ComboboxGroup, {
+			items: entry.items,
+			children: [label && /* @__PURE__ */ jsx(ComboboxGroupLabel, { children: label }), /* @__PURE__ */ jsx(ComboboxCollection, { children: keyed(renderGroupItem) })]
+		});
+	};
+	return /* @__PURE__ */ jsx(ComboboxList, { children: keyed(renderEntry) });
+};
+//#endregion
+//#region src/components/Combobox/ComboboxLoadingEmpty.tsx
+/**
+* What the empty slot says while the options are loading, in place of the `empty` node.
+*
+* - `Combobox.Empty` is a polite live region, so the switch to this text and back to `empty` once
+*   the request settles is announced.
+* - Base UI renders the slot only while the list has nothing to show, so a list that already has
+*   items keeps showing them.
+*/
+const ComboboxLoadingEmpty = () => /* @__PURE__ */ jsxs("span", {
+	className: "tw:inline-flex tw:items-center tw:gap-2",
+	children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin" }), "Loading…"]
+});
+//#endregion
+//#region src/components/Combobox/ComboboxVirtualList.tsx
+/** Rows rendered past each edge of the viewport, so a fast scroll does not paint blank. */
+const OVERSCAN = 12;
+const kindOf = (row) => row.type === "label" ? "label" : row.padded ? "padded" : "plain";
+/**
+* Base UI's filtered entries as one row per option or group label, in list order.
+*
+* - A group whose lone item is the create row or Select All stays outside any group, as the fully
+*   rendered list draws it.
+* - `aria-setsize` counts the options sharing a parent, as a browser does for a rendered list.
+*/
+const toRows = (entries, groupToLabel) => {
+	const rows = [];
+	const rowOfItem = [];
+	const labels = /* @__PURE__ */ new Map();
+	const push = (item, row) => {
+		rows.push({
+			type: "item",
+			item,
+			index: rowOfItem.length,
+			...row
+		});
+		rowOfItem.push(rows.length - 1);
+	};
+	if (!isGroupItems(entries)) {
+		const items = entries.filter((entry) => !isGroupItem(entry));
+		items.forEach((item, i) => push(item, {
+			padded: false,
+			setSize: items.length,
+			posInSet: i + 1
+		}));
+		return {
+			rows,
+			rowOfItem,
+			labels
+		};
+	}
+	const isLoose = (group) => isLooseItem(group.items[0]);
+	const looseCount = entries.filter(isLoose).length;
+	let loosePosition = 0;
+	entries.forEach((entry, groupIndex) => {
+		if (isLoose(entry)) {
+			for (const item of entry.items) push(item, {
+				padded: false,
+				setSize: looseCount,
+				posInSet: ++loosePosition
+			});
+			return;
+		}
+		const group = `group-${groupIndex}`;
+		const label = groupToLabel?.(entry);
+		if (label) {
+			labels.set(group, label);
+			rows.push({
+				type: "label",
+				group,
+				padded: false
+			});
+		}
+		entry.items.forEach((item, i) => push(item, {
+			group,
+			padded: Boolean(label) || i > 0,
+			setSize: entry.items.length,
+			posInSet: i + 1
+		}));
+	});
+	return {
+		rows,
+		rowOfItem,
+		labels
+	};
+};
+/**
+* A combobox list that puts only the rows in view into the DOM.
+*
+* - Lists what Base UI filtered, so search and keyboard navigation cover every option.
+* - A group keeps its `role="group"` wrapper, and its name while its label row is out of view.
+* - Rows keep their own height; a row not yet rendered is estimated from those that were.
+*/
+const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref }) => {
+	const [listElement, attachList] = useElement();
+	const scrollMargin = useMemo(() => listElement ? Number.parseFloat(getComputedStyle(listElement).paddingTop) || 0 : 0, [listElement]);
+	const filteredItems = Combobox.useFilteredItems();
+	const { rows, rowOfItem, labels } = useMemo(() => toRows(filteredItems, groupToLabel), [filteredItems, groupToLabel]);
+	const sizesRef = useRef({});
+	const [rem] = useState(() => Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 0);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => listElement,
+		estimateSize: (index) => {
+			const row = rows[index];
+			const measured = sizesRef.current;
+			return (row && measured[kindOf(row)]) ?? measured.plain ?? measured.padded ?? rem;
+		},
+		measureElement: (element, entry, instance) => {
+			const size = measureElement(element, entry, instance);
+			const row = rows[instance.indexFromElement(element)];
+			if (row) {
+				const kind = kindOf(row);
+				sizesRef.current[kind] = Math.min(sizesRef.current[kind] ?? size, size);
+			}
+			return size;
+		},
+		observeElementRect: (instance, callback) => observeElementRect(instance, (rect) => callback({
+			...rect,
+			height: Math.min(rect.height, instance.targetWindow?.innerHeight ?? rect.height)
+		})),
+		overscan: OVERSCAN,
+		scrollMargin
+	});
+	useImperativeHandle(ref, () => ({ scrollToItem: (index) => {
+		const row = rowOfItem[index];
+		if (row !== void 0) virtualizer.scrollToIndex(row, { align: "auto" });
+	} }));
+	const segments = [];
+	for (const virtualItem of virtualizer.getVirtualItems()) {
+		const group = rows[virtualItem.index]?.group;
+		const last = segments.at(-1);
+		if (group !== void 0 && last?.group === group) last.items.push(virtualItem);
+		else segments.push({
+			group,
+			start: virtualItem.start,
+			items: [virtualItem]
+		});
+	}
+	const placeAt = (start) => ({
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		transform: `translateY(${start - scrollMargin}px)`
+	});
+	const renderRow = ({ key, index, start }) => {
+		const row = rows[index];
+		if (!row) return null;
+		return /* @__PURE__ */ jsx("div", {
+			"data-index": index,
+			ref: virtualizer.measureElement,
+			className: row.padded ? "tw:pt-0.5" : void 0,
+			style: row.group === void 0 ? placeAt(start) : void 0,
+			children: row.type === "label" ? /* @__PURE__ */ jsx(ComboboxGroupLabel, { children: labels.get(row.group ?? "") }) : /* @__PURE__ */ jsx(VirtualRowContext, {
+				value: {
+					index: row.index,
+					"aria-setsize": row.setSize,
+					"aria-posinset": row.posInSet
+				},
+				children: row.group === void 0 ? renderItem(row.item) : renderGroupItem(row.item)
+			})
+		}, key);
+	};
+	return /* @__PURE__ */ jsx(ComboboxList, {
+		ref: attachList,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "relative",
+				width: "100%",
+				height: `${virtualizer.getTotalSize()}px`
+			},
+			children: segments.flatMap(({ group, start, items }) => {
+				if (group === void 0) return items.map(renderRow);
+				const label = labels.get(group);
+				const labelInView = items.some((item) => rows[item.index]?.type === "label");
+				return /* @__PURE__ */ jsxs(ComboboxGroup, {
+					className: "tw:gap-0",
+					style: placeAt(start),
+					children: [label && !labelInView && /* @__PURE__ */ jsx(ComboboxGroupLabel, {
+						className: "tw:sr-only",
+						children: label
+					}), items.map(renderRow)]
+				}, group);
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/Combobox/ComboboxOptions.tsx
+/**
+* What a combobox popup lists: every row, the empty slot, and the loading text in it.
+*
+* - The list is windowed while `virtualized`, fully rendered otherwise.
+*/
+const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders, groupToLabel, indicator, itemToLabel, itemToIcon, itemToDisabled, createLabel, groupRowState }) => {
+	const renderItem = (item, className) => {
+		if (isSelectAllItem(item)) return /* @__PURE__ */ jsx(ComboboxItem, {
+			value: item,
+			indicator: "checkbox",
+			children: item.label
+		});
+		if (isCreatableItem(item)) return /* @__PURE__ */ jsx(ComboboxItem, {
+			value: item,
+			icon: /* @__PURE__ */ jsx(Plus, {}),
+			children: createLabel(item.value)
+		});
+		return /* @__PURE__ */ jsx(ComboboxItem, {
+			value: item,
+			indicator,
+			icon: itemToIcon(item),
+			disabled: itemToDisabled(item),
+			className,
+			children: itemToLabel(item)
+		});
+	};
+	const renderGroupItem = (item) => {
+		const header = groupHeaders.headerOf(item);
+		if (!header) return renderItem(item, groupHeaders.collapsible ? GROUP_CHILD_INDENT : void 0);
+		const state = groupRowState?.(item);
+		return /* @__PURE__ */ jsx(ComboboxGroupHeader, {
+			value: item,
+			expanded: groupHeaders.collapsible ? !header.collapsed : void 0,
+			onToggle: () => groupHeaders.toggle(header.index),
+			checked: state?.checked,
+			indicator,
+			disabled: state?.disabled ?? false,
+			children: groupToLabel(header.group)
+		});
+	};
+	const labelOfGroup = useCallback((group) => isEntriesGroup(group) ? void 0 : groupToLabel(group), [groupToLabel]);
+	const listProps = {
+		renderItem,
+		renderGroupItem,
+		groupToLabel: groupHeaders.enabled ? void 0 : labelOfGroup
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: isLoading ? /* @__PURE__ */ jsx(ComboboxLoadingEmpty, {}) : empty }), virtualized ? /* @__PURE__ */ jsx(ComboboxVirtualList, {
+		ref: listRef,
+		...listProps
+	}) : /* @__PURE__ */ jsx(ComboboxFullList, { ...listProps })] });
+};
+//#endregion
+//#region src/components/Combobox/ComboboxRoot.tsx
+const ComboboxRoot = (props) => /* @__PURE__ */ jsx(Combobox.Root, { ...props });
+//#endregion
+//#region src/components/Combobox/ComboboxSeparator.tsx
+const ComboboxSeparator = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.Separator, {
+	ref,
+	className: cn("tw:mx-2 tw:my-1 tw:h-px tw:bg-border", className),
+	...props
+});
+//#endregion
+//#region src/components/Combobox/createdItems.ts
+/**
+* `list` followed by the values `allowCreate` minted, as entries of it; stable while both are.
+*
+* - Listed so a created value stays pickable: Base UI drops a value missing from `items`.
+*/
+const useWithCreated = (list, created) => useMemo(() => created.length === 0 ? list : [...list, ...toEntries(list, created)], [list, created]);
+//#endregion
+//#region src/components/Combobox/groupHeaders.ts
+/**
+* Gives each group a row (rendered with `ComboboxGroupHeader`) and collapses groups on request.
+*
+* - The row is the group's first item, so Base UI navigates, filters and presses it.
+* - A collapsed group hands Base UI only its row: Base UI never filters an empty query.
+* - A query shows every match regardless of collapse; a row shows only while its group matches.
+* - Collapse state is keyed by a group's position in `items`.
+*/
+const useGroupHeaders = ({ items, collapsible, selectable, query, matches, groupToValue, isItemEqualToValue }) => {
+	const [collapsedIndexes, setCollapsedIndexes] = useState(() => /* @__PURE__ */ new Set());
+	const highlightedRef = useRef(void 0);
+	const enabled = (collapsible || selectable) && isGroupItems(items);
+	const headers = /* @__PURE__ */ new Map();
+	const listItems = !enabled ? items : items.map((group, index) => {
+		const collapsed = collapsible && query === "" && collapsedIndexes.has(index);
+		const matching = query === "" ? group.items : group.items.filter(matches);
+		const row = groupToValue ? groupToValue(group) : createGroupHeaderItem(index);
+		headers.set(row, {
+			group,
+			index,
+			collapsed,
+			matching
+		});
+		return {
+			...group,
+			items: collapsed ? [row] : [row, ...group.items]
+		};
+	});
+	const toggle = (index) => setCollapsedIndexes((prev) => {
+		const next = new Set(prev);
+		if (!next.delete(index)) next.add(index);
+		return next;
+	});
+	const headerOf = (item) => headers.get(item);
+	const highlightedHeader = () => {
+		const item = highlightedRef.current;
+		if (item === void 0) return void 0;
+		const header = headers.get(item);
+		if (header) return header;
+		for (const [row, entry] of headers) if (isItemEqualToValue(row, item)) return entry;
+	};
+	return {
+		enabled,
+		/** `items` with group rows added and collapsed groups' items removed. */
+		items: listItems,
+		collapsible,
+		headerOf,
+		toggle,
+		/** `filter` verdict for a group row (matches while its group does); `undefined` otherwise. */
+		filterHeader: (item) => {
+			const header = headerOf(item);
+			return header ? header.matching.length > 0 : void 0;
+		},
+		/** For the root's `onItemHighlighted`: which row the keyboard would toggle. */
+		onItemHighlighted: (item) => {
+			highlightedRef.current = item;
+		},
+		/** For the root's `onOpenChange`: a closed popup has no highlighted row to toggle. */
+		onOpenChange: (open) => {
+			if (!open) highlightedRef.current = void 0;
+		},
+		/**
+		* For the input's `onKeyDown`: `ArrowRight` / `ArrowLeft` expand / collapse the highlighted row.
+		* Only without a query; also stops Base UI moving to the chips.
+		*/
+		onInputKeyDown: (event) => {
+			if (!collapsible || query !== "") return;
+			if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+			const header = highlightedHeader();
+			if (!header) return;
+			event.preventDefault();
+			event.preventBaseUIHandler();
+			if (header.collapsed === (event.key === "ArrowRight")) toggle(header.index);
+		}
+	};
+};
+//#endregion
+//#region src/components/Combobox/query.ts
+/**
+* The text a combobox's input takes, with `inputValueSanitizer` applied to what the user typed.
+*
+* - `input-change` is the only reason carrying typed text. Every other one carries text the
+*   control itself put there — an item's label, or the empty string a clear leaves — which a
+*   sanitizer aimed at typed characters would mangle.
+* - A sanitizer sees the whole text on every keystroke, so it has to rewrite rather than drop:
+*   one calling `trim()` swallows the space before the next word.
+*/
+const sanitizeTypedInput = (next, reason, sanitizer) => reason === "input-change" ? sanitizer?.(next) ?? next : next;
+/**
+* Reports the query the list filters by to the control's owner.
+*
+* - Fires from an effect rather than the input handler because `query` is derived: in `Combobox`
+*   a selection showing its own label empties it without a keystroke, so the handler never sees
+*   every value it takes.
+* - The mount render reports too, so an owner fetching on the query needs no first fetch of its
+*   own.
+*/
+const useQueryReporter = (query, onQueryChange) => {
+	const report = useStableCallback(onQueryChange ?? noop);
+	useEffect(() => {
+		report(query);
+	}, [query, report]);
+};
+//#endregion
+//#region src/components/Combobox/Combobox.tsx
+const acceptAll = () => true;
+const NO_ITEMS = [];
+const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear = true, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, empty = "No items", isLoading = false, indicator, prefix, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel: itemToLabelProp, itemToIcon = defaultItemToIcon, itemToSelectedLabel, groupToLabel = defaultGroupToLabel, collapsibleGroups = false, groupToValue, ...accessibleName }) => {
+	/** An item's string identity: input text, default search subject, accessible value. */
+	const labelOf = useCallback((item) => itemToStringLabelProp?.(item) ?? toLabel(item), [itemToStringLabelProp]);
+	const itemToLabel = itemToLabelProp ?? defaultRowLabel(itemToStringLabelProp);
+	const [typedText, setTypedText] = useState(null);
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? null);
+	const selectedItem = value !== void 0 ? value : uncontrolledValue;
+	const selectedLabel = selectedItem == null ? null : labelOf(selectedItem);
+	const isShowingSelection = selectedLabel !== null && (typedText === null || typedText === selectedLabel);
+	const inputValue = typedText ?? selectedLabel ?? "";
+	const selectedNode = itemToSelectedLabel && selectedItem != null && isShowingSelection ? itemToSelectedLabel(selectedItem) : null;
+	const query = (isShowingSelection ? "" : typedText ?? "").trim();
+	const queryLower = query.toLowerCase();
+	useQueryReporter(query, onQueryChange);
+	const busy = isLoading || void 0;
+	const itemsProp = _itemsProp ?? NO_ITEMS;
+	const sampleItem = flatItems(itemsProp)[0];
+	const isItemEqualToValue = useItemEquality(isItemEqualToValueProp);
+	const [createdItems, setCreatedItems] = useState([]);
+	const [createdItem] = createdItems;
+	const itemsHoldCreated = useMemo(() => createdItem !== void 0 && flatItems(itemsProp).some((listed) => isItemEqualToValue(listed, createdItem)), [
+		createdItem,
+		itemsProp,
+		isItemEqualToValue
+	]);
+	const created = createdItem !== void 0 && !itemsHoldCreated && selectedItem != null && isItemEqualToValue(createdItem, selectedItem) ? createdItems : NO_ITEMS;
+	const itemToStringLabel = useCallback((value) => {
+		if (isCreatableItem(value)) return value.value;
+		if (isGroupHeaderItem(value)) return value.label;
+		return labelOf(value);
+	}, [labelOf]);
+	const { contains } = Combobox.useFilter();
+	const itemFilter = filter ?? contains;
+	const groupHeaders = useGroupHeaders({
+		items: itemsProp,
+		collapsible: collapsibleGroups,
+		selectable: groupToValue !== void 0,
+		query,
+		matches: (item) => itemFilter(item, query, itemToStringLabel),
+		groupToValue,
+		isItemEqualToValue
+	});
+	const allItems = useWithCreated(itemsProp, created);
+	const listItems = useWithCreated(groupHeaders.items, created);
+	const showCreateRow = (() => {
+		if (!allowCreate || disabled || !query) return false;
+		return !flatItems(allItems).some((item) => labelOf(item).toLowerCase() === queryLower) && (!canCreate || canCreate(query));
+	})();
+	const items = useMemo(() => showCreateRow ? [...listItems, ...toEntries(listItems, [createCreatableItem(query)])] : listItems, [
+		showCreateRow,
+		listItems,
+		query
+	]);
+	const filterHeader = groupHeaders.enabled ? groupHeaders.filterHeader : void 0;
+	const queryFilter = useMemo(() => {
+		if (filterHeader) return (item, query, itemToString) => filterHeader(item) ?? (isCreatableItem(item) || itemFilter(item, query, itemToString));
+		if (!allowCreate || !filter) return filter;
+		return (item, query, itemToString) => isCreatableItem(item) || filter(item, query, itemToString);
+	}, [
+		filterHeader,
+		allowCreate,
+		filter,
+		itemFilter
+	]);
+	const wrappedFilter = isShowingSelection ? acceptAll : queryFilter;
+	const wrappedItemToStringValue = useCreatableStringValue(itemToStringValue, allowCreate);
+	const handleInputValueChange = (next, { reason }) => {
+		if (reason !== "input-change") {
+			setTypedText(null);
+			return;
+		}
+		const typed = inputValueSanitizer?.(next) ?? next;
+		setTypedText(typed === "" || typed.trim() !== "" ? typed : null);
+	};
+	const handleOpenChange = (open) => {
+		if (!open) setTypedText(null);
+		groupHeaders.onOpenChange(open);
+	};
+	const handleOnValueChange = (next, event) => {
+		if (isCreatableItem(next)) {
+			const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue);
+			setCreatedItems([newValue]);
+			setUncontrolledValue(newValue);
+			onValueChange?.(newValue, event);
+			return;
+		}
+		setUncontrolledValue(next);
+		onValueChange?.(next, event);
+	};
+	const virtualList = useVirtualList(allItems, virtualized);
+	const comboboxInput = /* @__PURE__ */ jsx(ComboboxInput, {
+		...forwardAccessibleName(accessibleName),
+		name,
+		onBlur,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		"aria-required": ariaRequired,
+		"aria-busy": busy,
+		placeholder,
+		disabled,
+		onKeyDown: groupHeaders.onInputKeyDown,
+		className: cn(selectedNode != null && "tw:text-transparent tw:caret-foreground tw:selection:bg-transparent")
+	});
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		items,
+		autoHighlight: true,
+		value,
+		defaultValue,
+		filter: wrappedFilter,
+		onValueChange: handleOnValueChange,
+		itemToStringLabel,
+		isItemEqualToValue,
+		itemToStringValue: wrappedItemToStringValue,
+		onOpenChange: handleOpenChange,
+		onOpenChangeComplete,
+		disabled,
+		inputRef,
+		inputValue,
+		onInputValueChange: handleInputValueChange,
+		virtualized: virtualList.enabled,
+		onItemHighlighted: (item, details) => {
+			groupHeaders.onItemHighlighted(item);
+			virtualList.onItemHighlighted(details);
+		},
+		children: [/* @__PURE__ */ jsxs(ComboboxInputGroup, {
+			variant,
+			sizing,
+			state,
+			focusVariant,
+			className,
+			children: [itemToSelectedLabel != null ? /* @__PURE__ */ jsxs("div", {
+				className: "tw:relative tw:flex tw:min-w-0 tw:flex-1",
+				children: [(prefix != null || selectedNode != null) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
+					align: "inline-start",
+					className: cn(selectedNode != null && "tw:pointer-events-none tw:absolute tw:inset-y-0 tw:left-0 tw:max-w-full tw:overflow-hidden"),
+					children: [prefix, selectedNode]
+				}), comboboxInput]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [prefix != null && /* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-start",
+				children: prefix
+			}), comboboxInput] }), /* @__PURE__ */ jsxs(InputGroup.Addon, {
+				align: "inline-end",
+				children: [allowClear && /* @__PURE__ */ jsx(ComboboxClearButton, { disabled }), /* @__PURE__ */ jsx(ComboboxOpenButton, {
+					disabled,
+					isLoading
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(ComboboxContent, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+			isLoading,
+			empty,
+			virtualized: virtualList.enabled,
+			listRef: virtualList.ref,
+			groupHeaders,
+			groupToLabel,
+			indicator,
+			itemToLabel: (item) => itemToLabel(item, query),
+			itemToIcon,
+			itemToDisabled,
+			createLabel: queryToCreateLabel,
+			groupRowState: groupToValue ? (row) => ({
+				checked: selectedItem != null && isItemEqualToValue(row, selectedItem),
+				disabled: itemToDisabled(row)
+			}) : void 0
+		}) })]
+	});
+};
+Combobox$1.Root = ComboboxRoot;
+Combobox$1.InputGroup = ComboboxInputGroup;
+Combobox$1.Input = ComboboxInput;
+Combobox$1.Content = ComboboxContent;
+Combobox$1.List = ComboboxList;
+Combobox$1.Item = ComboboxItem;
+Combobox$1.Empty = ComboboxEmpty;
+Combobox$1.Value = Combobox.Value;
+Combobox$1.Separator = ComboboxSeparator;
+Combobox$1.Group = ComboboxGroup;
+Combobox$1.GroupLabel = ComboboxGroupLabel;
+Combobox$1.GroupList = ComboboxCollection;
+Combobox$1.Chips = ComboboxChips;
+Combobox$1.Chip = ComboboxChip;
+//#endregion
+//#region src/components/Combobox/matchByWords.ts
+const toWords = (query) => query.toLowerCase().split(/\s+/).filter(Boolean);
+const isFilled = (text) => text !== null && text !== void 0 && text !== "";
+const isTextList = (texts) => Array.isArray(texts);
+/**
+* Whether every word of `query` occurs in some of `texts`, ignoring case.
+*
+* - Words match by containment, across texts, in any order; an empty query matches everything.
+* - Plain lowercased `includes`, not `Intl.Collator`: `Muller` does not find `Müller`.
+* - Not interchangeable with kbc-ui's own `matchByWords` (single-space split, keeps empty texts).
+* - A `filter` for when the searchable text is not the label; else use {@link filterByWords}.
+*/
+const matchByWords = (texts, query) => {
+	const words = toWords(query);
+	if (words.length === 0) return true;
+	const haystacks = (isTextList(texts) ? texts : [texts]).filter(isFilled).map((text) => String(text).toLowerCase());
+	return words.every((word) => haystacks.some((haystack) => haystack.includes(word)));
+};
+/**
+* `filter` matching the item's displayed label word by word: `filter={filterByWords}`.
+*
+* - Generic, so it keeps the combobox's item type inference.
+* - Label: `itemToStringLabel` if passed, else the item's `label`, `value`, or string form.
+* - Only the label is searched, by design: never match what the user cannot see.
+* - Close over {@link matchByWords} to search other fields.
+*/
+const filterByWords = (item, query, itemToString) => matchByWords(itemToString?.(item) ?? toLabel(item), query);
+//#endregion
+export { BLANK_VALUES, Combobox$1 as Combobox, ComboboxClearButton, ComboboxOpenButton, ComboboxOptions, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultQueryToCreateLabel, defaultRowLabel, defaultToCreateValue, filterByWords, flatItems, isCreatableItem, isGroupHeaderItem, isSelectAllItem, matchByWords, namedLabel, sanitizeTypedInput, selectAllItem, toEntries, toLabel, useCreatableStringValue, useGroupHeaders, useItemEquality, useQueryReporter, useVirtualList, useWithCreated, withBlankValues };
+
+//# sourceMappingURL=Combobox-C_MTpQ1l.js.map