<!-- source-hash: 1e78827c6bdbb029fe4aeac35f0fdda1 -->
Storybook stories for the `PhoneInput` UI component, demonstrating various states, country configurations, and layout scenarios.

## Key Components

### `PhoneInputControlled`
Internal stateful wrapper that manages `phone`, `country`, and `isInvalid` state, wiring up all `PhoneInput` callbacks and rendering an inline validation warning when the number is invalid.

### Exported Stories

| Story | Description |
|---|---|
| `Default` | US country code, empty value |
| `UnitedKingdom` | Pre-selected GB country code |
| `WithValue` | Pre-filled US number `(555) 123-4567` |
| `Disabled` | Disabled input with a pre-filled value |
| `CustomPlaceholder` | Custom placeholder text `"Enter phone..."` |
| `NarrowContainer` | 300px container to verify overflow handling |
| `Germany` | Pre-selected DE country code |

## Usage Example

```typescript
// Replicate the controlled pattern from stories in your own component
import { PhoneInput } from '@/components/ui/phone-input';
import { useState } from 'react';
import type { CountryCode } from 'libphonenumber-js';

function MyForm() {
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState<CountryCode>('US');
  const [isInvalid, setIsInvalid] = useState(false);

  return (
    <>
      <PhoneInput
        value={phone}
        countryCode={country}
        onPhoneChange={setPhone}
        onCountryChange={setCountry}
        onValidationChange={setIsInvalid}
      />
      {isInvalid && <p>Invalid phone number</p>}
    </>
  );
}
```

## Notes

- Stories are scoped under the `UI/PhoneInput` Storybook path.
- All stories use `PhoneInputControlled` via the `render` override rather than Storybook's default args rendering, ensuring live state management within the canvas.
- Country codes follow the [`libphonenumber-js`](https://www.npmjs.com/package/libphonenumber-js) `CountryCode` type.