payzli-ui-aryan/dist/index.d.ts

A custom react components library

import React$1, { CSSProperties, Component } from 'react';

interface IAccordion {
    onClick: any;
    title: any;
    open: boolean;
    subtitle?: string;
    headerClass?: string;
    bodyClass?: string;
    class?: string;
    openHeaderClass?: string;
    children: JSX.Element;
    titleComponent?: any;
    flat?: boolean;
    titleClass?: string;
    subtitleClass?: string;
    id?: string;
    ref?: any;
}

type AvatarColor = {
    bg: `#${string}`;
    fg: `#${string}`;
};
interface IAvatar {
    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "custom";
    statusIcon?: "online" | "offline" | "verified" | "company" | "merchant" | "user" | "admin" | "partner" | JSX.Element;
    src?: string;
    src_text: string;
    placeholderIcon?: boolean;
    onClick?: (event: any) => void;
    id: string;
    image_hash: string;
    mime_type: string;
    height?: string;
    width?: string;
    loading?: "lazy" | "eager";
    alt?: string;
    className?: string;
    style?: object;
    tooltip?: string;
    user_type?: string;
    parentClass?: string;
    apiRoutePrefix?: string;
    iconSize?: string;
    statusIconSize?: string;
    statusIconColor?: string;
    ref?: any;
    avatarColor?: AvatarColor;
}

interface IAvatarGroup {
    children?: any;
    className?: string;
    max?: number;
    onClick?: (event: any) => void;
    handleClickMore?: (event: any) => void;
    handleAddNew?: (event: any) => void;
    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
    showAddIcon?: boolean;
    showTooltip?: boolean;
    plusIconSize?: string;
    plusIconWidth?: string;
    plusIconHeight?: string;
    ref?: any;
    iconClass?: string;
}

interface IBreadcrumbItem {
    title: string;
    path: string;
    active?: boolean;
    disabled?: boolean;
    dynamic?: boolean;
    hidden?: boolean;
    customComp?: any;
    ref?: any;
}
interface IBreadcrumbs {
    homeIcon?: any;
    seprator?: any;
    breadcrumbs: IBreadcrumbItem[];
    className?: string;
    homeRoute?: string;
    type?: "primary" | "secondary" | "tertiary";
    ref?: any;
}

interface IButtonProps {
    onClick: any;
    label: string;
    variant: "primary" | "secondary" | "tertiary" | "none";
    className?: string;
    buttonType?: "button" | "text" | "link" | "dropdown";
    size?: "small" | "medium" | "large";
    id?: string;
    name?: string;
    disabled?: boolean;
    iconComp?: React.ReactNode;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    iconPosition?: "left" | "right" | "both";
    onDropdownClick?: any;
    dropdownIcon?: React.ReactNode;
    dropdownClass?: string;
    dropdownStyles?: React.CSSProperties;
    children?: React.ReactNode;
    ref?: any;
}

interface ICardProps {
    children: React.ReactNode;
    className?: string;
    size: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
    ref?: any;
}

interface IHideComponentWrapper {
    hidden?: boolean;
    children: any;
    show?: boolean;
    noPermission?: boolean;
    label?: string;
    ref?: any;
    placeholder?: any;
}

interface IIconButtonProps {
    onClick: (event: any) => void;
    variant: "primary" | "secondary" | "tertiary" | "none";
    className?: string;
    size?: string;
    buttonType?: "button" | "text";
    id?: string;
    disabled?: boolean;
    children: any;
    ref?: any;
}

interface ITabGroup {
    children: React.ReactNode;
    onChange: (event: React.MouseEvent<HTMLDivElement>, newValue: any) => void;
    value: any;
    className?: string;
    type: "primary" | "secondary" | "tertiary" | "underline" | "underline-primary" | "button";
    size: "sm" | "md";
    fullwidth?: boolean;
    ref?: any;
    id?: string;
    isActiveTabClickEnabled?: boolean;
}

interface ITypography {
    children: React.ReactNode;
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
    color?: "primary" | "secondary" | "tertiary" | "quaternary" | "primary_on_brand" | "secondary_on_brand" | "tertiary_brand" | "quaternary_brand" | "white" | "disabled" | "placeholder" | "placeholder_subtle" | "brand_primary" | "brand_secondary" | "brand_tertiary" | "brand_tertiary_alt" | "error_primary" | "warning_primary" | "success_primary" | "muted";
    fontFamily?: "regular" | "medium" | "semibold" | "bold" | "thin";
    type?: "heading" | "text";
    style?: React.CSSProperties;
    className?: string;
    ref?: any;
}

