{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "title": "Autocomplete",
  "description": "An autocomplete input built on Base UI primitives.",
  "dependencies": [
    "@base-ui/react@^1.4.1",
    "lucide-react"
  ],
  "registryDependencies": [
    "@retab/input",
    "@retab/scroll-area",
    "@retab/utils"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/ui/autocomplete.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDown, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"@/components/ui/input\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"text-foreground relative w-full not-has-[>*.w-full]:w-fit has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-colors outline-none hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDown />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-colors outline-none hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <X />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  portalProps,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: AutocompletePrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal {...portalProps}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"bg-popover relative flex max-h-full max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) rounded-lg border shadow-lg/5 transition-[scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"text-foreground flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground flex min-h-8 cursor-default items-center rounded-sm px-2 py-1 text-base outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"bg-border mx-2 my-1 h-px last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-xs font-medium\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"text-muted-foreground text-center text-base not-empty:p-2 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteValue({\n  ...props\n}: AutocompletePrimitive.Value.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  );\n}\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-[color,background-color,box-shadow,opacity] outline-none hover:opacity-100 sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <X />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"text-muted-foreground px-3 py-2 text-xs font-medium empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n",
      "type": "registry:ui",
      "target": "@ui/autocomplete.tsx"
    }
  ],
  "type": "registry:ui"
}