{
  "name": "SLA_THRESHOLDS",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SLARing.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "The autoState thresholds. Exported so consumers can either: (a) skip the\ncomponent-bundled `<SLARing>` and roll their own status pill with the same\nbanding, or (b) override `state` based on a custom rule but compare against\nthe kit's defaults. Matches the chapter §07.16 prose:",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SLARing",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SLA_THRESHOLDS",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "slaStateFromElapsed",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SLARingProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SLAState",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SLA_THRESHOLDS } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "elapsedFraction",
      "optional": true,
      "type": "number",
      "doc": "Fraction of allotted time elapsed (0–1). Defaults to chapter §07.16 demo (0.66 — warn band)."
    },
    {
      "name": "display",
      "optional": true,
      "type": "ReactNode",
      "doc": "Centre text — typically remaining time, or \"BREACHED\". Defaults to chapter §07.16 demo."
    },
    {
      "name": "size",
      "optional": true,
      "type": "\"sm\" | \"md\" | \"lg\"",
      "doc": "Size scale. md is the default (no modifier class)."
    },
    {
      "name": "state",
      "optional": true,
      "type": "SLAState",
      "doc": "Override automatic state inferred from elapsedFraction."
    }
  ],
  "classesUsed": [
    "sla-ring"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".sla-ring {\n  --sla-size: 40px;\n  --sla-stroke: 4px;\n  --sla-fill: var(--success);\n  display: inline-flex; align-items: center; justify-content: center;\n  position: relative;\n  width: var(--sla-size); height: var(--sla-size);\n  flex-shrink: 0;\n}"
  }
}