{
  "name": "IntegrationsGrid",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/IntegrationsGrid.tsx",
  "chapterTag": "24 Integrations",
  "chapter": "24-integrations.html",
  "sectionId": "integrations-grid",
  "elName": "Filtered grid — All / Productivity / Developer / Payments",
  "demoUrl": "https://brand.magicblocks.ai/components/24-integrations#integrations-grid",
  "hasLiveDemo": false,
  "description": "Wrapper around a grid of `<IntegrationCard>` children with an optional\nrow of category filter chips above. The chips themselves use the kit's\ncanonical global `.chip` styling and are rendered as `<button>`s with\n`aria-pressed` mirroring active state — the wrapper does not itself\nfilter the children (filtering happens at the consumer's data layer\nbased on the `onCategoryChange` callback), keeping the grid layout\nfully declarative.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "IntegrationsGrid",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "IntegrationsGridProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { IntegrationsGrid } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Children — typically a flat list of `<IntegrationCard>` elements that the grid lays out in a 3-up / 2-up / 1-up responsive grid."
    },
    {
      "name": "categories",
      "optional": true,
      "type": "string[]",
      "doc": "Optional list of category filter chips rendered above the grid. When omitted, the filter row is not rendered and the component is a pure grid wrapper. Each entry is rendered as a `.chip` button."
    },
    {
      "name": "activeCategory",
      "optional": true,
      "type": "string",
      "doc": "Controlled active category. When defined, the parent owns the filter state and `onCategoryChange` must mirror it back."
    },
    {
      "name": "defaultActiveCategory",
      "optional": true,
      "type": "string",
      "doc": "Initial active category when uncontrolled. Defaults to the first entry in `categories` (typically the \"All\" sentinel)."
    },
    {
      "name": "onCategoryChange",
      "optional": true,
      "type": "(cat: string) => void",
      "doc": "Fires whenever the active category changes — works for both controlled and uncontrolled usage."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "chip",
    "integrations-grid",
    "integrations-grid-filters",
    "integrations-grid-list"
  ],
  "examples": {
    "react": "// Uncontrolled — chip row owns its state, consumer filters via callback.\n<IntegrationsGrid\n  categories={[\"All\", \"Productivity\", \"Developer\", \"Payments\"]}\n  defaultActiveCategory=\"All\"\n  onCategoryChange={(cat) => setFilter(cat)}\n>\n  {filteredCards}\n</IntegrationsGrid>",
    "html": "<div class=\"integrations-grid\">\n  <div class=\"integrations-grid-filters\" role=\"group\" aria-label=\"Filter integrations by category\">\n    <button type=\"button\" class=\"chip is-active\" aria-pressed=\"true\">All</button>\n    <button type=\"button\" class=\"chip\" aria-pressed=\"false\">Productivity</button>\n    <button type=\"button\" class=\"chip\" aria-pressed=\"false\">Developer</button>\n    <button type=\"button\" class=\"chip\" aria-pressed=\"false\">Payments</button>\n  </div>\n  <div class=\"integrations-grid-list\">\n    <div class=\"integration-card\">\n      <div class=\"integration-card-head\">\n        <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#611F69\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">S</text></svg></span>\n        <span class=\"integration-card-name\">Slack</span>\n        <span class=\"integration-card-status is-connected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Connected</span>\n      </div>\n      <p class=\"integration-card-desc\">Send deal updates and pipeline notifications to a channel.</p>\n      <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Manage</button></div>\n    </div>\n    <div class=\"integration-card\">\n      <div class=\"integration-card-head\">\n        <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#191E32\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">G</text></svg></span>\n        <span class=\"integration-card-name\">GitHub</span>\n        <span class=\"integration-card-status is-connected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Connected</span>\n      </div>\n      <p class=\"integration-card-desc\">Open pull requests and surface review status on deal cards.</p>\n      <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Manage</button></div>\n    </div>\n    <div class=\"integration-card\">\n      <div class=\"integration-card-head\">\n        <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#635BFF\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">St</text></svg></span>\n        <span class=\"integration-card-name\">Stripe</span>\n        <span class=\"integration-card-status is-error\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Error</span>\n      </div>\n      <p class=\"integration-card-desc\">Pull invoice and subscription data into the billing tab.</p>\n      <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Retry</button></div>\n    </div>\n    <div class=\"integration-card\">\n      <div class=\"integration-card-head\">\n        <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#191E32\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">N</text></svg></span>\n        <span class=\"integration-card-name\">Notion</span>\n        <span class=\"integration-card-status is-disconnected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Disconnected</span>\n      </div>\n      <p class=\"integration-card-desc\">Mirror meeting notes and project briefs into linked records.</p>\n      <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-primary\">Connect</button></div>\n    </div>\n    <div class=\"integration-card\">\n      <div class=\"integration-card-head\">\n        <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#5E6AD2\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">L</text></svg></span>\n        <span class=\"integration-card-name\">Linear</span>\n        <span class=\"integration-card-status is-pending\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Pending</span>\n      </div>\n      <p class=\"integration-card-desc\">Two-way sync issues to deals — awaiting OAuth confirmation.</p>\n      <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-ghost\">Cancel</button></div>\n    </div>\n    <div class=\"integration-card\">\n      <div class=\"integration-card-head\">\n        <span class=\"integration-card-logo\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><rect width=\"40\" height=\"40\" rx=\"8\" fill=\"#F24E1E\"/><text x=\"20\" y=\"26\" text-anchor=\"middle\" font-family=\"ui-monospace, monospace\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">F</text></svg></span>\n        <span class=\"integration-card-name\">Figma</span>\n        <span class=\"integration-card-status is-disconnected\"><span class=\"integration-card-status-dot\" aria-hidden=\"true\"></span>Disconnected</span>\n      </div>\n      <p class=\"integration-card-desc\">Embed design file previews and version links on records.</p>\n      <div class=\"integration-card-action\"><button type=\"button\" class=\"btn btn-primary\">Connect</button></div>\n    </div>\n  </div>\n</div>",
    "css": ".chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--r-pill);\n  font: 500 12.5px/1.3 var(--f-body);\n  background: var(--bg-paper);\n  color: var(--fg);\n  border: 1px solid var(--hair);\n  white-space: nowrap;\n}\n\n.integrations-grid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-4);\n}\n\n.integrations-grid-filters {\n  display: flex;\n  gap: var(--s-2);\n  flex-wrap: wrap;\n}\n\n.integrations-grid-list {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--s-3);\n}"
  }
}