@etus/ui 0.1.0

package/src/components/forms/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,696 @@
+import type { AutocompleteProps } from "./Autocomplete.types"
+
+import { CheckIcon, ChevronDownIcon, Loader2Icon, XIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  autocompleteClearVariants,
+  autocompleteContentVariants,
+  autocompleteEmptyVariants,
+  autocompleteInputVariants,
+  autocompleteItemVariants,
+  autocompleteListVariants,
+  autocompleteLoadingVariants,
+  autocompleteWrapperVariants,
+} from "./Autocomplete.variants"
+
+/**
+ * Autocomplete - A searchable input with async loading and debounced search
+ *
+ * Extends the Combobox pattern with support for async data loading,
+ * loading states, and debounced search input.
+ *
+ * @example
+ * ```tsx
+ * <Autocomplete
+ *   options={options}
+ *   loading={isLoading}
+ *   onInputChange={(value) => fetchResults(value)}
+ *   onChange={(value) => setSelected(value)}
+ *   placeholder="Search users..."
+ *   debounceMs={300}
+ *   minChars={2}
+ * />
+ * ```
+ */
+/* eslint-disable sonarjs/cognitive-complexity -- Complex component with many features */
+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
+}: AutocompleteProps) {
+  // Normalize value to correct type based on multiple mode
+  const normalizeDefaultValue = (): string | string[] | undefined => {
+    if (multiple) {
+      if (Array.isArray(defaultValue)) return defaultValue
+      if (defaultValue) return [defaultValue]
+      return []
+    }
+    if (Array.isArray(defaultValue)) return defaultValue[0]
+    return defaultValue
+  }
+
+  // Handle controlled vs uncontrolled value
+  const [internalValue, setInternalValue] = React.useState<string | string[] | undefined>(
+    normalizeDefaultValue
+  )
+  const value = controlledValue ?? internalValue
+
+  // Normalize value for comparisons (always array for multiple, string for single)
+  const selectedValues: string[] = React.useMemo(() => {
+    if (multiple) {
+      if (Array.isArray(value)) return value
+      if (value) return [value]
+      return []
+    }
+    return []
+  }, [multiple, value])
+
+  // For single mode, get the single value
+  const singleValue = multiple ? undefined : (Array.isArray(value) ? value[0] : value)
+
+  // Input text state (separate from selected value)
+  // In multiple mode, input is always empty after selection
+  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 ""
+  })
+
+  // Handle controlled vs uncontrolled open state
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const open = controlledOpen ?? internalOpen
+
+  // Track highlighted index for keyboard navigation
+  const [highlightedIndex, setHighlightedIndex] = React.useState(-1)
+
+  // Refs for debounce and click-outside handling
+  const debounceRef = React.useRef<null | ReturnType<typeof setTimeout>>(null)
+  const wrapperRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const listRef = React.useRef<HTMLDivElement>(null)
+
+  // Track if dropdown was opened via completeOnFocus
+  const openedViaCompleteOnFocusRef = React.useRef(false)
+
+  // Track if dropdown was opened via dropdown button
+  const openedViaDropdownButtonRef = React.useRef(false)
+
+  // Track if user is clicking on dropdown (to prevent blur validation)
+  const isSelectingFromDropdownRef = React.useRef(false)
+
+  // Filtered options (show when minChars is met OR when opened via completeOnFocus OR dropdown button)
+  /* eslint-disable react-hooks/refs -- Intentional ref read during render: openedViaCompleteOnFocusRef and openedViaDropdownButtonRef track triggered open state */
+  const shouldShowSuggestions = inputValue.length >= minChars || (completeOnFocus && open && openedViaCompleteOnFocusRef.current) || (dropdown && open && openedViaDropdownButtonRef.current)
+  const filteredOptions = React.useMemo(() => {
+    if (!shouldShowSuggestions) return []
+    return options
+  }, [options, shouldShowSuggestions])
+  /* eslint-enable react-hooks/refs */
+
+  // Sync controlled value to input text when it changes.
+  /* eslint-disable react-you-might-not-need-an-effect/no-pass-data-to-parent, react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- Controlled value sync */
+  React.useEffect(() => {
+    if (controlledValue === undefined) return
+    const option = options.find((opt) => opt.value === controlledValue)
+    if (option) {
+      setInputValue((prev) => (prev === option.label ? prev : option.label))
+    }
+  }, [controlledValue, options])
+  /* eslint-enable react-you-might-not-need-an-effect/no-pass-data-to-parent, react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+
+  // Track previous open state for auto-highlight effect
+  const prevOpenRef = React.useRef(open)
+
+  // Handle open state changes
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      if (controlledOpen === undefined) {
+        setInternalOpen(newOpen)
+      }
+      onOpenChange?.(newOpen)
+
+      // Reset highlighted index and open-via flags when closing
+      if (!newOpen) {
+        setHighlightedIndex(-1)
+        openedViaCompleteOnFocusRef.current = false
+        openedViaDropdownButtonRef.current = false
+      }
+    },
+    [controlledOpen, onOpenChange]
+  )
+
+  // Auto-highlight first enabled option when dropdown opens
+  /* eslint-disable react-you-might-not-need-an-effect/no-derived-state, react-you-might-not-need-an-effect/no-event-handler, react-you-might-not-need-an-effect/no-pass-live-state-to-parent, react-you-might-not-need-an-effect/no-pass-ref-to-parent, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- Auto-highlight on open transition */
+  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])
+  /* eslint-enable react-you-might-not-need-an-effect/no-derived-state, react-you-might-not-need-an-effect/no-event-handler, react-you-might-not-need-an-effect/no-pass-live-state-to-parent, react-you-might-not-need-an-effect/no-pass-ref-to-parent, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+
+  // Handle value selection
+  const handleSelect = React.useCallback(
+    (selectedValue: string) => {
+      const selectedOption = options.find((opt) => opt.value === selectedValue)
+      if (selectedOption && !selectedOption.disabled) {
+        if (multiple) {
+          // Multiple mode: toggle selection
+          const isSelected = selectedValues.includes(selectedValue)
+          const newValues = isSelected
+            ? selectedValues.filter((v) => v !== selectedValue)
+            : [...selectedValues, selectedValue]
+
+          if (controlledValue === undefined) {
+            setInternalValue(newValues)
+          }
+          // Clear input after selection in multiple mode
+          setInputValue("")
+          onChange?.(newValues)
+          // Don't close dropdown in multiple mode
+        } else {
+          // Single mode: select and close
+          if (controlledValue === undefined) {
+            setInternalValue(selectedValue)
+          }
+          setInputValue(selectedOption.label)
+          onChange?.(selectedValue)
+          handleOpenChange(false)
+        }
+      }
+    },
+    [controlledValue, onChange, handleOpenChange, options, multiple, selectedValues]
+  )
+
+  // Debounced input change handler
+  const handleInputChange = React.useCallback(
+    (newValue: string) => {
+      setInputValue(newValue)
+
+      // Clear previous debounce timeout
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+
+      // Open dropdown if minChars is met
+      if (newValue.length >= minChars) {
+        handleOpenChange(true)
+      } else {
+        handleOpenChange(false)
+      }
+
+      // Debounce the onInputChange callback
+      debounceRef.current = setTimeout(() => {
+        onInputChange?.(newValue)
+      }, debounceMs)
+    },
+    [minChars, debounceMs, onInputChange, handleOpenChange]
+  )
+
+  // Cleanup debounce on unmount
+  React.useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+    }
+  }, [])
+
+  // Handle click outside to close dropdown
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        handleOpenChange(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [handleOpenChange])
+
+  // Handle removing a single tag in multiple mode
+  const handleRemoveTag = React.useCallback(
+    (valueToRemove: string) => {
+      const newValues = selectedValues.filter((v) => v !== valueToRemove)
+      if (controlledValue === undefined) {
+        setInternalValue(newValues)
+      }
+      onChange?.(newValues)
+      inputRef.current?.focus()
+    },
+    [selectedValues, controlledValue, onChange]
+  )
+
+  // Keyboard navigation
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      // Alt+ArrowDown opens dropdown (when dropdown button is enabled)
+      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":
+          // In multiple mode, remove last tag when input is empty
+          if (multiple && inputValue.length === 0 && selectedValues.length > 0) {
+            event.preventDefault()
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- We've verified selectedValues.length > 0 above
+            handleRemoveTag(selectedValues[selectedValues.length - 1]!)
+          }
+          break
+      }
+    },
+    [open, highlightedIndex, filteredOptions, handleSelect, handleOpenChange, inputValue.length, minChars, multiple, selectedValues, handleRemoveTag, dropdown, dropdownMode]
+  )
+
+  // Scroll highlighted item into view when keyboard navigating
+  /* eslint-disable react-you-might-not-need-an-effect/no-event-handler -- Scroll sync is a visual side effect, not event handling */
+  React.useEffect(() => {
+    if (highlightedIndex >= 0 && listRef.current) {
+      const highlightedElement = listRef.current.querySelector(
+        `[data-index="${String(highlightedIndex)}"]`
+      )
+      highlightedElement?.scrollIntoView({ block: "nearest" })
+    }
+  }, [highlightedIndex])
+  /* eslint-enable react-you-might-not-need-an-effect/no-event-handler */
+
+  // Handle input focus
+  const handleFocus = React.useCallback(() => {
+    if (completeOnFocus) {
+      openedViaCompleteOnFocusRef.current = true
+      handleOpenChange(true)
+      // Trigger onInputChange with current value (which might be empty)
+      onInputChange?.(inputValue)
+    } else if (inputValue.length >= minChars) {
+      handleOpenChange(true)
+    }
+  }, [inputValue, minChars, handleOpenChange, completeOnFocus, onInputChange])
+
+  // Find option by label (case-insensitive)
+  const findOptionByLabel = React.useCallback(
+    (label: string) => {
+      const normalizedLabel = label.toLowerCase().trim()
+      return options.find((opt) => opt.label.toLowerCase() === normalizedLabel)
+    },
+    [options]
+  )
+
+  // Check if current input text matches an option (for forceSelection validation)
+  const inputMatchesOption = React.useMemo(() => {
+    if (!forceSelection || inputValue.length === 0) return true
+    return findOptionByLabel(inputValue) !== undefined
+  }, [forceSelection, inputValue, findOptionByLabel])
+
+  // Handle blur for forceSelection validation
+  const handleBlur = React.useCallback(() => {
+    // Skip validation if user is clicking on dropdown
+    if (isSelectingFromDropdownRef.current) {
+      isSelectingFromDropdownRef.current = false
+      return
+    }
+
+    if (!forceSelection) return
+
+    const matchingOption = findOptionByLabel(inputValue)
+
+    if (matchingOption) {
+      // Input matches an option - select it
+      if (controlledValue === undefined) {
+        setInternalValue(matchingOption.value)
+      }
+      setInputValue(matchingOption.label)
+      onChange?.(matchingOption.value)
+    } else if (inputValue.length > 0) {
+      // Input doesn't match - revert to last valid selection or clear
+      if (value) {
+        // Revert to last valid selection
+        const lastValidOption = options.find((opt) => opt.value === value)
+        if (lastValidOption) {
+          setInputValue(lastValidOption.label)
+        }
+      } else {
+        // No prior selection - clear input
+        if (controlledValue === undefined) {
+          setInternalValue(undefined)
+        }
+        setInputValue("")
+        // eslint-disable-next-line unicorn/no-useless-undefined -- undefined is intentional: signals cleared state to parent
+        onChange?.(undefined)
+      }
+    }
+  }, [forceSelection, inputValue, value, options, controlledValue, onChange, findOptionByLabel])
+
+  // Handle clear button click
+  const handleClear = React.useCallback(() => {
+    // Reset internal value
+    if (controlledValue === undefined) {
+      setInternalValue(multiple ? [] : undefined)
+    }
+    setInputValue("")
+     
+    onChange?.(multiple ? [] : undefined)
+    onClear?.()
+    // Focus the input after clearing
+    inputRef.current?.focus()
+  }, [controlledValue, onChange, onClear, multiple])
+
+  // Handle dropdown button click
+  const handleDropdownClick = React.useCallback(() => {
+    if (!open) {
+      // Dropdown is closed - open it
+      openedViaDropdownButtonRef.current = true
+      if (dropdownMode === "blank") {
+        setInputValue("")
+      }
+      handleOpenChange(true)
+      inputRef.current?.focus()
+    } else if (openedViaDropdownButtonRef.current) {
+      // Dropdown was opened via button click - toggle it closed
+      handleOpenChange(false)
+    } else {
+      // Dropdown was opened via typing - handle based on mode
+      if (dropdownMode === "blank") {
+        // Clear input to show all options
+        setInputValue("")
+        openedViaDropdownButtonRef.current = true
+      }
+      // In current mode, do nothing (keep dropdown open with current filter)
+      inputRef.current?.focus()
+    }
+  }, [open, handleOpenChange, dropdownMode])
+
+  // Determine if clear button should be shown
+  // In multiple mode, show when there are selected values OR input text
+  const shouldShowClear =
+    showClear &&
+    !disabled &&
+    !loading &&
+    (multiple ? selectedValues.length > 0 || inputValue.length > 0 : inputValue.length > 0)
+
+  // Generate unique ID for error message association
+  const errorId = React.useId()
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={cn(autocompleteWrapperVariants(), className)}
+      data-disabled={disabled || undefined}
+      data-error={error || undefined}
+      data-loading={loading || undefined}
+      data-size={size}
+      data-slot="autocomplete"
+      data-variant={variant}
+      {...props}
+    >
+      <div className="relative">
+        {icon && (
+          <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"
+          >
+            {icon}
+          </span>
+        )}
+        {multiple && selectedValues.length > 0 && (
+          <div
+            className={cn(
+              "absolute top-1/2 -translate-y-1/2 flex flex-wrap gap-1 max-w-[70%] z-10",
+              icon ? "left-8" : "left-2"
+            )}
+            data-slot="autocomplete-tags"
+          >
+            {selectedValues.map((val) => {
+              const opt = options.find((o) => o.value === val)
+              return (
+                <span
+                  key={val}
+                  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"
+                >
+                  {opt?.label ?? val}
+                  <button
+                    aria-label={`Remove ${opt?.label ?? val}`}
+                    className="hover:text-foreground"
+                    data-slot="autocomplete-tag-remove"
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleRemoveTag(val)
+                    }}
+                  >
+                    <XIcon aria-hidden="true" className="size-3" />
+                  </button>
+                </span>
+              )
+            })}
+          </div>
+        )}
+        <input
+          ref={inputRef}
+          aria-activedescendant={
+            highlightedIndex >= 0 ? `autocomplete-option-${String(highlightedIndex)}` : undefined
+          }
+          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" : undefined}
+          aria-describedby={error && errorMessage ? errorId : undefined}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-invalid={error || (forceSelection && !inputMatchesOption) ? true : undefined}
+          data-slot="autocomplete-input"
+          disabled={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 && (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2">
+            <Loader2Icon
+              aria-hidden="true"
+              className="size-4 animate-spin text-muted-foreground"
+              data-slot="autocomplete-spinner"
+            />
+          </div>
+        )}
+        {shouldShowClear && (
+          <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}
+          >
+            <XIcon aria-hidden="true" />
+          </button>
+        )}
+        {dropdown && (
+          <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={disabled}
+            type="button"
+            onClick={handleDropdownClick}
+          >
+            <ChevronDownIcon aria-hidden="true" className="size-4" />
+          </button>
+        )}
+      </div>
+
+      {/* eslint-disable-next-line react-hooks/refs -- shouldShowSuggestions uses refs for tracking open state */}
+      {open && shouldShowSuggestions && (
+        <div
+          className={cn(autocompleteContentVariants())}
+          data-slot="autocomplete-content"
+          data-state="open"
+        >
+          <div
+            ref={listRef}
+            className={cn(autocompleteListVariants())}
+            data-slot="autocomplete-list"
+            id="autocomplete-listbox"
+            role="listbox"
+          >
+            {loading ? (
+              <div className={cn(autocompleteLoadingVariants())}>
+                <Loader2Icon aria-hidden="true" className="size-4 animate-spin" />
+                {loadingMessage}
+              </div>
+            ) : filteredOptions.length === 0 ? (
+              <div className={cn(autocompleteEmptyVariants())}>{emptyMessage}</div>
+            ) : (
+              filteredOptions.map((option, index) => {
+                const isSelected = multiple
+                  ? selectedValues.includes(option.value)
+                  : singleValue === option.value
+                return (
+                <div
+                  key={option.value}
+                  aria-disabled={option.disabled}
+                  aria-selected={isSelected}
+                  className={cn(autocompleteItemVariants())}
+                  data-disabled={option.disabled ?? undefined}
+                  data-highlighted={highlightedIndex === index || undefined}
+                  data-index={index}
+                  data-selected={isSelected || undefined}
+                  data-slot="autocomplete-item"
+                  id={`autocomplete-option-${String(index)}`}
+                  role="option"
+                  onClick={() => {
+                    if (!option.disabled) {
+                      handleSelect(option.value)
+                    }
+                  }}
+                  onMouseDown={() => {
+                    // Prevent blur validation when clicking on dropdown item
+                    isSelectingFromDropdownRef.current = true
+                  }}
+                  onMouseEnter={() => {
+                    if (!option.disabled) {
+                      setHighlightedIndex(index)
+                    }
+                  }}
+                >
+                  <CheckIcon
+                    className={cn(
+                      "size-4",
+                      isSelected ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </div>
+                )
+              })
+            )}
+          </div>
+        </div>
+      )}
+
+      {error && errorMessage && (
+        <p
+          className="mt-1.5 text-sm text-destructive"
+          data-slot="autocomplete-error"
+          id={errorId}
+          role="alert"
+        >
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export { Autocomplete }