import { InputType, UpdateValueProps } from './Input.type';
import { StyleProps } from '../../types';
import { PropsWithChildren, RefObject, ReactElement, InputHTMLAttributes } from 'react';

export type FormatInputContextValue = {
    id: string;
    values: string[];
    inputElementCount: number;
    updateValue: ({ index, value, inputRefs, maxLength, focus }: UpdateValueProps) => void;
    inputRefs: RefObject<HTMLInputElement | null>[];
    type: InputType;
    mask: boolean;
    separator: string | ReactElement;
    showCompletedSeparator?: boolean;
    error: boolean;
};
type FormatInputProps = Partial<FormatInputContextValue> & {
    value: string[];
    pattern?: RegExp;
    onValueChange?: (payload: {
        values: string[];
    }) => void;
    onValueComplete?: (payload: {
        values: string[];
    }) => void;
};
export declare const FormatInput: {
    ({ children, id, value, type, mask, separator, showCompletedSeparator, pattern, onValueChange, onValueComplete, ...props }: PropsWithChildren<FormatInputProps & StyleProps>): import("react/jsx-runtime").JSX.Element;
    displayName: string;
    Root: any;
    Input: import('react').ForwardRefExoticComponent<Partial<Pick<import("react").CSSProperties, "display" | "flex" | "flexWrap" | "flexBasis" | "flexGrow" | "flexShrink" | "flexDirection" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "order" | "gap">> & Partial<Pick<import("react").CSSProperties, "gridGap" | "gridRowGap" | "gridColumnGap" | "gridTemplateRows" | "gridTemplateColumns" | "gridTemplateAreas" | "gridArea">> & Partial<Pick<import("react").CSSProperties, "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft">> & Partial<Pick<import("react").CSSProperties, "width" | "height" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight">> & Partial<Pick<import("react").CSSProperties, "color" | "fontSize" | "fontWeight" | "lineHeight" | "textAlign" | "letterSpacing" | "whiteSpace" | "textOverflow">> & Partial<Pick<import("react").CSSProperties, "backgroundColor" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat">> & Partial<Pick<import("react").CSSProperties, "boxShadow" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "borderWidth" | "borderStyle" | "outline">> & Partial<Pick<import("react").CSSProperties, "position" | "top" | "right" | "bottom" | "left">> & Partial<Pick<import("react").CSSProperties, "cursor" | "zIndex" | "opacity" | "overflow" | "overflowX" | "overflowY" | "transition" | "transform">> & InputHTMLAttributes<HTMLInputElement> & {
        index: number;
        readOnly?: boolean | undefined;
        mask?: boolean | undefined;
        maxLength?: number | undefined;
        pattern?: RegExp | undefined;
        validateInput?: ((value: string) => boolean) | undefined;
    } & import("react").RefAttributes<HTMLInputElement>>;
    Label: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
    TextCounter: ({ index, inputRef: propInputRef, ...props }: PropsWithChildren<{
        index: number;
        inputRef?: RefObject<HTMLInputElement | null>;
    } & StyleProps>) => import("react/jsx-runtime").JSX.Element;
    Control: ({ children, justifyContent, gap, backgroundColor, borderRadius, ...props }: PropsWithChildren<StyleProps>) => import("react/jsx-runtime").JSX.Element;
};
export {};