{
  "name": "PosInputCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosInputCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-input-card",
  "elName": "PosInputCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-input-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosInputCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosInputCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosInputCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "value",
      "optional": false,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(value: string) => void",
      "doc": ""
    },
    {
      "name": "onSubmit",
      "optional": false,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "inputMode",
      "optional": true,
      "type": "\"text\" | \"decimal\"",
      "doc": ""
    },
    {
      "name": "prefix",
      "optional": true,
      "type": "ReactNode",
      "doc": "\"$\" for money questions."
    },
    {
      "name": "suggestions",
      "optional": true,
      "type": "string[]",
      "doc": ""
    },
    {
      "name": "onSuggestion",
      "optional": true,
      "type": "(value: string) => void",
      "doc": ""
    },
    {
      "name": "quickPicks",
      "optional": true,
      "type": "string[]",
      "doc": ""
    },
    {
      "name": "onQuickPick",
      "optional": true,
      "type": "(value: string) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-card",
    "pos-eyebrow",
    "pos-input",
    "pos-input-prefix",
    "pos-input-row",
    "pos-quick-pick",
    "pos-quick-picks",
    "pos-send",
    "pos-suggestion",
    "pos-suggestions"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-card\"><span class=\"pos-eyebrow\">Purchase price</span><div class=\"pos-input-row\"><span class=\"pos-input-prefix\">$</span><input class=\"pos-input\" placeholder=\"600,000\" inputMode=\"decimal\" aria-label=\"Purchase price\" value=\"\"/><button type=\"button\" class=\"pos-send\" disabled=\"\" aria-label=\"Send\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 12 H18 M13 6 L19 12 L13 18\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg></button></div><div class=\"pos-quick-picks\"><button type=\"button\" class=\"pos-quick-pick\">$450,000</button><button type=\"button\" class=\"pos-quick-pick\">$600,000</button><button type=\"button\" class=\"pos-quick-pick\">$750,000</button><button type=\"button\" class=\"pos-quick-pick\">$1,000,000</button></div></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-eyebrow { display: block; font: 400 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-dim); margin-bottom: 7px; }\n\n.pos-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-input-prefix { font: 600 19px/1 var(--p-font-display, var(--f-display)); color: var(--p-dim); }\n\n.pos-input-row { display: flex; align-items: center; gap: 10px; }\n\n.pos-quick-pick { padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--p-hair); background: var(--p-field); color: var(--p-dim); font: 400 11.5px/1.2 var(--f-mono); cursor: pointer; transition: all var(--dur-2) var(--ease); }\n\n.pos-quick-picks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }\n\n.pos-send { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--p-accent); color: var(--p-accent-fg); transition: all var(--dur-2) var(--ease); }\n\n.pos-suggestion { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; min-height: var(--p-tap); border: 0; background: transparent; border-radius: var(--p-r-field); cursor: pointer; text-align: left; font: 400 14px/1.3 var(--p-font); color: var(--p-fg); transition: background var(--dur-1) var(--ease); }\n\n.pos-suggestions { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--p-hair-soft); }"
  }
}