@papernote/ui 2.0.0 → 2.0.2

package/dist/index.esm.js

@@ -705,15 +705,15 @@ function usePrefersMobile() {
 
 // Size classes for trigger button
 const sizeClasses$d = {
-    sm: 'h-8 text-sm py-1',
-    md: 'h-10 text-base py-2',
-    lg: 'h-12 text-base py-3 min-h-touch', // 44px touch target
+    sm: "h-8 text-sm py-1",
+    md: "h-10 text-base py-2",
+    lg: "h-12 text-base py-3 min-h-touch", // 44px touch target
 };
 // Size classes for options
 const optionSizeClasses = {
-    sm: 'py-2 text-sm',
-    md: 'py-2.5 text-sm',
-    lg: 'py-3.5 text-base min-h-touch', // 44px touch target for mobile
+    sm: "py-2 text-sm",
+    md: "py-2.5 text-sm",
+    lg: "py-3.5 text-base min-h-touch", // 44px touch target for mobile
 };
 /**
  * Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
@@ -786,9 +786,9 @@ const optionSizeClasses = {
  * ```
  */
 const Select = forwardRef((props, ref) => {
-    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', usePortal = true, required = false, } = props;
+    const { options = [], groups = [], value, onChange, placeholder = "Select an option", searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = "300px", virtualItemHeight = 42, size = "md", mobileMode = "auto", usePortal = true, required = false, } = props;
     const [isOpen, setIsOpen] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
+    const [searchQuery, setSearchQuery] = useState("");
     const [scrollTop, setScrollTop] = useState(0);
     const [activeDescendant] = useState(undefined);
     const [dropdownPosition, setDropdownPosition] = useState(null);
@@ -801,10 +801,10 @@ const Select = forwardRef((props, ref) => {
     const nativeSelectRef = useRef(null);
     // Detect mobile viewport
     const isMobile = useIsMobile();
-    const useMobileSheet = mobileMode === 'auto' && isMobile;
-    const useNativeSelect = mobileMode === 'native' && isMobile;
+    const useMobileSheet = mobileMode === "auto" && isMobile;
+    const useNativeSelect = mobileMode === "native" && isMobile;
     // Auto-size for mobile
-    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
+    const effectiveSize = isMobile && size === "md" ? "lg" : size;
     // Generate unique IDs for ARIA
     const labelId = useId();
     const listboxId = useId();
@@ -818,11 +818,8 @@ const Select = forwardRef((props, ref) => {
         close: () => setIsOpen(false),
     }));
     // Flatten all options (from both options and groups)
-    const allOptions = [
-        ...options,
-        ...groups.flatMap(group => group.options)
-    ];
-    const selectedOption = allOptions.find(opt => opt.value === value);
+    const allOptions = [...options, ...groups.flatMap((group) => group.options)];
+    const selectedOption = allOptions.find((opt) => opt.value === value);
     // Filter options/groups based on search
     const getFilteredData = () => {
         if (!searchable || !searchQuery) {
@@ -830,41 +827,58 @@ const Select = forwardRef((props, ref) => {
         }
         const query = searchQuery.toLowerCase();
         // Filter flat options
-        const filteredOptions = options.filter(opt => opt.label.toLowerCase().includes(query));
+        const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(query));
         // Filter grouped options
         const filteredGroups = groups
-            .map(group => ({
+            .map((group) => ({
             ...group,
-            options: group.options.filter(opt => opt.label.toLowerCase().includes(query))
+            options: group.options.filter((opt) => opt.label.toLowerCase().includes(query)),
         }))
-            .filter(group => group.options.length > 0);
+            .filter((group) => group.options.length > 0);
         return { options: filteredOptions, groups: filteredGroups };
     };
     const { options: filteredOptions, groups: filteredGroups } = getFilteredData();
     // Virtual scrolling calculations
-    const totalItems = filteredOptions.length + filteredGroups.flatMap(g => g.options).length;
+    const totalItems = filteredOptions.length + filteredGroups.flatMap((g) => g.options).length;
     const useVirtualScrolling = virtualized && totalItems > 50;
     const visibleRangeStart = useVirtualScrolling
         ? Math.floor(scrollTop / virtualItemHeight)
         : 0;
     const visibleRangeEnd = useVirtualScrolling
-        ? Math.min(visibleRangeStart + Math.ceil(parseInt(virtualHeight) / virtualItemHeight) + 5, totalItems)
+        ? Math.min(visibleRangeStart +
+            Math.ceil(parseInt(virtualHeight) / virtualItemHeight) +
+            5, totalItems)
         : totalItems;
     // Flatten all filtered items for virtualization
     const allFilteredItems = [
-        ...filteredOptions.map((opt, idx) => ({ type: 'option', option: opt, groupIndex: -1, optionIndex: idx })),
-        ...filteredGroups.flatMap((group, groupIdx) => group.options.map((opt, optIdx) => ({ type: 'grouped', option: opt, groupIndex: groupIdx, optionIndex: optIdx, groupLabel: group.label })))
+        ...filteredOptions.map((opt, idx) => ({
+            type: "option",
+            option: opt,
+            groupIndex: -1,
+            optionIndex: idx,
+        })),
+        ...filteredGroups.flatMap((group, groupIdx) => group.options.map((opt, optIdx) => ({
+            type: "grouped",
+            option: opt,
+            groupIndex: groupIdx,
+            optionIndex: optIdx,
+            groupLabel: group.label,
+        }))),
     ];
     const visibleItems = useVirtualScrolling
         ? allFilteredItems.slice(visibleRangeStart, visibleRangeEnd)
         : allFilteredItems;
-    const offsetY = useVirtualScrolling ? visibleRangeStart * virtualItemHeight : 0;
-    const totalHeight = useVirtualScrolling ? totalItems * virtualItemHeight : 'auto';
+    const offsetY = useVirtualScrolling
+        ? visibleRangeStart * virtualItemHeight
+        : 0;
+    const totalHeight = useVirtualScrolling
+        ? totalItems * virtualItemHeight
+        : "auto";
     // Check if we should show "Create" option
     const showCreateOption = creatable &&
-        searchQuery.trim() !== '' &&
-        !filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
-        !filteredGroups.some(group => group.options.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()));
+        searchQuery.trim() !== "" &&
+        !filteredOptions.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
+        !filteredGroups.some((group) => group.options.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase()));
     // Handle creating new option
     const handleCreateOption = () => {
         if (onCreateOption) {
@@ -874,7 +888,7 @@ const Select = forwardRef((props, ref) => {
             // If no callback, just select the typed value
             onChange?.(searchQuery.trim());
         }
-        setSearchQuery('');
+        setSearchQuery("");
         setIsOpen(false);
     };
     // Handle click outside (desktop dropdown only)
@@ -888,14 +902,14 @@ const Select = forwardRef((props, ref) => {
             const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
             if (isOutsideSelect && isOutsideDropdown) {
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
         };
         if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
         }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, useMobileSheet]);
     // Focus search input when opened
@@ -929,8 +943,8 @@ const Select = forwardRef((props, ref) => {
             const hasSpaceBelow = spaceBelow >= dropdownHeight + gap;
             const hasSpaceAbove = spaceAbove >= dropdownHeight + gap;
             // Prefer bottom placement, flip to top if not enough space below but enough above
-            const placement = hasSpaceBelow || !hasSpaceAbove ? 'bottom' : 'top';
-            const top = placement === 'bottom'
+            const placement = hasSpaceBelow || !hasSpaceAbove ? "bottom" : "top";
+            const top = placement === "bottom"
                 ? rect.bottom + gap
                 : rect.top - dropdownHeight - gap;
             setDropdownPosition({
@@ -943,23 +957,23 @@ const Select = forwardRef((props, ref) => {
         // Initial position calculation
         updatePosition();
         // Listen for scroll events on all scrollable ancestors
-        window.addEventListener('scroll', updatePosition, true);
-        window.addEventListener('resize', updatePosition);
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
         return () => {
-            window.removeEventListener('scroll', updatePosition, true);
-            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
         };
     }, [isOpen, useMobileSheet, usePortal]);
     // Lock body scroll when mobile sheet is open
     useEffect(() => {
         if (useMobileSheet && isOpen) {
-            document.body.style.overflow = 'hidden';
+            document.body.style.overflow = "hidden";
         }
         else {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         }
         return () => {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         };
     }, [isOpen, useMobileSheet]);
     // Handle escape key for mobile sheet
@@ -967,83 +981,105 @@ const Select = forwardRef((props, ref) => {
         if (!useMobileSheet || !isOpen)
             return;
         const handleEscape = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === "Escape") {
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
         };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen, useMobileSheet]);
     const handleSelect = (optionValue) => {
         onChange?.(optionValue);
         setIsOpen(false);
-        setSearchQuery('');
+        setSearchQuery("");
     };
     const handleClose = () => {
         setIsOpen(false);
-        setSearchQuery('');
+        setSearchQuery("");
     };
     // Render option button (shared between desktop and mobile)
     const renderOption = (option, isSelected, mobile = false) => (jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: `
         w-full flex items-center justify-between px-4 transition-colors
         ${mobile ? optionSizeClasses.lg : optionSizeClasses[effectiveSize]}
-        ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-        ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 active:bg-paper-100 cursor-pointer'}
-      `, role: "option", "aria-selected": isSelected, children: [jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsx("span", { children: option.icon }), option.label] }), isSelected && jsx(Check, { className: `${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600` })] }, option.value));
+        ${isSelected ? "bg-accent-50 text-accent-900" : "text-ink-700"}
+        ${option.disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-paper-50 active:bg-paper-100 cursor-pointer"}
+      `, role: "option", "aria-selected": isSelected, children: [jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsx("span", { children: option.icon }), option.label] }), isSelected && (jsx(Check, { className: `${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600` }))] }, option.value));
     // Render options list content (shared between desktop and mobile)
     const renderOptionsContent = (mobile = false) => {
         if (loading) {
             return (jsxs("div", { className: "px-4 py-8 flex items-center justify-center", role: "status", "aria-live": "polite", children: [jsx(Loader2, { className: "h-5 w-5 animate-spin text-ink-500" }), jsx("span", { className: "ml-2 text-sm text-ink-500", children: "Loading..." })] }));
         }
-        if (filteredOptions.length === 0 && filteredGroups.length === 0 && !showCreateOption) {
+        if (filteredOptions.length === 0 &&
+            filteredGroups.length === 0 &&
+            !showCreateOption) {
             return (jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", role: "status", "aria-live": "polite", children: "No options found" }));
         }
         return (jsxs(Fragment, { children: [showCreateOption && (jsx("button", { type: "button", onClick: handleCreateOption, className: `
               w-full flex items-center px-4 text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200
-              ${mobile ? 'py-3.5 text-base' : 'py-2.5 text-sm'}
-            `, children: jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsx("div", { style: { height: totalHeight, position: 'relative' }, children: jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
+              ${mobile ? "py-3.5 text-base" : "py-2.5 text-sm"}
+            `, children: jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsx("div", { style: { height: totalHeight, position: "relative" }, children: jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
                             const option = item.option;
                             const isSelected = option.value === value;
                             const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
-                            return (jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: { height: mobile ? '56px' : `${virtualItemHeight}px` }, className: `
+                            return (jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: {
+                                    height: mobile ? "56px" : `${virtualItemHeight}px`,
+                                }, className: `
                       w-full flex items-center justify-between px-4 transition-colors
-                      ${mobile ? 'text-base' : 'text-sm'}
-                      ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                      ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                    `, role: "option", "aria-selected": isSelected, children: [jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsx("span", { children: option.icon }), option.label] }), isSelected && jsx(Check, { className: `${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600` })] }, key));
+                      ${mobile ? "text-base" : "text-sm"}
+                      ${isSelected ? "bg-accent-50 text-accent-900" : "text-ink-700"}
+                      ${option.disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-paper-50 cursor-pointer"}
+                    `, role: "option", "aria-selected": isSelected, children: [jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsx("span", { children: option.icon }), option.label] }), isSelected && (jsx(Check, { className: `${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600` }))] }, key));
                         }) }) })) : (jsxs(Fragment, { children: [filteredOptions.map((option) => renderOption(option, option.value === value, mobile)), filteredGroups.map((group) => (jsxs("div", { children: [jsx("div", { className: `
                   px-4 font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200
-                  ${mobile ? 'py-2.5 text-xs' : 'py-2 text-xs'}
+                  ${mobile ? "py-2.5 text-xs" : "py-2 text-xs"}
                 `, children: group.label }), group.options.map((option) => renderOption(option, option.value === value, mobile))] }, group.label)))] }))] }));
     };
     // Native select for mobile (optional)
     if (useNativeSelect) {
-        return (jsxs("div", { className: "w-full", children: [label && (jsxs("label", { id: labelId, className: "label", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
+        return (jsxs("div", { className: "w-full", children: [label && (jsxs("label", { id: labelId, className: "label", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsxs("select", { ref: nativeSelectRef, value: value || "", onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
               input w-full appearance-none pr-10
               ${sizeClasses$d[effectiveSize]}
-              ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
-              ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-required": required, children: [jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsx(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+              ${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
+              ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
+            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : helperText ? helperTextId : undefined, "aria-required": required, children: [jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsx(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
     }
     return (jsxs("div", { className: "w-full", children: [label && (jsxs("label", { id: labelId, className: "label", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsx("div", { ref: selectRef, className: "relative", children: jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
             input w-full flex items-center justify-between px-3
             ${sizeClasses$d[effectiveSize]}
-            ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
-            ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-          `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, "aria-required": required, children: [jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsx(Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsx("button", { type: "button", onClick: (e) => {
+            ${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
+            ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
+          `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : helperText ? helperTextId : undefined, "aria-disabled": disabled, "aria-required": required, children: [jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? "text-ink-800" : "text-ink-400"}`, children: [loading && (jsx(Loader2, { className: "h-4 w-4 animate-spin text-ink-500" })), !loading && selectedOption?.icon && (jsx("span", { children: selectedOption.icon })), selectedOption ? selectedOption.label : placeholder] }), jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsx("span", { role: "button", tabIndex: -1, onClick: (e) => {
                                         e.stopPropagation();
-                                        onChange?.('');
+                                        onChange?.("");
                                         setIsOpen(false);
-                                    }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5", "aria-label": "Clear selection", children: jsx(X, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}` }) })), jsx(ChevronDown, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'} text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }) }), isOpen && !useMobileSheet && (usePortal ? dropdownPosition : true) && (usePortal ? createPortal(jsxs("div", { ref: dropdownRef, className: `fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${dropdownPosition?.placement === 'top' ? 'origin-bottom' : 'origin-top'}`, style: {
-                    top: dropdownPosition.top,
-                    left: dropdownPosition.left,
-                    width: dropdownPosition.width,
-                }, children: [searchable && (jsx("div", { className: "p-2 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }), document.body) : (
-            // Non-portal dropdown (inline, relative positioning)
-            jsxs("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsx("div", { className: "p-2 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))), isOpen && useMobileSheet && createPortal(jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: 'env(safe-area-inset-bottom)' }, children: [jsx("div", { className: "py-3 cursor-grab", children: jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsx(X, { className: "h-5 w-5" }) })] }), searchable && (jsx("div", { className: "p-3 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+                                    }, onKeyDown: (e) => {
+                                        if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            onChange?.("");
+                                            setIsOpen(false);
+                                        }
+                                    }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5 cursor-pointer inline-flex", "aria-label": "Clear selection", children: jsx(X, { className: `${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"}` }) })), jsx(ChevronDown, { className: `${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"} text-ink-500 transition-transform ${isOpen ? "rotate-180" : ""}` })] })] }) }), isOpen &&
+                !useMobileSheet &&
+                (usePortal ? dropdownPosition : true) &&
+                (usePortal ? (createPortal(jsxs("div", { ref: dropdownRef, className: `fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${dropdownPosition?.placement === "top"
+                        ? "origin-bottom"
+                        : "origin-top"}`, style: {
+                        top: dropdownPosition.top,
+                        left: dropdownPosition.left,
+                        width: dropdownPosition.width,
+                    }, children: [searchable && (jsx("div", { className: "p-2 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: {
+                                maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
+                            }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }), document.body)) : (
+                // Non-portal dropdown (inline, relative positioning)
+                jsxs("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsx("div", { className: "p-2 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: {
+                                maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
+                            }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))), isOpen &&
+                useMobileSheet &&
+                createPortal(jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: "env(safe-area-inset-bottom)" }, children: [jsx("div", { className: "py-3 cursor-grab", children: jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsx(X, { className: "h-5 w-5" }) })] }), searchable && (jsx("div", { className: "p-3 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
 });
-Select.displayName = 'Select';
+Select.displayName = "Select";
 
 const MultiSelect = forwardRef(({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, loading = false, 'aria-label': ariaLabel, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -2490,9 +2526,9 @@ TimezoneSelector.displayName = 'TimezoneSelector';
  * />
  * ```
  */
-const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreateOption, label, placeholder = 'Search or select...', allowCustomValue = false, loading = false, validationState, validationMessage, helperText, required = false, disabled = false, className = '', size = 'md', }, ref) => {
+const Combobox = forwardRef(({ value = "", onChange, options, onSearch, onCreateOption, label, placeholder = "Search or select...", allowCustomValue = false, loading = false, validationState, validationMessage, helperText, required = false, disabled = false, className = "", size = "md", }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
+    const [searchQuery, setSearchQuery] = useState("");
     const [highlightedIndex, setHighlightedIndex] = useState(0);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
@@ -2509,23 +2545,26 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
         close: () => setIsOpen(false),
     }));
     // Filter options based on search query
-    const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
+    const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
     // Get display value
-    const selectedOption = options.find(opt => opt.value === value);
-    const displayValue = isOpen ? searchQuery : (selectedOption?.label || value || '');
+    const selectedOption = options.find((opt) => opt.value === value);
+    const displayValue = isOpen
+        ? searchQuery
+        : selectedOption?.label || value || "";
     // Close on click outside
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
         };
         if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
         }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
     // Scroll highlighted option into view
@@ -2533,7 +2572,10 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
         if (isOpen && listRef.current) {
             const highlightedElement = listRef.current.children[highlightedIndex];
             if (highlightedElement) {
-                highlightedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                highlightedElement.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                });
             }
         }
     }, [highlightedIndex, isOpen]);
@@ -2557,7 +2599,7 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
         if (option.disabled)
             return;
         onChange?.(option.value);
-        setSearchQuery('');
+        setSearchQuery("");
         setIsOpen(false);
         inputRef.current?.blur();
     };
@@ -2565,14 +2607,14 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
     const handleCreateOption = () => {
         if (searchQuery.trim() && onCreateOption) {
             onCreateOption(searchQuery.trim());
-            setSearchQuery('');
+            setSearchQuery("");
             setIsOpen(false);
         }
     };
     // Handle clear
     const handleClear = () => {
-        onChange?.('');
-        setSearchQuery('');
+        onChange?.("");
+        setSearchQuery("");
         inputRef.current?.focus();
     };
     // Keyboard navigation
@@ -2580,22 +2622,22 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
         if (disabled)
             return;
         switch (e.key) {
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault();
                 if (!isOpen) {
                     setIsOpen(true);
                 }
                 else {
-                    setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                    setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
                 }
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault();
                 if (isOpen) {
-                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
+                    setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0));
                 }
                 break;
-            case 'Enter':
+            case "Enter":
                 e.preventDefault();
                 if (isOpen && filteredOptions.length > 0) {
                     handleSelectOption(filteredOptions[highlightedIndex]);
@@ -2605,64 +2647,83 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
                     setIsOpen(false);
                 }
                 break;
-            case 'Escape':
+            case "Escape":
                 e.preventDefault();
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
                 break;
-            case 'Tab':
+            case "Tab":
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
                 break;
         }
     };
     // Size classes
     const sizeClasses = {
-        sm: 'text-sm py-1.5 px-3',
-        md: 'text-sm py-2 px-3',
-        lg: 'text-base py-2.5 px-4',
+        sm: "text-sm py-1.5 px-3",
+        md: "text-sm py-2 px-3",
+        lg: "text-base py-2.5 px-4",
     };
     const iconSizeClasses = {
-        sm: 'h-4 w-4',
-        md: 'h-4 w-4',
-        lg: 'h-5 w-5',
+        sm: "h-4 w-4",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
     };
     // Validation classes
     const validationClasses = {
-        error: 'border-error-500 focus:ring-error-500 focus:border-error-500',
-        success: 'border-success-500 focus:ring-success-500 focus:border-success-500',
-        warning: 'border-warning-500 focus:ring-warning-500 focus:border-warning-500',
+        error: "border-error-500 focus:ring-error-500 focus:border-error-500",
+        success: "border-success-500 focus:ring-success-500 focus:border-success-500",
+        warning: "border-warning-500 focus:ring-warning-500 focus:border-warning-500",
     };
     const validationMessageColors = {
-        error: 'text-error-600',
-        success: 'text-success-600',
-        warning: 'text-warning-600',
+        error: "text-error-600",
+        success: "text-success-600",
+        warning: "text-warning-600",
     };
     // Check if can create custom option
     const canCreateOption = onCreateOption &&
         searchQuery.trim() &&
-        !filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase());
-    return (jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [label && (jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-700 mb-1", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsx("div", { className: "relative", children: jsxs("div", { className: "relative", children: [jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: `
+        !filteredOptions.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase());
+    return (jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [label && (jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-700 mb-1", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsx("div", { className: "relative", children: jsxs("div", { className: "relative", children: [jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), onMouseDown: (e) => {
+                                // Toggle close on click when the input is already focused + open.
+                                // Without this, the second click is a no-op because onFocus only
+                                // fires on focus transition.
+                                if (isOpen && document.activeElement === inputRef.current) {
+                                    e.preventDefault();
+                                    setIsOpen(false);
+                                }
+                            }, placeholder: placeholder, disabled: disabled, className: `
               w-full rounded-md border bg-white
               ${sizeClasses[size]}
-              ${validationState ? validationClasses[validationState] : 'border-paper-300 focus:ring-primary-500 focus:border-primary-500'}
-              ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : ''}
+              ${validationState ? validationClasses[validationState] : "border-paper-300 focus:ring-primary-500 focus:border-primary-500"}
+              ${disabled ? "bg-paper-100 text-ink-400 cursor-not-allowed" : ""}
               focus:outline-none focus:ring-2
               pr-20
-            `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Combobox' : undefined, "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-activedescendant": isOpen && filteredOptions.length > 0 ? `option-${highlightedIndex}` : undefined, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [loading && (jsx("div", { className: "animate-spin", children: jsx(Search, { className: `${iconSizeClasses[size]} text-ink-400` }) })), !loading && value && !disabled && (jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsx(X, { className: iconSizeClasses[size] }) })), !loading && (jsx(ChevronDown, { className: `${iconSizeClasses[size]} text-ink-400 transition-transform ${isOpen ? 'rotate-180' : ''}` }))] })] }) }), validationMessage && (jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsx("div", { className: "absolute z-50 mt-1 w-full bg-white rounded-md shadow-lg border border-paper-200 max-h-60 overflow-auto", role: "listbox", id: listboxId, "aria-label": "Available options", children: loading ? (jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "Loading..." })) : filteredOptions.length === 0 && !canCreateOption ? (jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxs("ul", { ref: listRef, children: [filteredOptions.map((option, index) => {
+            `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? "Combobox" : undefined, "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-activedescendant": isOpen && filteredOptions.length > 0
+                                ? `option-${highlightedIndex}`
+                                : undefined, "aria-invalid": validationState === "error" ? "true" : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [loading && (jsx("div", { className: "animate-spin", children: jsx(Search, { className: `${iconSizeClasses[size]} text-ink-400` }) })), !loading && value && !disabled && (jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsx(X, { className: iconSizeClasses[size] }) })), !loading && !disabled && (jsx("button", { type: "button", onMouseDown: (e) => {
+                                        // preventDefault keeps the input from losing focus on
+                                        // mousedown so the toggle stays smooth. Manually re-focus
+                                        // when opening so keyboard nav works immediately.
+                                        e.preventDefault();
+                                        setIsOpen((o) => !o);
+                                        if (!isOpen) {
+                                            inputRef.current?.focus();
+                                        }
+                                    }, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": isOpen ? "Close options" : "Open options", tabIndex: -1, children: jsx(ChevronDown, { className: `${iconSizeClasses[size]} transition-transform ${isOpen ? "rotate-180" : ""}` }) })), !loading && disabled && (jsx(ChevronDown, { className: `${iconSizeClasses[size]} text-ink-400 transition-transform` }))] })] }) }), validationMessage && (jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : "text-ink-500"}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsx("div", { className: "absolute z-50 mt-1 w-full bg-white rounded-md shadow-lg border border-paper-200 max-h-60 overflow-auto", role: "listbox", id: listboxId, "aria-label": "Available options", children: loading ? (jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "Loading..." })) : filteredOptions.length === 0 && !canCreateOption ? (jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxs("ul", { ref: listRef, children: [filteredOptions.map((option, index) => {
                             const Icon = option.icon;
                             const isSelected = option.value === value;
                             const isHighlighted = index === highlightedIndex;
                             return (jsxs("li", { id: `option-${index}`, role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, onClick: () => handleSelectOption(option), onMouseEnter: () => setHighlightedIndex(index), className: `
                       px-3 py-2 cursor-pointer flex items-center justify-between gap-2
-                      ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}
-                      ${isHighlighted ? 'bg-primary-50' : ''}
-                      ${isSelected ? 'bg-primary-100 font-medium' : ''}
+                      ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
+                      ${isHighlighted ? "bg-primary-50" : ""}
+                      ${isSelected ? "bg-primary-100 font-medium" : ""}
                       hover:bg-primary-50
-                    `, children: [jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [Icon && jsx(Icon, { className: `${iconSizeClasses[size]} flex-shrink-0 text-ink-600` }), jsx("span", { className: "truncate text-sm text-ink-900", children: option.label })] }), isSelected && (jsx(Check, { className: `${iconSizeClasses[size]} flex-shrink-0 text-primary-600` }))] }, option.value));
+                    `, children: [jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [Icon && (jsx(Icon, { className: `${iconSizeClasses[size]} flex-shrink-0 text-ink-600` })), jsx("span", { className: "truncate text-sm text-ink-900", children: option.label })] }), isSelected && (jsx(Check, { className: `${iconSizeClasses[size]} flex-shrink-0 text-primary-600` }))] }, option.value));
                         }), canCreateOption && (jsxs("li", { role: "option", onClick: handleCreateOption, className: "px-3 py-2 cursor-pointer flex items-center gap-2 border-t border-paper-200 hover:bg-primary-50 bg-success-50", children: [jsx(Plus, { className: `${iconSizeClasses[size]} text-success-600` }), jsxs("span", { className: "text-sm text-success-700 font-medium", children: ["Create \"", searchQuery, "\""] })] }))] })) }))] }));
 });
-Combobox.displayName = 'Combobox';
+Combobox.displayName = "Combobox";
 
 /**
  * FormControl wrapper component for consistent form field layout.