{
  "name": "ScoreCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ScoreCard.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "score-card",
  "elName": "ScoreCard",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#score-card",
  "hasLiveDemo": false,
  "description": "Hero \"score + interpretation + breakdown\" card. Composes `<ScoreRing>` +\n`<Card>`-style surface + label / headline / meta slots.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "ScoreCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ScoreCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ScoreCardFill",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { ScoreCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "score",
      "optional": false,
      "type": "number",
      "doc": "0–100 score, forwarded to the inner `<ScoreRing>`."
    },
    {
      "name": "band",
      "optional": true,
      "type": "ScoreRingProps[\"band\"]",
      "doc": "Semantic band, drives the ring stroke colour."
    },
    {
      "name": "variant",
      "optional": true,
      "type": "ScoreRingProps[\"variant\"]",
      "doc": "Optional variant override on the ring (`accent` / `ink` / `info`)."
    },
    {
      "name": "ringSize",
      "optional": true,
      "type": "ScoreRingProps[\"size\"]",
      "doc": "Override the ring size. Defaults to `\"xl\"` (96px hero ring)."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Mono uppercase eyebrow above the headline (e.g. `\"Approval probability\"`)."
    },
    {
      "name": "interpretation",
      "optional": true,
      "type": "ReactNode",
      "doc": "Headline interpretation copy (e.g. `\"Ready to submit\"`). Consumer-owned, not band-derived — kit only knows the score, the caller knows what it means in their domain."
    },
    {
      "name": "earnedPoints",
      "optional": true,
      "type": "number",
      "doc": "Numerator in the points breakdown. Pairs with `applicablePoints`."
    },
    {
      "name": "applicablePoints",
      "optional": true,
      "type": "number",
      "doc": "Denominator in the points breakdown."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the rendered breakdown line. Bypasses `earnedPoints` / `applicablePoints` entirely."
    },
    {
      "name": "fill",
      "optional": true,
      "type": "ScoreCardFill",
      "doc": "Surface fill — `paper` (default), `warm` (cream), `ink` (dark hero)."
    },
    {
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
      "doc": "Override the accessible label on the ring. Defaults to the ring's own `Score {score}` default."
    }
  ],
  "classesUsed": [
    "score-card",
    "score-card-body",
    "score-card-eyebrow",
    "score-card-headline",
    "score-card-meta",
    "score-card-ring"
  ],
  "examples": {
    "react": "<ScoreCard\n  score={87}\n  band=\"high\"\n  label=\"Approval probability\"\n  interpretation=\"Ready to submit\"\n  earnedPoints={33}\n  applicablePoints={38}\n  fill=\"warm\"\n/>",
    "html": "<div class=\"score-card-demo\">\n  <article class=\"score-card\" data-fill=\"warm\">\n    <div class=\"score-card-ring\">\n      <span class=\"score-ring score-ring--xl\" data-band=\"high\" aria-label=\"Score 87\">\n        <svg viewBox=\"0 0 36 36\"><circle class=\"track\" cx=\"18\" cy=\"18\" r=\"15\"/><circle class=\"fill\" cx=\"18\" cy=\"18\" r=\"15\" stroke-dasharray=\"94.2\" stroke-dashoffset=\"12.3\"/></svg>\n        <span class=\"v\">87</span>\n      </span>\n    </div>\n    <div class=\"score-card-body\">\n      <p class=\"score-card-eyebrow\">Approval probability</p>\n      <h2 class=\"score-card-headline\">Ready to submit</h2>\n      <p class=\"score-card-meta\">33 of 38 points</p>\n    </div>\n  </article>\n  <article class=\"score-card\">\n    <div class=\"score-card-ring\">\n      <span class=\"score-ring score-ring--xl\" data-band=\"medium\" aria-label=\"Score 62\">\n        <svg viewBox=\"0 0 36 36\"><circle class=\"track\" cx=\"18\" cy=\"18\" r=\"15\"/><circle class=\"fill\" cx=\"18\" cy=\"18\" r=\"15\" stroke-dasharray=\"94.2\" stroke-dashoffset=\"35.8\"/></svg>\n        <span class=\"v\">62</span>\n      </span>\n    </div>\n    <div class=\"score-card-body\">\n      <p class=\"score-card-eyebrow\">Lead quality</p>\n      <h2 class=\"score-card-headline\">Worth a follow-up</h2>\n      <p class=\"score-card-meta\">12 of 20 points</p>\n    </div>\n  </article>\n  <article class=\"score-card\" data-fill=\"ink\">\n    <div class=\"score-card-ring\">\n      <span class=\"score-ring score-ring--xl score-ring--accent\" aria-label=\"Score 41\">\n        <svg viewBox=\"0 0 36 36\"><circle class=\"track\" cx=\"18\" cy=\"18\" r=\"15\"/><circle class=\"fill\" cx=\"18\" cy=\"18\" r=\"15\" stroke-dasharray=\"94.2\" stroke-dashoffset=\"55.6\"/></svg>\n        <span class=\"v\">41</span>\n      </span>\n    </div>\n    <div class=\"score-card-body\">\n      <p class=\"score-card-eyebrow\">Close rate · last 30 days</p>\n      <h2 class=\"score-card-headline\">Below team average</h2>\n      <p class=\"score-card-meta\">9 of 22 deals</p>\n    </div>\n  </article>\n</div>",
    "css": ".score-card {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: var(--s-5);\n  align-items: center;\n  padding: var(--s-5);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n}\n\n.score-card-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }\n\n.score-card-eyebrow {\n  font: 500 11px/1 var(--f-mono);\n  text-transform: uppercase; letter-spacing: 0.08em;\n  color: var(--fg-soft); margin: 0;\n}\n\n.score-card-headline {\n  font: 700 22px/1.2 var(--f-display);\n  letter-spacing: -0.015em;\n  color: inherit;\n  margin: 0;\n}\n\n.score-card-meta {\n  font: 400 13px/1.4 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n}\n\n.score-card-ring { display: inline-flex; align-items: center; justify-content: center; }"
  }
}