@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-G5TWK7L3.js

@@ -0,0 +1,667 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { XIcon, Loader2Icon, ChevronDownIcon, CheckIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var autocompleteWrapperVariants = cva(
+  // Base styles
+  ["relative w-52"],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var autocompleteInputVariants = cva(
+  // Base styles
+  [
+    "flex w-full items-center gap-2 rounded-[var(--autocomplete-input-radius)] border bg-transparent",
+    "text-[length:var(--autocomplete-input-text-base)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none",
+    "placeholder:text-muted-foreground",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "dark:bg-input/30 dark:hover:bg-input/50",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--autocomplete-input-height-sm)] px-[var(--autocomplete-input-padding-x-sm)] py-[var(--autocomplete-input-padding-y-sm)] text-[length:var(--autocomplete-input-text-sm)]",
+        md: "h-[var(--autocomplete-input-height-md)] px-[var(--autocomplete-input-padding-x-md)] py-[var(--autocomplete-input-padding-y-md)] text-[length:var(--autocomplete-input-text-md)]",
+        lg: "h-[var(--autocomplete-input-height-lg)] px-[var(--autocomplete-input-padding-x-lg)] py-[var(--autocomplete-input-padding-y-lg)] text-[length:var(--autocomplete-input-text-lg)]"
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0 shadow-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var autocompleteContentVariants = cva(
+  // Base styles
+  [
+    "bg-[color:var(--autocomplete-content-bg)] text-[color:var(--autocomplete-content-fg)]",
+    "absolute top-full left-0 right-0 z-50 mt-[var(--autocomplete-content-margin-top)] overflow-hidden rounded-[var(--autocomplete-content-radius)] border border-[color:var(--autocomplete-content-border)] shadow-[var(--autocomplete-content-shadow)] p-0",
+    // Animation classes
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var autocompleteListVariants = cva(
+  ["max-h-72 overflow-y-auto overflow-x-hidden p-1"],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var autocompleteItemVariants = cva(
+  [
+    "relative flex cursor-default items-center gap-2 rounded-[var(--autocomplete-item-radius)] px-[var(--autocomplete-item-padding-x)] py-[var(--autocomplete-item-padding-y)] text-[length:var(--autocomplete-item-text)]",
+    "outline-none select-none",
+    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    "data-[selected=true]:bg-[color:var(--autocomplete-item-highlighted-bg)] data-[selected=true]:text-[color:var(--autocomplete-item-highlighted-fg)]",
+    "data-[highlighted=true]:bg-[color:var(--autocomplete-item-highlighted-bg)] data-[highlighted=true]:text-[color:var(--autocomplete-item-highlighted-fg)]",
+    "hover:bg-[color:var(--autocomplete-item-highlighted-bg)] hover:text-[color:var(--autocomplete-item-highlighted-fg)]",
+    "cursor-pointer",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var autocompleteEmptyVariants = cva(
+  ["py-[var(--autocomplete-empty-padding)] text-center text-[length:var(--autocomplete-empty-text)] text-[color:var(--autocomplete-empty-fg)]"],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var autocompleteLoadingVariants = cva(
+  ["flex items-center justify-center gap-2 py-[var(--autocomplete-loading-padding)] text-center text-[length:var(--autocomplete-loading-text)] text-[color:var(--autocomplete-loading-fg)]"],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var autocompleteClearVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-sm",
+    "text-muted-foreground hover:text-foreground",
+    "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "[&_svg]:size-3.5",
+        md: "[&_svg]:size-4",
+        lg: "[&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Autocomplete({
+  options = [],
+  value: controlledValue,
+  defaultValue,
+  placeholder = "Search...",
+  loading = false,
+  disabled = false,
+  dropdown = false,
+  dropdownMode = "blank",
+  emptyMessage = "No results found.",
+  error = false,
+  errorMessage,
+  icon,
+  loadingMessage = "Loading...",
+  autoHighlight = false,
+  completeOnFocus = false,
+  forceSelection = false,
+  multiple = false,
+  onChange,
+  onClear,
+  onInputChange,
+  debounceMs = 300,
+  minChars = 1,
+  showClear = false,
+  size = "md",
+  variant = "default",
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  ...props
+}) {
+  const normalizeDefaultValue = () => {
+    if (multiple) {
+      if (Array.isArray(defaultValue)) return defaultValue;
+      if (defaultValue) return [defaultValue];
+      return [];
+    }
+    if (Array.isArray(defaultValue)) return defaultValue[0];
+    return defaultValue;
+  };
+  const [internalValue, setInternalValue] = React.useState(
+    normalizeDefaultValue
+  );
+  const value = controlledValue ?? internalValue;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      if (Array.isArray(value)) return value;
+      if (value) return [value];
+      return [];
+    }
+    return [];
+  }, [multiple, value]);
+  const singleValue = multiple ? void 0 : Array.isArray(value) ? value[0] : value;
+  const [inputValue, setInputValue] = React.useState(() => {
+    if (multiple) return "";
+    const initialValue = controlledValue ?? defaultValue;
+    if (initialValue && !Array.isArray(initialValue)) {
+      const option = options.find((opt) => opt.value === initialValue);
+      return option?.label ?? "";
+    }
+    return "";
+  });
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = controlledOpen ?? internalOpen;
+  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+  const debounceRef = React.useRef(null);
+  const wrapperRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const openedViaCompleteOnFocusRef = React.useRef(false);
+  const openedViaDropdownButtonRef = React.useRef(false);
+  const isSelectingFromDropdownRef = React.useRef(false);
+  const shouldShowSuggestions = inputValue.length >= minChars || completeOnFocus && open && openedViaCompleteOnFocusRef.current || dropdown && open && openedViaDropdownButtonRef.current;
+  const filteredOptions = React.useMemo(() => {
+    if (!shouldShowSuggestions) return [];
+    return options;
+  }, [options, shouldShowSuggestions]);
+  React.useEffect(() => {
+    if (controlledValue === void 0) return;
+    const option = options.find((opt) => opt.value === controlledValue);
+    if (option) {
+      setInputValue((prev) => prev === option.label ? prev : option.label);
+    }
+  }, [controlledValue, options]);
+  const prevOpenRef = React.useRef(open);
+  const handleOpenChange = React.useCallback(
+    (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+      if (!newOpen) {
+        setHighlightedIndex(-1);
+        openedViaCompleteOnFocusRef.current = false;
+        openedViaDropdownButtonRef.current = false;
+      }
+    },
+    [controlledOpen, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (open && !prevOpenRef.current && autoHighlight && filteredOptions.length > 0) {
+      const firstEnabledIndex = filteredOptions.findIndex((opt) => !opt.disabled);
+      setHighlightedIndex(firstEnabledIndex >= 0 ? firstEnabledIndex : -1);
+    }
+    prevOpenRef.current = open;
+  }, [open, autoHighlight, filteredOptions]);
+  const handleSelect = React.useCallback(
+    (selectedValue) => {
+      const selectedOption = options.find((opt) => opt.value === selectedValue);
+      if (selectedOption && !selectedOption.disabled) {
+        if (multiple) {
+          const isSelected = selectedValues.includes(selectedValue);
+          const newValues = isSelected ? selectedValues.filter((v) => v !== selectedValue) : [...selectedValues, selectedValue];
+          if (controlledValue === void 0) {
+            setInternalValue(newValues);
+          }
+          setInputValue("");
+          onChange?.(newValues);
+        } else {
+          if (controlledValue === void 0) {
+            setInternalValue(selectedValue);
+          }
+          setInputValue(selectedOption.label);
+          onChange?.(selectedValue);
+          handleOpenChange(false);
+        }
+      }
+    },
+    [controlledValue, onChange, handleOpenChange, options, multiple, selectedValues]
+  );
+  const handleInputChange = React.useCallback(
+    (newValue) => {
+      setInputValue(newValue);
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      if (newValue.length >= minChars) {
+        handleOpenChange(true);
+      } else {
+        handleOpenChange(false);
+      }
+      debounceRef.current = setTimeout(() => {
+        onInputChange?.(newValue);
+      }, debounceMs);
+    },
+    [minChars, debounceMs, onInputChange, handleOpenChange]
+  );
+  React.useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        handleOpenChange(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleOpenChange]);
+  const handleRemoveTag = React.useCallback(
+    (valueToRemove) => {
+      const newValues = selectedValues.filter((v) => v !== valueToRemove);
+      if (controlledValue === void 0) {
+        setInternalValue(newValues);
+      }
+      onChange?.(newValues);
+      inputRef.current?.focus();
+    },
+    [selectedValues, controlledValue, onChange]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!open && dropdown && event.altKey && event.key === "ArrowDown") {
+        event.preventDefault();
+        openedViaDropdownButtonRef.current = true;
+        if (dropdownMode === "blank") {
+          setInputValue("");
+        }
+        handleOpenChange(true);
+        return;
+      }
+      if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp") && inputValue.length >= minChars) {
+        handleOpenChange(true);
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setHighlightedIndex((prev) => {
+            const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+            const currentEnabled = enabledOptions.findIndex(
+              (opt) => opt.value === filteredOptions[prev]?.value
+            );
+            const nextEnabled = currentEnabled + 1;
+            if (nextEnabled >= enabledOptions.length) {
+              return filteredOptions.findIndex((opt) => opt.value === enabledOptions[0]?.value);
+            }
+            return filteredOptions.findIndex((opt) => opt.value === enabledOptions[nextEnabled]?.value);
+          });
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setHighlightedIndex((prev) => {
+            const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+            const currentEnabled = enabledOptions.findIndex(
+              (opt) => opt.value === filteredOptions[prev]?.value
+            );
+            const prevEnabled = currentEnabled - 1;
+            if (prevEnabled < 0) {
+              return filteredOptions.findIndex(
+                (opt) => opt.value === enabledOptions[enabledOptions.length - 1]?.value
+              );
+            }
+            return filteredOptions.findIndex((opt) => opt.value === enabledOptions[prevEnabled]?.value);
+          });
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+            const option = filteredOptions[highlightedIndex];
+            if (option && !option.disabled) {
+              handleSelect(option.value);
+            }
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          handleOpenChange(false);
+          inputRef.current?.blur();
+          break;
+        case "Tab":
+          handleOpenChange(false);
+          break;
+        case "Backspace":
+          if (multiple && inputValue.length === 0 && selectedValues.length > 0) {
+            event.preventDefault();
+            handleRemoveTag(selectedValues[selectedValues.length - 1]);
+          }
+          break;
+      }
+    },
+    [open, highlightedIndex, filteredOptions, handleSelect, handleOpenChange, inputValue.length, minChars, multiple, selectedValues, handleRemoveTag, dropdown, dropdownMode]
+  );
+  React.useEffect(() => {
+    if (highlightedIndex >= 0 && listRef.current) {
+      const highlightedElement = listRef.current.querySelector(
+        `[data-index="${String(highlightedIndex)}"]`
+      );
+      highlightedElement?.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightedIndex]);
+  const handleFocus = React.useCallback(() => {
+    if (completeOnFocus) {
+      openedViaCompleteOnFocusRef.current = true;
+      handleOpenChange(true);
+      onInputChange?.(inputValue);
+    } else if (inputValue.length >= minChars) {
+      handleOpenChange(true);
+    }
+  }, [inputValue, minChars, handleOpenChange, completeOnFocus, onInputChange]);
+  const findOptionByLabel = React.useCallback(
+    (label) => {
+      const normalizedLabel = label.toLowerCase().trim();
+      return options.find((opt) => opt.label.toLowerCase() === normalizedLabel);
+    },
+    [options]
+  );
+  const inputMatchesOption = React.useMemo(() => {
+    if (!forceSelection || inputValue.length === 0) return true;
+    return findOptionByLabel(inputValue) !== void 0;
+  }, [forceSelection, inputValue, findOptionByLabel]);
+  const handleBlur = React.useCallback(() => {
+    if (isSelectingFromDropdownRef.current) {
+      isSelectingFromDropdownRef.current = false;
+      return;
+    }
+    if (!forceSelection) return;
+    const matchingOption = findOptionByLabel(inputValue);
+    if (matchingOption) {
+      if (controlledValue === void 0) {
+        setInternalValue(matchingOption.value);
+      }
+      setInputValue(matchingOption.label);
+      onChange?.(matchingOption.value);
+    } else if (inputValue.length > 0) {
+      if (value) {
+        const lastValidOption = options.find((opt) => opt.value === value);
+        if (lastValidOption) {
+          setInputValue(lastValidOption.label);
+        }
+      } else {
+        if (controlledValue === void 0) {
+          setInternalValue(void 0);
+        }
+        setInputValue("");
+        onChange?.(void 0);
+      }
+    }
+  }, [forceSelection, inputValue, value, options, controlledValue, onChange, findOptionByLabel]);
+  const handleClear = React.useCallback(() => {
+    if (controlledValue === void 0) {
+      setInternalValue(multiple ? [] : void 0);
+    }
+    setInputValue("");
+    onChange?.(multiple ? [] : void 0);
+    onClear?.();
+    inputRef.current?.focus();
+  }, [controlledValue, onChange, onClear, multiple]);
+  const handleDropdownClick = React.useCallback(() => {
+    if (!open) {
+      openedViaDropdownButtonRef.current = true;
+      if (dropdownMode === "blank") {
+        setInputValue("");
+      }
+      handleOpenChange(true);
+      inputRef.current?.focus();
+    } else if (openedViaDropdownButtonRef.current) {
+      handleOpenChange(false);
+    } else {
+      if (dropdownMode === "blank") {
+        setInputValue("");
+        openedViaDropdownButtonRef.current = true;
+      }
+      inputRef.current?.focus();
+    }
+  }, [open, handleOpenChange, dropdownMode]);
+  const shouldShowClear = showClear && !disabled && !loading && (multiple ? selectedValues.length > 0 || inputValue.length > 0 : inputValue.length > 0);
+  const errorId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(autocompleteWrapperVariants(), className),
+      "data-disabled": disabled || void 0,
+      "data-error": error || void 0,
+      "data-loading": loading || void 0,
+      "data-size": size,
+      "data-slot": "autocomplete",
+      "data-variant": variant,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute left-2 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+              "data-slot": "autocomplete-icon",
+              children: icon
+            }
+          ),
+          multiple && selectedValues.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 flex flex-wrap gap-1 max-w-[var(--autocomplete-tags-max-width)] z-10",
+                icon ? "left-8" : "left-2"
+              ),
+              "data-slot": "autocomplete-tags",
+              children: selectedValues.map((val) => {
+                const opt = options.find((o) => o.value === val);
+                return /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground",
+                    "data-slot": "autocomplete-tag",
+                    children: [
+                      opt?.label ?? val,
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": `Remove ${opt?.label ?? val}`,
+                          className: "hover:text-foreground",
+                          "data-slot": "autocomplete-tag-remove",
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleRemoveTag(val);
+                          },
+                          children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true", className: "size-3" })
+                        }
+                      )
+                    ]
+                  },
+                  val
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              "aria-activedescendant": highlightedIndex >= 0 ? `autocomplete-option-${String(highlightedIndex)}` : void 0,
+              className: cn(
+                autocompleteInputVariants({ size, variant }),
+                // Left padding: icon = pl-8
+                icon && "pl-8",
+                // Right padding: both dropdown and (loading or clear) = pr-14, only one = pr-8
+                dropdown && (loading || shouldShowClear) && "pr-14",
+                !dropdown && (loading || shouldShowClear) && "pr-8",
+                dropdown && !loading && !shouldShowClear && "pr-8",
+                multiple && selectedValues.length > 0 && (icon ? "pl-[calc(70%+2rem)]" : "pl-[calc(70%+0.5rem)]")
+              ),
+              "aria-autocomplete": "list",
+              "aria-controls": open ? "autocomplete-listbox" : void 0,
+              "aria-describedby": error && errorMessage ? errorId : void 0,
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-invalid": error || forceSelection && !inputMatchesOption ? true : void 0,
+              "data-slot": "autocomplete-input",
+              disabled,
+              placeholder: multiple && selectedValues.length > 0 ? "" : placeholder,
+              role: "combobox",
+              type: "text",
+              value: inputValue,
+              onBlur: handleBlur,
+              onChange: (e) => {
+                handleInputChange(e.target.value);
+              },
+              onFocus: handleFocus,
+              onKeyDown: handleKeyDown
+            }
+          ),
+          loading && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+            Loader2Icon,
+            {
+              "aria-hidden": "true",
+              className: "size-4 animate-spin text-muted-foreground",
+              "data-slot": "autocomplete-spinner"
+            }
+          ) }),
+          shouldShowClear && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2",
+                dropdown ? "right-8" : "right-2",
+                autocompleteClearVariants({ size })
+              ),
+              "aria-label": "Clear",
+              "data-slot": "autocomplete-clear",
+              type: "button",
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+            }
+          ),
+          dropdown && /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Toggle dropdown",
+              className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+              "data-slot": "autocomplete-dropdown",
+              disabled,
+              type: "button",
+              onClick: handleDropdownClick,
+              children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4" })
+            }
+          )
+        ] }),
+        open && shouldShowSuggestions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(autocompleteContentVariants()),
+            "data-slot": "autocomplete-content",
+            "data-state": "open",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: listRef,
+                className: cn(autocompleteListVariants()),
+                "data-slot": "autocomplete-list",
+                id: "autocomplete-listbox",
+                role: "listbox",
+                children: loading ? /* @__PURE__ */ jsxs("div", { className: cn(autocompleteLoadingVariants()), children: [
+                  /* @__PURE__ */ jsx(Loader2Icon, { "aria-hidden": "true", className: "size-4 animate-spin" }),
+                  loadingMessage
+                ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: cn(autocompleteEmptyVariants()), children: emptyMessage }) : filteredOptions.map((option, index) => {
+                  const isSelected = multiple ? selectedValues.includes(option.value) : singleValue === option.value;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      "aria-disabled": option.disabled,
+                      "aria-selected": isSelected,
+                      className: cn(autocompleteItemVariants()),
+                      "data-disabled": option.disabled ?? void 0,
+                      "data-highlighted": highlightedIndex === index || void 0,
+                      "data-index": index,
+                      "data-selected": isSelected || void 0,
+                      "data-slot": "autocomplete-item",
+                      id: `autocomplete-option-${String(index)}`,
+                      role: "option",
+                      onClick: () => {
+                        if (!option.disabled) {
+                          handleSelect(option.value);
+                        }
+                      },
+                      onMouseDown: () => {
+                        isSelectingFromDropdownRef.current = true;
+                      },
+                      onMouseEnter: () => {
+                        if (!option.disabled) {
+                          setHighlightedIndex(index);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CheckIcon,
+                          {
+                            className: cn(
+                              "size-4",
+                              isSelected ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        option.label
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              }
+            )
+          }
+        ),
+        error && errorMessage && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1.5 text-sm text-destructive",
+            "data-slot": "autocomplete-error",
+            id: errorId,
+            role: "alert",
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Autocomplete };
+//# sourceMappingURL=chunk-G5TWK7L3.js.map
+//# sourceMappingURL=chunk-G5TWK7L3.js.map