{
  "name": "LifecycleBar",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/LifecycleBar.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "lifecycle-bar",
  "elName": "LifecycleBar",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#lifecycle-bar",
  "hasLiveDemo": false,
  "description": "Segmented lifecycle journey bar for a contact / deal header. Past stages get\na soft ink wash, the current stage fills in `--accent` (with a glow that\ndrops under reduced motion), future stages stay hairline. Composes nothing —\na leaf primitive the record-detail pages drop into their hero.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "LifecycleBar",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "LIFECYCLE_STAGES",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "LifecycleBarProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "LifecycleStage",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { LifecycleBar } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "current",
      "optional": false,
      "type": "string",
      "doc": "Active stage id. Stages before it read as past; after it as future."
    },
    {
      "name": "stages",
      "optional": true,
      "type": "LifecycleStage[]",
      "doc": "Stage set. Defaults to `LIFECYCLE_STAGES`."
    },
    {
      "name": "daysInStage",
      "optional": true,
      "type": "number",
      "doc": "Optional caption metric — \"<n> days in stage\"."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the whole caption line."
    },
    {
      "name": "showCaption",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the caption row. Defaults to `true`."
    }
  ],
  "classesUsed": [
    "lfb-caption",
    "lfb-current",
    "lfb-label",
    "lfb-seg",
    "lfb-stage",
    "lfb-track",
    "lifecycle-bar"
  ],
  "examples": {
    "react": "<LifecycleBar current=\"follow-up\" daysInStage={2} />",
    "html": "<div class=\"lifecycle-bar\">\n  <div class=\"lfb-caption\">Lifecycle &middot; <span class=\"lfb-current\">Follow-up</span> &middot; 2 days in stage</div>\n  <div class=\"lfb-track\">\n    <div class=\"lfb-stage is-past\"><span class=\"lfb-seg\"></span><span class=\"lfb-label\">Engage</span></div>\n    <div class=\"lfb-stage is-past\"><span class=\"lfb-seg\"></span><span class=\"lfb-label\">Qualify</span></div>\n    <div class=\"lfb-stage is-now\"><span class=\"lfb-seg\"></span><span class=\"lfb-label\">Follow-up</span></div>\n    <div class=\"lfb-stage\"><span class=\"lfb-seg\"></span><span class=\"lfb-label\">Converted</span></div>\n    <div class=\"lfb-stage\"><span class=\"lfb-seg\"></span><span class=\"lfb-label\">Re-engage</span></div>\n  </div>\n</div>",
    "css": ".lfb-caption { font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); }\n\n.lfb-current { color: var(--accent-text); }\n\n.lfb-label { font: 600 10px/1.2 var(--f-body); text-align: center; color: var(--fg-faint); }\n\n.lfb-seg { height: 7px; border-radius: var(--r-pill); background: var(--hair-soft); }\n\n.lfb-stage { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }\n\n.lfb-track { display: flex; gap: var(--s-1); }\n\n.lifecycle-bar { display: flex; flex-direction: column; gap: var(--s-2); }"
  }
}