{
  "name": "RouteProgress",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RouteProgress.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "route-progress",
  "elName": "Active state",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#route-progress",
  "hasLiveDemo": false,
  "description": "Indeterminate route-load progress bar. A 2px gradient slides across the\nanchored edge while `active`; fades out smoothly when `active` flips\nfalse. Honours `prefers-reduced-motion` (no slide; static 40 % bar).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "RouteProgress",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RouteProgressProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "RouteProgressTone",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "RouteProgressPosition",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { RouteProgress } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "active",
      "optional": false,
      "type": "boolean",
      "doc": "Animate when true; fade out smoothly (≥220 ms) when false."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "RouteProgressTone",
      "doc": "Color band. Default `\"accent\"`."
    },
    {
      "name": "position",
      "optional": true,
      "type": "RouteProgressPosition",
      "doc": "Edge anchor. Default `\"top\"`. The bar uses `position: absolute`; its parent must establish a positioning context (`position: relative` or similar — every topbar does)."
    },
    {
      "name": "height",
      "optional": true,
      "type": "number",
      "doc": "Bar height in px. Default `2`."
    }
  ],
  "classesUsed": [
    "route-progress"
  ],
  "examples": {
    "react": "// RR7\nconst isNavigating = useNavigation().state !== \"idle\";\nreturn (\n  <header className=\"topbar\">\n    <RouteProgress active={isNavigating} />\n    ...\n  </header>\n);",
    "html": "<div style=\"position: relative; height: 56px; padding: 0 var(--s-4); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-md); display: flex; align-items: center; color: var(--fg-soft); font-size: 13px;\">\n  <div class=\"route-progress route-progress-tone-accent route-progress-pos-top\" data-active=\"\" style=\"--rp-h: 2px;\" role=\"progressbar\"></div>\n  Topbar &middot; loading next route&hellip;\n</div>",
    "css": ".route-progress {\n  position: absolute;\n  inset-inline: 0;\n  height: var(--rp-h, 2px);\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 220ms ease-out;\n}"
  }
}