{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "title": "Autocomplete",
  "description": "An input that suggests options as you type.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/button",
    "@lumi-ui/input"
  ],
  "files": [
    {
      "path": "registry/ui/autocomplete.tsx",
      "content": "\"use client\";\n\nimport { Autocomplete as BaseAutocomplete } from \"@base-ui/react/autocomplete\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { ChevronDown, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\nimport { Button } from \"@/registry/ui/button\";\nimport { inputBaseVariants, inputVariants } from \"@/registry/ui/input\";\n\nconst Autocomplete = BaseAutocomplete.Root;\n\nfunction AutocompleteValue({\n  children,\n  ...props\n}: BaseAutocomplete.Value.Props) {\n  return (\n    <BaseAutocomplete.Value data-slot=\"autocomplete-value\" {...props}>\n      {children}\n    </BaseAutocomplete.Value>\n  );\n}\n\nfunction AutocompleteIcon({\n  className,\n  ...props\n}: BaseAutocomplete.Icon.Props) {\n  return (\n    <BaseAutocomplete.Icon\n      className={cn(\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"autocomplete-icon\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteInput({\n  className,\n  variant = \"default\",\n  inputSize = \"default\",\n  ...props\n}: BaseAutocomplete.Input.Props &\n  VariantProps<typeof inputVariants> &\n  VariantProps<typeof inputBaseVariants>) {\n  return (\n    <BaseAutocomplete.Input\n      className={cn(\n        inputVariants({ inputSize }),\n        inputBaseVariants({ variant }),\n        className,\n      )}\n      data-slot=\"autocomplete-input\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteClear({\n  className,\n  ...props\n}: BaseAutocomplete.Clear.Props) {\n  return (\n    <BaseAutocomplete.Clear\n      aria-label=\"Clear selection\"\n      className={cn(\n        \"outline-none pointer-coarse:after:absolute pointer-coarse:after:min-h-10 pointer-coarse:after:min-w-10\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteTrigger({\n  className,\n  ...props\n}: BaseAutocomplete.Trigger.Props) {\n  return (\n    <BaseAutocomplete.Trigger\n      className={cn(\n        \"outline-none pointer-coarse:after:absolute pointer-coarse:after:min-h-10 pointer-coarse:after:min-w-10\",\n        className,\n      )}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteList({\n  className,\n  ...props\n}: BaseAutocomplete.List.Props) {\n  return (\n    <BaseAutocomplete.List\n      className={cn(\n        \"outline-none py-1 data-empty:p-0\",\n        \"min-h-0 overflow-y-auto scroll-py-2\",\n        className,\n      )}\n      data-slot=\"autocomplete-list\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompletePortal({\n  className,\n  ...props\n}: BaseAutocomplete.Portal.Props) {\n  return (\n    <BaseAutocomplete.Portal\n      className={className}\n      data-slot=\"autocomplete-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteBackdrop({\n  className,\n  ...props\n}: BaseAutocomplete.Backdrop.Props) {\n  return (\n    <BaseAutocomplete.Backdrop\n      className={className}\n      data-slot=\"autocomplete-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompletePositioner({\n  className,\n  ...props\n}: BaseAutocomplete.Positioner.Props) {\n  return (\n    <BaseAutocomplete.Positioner\n      className={cn(\"outline-none\", className)}\n      data-slot=\"autocomplete-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompletePopup({\n  className,\n  ...props\n}: BaseAutocomplete.Popup.Props) {\n  return (\n    <BaseAutocomplete.Popup\n      className={className}\n      data-slot=\"autocomplete-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteArrow({\n  className,\n  ...props\n}: BaseAutocomplete.Arrow.Props) {\n  return (\n    <BaseAutocomplete.Arrow\n      className={cn(\n        \"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        className,\n      )}\n      data-slot=\"autocomplete-arrow\"\n      {...props}\n    >\n      <ArrowSvg />\n    </BaseAutocomplete.Arrow>\n  );\n}\n\nfunction AutocompleteStatus({\n  className,\n  ...props\n}: BaseAutocomplete.Status.Props) {\n  return (\n    <BaseAutocomplete.Status\n      className={cn(\n        \"p-3 text-sm text-center text-muted-foreground flex gap-2 items-center empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteEmpty({\n  className,\n  ...props\n}: BaseAutocomplete.Empty.Props) {\n  return (\n    <BaseAutocomplete.Empty\n      className={cn(\n        \"p-3 text-sm text-center text-muted-foreground empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteCollection(props: BaseAutocomplete.Collection.Props) {\n  return (\n    <BaseAutocomplete.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteRow({ className, ...props }: BaseAutocomplete.Row.Props) {\n  return (\n    <BaseAutocomplete.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteItem({\n  className,\n  ...props\n}: BaseAutocomplete.Item.Props) {\n  return (\n    <BaseAutocomplete.Item\n      className={cn(\n        \"flex items-center gap-2 py-1.5 text-sm pl-3.5 pr-8\",\n        \"select-none cursor-default outline-none\",\n        \"highlight-on-active\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteGroup({\n  className,\n  ...props\n}: BaseAutocomplete.Group.Props) {\n  return (\n    <BaseAutocomplete.Group\n      className={className}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteGroupLabel({\n  className,\n  ...props\n}: BaseAutocomplete.GroupLabel.Props) {\n  return (\n    <BaseAutocomplete.GroupLabel\n      className={cn(\n        \"px-3.5 py-1.5 text-xs text-muted-foreground font-medium select-none\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteSeparator({\n  className,\n  ...props\n}: BaseAutocomplete.Separator.Props) {\n  return (\n    <BaseAutocomplete.Separator\n      className={cn(\"bg-border pointer-events-none my-1 h-px\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteInputGroupContent({\n  className,\n  showTrigger = false,\n  showClear = false,\n  variant = \"default\",\n  inputSize = \"default\",\n  inputClassName,\n  addonIcon,\n  ariaInvalid,\n  embedded,\n  ...props\n}: BaseAutocomplete.Input.Props & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  variant?: VariantProps<typeof inputBaseVariants>[\"variant\"];\n  inputSize?: VariantProps<typeof inputBaseVariants>[\"inputSize\"];\n  inputClassName?: string;\n  addonIcon?: React.ReactNode;\n  embedded?: boolean;\n  ariaInvalid?: boolean;\n}) {\n  const paddingClass =\n    showTrigger && showClear\n      ? \"pr-14\"\n      : showTrigger || showClear\n        ? \"pr-8\"\n        : \"pr-3\";\n\n  return (\n    <BaseAutocomplete.InputGroup\n      aria-invalid={ariaInvalid}\n      className={cn(\n        \"relative w-full inline-flex gap-1 items-center cursor-text\",\n        !embedded && inputBaseVariants({ variant, inputSize }),\n        !embedded &&\n          \"focus-within:outline focus-within:outline-ring focus-within:ring-4 focus-within:ring-ring/10\",\n        \"has-[[data-slot=combobox-clear]]:[&_[data-slot=combobox-input]]:pr-8\",\n        \"has-[[data-slot=combobox-trigger]]:[&_[data-slot=combobox-input]]:pr-8\",\n        \"has-[[data-slot=combobox-clear]]:has-[[data-slot=combobox-trigger]]:[&_[data-slot=combobox-input]]:pr-14\",\n        className,\n      )}\n      data-slot=\"autocomplete-input-group\"\n    >\n      {addonIcon && (\n        <BaseAutocomplete.Icon\n          className=\"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground absolute left-1 size-6 flex justify-center items-center\"\n          data-slot=\"autocomplete-icon\"\n        >\n          {addonIcon}\n        </BaseAutocomplete.Icon>\n      )}\n      <BaseAutocomplete.Input\n        className={cn(\n          inputVariants({ inputSize }),\n          addonIcon && \"pl-7.5\",\n          paddingClass,\n          inputClassName,\n        )}\n        data-slot=\"autocomplete-input\"\n        {...props}\n      />\n      <div className=\"absolute right-1.5 top-0 h-full inline-flex items-center\">\n        {showClear && (\n          <BaseAutocomplete.Clear\n            aria-label=\"Clear selection\"\n            data-slot=\"autocomplete-clear\"\n            render={\n              <Button\n                className=\"[&_svg]:text-muted-foreground hover:[&_svg]:text-foreground\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <X />\n          </BaseAutocomplete.Clear>\n        )}\n        {showTrigger && (\n          <BaseAutocomplete.Trigger\n            data-slot=\"autocomplete-trigger\"\n            render={\n              <Button\n                className=\"[&_svg]:text-muted-foreground data-popup-open:[&_svg]:text-foreground hover:[&_svg]:text-foreground\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <BaseAutocomplete.Icon data-slot=\"autocomplete-icon\">\n              <ChevronDown className=\"size-4\" />\n            </BaseAutocomplete.Icon>\n          </BaseAutocomplete.Trigger>\n        )}\n      </div>\n    </BaseAutocomplete.InputGroup>\n  );\n}\n\nfunction AutocompleteContent({\n  className,\n  children,\n  sideOffset = 6,\n  align = \"start\",\n  side = \"bottom\",\n  alignOffset = 0,\n  matchAnchorWidth = true,\n  positionerAnchor,\n  ...props\n}: BaseAutocomplete.Popup.Props &\n  Pick<\n    BaseAutocomplete.Positioner.Props,\n    \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n  > & {\n    matchAnchorWidth?: boolean;\n    positionerAnchor?: React.RefObject<HTMLDivElement | null>;\n  }) {\n  return (\n    <BaseAutocomplete.Portal data-slot=\"autocomplete-portal\">\n      <BaseAutocomplete.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={positionerAnchor}\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BaseAutocomplete.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground rounded-md shadow-md\",\n            \"flex flex-col overflow-hidden\",\n            \"max-w-(--available-width) max-h-[min(23rem,var(--available-height))]\",\n            \"overlay-outline\",\n            matchAnchorWidth && \"w-(--anchor-width)\",\n            className,\n          )}\n          data-slot=\"autocomplete-content\"\n          {...props}\n        >\n          {children}\n        </BaseAutocomplete.Popup>\n      </BaseAutocomplete.Positioner>\n    </BaseAutocomplete.Portal>\n  );\n}\n\nconst useAutocompleteFilter = BaseAutocomplete.useFilter;\n\nexport {\n  Autocomplete,\n  AutocompleteValue,\n  AutocompleteIcon,\n  AutocompleteInput,\n  AutocompleteClear,\n  AutocompleteTrigger,\n  AutocompleteList,\n  AutocompletePortal,\n  AutocompleteBackdrop,\n  AutocompletePositioner,\n  AutocompletePopup,\n  AutocompleteArrow,\n  AutocompleteEmpty,\n  AutocompleteGroupLabel,\n  AutocompleteItem,\n  AutocompleteSeparator,\n  AutocompleteGroup,\n  AutocompleteRow,\n  AutocompleteStatus,\n  AutocompleteCollection,\n  useAutocompleteFilter,\n  // Composite components\n  AutocompleteInputGroupContent,\n  AutocompleteContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}