banhaten 0.3.0 → 0.5.0

package/registry/components/autocomplete.tsx

@@ -1,651 +1,598 @@
-"use client"
-
-import * as React from "react"
-import { SearchIcon } from "lucide-react"
-
-import { Input, type InputSize, type InputVariant, type InputVisualState } from "./input"
-import {
-  SelectHelperText,
-  SelectLabel,
-  SelectMenu,
-  SelectMenuItem,
-  SelectRoot,
-  type SelectItemType,
-} from "./select"
-import { Tag, type TagSize } from "./tag"
-import { Popover, PopoverAnchor, PopoverContent } from "./popover"
-
-import { cn } from "@/lib/utils"
-
-type AutocompleteSelectionMode = "single" | "multiple"
-type AutocompleteValue = string | string[] | undefined
-
-type AutocompleteOption = {
-  addonText?: React.ReactNode
-  disabled?: boolean
-  itemType?: SelectItemType
-  keywords?: string[]
-  label: React.ReactNode
-  media?: React.ReactNode | false
-  value: string
-}
-
-type AutocompleteFilter = (
-  options: AutocompleteOption[],
-  inputValue: string
-) => AutocompleteOption[]
-
-type AutocompleteInputProps = Omit<
-  React.ComponentProps<"input">,
-  | "className"
-  | "defaultValue"
-  | "dir"
-  | "disabled"
-  | "id"
-  | "size"
-  | "value"
->
-
-type AutocompleteProps = Omit<
-  React.ComponentProps<"div">,
-  "defaultValue" | "dir" | "onChange"
-> & {
-  clearInputOnSelect?: boolean
-  defaultInputValue?: string
-  defaultOpen?: boolean
-  defaultValue?: string | string[]
-  dir?: "ltr" | "rtl" | "auto"
-  disabled?: boolean
-  emptyText?: React.ReactNode
-  errorMessage?: React.ReactNode
-  filterOptions?: AutocompleteFilter
-  hasHelperText?: boolean
-  hasInformationIcon?: boolean
-  hasLabel?: boolean
-  helperText?: React.ReactNode
-  inputClassName?: string
-  inputId?: string
-  inputProps?: AutocompleteInputProps
-  inputValue?: string
-  isOptional?: boolean
-  isRequired?: boolean
-  label?: React.ReactNode
-  menuClassName?: string
-  name?: string
-  onInputValueChange?: (value: string) => void
-  onOpenChange?: (open: boolean) => void
-  onValueChange?: (
-    value: AutocompleteValue,
-    option: AutocompleteOption | AutocompleteOption[] | null
-  ) => void
-  open?: boolean
-  optionalText?: React.ReactNode
-  options: AutocompleteOption[]
-  placeholder?: string
-  selectionMode?: AutocompleteSelectionMode
-  size?: InputSize
-  state?: InputVisualState
-  tagListClassName?: string
-  tagSize?: TagSize
-  variant?: InputVariant
-  value?: string | string[]
-}
-
-const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
-  function Autocomplete(
-    {
-      className,
-      clearInputOnSelect,
-      defaultInputValue,
-      defaultOpen = false,
-      defaultValue,
-      dir,
-      disabled = false,
-      emptyText = "No results found",
-      errorMessage,
-      filterOptions = defaultFilterOptions,
-      hasHelperText,
-      hasInformationIcon = false,
-      hasLabel,
-      helperText,
-      inputClassName,
-      inputId,
-      inputProps,
-      inputValue,
-      isOptional = false,
-      isRequired = false,
-      label,
-      menuClassName,
-      name,
-      onInputValueChange,
-      onOpenChange,
-      onBlur: onRootBlur,
-      onValueChange,
-      open,
-      optionalText,
-      options,
-      placeholder,
-      selectionMode = "single",
-      size = "lg",
-      state,
-      tagListClassName,
-      tagSize,
-      value,
-      variant = "default",
-      ...props
-    },
-    ref
-  ) {
-    const generatedInputId = React.useId()
-    const generatedListboxId = React.useId()
-    const resolvedInputId = inputId || generatedInputId
-    const listboxId = `${resolvedInputId}-${generatedListboxId}-listbox`
-    const rootRef = React.useRef<HTMLDivElement | null>(null)
-    const isMultiple = selectionMode === "multiple"
-    const isValueControlled = value !== undefined
-    const isInputControlled = inputValue !== undefined
-    const isOpenControlled = open !== undefined
-    const [uncontrolledValue, setUncontrolledValue] =
-      React.useState<AutocompleteValue>(defaultValue)
-    const [uncontrolledInputValue, setUncontrolledInputValue] =
-      React.useState(
-        defaultInputValue ??
-          getInitialInputValue(defaultValue, selectionMode, options)
-      )
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
-    const [activeIndex, setActiveIndex] = React.useState(-1)
-
-    const selectedValue = isValueControlled ? value : uncontrolledValue
-    const selectedValues = normalizeSelectedValues(selectedValue, isMultiple)
-    const query = isInputControlled ? inputValue : uncontrolledInputValue
-    const isDisabled = disabled || state === "disabled"
-    const isError = state === "error" && !isDisabled
-    const selectedOptions = React.useMemo(
-      () => getSelectedOptions(options, selectedValues),
-      [options, selectedValues]
-    )
-    const filteredOptions = React.useMemo(
-      () => filterOptions(options, query),
-      [filterOptions, options, query]
-    )
-    const hasSelection = selectedValues.length > 0
-    const visualState: InputVisualState = isDisabled
-      ? "disabled"
-      : isError
-        ? "error"
-        : state ?? (hasSelection || query ? "filled" : "default")
-    const shouldRenderLabel = hasLabel ?? hasRenderableContent(label)
-    const helperContent = isError ? errorMessage : helperText
-    const shouldRenderHelper =
-      hasHelperText ?? hasRenderableContent(helperContent)
-    const menuOpen =
-      !isDisabled &&
-      (isOpenControlled ? Boolean(open) : uncontrolledOpen) &&
-      (filteredOptions.length > 0 || hasRenderableContent(emptyText))
-    const activeOption = filteredOptions[activeIndex]
-    const activeOptionId =
-      menuOpen && activeOption ? getOptionId(listboxId, activeIndex) : undefined
-    const resolvedTagSize =
-      tagSize ?? (size === "md" ? ("xs" as const) : ("md" as const))
-    const clearOnSelect = clearInputOnSelect ?? isMultiple
-
-    React.useEffect(() => {
-      if (!menuOpen) {
-        setActiveIndex(-1)
-        return
-      }
-
-      setActiveIndex((currentIndex) => {
-        if (currentIndex >= 0 && !filteredOptions[currentIndex]?.disabled) {
-          return currentIndex
-        }
-
-        return getFirstEnabledIndex(filteredOptions)
-      })
-    }, [filteredOptions, menuOpen])
-
-    function setRootRef(node: HTMLDivElement | null) {
-      rootRef.current = node
-
-      if (typeof ref === "function") {
-        ref(node)
-      } else if (ref) {
-        ref.current = node
-      }
-    }
-
-    function setMenuOpen(nextOpen: boolean) {
-      if (!isOpenControlled) {
-        setUncontrolledOpen(nextOpen)
-      }
-
-      onOpenChange?.(nextOpen)
-    }
-
-    function setQuery(nextQuery: string) {
-      if (!isInputControlled) {
-        setUncontrolledInputValue(nextQuery)
-      }
-
-      onInputValueChange?.(nextQuery)
-    }
-
-    function setSelectedValue(
-      nextValue: AutocompleteValue,
-      option: AutocompleteOption | AutocompleteOption[] | null
-    ) {
-      if (!isValueControlled) {
-        setUncontrolledValue(nextValue)
-      }
-
-      onValueChange?.(nextValue, option)
-    }
-
-    function selectOption(option: AutocompleteOption) {
-      if (option.disabled) return
-
-      if (isMultiple) {
-        const nextValues = selectedValues.includes(option.value)
-          ? selectedValues.filter((item) => item !== option.value)
-          : [...selectedValues, option.value]
-
-        setSelectedValue(nextValues, getSelectedOptions(options, nextValues))
-        setQuery(clearOnSelect ? "" : query)
-        setMenuOpen(true)
-        return
-      }
-
-      setSelectedValue(option.value, option)
-      setQuery(clearOnSelect ? "" : getOptionText(option))
-      setMenuOpen(false)
-    }
-
-    function removeSelectedValue(valueToRemove: string) {
-      const nextValues = selectedValues.filter((item) => item !== valueToRemove)
-      setSelectedValue(
-        isMultiple ? nextValues : nextValues[0],
-        getSelectedOptions(options, nextValues)
-      )
-    }
-
-    function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-      inputProps?.onChange?.(event)
-      if (event.defaultPrevented) return
-
-      setQuery(event.currentTarget.value)
-      setMenuOpen(true)
-    }
-
-    function handleInputFocus(event: React.FocusEvent<HTMLInputElement>) {
-      inputProps?.onFocus?.(event)
-      if (!event.defaultPrevented) setMenuOpen(true)
-    }
-
-    function handleRootBlur(event: React.FocusEvent<HTMLDivElement>) {
-      onRootBlur?.(event)
-      if (event.defaultPrevented) return
-
-      if (
-        event.relatedTarget instanceof Node &&
-        event.currentTarget.contains(event.relatedTarget)
-      ) {
-        return
-      }
-
-      setMenuOpen(false)
-    }
-
-    function handleInputClick(event: React.MouseEvent<HTMLInputElement>) {
-      inputProps?.onClick?.(event)
-      if (!event.defaultPrevented) setMenuOpen(true)
-    }
-
-    function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-      inputProps?.onKeyDown?.(event)
-      if (event.defaultPrevented) return
-
-      if (event.key === "ArrowDown") {
-        event.preventDefault()
-        setMenuOpen(true)
-        setActiveIndex((currentIndex) =>
-          getNextEnabledIndex(filteredOptions, currentIndex, 1)
-        )
-        return
-      }
-
-      if (event.key === "ArrowUp") {
-        event.preventDefault()
-        setMenuOpen(true)
-        setActiveIndex((currentIndex) =>
-          getNextEnabledIndex(filteredOptions, currentIndex, -1)
-        )
-        return
-      }
-
-      if (event.key === "Home" && menuOpen) {
-        event.preventDefault()
-        setActiveIndex(getFirstEnabledIndex(filteredOptions))
-        return
-      }
-
-      if (event.key === "End" && menuOpen) {
-        event.preventDefault()
-        setActiveIndex(getLastEnabledIndex(filteredOptions))
-        return
-      }
-
-      if (event.key === "Enter" && menuOpen && activeOption) {
-        event.preventDefault()
-        selectOption(activeOption)
-        return
-      }
-
-      if (event.key === "Escape") {
-        setMenuOpen(false)
-        return
-      }
-
-      if (
-        event.key === "Backspace" &&
-        isMultiple &&
-        query.length === 0 &&
-        selectedValues.length > 0
-      ) {
-        removeSelectedValue(selectedValues[selectedValues.length - 1])
-      }
-    }
-
-    return (
-      <SelectRoot
-        data-selection-mode={selectionMode}
-        data-slot="autocomplete-root"
-        data-state={visualState}
-        data-variant={variant}
-        dir={dir}
-        ref={setRootRef}
-        className={cn(
-          "[--bh-select-width:var(--bh-input-width)] [--bh-select-menu-width:var(--bh-select-width)]",
-          className
-        )}
-        {...props}
-        onBlur={handleRootBlur}
-      >
-        {shouldRenderLabel ? (
-          <SelectLabel
-            hasInformationIcon={hasInformationIcon}
-            htmlFor={resolvedInputId}
-            isOptional={isOptional}
-            isRequired={isRequired}
-            optionalText={optionalText}
-          >
-            {label}
-          </SelectLabel>
-        ) : null}
-
-        {isMultiple && selectedOptions.length > 0 ? (
-          <div
-            data-slot="autocomplete-tags"
-            className={cn(
-              "flex min-w-0 flex-wrap gap-[var(--bh-space-xs-4)]",
-              tagListClassName
-            )}
-          >
-            {selectedOptions.map((option) => (
-              <Tag
-                closeLabel={formatRemoveLabel(option)}
-                disabled={isDisabled}
-                key={option.value}
-                showCloseButton
-                size={resolvedTagSize}
-                onClose={() => removeSelectedValue(option.value)}
-              >
-                {option.label}
-              </Tag>
-            ))}
-          </div>
-        ) : null}
-
-        <Popover
-          className="w-full"
-          open={menuOpen}
-          onOpenChange={setMenuOpen}
-        >
-          <PopoverAnchor asChild>
-            <Input
-            aria-activedescendant={activeOptionId}
-            aria-autocomplete="list"
-            aria-controls={menuOpen ? listboxId : undefined}
-            aria-describedby={shouldRenderHelper ? `${resolvedInputId}-helper` : undefined}
-            aria-expanded={menuOpen}
-            aria-haspopup="listbox"
-            aria-invalid={isError || undefined}
-            disabled={isDisabled}
-            hasHelperText={false}
-            hasInformationIcon={false}
-            hasLabel={false}
-            id={resolvedInputId}
-            kind="default"
-            leadingIcon={
-              <SearchIcon
-                aria-hidden="true"
-                className="size-[var(--bh-input-icon-size)]"
-                focusable="false"
-                strokeWidth="var(--bh-icon-stroke-225)"
-              />
-            }
-            placeholder={placeholder}
-            role="combobox"
-            size={size}
-            state={visualState}
-            value={query}
-            variant={variant}
-            className={cn("[--bh-input-width:100%]", inputClassName)}
-            {...inputProps}
-            onChange={handleInputChange}
-            onClick={handleInputClick}
-            onFocus={handleInputFocus}
-            onKeyDown={handleInputKeyDown}
-            />
-          </PopoverAnchor>
-
-          <PopoverContent
-            align="start"
-            role="presentation"
-            showArrow={false}
-            size="auto"
-            className="w-[var(--bh-select-menu-width)] bg-transparent p-0 shadow-none"
-            onOpenAutoFocus={(event) => event.preventDefault()}
-          >
-            <SelectMenu
-              aria-multiselectable={isMultiple || undefined}
-              id={listboxId}
-              className={cn(
-                "max-h-[var(--bh-autocomplete-menu-max-height,var(--bh-space-18xl-320))] overflow-y-auto",
-                menuClassName
-              )}
-            >
-              {filteredOptions.length > 0 ? (
-                filteredOptions.map((option, index) => (
-                  <SelectMenuItem
-                    aria-selected={selectedValues.includes(option.value)}
-                    data-active={activeIndex === index ? "true" : undefined}
-                    disabled={option.disabled}
-                    id={getOptionId(listboxId, index)}
-                    itemType={option.itemType}
-                    key={option.value}
-                    label={option.label}
-                    media={option.media}
-                    addonText={option.addonText}
-                    selected={selectedValues.includes(option.value)}
-                    selectionType="default"
-                    value={option.value}
-                    className={cn(
-                      activeIndex === index &&
-                        "[&>[data-slot=select-menu-item-content]]:bg-[var(--bh-select-item-hover-bg)]"
-                    )}
-                    onClick={() => selectOption(option)}
-                    onMouseDown={(event) => event.preventDefault()}
-                    onMouseEnter={() => {
-                      if (!option.disabled) setActiveIndex(index)
-                    }}
-                  />
-                ))
-              ) : (
-                <div
-                  data-slot="autocomplete-empty"
-                  role="status"
-                  className="px-[var(--bh-select-item-padding-x)] py-[var(--bh-space-md-8)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-                >
-                  <span dir="auto">{emptyText}</span>
-                </div>
-              )}
-            </SelectMenu>
-          </PopoverContent>
-        </Popover>
-
-        {shouldRenderHelper ? (
-          <SelectHelperText
-            id={`${resolvedInputId}-helper`}
-            type={isError ? "error" : "default"}
-          >
-            {helperContent}
-          </SelectHelperText>
-        ) : null}
-
-        {name
-          ? selectedValues.map((selectedItem) => (
-              <input
-                key={selectedItem}
-                name={name}
-                type="hidden"
-                value={selectedItem}
-              />
-            ))
-          : null}
-      </SelectRoot>
-    )
-  }
-)
-
-function defaultFilterOptions(
-  options: AutocompleteOption[],
-  inputValue: string
-) {
-  const normalizedInput = inputValue.trim().toLocaleLowerCase()
-
-  if (!normalizedInput) return options
-
-  return options.filter((option) =>
-    getSearchText(option).toLocaleLowerCase().includes(normalizedInput)
-  )
-}
-
-function getSearchText(option: AutocompleteOption) {
-  return [getOptionText(option), option.value, ...(option.keywords || [])]
-    .filter(Boolean)
-    .join(" ")
-}
-
-function getOptionText(option: AutocompleteOption) {
-  if (
-    typeof option.label === "string" ||
-    typeof option.label === "number" ||
-    typeof option.label === "bigint"
-  ) {
-    return String(option.label)
-  }
-
-  return option.value
-}
-
-function normalizeSelectedValues(
-  value: AutocompleteValue,
-  multiple: boolean
-) {
-  if (Array.isArray(value)) return value
-  if (!value) return []
-
-  return multiple ? [value] : [value]
-}
-
-function getSelectedOptions(
-  options: AutocompleteOption[],
-  values: string[]
-) {
-  const selectedValues = new Set(values)
-  return options.filter((option) => selectedValues.has(option.value))
-}
-
-function getInitialInputValue(
-  defaultValue: string | string[] | undefined,
-  selectionMode: AutocompleteSelectionMode,
-  options: AutocompleteOption[]
-) {
-  if (selectionMode === "multiple" || Array.isArray(defaultValue) || !defaultValue) {
-    return ""
-  }
-
-  const option = options.find((item) => item.value === defaultValue)
-  return option ? getOptionText(option) : ""
-}
-
-function hasRenderableContent(content: React.ReactNode) {
-  return (
-    content !== undefined &&
-    content !== null &&
-    content !== false &&
-    content !== ""
-  )
-}
-
-function getEnabledIndexes(options: AutocompleteOption[]) {
-  return options
-    .map((option, index) => (option.disabled ? -1 : index))
-    .filter((index) => index >= 0)
-}
-
-function getFirstEnabledIndex(options: AutocompleteOption[]) {
-  return getEnabledIndexes(options)[0] ?? -1
-}
-
-function getLastEnabledIndex(options: AutocompleteOption[]) {
-  const enabledIndexes = getEnabledIndexes(options)
-  return enabledIndexes[enabledIndexes.length - 1] ?? -1
-}
-
-function getNextEnabledIndex(
-  options: AutocompleteOption[],
-  currentIndex: number,
-  offset: 1 | -1
-) {
-  const enabledIndexes = getEnabledIndexes(options)
-  if (enabledIndexes.length === 0) return -1
-
-  const currentPosition = enabledIndexes.indexOf(currentIndex)
-  if (currentPosition === -1) {
-    return offset > 0
-      ? enabledIndexes[0]
-      : enabledIndexes[enabledIndexes.length - 1]
-  }
-
-  const nextPosition =
-    (currentPosition + offset + enabledIndexes.length) % enabledIndexes.length
-  return enabledIndexes[nextPosition]
-}
-
-function getOptionId(listboxId: string, index: number) {
-  return `${listboxId}-option-${index}`
-}
-
-function formatRemoveLabel(option: AutocompleteOption) {
-  const optionText = getOptionText(option)
-  return optionText ? `Remove ${optionText}` : "Remove option"
-}
-
-export { Autocomplete, defaultFilterOptions }
-export type {
-  AutocompleteFilter,
-  AutocompleteOption,
-  AutocompleteProps,
-  AutocompleteSelectionMode,
-}
+"use client"
+
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { Input, type InputSize, type InputVariant, type InputVisualState } from "./input"
+import {
+  SelectHelperText,
+  SelectLabel,
+  SelectMenu,
+  SelectMenuItem,
+  SelectRoot,
+  type SelectItemType,
+} from "./select"
+import { Tag, type TagSize } from "./tag"
+import { Popover, PopoverAnchor, PopoverContent } from "./popover"
+
+import { cn } from "@/lib/utils"
+import { useListboxNavigation } from "@/hooks/use-listbox-navigation"
+
+type AutocompleteSelectionMode = "single" | "multiple"
+type AutocompleteValue = string | string[] | undefined
+
+type AutocompleteOption = {
+  addonText?: React.ReactNode
+  disabled?: boolean
+  itemType?: SelectItemType
+  keywords?: string[]
+  label: React.ReactNode
+  media?: React.ReactNode | false
+  value: string
+}
+
+type AutocompleteFilter = (
+  options: AutocompleteOption[],
+  inputValue: string
+) => AutocompleteOption[]
+
+type AutocompleteInputProps = Omit<
+  React.ComponentProps<"input">,
+  | "className"
+  | "defaultValue"
+  | "dir"
+  | "disabled"
+  | "id"
+  | "size"
+  | "value"
+>
+
+type AutocompleteProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "dir" | "onChange"
+> & {
+  clearInputOnSelect?: boolean
+  defaultInputValue?: string
+  defaultOpen?: boolean
+  defaultValue?: string | string[]
+  dir?: "ltr" | "rtl" | "auto"
+  disabled?: boolean
+  emptyText?: React.ReactNode
+  errorMessage?: React.ReactNode
+  filterOptions?: AutocompleteFilter
+  hasHelperText?: boolean
+  hasInformationIcon?: boolean
+  hasLabel?: boolean
+  helperText?: React.ReactNode
+  inputClassName?: string
+  inputId?: string
+  inputProps?: AutocompleteInputProps
+  inputValue?: string
+  isOptional?: boolean
+  isRequired?: boolean
+  label?: React.ReactNode
+  menuClassName?: string
+  name?: string
+  onInputValueChange?: (value: string) => void
+  onOpenChange?: (open: boolean) => void
+  onValueChange?: (
+    value: AutocompleteValue,
+    option: AutocompleteOption | AutocompleteOption[] | null
+  ) => void
+  open?: boolean
+  optionalText?: React.ReactNode
+  options: AutocompleteOption[]
+  placeholder?: string
+  selectionMode?: AutocompleteSelectionMode
+  size?: InputSize
+  state?: InputVisualState
+  tagListClassName?: string
+  tagSize?: TagSize
+  variant?: InputVariant
+  value?: string | string[]
+}
+
+const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
+  function Autocomplete(
+    {
+      className,
+      clearInputOnSelect,
+      defaultInputValue,
+      defaultOpen = false,
+      defaultValue,
+      dir,
+      disabled = false,
+      emptyText = "No results found",
+      errorMessage,
+      filterOptions = defaultFilterOptions,
+      hasHelperText,
+      hasInformationIcon = false,
+      hasLabel,
+      helperText,
+      inputClassName,
+      inputId,
+      inputProps,
+      inputValue,
+      isOptional = false,
+      isRequired = false,
+      label,
+      menuClassName,
+      name,
+      onInputValueChange,
+      onOpenChange,
+      onBlur: onRootBlur,
+      onValueChange,
+      open,
+      optionalText,
+      options,
+      placeholder,
+      selectionMode = "single",
+      size = "lg",
+      state,
+      tagListClassName,
+      tagSize,
+      value,
+      variant = "default",
+      ...props
+    },
+    ref
+  ) {
+    const generatedInputId = React.useId()
+    const generatedListboxId = React.useId()
+    const resolvedInputId = inputId || generatedInputId
+    const listboxId = `${resolvedInputId}-${generatedListboxId}-listbox`
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const isMultiple = selectionMode === "multiple"
+    const isValueControlled = value !== undefined
+    const isInputControlled = inputValue !== undefined
+    const isOpenControlled = open !== undefined
+    const [uncontrolledValue, setUncontrolledValue] =
+      React.useState<AutocompleteValue>(defaultValue)
+    const [uncontrolledInputValue, setUncontrolledInputValue] =
+      React.useState(
+        defaultInputValue ??
+          getInitialInputValue(defaultValue, selectionMode, options)
+      )
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+    const selectedValue = isValueControlled ? value : uncontrolledValue
+    const selectedValues = normalizeSelectedValues(selectedValue, isMultiple)
+    const query = isInputControlled ? inputValue : uncontrolledInputValue
+    const isDisabled = disabled || state === "disabled"
+    const isError = state === "error" && !isDisabled
+    const selectedOptions = React.useMemo(
+      () => getSelectedOptions(options, selectedValues),
+      [options, selectedValues]
+    )
+    const filteredOptions = React.useMemo(
+      () => filterOptions(options, query),
+      [filterOptions, options, query]
+    )
+    const hasSelection = selectedValues.length > 0
+    const visualState: InputVisualState = isDisabled
+      ? "disabled"
+      : isError
+        ? "error"
+        : state ?? (hasSelection || query ? "filled" : "default")
+    const shouldRenderLabel = hasLabel ?? hasRenderableContent(label)
+    const helperContent = isError ? errorMessage : helperText
+    const shouldRenderHelper =
+      hasHelperText ?? hasRenderableContent(helperContent)
+    const menuOpen =
+      !isDisabled &&
+      (isOpenControlled ? Boolean(open) : uncontrolledOpen) &&
+      (filteredOptions.length > 0 || hasRenderableContent(emptyText))
+    const listbox = useListboxNavigation({
+      idPrefix: listboxId,
+      isDisabled: (option) => Boolean(option.disabled),
+      open: menuOpen,
+      options: filteredOptions,
+    })
+    const activeIndex = listbox.activeIndex
+    const activeOption = filteredOptions[activeIndex]
+    const resolvedTagSize =
+      tagSize ?? (size === "md" ? ("xs" as const) : ("md" as const))
+    const clearOnSelect = clearInputOnSelect ?? isMultiple
+
+    function setRootRef(node: HTMLDivElement | null) {
+      rootRef.current = node
+
+      if (typeof ref === "function") {
+        ref(node)
+      } else if (ref) {
+        ref.current = node
+      }
+    }
+
+    function setMenuOpen(nextOpen: boolean) {
+      if (!isOpenControlled) {
+        setUncontrolledOpen(nextOpen)
+      }
+
+      onOpenChange?.(nextOpen)
+    }
+
+    function setQuery(nextQuery: string) {
+      if (!isInputControlled) {
+        setUncontrolledInputValue(nextQuery)
+      }
+
+      onInputValueChange?.(nextQuery)
+    }
+
+    function setSelectedValue(
+      nextValue: AutocompleteValue,
+      option: AutocompleteOption | AutocompleteOption[] | null
+    ) {
+      if (!isValueControlled) {
+        setUncontrolledValue(nextValue)
+      }
+
+      onValueChange?.(nextValue, option)
+    }
+
+    function selectOption(option: AutocompleteOption) {
+      if (option.disabled) return
+
+      if (isMultiple) {
+        const nextValues = selectedValues.includes(option.value)
+          ? selectedValues.filter((item) => item !== option.value)
+          : [...selectedValues, option.value]
+
+        setSelectedValue(nextValues, getSelectedOptions(options, nextValues))
+        setQuery(clearOnSelect ? "" : query)
+        setMenuOpen(true)
+        return
+      }
+
+      setSelectedValue(option.value, option)
+      setQuery(clearOnSelect ? "" : getOptionText(option))
+      setMenuOpen(false)
+    }
+
+    function removeSelectedValue(valueToRemove: string) {
+      const nextValues = selectedValues.filter((item) => item !== valueToRemove)
+      setSelectedValue(
+        isMultiple ? nextValues : nextValues[0],
+        getSelectedOptions(options, nextValues)
+      )
+    }
+
+    function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+      inputProps?.onChange?.(event)
+      if (event.defaultPrevented) return
+
+      setQuery(event.currentTarget.value)
+      setMenuOpen(true)
+    }
+
+    function handleInputFocus(event: React.FocusEvent<HTMLInputElement>) {
+      inputProps?.onFocus?.(event)
+      if (!event.defaultPrevented) setMenuOpen(true)
+    }
+
+    function handleRootBlur(event: React.FocusEvent<HTMLDivElement>) {
+      onRootBlur?.(event)
+      if (event.defaultPrevented) return
+
+      if (
+        event.relatedTarget instanceof Node &&
+        event.currentTarget.contains(event.relatedTarget)
+      ) {
+        return
+      }
+
+      setMenuOpen(false)
+    }
+
+    function handleInputClick(event: React.MouseEvent<HTMLInputElement>) {
+      inputProps?.onClick?.(event)
+      if (!event.defaultPrevented) setMenuOpen(true)
+    }
+
+    function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+      inputProps?.onKeyDown?.(event)
+      if (event.defaultPrevented) return
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        setMenuOpen(true)
+        listbox.move(1)
+        return
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault()
+        setMenuOpen(true)
+        listbox.move(-1)
+        return
+      }
+
+      if (event.key === "Home" && menuOpen) {
+        event.preventDefault()
+        listbox.moveToEdge("first")
+        return
+      }
+
+      if (event.key === "End" && menuOpen) {
+        event.preventDefault()
+        listbox.moveToEdge("last")
+        return
+      }
+
+      if (event.key === "Enter" && menuOpen && activeOption) {
+        event.preventDefault()
+        selectOption(activeOption)
+        return
+      }
+
+      if (event.key === "Escape") {
+        setMenuOpen(false)
+        return
+      }
+
+      if (
+        event.key === "Backspace" &&
+        isMultiple &&
+        query.length === 0 &&
+        selectedValues.length > 0
+      ) {
+        removeSelectedValue(selectedValues[selectedValues.length - 1])
+      }
+    }
+
+    return (
+      <SelectRoot
+        data-selection-mode={selectionMode}
+        data-slot="autocomplete-root"
+        data-state={visualState}
+        data-variant={variant}
+        dir={dir}
+        ref={setRootRef}
+        className={cn(
+          "[--bh-select-width:var(--bh-input-width)] [--bh-select-menu-width:var(--bh-select-width)]",
+          className
+        )}
+        {...props}
+        onBlur={handleRootBlur}
+      >
+        {shouldRenderLabel ? (
+          <SelectLabel
+            hasInformationIcon={hasInformationIcon}
+            htmlFor={resolvedInputId}
+            isOptional={isOptional}
+            isRequired={isRequired}
+            optionalText={optionalText}
+          >
+            {label}
+          </SelectLabel>
+        ) : null}
+
+        {isMultiple && selectedOptions.length > 0 ? (
+          <div
+            data-slot="autocomplete-tags"
+            className={cn(
+              "flex min-w-0 flex-wrap gap-[var(--bh-space-xs-4)]",
+              tagListClassName
+            )}
+          >
+            {selectedOptions.map((option) => (
+              <Tag
+                closeLabel={formatRemoveLabel(option)}
+                disabled={isDisabled}
+                key={option.value}
+                showCloseButton
+                size={resolvedTagSize}
+                onClose={() => removeSelectedValue(option.value)}
+              >
+                {option.label}
+              </Tag>
+            ))}
+          </div>
+        ) : null}
+
+        <Popover
+          className="w-full"
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+        >
+          <PopoverAnchor asChild>
+            <Input
+            aria-activedescendant={listbox.activeOptionId}
+            aria-autocomplete="list"
+            aria-controls={menuOpen ? listboxId : undefined}
+            aria-describedby={shouldRenderHelper ? `${resolvedInputId}-helper` : undefined}
+            aria-expanded={menuOpen}
+            aria-haspopup="listbox"
+            aria-invalid={isError || undefined}
+            disabled={isDisabled}
+            hasHelperText={false}
+            hasInformationIcon={false}
+            hasLabel={false}
+            id={resolvedInputId}
+            kind="default"
+            leadingIcon={
+              <SearchIcon
+                aria-hidden="true"
+                className="size-[var(--bh-input-icon-size)]"
+                focusable="false"
+                strokeWidth="var(--bh-icon-stroke-225)"
+              />
+            }
+            placeholder={placeholder}
+            role="combobox"
+            size={size}
+            state={visualState}
+            value={query}
+            variant={variant}
+            className={cn("[--bh-input-width:100%]", inputClassName)}
+            {...inputProps}
+            onChange={handleInputChange}
+            onClick={handleInputClick}
+            onFocus={handleInputFocus}
+            onKeyDown={handleInputKeyDown}
+            />
+          </PopoverAnchor>
+
+          <PopoverContent
+            align="start"
+            role="presentation"
+            showArrow={false}
+            size="auto"
+            className="w-[var(--bh-select-menu-width)] bg-transparent p-0 shadow-none"
+            onOpenAutoFocus={(event) => event.preventDefault()}
+          >
+            <SelectMenu
+              aria-multiselectable={isMultiple || undefined}
+              id={listboxId}
+              className={cn(
+                "max-h-[var(--bh-autocomplete-menu-max-height,var(--bh-space-18xl-320))] overflow-y-auto",
+                menuClassName
+              )}
+            >
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option, index) => (
+                  <SelectMenuItem
+                    aria-selected={selectedValues.includes(option.value)}
+                    data-active={activeIndex === index ? "true" : undefined}
+                    disabled={option.disabled}
+                    id={listbox.optionId(index)}
+                    itemType={option.itemType}
+                    key={option.value}
+                    label={option.label}
+                    media={option.media}
+                    addonText={option.addonText}
+                    selected={selectedValues.includes(option.value)}
+                    selectionType="default"
+                    value={option.value}
+                    className={cn(
+                      activeIndex === index &&
+                        "[&>[data-slot=select-menu-item-content]]:bg-[var(--bh-select-item-hover-bg)]"
+                    )}
+                    onClick={() => selectOption(option)}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onMouseEnter={() => {
+                      if (!option.disabled) listbox.setActiveIndex(index)
+                    }}
+                  />
+                ))
+              ) : (
+                <div
+                  data-slot="autocomplete-empty"
+                  role="status"
+                  className="px-[var(--bh-select-item-padding-x)] py-[var(--bh-space-md-8)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+                >
+                  <span dir="auto">{emptyText}</span>
+                </div>
+              )}
+            </SelectMenu>
+          </PopoverContent>
+        </Popover>
+
+        {shouldRenderHelper ? (
+          <SelectHelperText
+            id={`${resolvedInputId}-helper`}
+            type={isError ? "error" : "default"}
+          >
+            {helperContent}
+          </SelectHelperText>
+        ) : null}
+
+        {name
+          ? selectedValues.map((selectedItem) => (
+              <input
+                key={selectedItem}
+                name={name}
+                type="hidden"
+                value={selectedItem}
+              />
+            ))
+          : null}
+      </SelectRoot>
+    )
+  }
+)
+
+function defaultFilterOptions(
+  options: AutocompleteOption[],
+  inputValue: string
+) {
+  const normalizedInput = inputValue.trim().toLocaleLowerCase()
+
+  if (!normalizedInput) return options
+
+  return options.filter((option) =>
+    getSearchText(option).toLocaleLowerCase().includes(normalizedInput)
+  )
+}
+
+function getSearchText(option: AutocompleteOption) {
+  return [getOptionText(option), option.value, ...(option.keywords || [])]
+    .filter(Boolean)
+    .join(" ")
+}
+
+function getOptionText(option: AutocompleteOption) {
+  if (
+    typeof option.label === "string" ||
+    typeof option.label === "number" ||
+    typeof option.label === "bigint"
+  ) {
+    return String(option.label)
+  }
+
+  return option.value
+}
+
+function normalizeSelectedValues(
+  value: AutocompleteValue,
+  multiple: boolean
+) {
+  if (Array.isArray(value)) return value
+  if (!value) return []
+
+  return multiple ? [value] : [value]
+}
+
+function getSelectedOptions(
+  options: AutocompleteOption[],
+  values: string[]
+) {
+  const selectedValues = new Set(values)
+  return options.filter((option) => selectedValues.has(option.value))
+}
+
+function getInitialInputValue(
+  defaultValue: string | string[] | undefined,
+  selectionMode: AutocompleteSelectionMode,
+  options: AutocompleteOption[]
+) {
+  if (selectionMode === "multiple" || Array.isArray(defaultValue) || !defaultValue) {
+    return ""
+  }
+
+  const option = options.find((item) => item.value === defaultValue)
+  return option ? getOptionText(option) : ""
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+function formatRemoveLabel(option: AutocompleteOption) {
+  const optionText = getOptionText(option)
+  return optionText ? `Remove ${optionText}` : "Remove option"
+}
+
+export { Autocomplete, defaultFilterOptions }
+export type {
+  AutocompleteFilter,
+  AutocompleteOption,
+  AutocompleteProps,
+  AutocompleteSelectionMode,
+}