CardStatement

The issuer's statement summary: what's owed, by when, and how the figure was reached.

<CardStatement
  issuer="Fernhill Bank Business Card"
  network="visa"
  last4="4242"
  period={{ start: new Date(2026, 8, 1), end: new Date(2026, 8, 30) }}
  previousBalance={money(384_210)}
  paymentsAndCredits={money(-50_000)}
  purchases={money(162_480)}
  fees={money(0)}
  interest={money(6_812)}
  newBalance={money(503_502)}
  minimumPayment={money(15_100)}
  dueDate={new Date(2026, 9, 25)}
  creditLimit={money(1_000_000)}
  availableCredit={money(496_498)}
  aprs={[{ label: "Purchases", rate: 24.99 }]}
  lateFee={money(4_100)}
  penaltyApr={29.99}
/>

Layer 2:

┌──────────────────────────────────────────────┐
│ [mark]  Issuer  •••• 4242          [Overdue] │  header: issuer, period, currency
├──────────────────────────────────────────────┤
│ New balance   Minimum payment   Due date     │  the three figures a holder acts on
│ $5,035.02     $151.00           25 Oct 2026  │
│ ↑ +$1,192.92 vs previous statement           │
├──────────────────────────────────────────────┤
│ Previous balance                  $3,842.10  │
│ Payments and credits               ($500.00) │
│ Purchases                         $1,624.80  │
│ Fees charged                              —  │
│ Interest charged                     $68.12  │
│                                  ──────────  │
│ New balance                       $5,035.02  │
│                                  ══════════  │
├──────────────────────────────────────────────┤
│ Credit limit · Available credit · APRs       │
├──────────────────────────────────────────────┤
│ Late payment warning.                        │
└──────────────────────────────────────────────┘

The walk ties or says so. Previous balance, payments and credits, purchases, fees and interest are footed in minor units and compared with the new balance the issuer printed. A non-zero difference adds a Difference row, turns the border --negative and states the amount. A holder paying from a figure that doesn't add up should find out before paying.

Movements are signed, once. A payment reduces what's owed, so it's passed negative and renders ($500.00) with the paren column reserved. There's no "−" beside the label, which would make it a double negative. The component never negates.

Polarity is inverted. The change against the previous statement is a Delta with polarity="inverted": a balance that rose is more owed. A credit balance (negative new balance) is labelled "Credit balance", not printed as a negative debt.

States:

• Past due: pastDue present and non-zero. An Overdue pill in the header, the due date in --negative, a line saying the past-due amount is included in the minimum, and the late-payment warning in --negative instead of the routine secondary text.
• Over limit: derived from new balance vs. credit limit, with the amount over stated. availableCredit is the issuer's figure, never recomputed, and null renders n/a.
• Paid in full: derived when payments and credits cleared the balance brought forward. It's a fact the figures prove, so it's stated in one secondary line.

Late payment warning prints only when lateFee is given, built from the props (due date, late fee, penalty APR) and never from invented terms. APRs print at two decimals.

Every figure states its basis: issuer, masked account, statement period and currency in the header; the due date is a date, not "in 12 days".

3 sizes, 2 weights: caption (meta and labels), body / figure-sm (the walk), figure-md (the three figures acted on).

Motion: none. A statement is a document.