{
  "name": "SetupProgressChip",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SetupProgressChip.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "agent-frame",
  "elName": "SetupProgressChip",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#agent-frame",
  "hasLiveDemo": false,
  "description": "Setup progress for an agent — \"Setup 5 of 6 — connect a phone number\" on\nthe agent's Overview. Turns green and reads \"Setup complete\" once every\nstep is done.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SetupProgressChip",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SetupProgressChipProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SetupProgressChip } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "done",
      "optional": false,
      "type": "number",
      "doc": "Setup steps completed so far."
    },
    {
      "name": "total",
      "optional": false,
      "type": "number",
      "doc": "Total setup steps."
    },
    {
      "name": "nextStep",
      "optional": true,
      "type": "ReactNode",
      "doc": "Plain-language next step, e.g. \"connect a phone number\"."
    }
  ],
  "classesUsed": [],
  "examples": {
    "react": "<SetupProgressChip done={5} total={6} nextStep=\"connect a phone number\" />",
    "html": "<div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\"><span class=\"chip chip-amber\">Setup 5 of 6 — connect a phone number</span><span class=\"chip chip-green\">Setup complete</span></div>",
    "css": null
  }
}