@papernote/ui 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  export interface ComboboxHandle {
3
3
  focus: () => void;
4
4
  blur: () => void;
@@ -35,7 +35,7 @@ export interface ComboboxProps {
35
35
  /** Loading state */
36
36
  loading?: boolean;
37
37
  /** Validation state */
38
- validationState?: 'error' | 'success' | 'warning' | null;
38
+ validationState?: "error" | "success" | "warning" | null;
39
39
  /** Validation message */
40
40
  validationMessage?: string;
41
41
  /** Helper text */
@@ -47,7 +47,7 @@ export interface ComboboxProps {
47
47
  /** Custom className */
48
48
  className?: string;
49
49
  /** Size variant */
50
- size?: 'sm' | 'md' | 'lg';
50
+ size?: "sm" | "md" | "lg";
51
51
  }
52
52
  /**
53
53
  * Combobox component - searchable select with typeahead and custom value support.
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wBAAwB;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IACzD,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,sFA0VZ,CAAC;AAGH,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wBAAwB;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IACzD,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,sFA0ab,CAAC;AAGF,eAAe,QAAQ,CAAC"}
package/dist/index.d.ts CHANGED
@@ -989,7 +989,7 @@ interface ComboboxProps {
989
989
  /** Loading state */
990
990
  loading?: boolean;
991
991
  /** Validation state */
992
- validationState?: 'error' | 'success' | 'warning' | null;
992
+ validationState?: "error" | "success" | "warning" | null;
993
993
  /** Validation message */
994
994
  validationMessage?: string;
995
995
  /** Helper text */
@@ -1001,7 +1001,7 @@ interface ComboboxProps {
1001
1001
  /** Custom className */
1002
1002
  className?: string;
1003
1003
  /** Size variant */
1004
- size?: 'sm' | 'md' | 'lg';
1004
+ size?: "sm" | "md" | "lg";
1005
1005
  }
1006
1006
  /**
1007
1007
  * Combobox component - searchable select with typeahead and custom value support.
package/dist/index.esm.js CHANGED
@@ -2526,9 +2526,9 @@ TimezoneSelector.displayName = 'TimezoneSelector';
2526
2526
  * />
2527
2527
  * ```
2528
2528
  */
2529
- 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) => {
2529
+ 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) => {
2530
2530
  const [isOpen, setIsOpen] = useState(false);
2531
- const [searchQuery, setSearchQuery] = useState('');
2531
+ const [searchQuery, setSearchQuery] = useState("");
2532
2532
  const [highlightedIndex, setHighlightedIndex] = useState(0);
2533
2533
  const containerRef = useRef(null);
2534
2534
  const inputRef = useRef(null);
@@ -2545,23 +2545,26 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
2545
2545
  close: () => setIsOpen(false),
2546
2546
  }));
2547
2547
  // Filter options based on search query
2548
- const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
2548
+ const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
2549
2549
  // Get display value
2550
- const selectedOption = options.find(opt => opt.value === value);
2551
- const displayValue = isOpen ? searchQuery : (selectedOption?.label || value || '');
2550
+ const selectedOption = options.find((opt) => opt.value === value);
2551
+ const displayValue = isOpen
2552
+ ? searchQuery
2553
+ : selectedOption?.label || value || "";
2552
2554
  // Close on click outside
2553
2555
  useEffect(() => {
2554
2556
  const handleClickOutside = (event) => {
2555
- if (containerRef.current && !containerRef.current.contains(event.target)) {
2557
+ if (containerRef.current &&
2558
+ !containerRef.current.contains(event.target)) {
2556
2559
  setIsOpen(false);
2557
- setSearchQuery('');
2560
+ setSearchQuery("");
2558
2561
  }
2559
2562
  };
2560
2563
  if (isOpen) {
2561
- document.addEventListener('mousedown', handleClickOutside);
2564
+ document.addEventListener("mousedown", handleClickOutside);
2562
2565
  }
2563
2566
  return () => {
2564
- document.removeEventListener('mousedown', handleClickOutside);
2567
+ document.removeEventListener("mousedown", handleClickOutside);
2565
2568
  };
2566
2569
  }, [isOpen]);
2567
2570
  // Scroll highlighted option into view
@@ -2569,7 +2572,10 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
2569
2572
  if (isOpen && listRef.current) {
2570
2573
  const highlightedElement = listRef.current.children[highlightedIndex];
2571
2574
  if (highlightedElement) {
2572
- highlightedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
2575
+ highlightedElement.scrollIntoView({
2576
+ block: "nearest",
2577
+ behavior: "smooth",
2578
+ });
2573
2579
  }
2574
2580
  }
2575
2581
  }, [highlightedIndex, isOpen]);
