import { ReactNode } from 'react';
import { FieldSize } from '../field-styles';
import { PhoneCountryChoice, RenderCountryFlag } from './types';
export interface StyledPhoneFieldProps {
    /** @figmaProp none — test hook */
    dataTest: string;
    /** @figmaProp Label above the control pair */
    label?: ReactNode;
    countries: readonly PhoneCountryChoice[];
    /** Selected country as an ISO 3166-1 alpha-2 code. */
    country: string;
    onCountryChange: (iso2: string) => void;
    /**
     * National significant number as **digits only** — no dial code, no separators. Grouping is a
     * display concern applied through `formatNationalNumber`, so the value a consumer stores and
     * the value it reads back are the same string.
     */
    value: string;
    /** Receives the typed national number as digits only. */
    onChange: (nationalNumber: string) => void;
    onBlur?: () => void;
    /** @figmaProp State = true→"Error" — reddens the number input only, per Figma. */
    error?: boolean;
    /** @figmaProp Helper text element */
    helperText?: ReactNode;
    reserveHelperText?: boolean;
    /** @figmaProp State = true→"Disabled" */
    disabled?: boolean;
    /** @figmaProp State = true→"Read only" — renders the number as text, not as inputs. */
    readOnly?: boolean;
    /** Pre-formatted international number for the read-only state, e.g. `'+47 48 01 23 45'`. */
    readOnlyText?: string;
    /**
     * Click-to-call target for the read-only state, e.g. `phoneTelHref(value)` from
     * `asma-core-helpers/phone`. Supplied by the consumer because building a `tel:` URI is a phone
     * rule, and this library owns none — without it the number renders as plain text.
     */
    readOnlyHref?: string;
    required?: boolean;
    /** @figmaProp Placeholder of the number input */
    placeholder?: string;
    /**
     * Per-country grouping for the number input, e.g. `formatNationalAsYouType` from
     * `asma-core-helpers/phone`. Injected rather than built in: this library owns no phone rules
     * and no country metadata (ADR-0017 DEC-001).
     */
    formatNationalNumber?: (nationalNumber: string, iso2: string) => string;
    renderFlag?: RenderCountryFlag;
    /** Title of the country picker. Consumer-supplied — this library ships no user-facing copy. */
    selectCountryLabel: string;
    /** Placeholder of the country search box. Consumer-supplied. */
    searchPlaceholder: string;
    id?: string;
    name?: string;
    size?: FieldSize;
    /**
     * Applied to the surface of **both** controls, so the pair cannot drift apart visually —
     * e.g. `'bg-white'` where the field sits on a tinted panel.
     */
    fieldClassName?: string;
    helperTextClassName?: string;
    className?: string;
}
/**
 * @figmaNode y2whTsnmk1J2dy5fwbM7GK#8523-109515
 * Figma "Phone number input": a country trigger (flag + code + chevron) and a separate number
 * input side by side under one label, with a single helper row beneath the pair. The Figma
 * **Property 1** variants (Default/Error/Disabled/Read-only/Menu) map to `error`/`disabled`/
 * `readOnly` and the picker's own open state.
 *
 * Country data, grouping, validation and every user-facing string are supplied by the consumer —
 * this component renders the state it is told about and owns no rules (ADR-0017 DEC-001/REQ-009).
 * Pair it with `asma-core-helpers/phone`, which provides the country list, the formatter and the
 * validator.
 *
 * ponytail: reformatting is applied on every keystroke, so the caret lands at the end of the
 * number after an edit in the middle of it. Phone numbers are short and typed left to right, so
 * this is a deliberate ceiling; the upgrade path is the caret-preserving `formatMaskedValue` in
 * `helpers/inputMask.ts`, which today only handles fixed-width masks.
 */
export declare const StyledPhoneField: ({ dataTest, label, countries, country, onCountryChange, value, onChange, onBlur, error, helperText, reserveHelperText, disabled, readOnly, readOnlyText, readOnlyHref, required, placeholder, formatNationalNumber, renderFlag, selectCountryLabel, searchPlaceholder, id, name, size, fieldClassName, helperTextClassName, className, }: StyledPhoneFieldProps) => JSX.Element;