@od-oneapp/uni-ui 2026.1.1301

package/dist/combobox-uEKksQFR.mjs

@@ -0,0 +1,410 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { t as Button } from "./button-DVOrrZLw.mjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "./tooltip-B8_zKnHC.mjs";
+import { t as Popover } from "./popover-DmWxl2lW.mjs";
+import { forwardRef, isValidElement, memo, useCallback, useMemo, useState } from "react";
+import { useDisclosure, useInputState, useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { Check, ChevronDown, Loader2, Plus, Square, SquareCheck } from "lucide-react";
+import { motion } from "motion/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Command, useCommandState } from "cmdk";
+
+//#region src/components/forms/combobox/combobox.tsx
+/**
+* @fileoverview Combobox Component - Premium Harmony V2
+*
+* Autocomplete/searchable select built on cmdk with Premium Harmony V2 motion standards.
+* Supports single and multiple selection with rich options, touch detection, and accessibility.
+* Features fuzzy search, stagger animations, and WCAG-compliant touch targets.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 spring physics for smooth animations
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility
+* - Super light/dark mode with seamless switching
+* - cmdk integration for fuzzy search
+* - Single and multiple selection modes
+* - Optional stagger animation on dropdown open
+* - Custom option icons and disabled states
+* - Create new option support with async
+* - Keyboard navigation and shortcuts
+* - Customizable trigger button
+* - Option separators and tooltips
+* - WCAG 2.5.5 compliant 44px minimum touch targets
+* - Data attributes for state tracking (data-state, data-selected)
+* - Enhanced focus styles with semantic color tokens
+* - Mantine hooks for state management
+*
+* @module @od-oneapp/uni-ui/components/combobox
+* @component Combobox
+*
+* @useCases
+* - Form inputs: Country selector, language picker, category assignment
+* - Search interfaces: Fuzzy search with autocomplete, command palette, quick actions
+* - Multi-select: Tag assignment, user permissions, category filtering
+* - Creation flows: Add new options dynamically, inline entity creation
+* - Touch interfaces: Mobile-first dropdowns with WCAG 2.5.5 compliant 44px touch targets
+* - Accessible selects: Screen reader support, keyboard navigation, focus management
+* - Rich options: Custom icons, tooltips, separators, disabled states
+*
+* @example
+* // Single selection
+* <Combobox options={options} selected={selected} setSelected={setSelected} placeholder="Select option..." caret />
+*
+* @example
+* // Multiple selection with stagger animation
+* <Combobox multiple stagger options={options} selected={selectedItems} setSelected={setSelectedItems} />
+*
+* @example
+* // Touch-optimized for mobile
+* <Combobox size="touch" options={options} selected={selected} setSelected={setSelected} />
+*/
+/**
+* Premium Harmony V2 Spring Physics Constants
+* Optimized for tactile, fluid, and gentle interactions
+*/
+const SPRING_TACTILE = {
+	stiffness: 400,
+	damping: 25
+};
+const SPRING_FLUID = {
+	stiffness: 300,
+	damping: 30
+};
+function isMultipleSelection(multiple, setSelected) {
+	return multiple === true;
+}
+const DEFAULT_COMBOBOX_PLACEHOLDER = "Select...";
+const DEFAULT_COMBOBOX_SEARCH_PLACEHOLDER = "Search...";
+const DEFAULT_COMBOBOX_SHOULD_FILTER = true;
+const DEFAULT_COMBOBOX_HIDE_SEARCH = false;
+const DEFAULT_COMBOBOX_EMPTY_STATE = "No matches";
+const COMBOBOX_CARET_ICON_BASE_CLASSNAME = "text-muted-foreground ml-1 size-4 shrink-0";
+const COMBOBOX_CARET_ICON_TRANSITION_CLASSNAME = "transition-transform duration-75";
+const COMBOBOX_CARET_ICON_OPEN_CLASSNAME = "group-data-[state=open]:rotate-180";
+const COMBOBOX_CREATE_OPTION_ITEM_BASE_CLASSNAME = "text-foreground flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-nowrap hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors";
+const COMBOBOX_CREATE_OPTION_ITEM_SELECTED_CLASSNAME = "data-[selected=true]:bg-accent/50";
+const COMBOBOX_CREATE_OPTION_ICON_CLASSNAME = "size-4 shrink-0";
+const COMBOBOX_CREATE_OPTION_ICON_LOADING_CLASSNAME = "animate-spin";
+const COMBOBOX_CREATE_OPTION_CONTENT_CLASSNAME = "grow truncate";
+const COMBOBOX_COMMAND_WRAPPER_CLASSNAME = "pointer-events-auto";
+const COMBOBOX_SEARCH_WRAPPER_CLASSNAME = "border-border bg-background flex items-center overflow-hidden rounded-t-lg border-b";
+const COMBOBOX_INPUT_BASE_CLASSNAME = "placeholder:text-muted-foreground text-foreground grow border-0 bg-transparent py-3 pr-2 pl-4 outline-none focus:ring-0 focus-visible:outline-none sm:text-sm";
+const COMBOBOX_INPUT_RIGHT_WRAPPER_CLASSNAME = "mr-2";
+const COMBOBOX_SHORTCUT_HINT_CLASSNAME = "border-border bg-muted text-muted-foreground mr-2 hidden shrink-0 rounded border px-2 py-0.5 text-xs font-light md:block";
+const COMBOBOX_OPTIONS_CONTAINER_BASE_CLASSNAME = "max-h-[min(50vh,250px)] overflow-auto";
+const COMBOBOX_OPTIONS_CONTAINER_WITH_CREATE_CLASSNAME = "max-h-[calc(min(50vh,250px)-3.5rem)]";
+const COMBOBOX_COMMAND_LIST_CLASSNAME = "flex w-full min-w-[100px] flex-col gap-1 p-1";
+const COMBOBOX_LOADING_WRAPPER_CLASSNAME = "flex h-12 items-center justify-center";
+const COMBOBOX_LOADING_ICON_CLASSNAME = "text-muted-foreground size-4 animate-spin";
+const COMBOBOX_CREATE_STICKY_WRAPPER_CLASSNAME = "border-border bg-popover rounded-b-lg border-t p-1";
+const COMBOBOX_BUTTON_BASE_CLASSNAME = "flex gap-2";
+const COMBOBOX_ICON_WRAPPER_CLASSNAME = "shrink-0";
+const COMBOBOX_ICON_CLASSNAME = "size-4";
+const COMBOBOX_LABEL_WRAPPER_CLASSNAME = "min-w-0 grow truncate text-left";
+const Combobox = memo(function Combobox({ multiple, selected: selectedProp, setSelected, onSelect, options, trigger, icon: IconProp, placeholder = DEFAULT_COMBOBOX_PLACEHOLDER, searchPlaceholder = DEFAULT_COMBOBOX_SEARCH_PLACEHOLDER, emptyState, createLabel, createIcon: CreateIcon = Plus, onCreate, buttonProps, labelProps, iconProps, popoverProps, shortcutHint, caret, side, open, onOpenChange, onSearchChange, shouldFilter = DEFAULT_COMBOBOX_SHOULD_FILTER, inputRight, inputClassName, optionRight, optionClassName, matchTriggerWidth, hideSearch = DEFAULT_COMBOBOX_HIDE_SEARCH, stagger = false, size = "default", children }) {
+	const isMultiple = isMultipleSelection(multiple, setSelected);
+	const reducedMotion = useReducedMotion();
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const effectiveSize = useMemo(() => {
+		if (size === "touch") return "touch";
+		if (isTouchDevice && size === "default") return "touch";
+		return size;
+	}, [size, isTouchDevice]);
+	const selected = useMemo(() => {
+		if (Array.isArray(selectedProp)) return selectedProp;
+		if (selectedProp) return [selectedProp];
+		return [];
+	}, [selectedProp]);
+	const [isOpenInternal, { open: openInternal, close: closeInternal }] = useDisclosure(false);
+	const isOpen = open ?? isOpenInternal;
+	const setIsOpen = useCallback((newOpen) => {
+		if (onOpenChange != null) onOpenChange(newOpen);
+		else if (open == null) if (newOpen) openInternal();
+		else closeInternal();
+	}, [
+		onOpenChange,
+		open,
+		openInternal,
+		closeInternal
+	]);
+	const [search, setSearch] = useInputState("");
+	const [isCreating, setIsCreating] = useState(false);
+	const handleSelect = useCallback((option) => {
+		onSelect?.(option);
+		if (!setSelected) return;
+		if (isMultiple) setSelected(selected.some(({ value }) => value === option.value) ? selected.filter(({ value }) => value !== option.value) : [...selected, option]);
+		else {
+			setSelected(selected.length > 0 && selected[0]?.value === option.value ? null : option);
+			setIsOpen(false);
+		}
+	}, [
+		onSelect,
+		setSelected,
+		isMultiple,
+		selected,
+		setIsOpen
+	]);
+	const sortedOptions = useMemo(() => {
+		if (!options) return;
+		if (search !== "") return options;
+		return [
+			...options.filter((o) => o.first === true && !selected.some((s) => s.value === o.value)),
+			...selected,
+			...options.filter((o) => o.first !== true && !selected.some((s) => s.value === o.value))
+		];
+	}, [
+		options,
+		search,
+		selected
+	]);
+	const handleOpenChange = useCallback((newOpen) => {
+		if (!newOpen) setSearch("");
+		setIsOpen?.(newOpen);
+	}, [setIsOpen, setSearch]);
+	const handleSearchChange = useCallback((newSearch) => {
+		setSearch(newSearch);
+		onSearchChange?.(newSearch);
+	}, [onSearchChange, setSearch]);
+	const handleCreate = useCallback(async () => {
+		setIsCreating(true);
+		if (await onCreate?.(search)) {
+			setSearch("");
+			setIsOpen(false);
+		}
+		setIsCreating(false);
+	}, [onCreate, search]);
+	const createOptionItem = useMemo(() => /* @__PURE__ */ jsxs(Command.Item, {
+		className: cn(COMBOBOX_CREATE_OPTION_ITEM_BASE_CLASSNAME, COMBOBOX_CREATE_OPTION_ITEM_SELECTED_CLASSNAME, optionClassName),
+		onSelect: () => void handleCreate(),
+		children: [isCreating ? /* @__PURE__ */ jsx(Loader2, { className: cn(COMBOBOX_CREATE_OPTION_ICON_CLASSNAME, COMBOBOX_CREATE_OPTION_ICON_LOADING_CLASSNAME) }) : /* @__PURE__ */ jsx(CreateIcon, { className: COMBOBOX_CREATE_OPTION_ICON_CLASSNAME }), /* @__PURE__ */ jsx("div", {
+			className: COMBOBOX_CREATE_OPTION_CONTENT_CLASSNAME,
+			children: createLabel?.(search) ?? `Create ${search ? `"${search}"` : "new option..."}`
+		})]
+	}), [
+		isCreating,
+		search,
+		createLabel,
+		optionClassName,
+		handleCreate
+	]);
+	const emptyContent = useMemo(() => {
+		if (shouldFilter) return /* @__PURE__ */ jsx(Empty, {
+			className: "text-muted-foreground flex min-h-12 items-center justify-center text-sm",
+			children: emptyState ?? DEFAULT_COMBOBOX_EMPTY_STATE
+		});
+		if ((sortedOptions?.length ?? 0) === 0) return /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex min-h-12 items-center justify-center text-sm",
+			children: emptyState ?? DEFAULT_COMBOBOX_EMPTY_STATE
+		});
+		return null;
+	}, [
+		shouldFilter,
+		sortedOptions?.length,
+		emptyState
+	]);
+	return /* @__PURE__ */ jsx(Popover, {
+		openPopover: isOpen,
+		setOpenPopover: handleOpenChange,
+		align: "start",
+		side,
+		onWheel: (e) => {
+			e.stopPropagation();
+		},
+		popoverContentClassName: cn(matchTriggerWidth === true && "sm:w-[var(--radix-popover-trigger-width)]", popoverProps?.contentClassName),
+		"data-state": isOpen ? "open" : "closed",
+		content: /* @__PURE__ */ jsx(motion.div, {
+			className: COMBOBOX_COMMAND_WRAPPER_CLASSNAME,
+			initial: reducedMotion ? void 0 : {
+				opacity: 0,
+				scale: .96,
+				y: -8
+			},
+			animate: reducedMotion ? void 0 : {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			},
+			exit: reducedMotion ? void 0 : {
+				opacity: 0,
+				scale: .96,
+				y: -8
+			},
+			transition: reducedMotion ? void 0 : SPRING_FLUID,
+			children: /* @__PURE__ */ jsxs(Command, {
+				loop: true,
+				shouldFilter,
+				children: [
+					!hideSearch && /* @__PURE__ */ jsxs("div", {
+						className: COMBOBOX_SEARCH_WRAPPER_CLASSNAME,
+						children: [
+							/* @__PURE__ */ jsx(Command.Input, {
+								placeholder: searchPlaceholder,
+								value: search,
+								onValueChange: handleSearchChange,
+								className: cn(COMBOBOX_INPUT_BASE_CLASSNAME, inputClassName),
+								onKeyDown: (e) => {
+									if (e.key === "Escape" || e.key === "Backspace" && !search) {
+										e.preventDefault();
+										e.stopPropagation();
+										setIsOpen(false);
+									}
+								}
+							}),
+							inputRight != null && /* @__PURE__ */ jsx("div", {
+								className: COMBOBOX_INPUT_RIGHT_WRAPPER_CLASSNAME,
+								children: inputRight
+							}),
+							shortcutHint != null && /* @__PURE__ */ jsx("kbd", {
+								className: COMBOBOX_SHORTCUT_HINT_CLASSNAME,
+								children: shortcutHint
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cn(COMBOBOX_OPTIONS_CONTAINER_BASE_CLASSNAME, onCreate != null && !multiple && COMBOBOX_OPTIONS_CONTAINER_WITH_CREATE_CLASSNAME),
+						children: /* @__PURE__ */ jsx(Command.List, {
+							className: COMBOBOX_COMMAND_LIST_CLASSNAME,
+							children: sortedOptions !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								sortedOptions.map((option, index) => /* @__PURE__ */ jsx(Option, {
+									option,
+									multiple: isMultiple,
+									selected: selected.some(({ value }) => value === option.value),
+									onSelect: () => handleSelect(option),
+									right: optionRight?.(option),
+									className: optionClassName,
+									index,
+									stagger: stagger ? !reducedMotion : void 0,
+									size: effectiveSize
+								}, `${String(option.label)}, ${option.value}`)),
+								onCreate != null && multiple === true && search.length > 0 && createOptionItem,
+								emptyContent
+							] }) : /* @__PURE__ */ jsx(Command.Loading, { children: /* @__PURE__ */ jsx("div", {
+								className: COMBOBOX_LOADING_WRAPPER_CLASSNAME,
+								children: /* @__PURE__ */ jsx(Loader2, { className: COMBOBOX_LOADING_ICON_CLASSNAME })
+							}) })
+						})
+					}),
+					onCreate != null && !multiple && /* @__PURE__ */ jsx("div", {
+						className: COMBOBOX_CREATE_STICKY_WRAPPER_CLASSNAME,
+						children: createOptionItem
+					})
+				]
+			})
+		}),
+		children: trigger ?? /* @__PURE__ */ jsxs(Button, {
+			variant: "secondary",
+			size: effectiveSize === "touch" ? "touch" : effectiveSize,
+			whileTap: reducedMotion ? void 0 : { scale: .98 },
+			"data-state": isOpen ? "open" : "closed",
+			...buttonProps,
+			className: cn(buttonProps?.className, COMBOBOX_BUTTON_BASE_CLASSNAME),
+			children: [
+				IconProp != null && /* @__PURE__ */ jsx("span", {
+					className: cn(COMBOBOX_ICON_WRAPPER_CLASSNAME, iconProps?.className),
+					children: isReactNode(IconProp) ? IconProp : /* @__PURE__ */ jsx(IconProp, { className: COMBOBOX_ICON_CLASSNAME })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(COMBOBOX_LABEL_WRAPPER_CLASSNAME, labelProps?.className),
+					children: children ?? (selected.length > 0 ? selected.map((option) => option.label).join(", ") : placeholder)
+				}),
+				caret != null && (caret === true ? /* @__PURE__ */ jsx(ChevronDown, { className: cn(COMBOBOX_CARET_ICON_BASE_CLASSNAME, !reducedMotion && COMBOBOX_CARET_ICON_TRANSITION_CLASSNAME, COMBOBOX_CARET_ICON_OPEN_CLASSNAME) }) : caret)
+			]
+		})
+	});
+});
+const COMBOBOX_OPTION_ITEM_SELECTED_CLASSNAME = "aria-selected:bg-accent aria-selected:text-accent-foreground data-[selected=true]:bg-accent/50";
+const COMBOBOX_OPTION_ITEM_DISABLED_CLASSNAME = "aria-disabled:pointer-events-none aria-disabled:opacity-50";
+const COMBOBOX_OPTION_ITEM_FOCUS_CLASSNAME = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+const STAGGER_DELAY_MS = .03;
+const MAX_STAGGER_ITEMS = 10;
+const COMBOBOX_OPTION_CHECKBOX_WRAPPER_CLASSNAME = "text-muted-foreground shrink-0";
+const COMBOBOX_OPTION_CHECKBOX_SELECTED_CLASSNAME = "text-foreground";
+const COMBOBOX_OPTION_CHECKBOX_ICON_CLASSNAME = "size-4";
+const COMBOBOX_OPTION_CONTENT_WRAPPER_CLASSNAME = "flex min-w-0 grow items-center gap-2";
+const COMBOBOX_OPTION_ICON_WRAPPER_CLASSNAME = "text-muted-foreground shrink-0";
+const COMBOBOX_OPTION_ICON_CLASSNAME = "size-4";
+const COMBOBOX_OPTION_LABEL_CLASSNAME = "grow truncate";
+const COMBOBOX_OPTION_CHECK_ICON_CLASSNAME = "text-foreground size-4 shrink-0";
+const COMBOBOX_OPTION_SEPARATOR_CLASSNAME = "bg-border -mx-1 my-1 h-px";
+const Option = memo(function Option({ option, onSelect, multiple, selected, right, className, index, stagger, size }) {
+	const hasDisabledTooltip = Boolean(option.disabledTooltip);
+	const itemClassName = useMemo(() => cn("relative flex cursor-default select-none items-center gap-3 rounded-sm outline-none", size === "sm" && "px-2 py-1 text-xs", size === "default" && "px-2 py-1.5 text-sm", size === "lg" && "px-3 py-2 text-base", size === "touch" && "min-h-[44px] px-3 py-2.5 text-base md:text-sm", COMBOBOX_OPTION_ITEM_SELECTED_CLASSNAME, COMBOBOX_OPTION_ITEM_DISABLED_CLASSNAME, COMBOBOX_OPTION_ITEM_FOCUS_CLASSNAME, className), [size, className]);
+	const staggerDelay = useMemo(() => {
+		if (!stagger || index === void 0) return 0;
+		return Math.min(index, MAX_STAGGER_ITEMS) * STAGGER_DELAY_MS;
+	}, [stagger, index]);
+	const checkboxWrapperClassName = useMemo(() => cn(COMBOBOX_OPTION_CHECKBOX_WRAPPER_CLASSNAME, selected && COMBOBOX_OPTION_CHECKBOX_SELECTED_CLASSNAME), [selected]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DisabledTooltip, {
+		disabledTooltip: option.disabledTooltip,
+		children: /* @__PURE__ */ jsx(Command.Item, {
+			asChild: true,
+			disabled: hasDisabledTooltip,
+			onSelect,
+			value: String(option.label) + option.value,
+			children: /* @__PURE__ */ jsxs(motion.div, {
+				className: itemClassName,
+				"data-selected": selected,
+				"data-disabled": hasDisabledTooltip,
+				initial: stagger ? {
+					opacity: 0,
+					x: -4
+				} : false,
+				animate: stagger ? {
+					opacity: 1,
+					x: 0
+				} : false,
+				transition: stagger ? {
+					type: "spring",
+					...SPRING_TACTILE,
+					delay: staggerDelay
+				} : void 0,
+				children: [
+					multiple ? /* @__PURE__ */ jsx("div", {
+						className: checkboxWrapperClassName,
+						children: selected ? /* @__PURE__ */ jsx(SquareCheck, { className: COMBOBOX_OPTION_CHECKBOX_ICON_CLASSNAME }) : /* @__PURE__ */ jsx(Square, { className: COMBOBOX_OPTION_CHECKBOX_ICON_CLASSNAME })
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: COMBOBOX_OPTION_CONTENT_WRAPPER_CLASSNAME,
+						children: [option.icon != null ? /* @__PURE__ */ jsx("span", {
+							className: COMBOBOX_OPTION_ICON_WRAPPER_CLASSNAME,
+							children: isReactNode(option.icon) ? option.icon : /* @__PURE__ */ jsx(option.icon, { className: COMBOBOX_OPTION_ICON_CLASSNAME })
+						}) : null, /* @__PURE__ */ jsx("span", {
+							className: COMBOBOX_OPTION_LABEL_CLASSNAME,
+							children: option.label
+						})]
+					}),
+					right,
+					!multiple && selected ? /* @__PURE__ */ jsx(Check, { className: COMBOBOX_OPTION_CHECK_ICON_CLASSNAME }) : null
+				]
+			})
+		})
+	}), option.separatorAfter === true && /* @__PURE__ */ jsx(Command.Separator, { className: COMBOBOX_OPTION_SEPARATOR_CLASSNAME })] });
+});
+Option.displayName = "ComboboxOption";
+const DisabledTooltip = memo(function DisabledTooltip({ children, disabledTooltip }) {
+	if (disabledTooltip) return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("div", { children })
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: disabledTooltip })] }) });
+	return children;
+});
+DisabledTooltip.displayName = "ComboboxDisabledTooltip";
+const isReactNode = (element) => isValidElement(element);
+const Empty = forwardRef((props, forwardedRef) => {
+	if (!useCommandState((state) => state.filtered.count === 0)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardedRef,
+		"cmdk-empty": "",
+		role: "presentation",
+		...props
+	});
+});
+Empty.displayName = "Empty";
+
+//#endregion
+export { Combobox as t };
+//# sourceMappingURL=combobox-uEKksQFR.mjs.map