@@ -2593,7 +2599,7 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
2593
2599
  if (option.disabled)
2594
2600
  return;
2595
2601
  onChange?.(option.value);
2596
- setSearchQuery('');
2602
+ setSearchQuery("");
2597
2603
  setIsOpen(false);
2598
2604
  inputRef.current?.blur();
2599
2605
  };
@@ -2601,14 +2607,14 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
2601
2607
  const handleCreateOption = () => {
2602
2608
  if (searchQuery.trim() && onCreateOption) {
2603
2609
  onCreateOption(searchQuery.trim());
2604
- setSearchQuery('');
2610
+ setSearchQuery("");
2605
2611
  setIsOpen(false);
2606
2612
  }
2607
2613
  };
2608
2614
  // Handle clear
2609
2615
  const handleClear = () => {
2610
- onChange?.('');
2611
- setSearchQuery('');
2616
+ onChange?.("");
2617
+ setSearchQuery("");
2612
2618
  inputRef.current?.focus();
2613
2619
  };
2614
2620
  // Keyboard navigation
@@ -2616,22 +2622,22 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
2616
2622
  if (disabled)
2617
2623
  return;
2618
2624
  switch (e.key) {
2619
- case 'ArrowDown':
2625
+ case "ArrowDown":
2620
2626
  e.preventDefault();
2621
2627
  if (!isOpen) {
2622
2628
  setIsOpen(true);
2623
2629
  }
2624
2630
  else {
2625
- setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
2631
+ setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
2626
2632
  }
2627
2633
  break;
2628
- case 'ArrowUp':
2634
+ case "ArrowUp":
2629
2635
  e.preventDefault();
2630
2636
  if (isOpen) {
2631
- setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
2637
+ setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0));
2632
2638
  }
2633
2639
  break;
2634
- case 'Enter':
2640
+ case "Enter":
2635
2641
  e.preventDefault();
