{
  "name": "MaskedImage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MaskedImage.tsx",
  "chapterTag": "05 Cards & Surfaces",
  "chapter": "06-cards-and-surfaces.html",
  "sectionId": "masked-image",
  "elName": "Inline tile and message-level block",
  "demoUrl": "https://brand.magicblocks.ai/components/06-cards-and-surfaces#masked-image",
  "hasLiveDemo": false,
  "description": "A single image that starts masked behind a \"Show this image\" affordance.\nUsed by inbound email rendering to defend against tracking pixels — the\nsanitiser stages the original URL and stamps a 1x1 placeholder; this\ncomponent lets the user opt in to revealing the original.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "MaskedImage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MaskedImageBlock",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "MASKED_IMAGE_PLACEHOLDER",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "MaskedImageProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MaskedImageBlockProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { MaskedImage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "src",
      "optional": false,
      "type": "string",
      "doc": "The original (potentially tracking) image URL."
    },
    {
      "name": "masked",
      "optional": true,
      "type": "boolean",
      "doc": "When `true`, render the placeholder until the user clicks Show."
    },
    {
      "name": "showLabel",
      "optional": true,
      "type": "string",
      "doc": "Override the \"Show this image\" affordance label."
    }
  ],
  "classesUsed": [
    "btn-ghost",
    "btn-link",
    "masked-image",
    "masked-image-block",
    "masked-image-block-icon",
    "masked-image-placeholder",
    "masked-image-revealed",
    "masked-image-show"
  ],
  "examples": {
    "react": "<MaskedImage src=\"https://tracker.example/pixel.gif\" alt=\"\" masked />",
    "html": "<div class=\"masked-demo\">\n          <p>Hi Jay &mdash; quick update on the renewal. The numbers from last quarter look good but we want to walk you through the change. See the chart attached.</p>\n          <p>\n            <span class=\"masked-image\">\n              <img src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" aria-hidden=\"true\" class=\"masked-image-placeholder\">\n              <button type=\"button\" class=\"btn-link masked-image-show\">Show this image</button>\n            </span>\n          </p>\n          <p>Worth jumping on a quick call this week to walk through the rest? &mdash; Alicia</p>\n          <div class=\"masked-demo-block\">\n            <button type=\"button\" class=\"masked-image-block btn-ghost\">\n              <span class=\"masked-image-block-icon\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"currentColor\"><path d=\"M5.5 3 4 4.5H2A1.5 1.5 0 0 0 .5 6v6A1.5 1.5 0 0 0 2 13.5h12a1.5 1.5 0 0 0 1.5-1.5V6A1.5 1.5 0 0 0 14 4.5h-2L10.5 3h-5Zm2.5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"/></svg>\n              </span>\n              Show 3 images\n            </button>\n          </div>\n        </div>",
    "css": ".btn-ghost {\n  background: transparent;\n  color: var(--fg);\n  border-color: transparent;\n}\n\n.btn-link {\n  display: inline-flex; align-items: center; gap: var(--s-2);\n  color: var(--fg);\n  font: 600 14.5px/1 var(--f-display);\n  text-decoration: none;\n  padding: 2px 0;\n  border-bottom: 1px solid var(--hair);\n  transition: color var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease);\n}\n\n.masked-image {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  background: var(--warm-3);\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-sm);\n}\n\n.masked-image-block {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  font: 500 12.5px/1.2 var(--f-body);\n  border-radius: var(--r-sm);\n  cursor: pointer;\n}\n\n.masked-image-block-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--fg-soft);\n}\n\n.masked-image-placeholder {\n  width: 14px;\n  height: 14px;\n  display: inline-block;\n}\n\n.masked-image-revealed {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--r-sm);\n}\n\n.masked-image-show {\n  /* Reuses .btn-link styles from the base layer. */\n  font-size: 12.5px;\n}"
  }
}