{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:ui",
  "title": "Autocomplete",
  "description": "Text input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/autocomplete.tsx",
      "type": "registry:ui",
      "target": "components/ui/autocomplete.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { inputVariants } from \"@/components/ui/input\"\n\n/** A text field that suggests matching options as you type, with the first eight matches in a listbox. */\ntype AutocompleteProps = {\n  options?: string[]\n  value?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n  \"aria-label\"?: string\n}\n\nconst SAMPLE_OPTIONS = [\n  \"Northwind Traders\",\n  \"Northstar Logistics\",\n  \"Acme Industries\",\n  \"Blue Harbor Co.\",\n  \"Cobalt Systems\",\n  \"Granite Peak Outfitters\",\n  \"Helix Biotech\",\n  \"Juniper Studio\",\n  \"Meridian Freight\",\n  \"Summit Dental Group\",\n]\n\nfunction Autocomplete({ options = SAMPLE_OPTIONS, value, onChange, placeholder = \"Search…\", disabled, className, id, ...a11y }: AutocompleteProps) {\n  const [open, setOpen] = React.useState(false)\n  const [internal, setInternal] = React.useState(\"\")\n  const listId = React.useId()\n  const current = value ?? internal\n  const filtered = options.filter((o) => o.toLowerCase().includes(current.toLowerCase())).slice(0, 8)\n  return (\n    <div className={cn(\"relative w-64\", className)} data-slot=\"autocomplete\">\n      <input\n        id={id}\n        disabled={disabled}\n        placeholder={placeholder}\n        value={current}\n        role=\"combobox\"\n        aria-label={a11y[\"aria-label\"] ?? placeholder ?? \"Autocomplete\"}\n        aria-autocomplete=\"list\"\n        aria-expanded={open}\n        aria-controls={listId}\n        className={cn(inputVariants({ size: \"default\" }))}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setTimeout(() => setOpen(false), 120)}\n        onChange={(e) => {\n          if (value === undefined) setInternal(e.target.value)\n          onChange?.(e.target.value)\n          setOpen(true)\n        }}\n      />\n      {open && filtered.length > 0 ? (\n        <ul id={listId} role=\"listbox\" className=\"absolute z-50 mt-1.5 max-h-56 w-full overflow-auto rounded-xl border border-border bg-raised p-1 shadow-lg\">\n          {filtered.map((opt) => (\n            <li key={opt}>\n              <div\n                role=\"option\"\n                aria-selected={opt === current}\n                tabIndex={-1}\n                className=\"flex w-full cursor-pointer rounded-lg px-2.5 py-1.5 text-left text-sm hover:bg-sunken\"\n                onMouseDown={(e) => e.preventDefault()}\n                onClick={() => {\n                  if (value === undefined) setInternal(opt)\n                  onChange?.(opt)\n                  setOpen(false)\n                }}\n              >\n                {opt}\n              </div>\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <ul id={listId} hidden role=\"listbox\" />\n      )}\n    </div>\n  )\n}\nexport { Autocomplete }\nexport type { AutocompleteProps }\n"
    }
  ]
}