{
  "name": "PosChips",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosChips.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-chips",
  "elName": "PosChips",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-chips",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosChips",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosChipsProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosChips } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "options",
      "optional": false,
      "type": "string[]",
      "doc": ""
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "(option: string, index: number) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-chip",
    "pos-chips"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-chips\" role=\"group\"><button type=\"button\" class=\"pos-chip\" style=\"animation-delay:0ms\">Buying a home</button><button type=\"button\" class=\"pos-chip\" style=\"animation-delay:70ms\">Refinancing</button><button type=\"button\" class=\"pos-chip\" style=\"animation-delay:140ms\">Taking cash out</button></div></div>",
    "css": ".pos-chip { padding: 11px 17px; min-height: var(--p-tap); border-radius: var(--r-pill); border: 1px solid var(--p-hair); background: var(--p-card); color: var(--p-fg); font: 500 14.5px/1.2 var(--p-font); cursor: pointer; transition: all var(--dur-2) var(--ease); animation: pos-in 340ms var(--ease) both; }\n\n.pos-chips { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 2px; animation: pos-in 380ms var(--ease) both; }"
  }
}