feat: add CountryCodeDropdown component with libphonenumber validation

[garrity-miepub]

country-code.mov

Add a new CountryCodeDropdown component for selecting international country codes alongside phone number inputs. The component displays emoji flags and dial codes, with a searchable dropdown list of all supported countries.

Features:

• Defaults to United States (+1) with the American flag displayed
• Searchable dropdown filters by country name, ISO code, or dial code
• Country list built dynamically from google-libphonenumber supported regions
• Country display names resolved via the browser Intl.DisplayNames API
• Supports both controlled (value + onChange) and uncontrolled usage
• Keyboard navigation (arrow keys, Escape to close)
• Click-outside-to-close behavior
• Dark mode support
• Full accessibility: listbox role, aria-selected, focusable options

Exported utilities:

• validatePhoneNumber(phoneNumber, countryCode) - validates via libphonenumber
• formatE164(phoneNumber, countryCode) - formats to E.164 international format

Dependencies:

• Added google-libphonenumber as a runtime dependency
• Added @types/google-libphonenumber as a dev dependency

Also includes:

• Storybook stories (Default, WithPhoneInput, PreselectedCountry, Placements, Disabled, Controlled)
• Tree-shaking entry point in tsup.config.ts
• Barrel export from src/index.ts

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	a07978c
Status:	✅  Deploy successful!
Preview URL:	https://1c2b928f.ui-6d0.pages.dev
Branch Preview URL:	https://feature-country-code-dropdow.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Adds an international country-code selector and libphonenumber-based phone utilities to the UI library, enabling phone inputs to support multiple regions with a searchable, accessible dropdown.

Changes:

• Introduces CountryCodeDropdown component with search, keyboard navigation, click-outside/Escape close, and dark mode styling.
• Exports validatePhoneNumber and formatE164 helpers backed by google-libphonenumber.
• Adds a tree-shakeable tsup entry and updates public exports + dependencies.

Reviewed changes

Copilot reviewed 6 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tsup.config.ts	Adds tree-shaking entry for the new component.
src/index.ts	Exposes the new component from the library root barrel.
src/components/CountryCodeDropdown/index.ts	Component-level barrel exports for component + utilities + types.
src/components/CountryCodeDropdown/CountryCodeDropdown.tsx	Implements dropdown UI, country list generation, and exported phone helpers.
src/components/CountryCodeDropdown/CountryCodeDropdown.stories.tsx	Adds Storybook stories demonstrating usage patterns.
package.json	Bumps version and adds google-libphonenumber + typings dependency.
pnpm-lock.yaml	Locks the new dependency versions for pnpm installs.
package-lock.json	Updates lockfile metadata (but currently missing new dependency entries).

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.