{
  "$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"
  ],
  "registryDependencies": [
    "input",
    "scroll-area",
    "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\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/components/ui/input\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { IconPlaceholder } from \"@/components/icon-placeholder\"\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=\"relative w-full text-foreground 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            <IconPlaceholder\n              lucide=\"ArrowUpDown\"\n              tabler=\"IconArrowsUpDown\"\n              hugeicons=\"ArrowUpDownIcon\"\n              phosphor=\"ArrowsDownUpIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\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          <IconPlaceholder\n            lucide=\"X\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n          />\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            \"relative flex max-h-full max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) rounded-lg border bg-popover 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=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\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        \"flex min-h-8 cursor-default items-center rounded-sm px-2 py-1 text-base outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:min-h-7 sm:text-sm data-disabled:pointer-events-none data-disabled:opacity-64\",\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(\"mx-2 my-1 h-px bg-border 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        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\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-center text-base text-muted-foreground 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      <IconPlaceholder\n        lucide=\"X\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n      />\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        \"px-3 py-2 text-xs font-medium text-muted-foreground 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"
}