{
  "name": "ApiKeyCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ApiKeyCard.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "api-key-card",
  "elName": "Production key",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#api-key-card",
  "hasLiveDemo": false,
  "description": "A card displaying an API key with masked-by-default token, reveal +\ncopy + (optional) revoke actions, and last-used / created metadata.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ApiKeyCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ApiKeyCardProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { ApiKeyCard } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "api-key-card",
    "api-key-card-foot",
    "api-key-card-head",
    "api-key-card-meta",
    "api-key-card-name",
    "api-key-card-revoke",
    "api-key-card-token",
    "api-key-card-token-actions",
    "api-key-card-token-value",
    "btn",
    "btn-ghost",
    "btn-sm"
  ],
  "examples": {
    "react": "<ApiKeyCard\n  name=\"Production API key\"\n  token=\"mb_live_a7f8c2e1b9d4e6f0a8c7b3d1e9f2a5b8c4d6e8f0AB12\"\n  lastUsed=\"2 hours ago\"\n  createdAt=\"14 Mar 2026\"\n  onRevoke={() => console.log(\"revoke\")}\n/>",
    "html": "<div class=\"api-key-card\" style=\"max-width:600px;\">\n  <div class=\"api-key-card-head\">\n    <div class=\"api-key-card-name\">Production API key</div>\n    <div class=\"api-key-card-meta\">\n      <span>Last used <strong>2 hours ago</strong></span>\n      <span>Created <strong>14 Mar 2026</strong></span>\n    </div>\n  </div>\n  <div class=\"api-key-card-token\">\n    <code class=\"api-key-card-token-value\">mb_l••••••••••••AB12</code>\n    <div class=\"api-key-card-token-actions\">\n      <button type=\"button\" class=\"btn btn-ghost btn-sm\" aria-pressed=\"false\">Reveal</button>\n      <button type=\"button\" class=\"btn btn-ghost btn-sm\" aria-live=\"polite\">Copy</button>\n    </div>\n  </div>\n  <div class=\"api-key-card-foot\">\n    <button type=\"button\" class=\"btn btn-ghost btn-sm api-key-card-revoke\">Revoke</button>\n  </div>\n</div>",
    "css": ".api-key-card {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-4) var(--s-5);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n}\n\n.api-key-card-foot {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.api-key-card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--s-4);\n  flex-wrap: wrap;\n}\n\n.api-key-card-meta {\n  display: flex;\n  gap: var(--s-4);\n  font: 400 12px/1.4 var(--f-body);\n  color: var(--fg-dim);\n}\n\n.api-key-card-name {\n  font: 600 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.api-key-card-revoke {\n  color: var(--error-text);\n}\n\n.api-key-card-token {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-3);\n  background: var(--bg-sunk);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  padding: var(--s-2) var(--s-3);\n}\n\n.api-key-card-token-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.api-key-card-token-value {\n  font: 500 13px/1.4 var(--f-mono);\n  color: var(--fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 1;\n  min-width: 0;\n}\n\n.btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-ghost {\n  background: transparent;\n  color: var(--fg);\n  border-color: transparent;\n}\n\n.btn-sm { padding: 7px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }"
  }
}