{
  "name": "MergeTagInput",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MergeTagInput.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "merge-tag-input",
  "elName": "MergeTagInput",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#merge-tag-input",
  "hasLiveDemo": false,
  "description": "Single-line text input with `{{ }}` merge-tag autocomplete. Wraps `.input`\nwith a `<Popover>` for tag suggestions.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "MergeTagInput",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MergeTagTextarea",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "MergeTagInputProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "MergeTagTextareaProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "MergeTag",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { MergeTagInput } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "input",
    "merge-tag-field",
    "merge-tag-option",
    "merge-tag-option-active",
    "merge-tag-option-label",
    "merge-tag-option-token",
    "merge-tag-popover",
    "merge-tag-preview",
    "merge-tag-preview-body",
    "merge-tag-preview-label"
  ],
  "examples": {
    "react": "<MergeTagInput\n  value={subject}\n  onChange={setSubject}\n  tags={[\n    { tag: \"{{contact.first_name}}\", label: \"First name\", sample: \"Jay\" },\n  ]}\n/>",
    "html": "<div class=\"merge-tag-field\">\n  <input class=\"input\" type=\"text\" placeholder=\"Hi {{contact.first_name}} —\">\n</div>",
    "css": ".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.merge-tag-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  position: relative;\n}\n\n.merge-tag-option {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  padding: 6px 10px;\n  border: 0;\n  background: transparent;\n  border-radius: var(--r-xs);\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--dur-1) var(--ease);\n  color: var(--fg);\n}\n\n.merge-tag-option-active {\n  background: var(--warm-3);\n}\n\n.merge-tag-option-label {\n  font: 500 13.5px/1.3 var(--f-body);\n}\n\n.merge-tag-option-token {\n  font: 400 12px/1.3 var(--f-mono, var(--f-body));\n  color: var(--fg-dim);\n}\n\n.merge-tag-popover {\n  background: var(--paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  box-shadow: var(--sh-2);\n  padding: 4px;\n  min-width: 220px;\n  max-height: 280px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.merge-tag-preview {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: var(--s-2) var(--s-3);\n  background: var(--warm-3);\n  border-radius: var(--r-sm);\n}\n\n.merge-tag-preview-body {\n  font: 400 13.5px/1.5 var(--f-body);\n  color: var(--fg);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.merge-tag-preview-label {\n  font: 500 11px/1.2 var(--f-body);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--fg-dim);\n}"
  }
}