{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "registryDependencies": [
    "@exabase/input",
    "@exabase/scroll-area"
  ],
  "files": [
    {
      "path": "components/ui/autocomplete.tsx",
      "content": "// Based on coss ui (https://github.com/cosscom/coss/blob/main/apps/ui/registry/default/ui/autocomplete.tsx)\n// Copyright (c) coss.com - MIT License\n\n\"use client\"\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\"\nimport { XmarkLargeIcon } from \"@exawizards/exabase-design-system-icons-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/components/ui/input\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\nconst Autocomplete = AutocompletePrimitive.Root\n\nfunction AutocompleteInput({\n  className,\n  size,\n  render,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> &\n  React.ComponentProps<typeof Input>) {\n  return (\n    <AutocompletePrimitive.Input\n      className={cn(className)}\n      data-slot=\"autocomplete-input\"\n      render={render ?? <Input size={size} />}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\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}) {\n  return (\n    <AutocompletePrimitive.Portal>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <AutocompletePrimitive.Popup\n          className={cn(\n            \"relative isolate z-50 max-h-(--available-height) min-w-[var(--anchor-width)] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md outline outline-border\",\n            className\n          )}\n          data-slot=\"autocomplete-content\"\n          {...props}\n        >\n          {children}\n        </AutocompletePrimitive.Popup>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  )\n}\n\nfunction AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props) {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex w-full cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm select-none focus:outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  )\n}\n\nfunction AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props) {\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"autocomplete-separator\"\n      className={cn(\"m-1 border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteGroup({ ...props }: AutocompletePrimitive.Group.Props) {\n  return (\n    <AutocompletePrimitive.Group data-slot=\"autocomplete-group\" {...props} />\n  )\n}\n\nfunction AutocompleteLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      data-slot=\"autocomplete-label\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props) {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"p-2 text-center text-sm text-muted-foreground empty:m-0 empty:p-0\",\n        className\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteRow({ ...props }: AutocompletePrimitive.Row.Props) {\n  return <AutocompletePrimitive.Row data-slot=\"autocomplete-row\" {...props} />\n}\n\nfunction AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  )\n}\n\nfunction AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props) {\n  return (\n    <ScrollArea>\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\nfunction AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props) {\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      <XmarkLargeIcon />\n    </AutocompletePrimitive.Clear>\n  )\n}\n\nfunction AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props) {\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\nfunction AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props) {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props) {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  )\n}\n\nconst useAutocompleteFilter = AutocompletePrimitive.useFilter\n\nexport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteTrigger,\n  AutocompleteContent,\n  AutocompleteItem,\n  AutocompleteSeparator,\n  AutocompleteGroup,\n  AutocompleteLabel,\n  AutocompleteEmpty,\n  AutocompleteValue,\n  AutocompleteList,\n  AutocompleteClear,\n  AutocompleteStatus,\n  AutocompleteRow,\n  AutocompleteCollection,\n  useAutocompleteFilter,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}