Component: Locale Picker #33

Component: Locale Picker

Build a picker that lets users choose their region-level preferences — not just language — e.g. for a settings page.

Requirements

• TypeScript-first with exported props interface
• Follows the conventions in ARCHITECTURE.md (controlled/uncontrolled via useControllableState, forwarded ref, ...rest passthrough, shared Locale type)
• Lets the user choose a region and shows derived defaults: currency, date format preview, number format preview, first day of week
• Uses Intl.DisplayNames, Intl.NumberFormat, Intl.DateTimeFormat (and Intl.Locale#getWeekInfo() where available)
• Searchable list, keyboard accessible
• RTL-aware, dark mode via dark: variants
• Tailwind CSS compatible

Expected API

<LocalePicker
  defaultValue="en-IN"
  regions={["IN", "US", "GB", "DE", "JP"]}
  onValueChange={(locale) => console.log(locale)}
/>

Deliverables

• Component source in src/registry/components/
• Export in src/registry/components/index.ts and entry in src/registry/registry.ts
• Tests in test/
• Documentation page in content/docs/components/ and live demo in src/components/docs/

See CONTRIBUTING.md.