{
  "name": "QuietHoursIndicator",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/QuietHoursIndicator.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "quiet-hours",
  "elName": "QuietHoursIndicator",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#quiet-hours",
  "hasLiveDemo": false,
  "description": "Read-only SMS-safe-hours indicator: the compliant send window for a contact's\ntimezone, with a live \"now\" marker. Glanceable \"OK to text\" vs \"Quiet hours\".\nTies into 10DLC / quiet-hours compliance. A leaf primitive (no `'use client'`).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "QuietHoursIndicator",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "QuietHoursIndicatorProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { QuietHoursIndicator } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "windowStart",
      "optional": true,
      "type": "number",
      "doc": "Start of the compliant send window, hour 0–24. Default 8."
    },
    {
      "name": "windowEnd",
      "optional": true,
      "type": "number",
      "doc": "End of the compliant send window, hour 0–24. Default 21."
    },
    {
      "name": "now",
      "optional": true,
      "type": "number",
      "doc": "Contact's current local hour 0–24 (decimals ok). Omit to hide the marker."
    },
    {
      "name": "status",
      "optional": true,
      "type": "\"ok\" | \"quiet\"",
      "doc": "Force the status; otherwise derived from `now ∈ [start, end)`."
    },
    {
      "name": "statusLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the status label."
    },
    {
      "name": "windowLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the window label (default \"8 AM–9 PM\")."
    },
    {
      "name": "variant",
      "optional": true,
      "type": "\"full\" | \"pill\"",
      "doc": "`full` = labelled bar; `pill` = compact inline chip for a hero."
    }
  ],
  "classesUsed": [
    "qh-bar",
    "qh-head",
    "qh-now",
    "qh-pill",
    "qh-status",
    "qh-win",
    "qh-window",
    "quiet-hours"
  ],
  "examples": {
    "react": "<QuietHoursIndicator windowStart={8} windowEnd={21} now={15.7} />",
    "html": "<div class=\"quiet-hours\">\n  <div class=\"qh-head\">\n    <span class=\"qh-status\" data-status=\"ok\">OK to text now</span>\n    <span class=\"qh-window\">8 AM&ndash;9 PM</span>\n  </div>\n  <div class=\"qh-bar\">\n    <span class=\"qh-win\" style=\"left:33.33%;width:54.17%\"></span>\n    <span class=\"qh-now\" style=\"left:65.42%\"></span>\n  </div>\n</div>",
    "css": ".qh-bar { position: relative; height: 9px; border-radius: var(--r-pill); background: var(--bg-sunk); }\n\n.qh-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }\n\n.qh-now { position: absolute; top: -3px; width: 3px; height: 15px; border-radius: 2px; background: var(--success); transform: translateX(-50%); }\n\n.qh-pill { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 11px/1 var(--f-body); padding: 4px 9px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success-text); }\n\n.qh-status { font: 600 12px/1 var(--f-body); color: var(--success-text); }\n\n.qh-win { position: absolute; top: 0; bottom: 0; background: var(--success-soft); border-radius: var(--r-pill); }\n\n.qh-window { font: 500 11px/1 var(--f-mono); color: var(--fg-dim); }\n\n.quiet-hours { display: flex; flex-direction: column; gap: var(--s-2); }"
  }
}