Date Range Picker Navbar Block for React

Edit TABS for the report links (a label, an href and, for the page you are on, current: true) and PRESETS for the radio (an id and a label). The current tab gets aria-current="page", which draws the stroke, and after the page loads it scrolls to the centre of the tab cell so a long label is not cut off at the edge. The fade at the end of the cell is a mask, so the next tab peeks through when there is more to scroll.

Last 7 days, Last 30 days and Last 90 days put that label on the trigger. Custom range shows the calendar. Once both ends are chosen, the trigger reads the days and short months ("12 Mar – 18 Mar") and never a year. The calendar itself is not given a stored range: each choice is copied into the label. The selected days are painted with the foreground token, not the primary colour. A polite line names the preset, or the custom days, when the choice changes.

It flips compare in the block and nothing else. A polite line says the comparison is on or off. There is no second series in this navbar: keep the flag and pass it to the report under the bar.

The wordmark is a link home (its name stays available when the word hides). The tabs are links in a nav landmark named Main. The range trigger is a button whose description is the polite line. The presets are a radio group named Date range, and the compare control is a checkbox. Export is a link. The range popup is not modal. Tab can leave it, and Escape closes it.

Below sm the wordmark keeps its icon and hides the name. The tabs still scroll. Below md the range trigger opens a drawer from the bottom instead of a popup, and Export leaves the bar and sits at the bottom of that drawer, so at 320 pixels the bar is the icon, the tabs and the range chip. The drawer scrolls when the calendar makes it taller than the screen.

Nothing moves on load except the current tab scrolling into view, which is a jump to a position, not an animation. The popup and the drawer use their own open transitions, and a band of light sweeps across Export once on hover and keyboard focus. With reduced motion the drawer appears without sliding and the light fades in where it stands.