interface ITab {
    label: string;
    value: string;
    activeTab?: string;
    badge?: string | JSX.Element;
    badgeClassName?: string;
    disabled?: boolean;
    ref?: any;
    className?: string;
    children?: React.ReactNode;
}

interface INumberInput {
    id: string;
    value: string | number;
    onChange: any;
    name: string;
    label: string;
    placeholder?: string;
    required: boolean;
    optional?: boolean;
    className: string;
    formClass?: string;
    formSubmitted: boolean;
    disabled?: boolean;
    decimalPlace?: number;
    mask?: string;
    min?: number;
    max?: number;
    icon?: "currency" | "percentage";
    leftIcon?: React.ReactNode;
    prefix?: string;
    suffix?: string;
    onFocus?: any;
    onBlur?: any;
    isError?: (err: {
        [name: string]: string;
    }) => void;
    onContextMenu?: any;
    allowNegative?: boolean;
    skipValidation?: boolean;
    disableWarning?: boolean;
    readOnly?: boolean;
    autoFocus?: boolean;
    minLength?: number;
    maxLength?: number;
    showMaxLength?: boolean;
    tooltip?: string;
    hintText?: string;
    errorMessage?: string;
    transformPhrase?: any;
    UiLanguage?: string;
    ref?: any;
    sectionType?: "left" | "right" | "both" | null;
    sectionLeftIcon?: React.ReactNode;
    sectionRightIcon?: React.ReactNode;
    leftIconClass?: string;
    inputType?: "amount" | "number";
    thousandSeparator?: boolean;
    thousandsGroupStyle?: "thousand" | "lakh" | "wan";
    showDecimalPlaceholder?: boolean;
    fixedDecimalScale?: boolean;
    infoIcon?: React.ReactNode;
    skipValidationWithErrorIntact?: boolean;
    labelClass?: string;
    disableTailingZeros?: boolean;
    isZeroValid?: boolean;
}
interface IAmountInputProps extends INumberInput {
    handleSelectCurrency?: (value: ISelectInput) => void;
    currencyOptions?: ISelectInput[];
    selectedCurrency?: ISelectInput;
    popupParentClass?: string;
    isLoading?: boolean;
    disableCurrency?: boolean;
    hideCurrency?: boolean;
}

interface ITextField {
    type: "text" | "email" | "time";
    id: string;
    value: string | number;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    className: string;
    required?: boolean;
    optional?: boolean;
    formSubmitted: boolean;
    name: string;
    label: string;
    errorMessage?: string;
    formClass?: string;
    leftIcon?: "search" | "email" | React.ReactNode;
    onBlur?: any;
    disabled?: boolean;
    disableAutoFill?: boolean;
    fieldType?: "url";
    autoFocus?: boolean;
    onClick?: any;
    readOnly?: boolean;
    disableValidation?: boolean;
    placeholder?: string;
    labelClass?: string;
    inputMode?: "text" | "search" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
    list?: string;
    pattern?: string;
    minLength?: number;
    maxLength?: number;
    showMaxLength?: boolean;
    tooltip?: string;
    hintText?: string;
    UiLanguage?: string;
    transformPhrase?: any;
    ref?: any;
    sectionType?: "left" | "right" | "both";
    sectionLeftIcon?: React.ReactNode;
    sectionRightIcon?: React.ReactNode;
    isError?: (err: {
        [id: string]: string;
    }) => void;
    hideMaxLength?: boolean;
}
interface ITextareaProps {
    id: string;
    rows: number;
    value: string | number;
    onChange: any;
    className: string;
    required: boolean;
    optional?: boolean;
    formSubmitted: boolean;
    name: string;
    label: string;
    errorMessage?: string;
    formClass?: string;
    maxLength?: number;
    minLength?: number;
    onBlur?: any;
    disabled?: boolean;
    hideMaxLength?: boolean;
    maxLengthPos?: "bottom" | "top" | "bottom_left";
    placeholder?: string;
    customPosClassName?: string;
    transformPhrase?: (phrase: string, lang: string, params: any) => string;
    UiLanguage?: string;
    hintText?: string;
    ref?: any;
    isError?: (err: {
        [id: string]: string;
    }) => void;
}