2636
2642
  if (isOpen && filteredOptions.length > 0) {
2637
2643
  handleSelectOption(filteredOptions[highlightedIndex]);
@@ -2641,64 +2647,83 @@ const Combobox = forwardRef(({ value = '', onChange, options, onSearch, onCreate
2641
2647
  setIsOpen(false);
2642
2648
  }
2643
2649
  break;
2644
- case 'Escape':
2650
+ case "Escape":
2645
2651
  e.preventDefault();
2646
2652
  setIsOpen(false);
2647
- setSearchQuery('');
2653
+ setSearchQuery("");
2648
2654
  break;
2649
- case 'Tab':
2655
+ case "Tab":
2650
2656
  setIsOpen(false);
2651
- setSearchQuery('');
2657
+ setSearchQuery("");
2652
2658
  break;
2653
2659
  }
2654
2660
  };
2655
2661
  // Size classes
2656
2662
  const sizeClasses = {
2657
- sm: 'text-sm py-1.5 px-3',
2658
- md: 'text-sm py-2 px-3',
2659
- lg: 'text-base py-2.5 px-4',
2663
+ sm: "text-sm py-1.5 px-3",
2664
+ md: "text-sm py-2 px-3",
2665
+ lg: "text-base py-2.5 px-4",
2660
2666
  };
2661
2667
  const iconSizeClasses = {
2662
- sm: 'h-4 w-4',
2663
- md: 'h-4 w-4',
2664
- lg: 'h-5 w-5',
2668
+ sm: "h-4 w-4",
2669
+ md: "h-4 w-4",
2670
+ lg: "h-5 w-5",
2665
2671
  };
2666
2672
  // Validation classes
2667
2673
  const validationClasses = {
2668
- error: 'border-error-500 focus:ring-error-500 focus:border-error-500',
2669
- success: 'border-success-500 focus:ring-success-500 focus:border-success-500',
2670
- warning: 'border-warning-500 focus:ring-warning-500 focus:border-warning-500',
2674
+ error: "border-error-500 focus:ring-error-500 focus:border-error-500",
2675
+ success: "border-success-500 focus:ring-success-500 focus:border-success-500",
2676
+ warning: "border-warning-500 focus:ring-warning-500 focus:border-warning-500",
2671
2677
  };
2672
2678
  const validationMessageColors = {
2673
- error: 'text-error-600',
2674
- success: 'text-success-600',
2675
- warning: 'text-warning-600',
2679
+ error: "text-error-600",
2680
+ success: "text-success-600",
2681
+ warning: "text-warning-600",
2676
2682
  };
2677
2683
  // Check if can create custom option
2678
2684
  const canCreateOption = onCreateOption &&
2679
2685
  searchQuery.trim() &&
2680
- !filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase());
2681
- 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: `
2686
+ !filteredOptions.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase());
2687
+ 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) => {
2688
+ // Toggle close on click when the input is already focused + open.
2689
+ // Without this, the second click is a no-op because onFocus only
2690
+ // fires on focus transition.
2691
+ if (isOpen && document.activeElement === inputRef.current) {
2692
+ e.preventDefault();
2693
+ setIsOpen(false);
2694
+ }
2695
+ }, placeholder: placeholder, disabled: disabled, className: `
2682
2696
  w-full rounded-md border bg-white
2683
2697
  ${sizeClasses[size]}
2684
- ${validationState ? validationClasses[validationState] : 'border-paper-300 focus:ring-primary-500 focus:border-primary-500'}
2685
- ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : ''}
2698
+ ${validationState ? validationClasses[validationState] : "border-paper-300 focus:ring-primary-500 focus:border-primary-500"}
2699
+ ${disabled ? "bg-paper-100 text-ink-400 cursor-not-allowed" : ""}
2686
2700
  focus:outline-none focus:ring-2
2687
2701
  pr-20
