{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui-components/react"
  ],
  "registryDependencies": [
    "https://jem-ui.vercel.app/r/input.json",
    "https://jem-ui.vercel.app/r/scroll-area.json"
  ],
  "files": [
    {
      "path": "registry/ui/autocomplete.tsx",
      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui-components/react/autocomplete\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"./input\";\nimport { ScrollArea } from \"./scroll-area\";\n\nfunction Autocomplete({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Root>) {\n  return <AutocompletePrimitive.Root data-slot=\"autocomplete\" {...props} />;\n}\n\nfunction AutocompleteTrigger({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n  return (\n    <AutocompletePrimitive.Trigger\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteInput({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input>) {\n  return (\n    <AutocompletePrimitive.Input\n      data-slot=\"autocomplete-input\"\n      render={<Input />}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompletePortal({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Portal>) {\n  return <AutocompletePrimitive.Portal {...props} />;\n}\n\nfunction AutocompletePositioner({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Positioner>) {\n  return (\n    <AutocompletePrimitive.Positioner\n      data-slot=\"autocomplete-positioner\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompletePopup({\n  className,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Popup> & {\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n}) {\n  return (\n    <AutocompletePortal>\n      <AutocompletePositioner sideOffset={sideOffset}>\n        <AutocompletePrimitive.Popup\n          data-slot=\"autocomplete-popup\"\n          className={cn(\n            \"data-starting-style:fade-out-0 data-starting-style:fade-in-0 data-ending-style:zoom-out-95 data-ending-style:zoom-in-95 p-1 w-(--anchor-width) max-h-[min(var(--available-height),23rem)] max-w-(--available-width) overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-popover text-popover-foreground\",\n            className,\n          )}\n          {...props}\n        />\n      </AutocompletePositioner>\n    </AutocompletePortal>\n  );\n}\n\nfunction AutocompleteList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n  return (\n    <ScrollArea>\n      <AutocompletePrimitive.List\n        data-slot=\"autocomplete-list\"\n        className={cn(\"max-h-[300px]\", className)}\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nfunction AutocompleteEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n  return (\n    <AutocompletePrimitive.Empty\n      data-slot=\"autocomplete-empty\"\n      className={cn(\n        \"px-4 py-6 empty:m-0 empty:p-0 text-center text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Collection>) {\n  return <AutocompletePrimitive.Collection {...props} />;\n}\n\nfunction AutocompleteGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n  return (\n    <AutocompletePrimitive.Group\n      data-slot=\"autocomplete-group\"\n      className={cn(\"overflow-hidden p-1 text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      data-slot=\"autocomplete-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"autocomplete-item\"\n      className={cn(\n        \"relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Separator>) {\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"autocomplete-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Autocomplete,\n  AutocompleteTrigger,\n  AutocompleteInput,\n  AutocompletePortal,\n  AutocompletePositioner,\n  AutocompletePopup,\n  AutocompleteList,\n  AutocompleteEmpty,\n  AutocompleteCollection,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteItem,\n  AutocompleteSeparator,\n};\n",
      "type": "registry:ui"
    }
  ]
}