{
  "name": "MentionInput",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MentionInput.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "mention-input",
  "elName": "MentionInput",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#mention-input",
  "hasLiveDemo": false,
  "description": "Async @-mention picker built on the kit's `<Textarea>`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "MentionInput",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MentionInputProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MentionItem",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "findMentionTrigger",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "extractMentions",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { MentionInput } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "string",
      "doc": "Current textarea value (controlled)."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(next: string) => void",
      "doc": "Fires on every value change — typing, mention insertion, etc."
    },
    {
      "name": "search",
      "optional": false,
      "type": "(query: string) => MentionItem[] | Promise<MentionItem[]>",
      "doc": "Resolve the list of suggestions for the current `@query`. Called whenever the active trigger's query changes. Sync return is fine for static datasets; return a `Promise` for async APIs (debounce on your side if needed). The kit doesn't filter — return the items you want shown, in display order."
    },
    {
      "name": "onMention",
      "optional": true,
      "type": "(item: MentionItem) => void",
      "doc": "Fires when the user picks a mention. Use this to track which entities were `@`-mentioned (e.g. for notification side-effects) without re-parsing the body."
    },
    {
      "name": "onSubmit",
      "optional": true,
      "type": "() => void",
      "doc": "Fires when the user presses `Cmd/Ctrl+Enter`. Convention: submit / post the note. The picker is dismissed if open."
    },
    {
      "name": "trigger",
      "optional": true,
      "type": "string",
      "doc": "Trigger character. Default `\"@\"`. Set to `\"#\"` for channel-style pickers, `\"/\"` for slash commands, etc. Single character only."
    },
    {
      "name": "formatMention",
      "optional": true,
      "type": "(item: MentionItem) => string",
      "doc": "Format the marker inserted into the textarea body. Default produces `\"@[label](id) \"` (a trailing space — matches the marker syntax `extractMentions()` reads). Override to use a different shape."
    },
    {
      "name": "maxResults",
      "optional": true,
      "type": "number",
      "doc": "Maximum number of suggestions rendered. Default `8`. Caller's `search` callback can return more — the picker truncates for the visible list."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the wrapping `<div>`. The textarea itself uses the kit's `.input` + `.textarea` classes (so it renders identical to a bare `<Textarea>`)."
    }
  ],
  "classesUsed": [
    "av",
    "input",
    "mention-input",
    "mention-picker",
    "mention-picker-item",
    "mention-picker-item-label",
    "mention-picker-item-sub"
  ],
  "examples": {
    "react": "const [body, setBody] = useState(\"\");",
    "html": "<div class=\"mention-input\">\n  <textarea class=\"input textarea\" rows=\"3\" placeholder=\"Leave a note… use @ to mention a teammate\"></textarea>\n</div>",
    "css": ".av {\n  width: 32px; height: 32px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  font: 600 12px/1 var(--f-display); letter-spacing: 0.02em;\n  flex-shrink: 0;\n  overflow: hidden;                           /* clip image children cleanly */\n  /* v1.12.0 (R11-2): default fill so initials are legible without consumers\n     having to think about background. Pre-1.12.0 `.av` was background-less;\n     on a same-tone page wash (e.g. warm-1) initials rendered invisible.\n     Image children cover this fill via `overflow: hidden` clipping. */\n  background: var(--bg-warm);\n  color: var(--fg-soft);\n}\n\n.input {\n  display: block; width: 100%;\n  font: 400 14.5px/1.4 var(--f-body);\n  color: var(--fg);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  padding: 10px 14px;\n  transition: border-color var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease);\n  appearance: none; -webkit-appearance: none; -moz-appearance: none;\n}\n\n.mention-input {\n  position: relative;\n}\n\n.mention-picker {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  margin-top: 4px;\n  z-index: var(--z-overlay, 40);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  box-shadow: var(--sh-2);\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.mention-picker-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n  width: 100%;\n  padding: 6px 10px;\n  background: transparent;\n  border: 0;\n  border-radius: var(--r-sm);\n  cursor: pointer;\n  font: inherit;\n  color: var(--fg);\n  text-align: left;\n  transition: background var(--dur-1) var(--ease);\n}\n\n.mention-picker-item-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mention-picker-item-sub {\n  color: var(--fg-faint);\n  font-size: 12px;\n  font-family: var(--f-mono);\n  white-space: nowrap;\n}"
  }
}