{
  "name": "InvoiceRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/InvoiceRow.tsx",
  "chapterTag": "22 Billing",
  "chapter": "22-billing.html",
  "sectionId": "invoice-row",
  "elName": "Four rows — paid, paid, open, void",
  "demoUrl": "https://brand.magicblocks.ai/components/22-billing#invoice-row",
  "hasLiveDemo": false,
  "description": "A single invoice row — date + number + amount + status pill + optional\ndownload icon. Used inside `<BillingHistoryTable>` or composed standalone\ninside a `.invoice-row-list` wrapper for custom layouts.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "InvoiceRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "InvoiceRowProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "InvoiceRowStatus",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { InvoiceRow } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "invoice-row",
    "invoice-row-amount",
    "invoice-row-date",
    "invoice-row-download",
    "invoice-row-list",
    "invoice-row-number",
    "invoice-row-status"
  ],
  "examples": {
    "react": "<div className=\"invoice-row-list\">\n  <InvoiceRow\n    date=\"14 May 2026\"\n    number=\"INV-2026-0142\"\n    amount=\"$292.00\"\n    status=\"paid\"\n    pdfHref=\"/invoices/INV-2026-0142.pdf\"\n  />\n  <InvoiceRow\n    date=\"14 Apr 2026\"\n    number=\"INV-2026-0118\"\n    amount=\"$292.00\"\n    status=\"paid\"\n    pdfHref=\"/invoices/INV-2026-0118.pdf\"\n  />\n  <InvoiceRow\n    date=\"14 Mar 2026\"\n    number=\"INV-2026-0094\"\n    amount=\"$32.00\"\n    status=\"open\"\n  />\n</div>",
    "html": "<div class=\"invoice-row-list\">\n  <div class=\"invoice-row\">\n    <span class=\"invoice-row-date\">14 May 2026</span>\n    <span class=\"invoice-row-number\">INV-2026-0142</span>\n    <span class=\"invoice-row-amount\">$292.00</span>\n    <span class=\"invoice-row-status is-paid\">Paid</span>\n    <a class=\"invoice-row-download\" href=\"/invoices/INV-2026-0142.pdf\" aria-label=\"Download invoice INV-2026-0142 as PDF\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2.75V10.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M4.5 7L8 10.5L11.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 12.5V13.25H13V12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></a>\n  </div>\n  <div class=\"invoice-row\">\n    <span class=\"invoice-row-date\">14 Apr 2026</span>\n    <span class=\"invoice-row-number\">INV-2026-0118</span>\n    <span class=\"invoice-row-amount\">$292.00</span>\n    <span class=\"invoice-row-status is-paid\">Paid</span>\n    <a class=\"invoice-row-download\" href=\"/invoices/INV-2026-0118.pdf\" aria-label=\"Download invoice INV-2026-0118 as PDF\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2.75V10.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M4.5 7L8 10.5L11.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 12.5V13.25H13V12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></a>\n  </div>\n  <div class=\"invoice-row\">\n    <span class=\"invoice-row-date\">14 Mar 2026</span>\n    <span class=\"invoice-row-number\">INV-2026-0094</span>\n    <span class=\"invoice-row-amount\">$32.00</span>\n    <span class=\"invoice-row-status is-open\">Open</span>\n  </div>\n  <div class=\"invoice-row\">\n    <span class=\"invoice-row-date\">14 Feb 2026</span>\n    <span class=\"invoice-row-number\">INV-2026-0070</span>\n    <span class=\"invoice-row-amount\">$292.00</span>\n    <span class=\"invoice-row-status is-void\">Void</span>\n  </div>\n</div>",
    "css": ".invoice-row {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n  transition: background var(--dur-2) var(--ease);\n}\n\n.invoice-row-amount {\n  font: 600 14px/1.3 var(--f-body);\n  color: var(--fg);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n  min-width: 80px;\n}\n\n.invoice-row-date {\n  font: 500 13px/1.3 var(--f-mono);\n  color: var(--fg-soft);\n  white-space: nowrap;\n}\n\n.invoice-row-download {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: var(--r-sm);\n  color: var(--fg-soft);\n  background: transparent;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.invoice-row-list {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n  background: var(--bg-paper);\n}\n\n.invoice-row-number {\n  font: 400 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.invoice-row-status {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--r-pill);\n  font: 600 11px/1.4 var(--f-mono);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}"
  }
}