Team Breakdown Bars About Block for React

GROUPS holds the three bars: a title, the segment that starts chosen and the segments, each with a name and a count. Keep the same total in every group (the title uses the first group's). Up to five segments have a fill in TONES; add a tone to use more.

Each band has its own single-choice toggle group, so each bar has one chosen segment at a time and you cannot switch them all off. The chosen item is outlined in the foreground, its segment grows taller in the bar, and a polite line under the bar says the share and the count. The toggle group's API differs between libraries, so the block is written for each target.

Each bar is one image whose name lists every segment with its share ("By function: Engineering 40%, Product and design 14%, ..."). The legend items are toggle buttons with their count in text, and the line under the bar is announced politely when the choice changes.

Each share is rounded down, and the spare points go to the segments with the largest remainders. A bar with three segments of 40.5% rounded naively could show 101%; this never does.

The bands stack, each under its own rule with corner marks, and the legend wraps onto more lines. Nothing scrolls sideways.