{
  "name": "TestConnectionButton",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TestConnectionButton.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "test-connection-button",
  "elName": "TestConnectionButton",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#test-connection-button",
  "hasLiveDemo": false,
  "description": "Button with built-in pending / ok / error chip — wraps an async probe\n(MCP Discover Tools, Webhook Test, HubSpot Test, Form Test) and shows\nthe result inline without forcing the consumer to manage three state\nvariables.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "TestConnectionButton",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TestConnectionButtonProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "TestConnectionState",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { TestConnectionButton } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Button label when idle. Default `\"Test connection\"`."
    },
    {
      "name": "pendingLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Label while running. Default `\"Testing…\"`."
    },
    {
      "name": "onTest",
      "optional": true,
      "type": "() => Promise<unknown>",
      "doc": "Fires when the user runs the test. Resolve / reject the promise to drive the state."
    },
    {
      "name": "state",
      "optional": true,
      "type": "TestConnectionState",
      "doc": "Controlled state. Pass to override the internal pending/result chip."
    },
    {
      "name": "onStateChange",
      "optional": true,
      "type": "(state: TestConnectionState) => void",
      "doc": "Fires when state transitions. Useful when not using the async wrapper."
    },
    {
      "name": "resetAfterMs",
      "optional": true,
      "type": "number",
      "doc": "Auto-clear the ok/error chip after this many ms. `0` disables. Default `4000`."
    }
  ],
  "classesUsed": [
    "test-connection",
    "test-connection-btn",
    "test-connection-chip",
    "test-connection-spinner"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"ab-grid\">\n          <div class=\"ab-grid-cell\">\n            <span class=\"ab-grid-label\">untested &middot; idle</span>\n            <div class=\"test-connection is-idle\">\n              <button type=\"button\" class=\"test-connection-btn\">\n                <span>Test webhook</span>\n              </button>\n            </div>\n          </div>\n          <div class=\"ab-grid-cell\">\n            <span class=\"ab-grid-label\">testing &middot; pending</span>\n            <div class=\"test-connection is-pending\">\n              <button type=\"button\" class=\"test-connection-btn\" disabled aria-busy=\"true\">\n                <span class=\"test-connection-spinner\" aria-hidden=\"true\"></span>\n                <span>Testing&hellip;</span>\n              </button>\n            </div>\n          </div>\n          <div class=\"ab-grid-cell\">\n            <span class=\"ab-grid-label\">success &middot; ok</span>\n            <div class=\"test-connection is-ok\">\n              <button type=\"button\" class=\"test-connection-btn\">\n                <span>Test webhook</span>\n              </button>\n              <span class=\"test-connection-chip is-ok\" role=\"status\">&check; 200 OK in 142ms</span>\n            </div>\n          </div>\n          <div class=\"ab-grid-cell\">\n            <span class=\"ab-grid-label\">error &middot; failed</span>\n            <div class=\"test-connection is-error\">\n              <button type=\"button\" class=\"test-connection-btn\">\n                <span>Test webhook</span>\n              </button>\n              <span class=\"test-connection-chip is-error\" role=\"status\">&times; HTTP 502</span>\n            </div>\n          </div>\n        </div>",
    "css": ".test-connection {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n  flex-wrap: wrap;\n}\n\n.test-connection-btn {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 500 13px/1 var(--f-body);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.test-connection-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: 999px;\n  font: 500 12px/1 var(--f-body);\n}\n\n.test-connection-spinner {\n  width: 12px;\n  height: 12px;\n  border-radius: 999px;\n  border: 1.5px solid currentColor;\n  border-right-color: transparent;\n  animation: test-connection-spin 0.7s linear infinite;\n}"
  }
}