{
  "name": "LifecyclePill",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/LifecyclePill.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "lifecycle-pill",
  "elName": "LifecyclePill",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#lifecycle-pill",
  "hasLiveDemo": false,
  "description": "Typed pill for a contact's lifecycle stage. Wraps `.badge` with a\nvalue-driven tint and label.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "LifecyclePill",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "lifecycleTierOf",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "LifecyclePillProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "LifecycleValue",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "LifecycleTier",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { LifecyclePill } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "LifecycleValue",
      "doc": "Spark lifecycle stage. Omit when using `custom`."
    },
    {
      "name": "label",
      "optional": true,
      "type": "string",
      "doc": "Override the default label for the value."
    },
    {
      "name": "custom",
      "optional": true,
      "type": "{ label: string",
      "doc": "Escape hatch for workspace-defined stages outside the built-in taxonomy — an arbitrary label + tone. Takes precedence over `value`."
    },
    {
      "name": "tone",
      "optional": false,
      "type": "LifecycleCustomTone }",
      "doc": ""
    }
  ],
  "classesUsed": [
    "badge",
    "badge-accent",
    "badge-danger",
    "badge-info",
    "badge-success",
    "badge-warning",
    "pill-muted",
    "pill-purple",
    "pill-warm"
  ],
  "examples": {
    "react": "<LifecyclePill value=\"customer\" />\n<LifecyclePill value=\"lead\" />",
    "html": "<div class=\"chip-row\">\n  <span class=\"badge pill-warm\" data-lifecycle=\"lead\" data-lifecycle-tier=\"funnel\">Lead</span>\n  <span class=\"badge badge-info\" data-lifecycle=\"prospect\" data-lifecycle-tier=\"funnel\">Prospect</span>\n  <span class=\"badge badge-accent\" data-lifecycle=\"mql\" data-lifecycle-tier=\"funnel\">MQL</span>\n  <span class=\"badge badge-warning\" data-lifecycle=\"sql\" data-lifecycle-tier=\"funnel\">SQL</span>\n  <span class=\"badge badge-success\" data-lifecycle=\"customer\" data-lifecycle-tier=\"funnel\">Customer</span>\n  <span class=\"badge pill-purple\" data-lifecycle=\"success_sprint\" data-lifecycle-tier=\"operational\">Success sprint</span>\n  <span class=\"badge badge-danger\" data-lifecycle=\"churn\" data-lifecycle-tier=\"operational\">Churn</span>\n</div>",
    "css": ".badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  white-space: nowrap;\n  padding: 3px 8px;\n  border-radius: var(--r-pill);\n  font: 500 11.5px/1.2 var(--f-body);\n  background: var(--hair-soft);\n  color: var(--fg);\n  border: 1px solid transparent;\n}\n\n.badge-accent { background: var(--accent-soft);  color: var(--accent-text); }\n\n.badge-danger { background: var(--error-soft);   color: var(--error-text); }\n\n.badge-info { background: var(--info-soft);    color: var(--info-text); }\n\n.badge-success { background: var(--success-soft); color: var(--success-text); }\n\n.badge-warning { background: var(--warning-soft); color: var(--warning-text); }\n\n.pill-muted { background: var(--warm-5); color: var(--fg-soft); }\n\n.pill-purple { background: #EFE4FF; color: #5C2CA8; }\n\n.pill-warm { background: var(--warm-3); color: var(--fg); }"
  }
}