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('US'); const [isInvalid, setIsInvalid] = useState(false); return ( <> {isInvalid &&

Invalid phone number

} ); } ``` ## 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.