interface IDropButtonProps extends IButtonProps {
    parentStyle?: object;
    parentClass?: string;
    children: React.ReactNode;
    dropdownIcon?: React.ReactNode;
    hoverTrigger?: boolean;
    iconContainerClass?: string;
    dropdownClass?: string;
    mouseoverTitle?: string;
    disableHoverOut?: boolean;
    position?: "left" | "right" | "bottom" | "bottom-left" | "bottom-right" | "top";
    disableDropBtn?: boolean;
}

interface IMaskInputProps {
    type?: "number" | "tel" | "date";
    mask?: string;
    format?: string;
    id: string;
    value: string | number;
    onChange: any;
    className: string;
    required: boolean;
    optional?: boolean;
    formSubmitted: boolean;
    name: string;
    label: string;
    errorMessage?: string;
    formClass?: string;
    prefix?: string;
    suffix?: string;
    disableCopyPaste?: boolean;
    onFocus?: any;
    onBlur?: any;
    disabled?: boolean;
    placeholder?: string;
    isError?: (err: {
        [name: string]: string;
    }) => void;
    onCopy?: any;
    onCut?: any;
    onContextMenu?: any;
    inputType?: "number-password";
    allowNegative?: boolean;
    skipValidation?: boolean;
    skipValidationWithErrorIntact?: boolean;
    transformPhrase?: (phrase: string, UiLanguage: string, params: any) => string;
    UiLanguage?: string;
    tooltip?: string;
    hintText?: string;
    sectionType?: "left" | "right" | "both" | "none";
    sectionLeftIcon?: React.ReactNode;
    sectionRightIcon?: React.ReactNode;
    leftIconClass?: string;
    inputMode?: "none" | "tel" | "numeric" | "decimal";
    customValidator?: (value: string) => boolean;
    maxLength?: number;
    minLength?: number;
    labelClass?: string;
    tooltipIcon?: React.ReactNode;
    autoComplete?: string;
}
interface IPasswordInputProps {
    inputType?: "password" | "text";
    /** The ID of the input field. */
    id: string;
    name: string;
    /** The value of the input field. */
    value: string;
    /** Callback function triggered when the input value changes. */
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    /** The CSS class for the input field. */
    className?: string;
    /** The CSS class for the form group wrapping the input. */
    formClass?: string;
    /** The label for the input field. */
    label?: string;
    /** Placeholder text for the input field. */
    placeholder?: string;
    /** Error message to display when validation fails. */
    errorMessage?: string;
    /** Hint text to display below the input field. */
    hintText?: string;
    /** Disables copy-paste functionality if set to true. */
    disableCopyPaste?: boolean;
    /** Indicates whether the input is required. */
    required?: boolean;
    /** Indicates whether the form has been submitted. */
    formSubmitted?: boolean;
    /** Callback function triggered when the input gains focus. */
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
    /** Callback function triggered when the input loses focus. */
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    /** Disables the input field if set to true. */
    disabled?: boolean;
    /** Translates phrases based on the UI language. */
    transformPhrase?: (phrase: string, language: string, options?: object) => string;
    /** Language for UI translations. */
    UiLanguage?: string;
}
interface IPhoneInput {
    handleSelectCountryCode: (value: ISelectInput) => void;
    countryCodeOptions: ISelectInput[];
    selectedCountryCode: ISelectInput;
    popupParentClass?: string;
    isLoading?: boolean;
    disableCurrency?: boolean;
    id: string;
    value: string | number;
    onChange: any;
    className: string;
    required: boolean;
    formSubmitted: boolean;
    name: string;
    label: string;
    errorMessage?: string;
    formClass?: string;
    onFocus?: any;
    onBlur?: any;
    disabled?: boolean;
    placeholder?: string;
    isError?: (err: {
        [name: string]: string;
    }) => void;
    skipValidation?: boolean;
    transformPhrase?: (phrase: string, UiLanguage: string, params: any) => string;
    UiLanguage?: string;
    tooltip?: string;
    hintText?: string;
    mask?: string;
}
interface ICardInputProps {
    cardIcon?: React.ReactNode;
    id: string;
    value: string | number;
    onChange: any;
    className: string;
    required: boolean;
    formSubmitted: boolean;
    name: string;
    label: string;
    errorMessage?: string;
    formClass?: string;
    disableCopyPaste?: boolean;
    onFocus?: any;
    onBlur?: any;
    disabled?: boolean;
    placeholder?: string;
    isError?: (err: {
        [name: string]: string;
    }) => void;
    onCopy?: any;
    onCut?: any;
    onContextMenu?: any;
    skipValidation?: boolean;
    transformPhrase?: (phrase: string, UiLanguage: string, params: any) => string;
    UiLanguage?: string;
    tooltip?: string;
    hintText?: string;
    mask?: string;
    format?: string;
}

