{
  "name": "PosDeclarationsCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosDeclarationsCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-declarations-card",
  "elName": "PosDeclarationsCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-declarations-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosDeclarationsCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosDeclarationsCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosDeclarationsCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "questions",
      "optional": true,
      "type": "string[]",
      "doc": ""
    },
    {
      "name": "value",
      "optional": false,
      "type": "Record<number, \"Yes\" | \"No\">",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(index: number, value: \"Yes\" | \"No\") => void",
      "doc": ""
    },
    {
      "name": "onContinue",
      "optional": false,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-btn",
    "pos-card",
    "pos-card-head",
    "pos-card-title",
    "pos-decl-q",
    "pos-decl-row",
    "pos-decl-toggle",
    "pos-decl-toggles",
    "pos-eyebrow"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-card\"><div class=\"pos-card-head\"><span class=\"pos-card-title\">Declarations</span><span class=\"pos-eyebrow is-count\">3 of 8</span></div><div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Will you occupy the property as your primary residence?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle is-on\" aria-pressed=\"true\">Yes</button><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Are you a party to any lawsuit?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle is-on\" aria-pressed=\"true\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Have you declared bankruptcy in the past 7 years?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle is-on\" aria-pressed=\"true\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Had a foreclosure or short sale in the past 7 years?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Are you obligated to pay alimony or child support?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Is any part of the down payment borrowed?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Are you a co-signer or guarantor on another loan?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">No</button></span></div><div class=\"pos-decl-row\"><span class=\"pos-decl-q\">Are you a U.S. citizen or permanent resident?</span><span class=\"pos-decl-toggles\"><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">Yes</button><button type=\"button\" class=\"pos-decl-toggle\" aria-pressed=\"false\">No</button></span></div></div><button type=\"button\" class=\"pos-btn is-sm is-stack\" disabled=\"\">Continue</button></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-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }\n\n.pos-card-title { font: 600 15.5px/1.3 var(--p-font-display, var(--f-display)); }\n\n.pos-decl-q { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }\n\n.pos-decl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--p-hair-soft); }\n\n.pos-decl-toggle { padding: 7px 14px; min-height: 36px; border-radius: var(--r-pill); border: 0; cursor: pointer; font: 600 12.5px/1.2 var(--p-font); background: var(--p-field); color: var(--p-dim); transition: all var(--dur-1) var(--ease); }\n\n.pos-decl-toggles { display: flex; gap: 4px; flex-shrink: 0; }\n\n.pos-eyebrow { display: block; font: 400 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-dim); margin-bottom: 7px; }"
  }
}