import React$1, { HTMLAttributes, CSSProperties, PropsWithChildren } from 'react';
import { SliderProps } from 'rc-slider';
export { SliderProps } from 'rc-slider';
import * as rc_table_lib_sugar_ColumnGroup from 'rc-table/lib/sugar/ColumnGroup';
import * as rc_table_lib_sugar_Column from 'rc-table/lib/sugar/Column';
import { DefaultRecordType } from 'rc-table/lib/interface';
import { TableProps as TableProps$1 } from 'rc-table/lib/Table';
import { PaginationProps } from 'rc-pagination';
import { FormikConfig, FormikValues } from 'formik';

interface AlertProps extends HTMLAttributes<HTMLDivElement> {
    dismissible?: boolean;
    important?: boolean;
    mode?: 'success' | 'info' | 'warning' | 'danger';
    customIcon?: React.ReactNode;
}

declare const Alert: ({ dismissible, important, mode, children, className, style, customIcon, ...props }: AlertProps) => React$1.JSX.Element;
declare const AlertTitle: ({ className, children }: {
    className?: string | undefined;
} & {
    children?: React$1.ReactNode;
}) => React$1.JSX.Element;
declare const AlertText: ({ className, children }: {
    className?: string | undefined;
    children: any;
}) => React$1.JSX.Element;
declare const AlertLink: ({ className, children, href }: {
    className?: string | undefined;
    href?: string | undefined;
} & {
    children?: React$1.ReactNode;
}) => React$1.JSX.Element;

type Colors = 'success' | 'danger' | 'muted' | 'blue' | 'azure' | 'indigo' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue-lt' | 'azure-lt' | 'indigo-lt' | 'purple-lt' | 'pink-lt' | 'red-lt' | 'orange-lt' | 'yellow-lt' | 'lime-lt' | 'green-lt' | 'teal-lt' | 'cyan-lt' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'facebook' | 'twitter' | 'linkedin' | 'google' | 'youtube' | 'vimeo' | 'dribbble' | 'github' | 'instagram' | 'pinterest' | 'vk' | 'rss' | 'flickr' | 'bitbucket' | 'tabler';

interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
    shape?: 'circle' | 'default' | Number;
    size?: 'xl' | 'lg' | 'default' | 'md' | 'sm' | 'xs';
    image?: any;
    status?: {
        indicator: 'info' | 'warning' | 'danger' | 'success' | 'grey';
        count?: Number;
    };
    color?: Colors;
    skeleton?: boolean;
    wave?: boolean;
}
interface AvatarListProps extends HTMLAttributes<HTMLDivElement> {
    stacked?: boolean;
}
declare const Avatar: ({ className, style, shape, size, status, image, color, skeleton, wave, children, ...props }: AvatarProps) => React$1.JSX.Element;
declare const AvatarList: ({ stacked, className, children, ...props }: AvatarListProps) => React$1.JSX.Element;

interface BadgesProps {
    className?: string;
    color?: Colors | 'secondary';
    textColor?: Colors;
    mode: 'outline' | 'pill';
    style?: CSSProperties;
    light?: boolean;
}
declare const Badges: ({ className, color, mode, style, textColor, light, children }: React$1.PropsWithChildren<BadgesProps>) => React$1.JSX.Element;

interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
    type?: 'submit' | 'reset' | 'button';
    htmlType?: string;
    mode?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'dark' | 'light';
    disabled?: boolean;
    ghost?: boolean;
    color?: Colors;
    shape?: 'square' | 'pill';
    outline?: boolean;
    loading?: boolean;
    spinner?: boolean;
    dropDown?: boolean;
    size?: 'large' | 'small' | 'default';
    value?: string;
    skeleton?: boolean;
}
interface ButtonListProps extends HTMLAttributes<HTMLDivElement> {
    justify?: 'end' | 'center';
}
declare const Button: ({ type, className, style, mode, disabled, color, ghost, shape, outline, dropDown, spinner, loading, size, children, value, skeleton, ...props }: ButtonProps) => React$1.JSX.Element;
declare const ButtonList: ({ className, children, justify, ...props }: ButtonListProps) => React$1.JSX.Element;
declare const ButtonIcon: (props: ButtonProps) => React$1.JSX.Element;

interface RibbonProps extends HTMLAttributes<HTMLDivElement> {
    position?: 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | 'start' | 'end' | 'top' | 'bottom';
    color?: Colors;
    bookmark?: boolean;
}

interface LineSkeletonProps {
    span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    size?: 'default' | 'xs' | 'lg' | 'sm';
    color?: Colors;
    wave?: boolean;
}
declare const LineSkeleton: ({ span, size, color, wave }: LineSkeletonProps) => React$1.JSX.Element;