interface ISelectProps {
    parentStyle?: object;
    parentClass?: string;
    icon?: string;
    children: React.ReactNode;
    ButtonProps?: any;
    iconWidth?: string;
    iconHeight?: string;
    hoverTrigger?: boolean;
    title?: string;
    titleClass?: string;
    target?: React.ReactNode;
    iconContainerClass?: string;
    dropdownClass?: string;
    position?: "left" | "right" | "bottom" | "bottom-left" | "bottom-right" | "top";
    mouseoverTitle?: string;
    disableHoverOut?: boolean;
}
interface IPopupSelect {
    target: React.ReactNode;
    value: any;
    setValue: (value: any) => void;
    selectOptions: ISelectInput[];
    selectStyles?: any;
    popupParentClass?: string;
    popupStyle?: CSSProperties;
    CustomOption?: React.FC<any>;
    ref?: any;
    isLoading?: boolean;
    handlePopupVisible?: (visible: boolean) => void;
    position?: "left" | "right" | "bottom" | "bottom-left" | "bottom-right" | "top" | "inherit";
    isMulti?: boolean;
    type?: "default" | "icon-leading" | "avatar-leading" | "dot-leading";
    iconClass?: string;
    iconContainerClass?: string;
    dropdownClass?: string;
    id?: string;
    formStyle?: CSSProperties;
    formClass?: string;
    label?: string;
    required?: boolean;
}

interface ISelectInput {
    label: any;
    value: any;
    [key: string]: any;
}
interface IEmptyPlaceholderProps {
    UiLanguage: string;
    size: "xs" | "sm" | "md" | "lg";
    hidden: boolean;
    message?: string;
    imgClass?: string;
    className?: string;
    RedIcon?: boolean;
    children?: JSX.Element;
    transformPhrase?: (phrase: string, language: string, values: any) => string;
}

interface IPopoverProps {
    parentStyle?: object;
    parentClass?: string;
    children: React.ReactNode;
    hoverTrigger?: boolean;
    title?: string;
    titleClass?: string;
    target?: React.ReactNode;
    iconContainerClass?: string;
    dropdownClass?: string;
    position?: "left" | "right" | "bottom" | "bottom-left" | "bottom-right" | "top" | "inherit";
    mouseoverTitle?: string;
    disableHoverOut?: boolean;
    handlePopupVisible?: (visible: boolean) => void;
    handleBackDrop?: () => void;
    ref?: any;
    disableClick?: boolean;
    enableCloseOnInsideClick?: boolean;
}
interface IPopoverSelect {
    target: React.ReactNode;
    value: ISelectInput | undefined;
    setValue: (value: ISelectInput) => void;
    selectOptions: ISelectInput[];
    popupParentClass?: string;
    popupStyle?: CSSProperties;
    ref?: any;
    handlePopupVisible?: (visible: boolean) => void;
    position?: "left" | "right" | "bottom" | "bottom-left" | "bottom-right" | "top" | "inherit";
    isMulti?: boolean;
    iconContainerClass?: string;
    dropdownClass?: string;
    formStyle?: CSSProperties;
    formClass?: string;
    label?: string;
    required?: boolean;
    disabled?: boolean;
}

interface IBadgeProps {
    children: string | React.ReactNode;
    size: "xs" | "sm" | "md" | "lg";
    type: "pill-color" | "outline" | "badge-color" | "badge-modern";
    icon: false | null | "dot" | "x-close" | "avatar" | "trailing" | "leading" | "icon-only";
    color: "grey" | "brand" | "error" | "warning" | "success" | "blue_light" | "blue" | "indigo" | "purple" | "pink" | "orange" | "blue_grey" | "grey_blue";
    className?: string;
    style?: React.CSSProperties;
    ref?: React.RefObject<HTMLDivElement>;
    iconComponent?: React.ReactNode;
    iconClass?: string;
    iconPosition?: "left" | "right";
    onClick?: (event: any) => void;
}

