Canonical examples for the finance components shipping in @f1carbon/ui, organized into live widgets, UI atoms, and composed blocks.
LIVE DATA
Reference vs live trend widgets — tick-flashing end chips, one page-wide style toggle.
Reference vs live ranges widget — static range dataviz, live end chips with tick flashes.
News widget at both text sizes plus the raw HeadlineRowLive primitive — live chips and tick flashes.
Snapshot widget at both text sizes plus the raw SnapshotListLive accordion — live chips and tick flashes.
Reference vs live positions table — per-symbol row flashes on the full column set.
Trend widget at both WidgetextSizes — default frame beside the naked interior, live end values.
Ratio trend widget at both WidgetextSizes — widget/naked pairs with live end values.
Insider-trading trend widget at both WidgetextSizes — widget/naked pairs with live end values.
Compare-card widget, md/sm rows with widget/naked pairs (chart body — tick wiring is follow-up).
Gauge widget, md/sm rows with widget/naked pairs (gauge body — tick wiring is follow-up).
Gauge widget, md/sm rows with widget/naked pairs (gauge body — tick wiring is follow-up).
Donut allocation widget, md/sm rows with widget/naked pairs (allocation stays period data).
Accounts widget, md/sm rows with widget/naked pairs (value atomization is follow-up).
The canonical tick-animation taxonomy — hover any cell to run its treatment; pulse buttons flash the whole map.
UI & BLOCKS
10 color variants, 6 sizes, carat direction, symbol/value combinations.
Up/down/flat direction, 4 sizes, time-period handling.
Orientation, sizes, button variant, alignment — and the two composed.
Variant, card surface, fit, hover, sparkline, and the flash animations.
Responsive grid of ticker cards with pass-through surface and anim props.
Color, direction, intensity, pulse vs flash mode — the glow behind live prices.