/**
 * Copyright 2024, SumUp Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { type ComponentType, type InputHTMLAttributes, type ForwardedRef } from 'react';
import { type SelectProps } from '../Select/index.js';
import { type InputProps } from '../Input/index.js';
import { type FieldSize } from '../Field/index.js';
import { type CountryCodeOption } from './PhoneNumberInputService.js';
export interface PhoneNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /**
     * The normalized phone number in the [E.164 format](https://en.wikipedia.org/wiki/E.164).
     *
     * @example '+17024181234'
     */
    value?: string;
    /**
     * The default normalized phone number in the [E.164 format](https://en.wikipedia.org/wiki/E.164).
     *
     * @example '+17024181234'
     */
    defaultValue?: string;
    /**
     * A clear and concise description of the input purpose.
     */
    label: string;
    /**
     * Label to indicate that the input is optional. Only displayed when the
     * `required` prop is falsy.
     */
    optionalLabel?: string;
    /**
     * Triggers error styles on the component. Important for accessibility.
     */
    invalid?: boolean;
    /**
     * Triggers warning styles on the component.
     */
    hasWarning?: boolean;
    /**
     * Enables valid styles on the component.
     */
    showValid?: boolean;
    /**
     * Triggers readonly styles on the component.
     */
    readOnly?: boolean;
    /**
     * Makes the input group required.
     */
    required?: boolean;
    /**
     * Visually hide the label. This should only be used in rare cases and only
     * if the purpose of the field can be inferred from other context.
     */
    hideLabel?: boolean;
    /**
     * An information, warning or error message, displayed below the input.
     */
    validationHint?: string;
    /**
     * One or more Unicode BCP 47 locale identifiers, e.g. `de-DE` or
     * `['GB', 'en-US']`. Used to localize the country names and determine the
     * preselected country code. Defaults to `navigator.languages`.
     */
    locale?: string | string[];
    /**
     * Choose from 2 sizes.
     * @default m
     */
    size?: FieldSize;
    /**
     * Country code selector details.
     */
    countryCode: {
        /**
         * Visually hidden label for visually-impaired users.
         */
        label: string;
        /**
         * List of country calling codes to be rendered inside the selector
         */
        options: CountryCodeOption[];
        /**
         * Triggers error styles on the component. Important for accessibility.
         */
        invalid?: boolean;
        /**
         * Initial country code.
         */
        defaultValue?: string;
        /**
         * Triggers readonly styles on the component.
         */
        readonly?: boolean;
        /**
         * Callback when the country code changes.
         */
        onChange?: SelectProps['onChange'];
        /**
         * The ref to the country code selector HTML DOM element.
         */
        ref?: ForwardedRef<HTMLSelectElement | HTMLInputElement>;
        /**
         * Render prop that should render a left-aligned overlay icon or element.
         * Receives a className prop.
         */
        renderPrefix?: ComponentType<{
            value?: string | number;
            className?: string;
        }>;
    };
    /**
     * Subscriber number input details.
     */
    subscriberNumber: {
        /**
         * Visually hidden label for visually-impaired users.
         */
        label: string;
        /**
         * Placeholder number for the input.
         */
        placeholder?: string;
        /**
         * Initial subscriber number.
         */
        defaultValue?: string;
        /**
         * Triggers error styles on the component. Important for accessibility.
         */
        invalid?: boolean;
        /**
         * Triggers readonly styles on the component.
         */
        readonly?: boolean;
        /**
         * Callback when the subscriber number changes.
         */
        onChange?: InputProps['onChange'];
        /**
         * The ref to the subscriber number input HTML DOM element.
         */
        ref?: ForwardedRef<HTMLInputElement>;
    };
}
/**
 * Provides a straightforward way for users to type their phone number in an
 * accurate, consistent format including the country code and subscriber number.
 */
export declare const PhoneNumberInput: import("react").ForwardRefExoticComponent<PhoneNumberInputProps & import("react").RefAttributes<HTMLInputElement>>;