{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mention-input",
  "type": "registry:ui",
  "title": "Mention input",
  "description": "A comment textarea that opens a suggestion list when you type @, filters names as you keep typing and inserts the chosen @mention. For React comments.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/mention-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/mention-input.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { inputVariants } from \"@/components/ui/input\"\n\ntype MentionInputProps = {\n  value?: string\n  onChange?: (value: string) => void\n  suggestions?: string[]\n  disabled?: boolean\n  className?: string\n  id?: string\n  placeholder?: string\n  \"aria-label\"?: string\n}\n\nfunction MentionInput({\n  value,\n  onChange,\n  suggestions = [],\n  disabled,\n  className,\n  id,\n  placeholder = \"Write a comment… use @ to mention\",\n  ...a11y\n}: MentionInputProps) {\n  const [open, setOpen] = React.useState(false)\n  const [q, setQ] = React.useState(\"\")\n  const listId = React.useId()\n  const filtered = suggestions.filter((s) => s.toLowerCase().includes(q.toLowerCase())).slice(0, 6)\n  return (\n    <div data-slot=\"mention-input\" className={cn(\"relative w-full\", className)}>\n      <textarea\n        id={id}\n        disabled={disabled}\n        value={value}\n        placeholder={placeholder}\n        aria-label={a11y[\"aria-label\"] ?? \"Mention input\"}\n        aria-describedby={open && filtered.length ? listId : undefined}\n        rows={3}\n        className={cn(inputVariants({ size: \"default\" }), \"h-auto min-h-20 resize-y py-2\")}\n        onChange={(e) => {\n          const v = e.target.value\n          onChange?.(v)\n          const m = v.match(/@([\\w.-]*)$/)\n          if (m) {\n            setQ(m[1])\n            setOpen(true)\n          } else {\n            setOpen(false)\n            setQ(\"\")\n          }\n        }}\n      />\n      {open && filtered.length > 0 ? (\n        <ul\n          id={listId}\n          role=\"listbox\"\n          aria-label=\"Mention suggestions\"\n          className=\"absolute z-50 mt-1.5 max-h-48 w-56 overflow-auto rounded-xl border border-border bg-raised p-1 shadow-lg\"\n        >\n          {filtered.map((s) => (\n            <li key={s} role=\"option\" aria-selected={false}>\n              <button\n                type=\"button\"\n                className=\"flex w-full rounded-lg px-2.5 py-1.5 text-left text-sm hover:bg-sunken\"\n                onMouseDown={(e) => e.preventDefault()}\n                onClick={() => {\n                  const next = (value ?? \"\").replace(/@[\\w.-]*$/, `@${s} `)\n                  onChange?.(next)\n                  setOpen(false)\n                }}\n              >\n                @{s}\n              </button>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  )\n}\nexport { MentionInput }\n"
    }
  ]
}