{
  "name": "BillingPage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/BillingPage.tsx",
  "chapterTag": "22 Billing",
  "chapter": "22-billing.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Page-shaped wrapper composing chapter 24's billing primitives into a\ncomplete billing-page layout. Sections render in order: Plans → Usage →\nPayment methods → Billing history. Each section gets a small uppercase\nlabel above its content.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "BillingPage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "BillingPageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { BillingPage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "plans",
      "optional": false,
      "type": "PlanCardProps[]",
      "doc": "Plan tier cards rendered inside `.plan-card-grid`. One `<PlanCard>` per entry. Keyed by `name`."
    },
    {
      "name": "usage",
      "optional": false,
      "type": "UsageMeterProps[]",
      "doc": "Usage meters rendered inside `.usage-meter-stack`. One `<UsageMeter>` per entry."
    },
    {
      "name": "paymentMethods",
      "optional": false,
      "type": "PaymentMethodCardProps[]",
      "doc": "Payment-method cards rendered inside `.payment-method-grid`. One `<PaymentMethodCard>` per entry."
    },
    {
      "name": "invoices",
      "optional": false,
      "type": "BillingHistoryTableProps[\"invoices\"]",
      "doc": "Invoice data passed straight to `<BillingHistoryTable>`."
    },
    {
      "name": "sectionLabels",
      "optional": true,
      "type": "{ plans?: string",
      "doc": "Optional section-label overrides. Defaults: \"Plan\", \"Usage\", \"Payment methods\", \"Billing history\"."
    },
    {
      "name": "usage",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "paymentMethods",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "invoices",
      "optional": true,
      "type": "string; }",
      "doc": ""
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "billing-page",
    "billing-page-section",
    "billing-page-section-label",
    "btn",
    "btn-ghost",
    "btn-ink",
    "btn-primary",
    "payment-method-grid",
    "plan-card-grid",
    "title",
    "usage-meter-stack"
  ],
  "examples": {
    "react": "<BillingPage\n  plans={[\n    { name: \"Free\", price: \"$0\", period: \"billed monthly\",\n      description: \"Get started.\", features: [\"3 seats\", \"1k records\"],\n      cta: <button type=\"button\" className=\"btn btn-ghost\">Get started</button> },\n    { name: \"Pro\", price: \"$29\", period: \"per seat / month\",\n      description: \"Power users.\", features: [\"Unlimited\", \"Priority\"],\n      cta: <button type=\"button\" className=\"btn btn-primary\">Trial</button>,\n      intent: \"accent\", pill: \"Recommended\" },\n    { name: \"Enterprise\", price: \"Custom\", period: \"billed annually\",\n      description: \"Procurement.\", features: [\"SSO\", \"SLA\"],\n      cta: <button type=\"button\" className=\"btn btn-ink\">Contact sales</button>,\n      intent: \"ink\" },\n  ]}\n  usage={[\n    { label: \"API calls this month\", current: 24500, limit: 100000 },\n    { label: \"Storage\", current: 8.8, limit: 10, unit: \"GB\",\n      format: (n) => n.toFixed(1) },\n  ]}\n  paymentMethods={[\n    { brand: \"visa\", last4: \"4242\", expiry: \"12/27\", name: \"Jay Stockwell\",\n      isPrimary: true, onEdit: () => {}, onRemove: () => {} },\n  ]}\n  invoices={[\n    { id: \"i1\", date: \"14 May 2026\", number: \"INV-2026-0142\",\n      amount: \"$292.00\", status: \"paid\",\n      pdfHref: \"/invoices/INV-2026-0142.pdf\", sortKey: 1747180800 },\n  ]}\n/>",
    "html": null,
    "css": ".billing-page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-8);\n}\n\n.billing-page-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-4);\n}\n\n.billing-page-section-label {\n  margin: 0;\n  font: 600 16px/1.3 var(--f-display);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--fg-soft);\n}\n\n.btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-ghost {\n  background: transparent;\n  color: var(--fg);\n  border-color: transparent;\n}\n\n.btn-ink {\n  background: var(--ink);\n  color: var(--paper);\n  border-color: var(--ink);\n}\n\n.btn-primary {\n  /* `color: var(--on-accent)` (added in v1.19.0) is the canonical\n     \"text on --accent\" token. Falls back to `var(--paper)` for any\n     consumer on an older @magicblocksai/css that pre-dates the\n     `--on-accent` token. */\n  background: var(--accent); color: var(--on-accent, var(--paper));\n  box-shadow: var(--sh-pink);\n}\n\n.payment-method-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--s-4);\n}\n\n.plan-card-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--s-4);\n  align-items: stretch;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.usage-meter-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-4);\n  max-width: 480px;\n}"
  }
}