@verbb/plugin-kit-react 1.0.0

package/dist/components/Combobox.js

@@ -0,0 +1,393 @@
+import { cn } from "../utils/classes.js";
+import { getPortalClassName, getPortalContainer } from "../utils/portal.js";
+import "../utils/index.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./InputGroup.js";
+import "./index.js";
+import { Button } from "./Button.js";
+import { createContext, useContext, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faChevronDown, faXmark } from "@fortawesome/pro-solid-svg-icons";
+import { Combobox as Combobox$1 } from "@base-ui/react";
+//#region src/components/Combobox.tsx
+var comboboxItemVariants = cva([
+	"relative flex w-full cursor-default items-center outline-hidden select-none",
+	"gap-1.5",
+	"focus:bg-slate-100 data-[highlighted]:bg-slate-100",
+	"data-disabled:pointer-events-none data-disabled:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+], {
+	variants: {
+		size: {
+			xs: "px-2 py-1 pr-7 text-[11px] [&_svg:not([class*=\"size-\"])]:size-3",
+			sm: "px-2.5 py-1.5 pr-7 text-[12px] [&_svg:not([class*=\"size-\"])]:size-3",
+			default: "px-[10px] py-[6px] pr-8 text-[14px] [&_svg:not([class*=\"size-\"])]:size-3",
+			lg: "px-3 py-2 pr-8 text-sm [&_svg:not([class*=\"size-\"])]:size-3",
+			xl: "px-3.5 py-2.5 pr-9 text-sm [&_svg:not([class*=\"size-\"])]:size-3"
+		},
+		variant: {
+			default: "",
+			destructive: "text-error"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	}
+});
+var comboboxItemIndicatorVariants = cva("", {
+	variants: { size: {
+		xs: "right-2 size-3",
+		sm: "right-2.5 size-3",
+		default: "right-2 size-3",
+		lg: "right-3 size-3",
+		xl: "right-3.5 size-3"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxItemIndicatorIconVariants = cva("", {
+	variants: { size: {
+		xs: "size-3",
+		sm: "size-3",
+		default: "size-3",
+		lg: "size-3",
+		xl: "size-3"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxLabelVariants = cva(["text-slate-700"], {
+	variants: { size: {
+		xs: "px-2 pt-1 text-[11px]",
+		sm: "px-2.5 pt-1 text-[12px]",
+		default: "px-2.5 pt-1 text-xs",
+		lg: "px-3 pt-1 text-sm",
+		xl: "px-3.5 pt-1 text-base"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxInputGroupVariants = cva("", {
+	variants: { size: {
+		xs: "h-7 text-[11px]",
+		sm: "h-8 text-[12px]",
+		default: "h-9 text-[13px]",
+		lg: "h-10 text-sm",
+		xl: "h-11 text-base"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxSelectInputGroupVariants = cva("", {
+	variants: { size: {
+		xs: "h-auto rounded-sm text-[11px]",
+		sm: "h-auto rounded-md text-[12px]",
+		default: "h-auto rounded-lg text-[14px]",
+		lg: "h-auto rounded-lg text-sm",
+		xl: "h-auto rounded-lg text-sm"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxInputControlVariants = cva("", {
+	variants: { size: {
+		xs: "px-1.5 py-1 text-[11px]",
+		sm: "px-2 py-1 text-[12px]",
+		default: "px-2 py-1.5 text-sm",
+		lg: "px-3 py-2 text-sm",
+		xl: "px-4 py-2.5 text-base"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxSelectInputControlVariants = cva("", {
+	variants: { size: {
+		xs: "px-2 py-1 text-[11px]",
+		sm: "px-2.5 py-1.5 text-[12px]",
+		default: "px-[10px] py-[6px] text-[14px]",
+		lg: "px-3 py-2 text-sm",
+		xl: "px-3.5 py-2.5 text-sm"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxTriggerIconVariants = cva("", {
+	variants: { size: {
+		xs: "size-[10px]",
+		sm: "size-[11px]",
+		default: "size-3",
+		lg: "size-3",
+		xl: "size-3.5"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxTriggerButtonIconVariants = cva("", {
+	variants: { size: {
+		xs: "[&>svg]:size-[10px]",
+		sm: "[&>svg]:size-[11px]",
+		default: "[&>svg]:size-3",
+		lg: "[&>svg]:size-3",
+		xl: "[&>svg]:size-3.5"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxClearIconVariants = cva("", {
+	variants: { size: {
+		xs: "size-[10px]",
+		sm: "size-[11px]",
+		default: "size-3",
+		lg: "size-3",
+		xl: "size-3.5"
+	} },
+	defaultVariants: { size: "default" }
+});
+var comboboxClearButtonIconVariants = cva("", {
+	variants: { size: {
+		xs: "[&>svg]:size-[10px]",
+		sm: "[&>svg]:size-[11px]",
+		default: "[&>svg]:size-3",
+		lg: "[&>svg]:size-3",
+		xl: "[&>svg]:size-3.5"
+	} },
+	defaultVariants: { size: "default" }
+});
+var ComboboxContext = createContext({ size: "default" });
+function Combobox({ size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
+			"data-slot": "combobox",
+			"data-size": size,
+			...props,
+			children
+		})
+	});
+}
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	const { size } = useContext(ComboboxContext);
+	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(FontAwesomeIcon, {
+			icon: faChevronDown,
+			className: cn("pointer-events-none", comboboxTriggerIconVariants({ size }))
+		})]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	const { size } = useContext(ComboboxContext);
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": "combobox-clear",
+		className: cn(className),
+		...props,
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "none",
+			size: "icon-xs",
+			className: comboboxClearButtonIconVariants({ size }),
+			children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faXmark,
+				className: cn("pointer-events-none", comboboxClearIconVariants({ size }))
+			})
+		})
+	});
+}
+function ComboboxPrimitiveInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	const { size } = useContext(ComboboxContext);
+	const useSelectTriggerStyle = showTrigger;
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("w-fit mb-1!", comboboxInputGroupVariants({ size }), useSelectTriggerStyle && [
+			"border-transparent bg-slate-250",
+			"hover:bg-slate-300",
+			"has-[[data-slot=input-group-control]:focus]:bg-white",
+			"has-[[data-popup-open]]:bg-white",
+			comboboxSelectInputGroupVariants({ size })
+		], className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox$1.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, {
+					disabled,
+					className: cn(comboboxInputControlVariants({ size }), useSelectTriggerStyle && [
+						"placeholder:text-inherit",
+						"focus:placeholder:text-gray-300",
+						comboboxSelectInputControlVariants({ size })
+					])
+				}),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "none",
+					render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+					"data-slot": "input-group-button",
+					className: cn("group-has-data-[slot=combobox-clear]/input-group:hidden", "data-pressed:bg-transparent", comboboxTriggerButtonIconVariants({ size })),
+					disabled
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	const { size } = useContext(ComboboxContext);
+	const resolvedPortalClassName = getPortalClassName();
+	const resolvedPortalContainer = getPortalContainer();
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, {
+		className: resolvedPortalClassName,
+		container: resolvedPortalContainer,
+		children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			className: "isolate z-250",
+			children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+				"data-slot": "combobox-content",
+				"data-chips": !!anchor,
+				"data-size": size,
+				className: cn("group/combobox-content relative", "max-h-(--available-height) w-[calc(var(--anchor-width)_+_2.25rem)] max-w-(--available-width)", "min-w-[calc(var(--anchor-width)_+_2.25rem)]", "overflow-hidden", "origin-(--transform-origin)", "rounded-md bg-white", "shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]", "duration-100", "data-open:animate-in data-closed:animate-out", "data-open:fade-in-0 data-closed:fade-out-0", "data-open:zoom-in-95 data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "data-[side=inline-start]:slide-in-from-right-2", "data-[side=inline-end]:slide-in-from-left-2", "data-[chips=true]:min-w-(--anchor-width)", "*:data-[slot=input-group]:m-1", "*:data-[slot=input-group]:w-[calc(100%_-_0.5rem)]", "*:data-[slot=input-group]:mb-0", "data-[size=xs]:*:data-[slot=input-group]:h-7", "data-[size=sm]:*:data-[slot=input-group]:h-8", "data-[size=default]:*:data-[slot=input-group]:h-9", "data-[size=lg]:*:data-[slot=input-group]:h-10", "data-[size=xl]:*:data-[slot=input-group]:h-11", "*:data-[slot=input-group]:bg-input/30", "*:data-[slot=input-group]:border-input/30", "*:data-[slot=input-group]:shadow-none", className),
+				...props
+			})
+		})
+	});
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-slot": "combobox-list",
+		className: cn("max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))]", "overflow-y-auto overscroll-contain", "no-scrollbar", "data-empty:p-0", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	const { size } = useContext(ComboboxContext);
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-slot": "combobox-item",
+		className: cn(comboboxItemVariants({ size }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 items-center gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { render: /* @__PURE__ */ jsx("span", {
+			className: cn("pointer-events-none absolute flex items-center justify-center", comboboxItemIndicatorVariants({ size })),
+			children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faCheck,
+				className: cn("pointer-events-none", comboboxItemIndicatorIconVariants({ size }))
+			})
+		}) })]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": "combobox-group",
+		className: cn([className]),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	const { size } = useContext(ComboboxContext);
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("text-slate-700", comboboxLabelVariants({ size }), className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("hidden w-full justify-center py-2 text-center text-sm", "text-gray-500", "group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("-mx-1 my-1 h-px", "bg-slate-200", className),
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		"data-slot": "combobox-chips",
+		className: cn("flex-wrap gap-1", "px-2 py-1.5 text-sm", className),
+		render: /* @__PURE__ */ jsx(InputGroup, {}),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("flex w-fit items-center justify-center gap-1", "rounded-sm px-1.5 py-[2px]", "text-xs font-medium whitespace-nowrap", "bg-slate-200", "has-data-[slot=combobox-chip-remove]:pr-0", "has-disabled:pointer-events-none", "has-disabled:cursor-not-allowed", "has-disabled:opacity-50", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "none",
+				size: "xs",
+				children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faXmark,
+					className: "pointer-events-none size-2.5"
+				})
+			})
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		render: /* @__PURE__ */ jsx(InputGroupInput, { className: cn("min-w-16 px-0 py-0", className) }),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return useRef(null);
+}
+function ComboboxHighlightedText({ text = "", search = "", className, matchClassName }) {
+	const label = String(text || "");
+	const query = String(search || "").trim();
+	if (!query) return label;
+	const lowerLabel = label.toLowerCase();
+	const lowerQuery = query.toLowerCase();
+	const parts = [];
+	let cursor = 0;
+	let matchIndex = lowerLabel.indexOf(lowerQuery);
+	while (matchIndex !== -1) {
+		if (matchIndex > cursor) parts.push({
+			text: label.slice(cursor, matchIndex),
+			match: false
+		});
+		parts.push({
+			text: label.slice(matchIndex, matchIndex + query.length),
+			match: true
+		});
+		cursor = matchIndex + query.length;
+		matchIndex = lowerLabel.indexOf(lowerQuery, cursor);
+	}
+	if (cursor < label.length) parts.push({
+		text: label.slice(cursor),
+		match: false
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("min-w-0 truncate", className),
+		children: parts.map((part, index) => {
+			if (!part.match) return /* @__PURE__ */ jsx("span", { children: part.text }, index);
+			return /* @__PURE__ */ jsx("span", {
+				className: cn("rounded-[2px] bg-blue-100", matchClassName),
+				children: part.text
+			}, index);
+		})
+	});
+}
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../src/components/Combobox.tsx"],"sourcesContent":["import {\n    type ComponentProps, ComponentPropsWithRef, createContext, useContext, useRef,\n} from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\nimport { Button } from '@verbb/plugin-kit-react/components';\nimport {\n    InputGroup,\n    InputGroupAddon,\n    InputGroupButton,\n    InputGroupInput,\n} from '@verbb/plugin-kit-react/components';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n    faChevronDown, faXmark, faCheck,\n} from '@fortawesome/pro-solid-svg-icons';\nimport { cva } from 'class-variance-authority';\n\nconst comboboxItemVariants = cva([\n    // Reset\n    'relative flex w-full cursor-default items-center outline-hidden select-none',\n\n    // Layout\n    'gap-1.5',\n\n    // Focus\n    'focus:bg-slate-100 data-[highlighted]:bg-slate-100',\n\n    // Disabled\n    'data-disabled:pointer-events-none data-disabled:opacity-50',\n\n    // SVG\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n], {\n    variants: {\n        size: {\n            xs: 'px-2 py-1 pr-7 text-[11px] [&_svg:not([class*=\"size-\"])]:size-3',\n            sm: 'px-2.5 py-1.5 pr-7 text-[12px] [&_svg:not([class*=\"size-\"])]:size-3',\n            default: 'px-[10px] py-[6px] pr-8 text-[14px] [&_svg:not([class*=\"size-\"])]:size-3',\n            lg: 'px-3 py-2 pr-8 text-sm [&_svg:not([class*=\"size-\"])]:size-3',\n            xl: 'px-3.5 py-2.5 pr-9 text-sm [&_svg:not([class*=\"size-\"])]:size-3',\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\nconst comboboxItemIndicatorVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'right-2 size-3',\n            sm: 'right-2.5 size-3',\n            default: 'right-2 size-3',\n            lg: 'right-3 size-3',\n            xl: 'right-3.5 size-3',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxItemIndicatorIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-3',\n            sm: 'size-3',\n            default: 'size-3',\n            lg: 'size-3',\n            xl: 'size-3',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'px-2 pt-1 text-[11px]',\n            sm: 'px-2.5 pt-1 text-[12px]',\n            default: 'px-2.5 pt-1 text-xs',\n            lg: 'px-3 pt-1 text-sm',\n            xl: 'px-3.5 pt-1 text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxInputGroupVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'h-7 text-[11px]',\n            sm: 'h-8 text-[12px]',\n            default: 'h-9 text-[13px]',\n            lg: 'h-10 text-sm',\n            xl: 'h-11 text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxSelectInputGroupVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'h-auto rounded-sm text-[11px]',\n            sm: 'h-auto rounded-md text-[12px]',\n            default: 'h-auto rounded-lg text-[14px]',\n            lg: 'h-auto rounded-lg text-sm',\n            xl: 'h-auto rounded-lg text-sm',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxInputControlVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-1.5 py-1 text-[11px]',\n            sm: 'px-2 py-1 text-[12px]',\n            default: 'px-2 py-1.5 text-sm',\n            lg: 'px-3 py-2 text-sm',\n            xl: 'px-4 py-2.5 text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxSelectInputControlVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-2 py-1 text-[11px]',\n            sm: 'px-2.5 py-1.5 text-[12px]',\n            default: 'px-[10px] py-[6px] text-[14px]',\n            lg: 'px-3 py-2 text-sm',\n            xl: 'px-3.5 py-2.5 text-sm',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxTriggerIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-[10px]',\n            sm: 'size-[11px]',\n            default: 'size-3',\n            lg: 'size-3',\n            xl: 'size-3.5',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxTriggerButtonIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: '[&>svg]:size-[10px]',\n            sm: '[&>svg]:size-[11px]',\n            default: '[&>svg]:size-3',\n            lg: '[&>svg]:size-3',\n            xl: '[&>svg]:size-3.5',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxClearIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-[10px]',\n            sm: 'size-[11px]',\n            default: 'size-3',\n            lg: 'size-3',\n            xl: 'size-3.5',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst comboboxClearButtonIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: '[&>svg]:size-[10px]',\n            sm: '[&>svg]:size-[11px]',\n            default: '[&>svg]:size-3',\n            lg: '[&>svg]:size-3',\n            xl: '[&>svg]:size-3.5',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype ComboboxSize = NonNullable<VariantProps<typeof comboboxItemVariants>['size']>;\ntype ComboboxHighlightedTextProps = {\n    text?: string | number | null;\n    search?: string | number | null;\n    className?: string;\n    matchClassName?: string;\n};\n\nconst ComboboxContext = createContext<{ size: ComboboxSize }>({ size: 'default' });\n\nfunction Combobox({\n    size = 'default',\n    children,\n    ...props\n}: ComponentProps<typeof ComboboxPrimitive.Root> & { size?: ComboboxSize }) {\n    return (\n        <ComboboxContext.Provider value={{ size }}>\n            <ComboboxPrimitive.Root data-slot=\"combobox\" data-size={size} {...props}>\n                {children}\n            </ComboboxPrimitive.Root>\n        </ComboboxContext.Provider>\n    );\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n    return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n    className,\n    children,\n    ...props\n}: ComboboxPrimitive.Trigger.Props) {\n    const { size } = useContext(ComboboxContext);\n\n    return (\n        <ComboboxPrimitive.Trigger\n            data-slot=\"combobox-trigger\"\n            className={cn(\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-4\",\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <FontAwesomeIcon\n                icon={faChevronDown}\n                className={cn(\n                    'pointer-events-none',\n                    comboboxTriggerIconVariants({ size }),\n                )}\n            />\n        </ComboboxPrimitive.Trigger>\n    );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n    const { size } = useContext(ComboboxContext);\n\n    return (\n        <ComboboxPrimitive.Clear data-slot=\"combobox-clear\" className={cn(className)} {...props} render={\n            <InputGroupButton\n                variant=\"none\"\n                size=\"icon-xs\"\n                className={comboboxClearButtonIconVariants({ size })}\n            >\n                <FontAwesomeIcon\n                    icon={faXmark}\n                    className={cn(\n                        'pointer-events-none',\n                        comboboxClearIconVariants({ size }),\n                    )}\n                />\n            </InputGroupButton>\n        } />\n    );\n}\n\nfunction ComboboxPrimitiveInput({\n    className,\n    children,\n    disabled = false,\n    showTrigger = true,\n    showClear = false,\n    ...props\n}: ComboboxPrimitive.Input.Props & {\n    showTrigger?: boolean\n    showClear?: boolean\n}) {\n    const { size } = useContext(ComboboxContext);\n    const useSelectTriggerStyle = showTrigger;\n\n    return (\n        <InputGroup className={cn(\n            'w-fit mb-1!',\n\n            comboboxInputGroupVariants({ size }),\n            useSelectTriggerStyle && [\n                // Keep single comboboxes visually aligned with SelectTrigger,\n                // while search-only combobox inputs retain normal input styling.\n                'border-transparent bg-slate-250',\n                'hover:bg-slate-300',\n                'has-[[data-slot=input-group-control]:focus]:bg-white',\n                'has-[[data-popup-open]]:bg-white',\n                comboboxSelectInputGroupVariants({ size }),\n            ],\n\n            className,\n        )}>\n            <ComboboxPrimitive.Input\n                render={\n                    <InputGroupInput\n                        disabled={disabled}\n                        className={cn(\n                            comboboxInputControlVariants({ size }),\n                            useSelectTriggerStyle && [\n                                'placeholder:text-inherit',\n                                'focus:placeholder:text-gray-300',\n                                comboboxSelectInputControlVariants({ size }),\n                            ],\n                        )}\n                    />\n                }\n                {...props}\n            />\n            <InputGroupAddon align=\"inline-end\">\n                {showTrigger && (\n                    <InputGroupButton\n                        size=\"icon-xs\"\n                        variant=\"none\"\n                        render={<ComboboxTrigger />}\n                        data-slot=\"input-group-button\"\n                        className={cn(\n                            // Toggle visibility when clear button is shown\n                            'group-has-data-[slot=combobox-clear]/input-group:hidden',\n\n                            // Pressed state\n                            'data-pressed:bg-transparent',\n\n                            comboboxTriggerButtonIconVariants({ size }),\n                        )}\n                        disabled={disabled}\n                    />\n                )}\n                {showClear && <ComboboxClear disabled={disabled} />}\n            </InputGroupAddon>\n            {children}\n        </InputGroup>\n    );\n}\n\nfunction ComboboxContent({\n    className,\n    side = 'bottom',\n    sideOffset = 6,\n    align = 'start',\n    alignOffset = 0,\n    anchor,\n    ...props\n}: ComboboxPrimitive.Popup.Props &\n    Pick<\n        ComboboxPrimitive.Positioner.Props,\n        'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'\n    >) {\n    const { size } = useContext(ComboboxContext);\n    const resolvedPortalClassName = getPortalClassName();\n    const resolvedPortalContainer = getPortalContainer();\n\n    return (\n        <ComboboxPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <ComboboxPrimitive.Positioner\n                side={side}\n                sideOffset={sideOffset}\n                align={align}\n                alignOffset={alignOffset}\n                anchor={anchor}\n                className=\"isolate z-250\"\n            >\n                <ComboboxPrimitive.Popup\n                    data-slot=\"combobox-content\"\n                    data-chips={!!anchor}\n                    data-size={size}\n                    className={cn(\n                        // Layout\n                        'group/combobox-content relative',\n                        'max-h-(--available-height) w-[calc(var(--anchor-width)_+_2.25rem)] max-w-(--available-width)',\n                        'min-w-[calc(var(--anchor-width)_+_2.25rem)]',\n                        'overflow-hidden',\n                        'origin-(--transform-origin)',\n\n                        // Theme\n                        'rounded-md bg-white',\n                        'shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]',\n\n                        // Motion\n                        'duration-100',\n                        'data-open:animate-in data-closed:animate-out',\n                        'data-open:fade-in-0 data-closed:fade-out-0',\n                        'data-open:zoom-in-95 data-closed:zoom-out-95',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n\n                        // Chips mode\n                        'data-[chips=true]:min-w-(--anchor-width)',\n\n                        // Nested input group styling\n                        '*:data-[slot=input-group]:m-1',\n                        '*:data-[slot=input-group]:w-[calc(100%_-_0.5rem)]',\n                        '*:data-[slot=input-group]:mb-0',\n                        'data-[size=xs]:*:data-[slot=input-group]:h-7',\n                        'data-[size=sm]:*:data-[slot=input-group]:h-8',\n                        'data-[size=default]:*:data-[slot=input-group]:h-9',\n                        'data-[size=lg]:*:data-[slot=input-group]:h-10',\n                        'data-[size=xl]:*:data-[slot=input-group]:h-11',\n                        '*:data-[slot=input-group]:bg-input/30',\n                        '*:data-[slot=input-group]:border-input/30',\n                        '*:data-[slot=input-group]:shadow-none',\n\n                        className,\n                    )}\n                    {...props}\n                />\n            </ComboboxPrimitive.Positioner>\n        </ComboboxPrimitive.Portal>\n    );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n    return (\n        <ComboboxPrimitive.List\n            data-slot=\"combobox-list\"\n            className={cn(\n                // Layout\n                'max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))]',\n                'overflow-y-auto overscroll-contain',\n\n                // Utilities\n                'no-scrollbar',\n\n                // State\n                'data-empty:p-0',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ComboboxItem({\n    className,\n    children,\n    ...props\n}: ComboboxPrimitive.Item.Props) {\n    const { size } = useContext(ComboboxContext);\n\n    return (\n        <ComboboxPrimitive.Item\n            data-slot=\"combobox-item\"\n            className={cn(\n                comboboxItemVariants({ size }),\n\n                className,\n            )}\n            {...props}\n        >\n            <span className=\"flex min-w-0 flex-1 items-center gap-2 whitespace-nowrap\">\n                {children}\n            </span>\n            <ComboboxPrimitive.ItemIndicator render={\n                <span className={cn(\n                    'pointer-events-none absolute flex items-center justify-center',\n                    comboboxItemIndicatorVariants({ size }),\n                )}>\n                    <FontAwesomeIcon\n                        icon={faCheck}\n                        className={cn(\n                            'pointer-events-none',\n                            comboboxItemIndicatorIconVariants({ size }),\n                        )}\n                    />\n                </span>\n            } />\n        </ComboboxPrimitive.Item>\n    );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n    return (\n        <ComboboxPrimitive.Group\n            data-slot=\"combobox-group\"\n            className={cn([\n                // 'py-1',\n\n                className\n            ])}\n            {...props}\n        />\n    );\n}\n\nfunction ComboboxLabel({\n    className,\n    ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n    const { size } = useContext(ComboboxContext);\n\n    return (\n        <ComboboxPrimitive.GroupLabel\n            data-slot=\"combobox-label\"\n            className={cn(\n                // Theme\n                'text-slate-700',\n\n                // Size\n                comboboxLabelVariants({ size }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n    return (\n        <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n    );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n    return (\n        <ComboboxPrimitive.Empty\n            data-slot=\"combobox-empty\"\n            className={cn(\n                // Layout\n                'hidden w-full justify-center py-2 text-center text-sm',\n\n                // Theme\n                'text-gray-500',\n\n                // State\n                'group-data-empty/combobox-content:flex',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ComboboxSeparator({\n    className,\n    ...props\n}: ComboboxPrimitive.Separator.Props) {\n    return (\n        <ComboboxPrimitive.Separator\n            data-slot=\"combobox-separator\"\n            className={cn(\n                // Layout\n                '-mx-1 my-1 h-px',\n\n                // Theme\n                'bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction ComboboxChips({\n    className,\n    ...props\n}: ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n    ComboboxPrimitive.Chips.Props) {\n    return (\n        <ComboboxPrimitive.Chips\n            data-slot=\"combobox-chips\"\n            className={cn(\n                // Layout\n                'flex-wrap gap-1',\n                'px-2 py-1.5 text-sm',\n\n                className,\n            )}\n            render={<InputGroup />}\n            {...props}\n        />\n    );\n}\n\nfunction ComboboxChip({\n    className,\n    children,\n    showRemove = true,\n    ...props\n}: ComboboxPrimitive.Chip.Props & {\n    showRemove?: boolean\n}) {\n    return (\n        <ComboboxPrimitive.Chip\n            data-slot=\"combobox-chip\"\n            className={cn(\n                // Layout\n                'flex w-fit items-center justify-center gap-1',\n                'rounded-sm px-1.5 py-[2px]',\n                'text-xs font-medium whitespace-nowrap',\n\n                // Theme\n                'bg-slate-200',\n\n                // State\n                'has-data-[slot=combobox-chip-remove]:pr-0',\n                'has-disabled:pointer-events-none',\n                'has-disabled:cursor-not-allowed',\n                'has-disabled:opacity-50',\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            {showRemove && (\n                <ComboboxPrimitive.ChipRemove\n                    className=\"-ml-1 opacity-50 hover:opacity-100\"\n                    data-slot=\"combobox-chip-remove\"\n                    render={\n                        <Button variant=\"none\" size=\"xs\">\n                            <FontAwesomeIcon icon={faXmark} className=\"pointer-events-none size-2.5\" />\n                        </Button>\n                    } />\n            )}\n        </ComboboxPrimitive.Chip>\n    );\n}\n\nfunction ComboboxChipsInput({\n    className,\n    ...props\n}: ComboboxPrimitive.Input.Props) {\n    return (\n        <ComboboxPrimitive.Input\n            render={\n                <InputGroupInput\n                    className={cn(\n                        'min-w-16 px-0 py-0',\n                        className,\n                    )}\n                />\n            }\n            {...props}\n        />\n    );\n}\n\nfunction useComboboxAnchor() {\n    return useRef<HTMLDivElement | null>(null);\n}\n\nfunction ComboboxHighlightedText({\n    text = '',\n    search = '',\n    className,\n    matchClassName,\n}: ComboboxHighlightedTextProps) {\n    const label = String(text || '');\n    const query = String(search || '').trim();\n\n    if (!query) {\n        return label;\n    }\n\n    const lowerLabel = label.toLowerCase();\n    const lowerQuery = query.toLowerCase();\n    const parts: Array<{ text: string; match: boolean }> = [];\n    let cursor = 0;\n    let matchIndex = lowerLabel.indexOf(lowerQuery);\n\n    while (matchIndex !== -1) {\n        if (matchIndex > cursor) {\n            parts.push({\n                text: label.slice(cursor, matchIndex),\n                match: false,\n            });\n        }\n\n        parts.push({\n            text: label.slice(matchIndex, matchIndex + query.length),\n            match: true,\n        });\n\n        cursor = matchIndex + query.length;\n        matchIndex = lowerLabel.indexOf(lowerQuery, cursor);\n    }\n\n    if (cursor < label.length) {\n        parts.push({\n            text: label.slice(cursor),\n            match: false,\n        });\n    }\n\n    return (\n        <span className={cn('min-w-0 truncate', className)}>\n            {parts.map((part, index) => {\n                if (!part.match) {\n                    return <span key={index}>{part.text}</span>;\n                }\n\n                return (\n                    <span key={index} className={cn('rounded-[2px] bg-blue-100', matchClassName)}>\n                        {part.text}\n                    </span>\n                );\n            })}\n        </span>\n    );\n}\n\nexport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxGroup,\n    ComboboxLabel,\n    ComboboxCollection,\n    ComboboxEmpty,\n    ComboboxSeparator,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxTrigger,\n    ComboboxValue,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n};\n"],"mappings":"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"}

package/dist/components/ComboboxInput.d.ts

@@ -0,0 +1,28 @@
+export type ComboboxInputOption = {
+    label: string;
+    value: string | number;
+    [key: string]: unknown;
+};
+export type ComboboxInputProps = {
+    options?: ComboboxInputOption[];
+    fetchOptions?: () => Promise<ComboboxInputOption[]>;
+    value?: string | number | Array<string | number> | null;
+    onValueChange?: (value: string | number | Array<string | number> | null) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    emptyMessage?: string;
+    className?: string;
+    contentClassName?: string;
+    withLoadingIndicator?: boolean;
+    showClear?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onInputValueChange?: (value: string) => void;
+    cacheKey?: string;
+    cacheTtlMs?: number;
+    disableCache?: boolean;
+};
+export declare const ComboboxInput: ({ options, fetchOptions, value, onValueChange, multiple, disabled, placeholder, emptyMessage, className, contentClassName, withLoadingIndicator, showClear, open, defaultOpen, onOpenChange, onInputValueChange, cacheKey, cacheTtlMs, disableCache, }: ComboboxInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComboboxInput.d.ts.map

package/dist/components/ComboboxInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxInput.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,aAAa,GAAI,wPAoB3B,kBAAkB,4CAyLpB,CAAC"}

package/dist/components/ComboboxInput.js

@@ -0,0 +1,165 @@
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxHighlightedText, ComboboxItem, ComboboxList, ComboboxPrimitiveInput, ComboboxValue, useComboboxAnchor } from "./Combobox.js";
+import { Spinner } from "./Spinner.js";
+import "./index.js";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ComboboxInput.tsx
+var optionsCache = /* @__PURE__ */ new Map();
+var toStringValue = (value) => {
+	return String(value ?? "");
+};
+var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multiple = false, disabled = false, placeholder = "Select an option", emptyMessage = "No options found.", className, contentClassName, withLoadingIndicator = true, showClear = true, open, defaultOpen, onOpenChange, onInputValueChange, cacheKey, cacheTtlMs = 300 * 1e3, disableCache = false }) => {
+	const [fetchedOptions, setFetchedOptions] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+	const [searchValue, setSearchValue] = useState("");
+	const hasLoadedRef = useRef(false);
+	const anchor = useComboboxAnchor();
+	const isMultiple = multiple;
+	const isOpen = open ?? internalOpen;
+	const resolvedOptions = useMemo(() => {
+		return fetchedOptions ?? options ?? [];
+	}, [fetchedOptions, options]);
+	const resolveCachedOptions = useCallback(() => {
+		if (disableCache || !cacheKey) return null;
+		const cached = optionsCache.get(cacheKey);
+		if (!cached) return null;
+		if (cached.expiresAt <= Date.now()) {
+			optionsCache.delete(cacheKey);
+			return null;
+		}
+		return cached.options;
+	}, [cacheKey, disableCache]);
+	const persistCachedOptions = useCallback((nextOptions) => {
+		if (disableCache || !cacheKey) return;
+		optionsCache.set(cacheKey, {
+			options: nextOptions,
+			expiresAt: Date.now() + cacheTtlMs
+		});
+	}, [
+		cacheKey,
+		cacheTtlMs,
+		disableCache
+	]);
+	useEffect(() => {
+		if (!fetchOptions || !isOpen) return;
+		const cachedOptions = resolveCachedOptions();
+		if (cachedOptions) {
+			setFetchedOptions(cachedOptions);
+			hasLoadedRef.current = true;
+			return;
+		}
+		if (hasLoadedRef.current && fetchedOptions) return;
+		let isMounted = true;
+		const loadOptions = async () => {
+			setLoading(true);
+			try {
+				const fetchedOptions = await fetchOptions();
+				if (isMounted) {
+					setFetchedOptions(fetchedOptions);
+					persistCachedOptions(fetchedOptions);
+					hasLoadedRef.current = true;
+				}
+			} catch (error) {
+				console.error("Failed to load combobox options:", error);
+			} finally {
+				if (isMounted) setLoading(false);
+			}
+		};
+		loadOptions();
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		fetchOptions,
+		fetchedOptions,
+		isOpen,
+		persistCachedOptions,
+		resolveCachedOptions
+	]);
+	const selectedValue = useMemo(() => {
+		if (isMultiple) {
+			const selectedValues = Array.isArray(value) ? new Set(value.map((item) => {
+				return toStringValue(item);
+			})) : /* @__PURE__ */ new Set();
+			return resolvedOptions.filter((option) => {
+				return selectedValues.has(toStringValue(option.value));
+			});
+		}
+		return resolvedOptions.find((option) => {
+			return toStringValue(option.value) === toStringValue(value);
+		}) ?? null;
+	}, [
+		isMultiple,
+		resolvedOptions,
+		value
+	]);
+	const handleChange = (nextValue) => {
+		if (!onValueChange) return;
+		if (isMultiple) {
+			onValueChange((Array.isArray(nextValue) ? nextValue : []).map((item) => {
+				return item.value;
+			}));
+			return;
+		}
+		onValueChange(nextValue?.value ?? null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs(Combobox, {
+			multiple: isMultiple,
+			items: resolvedOptions,
+			value: selectedValue,
+			onValueChange: handleChange,
+			open,
+			defaultOpen,
+			onOpenChange: (nextOpen) => {
+				setInternalOpen(nextOpen);
+				onOpenChange?.(nextOpen);
+				if (!nextOpen) setSearchValue("");
+			},
+			onInputValueChange: (nextValue) => {
+				const nextSearchValue = String(nextValue ?? "");
+				setSearchValue(nextSearchValue);
+				onInputValueChange?.(nextSearchValue);
+			},
+			itemToStringLabel: (item) => {
+				return item?.label ?? "";
+			},
+			itemToStringValue: (item) => {
+				return toStringValue(item?.value);
+			},
+			disabled,
+			children: [isMultiple ? /* @__PURE__ */ jsx(ComboboxChips, {
+				ref: anchor,
+				className,
+				children: /* @__PURE__ */ jsx(ComboboxValue, { children: (items) => {
+					return /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item) => {
+						return /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, toStringValue(item.value));
+					}), /* @__PURE__ */ jsx(ComboboxChipsInput, { placeholder })] });
+				} })
+			}) : /* @__PURE__ */ jsx(ComboboxPrimitiveInput, {
+				className,
+				placeholder,
+				showClear,
+				disabled
+			}), /* @__PURE__ */ jsxs(ComboboxContent, {
+				anchor: isMultiple ? anchor : void 0,
+				className: contentClassName,
+				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
+					return /* @__PURE__ */ jsx(ComboboxItem, {
+						value: item,
+						children: /* @__PURE__ */ jsx(ComboboxHighlightedText, {
+							text: item.label,
+							search: searchValue
+						})
+					}, toStringValue(item.value));
+				} })]
+			})]
+		}), withLoadingIndicator && loading && /* @__PURE__ */ jsx(Spinner, { size: "xs" })]
+	});
+};
+//#endregion
+export { ComboboxInput };
+
+//# sourceMappingURL=ComboboxInput.js.map