interface BoxSkeletonProps {
    ratio: '1x1' | '4x3' | '16x9' | '3x4' | '9x16' | '21x9' | '9x21';
    color?: Colors;
    wave?: boolean;
}
declare const BoxSkeleton: ({ ratio, color, wave }: BoxSkeletonProps) => React$1.JSX.Element;

declare const SkeletonGlow: ({ children }: PropsWithChildren) => React$1.JSX.Element;

interface CardProps extends HTMLAttributes<HTMLDivElement> {
    header?: string;
    subtitle?: string;
    padding?: 'default' | 'sm' | 'md' | 'lg';
    borderless?: boolean;
    hoverable?: boolean;
    image?: string | BoxSkeletonProps;
    statusColor?: Colors;
    statusPosition?: 'top' | 'start' | 'bottom';
    stacked?: boolean;
    hoverEffect?: 'pop' | 'rotate';
    rotate?: 'left' | 'right';
    lightHeader?: boolean;
    active?: boolean;
    inactive?: boolean;
    ribbon?: RibbonProps;
    stamp?: React$1.ReactNode;
    color?: Colors;
    light?: boolean;
    progress?: number;
    imageAlign?: 'left' | 'right' | 'top' | 'bottom';
    footer?: React$1.ReactNode;
    transparentFooter?: boolean;
    imageClasses?: string;
    actions?: React$1.ReactNode[];
}
declare const Card: ({ className, padding, header, borderless, hoverable, children, image, subtitle, statusColor, statusPosition, ribbon, hoverEffect, stacked, rotate, color, light, active, inactive, lightHeader, stamp, imageAlign, progress, transparentFooter, footer, actions, imageClasses, ...props }: CardProps) => React$1.JSX.Element;

/**
 * @TODO Needs more check and fix
 */

interface CarouselProps {
    className?: string;
    style?: CSSProperties;
    items: {
        src: any;
        caption?: {
            title: string;
            subtitle?: string;
        };
    }[];
    defaultIndex?: number;
    indicator?: 'default' | 'dot' | 'thumb';
    indicatorPosition?: 'bottom' | 'end';
    anim?: 'slide' | 'fade';
}
declare const Carousel: ({ className, style, items, defaultIndex, indicator, indicatorPosition, anim, }: CarouselProps) => React$1.JSX.Element;

interface DividerProps extends HTMLAttributes<HTMLDivElement> {
    color?: Colors;
    position?: 'left' | 'right' | 'center';
}
declare const Divider: ({ children, color, position, ...props }: DividerProps) => React$1.JSX.Element;

interface TabItem {
    id: string;
    title: string;
    content?: any;
    dropDown?: any[];
    alignEnd?: boolean;
}
interface TabsProps {
    className?: string;
    style?: CSSProperties;
    card?: boolean;
    fullWidth?: boolean;
    allCaps?: boolean;
    tabs: TabItem[] | 'dropDown' | 'content';
    defaultActiveIndex?: number;
}
declare const Tabs: ({ className, style, tabs, card, fullWidth, allCaps, defaultActiveIndex, }: TabsProps) => React$1.JSX.Element;

interface ModalProps extends HTMLAttributes<HTMLDivElement> {
    title?: string;
    onClose?: () => void;
    footer?: React$1.ReactNode;
    show?: boolean;
    fullWidth?: boolean;
    scollable?: boolean;
    size?: 'lg' | 'sm' | 'default';
    statusColor?: Colors;
}
declare const Modal: ({ className, children, title, footer, show, style, onClose, fullWidth, scollable, statusColor, size, ...props }: ModalProps) => React$1.JSX.Element;
interface AlertModalProps {
    title: string;
    message: string;
    cancelText?: string;
    okText?: string;
    onConfirm?: (ev: any) => void;
    onCancel?: (ev: any) => void;
}
declare const AlertModal: React$1.FC<AlertModalProps & ModalProps>;
declare const SuccessModal: React$1.FC<AlertModalProps & ModalProps>;

interface ProgressProps extends React$1.AllHTMLAttributes<HTMLDivElement> {
    value: number;
    small?: boolean;
    indeterminate?: boolean;
    color?: Colors;
}
declare const Progress: ({ children, value, small, color, indeterminate, className, ...props }: ProgressProps) => React$1.JSX.Element;

interface BreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
    divider?: 'dots' | 'arrows' | 'bullets' | 'default';
}
declare const Breadcrumb: ({ children, divider, ...props }: BreadcrumbProps) => React$1.JSX.Element;
interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
    active?: boolean;
}
declare const BreadcrumbItem: ({ children, active, ...props }: BreadcrumbItemProps) => React$1.JSX.Element;

