{
  "name": "SyncStatus",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SyncStatus.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "sync-status",
  "elName": "SyncStatus",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#sync-status",
  "hasLiveDemo": false,
  "description": "\"Synced 3 minutes ago · Refresh\" status line. Recurs on every list page\nin the Next Gen product app. Pure presentation — the consumer owns the\nrefresh action.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SyncStatus",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SyncStatusProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SyncStatus } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "syncedAt",
      "optional": true,
      "type": "Date | string | number | null",
      "doc": "Last sync time as a Date or ISO string."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Synchronous label override (e.g. \"Just now\"). Overrides relative formatting."
    },
    {
      "name": "busy",
      "optional": true,
      "type": "boolean",
      "doc": "Currently performing a refresh. Disables the button and swaps the spinner."
    },
    {
      "name": "onRefresh",
      "optional": true,
      "type": "() => void",
      "doc": "Fires on Refresh click."
    },
    {
      "name": "hideRefresh",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the refresh button (display-only)."
    },
    {
      "name": "refreshLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the refresh button text. Default `\"Refresh\"`."
    },
    {
      "name": "tickMs",
      "optional": true,
      "type": "number",
      "doc": "Tick interval for the relative time readout, ms. Default `60_000`."
    }
  ],
  "classesUsed": [
    "sync-status",
    "sync-status-refresh",
    "sync-status-spinner",
    "sync-status-text"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"sync-status\">\n  <span class=\"sync-status-text\">Synced 3 minutes ago</span>\n  <button type=\"button\" class=\"sync-status-refresh\" aria-label=\"Refresh\">\n    <span class=\"sync-status-spinner\" aria-hidden=\"true\"></span>\n    <span class=\"sync-status-refresh-label\">Refresh</span>\n  </button>\n</div>",
    "css": ".sync-status {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n  font: 400 12px/1.4 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.sync-status-refresh {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: transparent;\n  border: 0;\n  padding: 4px 6px;\n  border-radius: var(--r-xs);\n  color: var(--accent);\n  font: 500 12px/1 var(--f-body);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.sync-status-spinner {\n  width: 12px;\n  height: 12px;\n  border-radius: 999px;\n  border: 1.5px solid currentColor;\n  border-right-color: transparent;\n  opacity: 0;\n}\n\n.sync-status-text { white-space: nowrap; }"
  }
}