A composite phone input component combining a country code selector with a phone number text field, featuring debounced validation using `libphonenumber-js`. ## Key Components ### `PhoneInput` (main export) A controlled input component that renders a country dial-code `Select` alongside a `tel` input. Validates the phone number against the selected country after a 300ms debounce on change, and immediately on blur. **Props (`PhoneInputProps`):** | Prop | Type | Description | |---|---|---| | `value` | `string` | Current phone number string | | `countryCode` | `CountryCode` | ISO country code (from `libphonenumber-js`) | | `onPhoneChange` | `(phone: string) => void` | Called when phone input changes | | `onCountryChange` | `(country: CountryCode) => void` | Called when country selection changes | | `onValidationChange` | `(isInvalid: boolean) => void` | Optional callback for validation state | | `disabled` | `boolean` | Disables both inputs | | `placeholder` | `string` | Input placeholder (default: `"Phone Number (optional)"`) | | `onKeyDown` | `React.KeyboardEventHandler` | Key event passthrough | ### `CountryOption` (internal) Renders a single `SelectItem` with the country's flag emoji, dial code, and name with overflow truncation. ## Usage Example ```typescript import { PhoneInput } from '@/components/ui/phone-input' import { useState } from 'react' import type { CountryCode } from 'libphonenumber-js' function ContactForm() { const [phone, setPhone] = useState('') const [country, setCountry] = useState('US') const [phoneInvalid, setPhoneInvalid] = useState(false) return ( ) } ``` **Validation behaviour:** Empty fields are treated as valid. Validation fires after 4+ digits are entered (debounced) or on blur, and highlights the input with `!border-ods-warning` when invalid.