declare const Slider: React$1.FC<SliderProps>;

interface PageHeaderProps {
    preTitle?: string | React$1.ReactNode;
    title: string;
    action?: React$1.ReactNode;
    subTitle?: React$1.ReactChild;
    avatar?: any;
    bordered?: boolean;
}
declare const PageHeader: React$1.FC<PageHeaderProps & HTMLAttributes<HTMLDivElement>>;

interface StatusProps extends HTMLAttributes<HTMLDivElement> {
    color?: Colors;
    withDot?: boolean;
    lite?: boolean;
}
interface StatusDotProps {
    color?: Colors;
    animatedDot?: boolean;
}
interface StatusIndicatorProps {
    color: Colors;
}
declare const StatusDot: ({ color, animatedDot }: StatusDotProps) => React$1.JSX.Element;
declare const Status: ({ children, className, color, withDot, animatedDot, lite, ...props }: StatusProps & StatusDotProps) => React$1.JSX.Element;
declare const StatusIndicator: ({ color }: StatusIndicatorProps) => React$1.JSX.Element;

type TableProps = TableProps$1<DefaultRecordType> & {
    responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl';
    nowrap?: boolean;
    vcenter?: boolean;
    dataSource: any[];
    paginator?: PaginationProps;
    paginatorPosition?: 'bottomLeft' | 'bottomRight' | 'bottomCenter';
};
declare const Table: {
    ({ className, responsive, vcenter, nowrap, children, dataSource, paginator, paginatorPosition, ...props }: TableProps): React$1.JSX.Element;
    Column: typeof rc_table_lib_sugar_Column.default;
    ColumnGroup: typeof rc_table_lib_sugar_ColumnGroup.default;
};

/**
 * @TODO needs state A and B other variations
 */
interface SwitchIconProps extends HTMLAttributes<HTMLButtonElement> {
    anim?: 'fade' | 'scale' | 'flip' | 'slide-left' | 'slide-down' | 'slide-right';
    stateA: Colors | 'muted';
    stateB: Colors | 'muted';
    iconA: React$1.ReactNode;
    iconB: React$1.ReactNode;
    defaultActive?: boolean;
    onStateChange?: (state: boolean) => void;
}
declare const SwitchIcon: ({ anim, iconA, iconB, stateA, stateB, defaultActive, className, onClick, onStateChange, ...props }: SwitchIconProps) => React$1.JSX.Element;

interface FlexProps {
    inline?: boolean;
    gap?: 0 | 1 | 2 | 3 | 4 | 5;
    stack?: 'horizontal' | 'vertical';
    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    grow?: boolean;
    shrink?: boolean;
    spaceX?: 'default' | 0 | 1 | 2 | 3 | 4 | 5;
    spaceY?: 'default' | 0 | 1 | 2 | 3 | 4 | 5;
    wrap?: 'wrap' | 'wrap-reverse' | 'nowrap';
    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
    alignContent?: 'start' | 'end' | 'center' | 'between' | 'stretch' | 'around';
    alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
}
declare const Flex: React$1.FC<FlexProps & HTMLAttributes<HTMLDivElement>>;
interface FlexItemProps {
    order?: 'first' | 0 | 1 | 2 | 3 | 4 | 5 | 'last';
}
declare const FlexItem: React$1.FC<FlexItemProps & HTMLAttributes<HTMLDivElement>>;

interface RowProps {
    cols?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6;
    inline?: boolean;
    gap?: 0 | 1 | 2 | 3 | 4 | 5;
    direction?: 'row' | 'row-reverse';
    grow?: boolean;
    shrink?: boolean;
    spaceX?: 'default' | 0 | 1 | 2 | 3 | 4 | 5;
    spaceY?: 'default' | 0 | 1 | 2 | 3 | 4 | 5;
    wrap?: 'wrap' | 'wrap-reverse' | 'nowrap';
    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
    alignContent?: 'start' | 'end' | 'center' | 'between' | 'stretch' | 'around';
    alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
}
declare const Row: React$1.FC<RowProps & HTMLAttributes<HTMLDivElement>>;

interface ColProps {
    col?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
}
declare const Col: React$1.FC<ColProps & HTMLAttributes<HTMLDivElement>>;

declare const Grid: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => React$1.JSX.Element;
interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
    gridTitle?: React$1.ReactNode;
}
declare const GridItem: ({ className, children, gridTitle, ...props }: GridItemProps) => React$1.JSX.Element;

declare const Page: ({ children }: PropsWithChildren) => React$1.JSX.Element;

interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
    size?: 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
}
declare const Container: ({ children, size, className, ...props }: PropsWithChildren<ContainerProps>) => React$1.JSX.Element;

interface ToastProps {
    id: string;
    onClose: () => void;
    onEnded?: () => void;
    header?: React$1.ReactNode;
    children?: React$1.ReactNode;
    duration?: 'infinity' | number;
}
declare const useToast: () => (React$1.JSX.Element | ((props: ToastProps & {
    duration?: 'infinity' | number;
}) => void))[];

interface StepsProps extends HTMLAttributes<HTMLDivElement> {
    steps: {
        label?: string;
        tooltip?: string;
    }[];
    color?: Colors;
    withNumber?: boolean;
    defaultActiveStep?: number;
}
declare const Steps: ({ className, steps, color, withNumber, defaultActiveStep, ...props }: StepsProps) => React$1.JSX.Element;

interface TimelineProps {
    items: {
        color?: Colors;
        icon?: React$1.ReactNode;
        time?: string;
        title: string;
        description: string | React$1.ReactNode;
    }[];
    simple?: boolean;
}
declare const Timeline: React$1.FC<TimelineProps & HTMLAttributes<HTMLUListElement>>;

interface TooltipProps {
    placement?: 'top' | 'right' | 'bottom' | 'left';
    tooltip?: string;
}
declare const Tooltip: React$1.FC<TooltipProps & HTMLAttributes<HTMLButtonElement>>;

declare const TablerProvider: ({ children }: PropsWithChildren) => React$1.JSX.Element;

interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    title: React$1.ReactNode;
    subtitle?: React$1.ReactNode;
    action?: React$1.ReactNode;
}
declare const Empty: ({ title, subtitle, action, }: EmptyProps) => React$1.JSX.Element;

declare const TablerForm: ({ children, ...props }: PropsWithChildren<FormikConfig<FormikValues>>) => React$1.JSX.Element;

interface InputProps {
    style?: CSSProperties;
    size?: 'lg' | 'sm';
    id?: string;
    label?: string;
    name?: string;
    type?: string;
    value?: string;
    placeholder?: string;
    className?: string;
    onChange?: ((value: any) => void) | undefined;
    onClick?: (() => void) | undefined;
}

declare const Input: ({ className, style, size, id, label, name, type, value, placeholder, onChange, onClick, ...props }: InputProps) => React$1.JSX.Element;

declare function Loading(): React$1.JSX.Element;

interface MultiSelectProps {
    options: [];
    style: CSSProperties;
    size?: 'lg' | 'sm';
    placeholder: string;
    className: string;
    name: string;
    tokenSeparators: {};
    children: any;
    onChange?: ((value: any) => void) | undefined;
}

declare const MultiSelect: ({ className, style, options, name, size, placeholder, children, onChange }: MultiSelectProps) => React$1.JSX.Element;

interface SelectProps {
    options: [];
    style: CSSProperties;
    size?: 'lg' | 'sm';
    className: string;
    onChange?: ((event: React$1.ChangeEvent<HTMLSelectElement>) => void) | undefined;
}

declare const Select: ({ className, style, options, size, onChange }: SelectProps) => React$1.JSX.Element;

interface SpinnerProps {
    color?: Colors;
    type: 'border' | 'grow' | 'dots';
    size?: 'sm' | 'default';
}
declare const Spinner: ({ color, type, size, }: SpinnerProps) => React$1.JSX.Element;

export { Alert, AlertLink, AlertModal, type AlertModalProps, type AlertProps, AlertText, AlertTitle, Avatar, AvatarList, type AvatarListProps, type AvatarProps, Badges, type BadgesProps, BoxSkeleton, type BoxSkeletonProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, ButtonIcon, ButtonList, type ButtonProps, Card, type CardProps, Carousel, type CarouselProps, Col, type ColProps, Container, type ContainerProps, Divider, type DividerProps, Empty, Flex, FlexItem, type FlexItemProps, type FlexProps, TablerForm as Form, Grid, GridItem, type GridItemProps, Input, LineSkeleton, type LineSkeletonProps, Loading, Modal, type ModalProps, MultiSelect, Page, PageHeader, type PageHeaderProps, Progress, type ProgressProps, Row, type RowProps, Select, SkeletonGlow, Slider, Spinner, Status, StatusDot, type StatusDotProps, StatusIndicator, type StatusIndicatorProps, type StatusProps, Steps, type StepsProps, SuccessModal, SwitchIcon, type SwitchIconProps, Table, type TableProps, TablerProvider, Tabs, type TabsProps, Timeline, type TimelineProps, type ToastProps, Tooltip, type TooltipProps, useToast };