package/dist/combobox-uEKksQFR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-uEKksQFR.mjs","names":[],"sources":["../src/components/forms/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\n/**\n * @fileoverview Combobox Component - Premium Harmony V2\n *\n * Autocomplete/searchable select built on cmdk with Premium Harmony V2 motion standards.\n * Supports single and multiple selection with rich options, touch detection, and accessibility.\n * Features fuzzy search, stagger animations, and WCAG-compliant touch targets.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Premium Harmony V2 spring physics for smooth animations\n * - Touch detection with automatic sizing for mobile devices\n * - Reduced motion support for accessibility\n * - Super light/dark mode with seamless switching\n * - cmdk integration for fuzzy search\n * - Single and multiple selection modes\n * - Optional stagger animation on dropdown open\n * - Custom option icons and disabled states\n * - Create new option support with async\n * - Keyboard navigation and shortcuts\n * - Customizable trigger button\n * - Option separators and tooltips\n * - WCAG 2.5.5 compliant 44px minimum touch targets\n * - Data attributes for state tracking (data-state, data-selected)\n * - Enhanced focus styles with semantic color tokens\n * - Mantine hooks for state management\n *\n * @module @od-oneapp/uni-ui/components/combobox\n * @component Combobox\n *\n * @useCases\n * - Form inputs: Country selector, language picker, category assignment\n * - Search interfaces: Fuzzy search with autocomplete, command palette, quick actions\n * - Multi-select: Tag assignment, user permissions, category filtering\n * - Creation flows: Add new options dynamically, inline entity creation\n * - Touch interfaces: Mobile-first dropdowns with WCAG 2.5.5 compliant 44px touch targets\n * - Accessible selects: Screen reader support, keyboard navigation, focus management\n * - Rich options: Custom icons, tooltips, separators, disabled states\n *\n * @example\n * // Single selection\n * <Combobox options={options} selected={selected} setSelected={setSelected} placeholder=\"Select option...\" caret />\n *\n * @example\n * // Multiple selection with stagger animation\n * <Combobox multiple stagger options={options} selected={selectedItems} setSelected={setSelectedItems} />\n *\n * @example\n * // Touch-optimized for mobile\n * <Combobox size=\"touch\" options={options} selected={selected} setSelected={setSelected} />\n */\n\nimport {\n  forwardRef,\n  isValidElement,\n  memo,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLProps,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { useDisclosure, useInputState, useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { Command, useCommandState } from 'cmdk';\nimport {\n  Check,\n  ChevronDown,\n  Loader2,\n  Plus,\n  Square,\n  SquareCheck,\n  type LucideIcon,\n} from 'lucide-react';\nimport { motion } from 'motion/react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../../elements/atoms/button';\nimport { Popover, type PopoverProps } from '../../elements/organisms/popover';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../../elements/organisms/tooltip';\n\n/**\n * Premium Harmony V2 Spring Physics Constants\n * Optimized for tactile, fluid, and gentle interactions\n */\nconst SPRING_TACTILE = { stiffness: 400, damping: 25 } as const;\nconst SPRING_FLUID = { stiffness: 300, damping: 30 } as const;\nconst SPRING_GENTLE = { stiffness: 200, damping: 28 } as const;\n\nexport interface ComboboxOption<TMeta = unknown> {\n  label: string | ReactNode;\n  value: string;\n  icon?: LucideIcon | ReactNode;\n  disabledTooltip?: ReactNode;\n  meta?: TMeta;\n  separatorAfter?: boolean;\n  first?: boolean;\n}\n\nexport interface ComboboxProps<\n  TMultiple extends boolean | undefined,\n  TMeta,\n> extends PropsWithChildren {\n  multiple?: TMultiple;\n  selected: TMultiple extends true ? ComboboxOption<TMeta>[] : ComboboxOption<TMeta> | null;\n  setSelected?: TMultiple extends true\n    ? (options: ComboboxOption<TMeta>[]) => void\n    : (option: ComboboxOption<TMeta> | null) => void;\n  onSelect?: (option: ComboboxOption<TMeta>) => void;\n  options?: ComboboxOption<TMeta>[];\n  trigger?: ReactNode;\n  icon?: LucideIcon | ReactNode;\n  placeholder?: ReactNode;\n  searchPlaceholder?: string;\n  emptyState?: ReactNode;\n  createLabel?: (search: string) => ReactNode;\n  createIcon?: LucideIcon;\n  onCreate?: (search: string) => Promise<boolean>;\n  buttonProps?: React.ComponentProps<typeof Button>;\n  labelProps?: { className?: string };\n  iconProps?: { className?: string };\n  popoverProps?: { contentClassName?: string };\n  shortcutHint?: string;\n  caret?: boolean | ReactNode;\n  side?: PopoverProps['side'];\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  onSearchChange?: (search: string) => void;\n  shouldFilter?: boolean;\n  inputRight?: ReactNode;\n  inputClassName?: string;\n  optionRight?: (option: ComboboxOption) => ReactNode;\n  optionClassName?: string;\n  matchTriggerWidth?: boolean;\n  hideSearch?: boolean;\n  /** Enable stagger animation for options when dropdown opens */\n  stagger?: boolean;\n  /** Sizing variants */\n  size?: 'sm' | 'default' | 'lg' | 'touch';\n}\n\nfunction isMultipleSelection(\n  multiple: boolean | undefined,\n  setSelected: unknown,\n): setSelected is (tags: ComboboxOption[]) => void {\n  return multiple === true;\n}\n\n// Default values - moved outside component to prevent recreation\nconst DEFAULT_COMBOBOX_PLACEHOLDER = 'Select...';\nconst DEFAULT_COMBOBOX_SEARCH_PLACEHOLDER = 'Search...';\nconst DEFAULT_COMBOBOX_SHOULD_FILTER = true;\nconst DEFAULT_COMBOBOX_HIDE_SEARCH = false;\nconst DEFAULT_COMBOBOX_EMPTY_STATE = 'No matches';\n\n// Static classNames - moved outside component to prevent recreation\n// Premium Harmony V2: Semantic color tokens for theming\nconst COMBOBOX_CARET_ICON_BASE_CLASSNAME = 'text-muted-foreground ml-1 size-4 shrink-0';\nconst COMBOBOX_CARET_ICON_TRANSITION_CLASSNAME = 'transition-transform duration-75';\nconst COMBOBOX_CARET_ICON_OPEN_CLASSNAME = 'group-data-[state=open]:rotate-180';\nconst COMBOBOX_CREATE_OPTION_ITEM_BASE_CLASSNAME =\n  'text-foreground flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-nowrap hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors';\nconst COMBOBOX_CREATE_OPTION_ITEM_SELECTED_CLASSNAME = 'data-[selected=true]:bg-accent/50';\nconst COMBOBOX_CREATE_OPTION_ICON_CLASSNAME = 'size-4 shrink-0';\nconst COMBOBOX_CREATE_OPTION_ICON_LOADING_CLASSNAME = 'animate-spin';\nconst COMBOBOX_CREATE_OPTION_CONTENT_CLASSNAME = 'grow truncate';\nconst COMBOBOX_COMMAND_WRAPPER_CLASSNAME = 'pointer-events-auto';\nconst COMBOBOX_SEARCH_WRAPPER_CLASSNAME =\n  'border-border bg-background flex items-center overflow-hidden rounded-t-lg border-b';\nconst COMBOBOX_INPUT_BASE_CLASSNAME =\n  'placeholder:text-muted-foreground text-foreground grow border-0 bg-transparent py-3 pr-2 pl-4 outline-none focus:ring-0 focus-visible:outline-none sm:text-sm';\nconst COMBOBOX_INPUT_RIGHT_WRAPPER_CLASSNAME = 'mr-2';\nconst COMBOBOX_SHORTCUT_HINT_CLASSNAME =\n  'border-border bg-muted text-muted-foreground mr-2 hidden shrink-0 rounded border px-2 py-0.5 text-xs font-light md:block';\nconst COMBOBOX_OPTIONS_CONTAINER_BASE_CLASSNAME = 'max-h-[min(50vh,250px)] overflow-auto';\nconst COMBOBOX_OPTIONS_CONTAINER_WITH_CREATE_CLASSNAME = 'max-h-[calc(min(50vh,250px)-3.5rem)]';\nconst COMBOBOX_COMMAND_LIST_CLASSNAME = 'flex w-full min-w-[100px] flex-col gap-1 p-1';\nconst COMBOBOX_LOADING_WRAPPER_CLASSNAME = 'flex h-12 items-center justify-center';\nconst COMBOBOX_LOADING_ICON_CLASSNAME = 'text-muted-foreground size-4 animate-spin';\nconst COMBOBOX_CREATE_STICKY_WRAPPER_CLASSNAME =\n  'border-border bg-popover rounded-b-lg border-t p-1';\nconst COMBOBOX_BUTTON_BASE_CLASSNAME = 'flex gap-2';\nconst COMBOBOX_ICON_WRAPPER_CLASSNAME = 'shrink-0';\nconst COMBOBOX_ICON_CLASSNAME = 'size-4';\nconst COMBOBOX_LABEL_WRAPPER_CLASSNAME = 'min-w-0 grow truncate text-left';\n\nexport const Combobox = memo(function Combobox({\n  multiple,\n  selected: selectedProp,\n  setSelected,\n  onSelect,\n  options,\n  trigger,\n  icon: IconProp,\n  placeholder = DEFAULT_COMBOBOX_PLACEHOLDER,\n  searchPlaceholder = DEFAULT_COMBOBOX_SEARCH_PLACEHOLDER,\n  emptyState,\n  createLabel,\n  createIcon: CreateIcon = Plus,\n  onCreate,\n  buttonProps,\n  labelProps,\n  iconProps,\n  popoverProps,\n  shortcutHint,\n  caret,\n  side,\n  open,\n  onOpenChange,\n  onSearchChange,\n  shouldFilter = DEFAULT_COMBOBOX_SHOULD_FILTER,\n  inputRight,\n  inputClassName,\n  optionRight,\n  optionClassName,\n  matchTriggerWidth,\n  hideSearch = DEFAULT_COMBOBOX_HIDE_SEARCH,\n  stagger = false,\n  size = 'default',\n  children,\n}: ComboboxProps<boolean | undefined, unknown>) {\n  const isMultiple = isMultipleSelection(multiple, setSelected);\n  const reducedMotion = useReducedMotion();\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Auto-adjust size for touch devices if not explicitly set\n  const effectiveSize = useMemo(() => {\n    if (size === 'touch') return 'touch';\n    if (isTouchDevice && size === 'default') return 'touch';\n    return size;\n  }, [size, isTouchDevice]);\n\n  // Ensure selectedProp is an array\n  const selected = useMemo(() => {\n    if (Array.isArray(selectedProp)) return selectedProp;\n    if (selectedProp) return [selectedProp];\n    return [];\n  }, [selectedProp]);\n\n  // Use Mantine's useDisclosure for boolean open/close state\n  const [isOpenInternal, { open: openInternal, close: closeInternal }] = useDisclosure(false);\n  const isOpen = open ?? isOpenInternal;\n\n  // Memoize setIsOpen handler\n  const setIsOpen = useCallback(\n    (newOpen: boolean) => {\n      if (onOpenChange != null) {\n        onOpenChange(newOpen);\n      } else if (open == null) {\n        if (newOpen) openInternal();\n        else closeInternal();\n      }\n    },\n    [onOpenChange, open, openInternal, closeInternal],\n  );\n\n  // Use Mantine's useInputState for simplified search input state management\n  const [search, setSearch] = useInputState('');\n  const [isCreating, setIsCreating] = useState(false);\n\n  // Memoize select handler\n  const handleSelect = useCallback(\n    (option: ComboboxOption) => {\n      onSelect?.(option);\n\n      if (!setSelected) return;\n\n      if (isMultiple) {\n        const isAlreadySelected = selected.some(({ value }) => value === option.value);\n        (setSelected as (options: ComboboxOption[]) => void)(\n          isAlreadySelected\n            ? selected.filter(({ value }) => value !== option.value)\n            : [...selected, option],\n        );\n      } else {\n        (setSelected as (option: ComboboxOption | null) => void)(\n          selected.length > 0 && selected[0]?.value === option.value ? null : option,\n        );\n        setIsOpen(false);\n      }\n    },\n    [onSelect, setSelected, isMultiple, selected, setIsOpen],\n  );\n\n  // Compute sorted options directly without useEffect\n  const sortedOptions = useMemo(() => {\n    if (!options) return;\n    if (search !== '') return options;\n    return [\n      ...options.filter(o => o.first === true && !selected.some(s => s.value === o.value)),\n      ...selected,\n      ...options.filter(o => o.first !== true && !selected.some(s => s.value === o.value)),\n    ];\n  }, [options, search, selected]);\n\n  // Reset search when the popover closes\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      if (!newOpen) {\n        setSearch('');\n      }\n      setIsOpen?.(newOpen);\n    },\n    [setIsOpen, setSearch],\n  );\n\n  // Notify parent of search changes\n  const handleSearchChange = useCallback(\n    (newSearch: string) => {\n      setSearch(newSearch);\n      onSearchChange?.(newSearch);\n    },\n    [onSearchChange, setSearch],\n  );\n\n  const handleCreate = useCallback(async () => {\n    setIsCreating(true);\n    const success = await onCreate?.(search);\n    if (success) {\n      setSearch('');\n      setIsOpen(false);\n    }\n    setIsCreating(false);\n  }, [onCreate, search]);\n\n  // Memoize create option item\n  const createOptionItem = useMemo(\n    () => (\n      <Command.Item\n        className={cn(\n          COMBOBOX_CREATE_OPTION_ITEM_BASE_CLASSNAME,\n          COMBOBOX_CREATE_OPTION_ITEM_SELECTED_CLASSNAME,\n          optionClassName,\n        )}\n        onSelect={() => void handleCreate()}\n      >\n        {isCreating ? (\n          <Loader2\n            className={cn(\n              COMBOBOX_CREATE_OPTION_ICON_CLASSNAME,\n              COMBOBOX_CREATE_OPTION_ICON_LOADING_CLASSNAME,\n            )}\n          />\n        ) : (\n          <CreateIcon className={COMBOBOX_CREATE_OPTION_ICON_CLASSNAME} />\n        )}\n        <div className={COMBOBOX_CREATE_OPTION_CONTENT_CLASSNAME}>\n          {createLabel?.(search) ?? `Create ${search ? `\"${search}\"` : 'new option...'}`}\n        </div>\n      </Command.Item>\n    ),\n    [isCreating, search, createLabel, optionClassName, handleCreate],\n  );\n\n  // Memoize empty content\n  const emptyContent = useMemo<ReactNode>(() => {\n    if (shouldFilter) {\n      return (\n        <Empty className=\"text-muted-foreground flex min-h-12 items-center justify-center text-sm\">\n          {emptyState ?? DEFAULT_COMBOBOX_EMPTY_STATE}\n        </Empty>\n      );\n    }\n    if ((sortedOptions?.length ?? 0) === 0) {\n      return (\n        <div className=\"text-muted-foreground flex min-h-12 items-center justify-center text-sm\">\n          {emptyState ?? DEFAULT_COMBOBOX_EMPTY_STATE}\n        </div>\n      );\n    }\n    return null;\n  }, [shouldFilter, sortedOptions?.length, emptyState]);\n\n  return (\n    <Popover\n      openPopover={isOpen}\n      setOpenPopover={handleOpenChange}\n      align=\"start\"\n      side={side}\n      onWheel={e => {\n        // Allows scrolling to work when the popover's in a modal\n        e.stopPropagation();\n      }}\n      popoverContentClassName={cn(\n        matchTriggerWidth === true && 'sm:w-[var(--radix-popover-trigger-width)]',\n        popoverProps?.contentClassName,\n      )}\n      data-state={isOpen ? 'open' : 'closed'}\n      content={\n        <motion.div\n          className={COMBOBOX_COMMAND_WRAPPER_CLASSNAME}\n          initial={reducedMotion ? undefined : { opacity: 0, scale: 0.96, y: -8 }}\n          animate={reducedMotion ? undefined : { opacity: 1, scale: 1, y: 0 }}\n          exit={reducedMotion ? undefined : { opacity: 0, scale: 0.96, y: -8 }}\n          transition={reducedMotion ? undefined : SPRING_FLUID}\n        >\n          <Command loop shouldFilter={shouldFilter}>\n            {!hideSearch && (\n              <div className={COMBOBOX_SEARCH_WRAPPER_CLASSNAME}>\n                <Command.Input\n                  placeholder={searchPlaceholder}\n                  value={search}\n                  onValueChange={handleSearchChange}\n                  className={cn(COMBOBOX_INPUT_BASE_CLASSNAME, inputClassName)}\n                  onKeyDown={(e: any) => {\n                    if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      setIsOpen(false);\n                    }\n                  }}\n                />\n                {inputRight != null && (\n                  <div className={COMBOBOX_INPUT_RIGHT_WRAPPER_CLASSNAME}>{inputRight}</div>\n                )}\n                {shortcutHint != null && (\n                  <kbd className={COMBOBOX_SHORTCUT_HINT_CLASSNAME}>{shortcutHint}</kbd>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                COMBOBOX_OPTIONS_CONTAINER_BASE_CLASSNAME,\n                onCreate != null && !multiple && COMBOBOX_OPTIONS_CONTAINER_WITH_CREATE_CLASSNAME,\n              )}\n            >\n              <Command.List className={COMBOBOX_COMMAND_LIST_CLASSNAME}>\n                {sortedOptions !== undefined ? (\n                  <>\n                    {sortedOptions.map((option, index) => (\n                      <Option\n                        key={`${String(option.label)}, ${option.value}`}\n                        option={option}\n                        multiple={isMultiple}\n                        selected={selected.some(({ value }) => value === option.value)}\n                        onSelect={() => handleSelect(option)}\n                        right={optionRight?.(option)}\n                        className={optionClassName}\n                        index={index}\n                        stagger={stagger ? !reducedMotion : undefined}\n                        size={effectiveSize}\n                      />\n                    ))}\n                    {/* for multiple selection, the create option item is shown at the bottom of the list */}\n                    {onCreate != null && multiple === true && search.length > 0 && createOptionItem}\n                    {emptyContent}\n                  </>\n                ) : (\n                  // undefined data / explicit loading state\n                  <Command.Loading>\n                    <div className={COMBOBOX_LOADING_WRAPPER_CLASSNAME}>\n                      <Loader2 className={COMBOBOX_LOADING_ICON_CLASSNAME} />\n                    </div>\n                  </Command.Loading>\n                )}\n              </Command.List>\n            </div>\n            {/* for single selection, the create option item is shown as a sticky item outside of the scroll container */}\n            {onCreate != null && !multiple && (\n              <div className={COMBOBOX_CREATE_STICKY_WRAPPER_CLASSNAME}>{createOptionItem}</div>\n            )}\n          </Command>\n        </motion.div>\n      }\n    >\n      {trigger ?? (\n        <Button\n          variant=\"secondary\"\n          size={effectiveSize === 'touch' ? 'touch' : (effectiveSize as any)}\n          whileTap={reducedMotion ? undefined : { scale: 0.98 }}\n          data-state={isOpen ? 'open' : 'closed'}\n          {...buttonProps}\n          className={cn(buttonProps?.className, COMBOBOX_BUTTON_BASE_CLASSNAME)}\n        >\n          {IconProp != null && (\n            <span className={cn(COMBOBOX_ICON_WRAPPER_CLASSNAME, iconProps?.className)}>\n              {isReactNode(IconProp) ? IconProp : <IconProp className={COMBOBOX_ICON_CLASSNAME} />}\n            </span>\n          )}\n          <span className={cn(COMBOBOX_LABEL_WRAPPER_CLASSNAME, labelProps?.className)}>\n            {}\n            {children ??\n              (selected.length > 0 ? selected.map(option => option.label).join(', ') : placeholder)}\n          </span>\n          {caret != null &&\n            (caret === true ? (\n              <ChevronDown\n                className={cn(\n                  COMBOBOX_CARET_ICON_BASE_CLASSNAME,\n                  !reducedMotion && COMBOBOX_CARET_ICON_TRANSITION_CLASSNAME,\n                  COMBOBOX_CARET_ICON_OPEN_CLASSNAME,\n                )}\n              />\n            ) : (\n              caret\n            ))}\n        </Button>\n      )}\n    </Popover>\n  );\n});\n\n// Static classNames for Option component - moved outside component to prevent recreation\nconst COMBOBOX_OPTION_ITEM_SELECTED_CLASSNAME =\n  'aria-selected:bg-accent aria-selected:text-accent-foreground data-[selected=true]:bg-accent/50';\nconst COMBOBOX_OPTION_ITEM_DISABLED_CLASSNAME =\n  'aria-disabled:pointer-events-none aria-disabled:opacity-50';\nconst COMBOBOX_OPTION_ITEM_FOCUS_CLASSNAME =\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';\n// Stagger delay per item (30ms)\nconst STAGGER_DELAY_MS = 0.03;\n// Maximum stagger delay to prevent long waits (caps at 10 items)\nconst MAX_STAGGER_ITEMS = 10;\nconst COMBOBOX_OPTION_CHECKBOX_WRAPPER_CLASSNAME = 'text-muted-foreground shrink-0';\nconst COMBOBOX_OPTION_CHECKBOX_SELECTED_CLASSNAME = 'text-foreground';\nconst COMBOBOX_OPTION_CHECKBOX_ICON_CLASSNAME = 'size-4';\nconst COMBOBOX_OPTION_CONTENT_WRAPPER_CLASSNAME = 'flex min-w-0 grow items-center gap-2';\nconst COMBOBOX_OPTION_ICON_WRAPPER_CLASSNAME = 'text-muted-foreground shrink-0';\nconst COMBOBOX_OPTION_ICON_CLASSNAME = 'size-4';\nconst COMBOBOX_OPTION_LABEL_CLASSNAME = 'grow truncate';\nconst COMBOBOX_OPTION_CHECK_ICON_CLASSNAME = 'text-foreground size-4 shrink-0';\nconst COMBOBOX_OPTION_SEPARATOR_CLASSNAME = 'bg-border -mx-1 my-1 h-px';\n\nconst Option = memo(function Option({\n  option,\n  onSelect,\n  multiple,\n  selected,\n  right,\n  className,\n  index,\n  stagger,\n  size,\n}: {\n  option: ComboboxOption;\n  onSelect: () => void;\n  multiple: boolean;\n  selected: boolean;\n  right?: ReactNode;\n  className?: string;\n  index?: number;\n  stagger?: boolean;\n  size?: 'sm' | 'default' | 'lg' | 'touch';\n}) {\n  const hasDisabledTooltip = Boolean(option.disabledTooltip);\n\n  // Memoize item className\n  const itemClassName = useMemo(\n    () =>\n      cn(\n        'relative flex cursor-default select-none items-center gap-3 rounded-sm outline-none',\n        size === 'sm' && 'px-2 py-1 text-xs',\n        size === 'default' && 'px-2 py-1.5 text-sm',\n        size === 'lg' && 'px-3 py-2 text-base',\n        size === 'touch' && 'min-h-[44px] px-3 py-2.5 text-base md:text-sm',\n        COMBOBOX_OPTION_ITEM_SELECTED_CLASSNAME,\n        COMBOBOX_OPTION_ITEM_DISABLED_CLASSNAME,\n        COMBOBOX_OPTION_ITEM_FOCUS_CLASSNAME,\n        className,\n      ),\n    [size, className],\n  );\n\n  // Memoize stagger animation delay style\n  const staggerDelay = useMemo(() => {\n    if (!stagger || index === undefined) return 0;\n    return Math.min(index, MAX_STAGGER_ITEMS) * STAGGER_DELAY_MS;\n  }, [stagger, index]);\n\n  // Memoize checkbox wrapper className\n  const checkboxWrapperClassName = useMemo(\n    () =>\n      cn(\n        COMBOBOX_OPTION_CHECKBOX_WRAPPER_CLASSNAME,\n        selected && COMBOBOX_OPTION_CHECKBOX_SELECTED_CLASSNAME,\n      ),\n    [selected],\n  );\n\n  return (\n    <>\n      <DisabledTooltip disabledTooltip={option.disabledTooltip}>\n        <Command.Item\n          asChild\n          disabled={hasDisabledTooltip}\n          onSelect={onSelect}\n          value={String(option.label) + option.value}\n        >\n          <motion.div\n            className={itemClassName}\n            data-selected={selected}\n            data-disabled={hasDisabledTooltip}\n            initial={stagger ? { opacity: 0, x: -4 } : false}\n            animate={stagger ? { opacity: 1, x: 0 } : false}\n            transition={\n              stagger\n                ? {\n                    type: 'spring',\n                    ...SPRING_TACTILE,\n                    delay: staggerDelay,\n                  }\n                : undefined\n            }\n          >\n            {multiple ? (\n              <div className={checkboxWrapperClassName}>\n                {selected ? (\n                  <SquareCheck className={COMBOBOX_OPTION_CHECKBOX_ICON_CLASSNAME} />\n                ) : (\n                  <Square className={COMBOBOX_OPTION_CHECKBOX_ICON_CLASSNAME} />\n                )}\n              </div>\n            ) : null}\n            <div className={COMBOBOX_OPTION_CONTENT_WRAPPER_CLASSNAME}>\n              {option.icon != null ? (\n                <span className={COMBOBOX_OPTION_ICON_WRAPPER_CLASSNAME}>\n                  {isReactNode(option.icon) ? (\n                    option.icon\n                  ) : (\n                    <option.icon className={COMBOBOX_OPTION_ICON_CLASSNAME} />\n                  )}\n                </span>\n              ) : null}\n              <span className={COMBOBOX_OPTION_LABEL_CLASSNAME}>{option.label}</span>\n            </div>\n            {right}\n            {!multiple && selected ? (\n              <Check className={COMBOBOX_OPTION_CHECK_ICON_CLASSNAME} />\n            ) : null}\n          </motion.div>\n        </Command.Item>\n      </DisabledTooltip>\n      {option.separatorAfter === true && (\n        <Command.Separator className={COMBOBOX_OPTION_SEPARATOR_CLASSNAME} />\n      )}\n    </>\n  );\n});\nOption.displayName = 'ComboboxOption';\n\nconst DisabledTooltip = memo(function DisabledTooltip({\n  children,\n  disabledTooltip,\n}: PropsWithChildren<{ disabledTooltip: ReactNode }>) {\n  if (disabledTooltip) {\n    return (\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <div>{children}</div>\n          </TooltipTrigger>\n          <TooltipContent>{disabledTooltip}</TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  }\n  return children;\n});\nDisabledTooltip.displayName = 'ComboboxDisabledTooltip';\n\nconst isReactNode = (element: unknown): element is ReactNode => isValidElement(element);\n\n// Custom Empty component because our current cmdk version has an issue with first render\nconst Empty = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>((props, forwardedRef) => {\n  const render = useCommandState(state => state.filtered.count === 0);\n\n  if (!render) return null;\n  // eslint-disable-next-line react/no-unknown-property\n  return <div ref={forwardedRef} cmdk-empty=\"\" role=\"presentation\" {...props} />;\n});\nEmpty.displayName = 'Empty';\n"],"mappings":"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"}