Spending Ring

Accessibility

• The legend is a radio group and doubles as the data table.
• The ring is an image named with every category and amount.
• The readout updates politely when the selection changes.

Motion

• Arcs sweep in from 12 o’clock over 600 ms on first view.
• Selecting thickens the arc with a spring and rolls the digits in 240 ms.
• The legend item lifts to 5% ink in 150 ms.
• With reduced motion, the ring appears whole and digits swap in place.

Responsive behavior

• 384 px on Web and 358 px on Mobile. The ring stays 200 px and the legend keeps two columns.

Performance

• The sweep runs once, when the ring first enters the viewport, and its mask is not rendered when still.
• Selecting a category springs only the stroke width and radius of the two arcs that change.
• The amount rolls per digit, so only the characters that change move.

• Import SpendingRing from @/components/fetaui/spending-ring and pass categories with name, amount and optional delta.
• Names are the keys: value, defaultValue and onValueChange use the category name, and it must be unique.
• Arcs use the sum of the amounts. Shares in the readout use total, so keep the two close.
• format sets the readout and total, formatShort the legend. Composes Card.