{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-button",
  "type": "registry:ui",
  "title": "Copy button (MIAN)",
  "description": "Copies text to the clipboard and confirms it in place, visually and for screen readers.",
  "categories": [
    "actions",
    "copy",
    "clipboard",
    "copy to clipboard",
    "api key"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/copy-button.css",
      "type": "registry:file",
      "target": "mian/components/copy-button.css",
      "content": ".mn-copy .mn-copy-done { display: none; }\n.mn-copy[data-copied] .mn-copy-idle { display: none; }\n.mn-copy[data-copied] .mn-copy-done { display: contents; }\n.mn-copy[data-copied] { color: var(--mn-success-text); }\n.mn-copy-field { display: flex; max-width: 100%; }\n.mn-copy-field > .mn-input { flex: 1; min-width: 0; font-family: var(--mn-font-mono); font-size: calc(var(--mn-text-sm) - 1px); border-start-end-radius: 0; border-end-end-radius: 0; }\n.mn-copy-field > .mn-btn { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: calc(var(--mn-border-w) * -1); }"
    },
    {
      "path": "mian/examples/copy-button.html",
      "type": "registry:file",
      "target": "mian/examples/copy-button.html",
      "content": "<!-- Copy buttons -->\n<button class=\"mn-btn mn-btn-outline mn-copy\" type=\"button\" data-mn-copy=\"&lt;link rel=&quot;stylesheet&quot; href=&quot;https://mian.ro/dist/mian.css&quot;&gt;\"><span class=\"mn-copy-idle\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1\"/></svg> Copy</span><span class=\"mn-copy-done\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg> Copied</span></button>\n<button class=\"mn-btn mn-btn-ghost mn-btn-icon mn-copy\" type=\"button\" data-mn-copy=\"https://mian.ro\" aria-label=\"Copy link\"><span class=\"mn-copy-idle\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1\"/><path d=\"M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1\"/></svg></span><span class=\"mn-copy-done\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span></button>\n\n<!-- Copy field -->\n<div class=\"mn-field\" style=\"max-width:26rem\">\n  <label class=\"mn-label\" for=\"key-1\">API key</label>\n  <div class=\"mn-copy-field\">\n    <input class=\"mn-input\" id=\"key-1\" readonly value=\"mn_live_4f9c2b7e1d8a\">\n    <button class=\"mn-btn mn-btn-outline mn-copy\" type=\"button\" data-mn-copy-target=\"#key-1\" aria-label=\"Copy API key\"><span class=\"mn-copy-idle\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1\"/></svg></span><span class=\"mn-copy-done\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span></button>\n  </div>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/copy-button",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-copy[data-mn-copy=\"text\"]",
        "data-mn-copy-target=\"#el\"",
        "mn-copy-idle · mn-copy-done",
        "mn-copy-field"
      ],
      "accessibility": [
        "“Copied to clipboard” is announced in a polite live region (override with data-mn-copied).",
        "Keep a visible label or aria-label on icon-only copy buttons. Emits mn:copy with { text }."
      ],
      "intents": [
        "copy to clipboard",
        "copy code",
        "copy link",
        "share link"
      ]
    }
  }
}