{
  "name": "PosMobileBar",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosMobileBar.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-mobile-bar",
  "elName": "PosMobileBar",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-mobile-bar",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosMobileBar",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosMobileBarProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosMobileBar } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "count",
      "optional": false,
      "type": "number",
      "doc": ""
    },
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "summary",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "onOpen",
      "optional": false,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-mobile-bar",
    "pos-mobile-bar-btn",
    "pos-mobile-count",
    "pos-mobile-summary",
    "pos-mobile-text",
    "pos-mobile-title",
    "title"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".pos-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--p-card); border-top: 1px solid var(--p-hair); box-shadow: 0 -8px 28px rgba(25,30,50,.1); }\n\n.pos-mobile-bar-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + var(--p-safe)); min-height: var(--p-tap); border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--p-font); color: var(--p-fg); }\n\n.pos-mobile-count { width: 30px; height: 30px; border-radius: 8px; background: var(--p-accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 600 11px/1 var(--f-mono); color: var(--p-accent-text); }\n\n.pos-mobile-summary { display: block; font: 400 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--p-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pos-mobile-text { flex: 1; min-width: 0; }\n\n.pos-mobile-title { display: block; font-size: 13.5px; font-weight: 600; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}