{
  "name": "PosDocsCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosDocsCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-docs-card",
  "elName": "PosDocsCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-docs-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosDocsCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosDocsCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosDocsCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "files",
      "optional": false,
      "type": "string[]",
      "doc": ""
    },
    {
      "name": "onFiles",
      "optional": false,
      "type": "(names: string[]) => void",
      "doc": ""
    },
    {
      "name": "onContinue",
      "optional": false,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-btn",
    "pos-card",
    "pos-card-sub",
    "pos-card-title",
    "pos-doc-chip",
    "pos-doc-chips",
    "pos-doc-drop",
    "pos-docs-grid"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-card\"><div class=\"pos-card-title is-tight\">Proof of income</div><p class=\"pos-card-sub\">Paystub from the last 30 days, or last year&#x27;s return if self-employed.</p><div class=\"pos-docs-grid\"><label class=\"pos-doc-drop\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 8 A2 2 0 0 1 6 6 H8.5 L10 4 H14 L15.5 6 H18 A2 2 0 0 1 20 8 V17 A2 2 0 0 1 18 19 H6 A2 2 0 0 1 4 17 Z\" fill=\"currentColor\" opacity=\"0.3\"></path><path d=\"M4 8 A2 2 0 0 1 6 6 H8.5 L10 4 H14 L15.5 6 H18 A2 2 0 0 1 20 8 V17 A2 2 0 0 1 18 19 H6 A2 2 0 0 1 4 17 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"></path><circle cx=\"12\" cy=\"12.5\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle></svg><span>Take a photo</span><input type=\"file\" accept=\"image/*\" capture=\"environment\"/></label><label class=\"pos-doc-drop\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 16 V5 M8 8.5 L12 4.5 L16 8.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path><path d=\"M5 15 V18 A1.5 1.5 0 0 0 6.5 19.5 H17.5 A1.5 1.5 0 0 0 19 18 V15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"></path></svg><span>Upload a file</span><input type=\"file\" multiple=\"\" accept=\"image/*,.pdf\"/></label></div><div class=\"pos-doc-chips\"><span class=\"pos-doc-chip\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 13 L10 18 L19 6\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg>paystub-aug.jpg</span></div><button type=\"button\" class=\"pos-btn is-secondary is-sm is-stack\">That&#x27;s everything</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-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-doc-chip { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success-text); font: 500 12px/1.2 var(--p-font); animation: pos-pop 260ms var(--ease) both; }\n\n.pos-doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }\n\n.pos-doc-drop { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 10px; min-height: var(--p-tap); border-radius: var(--p-r-field); border: 1px dashed var(--p-hair); background: var(--p-field); cursor: pointer; font: 600 13px/1.2 var(--p-font); color: var(--p-fg); transition: all var(--dur-2) var(--ease); }\n\n.pos-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }"
  }
}