{
  "name": "VariantsRepeater",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/VariantsRepeater.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "variants-repeater",
  "elName": "VariantsRepeater",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#variants-repeater",
  "hasLiveDemo": false,
  "description": "List of textarea variants with add + remove. Used for AI Message Versions\n(randomised by the agent runtime), Snippet Variants tab, and any other\n\"give me three ways to say this\" surface.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "VariantsRepeater",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "VariantsRepeaterProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MessageVariant",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { VariantsRepeater } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "MessageVariant[]",
      "doc": "Controlled variants."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "MessageVariant[]",
      "doc": "Uncontrolled initial variants."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(variants: MessageVariant[]) => void",
      "doc": "Fires when the variant set changes."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Top-level label."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Caption beneath the label."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": "Per-row placeholder. Default `\"Type a variant…\"`."
    },
    {
      "name": "addLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Add-row label. Default `\"+ Add variant\"`."
    },
    {
      "name": "max",
      "optional": true,
      "type": "number",
      "doc": "Maximum allowed variants (disables Add when reached)."
    },
    {
      "name": "rows",
      "optional": true,
      "type": "number",
      "doc": "Textarea rows per variant. Default `2`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    }
  ],
  "classesUsed": [
    "variants-repeater",
    "variants-repeater-add",
    "variants-repeater-caption",
    "variants-repeater-head",
    "variants-repeater-input",
    "variants-repeater-label",
    "variants-repeater-remove",
    "variants-repeater-row",
    "variants-repeater-row-index",
    "variants-repeater-rows"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"variants-repeater\">\n  <div class=\"variants-repeater-head\">\n    <span class=\"variants-repeater-label\">AI message versions</span>\n    <span class=\"variants-repeater-caption\">The agent randomises across these at send time.</span>\n  </div>\n  <div class=\"variants-repeater-rows\">\n    <div class=\"variants-repeater-row\">\n      <span class=\"variants-repeater-row-index\" aria-hidden=\"true\">1</span>\n      <textarea class=\"variants-repeater-input\" rows=\"2\">Hi! How can I help today?</textarea>\n      <button type=\"button\" class=\"variants-repeater-remove\" aria-label=\"Remove variant\">×</button>\n    </div>\n    <div class=\"variants-repeater-row\">\n      <span class=\"variants-repeater-row-index\" aria-hidden=\"true\">2</span>\n      <textarea class=\"variants-repeater-input\" rows=\"2\">Hey there — what brings you in?</textarea>\n      <button type=\"button\" class=\"variants-repeater-remove\" aria-label=\"Remove variant\">×</button>\n    </div>\n  </div>\n  <button type=\"button\" class=\"variants-repeater-add\">+ Add variant</button>\n</div>",
    "css": ".variants-repeater { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.variants-repeater-add {\n  align-self: flex-start;\n  appearance: none;\n  background: transparent;\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-sm);\n  padding: 6px 10px;\n  font: 500 12.5px/1 var(--f-body);\n  color: var(--accent);\n  cursor: pointer;\n}\n\n.variants-repeater-caption { font: 400 12px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.variants-repeater-head { display: flex; flex-direction: column; gap: 2px; }\n\n.variants-repeater-input {\n  padding: var(--s-2) var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1.5 var(--f-body);\n  resize: vertical;\n  min-height: 48px;\n}\n\n.variants-repeater-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.variants-repeater-remove {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 28px; height: 28px;\n  margin-top: 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-faint);\n  cursor: pointer;\n  border-radius: var(--r-xs);\n}\n\n.variants-repeater-row {\n  display: grid;\n  grid-template-columns: 24px 1fr 28px;\n  gap: 6px;\n  align-items: flex-start;\n}\n\n.variants-repeater-row-index {\n  font: 600 11px/1 var(--f-mono);\n  color: var(--fg-faint);\n  padding-top: 10px;\n  text-align: right;\n}\n\n.variants-repeater-rows { display: flex; flex-direction: column; gap: 6px; }"
  }
}