{
  "name": "SourceRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SourceRow.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "source-row",
  "elName": "SourceRow",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#source-row",
  "hasLiveDemo": false,
  "description": "A resource row: tinted icon chip + name + metadata sub-line + status slot +\ntrailing slot. The canonical layout for \"a list of connected sources you can\nsee the health of and toggle\" — knowledge collections, MCP tool connections,\nchannels. Presentational: drop a `<Switch>` (or kebab) into `trailing` and a\n`<Chip>` into `status`.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SourceRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SourceRowProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SourceRow } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Leading icon, rendered inside a tinted `<IconChip>`."
    },
    {
      "name": "tone",
      "optional": true,
      "type": "IconChipTone",
      "doc": "IconChip tone. Default `\"neutral\"`."
    },
    {
      "name": "name",
      "optional": false,
      "type": "ReactNode",
      "doc": "Source name (knowledge collection, MCP server, channel…)."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Metadata sub-line, e.g. `\"3 tools · last called 4 min ago · 99.4% success\"`."
    },
    {
      "name": "status",
      "optional": true,
      "type": "ReactNode",
      "doc": "Status slot — typically a `<Chip>`. Sits before the trailing slot."
    },
    {
      "name": "trailing",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trailing slot — typically a `<Switch>` or a kebab menu."
    }
  ],
  "classesUsed": [
    "source-row",
    "source-row-body",
    "source-row-icon",
    "source-row-meta",
    "source-row-name",
    "source-row-status",
    "source-row-trailing"
  ],
  "examples": {
    "react": "<SourceRow\n  icon={<BookIcon size={18} />}\n  tone=\"info\"\n  name=\"Product knowledge\"\n  meta=\"42 documents · synced 4 min ago\"\n  status={<Chip tone=\"green\">Healthy</Chip>}\n  trailing={<Switch defaultChecked />}\n/>",
    "html": "<div class=\"source-row\">\n  <span class=\"icon-chip icon-chip-info source-row-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"/><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"/></svg></span>\n  <div class=\"source-row-body\">\n    <span class=\"source-row-name\">Product knowledge</span>\n    <span class=\"source-row-meta\">42 documents · synced 4 min ago · 99.4% coverage</span>\n  </div>\n  <div class=\"source-row-status\"><span class=\"chip chip-green\">Healthy</span></div>\n  <div class=\"source-row-trailing\">\n    <label class=\"switch\"><input type=\"checkbox\" checked><span class=\"switch-track\" aria-hidden=\"true\"></span></label>\n  </div>\n</div>",
    "css": ".source-row {\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n}\n\n.source-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }\n\n.source-row-icon { flex-shrink: 0; }\n\n.source-row-meta { font: 400 12px/1.45 var(--f-mono); color: var(--fg-dim); }\n\n.source-row-name { font: 500 14px/1.3 var(--f-body); color: var(--fg); }\n\n.source-row-status { display: inline-flex; align-items: center; flex-shrink: 0; }\n\n.source-row-trailing { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: var(--s-2); }"
  }
}