Time Zone Setup Onboarding Block for Radix UI

From Intl.DateTimeFormat().resolvedOptions().timeZone, read in an effect after the page loads. Until then (and on the server) the block shows a typed FALLBACK zone, so the first paint is the same everywhere. If the browser's zone is not one of the ten in ZONES, it is added to the top of the select.

Each one is an SVG with twelve tick lines and two hands. The hour and minute come from Intl.DateTimeFormat with a timeZone for the fixed instant, the hands' ends are worked out with sine and cosine at module scope, and the time written under each clock is the same reading, so the picture is never the only source. The clocks are hidden from assistive technology and always drawn left to right.

So the page reads the same for everyone and a screenshot is stable. The instant is the INSTANT constant; set it to the current time in your app, and update it on a timer if you want the hands to move.

It toggles a select that is always in the layout: closed it is invisible and inert and keeps its space, so the panel never changes height. Pressing Change moves focus to the select, and picking a zone redraws the first clock and the line about the gap at once.

Confirm only says the zone was confirmed in this demo; nothing is saved. In your app save the zone name (the IANA string such as Europe/Berlin, not an offset, which changes with daylight saving) to the account where submit says so.

The two clocks stay side by side and shrink a little, the gap line wraps and Confirm pins to the foot of the screen with Skip for now beside it.