import { FormGroupProps } from "../FormGroup/FormGroup";
import { PhoneBaseInputProps } from "./PhoneBaseInput/PhoneBaseInput";
type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "name">;
export interface PhoneFieldProps extends FormGroupExposedProps, PhoneBaseInputProps {
    /**
     * If a value is set, the field is rendered in its invalid state.
     */
    errorMessage?: string;
}
/**
 * The `<PhoneField>` component is used to enter and validate phone numbers.
 * It includes built-in validation for phone number format and displays appropriate error messages.
 *
 * ### When to use
 * - Collecting phone numbers in contact forms
 * - User profile phone number fields
 * - Any input requiring phone number validation
 *
 * ### When not to use
 * - General text input - use `TextField` instead
 * - International phone with country selector - consider specialized international phone component
 *
 * @example Basic usage
 * ```tsx
 * import { PhoneField } from "@trackunit/react-form-components";
 *
 * const [phone, setPhone] = useState("");
 *
 * <PhoneField
 *   label="Phone Number"
 *   value={phone}
 *   onChange={(e) => setPhone(e.target.value)}
 *   required
 * />
 * ```
 * @example With help text
 * ```tsx
 * import { PhoneField } from "@trackunit/react-form-components";
 *
 * <PhoneField
 *   label="Mobile Phone"
 *   helpText="Include country code for international numbers"
 *   placeholder="+1 555 123 4567"
 * />
 * ```
 * @example With custom error handling
 * ```tsx
 * import { PhoneField } from "@trackunit/react-form-components";
 *
 * <PhoneField
 *   label="Contact Phone"
 *   value={phone}
 *   onChange={(e) => setPhone(e.target.value)}
 *   errorMessage={isPhoneDuplicate ? "This phone is already registered" : undefined}
 * />
 * ```
 */
export declare const PhoneField: {
    ({ label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, "data-testid": dataTestId, name, onBlur, ref, required, ...rest }: PhoneFieldProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
export {};