I'll create a phone input component with country selection that follows the shadcn/ui style. This component will allow users to select a country (showing the country code/DDI) and will automatically apply the correct mask to the phone number input.

This phone input component follows the shadcn/ui style 1 and provides:

1. A country selector dropdown with flags and country codes (DDI)
2. Automatic phone number formatting based on the selected country
3. A clean, accessible interface that matches the shadcn/ui design system

How it works:

• The component uses libphonenumber-js for phone number formatting and validation
• Country flags are displayed using country-flag-icons
• The dropdown uses shadcn/ui's Command component for a searchable country list
• Phone numbers are automatically formatted according to the selected country's pattern

Installation:

You'll need to install the required dependencies:

The component is fully responsive and follows shadcn/ui's composable interface principles 2, making it easy to customize further if needed.