Component: Timezone Picker #91

Component: Timezone Picker

A searchable picker for IANA time zones, grouped by region, showing each zone's current UTC offset and local time.

Requirements

• TypeScript-first with exported props interface
• Zone list from Intl.supportedValuesOf("timeZone"); accept an optional timeZones prop to limit it
• Grouped by region (Europe, America, Asia…), with human-readable city names (America/New_York → "New York")
• Each option shows the current offset (UTC+02:00) and local time, computed with Intl.DateTimeFormat (timeZoneName: "shortOffset"), so it's correct across DST changes
• Search matches city, region and offset
• Defaults to the visitor's zone (Intl.DateTimeFormat().resolvedOptions().timeZone) when uncontrolled and no defaultValue is given
• Follows the component conventions: value / defaultValue / onValueChange via useControllableState, forwarded ref, ...rest
• Keyboard navigation through use-listbox-navigation, like LocalePicker
• Labels (placeholder, "No results") passed as props

Expected API

<TimezonePicker
  defaultValue="Europe/Berlin"
  onValueChange={(zone) => saveUserTimezone(zone)}
  labels={{ placeholder: "Search time zones", empty: "No time zone found" }}
/>

Deliverables

• Component source in src/registry/components/
• Export in src/registry/components/index.ts and entry in src/registry/registry.ts
• Tests in test/ covering grouping, search, offset formatting and controlled vs uncontrolled use
• Documentation page in content/docs/components/locale-pickers/

LocalePicker (src/registry/components/locale-picker.tsx) is a good reference for the listbox and search behaviour.

See CONTRIBUTING.md and the Contributor Rulebook.