interface IDropdownProps {
    label?: string;
    options: ISelectInput[];
    value: any;
    onChange: any;
    name?: string;
    placeholder?: string;
    className?: string;
    required?: boolean;
    formSubmitted?: boolean;
    zIndex?: number;
    type?: "default" | "icon-leading" | "avatar-leading" | "dot-leading";
    iconClass?: string;
    id?: string;
    disabled?: boolean;
    isClearable?: boolean;
    style?: CSSProperties;
    classNamePrefix?: string;
    transformPhrase?: (phrase: string, lang: string, params: any) => string;
    UiLanguage?: string;
    errorMessage?: string;
    hintText?: string;
    formClass?: string;
    tooltip?: string;
    disableValidation?: boolean;
    isMulti?: boolean;
    isLoading?: boolean;
    formStyle?: CSSProperties;
    menuIsOpen?: boolean;
    CustomOption?: ({ data, innerProps }: {
        data: any;
        innerProps: any;
    }) => JSX.Element;
    CustomMenuList?: JSX.Element;
    hideSearchIcon?: boolean;
    filterOption?: any;
    labelClassName?: string;
    onClick?: any;
    filterClass?: string;
    grouping?: boolean;
    addNewSelectOption?: boolean;
    addNewOptionLabel?: string;
    handleAddNewOption?: () => void;
    labelClass?: string;
    listType?: "user" | "partner" | "residual_program" | "residual_hierarchy" | "merchant";
}

interface ITooltip {
    children?: React.ReactNode;
    label: string | React.ReactNode;
    width: "max-content" | "auto" | "fit-content";
    position?: "top-left" | "top-right" | "top-center" | "bottom" | "left" | "right";
    supportingText?: string;
    maxWidth?: string;
    className?: string;
}

interface IRadioProps {
    label?: string | React.ReactNode;
    value: string;
    onClick: (event: React.MouseEvent<HTMLInputElement>) => void;
    name?: string;
    id?: string;
    disabled?: boolean;
    checked?: boolean;
    size?: "sm" | "md";
    children?: React.ReactNode;
    labelClass?: string;
}

interface IDateRangePickerProps {
    onDateChange: (startDate: string, endDate: string) => void;
    format?: string;
    inputFormat?: string;
    isDoubleCalender?: boolean;
    isRangePicker?: boolean;
    className?: string;
    value?: {
        startDate: string;
        endDate: string;
    };
    defaultMonthLeft?: moment.Moment | null;
    defaultMonthRight?: moment.Moment | null;
    defaultMonth?: moment.Moment | null;
    size?: "sm" | "md" | "lg";
    containerClass?: string;
    maxDate?: Date | string;
    minDate?: Date | string;
}

interface ICheckboxProps {
    label?: string | React.ReactNode;
    checked: boolean;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    name?: string;
    id?: string;
    type?: "solid" | "outline";
    disabled?: boolean;
    indeterminate?: boolean;
    size?: "sm" | "md";
    children?: React.ReactNode;
    labelClass?: string;
}

interface IToggleProps {
    onToggle: (checked: boolean) => void;
    checked: boolean;
    size: "xs" | "sm" | "md";
    disabled?: boolean;
}

interface IImageProps {
    src: string;
    height: string;
    width: string;
    loading?: "lazy" | "eager";
    id?: string;
    alt?: string;
    className?: string;
    style?: object;
    onClick?: any;
}

interface IListProps {
    options: string[] | ISelectInput[];
    selectedItem: string | number | ISelectInput | undefined;
    setSelectedItem: (item: string | number | ISelectInput) => void;
    renderer?: (item: string | ISelectInput) => JSX.Element;
    list_container_class?: string;
    list_item_class?: string;
}

interface IModalProps {
    open: boolean;
    handleClose: (modalName: string) => void;
    modalName: string;
    children: React.ReactNode;
    enableBackdrop?: boolean;
    modalStyles?: IModalStyles;
    modal_parent_class?: string;
    modalClass?: string;
}
interface IModalStyles {
    padding?: string;
    width?: string;
    minWidth?: string;
    minHeight?: string;
    maxWidth?: string;
    maxHeight?: string;
    background?: string;
}

interface IModalWrapperProps {
    alignment: "left" | "horizontal" | "center";
    hideCloseButton?: boolean;
    hideFooter?: boolean;
    hideHeader?: boolean;
    featuredIcon?: string | React.ReactNode;
    children: React.ReactNode;
    cancelButtonText?: string;
    submitButtonText?: string;
    handleClose?: () => void;
    handleSubmit?: () => void;
}

