{
  "name": "TwoPathChooserDialog",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TwoPathChooserDialog.tsx",
  "chapterTag": "08 Feedback & Overlays",
  "chapter": "09-feedback-and-overlays.html",
  "sectionId": "two-path-chooser",
  "elName": "TwoPathChooserDialog",
  "demoUrl": "https://brand.magicblocks.ai/components/09-feedback-and-overlays#two-path-chooser",
  "hasLiveDemo": false,
  "description": "Two-card chooser body — drop inside a `<Modal>` to recreate the platform's\nrecurring \"pick one of two creation paths\" shape (Key Fact: Template vs\nCustom, Tools & MCP: HTTP Function vs MCP Server, future block-template\nchooser, etc.).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "TwoPathChooserDialog",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TwoPathChooserDialogProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "TwoPathChooserOption",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { TwoPathChooserDialog } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Top-level heading."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Subtitle / lead text beneath the heading."
    },
    {
      "name": "options",
      "optional": false,
      "type": "TwoPathChooserOption[]",
      "doc": "Two option cards. (Three is supported but the layout assumes 2.)"
    }
  ],
  "classesUsed": [
    "title",
    "two-path-chooser",
    "two-path-chooser-caption",
    "two-path-chooser-card",
    "two-path-chooser-description",
    "two-path-chooser-footer",
    "two-path-chooser-grid",
    "two-path-chooser-head",
    "two-path-chooser-icon",
    "two-path-chooser-label",
    "two-path-chooser-title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"two-path-chooser-demo\">\n  <div class=\"modal-backdrop\"></div>\n  <div class=\"modal\" role=\"dialog\" aria-label=\"Create a new tool\" data-size=\"md\">\n    <div class=\"two-path-chooser\">\n      <div class=\"two-path-chooser-head\">\n        <h2 class=\"two-path-chooser-title\">Create a new tool</h2>\n        <p class=\"two-path-chooser-caption\">Pick what kind of connector you want to wire up.</p>\n      </div>\n      <div class=\"two-path-chooser-grid\">\n        <button type=\"button\" class=\"two-path-chooser-card\">\n          <span class=\"two-path-chooser-icon\" aria-hidden=\"true\">\n            <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 8h16M4 16h16M9 4l-2 16M17 4l-2 16\"/></svg>\n          </span>\n          <span class=\"two-path-chooser-label\">HTTP Function</span>\n          <span class=\"two-path-chooser-description\">Call any HTTPS endpoint with a JSON body.</span>\n        </button>\n        <button type=\"button\" class=\"two-path-chooser-card\">\n          <span class=\"two-path-chooser-icon\" aria-hidden=\"true\">\n            <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><path d=\"M9 10v4M12 10v4M15 10v4\"/></svg>\n          </span>\n          <span class=\"two-path-chooser-label\">MCP Server</span>\n          <span class=\"two-path-chooser-description\">Register an MCP server and discover its tools.</span>\n          <span class=\"two-path-chooser-footer\">Recommended</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>",
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.two-path-chooser { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.two-path-chooser-caption { font: 400 14px/1.5 var(--f-body); color: var(--fg-soft); margin: 0; }\n\n.two-path-chooser-card {\n  appearance: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--s-2);\n  padding: var(--s-5);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  background: var(--bg-paper);\n  color: var(--fg);\n  cursor: pointer;\n  text-align: center;\n  transition: border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease);\n}\n\n.two-path-chooser-description { font: 400 13px/1.5 var(--f-body); color: var(--fg-soft); }\n\n.two-path-chooser-footer {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--accent);\n  margin-top: var(--s-1);\n}\n\n.two-path-chooser-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--s-4);\n}\n\n.two-path-chooser-head { display: flex; flex-direction: column; gap: 6px; text-align: center; }\n\n.two-path-chooser-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px; height: 48px;\n  border-radius: var(--r-md);\n  background: var(--bg-warm);\n  color: var(--fg);\n  margin-bottom: var(--s-2);\n}\n\n.two-path-chooser-label { font: 600 15px/1.3 var(--f-display); }\n\n.two-path-chooser-title { font: 600 18px/1.3 var(--f-display); color: var(--fg); margin: 0; }"
  }
}