import { type ViewStyle, type TextStyle } from "react-native";
import { type ColorTokens } from "../../style/index.js";
import { type InputSkin, type FieldState, type Size } from "../../atoms/input/input.styles.js";
import { type SelectSkin } from "../../atoms/select/select.styles.js";
export type { Size };
export interface PhoneInputSkin {
    /** The platform's Input skin: the box, the value type, the label, dims, feedback. */
    field: InputSkin;
    /** The platform's Select skin: the country list's panel, rows, and selection mark. */
    menu: SelectSkin;
    /** The country segment: the pressable flag (or code) + caret cluster at the start of the box. */
    country: (t: ColorTokens, state: FieldState, size: Size) => ViewStyle;
    /**
     * When set, the segment names the country by its ISO code in this type instead of its
     * flag (the web hand-off's chip).
     */
    code?: (t: ColorTokens) => TextStyle;
    /** When set, the caret is the Icon chevron at this size, in the caret's ink, instead of `caretGlyph`. */
    caretIcon?: number;
    /** The face of the dial code and the number, when it is not the field's own (the web's mono). */
    numberFace?: TextStyle;
    /** The flag glyph's type per size. */
    flag: (size: Size) => TextStyle;
    /** The caret next to the flag; `open` lets a skin tint it while the list shows. */
    caret: (t: ColorTokens, open: boolean) => TextStyle;
    /** The caret character. */
    caretGlyph: string;
    /** The inline dial code before the number (its inset from the segment's divider). */
    dial: (t: ColorTokens) => TextStyle;
    /** The number's inset after the dial code. */
    numberGap: number;
    /** The row's trailing dial-code column, applied over the list row's type. */
    rowDial: (t: ColorTokens) => TextStyle;
    /** The country row's own anatomy where it differs from the Select row it is: the gap
     *  between the row's parts and the flag's type. Without it the row is the Select row's. */
    row?: {
        gap: number;
        flag: TextStyle;
    };
}
export declare const webSkin: PhoneInputSkin;
export declare const iosSkin: PhoneInputSkin;
export declare const androidSkin: PhoneInputSkin;
//# sourceMappingURL=phone-input.styles.d.ts.map