interface IDateInputProps {
    id: string;
    value: string;
    onChange: any;
    className: string;
    required: boolean;
    formSubmitted: boolean;
    name: string;
    label?: string;
    formClass?: string;
    maxDate?: string;
    minDate?: string;
    isBirthDay?: boolean;
    isError?: (err: {
        [name: string]: string;
    }) => void;
    onBlur?: (e: any) => void;
    lang?: string;
    clearable?: boolean;
    placeholder?: string;
    format?: string;
    input_format?: string;
    isDoubleCalender?: boolean;
    isRangePicker?: boolean;
    handleCancel?: () => void;
    UiLanguage?: string;
    transformPhrase?: (phrase: string, lang: string, options: any) => string;
    hideFooter?: boolean;
}
interface IDateSelectInput {
    value: string;
    onChange: (event: any) => void;
    id?: string;
    name: string;
    label?: string;
    placeholder?: string;
    inputFormat: string;
    displayFormat?: string;
    className?: string;
    required?: boolean;
    formSubmitted?: boolean | undefined;
    handleSubmit?: (startDate: string) => void;
    handleCancel?: () => void;
    minDate?: string;
    maxDate?: string;
    isBirthDay?: boolean;
    defaultMonth?: moment.Moment | null;
    isError?: (err: {
        [name: string]: string;
    }) => void;
    onBlur?: (e: any) => void;
    onContextMenu?: (e: any) => void;
    onCopy?: (e: any) => void;
    onCut?: (e: any) => void;
    onFocus?: (e: any) => void;
    clearable?: boolean;
    transformPhrase?: (phrase: string, lang: string, options: any) => string;
    UiLanguage?: string;
    disableHeader?: boolean;
    disableFooter?: boolean;
    size?: "lg" | "md" | "sm";
    formClass?: string;
}
interface IDateSelectButtonProps {
    handleCancel?: () => void;
    handleSubmit: (date: string) => void;
    target?: JSX.Element;
    value: string;
    size?: "lg" | "md" | "sm";
    displayFormat?: string;
    inputFormat: string;
    isRangePicker?: boolean;
    defaultMonth?: moment.Moment | null;
    disableHeader?: boolean;
    disableFooter?: boolean;
    maxDate?: Date | string;
    minDate?: Date | string;
}

interface IOtpInputProps {
    numInputs: number;
    onChange: any;
    value: string | number;
    placeholder?: string;
    separator?: JSX.Element;
    containerStyle?: object | string;
    inputStyle?: object | string;
    focusStyle?: object | string;
    isDisabled?: boolean;
    disabledStyle?: object | string;
    hasErrored?: boolean;
    errorStyle?: object | string;
    shouldAutoFocus?: boolean;
    isInputNum?: boolean;
    isInputSecure?: boolean;
    className?: string;
    "data-cy"?: string;
    "data-testid"?: string;
    id?: string;
    name?: string;
}

