{
  "name": "PosOtpCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosOtpCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-otp-card",
  "elName": "PosOtpCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-otp-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosOtpCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosOtpCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosOtpCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(value: string) => void",
      "doc": ""
    },
    {
      "name": "sentTo",
      "optional": true,
      "type": "ReactNode",
      "doc": "\"(415) 555-0134\" — shown as \"Sent to …\"."
    },
    {
      "name": "onResend",
      "optional": true,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-card",
    "pos-card-sub",
    "pos-card-title",
    "pos-card-title-row",
    "pos-link-btn",
    "pos-otp-input"
  ],
  "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-row\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"2\" fill=\"currentColor\" opacity=\"0.35\"></rect><path d=\"M7 10 V7 A5 5 0 0 1 17 7 V10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"></path><circle cx=\"12\" cy=\"15.5\" r=\"1.6\" fill=\"currentColor\"></circle></svg><span class=\"pos-card-title\">Enter the code</span></div><p class=\"pos-card-sub\">Sent to (415) 555-0134 · expires in 10 minutes</p><input class=\"pos-otp-input\" inputMode=\"numeric\" autoComplete=\"one-time-code\" placeholder=\"••••••\" maxLength=\"6\" aria-label=\"Verification code\" value=\"\"/><button type=\"button\" class=\"pos-link-btn\">Didn&#x27;t get it? Send again</button></div></div>",
    "css": ".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-sub { font-size: 12.5px; line-height: 1.55; color: var(--p-dim); margin: 0 0 13px; text-wrap: pretty; }\n\n.pos-card-title { font: 600 15.5px/1.3 var(--p-font-display, var(--f-display)); }\n\n.pos-card-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--p-accent); }\n\n.pos-link-btn { margin-top: 10px; padding: 6px 2px; border: 0; background: transparent; cursor: pointer; font: 400 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--p-dim); text-decoration: underline; text-underline-offset: 3px; }\n\n.pos-otp-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.pos-otp-input { padding: 13px; font: 400 24px/1 var(--f-mono); letter-spacing: .5em; text-align: center; }"
  }
}