@payfit/unity-components/dist/esm/components/phone-number/PhoneNumberInput.d.ts

import { InputProps as AriaInputProps } from 'react-aria-components/Input';
import { CountryIso2, PhoneInputProps } from 'react-international-phone';
/**
 * Interface for the PhoneNumberInput component props.
 */
export interface PhoneNumberInputProps extends Omit<AriaInputProps, 'value' | 'style' | 'className' | 'onChange' | 'disabled' | 'aria-label'>, Omit<PhoneInputProps, 'countries' | 'preferredCountries' | 'disableDialCodePrefill' | 'inputRefProp'> {
    /**
     * Function called when the phone number value changes.
     * @param phone The formatted phone number.
     */
    onChange?: (phone: string) => void;
    /**
     * ISO2 code of the country selected by default.
     */
    defaultCountry?: CountryIso2;
    /**
     * Whether the input is in an invalid state.
     * @default false
     */
    isInvalid?: boolean;
    /**
     * Whether the input is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Function called when the clear button is pressed.
     */
    onClearButtonPress?: () => void;
    /**
     * Accessibility label for the phone number input.
     */
    'aria-label': string;
    /**
     * Accessibility label for the country search input.
     */
    searchInputAriaLabel: string;
}
/**
 * The `PhoneNumberInput` component displays a styled phone number input field that follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
 * @example
 * ```tsx
 * import { PhoneNumberInput } from '@payfit/unity-components'
 * import { useState } from 'react'
 *
 * function Example() {
 *   const [value, setValue] = useState('')
 *
 *   const handlePhoneChange = (phone: string) => {
 *     setValue(phone)
 *   }
 *
 *   return (
 *     <PhoneNumberInput
 *       aria-label="Phone number"
 *       placeholder="+33 6 12 34 56 78"
 *       value={value}
 *       onChange={handlePhoneChange}
 *       defaultCountry="fr"
 *     />
 *   )
 * }
 * ```
 * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/components-phonenumber--docs
 */
declare const PhoneNumberInput: import('react').ForwardRefExoticComponent<PhoneNumberInputProps & import('react').RefAttributes<HTMLDivElement>>;
export { PhoneNumberInput };