{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "title": "Autocomplete",
  "description": "A text field with suggestions on Base UI's first-class Autocomplete primitive: what is typed is the value, known entries are one pick away, and nothing snaps back when the list closes. Input-family 44px field with clear and open controls; the highlighted row wears the accent WASH; the popup is the raised surface; the focus ring is --text; aria-invalid on the input draws a 2px --danger edge round the whole field.",
  "dependencies": [
    "@base-ui/react@1.9.0",
    "lucide-react@1.33.0"
  ],
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme"
  ],
  "files": [
    {
      "path": "src/components/ui/autocomplete.tsx",
      "content": "import { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronDownIcon, XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn, focusRing, inputGroupFocusRing, inputGroupInvalidRing } from \"../../lib/utils\";\n\nconst Autocomplete = AutocompletePrimitive.Root;\nconst AutocompleteGroup = AutocompletePrimitive.Group;\nconst AutocompleteValue = AutocompletePrimitive.Value;\n\nfunction AutocompleteInput({\n  className,\n  placeholder,\n  showClear = true,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input> & { showClear?: boolean }) {\n  return (\n    <AutocompletePrimitive.InputGroup\n      data-slot=\"autocomplete-input-group\"\n      className={cn(\n        \"relative flex h-11 w-full items-center rounded-md border border-input bg-background transition-colors ease-brand\",\n        inputGroupFocusRing,\n        inputGroupInvalidRing,\n        \"has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50\",\n        className,\n      )}\n    >\n      <AutocompletePrimitive.Input\n        data-slot=\"autocomplete-input\"\n        placeholder={placeholder}\n        className={cn(\n          \"h-full w-full rounded-md border-0 bg-transparent pr-16 pl-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\",\n        )}\n        {...props}\n      />\n      <div className=\"absolute right-1 flex h-full items-center text-muted-foreground\">\n        {showClear ? (\n          <AutocompletePrimitive.Clear\n            aria-label=\"Clear\"\n            className={cn(\n              \"flex size-7 items-center justify-center rounded-sm transition-colors ease-brand hover:text-foreground\",\n              focusRing,\n            )}\n          >\n            <XIcon className=\"size-4\" aria-hidden />\n          </AutocompletePrimitive.Clear>\n        ) : null}\n        <AutocompletePrimitive.Trigger\n          aria-label=\"Show suggestions\"\n          className={cn(\n            \"flex size-7 items-center justify-center rounded-sm transition-colors ease-brand hover:text-foreground\",\n            focusRing,\n          )}\n        >\n          <ChevronDownIcon className=\"size-4\" aria-hidden />\n        </AutocompletePrimitive.Trigger>\n      </div>\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nfunction AutocompleteContent({\n  className,\n  children,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Popup> & { sideOffset?: number }) {\n  return (\n    <AutocompletePrimitive.Portal>\n      <AutocompletePrimitive.Positioner\n        className=\"z-(--z-modal,50) outline-none\"\n        sideOffset={sideOffset}\n      >\n        <AutocompletePrimitive.Popup\n          data-slot=\"autocomplete-content\"\n          className={cn(\n            \"w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-brand-overlay\",\n            \"transition-[transform,opacity] duration-(--dur-fast,120ms) ease-brand motion-reduce:transition-none\",\n            \"data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </AutocompletePrimitive.Popup>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nfunction AutocompleteList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n  return (\n    <AutocompletePrimitive.List\n      data-slot=\"autocomplete-list\"\n      className={cn(\n        \"max-h-[min(20rem,var(--available-height))] scroll-py-1 overflow-y-auto p-1 outline-none data-empty:p-0 [scrollbar-width:thin]\",\n        className,\n      )}\n      {...props}\n    />\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(\"px-3 py-3 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AutocompleteItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"autocomplete-item\"\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-2 text-sm text-foreground outline-none transition-colors select-none\",\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"truncate\">{children}</span>\n    </AutocompletePrimitive.Item>\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-brand-eyebrow font-semibold tracking-brand-eyebrow text-muted-foreground uppercase\",\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  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n  AutocompleteValue,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/autocomplete.tsx"
    }
  ],
  "type": "registry:ui"
}