interface ILinkProps {
    label: string;
    href: string;
    target?: React.HTMLAttributeAnchorTarget | undefined;
    rel?: string;
    onClick?: () => void;
    ref?: any;
    className?: string;
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
    fontFamily?: "regular" | "medium" | "semibold" | "bold" | "thin";
    underline?: boolean;
    type?: "heading" | "text";
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

/**
 * @param title: string;
 * @param icon?: "jsx" | "plus" | "close";
 * @param type: "primary" | "secondary" | "tertiary" | "none";
 * @param size?: "small" | "medium" | "large";
 */
declare const Button: React$1.FC<IButtonProps>;

declare const DropButton: React$1.FC<IDropButtonProps>;

declare const IconButton: React$1.FC<IIconButtonProps>;

declare const HideComponentWrapper: React$1.FC<IHideComponentWrapper>;

/**
 * @description component for breadcrumb
 * @author jagannath
 * @param dynamic: if dynamic: false, then send UiLanguage key
 */
declare const Breadcrumbs: React$1.FC<IBreadcrumbs>;

declare const Accordion: React$1.FC<IAccordion>;

declare const Avatar: React$1.FC<IAvatar>;

declare const AvatarGroup: React$1.FC<IAvatarGroup>;

declare const Card: React$1.FC<ICardProps>;

declare const Typography: React$1.FC<ITypography>;

declare const Tabs: React$1.FC<ITabGroup>;

declare const Tab: React$1.FC<ITab>;

declare const _default: React$1.NamedExoticComponent<ITextField>;

declare const NumberInput: React$1.FC<INumberInput>;

declare const AmountInput: React$1.FC<IAmountInputProps>;

/**
 * @description use this component for making input fields
 * @author jagannath
 * @param mask - "_"
 * @param format = "##-#######"
 */
declare const MaskInput: React$1.FC<IMaskInputProps>;

declare const PhoneNumberInput: React$1.FC<IPhoneInput>;

declare const CardInput: React$1.FC<ICardInputProps>;

declare const Textarea: React$1.FC<ITextareaProps>;

declare const PopupSelect: React$1.FC<IPopupSelect>;

declare const Dropdown: (props: IDropdownProps) => React$1.JSX.Element;

declare const Popover: React$1.FC<IPopoverProps>;

declare const Badge: React$1.FC<IBadgeProps>;

declare const Tooltip: React$1.FC<ITooltip>;

declare const Checkbox: React$1.FC<ICheckboxProps>;

declare const Radio: React$1.FC<IRadioProps>;

declare const DateRangePicker: React$1.FC<IDateRangePickerProps>;

declare const ToggleSwitch: (props: IToggleProps) => React$1.JSX.Element;

declare const Image: React$1.FC<IImageProps>;

interface ITableHeader {
    key: string;
    title: string;
    type: "currency" | "number" | "string" | "action" | "link" | "button" | "time" | "date" | "jsx" | "profile" | "boolean" | "url" | "sticky_button_popup";
    th_class?: string;
    td_class?: string;
    handleClick?: any;
    custom_title?: string;
    renderer?: (item: any, UiLanguage?: string, elementIndex?: number, categoryIndex?: number) => any;
    enable_dynamic_sort?: boolean;
    handleClickShowMore?: any;
    popup_width?: string;
    popup_positon?: "left" | "right";
    first_name?: string;
    last_name?: string;
    image_hash?: string;
    pic_class?: string;
    user_id?: string;
    mime_type?: string;
    total_count?: number;
    decimalPlaces?: number;
    suffix?: string;
    elipsis?: 1 | 2 | 3;
    editable?: boolean;
    hidden?: boolean;
    data_type?: "monetary" | "string" | "number" | "date" | "time" | "datetime";
    popup_button?: any;
    text_class?: string;
    currencyDisplay?: "symbol" | "code" | "name";
    grouping?: boolean;
    minimumIntegerDigits?: number;
    output_date_format?: string;
    input_date_format?: string;
}
interface ITableProps {
    headers: ITableHeader[];
    data: any[];
    page_number: number;
    page_size: number;
    total_count: number;
    sort_value?: ISelectInput;
    table_class?: string;
    isEdit?: boolean;
    head_class?: string;
    tr_class?: string;
    onRowClick?: (item: any) => void;
    column_header_class?: string;
    UiLanguage: string;
    openDrawer?: any;
    disablePagination?: boolean;
    handleEditChange?: (key: string, value: any, index: number) => void;
    transformCurrency?: (amount: number, currency: string, options: any) => string;
    handleDynamicSort?: (th: ITableHeader, value: typeSortValue, data?: any[]) => void;
    handlePagination?: (pageNumber: number, itemsPerPage: number) => void;
    handleClickShowMore?: (title: string, text: string) => void;
    transformPhrase?: (phrase: string, UiLanguage: string, options: any) => string;
    loaderComponent?: React.ReactNode;
    showLoader?: boolean;
    renderCustomPlaceholder?: () => React.ReactNode;
}
type typeSortValue = "ascending" | "descending";

declare const Table: React$1.FC<ITableProps>;

interface IToastr {
    children?: React.ReactNode;
    type: "primary" | "image" | "avatar" | "gray" | "error" | "warning" | "success" | "progress" | "none";
    heading: string;
    supportingText?: string;
    actions: boolean;
    iconColor?: "brand" | "error" | "warning" | "success" | "gray";
    avatar?: string;
    statusIcon?: "online" | "offline" | "verified" | "company" | JSX.Element;
    iconSize?: "sm" | "md" | "lg" | "xl";
    avatarText?: string;
    imageSrc?: string;
    iconSrc?: React.ReactNode;
    handleFirstAction?: () => void;
    handleSecondAction?: () => void;
    onClose: () => void;
}

declare const Toastr: (props: IToastr) => React$1.JSX.Element;

declare const List: React$1.FC<IListProps>;

declare const Modal: React$1.FC<IModalProps>;

declare const ModalWrapper: React$1.FC<IModalWrapperProps>;

/**
 * Description: DateSelectButton component is used to select a date from a calendar popup.
 * inputFormat is used to format the date value passed from the parent component & it will be visible in displayFormat.
 * defaultMonth - by default it will be taken from the value OR props.defaultMonth OR current month
 *
 */
declare const DateSelectButton: React$1.FC<IDateSelectButtonProps>;

declare const DateSelectInput: {
    (props: IDateSelectInput): React$1.JSX.Element;
    displayName: string;
};

interface ISectionProps {
    title: string;
    children: React$1.ReactNode;
    className?: string;
}
declare const Section: {
    (props: ISectionProps): React$1.JSX.Element;
    displayName: string;
};

declare class OtpInput extends Component {
    props: IOtpInputProps;
    static defaultProps: {
        numInputs: number;
        onChange: (otp: any) => void;
        isDisabled: boolean;
        shouldAutoFocus: boolean;
        value: string;
        isInputSecure: boolean;
    };
    state: {
        activeInput: number;
    };
    getOtpValue: () => string[];
    getPlaceholderValue: () => string | undefined;
    handleOtpChange: (otp: any) => void;
    isInputValueValid: (value: any) => boolean;
    focusInput: (input: any) => void;
    focusNextInput: () => void;
    focusPrevInput: () => void;
    changeCodeAtFocus: (value: any) => void;
    handleOnPaste: (e: any) => null | undefined;
    handleOnChange: (e: any) => void;
    handleOnKeyDown: (e: any) => void;
    handleOnInput: (e: any) => void;
    renderInputs: () => React$1.JSX.Element[];
    render(): React$1.JSX.Element;
}

declare const Link: ({ label, href, target, rel, onClick, ref, className, size, fontFamily, type, style, underline, ...props }: ILinkProps) => React$1.JSX.Element;

declare const EmptyPlaceholder: React$1.FC<IEmptyPlaceholderProps>;

declare const PopoverSelect: React$1.FC<IPopoverSelect>;

interface IDateRangeInput {
    id?: string;
    style?: React.CSSProperties;
    dates: string[];
    handleChange: (date: string[]) => void;
    inputFormat?: string;
    displayFormat?: string;
    UiLanguage: string;
    hideFooter?: boolean;
    hideHeader?: boolean;
    target?: JSX.Element;
    label?: string;
    required?: boolean;
    buttonFormClass?: string;
}

declare const DateRangeInput: React$1.FC<IDateRangeInput>;

export { Accordion, AmountInput, Avatar, AvatarGroup, Badge, Breadcrumbs, Button, Card, CardInput, Checkbox, DateRangeInput, DateRangePicker, DateSelectButton, DateSelectInput, DropButton, Dropdown, EmptyPlaceholder, HideComponentWrapper, type IAccordion, type IAmountInputProps, type IAvatar, type IAvatarGroup, type IBadgeProps, type IBreadcrumbItem, type IBreadcrumbs, type IButtonProps, type ICardInputProps, type ICardProps, type ICheckboxProps, type IDateInputProps, type IDateRangePickerProps, type IDateSelectButtonProps, type IDateSelectInput, type IDropButtonProps, type IDropdownProps, type IEmptyPlaceholderProps, type IHideComponentWrapper, type IIconButtonProps, type IImageProps, type ILinkProps, type IListProps, type IMaskInputProps, type IModalProps, type IModalStyles, type IModalWrapperProps, type INumberInput, type IOtpInputProps, type IPasswordInputProps, type IPhoneInput, type IPopoverProps, type IPopoverSelect, type IPopupSelect, type IRadioProps, type ISelectInput, type ISelectProps, type ITab, type ITabGroup, type ITextField, type ITextareaProps, type IToggleProps, type ITooltip, type ITypography, IconButton, Image, _default as InputField, Link, List, MaskInput, Modal, ModalWrapper, NumberInput, OtpInput, PhoneNumberInput, Popover, PopoverSelect as PopoverList, PopupSelect, Radio, Section, Tab, Table, Tabs, Textarea, Toastr, ToggleSwitch, Tooltip, Typography };