2688
- `, "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) => {
2702
+ `, "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
2703
+ ? `option-${highlightedIndex}`
2704
+ : 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) => {
2705
+ // preventDefault keeps the input from losing focus on
2706
+ // mousedown so the toggle stays smooth. Manually re-focus
2707
+ // when opening so keyboard nav works immediately.
2708
+ e.preventDefault();
2709
+ setIsOpen((o) => !o);
2710
+ if (!isOpen) {
2711
+ inputRef.current?.focus();
2712
+ }
2713
+ }, 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) => {
2689
2714
  const Icon = option.icon;
2690
2715
  const isSelected = option.value === value;
2691
2716
  const isHighlighted = index === highlightedIndex;
2692
2717
  return (jsxs("li", { id: `option-${index}`, role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, onClick: () => handleSelectOption(option), onMouseEnter: () => setHighlightedIndex(index), className: `
2693
2718
  px-3 py-2 cursor-pointer flex items-center justify-between gap-2
2694
- ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}
2695
- ${isHighlighted ? 'bg-primary-50' : ''}
2696
- ${isSelected ? 'bg-primary-100 font-medium' : ''}
2719
+ ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
2720
+ ${isHighlighted ? "bg-primary-50" : ""}
2721
+ ${isSelected ? "bg-primary-100 font-medium" : ""}
2697
2722
  hover:bg-primary-50
2698
- `, 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));
2723
+ `, 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));
2699
2724
  }), 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, "\""] })] }))] })) }))] }));
2700
2725
  });
2701
- Combobox.displayName = 'Combobox';
2726
+ Combobox.displayName = "Combobox";
2702
2727
 
2703
2728
  /**
2704
2729
  * FormControl wrapper component for consistent form field layout.
@@ -15796,52 +15821,44 @@ function getAugmentedNamespace(n) {
15796
15821
  * (A1, A1:C5, ...)
15797
15822
  */
15798
15823
 
15799
- var collection;
15800
- var hasRequiredCollection;
15801
-
15802
- function requireCollection () {
15803
- if (hasRequiredCollection) return collection;
15804
- hasRequiredCollection = 1;
15805
- class Collection {
15824
+ let Collection$3 = class Collection {
15806
15825
 
15807
- constructor(data, refs) {
15808
- if (data == null && refs == null) {
15809
- this._data = [];
15810
- this._refs = [];
15811
- } else {
15812
- if (data.length !== refs.length)
15813
- throw Error('Collection: data length should match references length.');
15814
- this._data = data;
15815
- this._refs = refs;
15816
- }
15817
- }
15826
+ constructor(data, refs) {
15827
+ if (data == null && refs == null) {
15828
+ this._data = [];
15829
+ this._refs = [];
15830
+ } else {
15831
+ if (data.length !== refs.length)
15832
+ throw Error('Collection: data length should match references length.');
15833
+ this._data = data;
15834
+ this._refs = refs;
15835
+ }
15836
+ }
15818
15837
 
15819
- get data() {
15820
- return this._data;
15821
- }
15838
+ get data() {
15839
+ return this._data;
15840
+ }
15822
15841
 
15823
- get refs() {
15824
- return this._refs;
15825
- }
15842
+ get refs() {
15843
+ return this._refs;
15844
+ }
15826
15845
 
15827
- get length() {
15828
- return this._data.length;
15829
- }
15846
+ get length() {
15847
+ return this._data.length;
15848
+ }
15830
15849
 
15831
- /**
15832
- * Add data and references to this collection.
15833
- * @param {{}} obj - data
15834
- * @param {{}} ref - reference
15835
- */
15836
- add(obj, ref) {
15837
- this._data.push(obj);
15838
- this._refs.push(ref);
15839
- }
15840
- }
15850
+ /**
15851
+ * Add data and references to this collection.
15852
+ * @param {{}} obj - data
15853
+ * @param {{}} ref - reference
15854
+ */
15855
+ add(obj, ref) {
15856
+ this._data.push(obj);
15857
+ this._refs.push(ref);
15858
+ }
15859
+ };
15841
15860
 
15842
- collection = Collection;
15843
- return collection;
15844
- }
15861
+ var collection = Collection$3;
15845
15862
 
15846
15863
  var helpers;
15847
15864
  var hasRequiredHelpers;
@@ -15850,7 +15867,7 @@ function requireHelpers () {
15850
15867
  if (hasRequiredHelpers) return helpers;
15851
15868
  hasRequiredHelpers = 1;
15852
15869
  const FormulaError = requireError();
15853
- const Collection = requireCollection();
15870
+ const Collection = collection;
15854
15871
 
15855
15872
  const Types = {
15856
15873
  NUMBER: 0,
@@ -25504,7 +25521,7 @@ var engineering = EngineeringFunctions;
25504
25521
 
25505
25522
  const FormulaError$b = requireError();
25506
25523
  const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
25507
- const Collection$2 = requireCollection();
25524
+ const Collection$2 = collection;
25508
25525
  const H$5 = FormulaHelpers$8;
25509
25526
 
25510
25527
  const ReferenceFunctions$1 = {
@@ -37132,7 +37149,7 @@ var parsing = {
37132
37149
  const FormulaError$4 = requireError();
37133
37150
  const {Address: Address$1} = requireHelpers();
37134
37151
  const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
37135
- const Collection$1 = requireCollection();
37152
+ const Collection$1 = collection;
37136
37153
  const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
37137
37154
  const {NotAllInputParsedException} = require$$4;
37138
37155
 
@@ -37894,7 +37911,7 @@ var hooks$1 = {
37894
37911
  const FormulaError$2 = requireError();
37895
37912
  const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
37896
37913
  const {Prefix, Postfix, Infix, Operators} = operators;
37897
- const Collection = requireCollection();
37914
+ const Collection = collection;
37898
37915
  const MAX_ROW = 1048576, MAX_COLUMN = 16384;
37899
37916
 
37900
37917
  let Utils$1 = class Utils {