ChoiceCard
components/ui/choice-card.tsx
A card that asks one question and offers several answers, each carrying its own data. The figures are right-aligned in tabular numerals so they form a column the eye can run down, which is what makes the options comparable rather than merely listed. It is a real fieldset of native radios, so arrow keys move through the group and the selection reads as a dot, a border and a fill rather than a colour alone.
Delivery options
Money on the right in one column, the promise underneath each label. The recommended option is named, not just tinted.
Subscription plans
The same component with completely different data. Nothing in it knows what a plan is; it only knows label, detail and figure.
Payout methods
Percentages rather than prices, and the tabular figures still line up so 1.50% and 0.75% can be compared at a glance.
Compact rows
Options with no description collapse to a single line each, and the size column still aligns.
Nothing chosen yet
Without a default the group starts empty, so the card never pretends the person has already decided.
An option that cannot be picked
The unavailable option stays visible at readable contrast and says why, instead of vanishing or dimming without explanation.
Long labels
Labels truncate on one line and descriptions clamp to two, both keeping their full text on hover, so the figure column can never be pushed out of place.
Nothing to choose from
Loading
The skeleton keeps the question visible and holds the height of three rows, so the card does not resize when the options arrive.