{
  "name": "PosContactCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosContactCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-contact-card",
  "elName": "PosContactCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-contact-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosContactCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosContactCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "PosContact",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { PosContactCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "PosContact",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(patch: Partial<PosContact>) => void",
      "doc": ""
    },
    {
      "name": "onSubmit",
      "optional": false,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "cta",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-btn",
    "pos-card",
    "pos-card-title",
    "pos-field",
    "pos-field-input",
    "pos-field-label",
    "pos-fields",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-card is-accent-top\"><div class=\"pos-card-title\" style=\"margin-bottom:12px\">Where do we send the terms?</div><div class=\"pos-fields\"><label class=\"pos-field\"><span class=\"pos-field-label\">Full name</span><input class=\"pos-field-input\" type=\"text\" placeholder=\"Maria Alvarez\" value=\"Maria Alvarez\"/></label><label class=\"pos-field\"><span class=\"pos-field-label\">Email</span><input class=\"pos-field-input\" type=\"email\" placeholder=\"maria@email.com\" value=\"\"/></label><label class=\"pos-field\"><span class=\"pos-field-label\">Mobile</span><input class=\"pos-field-input\" type=\"tel\" placeholder=\"(415) 555-0134\" value=\"\"/></label><button type=\"button\" class=\"pos-btn\" style=\"margin-top:2px\" disabled=\"\">See my numbers</button></div></div></div>",
    "css": ".pos-btn { width: 100%; padding: 13px; min-height: var(--p-tap); box-sizing: border-box; border-radius: var(--r-pill); border: 0; cursor: pointer; background: var(--p-accent); color: var(--p-accent-fg); font: 600 15px/1.2 var(--p-font); display: flex; align-items: center; justify-content: center; gap: 9px; transition: all var(--dur-2) var(--ease); }\n\n.pos-card { background: var(--p-card); border: 1px solid var(--p-hair); border-radius: var(--p-r-card); padding: 16px; box-shadow: var(--sh-1); animation: pos-in 380ms var(--ease) both; }\n\n.pos-card-title { font: 600 15.5px/1.3 var(--p-font-display, var(--f-display)); }\n\n.pos-field { display: block; }\n\n.pos-field-input {\n  width: 100%; flex: 1; min-width: 0; box-sizing: border-box; padding: 12px 14px; min-height: var(--p-tap);\n  border-radius: var(--p-r-field); border: 1px solid var(--p-hair); background: var(--p-field);\n  font: 400 16px/1.3 var(--p-font); color: var(--p-fg); outline: none; transition: all var(--dur-2) var(--ease);\n}\n\n.pos-field-label { display: block; font: 400 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-dim); margin-bottom: 5px; }\n\n.pos-fields { display: flex; flex-direction: column; gap: 10px; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}