aio-input/index.d.ts

generate all input types in react j

import { type FC, type ReactNode } from 'react';
import { type I_dateObject } from 'aio-date';
import './index.css';
declare const AIOInput: FC<I_AIOInput>;
export default AIOInput;
export type I_AIOInput = AI_isRange & AI_isTree & AI_isDate & {
    after?: ReactNode;
    before?: ReactNode;
    attrs?: any;
    className?: string;
    style?: any;
    disabled?: boolean;
    rtl?: boolean;
    imageAttrs?: any;
    justify?: boolean;
    value?: any;
    onChange?: (newValue: any, p?: any) => Promise<any> | any;
    deSelect?: boolean;
    onSubmit?: (newValue: any, p?: any) => Promise<any> | any;
    placeholder?: ReactNode;
    text?: ReactNode;
    subtext?: ReactNode;
    type: AI_type;
    validations?: (any[]) | ((v: any) => string | undefined);
    checkIcon?: ReactNode[];
    listOptions?: {
        decay?: number;
        stop?: number;
        count?: number;
        move?: any;
        editable?: boolean;
    };
    onClick?: (e: Event) => void;
    preview?: boolean;
    tagSearch?: string;
    hideTags?: boolean;
    isSuggestion?: boolean;
    fetchSuggestions?: (search: string) => Promise<any[]>;
    maskPattern?: {
        type: 'text' | 'number' | 'select';
        length: number;
        options?: 'fa-plate' | string[];
        html?: ReactNode;
        def?: string;
        after?: ReactNode;
        placeholder?: string;
        disabled?: boolean;
        attrs?: any;
        style?: any;
        className?: string;
    }[];
    optionsPlaceholder?: ReactNode;
    switchOptions?: {
        textOn?: ReactNode;
        textOff?: ReactNode;
        textButton?: ReactNode;
        colorOn?: string;
        bgOn?: string;
        colorOff?: string;
        bgOff?: string;
        size?: number;
        groove?: boolean;
        width?: number;
        attrs?: any;
    };
    caret?: boolean | ReactNode;
    popover?: {
        body?: ReactNode;
        fitHorizontal?: boolean;
        backdropAttrs?: any;
        modalAttrs?: any;
        headerAttrs?: any;
        bodyAttrs?: any;
        footerAttrs?: any;
        footer?: any;
        position?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'fullscreen';
        limitTo?: string;
        header?: {
            html?: ((p: {
                removeModal: () => void;
                state: any;
                setState: any;
            }) => ReactNode);
            title?: string;
            subtitle?: string;
            before?: ReactNode;
            after?: ReactNode;
            onClose?: boolean | ((p: {
                state: any;
                setState: (state: any) => void;
            }) => void);
        };
    };
    open?: boolean;
    blurChange?: boolean;
    filter?: string[];
    inputAttrs?: any;
    swip?: number;
    spin?: boolean;
    autoHighlight?: boolean;
    delay?: number;
    voice?: 'en' | 'fa';
    multiple?: boolean;
    maxLength?: number;
    onSwap?: true | ((newOptions: any[], fromIndex: number, toIndex: number) => void);
    optionsWrap?: boolean;
    option?: AI_optionProp;
    options?: any[];
    search?: string;
    debugKey?: string;
};
export type AI_props<T extends keyof I_AIOInput> = NonNullable<I_AIOInput[T]>;
export type AI_optionProp = {
    [key in keyof AI_optionDetail]?: (optionOrg: any, optionDetail: AI_optionDetail) => any;
};
export type AI_optionDetails = {
    list: AI_optionDetail[];
    dic: {
        [key: string]: AI_optionDetail;
    };
};
export type AI_type = 'text' | 'number' | 'textarea' | 'password' | 'select' | 'tree' | 'spinner' | 'slider' | 'tags' | 'toggleButton' | 'button' | 'date' | 'color' | 'radio' | 'tabs' | 'list' | 'image' | 'file' | 'checkbox' | 'time' | 'buttons' | 'range' | 'panels' | 'mask' | 'multiSelect' | 'multiDate' | 'multiTime' | 'multiButtons' | 'multiCheckbox' | 'multiImage' | 'multiSlider' | 'multiSpinner' | 'multiPanels' | 'multiFile';
export type AI_date_trans = 'Today' | 'Clear' | 'Today' | 'This Month' | 'Select Year';
type AI_types = {
    isDate: boolean;
    isMultiple: boolean;
    isInput: boolean;
    isDropdown: boolean;
    hasOption: boolean;
    ai_height: boolean;
    hasTags: boolean;
    isRootOptions: boolean;
    hasPlaceholder: boolean;
    hasKeyboard: boolean;
    hasText: boolean;
    hasSearch: boolean;
    hasWrap: boolean;
    hasInlineDeSelect: boolean;
};
export type AI_Popover_props = {
    getRootProps: () => I_AIOInput;
    id: string;
    toggle: (popover: any) => void;
    types: AI_types;
};
type AI_isDate = Omit<I_Calendar, 'type' | 'onChange' | 'value'>;
type AI_isRange = Omit<I_Range, 'type' | 'onChange'>;
type AI_isTree = Omit<AI_Tree, 'onChange' | 'type' | 'value'>;
export type AI<AI_type, T> = Omit<I_AIOInput, 'onChange' | 'type'> & {
    onChange?: AI_onChange<AI_type, T>;
};
type AI_onChange<AI_type, T> = AI_type extends 'toggleButton' ? (v: any) => void : AI_type extends 'text' ? (v: string, option?: any) => void : AI_type extends 'number' ? (v: number | undefined) => void : AI_type extends 'textarea' ? (v: string) => void : AI_type extends 'mask' ? (text: string, values: string[]) => void : AI_type extends 'password' ? (v: string) => void : AI_type extends 'color' ? (v: string) => void : AI_type extends 'select' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'multiSelect' ? (v: T[], optionDetail: AI_optionDetail) => void : AI_type extends 'radio' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'multiCheckbox' ? (v: T[], optionDetail: AI_optionDetail) => void : AI_type extends 'tabs' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'buttons' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'multiButtons' ? (v: T[], optionDetail: AI_optionDetail) => void : AI_type extends 'tags' ? (v: T[]) => void : AI_type extends 'tree' ? (v: T[]) => void : AI_type extends 'image' ? (url: any, file: any) => void : AI_type extends 'multiImage' ? (urls: string[], files: any[]) => void : AI_type extends 'file' ? (newFile: File | undefined) => void : AI_type extends 'multiFile' ? (newFiles: (File | {
    url: string;
    size: number;
    name: string;
})[]) => void : AI_type extends 'checkbox' ? (v: boolean) => void : AI_type extends 'date' ? (newDate: T, dateDetail: AI_dateDetail) => void : AI_type extends 'multiDate' ? (newDates: T[], dateDetails: AI_dateDetail[]) => void : AI_type extends 'time' ? (time: T, dateDetail: AI_dateDetail) => void : AI_type extends 'multiTime' ? (times: T[], dateDetails: AI_dateDetail[]) => void : AI_type extends 'slider' ? (newValue: number) => void : AI_type extends 'multiSlider' ? (newValues: number[]) => void : AI_type extends 'spinner' ? (newValue: number) => void : AI_type extends 'multiSpinner' ? (newValues: number[]) => void : AI_type extends 'panels' ? (newValue: T) => void : AI_type extends 'multiPanels' ? (newValues: T[]) => void : AI_type extends 'list' ? (v: T, optionDetail: AI_optionDetail) => void : never;
export declare const AIMask: FC<AI<'mask', any>>;
export declare const AIText: FC<AI<'text', any>>;
export declare const AINumber: FC<AI<'number', any>>;
export declare const AITextarea: FC<AI<'textarea', any>>;
export declare const AIPassword: FC<AI<'password', any>>;
export declare const AIColor: FC<AI<'color', any>>;
export declare const AIToggleButton: FC<AI<'toggleButton', any>>;
export declare const AISelect: FC<AI<'select', any>>;
export declare const AIMultiSelect: FC<AI<'multiSelect', any>>;
export declare const AIRadio: FC<AI<'radio', any>>;
export declare const AIMultiCheckbox: FC<AI<'multiCheckbox', any>>;
export declare const AITabs: FC<AI<'tabs', any>>;
export declare const AIButtons: FC<AI<'buttons', any>>;
export declare const AIMultiButtons: FC<AI<'multiButtons', any>>;
export declare const AITags: FC<AI<'tags', any>>;
export declare const AITree: FC<AI<'tree', any>>;
export declare const AIImage: FC<AI<'image', any>>;
export declare const AIMultiImage: FC<AI<'multiImage', any>>;
export declare const AIFile: FC<AI<'file', any>>;
export declare const AIMultiFile: FC<AI<'multiFile', any>>;
export declare const AICheckbox: FC<AI<'checkbox', boolean>>;
export declare const AIDate: FC<AI<'date', any>>;
export declare const AIMultiDate: FC<AI<'multiDate', any>>;
export declare const AITime: FC<AI<'time', any>>;
export declare const AIMultiTime: FC<AI<'multiTime', any>>;
export declare const AIPanels: FC<AI<'panels', any>>;
export declare const AIMultiPanels: FC<AI<'multiPanels', any>>;
export declare const AIList: FC<AI<'list', any>>;
export declare const AISlider: FC<AI<'slider', number>>;
export declare const AIMultiSlider: FC<AI<'multiSlider', number>>;
export declare const AISpinner: FC<AI<'spinner', number>>;
export declare const AIMultiSpinner: FC<AI<'multiSpinner', number>>;
export declare const CheckIcon: FC<{
    checkIcon?: ReactNode[];
    checked?: boolean;
    round?: boolean;
}>;
export type I_formInput<T> = I_AIOInput & {
    tag?: string | true;
    required?: boolean;
    label?: ReactNode;
    field: I_formField<T>;
    validation?: string;
};
export type I_useFormProps<T> = {
    data: T;
    inlineLabel?: boolean;
    onSubmit?: (data: T) => void;
    onChange: (data: T, p?: {
        field: I_formField<T>;
        value: any;
        disabled: boolean;
    }) => void;
    fa?: boolean;
    labelAttrs?: any;
    getLayout?: (context: I_formContext<T>) => I_formNode<T>;
    debug?: boolean;
    showErrors?: boolean;
    option?: {
        [key in keyof I_formInput<T>]?: (p: {
            field: I_formField<T>;
            data: T;
        }) => any;
    };
    validations?: {
        [name: string]: (p: {
            data: T;
            field: I_formField<T>;
        }) => string | undefined;
    };
};
export type I_formField<T> = NestedKeys<T> | 'none';
type NestedKeys<T> = {
    [K in keyof T]: T[K] extends object ? `${K & string}` | `${K & string}.${NestedKeys<T[K]>}` : `${K & string}`;
}[keyof T];
type I_formTag = 'fieldset' | 'section' | 'div' | 'p' | 'form';
export type I_formNode<T> = {
    v?: I_formNode<T>[];
    h?: I_formNode<T>[];
    html?: ReactNode;
    input?: I_formInput<T>;
    attrs?: any;
    className?: string;
    style?: any;
    show?: boolean;
    flex?: number;
    size?: number;
    scroll?: boolean;
    tag?: I_formTag;
    legend?: ReactNode;
    id?: string;
    isStatic?: boolean;
    align?: 'v' | 'h' | 'vh' | 'hv';
    hide_xs?: boolean;
    hide_sm?: boolean;
    hide_md?: boolean;
    hide_lg?: boolean;
    show_xs?: boolean;
    show_sm?: boolean;
    show_md?: boolean;
    show_lg?: boolean;
};
export type I_formContext<T> = {
    changeByInput: (field: I_formInput<T>, value: any, error?: string) => void;
    disabled: boolean;
    rootProps: I_useFormProps<T>;
    getValueByInput: (input: I_formInput<T>) => any;
    nodeHook: I_nodeHook;
    errorHook: ReturnType<typeof useError<T>>;
    data: T;
    changeData: (v: T) => void;
    getInput: (input: I_formInput<T>) => I_formInput<T>;
};
export declare const useForm: <T extends Record<string, any>>(p: I_useFormProps<T>) => {
    renderLayout: import("react/jsx-runtime").JSX.Element;
    errorsList: string[];
    errorsDic: { [key in I_formField<T>]?: string; };
    renderTags: (disabled?: boolean) => import("react/jsx-runtime").JSX.Element;
    getChanges: () => any[];
    isDisabled: () => boolean;
    disabled: boolean;
};
declare const useError: <T>(p: {
    getData: () => T;
    rootProps: I_useFormProps<T>;
}) => {
    setErrorByField: (field: any, error: string | undefined) => void;
    getErrorByInput: (input: I_formInput<T>, value: any) => string | undefined;
    getErrorsList: () => string[];
    resetErrors: () => {};
    errorsDic: { [key in I_formField<T>]?: string; };
    errorsList: string[];
};
type I_nodeHook = {
    getAttrs: (p: {
        node: I_formNode<any>;
        isRoot: boolean;
        parentNode?: I_formNode<any>;
    }) => any;
};
export declare const AIFormInput: FC<{
    label?: ReactNode;
    inlineLabel?: boolean;
    labelAttrs?: any;
    input: ReactNode;
    attrs?: any;
    className?: string;
    style?: any;
    error?: string;
    validation?: string;
    id?: string;
    before?: ReactNode;
    after?: ReactNode;
    subtext?: string;
    required?: boolean;
    value?: any;
    fa?: boolean;
}>;
export declare const Panels: FC;
type I_JoyStick_data = {
    length: number;
    angle: number;
    x: number;
    y: number;
};
export declare const JoyStick: FC<{
    x?: number;
    y?: number;
    angle?: number;
    length?: number;
    scale?: number;
    size: number;
    onChange: (v: I_JoyStick_data) => void;
    centerOriented?: boolean;
}>;
type I_ScannerButton = {
    fa?: boolean;
    reset?: boolean;
    close?: boolean;
    fps?: number;
    onScan: (v: any) => Promise<boolean>;
    value?: any;
    attrs?: any;
    text?: ReactNode;
};
export declare const ScannerButton: FC<I_ScannerButton>;
type I_treeRowDetails = {
    level: number;
    index: number;
    isLastChild: boolean;
    isFirstChild: boolean;
    parentDetails?: I_treeRowDetails;
    value: any;
    row: any;
    option: AI_optionDetail;
};
export type AI_Tree = {
    size?: number;
    value: any[];
    actions?: ({
        [key in keyof AI_optionDetail]?: any;
    }[]) | ((row: any, parent: any) => {
        [key in keyof AI_optionDetail]?: any;
    }[]);
    addText?: ReactNode | ((value: any) => ReactNode);
    indent?: number;
    onAdd?: {
        [key: string]: any;
    } | ((parentDetails?: I_treeRowDetails) => Promise<boolean | void | undefined>);
    onRemove?: true | ((p: {
        row: any;
        action?: Function;
        rowIndex?: number;
        parent?: any;
    }) => Promise<boolean | void>);
    onToggle?: (openDic: {
        [id: string]: boolean;
    }) => void;
    removeText?: string;
    setChilds?: (rowDetails: I_treeRowDetails, childs: undefined | any[]) => void;
    onChange?: (v: any) => void;
    option?: AI_optionProp;
    attrs?: any;
    className?: string;
    rtl?: boolean;
    style?: any;
};
export type AI_RangeContext = {
    isValueDisabled: (value: number) => boolean;
    rootProps: I_Range_default;
    mainDom: any;
    cls: any;
    rangeHook: ReturnType<typeof useRange>;
};
type AI_sbp = (size: number, half?: boolean) => number;
type AI_rbs = (range: I_rangeConfig) => {
    thickness: number;
    color: string;
    roundCap: boolean;
    offset: number;
    className?: string;
    from: number;
    to: number;
};
export type I_rangeConfig = {
    thickness: number;
    offset: number;
    color: string;
    roundCap?: boolean;
    full?: boolean;
    className?: string;
    from?: number;
    to?: number;
};
export type AI_labels = AI_label[];
export type AI_label = {
    list?: number[];
    start?: number;
    end?: number;
    step?: number;
    dynamic?: boolean;
    autoHide?: boolean;
    zIndex?: number;
    setting: (value: number, p: {
        angle: number;
        disabled: boolean;
    }) => AI_labelItem;
};
export type AI_labelItem = {
    offset?: number;
    fixAngle?: boolean;
    html?: ReactNode;
};
export type I_Range = {
    value?: any;
    start?: number;
    end?: number;
    max?: number;
    min?: number;
    step?: number;
    onChange?: (v: any) => void;
    multiple?: boolean;
    text?: ReactNode;
    style?: any;
    attrs?: any;
    className?: string;
    disabled?: boolean;
    reverse?: boolean;
    size?: number;
    vertical?: boolean;
    rotate?: number;
    round?: number;
    fill?: false | {
        thickness?: number;
        color?: string;
        className?: string;
        style?: any;
    } | ((index: number) => {
        thickness?: number;
        color?: string;
        className?: string;
        style?: any;
    });
    rangesDisabled?: number[];
    grooveAttrs?: {
        [key: string]: any;
    };
    labels?: AI_labels;
    point?: false | ((p: {
        disabled: boolean;
        angle: number;
        value: number;
        index: number;
    }) => {
        offset?: number;
        html?: ReactNode;
        attrs?: any;
    });
    ranges?: {
        thickness: number;
        offset: number;
        color: string;
        roundCap?: boolean;
        full?: boolean;
        className?: string;
        from?: number;
        to?: number;
    }[];
    handle?: (value: number, p: any) => {
        widthPercent?: number;
        heightPercent?: number;
        color?: string;
        offset?: number;
        sharp?: boolean;
        from?: number;
        to?: number;
    };
};
type I_Range_default = I_Range & {
    start: number;
    end: number;
    step: number;
    min: number;
    max: number;
    size: number;
    labels: AI_label[];
    rotate: number;
};
type I_RangeValue = {
    value: number;
    disabled: boolean;
    angle: number;
    index: number;
};
export type I_RangeLabelItem = {
    label: AI_label;
    itemValue: number;
};
declare const useRange: (props: I_Range, getMainDom: () => any, cls: any) => {
    values: number[];
    getValues: (value: any) => number[];
    handleZIndex: (index: number) => void;
    getPoint: (p: I_RangeValue) => import("react/jsx-runtime").JSX.Element;
    getSide: () => "left" | "right" | "bottom" | "top";
    getOffset: () => "left" | "top";
    fixAngle: (angle: number) => number;
    getValueByAngle: (angle: number) => number;
    getArc: (rc: I_rangeConfig) => {
        thickness: number;
        color: string;
        roundCap: boolean;
        full: boolean;
        radius: number;
        className?: string;
        from: number;
        to: number;
    };
    getAngleByValue: (value: number, ang?: number) => number;
    getRectByStr: AI_rbs;
    sbp: AI_sbp;
    getXPByValue: (value: number) => number;
    getValueByXP: (xp: number) => number;
    getXPByX: (x: number) => number;
    getRects: () => import("react/jsx-runtime").JSX.Element;
    getSvg: () => import("react/jsx-runtime").JSX.Element;
    getGroove: () => import("react/jsx-runtime").JSX.Element;
};
export type AI_Image = {
    placeholder?: ReactNode;
    deSelect?: boolean;
    disabled?: boolean;
    rtl?: boolean;
    value?: any;
    multiple?: boolean;
    preview?: boolean;
    inputAttrs?: any;
    imageAttrs?: any;
    attrs?: any;
    style?: any;
    className?: string;
    onChange?: (urls: any, files: any) => void;
};
type AI_dateDetail = {
    dateObject: I_dateObject;
    dateString: string;
    dateString2Digit: string;
    dateArray: number[];
    dateNumber: number;
    isoDate: string;
    dateStrings: string[];
    monthString: string;
    weekDay: string;
    weekDayIndex: number;
    months: string[];
    weekDays: string[];
    value: any;
};
export type I_Calendar = {
    onChange?: (value: any, dateDetails: any) => void;
    onSubmit?: (value: any, dateDetails: any) => void;
    multiple?: boolean;
    value: any;
    type: 'date' | 'time';
    jalali?: boolean;
    maxLength?: number;
    calendarClose?: boolean;
    onClose?: () => void;
    calendarMode?: boolean;
    dateUnit?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'milisecond';
    disabled?: boolean;
    size?: number;
    theme?: string[];
    translate?: (test: string) => string;
    text?: ReactNode;
    pattern?: string;
    dateType?: 'dateNumber' | 'dateString' | 'dateArray' | 'isoDate' | 'dateString2Digit' | 'dateObject';
    dateAttrs?: (p: {
        dateArray: number[];
        isToday: boolean;
        isActive: boolean;
        isFuture: boolean;
        weekDay: number;
    }) => any;
    deSelect?: boolean;
    now?: boolean;
    timeUnit?: I_timeUnit;
    timeStep?: I_timeStep;
};
export type I_timeUnit = {
    [key in ('year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'milisecond')]?: boolean;
};
type I_timeStep = {
    year?: number;
    month?: number;
    day?: number;
    hour?: number;
    minute?: number;
    second?: number;
    milisecond?: number;
};
export type I_MonthCalendar = {
    date: number[];
    onClick?: (date: number[]) => void;
    dateAttrs?: (date: number[]) => any;
};
export declare const MonthCalendar: FC<I_MonthCalendar>;
export type I_list_temp = {
    dom: any;
    activeIndex: number;
    interval: any;
    moved: boolean;
    lastY: number;
    deltaY: number;
    so: {
        y: number;
        top: number;
        newTop?: number;
        limit: {
            top: number;
            bottom: number;
        };
    };
};
export type AI_optionDetail = {
    value: any;
    optionOrg: any;
    rootProps: I_AIOInput;
    index: number;
    isFirstChild: boolean;
    isLastChild: boolean;
    show: any;
    checked?: boolean;
    checkIcon: ReactNode[];
    text: ReactNode;
    subtext: ReactNode;
    after: ReactNode;
    before: ReactNode;
    justify: boolean;
    disabled: boolean;
    attrs: any;
    className: string;
    style: any;
    toggleIcon: false | ReactNode[];
    isOpen: () => boolean;
    toggle: () => void;
    change: (newRow: any) => void;
    level: number;
    tagAttrs: any;
    tagBefore: any;
    tagAfter: any;
    tagText: any;
    tagSubtext: any;
    onClick?: (optionOrg: any, optionDetail: AI_optionDetail) => void;
    close?: boolean;
    active: boolean;
    childs?: any[];
    getOptionDetails?: () => AI_optionDetail[];
    body: ReactNode;
    parentOptions: AI_optionDetail[];
};
export declare const useOptions: () => {
    getOptions: (p: {
        rootProps: I_AIOInput;
        optionOrgs: any[];
        level?: number;
        optionProp: AI_optionProp;
        isOpen?: (value: any) => boolean;
        change?: (row: any, newRow: any) => void;
        toggle?: (p: {
            row: any;
            index: number;
            level: number;
            value: any;
            state?: boolean;
        }) => void;
        parentOptions?: AI_optionDetail[];
        getOptionDetails?: () => AI_optionDetail[];
    }) => AI_optionDetails;
    getOptionProp: (p: {
        key: keyof AI_optionDetail;
        def?: any;
        preventFunction?: boolean;
        optionDetail: AI_optionDetail;
        optionProp: AI_optionProp;
        optionOrg: any;
        type?: any;
    }) => any;
    getDefaultoptionDetail: (p: {
        rootProps: I_AIOInput;
        optionOrg: any;
        index: number;
        def?: {
            value?: any;
            optionOrg?: any;
            rootProps?: any;
            index?: any;
            isFirstChild?: any;
            isLastChild?: any;
            show?: any;
            checked?: any;
            checkIcon?: any;
            text?: any;
            subtext?: any;
            after?: any;
            before?: any;
            justify?: any;
            disabled?: any;
            attrs?: any;
            className?: any;
            style?: any;
            toggleIcon?: any;
            isOpen?: any;
            toggle?: any;
            change?: any;
            level?: any;
            tagAttrs?: any;
            tagBefore?: any;
            tagAfter?: any;
            tagText?: any;
            tagSubtext?: any;
            onClick?: any;
            close?: any;
            active?: any;
            childs?: any;
            getOptionDetails?: any;
            body?: any;
            parentOptions?: any;
        };
    }) => AI_optionDetail;
};
export declare const Signature: React.FC<{
    attrs?: React.HTMLAttributes<HTMLCanvasElement>;
    size?: number;
    onSave?: (file: any) => void;
}>;
export declare const Pattern: FC<{
    size?: number;
    count?: number;
    onSubmit: (v: string) => void;
    pointColor?: string;
    lineColor?: string;
    backgroundColor?: string;
}>;