# Phone Input Component

A beautifully designed phone input component built with `react-phone-number-input` that matches your design system.

## Features

- 🌍 International phone number support with country flags
- 🎨 Seamless integration with Tailwind CSS v4
- ✨ Focus states with ring animations
- 🌙 Dark mode support
- ♿ Accessible with proper ARIA attributes
- 🎯 Validation states (error/success)
- 📱 Responsive design
- 🔧 React Hook Form integration

## Installation

The component is already installed and configured in your project at:
- Component: `resources/js/components/ui/phone-input.tsx`
- Styles: `resources/css/phone-input.css`

## Basic Usage

### Simple Phone Input

```tsx
import { PhoneInput } from '@/components/ui/phone-input';

function MyComponent() {
    const [phone, setPhone] = useState('');

    return (
        <PhoneInput
            value={phone}
            onChange={setPhone}
            defaultCountry="US"
            placeholder="Enter phone number"
        />
    );
}
```

### Phone Input with Label

```tsx
import { PhoneInputField } from '@/components/ui/phone-input';

function MyComponent() {
    const [phone, setPhone] = useState('');

    return (
        <PhoneInputField
            label="Phone Number"
            value={phone}
            onChange={setPhone}
            defaultCountry="US"
            placeholder="Enter phone number"
            required
        />
    );
}
```

### With Error State

```tsx
<PhoneInputField
    label="Phone Number"
    value={phone}
    onChange={setPhone}
    errorMessage="Please enter a valid phone number"
    required
/>
```

### With Helper Text

```tsx
<PhoneInputField
    label="Phone Number"
    value={phone}
    onChange={setPhone}
    helperText="We'll never share your phone number"
/>
```

## React Hook Form Integration

### Example with ContactForm

```tsx
import { PhoneInputField } from '@/components/ui/phone-input';
import { useFormContext } from 'react-hook-form';

function ContactForm() {
    const { watch, setValue, formState: { errors } } = useFormContext();
    const phoneValue = watch('phone');

    return (
        <PhoneInputField
            label="Phone Number"
            value={phoneValue || ''}
            onChange={(value) => setValue('phone', value || '', { shouldValidate: true })}
            onBlur={() => setValue('phone', phoneValue || '', { shouldValidate: true })}
            errorMessage={errors.phone?.message as string}
            defaultCountry="US"
            placeholder="Enter phone number"
            required
        />
    );
}
```

## Props

### PhoneInput Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | - | The phone number value |
| `onChange` | `(value: string \| undefined) => void` | - | Called when the value changes |
| `onBlur` | `() => void` | - | Called when input loses focus |
| `defaultCountry` | `Country` | `'US'` | Default country for the phone input |
| `disabled` | `boolean` | `false` | Whether the input is disabled |
| `placeholder` | `string` | `'Enter phone number'` | Placeholder text |
| `className` | `string` | - | Additional CSS classes |
| `error` | `boolean` | `false` | Whether to show error state |
| `international` | `boolean` | `true` | Whether to show country selector |
| `countryCallingCodeEditable` | `boolean` | `false` | Whether country code can be edited |

### PhoneInputField Props

Includes all PhoneInput props plus:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | - | Label text for the input |
| `name` | `string` | - | Input name attribute |
| `required` | `boolean` | `false` | Whether the field is required |
| `errorMessage` | `string` | - | Error message to display |
| `helperText` | `string` | - | Helper text to display below input |
| `labelClassName` | `string` | - | Additional CSS classes for label |

## Styling

The component uses Tailwind CSS v4 design tokens:

- Focus ring: `ring-ring/50` with 3px width
- Border: `border-input`
- Error state: `border-destructive`
- Muted background on hover: `bg-muted`

### Customization

You can override styles by passing `className`:

```tsx
<PhoneInput
    className="rounded-lg"
    value={phone}
    onChange={setPhone}
/>
```

## Country Code Formatting

The component automatically formats phone numbers in E.164 format:
- Example: `+1 (555) 123-4567` → `+15551234567`

This format is recommended for storing in databases and APIs.

## Accessibility

The component includes:
- Proper label association
- ARIA attributes for error states
- Keyboard navigation support
- Focus indicators
- Screen reader announcements

## Dark Mode

The component automatically supports dark mode through your theme configuration.