# Input Phone

A cross-platform React phone number input component with integrated country selector. Features a searchable country dropdown with flags and dial codes.

## Installation

```bash
npm install @xsolla/xui-input-phone
# or
yarn add @xsolla/xui-input-phone
```

## Demo

### Basic Phone Input

```tsx
import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function BasicPhoneInput() {
  const [phone, setPhone] = React.useState('');

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      placeholder="+1 (000) 000-0000"
    />
  );
}
```

### With Country Selection

```tsx
import * as React from 'react';
import { InputPhone, Country } from '@xsolla/xui-input-phone';

export default function CountryPhoneInput() {
  const [phone, setPhone] = React.useState('');
  const [country, setCountry] = React.useState<Country | undefined>();

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      selectedCountry={country}
      onCountryChange={setCountry}
    />
  );
}
```

### With Validation

```tsx
import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function ValidatedPhoneInput() {
  const [phone, setPhone] = React.useState('');
  const isValid = phone.length >= 10;

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      checked={isValid}
      extraClear={true}
      onRemove={() => setPhone('')}
    />
  );
}
```

## Anatomy

```jsx
import { InputPhone } from '@xsolla/xui-input-phone';

<InputPhone
  value={phoneNumber}            // Phone number value
  onChange={handleChange}        // Change event handler
  selectedCountry={country}      // Currently selected country
  onCountryChange={setCountry}   // Country selection handler
  countries={customCountries}    // Custom countries array
  placeholder="+1 (000) 000-0000" // Placeholder text
  size="md"                       // Size variant
  disabled={false}               // Disabled state
  error={false}                  // Error state
  errorMessage="Error"           // Error message
  extraClear={false}             // Show clear button
  onRemove={handleClear}         // Clear button handler
  checked={false}                // Show validation checkmark
/>
```

## Examples

### Error State

```tsx
import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function ErrorPhoneInput() {
  return (
    <InputPhone
      value="123"
      error={true}
      errorMessage="Please enter a valid phone number"
    />
  );
}
```

### Phone Input Sizes

```tsx
import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function PhoneInputSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <InputPhone size="xs" placeholder="Extra Small" />
      <InputPhone size="sm" placeholder="Small" />
      <InputPhone size="md" placeholder="Medium" />
      <InputPhone size="lg" placeholder="Large" />
      <InputPhone size="xl" placeholder="Extra Large" />
    </div>
  );
}
```

### Custom Countries

```tsx
import * as React from 'react';
import { InputPhone, Country } from '@xsolla/xui-input-phone';

export default function CustomCountriesPhone() {
  const [phone, setPhone] = React.useState('');

  const countries: Country[] = [
    { code: 'US', name: 'United States', dialCode: '+1' },
    { code: 'GB', name: 'United Kingdom', dialCode: '+44' },
    { code: 'DE', name: 'Germany', dialCode: '+49' },
  ];

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      countries={countries}
    />
  );
}
```

## API Reference

### InputPhone

**InputPhone Props:**

| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| value | `string` | - | Phone number value. |
| onChange | `(e: ChangeEvent) => void` | - | Change event handler. |
| onChangeText | `(text: string) => void` | - | Text change handler. |
| countries | `Country[]` | All countries | Available countries for selection. |
| selectedCountry | `Country` | - | Currently selected country. |
| onCountryChange | `(country: Country) => void` | - | Country selection handler. |
| placeholder | `string` | `"+1 (000) 000-0000"` | Placeholder text. |
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Component size. |
| disabled | `boolean` | `false` | Disabled state. |
| error | `boolean` | `false` | Error state. |
| errorMessage | `string` | - | Error message text. |
| extraClear | `boolean` | `false` | Show clear button. |
| onRemove | `() => void` | - | Clear button handler. |
| checked | `boolean` | `false` | Show validation checkmark. |
| checkedIcon | `ReactNode` | Check icon | Custom checkmark icon. |
| testID | `string` | - | Test identifier. |

**Country Interface:**

```typescript
interface Country {
  code: string;      // ISO 3166-1 alpha-2 (e.g., "US")
  name: string;      // Country name
  dialCode: string;  // International dial code (e.g., "+1")
  flag?: ReactNode;  // Optional flag icon
}
```

## Keyboard Navigation

| Key | Action |
| :-- | :----- |
| Arrow Down | Open dropdown / Next country |
| Arrow Up | Previous country |
| Enter | Select country / Open dropdown |
| Escape | Close dropdown |

## Accessibility

- Country selector uses `role="combobox"`
- Country list uses `role="listbox"` with `role="option"` items
- Searchable dropdown with `aria-controls` linking
- Phone input uses `type="tel"` and `inputMode="tel"`
