Chart Stat Cards

# Chart Stat Cards — UI Component Set

## Goal
Build a row of 4 dashboard stat cards, each with metric, delta chip and a hand-rolled SVG sparkline — zero chart dependencies. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Card: rounded-xl border bg-card p-5; label 13px muted top, value 28px semibold tabular, delta chip right of value, sparkline pinned bottom spanning full card width.
- Delta chip: '+12.4%' with tiny arrow; positive = emerald tint bg, negative = rose tint; neutral gray under ±0.5%.
- Sparkline: 90×28 SVG polyline from a `data: number[]` prop, normalized to viewBox, 1.5px stroke in accent; area fill via gradient to transparent at 15%; last point gets a 2.5px dot.
- Variants per card allowed: `spark` (line), `bars` (7 mini bars, current highlighted), `ring` (progress ring 44px, e.g. for uptime).
- Skeleton state: label/value/spark blocks shimmer (animated gradient) with exact same dimensions — zero shift on load.

## Motion Spec
- Sparkline draws in via stroke-dasharray/offset 700ms ease-out when card enters viewport; area fades in after.
- Value counts up in 800ms synced to spark draw; delta chip pops in last (scale 0.8→1 spring).
- Bars variant: bars rise from 0 with 40ms stagger; ring sweeps to value with round linecap.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<StatCard label value delta data variant='spark'|'bars'|'ring' loading?: boolean format?: (n)=>string />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.