@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/Combobox.js

@@ -1,393 +1,55 @@
-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";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkCombobox } from "@verbb/plugin-kit-web/components/combobox/pk-combobox.js";
 //#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 PkComboboxElement = createPluginKitComponent({
+	tagName: "pk-combobox",
+	elementClass: PkCombobox,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onPkClear: "pk-clear",
+		onPkCreate: "pk-create",
+		onInput: "input",
+		onChange: "change",
+		onPkShow: "pk-show",
+		onPkAfterShow: "pk-after-show",
+		onPkHide: "pk-hide",
+		onPkAfterHide: "pk-after-hide",
+		onPkOpenChange: "pk-open-change"
 	}
 });
-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 }))
-			})
+/** React facade over `<pk-combobox>`. Behavior and styles live in the web component. */
+var Combobox = forwardRef(function Combobox(props, ref) {
+	const { disabled, invalid, clearable, multiple, open, popupMode, allowCreate, allowCustomValue, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkComboboxElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"clearable",
+			"multiple",
+			"open",
+			"popupMode",
+			"allowCreate",
+			"allowCustomValue"
+		], {
+			disabled,
+			invalid,
+			clearable,
+			multiple,
+			open,
+			popupMode,
+			allowCreate,
+			allowCustomValue
 		})
 	});
-}
-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-x-clip 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);
-		})
-	});
-}
+});
+Combobox.displayName = "Combobox";
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+export { Combobox, PkComboboxElement };
 
 //# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox.js.map

@@ -1 +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-x-clip 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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"}
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../src/components/Combobox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport {\n    PkCombobox,\n    type PkComboboxAsyncOption,\n    type PkComboboxFetchHandler,\n    type PkComboboxFilter,\n    type PkComboboxSize,\n} from '@verbb/plugin-kit-web/components/combobox/pk-combobox.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkComboboxElement = createPluginKitComponent({\n    tagName: 'pk-combobox',\n    elementClass: PkCombobox,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkClear: 'pk-clear',\n        onPkCreate: 'pk-create',\n        onInput: 'input',\n        onChange: 'change',\n        onPkShow: 'pk-show',\n        onPkAfterShow: 'pk-after-show',\n        onPkHide: 'pk-hide',\n        onPkAfterHide: 'pk-after-hide',\n        onPkOpenChange: 'pk-open-change',\n    },\n});\n\ntype PkComboboxElementProps = React.ComponentProps<typeof PkComboboxElement>;\n\n/** React facade over `<pk-combobox>`. Behavior and styles live in the web component. */\nexport const Combobox = forwardRef<PkCombobox, PkComboboxElementProps>(function Combobox(props, ref) {\n    const {\n        disabled, invalid, clearable, multiple, open, popupMode, allowCreate, allowCustomValue, ...rest\n    } = props;\n\n    return (\n        <PkComboboxElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(\n                ['disabled', 'invalid', 'clearable', 'multiple', 'open', 'popupMode', 'allowCreate', 'allowCustomValue'],\n                {\n                    disabled, invalid, clearable, multiple, open, popupMode, allowCreate, allowCustomValue,\n                },\n            )}\n        />\n    );\n});\n\nCombobox.displayName = 'Combobox';\n\nexport { PkComboboxElement };\nexport type ComboboxProps = PkComboboxElementProps;\nexport type { PkComboboxAsyncOption, PkComboboxFetchHandler, PkComboboxFilter, PkComboboxSize };\n"],"mappings":";;;;;;AAYA,IAAM,oBAAoB,yBAAyB;CAC/C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,SAAS;EACT,UAAU;EACV,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EACf,gBAAgB;EACnB;CACJ,CAAC;;AAKF,IAAa,WAAW,WAA+C,SAAS,SAAS,OAAO,KAAK;CACjG,MAAM,EACF,UAAU,SAAS,WAAW,UAAU,MAAM,WAAW,aAAa,kBAAkB,GAAG,SAC3F;AAEJ,QACI,oBAAC,mBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBACA;GAAC;GAAY;GAAW;GAAa;GAAY;GAAQ;GAAa;GAAe;GAAmB,EACxG;GACI;GAAU;GAAS;GAAW;GAAU;GAAM;GAAW;GAAa;GACzE,CACJ;EACH,CAAA;EAER;AAEF,SAAS,cAAc"}

package/dist/components/ComboboxInput.d.ts

@@ -1,29 +1,46 @@
-export type ComboboxInputOption = {
-    label: string;
+import { default as React } from 'react';
+import { PkCombobox, PkComboboxSize } from '@verbb/plugin-kit-web/components/combobox/pk-combobox.js';
+export interface ComboboxInputOption {
     value: string | number;
-    icon?: string | null;
+    label: string;
+    disabled?: boolean;
     [key: string]: unknown;
-};
-export type ComboboxInputProps = {
+}
+export type ComboboxFetchOptions = (query: string, signal?: AbortSignal) => Promise<ComboboxInputOption[]>;
+export interface ComboboxInputProps {
     options?: ComboboxInputOption[];
-    fetchOptions?: () => Promise<ComboboxInputOption[]>;
+    fetchOptions?: ComboboxFetchOptions;
     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;
+    loadingMessage?: string;
+    startTypingMessage?: string;
     showClear?: boolean;
-    open?: boolean;
-    defaultOpen?: boolean;
+    isInvalid?: boolean;
+    size?: PkComboboxSize;
+    /** When `full`, stretch the combobox host to the available width (schema fields, table cells). */
+    width?: 'full';
+    allowCreate?: boolean;
+    onCreate?: (query: string) => void;
     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;
+    name?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Convenience facade over `<pk-combobox>` mirroring the `plugin-kit-react` `ComboboxInput`
+ * contract: `options[]` (or `fetchOptions` for async search), controlled `value`/`onValueChange`,
+ * and `multiple`. Unlike the base-ui version, `pk-combobox` owns async fetching, filtering, chips,
+ * and empty/loading states internally — this wrapper just maps props/values.
+ *
+ * `pk-combobox` is string-valued, so values are stringified for the element and mapped back to
+ * their original option value on change.
+ */
+export declare const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps & React.RefAttributes<PkCombobox>>;
 //# sourceMappingURL=ComboboxInput.d.ts.map

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

@@ -1 +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,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,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;AA2BF,eAAO,MAAM,aAAa,GAAI,wPAoB3B,kBAAkB,4CA6LpB,CAAC"}
+{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAK3G,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,oBAAoB,GAAG,CAC/B,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,WAAW,KACnB,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAEpC,MAAM,WAAW,kBAAkB;IAC/B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,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,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,kGAAkG;IAClG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAMD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,uFA4GxB,CAAC"}