{
  "name": "CalendarActionConfig",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/CalendarActionConfig.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "actions",
  "elName": "Add Calendar &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">custom config panel</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#actions",
  "hasLiveDemo": false,
  "description": "Custom config panel for the **Add Calendar** action — the complex exemplar\nproving the registry's `Panel` escape hatch. Composes `<Select>` (provider +\nembed type), `<Input>` (account / event / embed link), and `<FieldMapper>`\n(the MagicBlocks→Calendly form-field autofill map, with locked Name/Email\nrows). Controlled via a {@link CalendarAction} + `onChange`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "CalendarActionConfig",
      "isPrincipal": true,
      "isType": false
    }
  ],
  "importStatement": "import { CalendarActionConfig } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "calendar-autofill",
    "calendar-autofill-arrow",
    "calendar-autofill-cell",
    "calendar-autofill-locked",
    "calendar-config",
    "field-help",
    "field-label",
    "field-req",
    "field-row"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"calendar-config\" style=\"max-width: 580px; margin: 0 auto;\">\n  <div class=\"field-row\">\n    <label class=\"field-label\">Select a calendar<span class=\"field-req\"> *</span></label>\n    <select class=\"ab-form-input\" aria-label=\"Select a calendar\">\n      <option>Calendly Calendar</option>\n      <option>Google Appointment Schedule</option>\n      <option>HighLevel Calendar</option>\n      <option>HubSpot Calendar</option>\n    </select>\n  </div>\n  <div class=\"field-row\">\n    <label class=\"field-label\">Embed type<span class=\"field-req\"> *</span></label>\n    <select class=\"ab-form-input\" aria-label=\"Embed type\">\n      <option>Event</option>\n      <option>Routing</option>\n    </select>\n  </div>\n  <div class=\"field-row\">\n    <label class=\"field-label\">Calendly account name<span class=\"field-req\"> *</span></label>\n    <input class=\"ab-form-input\" type=\"text\" placeholder=\"e.g. magicblocks\" value=\"charlies-wines\" aria-label=\"Calendly account name\">\n  </div>\n  <div class=\"field-row\">\n    <label class=\"field-label\">Calendly event ID<span class=\"field-req\"> *</span></label>\n    <input class=\"ab-form-input\" type=\"text\" placeholder=\"e.g. tasting-session\" value=\"vip-tasting\" aria-label=\"Calendly event ID\">\n  </div>\n\n  <div class=\"calendar-autofill\">\n    <p class=\"field-label\">Calendar form auto-population</p>\n    <p class=\"field-help\">Quickly prefilled into your calendar&rsquo;s form fields.</p>\n    <div class=\"calendar-autofill-locked\" aria-label=\"Always mapped\">\n      <span class=\"calendar-autofill-cell\">Name</span>\n      <span class=\"calendar-autofill-arrow\" aria-hidden=\"true\">&rarr;</span>\n      <span class=\"calendar-autofill-cell\">Name</span>\n    </div>\n    <div class=\"calendar-autofill-locked\" aria-label=\"Always mapped\">\n      <span class=\"calendar-autofill-cell\">Email</span>\n      <span class=\"calendar-autofill-arrow\" aria-hidden=\"true\">&rarr;</span>\n      <span class=\"calendar-autofill-cell\">Email</span>\n    </div>\n    <div class=\"calendar-autofill-locked\">\n      <span class=\"calendar-autofill-cell\">Phone (keyfact)</span>\n      <span class=\"calendar-autofill-arrow\" aria-hidden=\"true\">&rarr;</span>\n      <span class=\"calendar-autofill-cell\">[form_field_3]</span>\n    </div>\n    <button type=\"button\" class=\"action-list-add\" style=\"margin-top: 4px;\">+ Add field</button>\n  </div>\n</div>",
    "css": ".calendar-autofill { display: flex; flex-direction: column; gap: 8px; }\n\n.calendar-autofill-arrow { color: var(--fg-faint); }\n\n.calendar-autofill-cell { font: 500 12.5px/1 var(--f-body); color: var(--fg-soft); }\n\n.calendar-autofill-locked { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); padding: 8px 10px; background: var(--bg-warm); border: 1px solid var(--hair); border-radius: var(--r-sm); opacity: 0.7; }\n\n.calendar-config { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.field-help { font: 400 11.5px/1.4 var(--f-body); color: var(--fg-faint); margin: 0; }\n\n.field-label { font: 600 12.5px/1.3 var(--f-body); color: var(--fg); }\n\n.field-req { color: var(--accent); }\n\n.field-row { display: flex; flex-direction: column; gap: 6px; }"
  }
}