import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ReactNode, HTMLProps, PropsWithChildren, ButtonHTMLAttributes, HTMLAttributes, JSX, ImgHTMLAttributes, ReactElement, ChangeEvent } from 'react';

type TAccordionTogglePosition = 'left' | 'right';
type TAccordionToggleIcon = 'chevron-arrow' | 'plus-minus';
type TAccordionGroupIsOpen = number | number[];
type TAccordionProps = {
    /** Set the Accordion's content class name */
    contentClassName?: string;
    /** Set the Accordion's to be disabled */
    disabled?: boolean;
    /** Set the Accordion's header class name */
    headerClassName?: string;
    /** Set the Accordion's icon right class name */
    iconRightClassName?: string;
    /** Set the Accordion's state to be opened or closed */
    isOpen?: boolean;
    /** Set the Accordion's action when clicked */
    onClick?: (isOpen: boolean) => void;
    /** Set the Accordion's title */
    title: ReactNode;
    /** Set the Accordion's title class name */
    titleClassName?: string;
    /** Set the Accordion's toggle class name */
    toggleClassName?: string;
    /** Set the Accordion's toggle icon */
    toggleIcon?: TAccordionToggleIcon | ReactNode;
    /** Set the Accordion's toggle icon position */
    toggleIconPosition?: TAccordionTogglePosition;
} & Omit<HTMLProps<HTMLDivElement>, 'onClick'>;
type TAccordions = {
    /** Set the Accordion's content */
    content?: ReactNode;
    /** Set the Accordion's action when clicked */
    onClick?: (index: number) => void;
} & Omit<TAccordionProps, 'children' | 'isOpen' | 'onClick' | 'toggleIcon' | 'toggleIconPosition'>;
type TAccordionGroupProps = {
    /**
     *  Configure each `Accordion` in `AccordionGroup`.
     *  Each `Accordion` has same props as the singular `Accordion` component
     *  excluding `children` that is replaced with `content`.
     *  props like `isOpen`, `toggleIcon`, `toggleIconPosition` are also exclude and all of them are configured via `AccordionGroup`'s props
     */
    accordions: TAccordions[];
    /** Set which Accordion is opened */
    isOpen?: TAccordionGroupIsOpen;
    /** Set multiple Accordions can be opened at once. */
    multiple?: boolean;
    /** Set the Accordion's action when clicked */
    onClick?: (index: TAccordionGroupIsOpen) => void;
    /** Set all `Accordions`' toggle icon */
    toggleIcon?: TAccordionToggleIcon | ReactNode;
    /** Set all `Accordions`' toggle icon position */
    toggleIconPosition?: TAccordionTogglePosition;
} & Omit<HTMLProps<HTMLDivElement>, 'children' | 'onClick'>;

declare const Accordion: (props: TAccordionProps) => react_jsx_runtime.JSX.Element;

declare const AccordionGroup: (props: TAccordionGroupProps) => react_jsx_runtime.JSX.Element;

type TAlertColor = 'success' | 'warning' | 'error' | 'information';
type TAlertProps = {
    /** Set the Alert's color. Will affect the Alert's background, border, and default icon background colors */
    color?: TAlertColor;
    /** Set the Alert's description */
    description?: string;
    /** Set the Alert's description class name */
    descriptionClassName?: string;
    /** Set custom left icon for the Alert. If it's set it will override the Alert's default Icon */
    leftIcon?: ReactNode;
    /** Set the Alert's left icon class name */
    leftIconClassName?: string;
    /** Hide the Alert left icon. If `noLeftIcon` is set as `true` and you have custom icon via `leftIcon` prop then it will be hidden too */
    noLeftIcon?: boolean;
    /** Set custom right icon for the Alert */
    rightIcon?: ReactNode;
    /** Set the Alert's right icon class name */
    rightIconClassName?: string;
    /** Set the Alert's title */
    title?: string;
    /** Set the Alert's title class name */
    titleClassName?: string;
} & HTMLProps<HTMLDivElement>;

declare const Alert: (props: TAlertProps) => react_jsx_runtime.JSX.Element;

type TAnchorSize = 'sm' | 'md' | 'lg';
type TAnchorProps = {
    /** Set the Anchor to be disabled */
    disabled?: boolean;
    /** Set the Anchor's size */
    size?: TAnchorSize;
} & Omit<HTMLProps<HTMLAnchorElement>, 'size'>;

declare const Anchor: (props: TAnchorProps) => react_jsx_runtime.JSX.Element;

type TAvatarSize = 'sm' | 'md' | 'lg';
type TAvatarProps = PropsWithChildren<{
    /** Set the alt text for the Avatar's image */
    alt?: string;
    /** Set the className for the Avatar's image */
    imageClassName?: string;
    /** Set the size of the Avatar */
    size?: TAvatarSize;
    /** Set the src for the Avatar's image */
    src?: string;
}> & Omit<HTMLProps<HTMLDivElement>, 'size'>;

declare const Avatar: (props: TAvatarProps) => react_jsx_runtime.JSX.Element;

type TBadgeColor = 'primary' | 'secondary' | 'tertiary' | 'information' | 'success' | 'warning' | 'error';
type TBadgeSize = 'sm' | 'md' | 'lg';
type TBadgeProps = {
    /** Set the Badge's color. It will affect the Badge's background-color */
    color?: TBadgeColor;
    /** Set the Badge's label */
    label?: string | number;
    /** Set the Badge's size */
    size?: TBadgeSize;
} & Omit<HTMLProps<HTMLDivElement>, 'size'>;

declare const Badge: (props: TBadgeProps) => react_jsx_runtime.JSX.Element;

type TBreadcrumbSeparator = 'slash' | 'chevron';
type TBreadcrumbProps = {
    /** Set the Breadcrumb's wrapper classname */
    className?: string;
    /** Set the Breadcrumb's item's classname. The classname will be applied to all items */
    itemClassName?: string;
    /** List of item in Breadcrumb */
    items: ReactNode[];
    /** Separator between items */
    separator?: TBreadcrumbSeparator | ReactNode;
    /** Set the Breadcrumb's separator's classname. The classname will be applied to all separators */
    separatorClassName?: string;
} & Omit<HTMLProps<HTMLDivElement>, 'className'>;

declare const Breadcrumb: (props: TBreadcrumbProps) => react_jsx_runtime.JSX.Element;

type TButtonColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'information';
type TButtonSize = 'sm' | 'md' | 'lg';
type TButtonVariant = 'solid' | 'soft' | 'outline' | 'transparent';
type TLoadingIconPosition = 'left' | 'right';
type TButtonProps = PropsWithChildren<{
    /** Set the Button to have a full width */
    block?: boolean;
    /** Set the Button's color */
    color?: TButtonColor;
    /** Set the Button's disabled state */
    disabled?: boolean;
    /** Set the Button's loading state */
    isLoading?: boolean;
    /** Set the Button's loading icon positing according to the loading text */
    loadingIconPosition?: TLoadingIconPosition;
    /** Set the Button's text on loading state. It will be shown when the `isLoading` is `true` */
    loadingText?: string;
    /** Set the Button's size */
    size?: TButtonSize;
    /** Set the Button's variant */
    variant?: TButtonVariant;
}> & Omit<HTMLProps<HTMLButtonElement>, 'size'> & ButtonHTMLAttributes<HTMLButtonElement>;

declare const Button: (props: TButtonProps) => react_jsx_runtime.JSX.Element;

type TCardElevation = 'none' | 'elevation-0' | 'elevation-1' | 'elevation-2' | 'elevation-3' | 'elevation-4' | 'elevation-5';
type TCardProps = {
    /** Set Card to have border */
    bordered?: boolean;
    /** Set Card to have shadow */
    elevation?: TCardElevation;
    /** Set Card to have 0 padding */
    noPadding?: boolean;
} & HTMLProps<HTMLDivElement>;
type TCardHeaderProps = {
    /** Set Card Header's description */
    description?: string;
    /** Set Card Header's description's classname */
    descriptionClassName?: string;
    /** Set Card Header's icon on the left */
    iconLeft?: ReactNode;
    /** Set Card Header's icon on the left's classname */
    iconLeftClassName?: string;
    /** Set Card Header's icon on the right */
    iconRight?: ReactNode;
    /** Set Card Header's icon on the right's classname */
    iconRightClassName?: string;
    /** Set Card Header's title */
    title?: string;
    /** Set Card Header's title's classname */
    titleClassName?: string;
} & HTMLProps<HTMLDivElement>;
type TCardMediaProps = HTMLProps<HTMLDivElement>;
type TCardBodyProps = {
    /** Set Card Body's title */
    title?: string;
    /** Set Card Body's title's classname */
    titleClassName?: string;
} & HTMLProps<HTMLDivElement>;
type TCardFooterProps = HTMLProps<HTMLDivElement>;

declare const Card: (props: TCardProps) => react_jsx_runtime.JSX.Element;

declare const CardBody: (props: TCardBodyProps) => react_jsx_runtime.JSX.Element;

declare const CardFooter: (props: TCardFooterProps) => react_jsx_runtime.JSX.Element;

declare const CardHeader: (props: TCardHeaderProps) => react_jsx_runtime.JSX.Element;

declare const CardMedia: (props: TCardMediaProps) => react_jsx_runtime.JSX.Element;

type TCheckboxSize = 'sm' | 'md' | 'lg';
type TCheckboxLabelPosition = 'left' | 'right';
type TCheckboxProps = {
    /** Set the Checkbox to have a 100% width */
    block?: boolean;
    /** Set the Checkbox' icon class names */
    iconClassName?: string;
    /** Set the Checkbox icon to be a dash instead of a checkmark */
    indeterminate?: boolean;
    /** Set the Checkbox' input class names */
    inputClassName?: string;
    /** Set the Checkbox' label */
    label?: ReactNode;
    /** Set the Checkbox' label class names */
    labelClassName?: string;
    /** Set the Checkbox' label position */
    labelPosition?: TCheckboxLabelPosition;
    /** Set the Checkbox' size */
    size?: TCheckboxSize;
} & Omit<HTMLProps<HTMLInputElement>, 'size'>;

declare const Checkbox: (props: TCheckboxProps) => react_jsx_runtime.JSX.Element;

type TChipColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'information';
type TChipSize = 'sm' | 'md' | 'lg';
type TChipVariant = 'solid' | 'soft' | 'outline';
type TChipProps = {
    /** Set the Chip's color */
    color?: TChipColor;
    /** Set the Chip to have hover-animation */
    hoverable?: boolean;
    /** Set the Chip's size */
    size?: TChipSize;
    /** Set the Chip's variant */
    variant?: TChipVariant;
} & Omit<HTMLProps<HTMLDivElement>, 'size'>;

declare const Chip: (props: TChipProps) => react_jsx_runtime.JSX.Element;

type TDividerType = 'left' | 'center' | 'right';

type TDividerProps = {
    /** Set the Divider's type. It will affect the Divider's position */
    type?: TDividerType;
} & HTMLAttributes<HTMLDivElement>;
declare const Divider: (props: TDividerProps) => react_jsx_runtime.JSX.Element;

type TDropdownPosition = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-center' | 'left-top' | 'right-bottom' | 'right-center' | 'right-top' | 'top-center' | 'top-left' | 'top-right';
type TDropdownDialogueProps = HTMLProps<HTMLDivElement>;
type TDropdownProps = {
    /** Set Dropdown's position */
    position?: TDropdownPosition;
    /** Set Dropdown's trigger. It should be a single element */
    trigger: JSX.Element;
} & TDropdownDialogueProps;

declare const Dropdown: (props: TDropdownProps) => react_jsx_runtime.JSX.Element;

declare const DropdownDialogue: (props: TDropdownDialogueProps) => react_jsx_runtime.JSX.Element;

interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
    /**
     * Sets the object fit of component
     */
    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
    /**
     * Sets the loading of component
     */
    loading?: 'lazy' | 'eager';
}
declare const Image: react.MemoExoticComponent<(props: ImageProps) => react_jsx_runtime.JSX.Element>;

type TModalProps = {
    /** Set Modal's open state */
    isOpen: boolean;
    /** Set Modal's onClose function */
    onClose?: () => void;
    /** Set Modal's Overlay class name */
    overlayClassName?: string;
} & HTMLProps<HTMLDivElement>;
type TModalHeaderProps = {
    /** Set ModalHeader's left icon */
    leftIcon?: ReactNode;
    /** Set ModalHeader's left icon class name */
    leftIconClassName?: string;
    /** Hide ModalHeader's close button  */
    noCloseButton?: boolean;
    /** Set ModalHeader's onClose function. This will applied on ModalHeader's close button only. If noCloseButton is set, this function has no effect at all */
    onClose?: () => void;
    /** Set ModalHeader's right icon */
    rightIcon?: ReactNode;
    /** Set ModalHeader's right icon class name */
    rightIconClassName?: string;
    /** Set ModalHeader's title */
    title?: string;
    /** Set ModalHeader's title class name */
    titleClassName?: string;
} & HTMLProps<HTMLDivElement>;
type TModalBodyProps = HTMLProps<HTMLDivElement>;

declare const Modal: (props: TModalProps) => false | react.ReactPortal;

declare const ModalHeader: (props: TModalHeaderProps) => react_jsx_runtime.JSX.Element;

declare const ModalBody: (props: TModalBodyProps) => react_jsx_runtime.JSX.Element;

type TNavbarMenuItem = {
    label: ReactNode;
    isActive?: boolean;
};
type TNavbarMenu = {
    menu: TNavbarMenuItem;
    subMenu?: TNavbarMenuItem[];
};
type TNavbarProps = {
    /** Define the List of Menu for the Navbar */
    listMenu: TNavbarMenu[];
    /** Set the className for Navbar's submenu */
    subMenuClassName?: string;
} & HTMLProps<HTMLDivElement>;

declare const Navbar: (props: TNavbarProps) => react_jsx_runtime.JSX.Element;

type TPaginationProps = {
    /** Set the Pagination's active page */
    activePage: number;
    /** Set PaginationButton's class name */
    buttonClassName?: string;
    /** Set PaginationButton's on click function */
    onClick: (page: number) => void;
    /** Set the Pagination's total page */
    totalPage: number;
} & Omit<HTMLProps<HTMLDivElement>, 'onClick'>;
type TPaginationButtonProps = {
    /** Set the PaginationButton's active state */
    active?: boolean;
    /** Set the PaginationButton's disabled state */
    disabled?: boolean;
    /** Set the PaginationButton's label */
    label: ReactNode;
} & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'type'> & Omit<HTMLAttributes<HTMLButtonElement>, 'label'>;

declare const Pagination: (props: TPaginationProps) => react_jsx_runtime.JSX.Element;

declare const PaginationButton: (props: TPaginationButtonProps) => react_jsx_runtime.JSX.Element;

interface PinInputProps extends Omit<HTMLProps<HTMLInputElement>, 'children' | 'size' | 'onChange'> {
    /**
     * Sets the size of the component
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Sets the variant of the component
     */
    variant?: 'outline' | 'inline';
    /**
     * Sets the status of the component
     */
    status?: 'normal' | 'error' | 'success';
    /**
     * Sets the value of the pin input fields
     */
    value?: string;
    /**
     * Sets the valueLength of the pin input fields
     */
    valueLength?: number;
    /**
     * Sets the onChage of the pin input fields
     */
    onChange?: (value: string) => void;
}

declare const PinInput: react.MemoExoticComponent<(props: PinInputProps) => react_jsx_runtime.JSX.Element>;

type TProgressBarLabelPosition = 'bottom-left' | 'bottom-right' | 'float-bottom' | 'float-top' | 'left' | 'right';
type TProgressBarProps = {
    /** Set the Index's class name */
    className?: string;
    /** Set the Index's indicator class name */
    indicatorClassName?: string;
    /** Set the Index's label class name */
    labelClassName?: string;
    /** Set the Index's label position */
    labelPosition?: TProgressBarLabelPosition;
    /** Set the Index's track class name */
    trackClassName?: string;
    /** Set the Index's value */
    value: number;
} & Omit<HTMLProps<HTMLDivElement>, 'value'>;

declare const ProgressBar: (props: TProgressBarProps) => react_jsx_runtime.JSX.Element;

type TRadioSize = 'sm' | 'md' | 'lg';
type TRadioLabelPosition = 'left' | 'right';
type TRadioProps = {
    /** Set the Radio to have a 100% width */
    block?: boolean;
    /** Set the Radio's input class names */
    inputClassName?: string;
    /** Set the Radio's label */
    label?: string;
    /** Set the Radio's label class names */
    labelClassName?: string;
    /** Set the Radio's label position */
    labelPosition?: TRadioLabelPosition;
    /** Set the Radio's size */
    size?: TRadioSize;
} & Omit<HTMLProps<HTMLInputElement>, 'size'>;

declare const Radio: (props: TRadioProps) => react_jsx_runtime.JSX.Element;

interface RatingProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
    /**
     * Sets the count of the component
     */
    count: number;
    /**
     * Sets the value of the component
     */
    value: number;
    /**
     * Sets the color of the component
     */
    color?: string;
    /**
     * Sets the half of the component
     */
    isHalf?: boolean;
    /**
     * Sets the isEdit of the component
     */
    editable?: boolean;
    /**
     * Sets the hoverColor of the component
     */
    hoverColor?: string;
    /**
     * Sets the activeColor of the component
     */
    activeColor?: string;
    /**
     * Sets the emptyIcon of the component
     */
    emptyIcon?: ReactElement;
    /**
     * Sets the halfIcon of the component
     */
    halfIcon?: ReactElement;
    /**
     * Sets the fullIcon of the component
     */
    fullIcon?: ReactElement;
    /**
     * Sets the onChange of the component
     */
    onChange?: (value: number) => void;
}

declare const Rating: react.NamedExoticComponent<RatingProps>;

type TSelectSize = 'sm' | 'md' | 'lg';
type TSelectStatus = 'default' | 'error' | 'success';
type TSelectVariant = 'inline' | 'outline';
type TSelectValue = string | number | (string | number)[];
type TSelectOption = {
    label: string;
    value: string | number;
};
type TSelectProps = {
    /** Set the Select to have full width */
    block?: boolean;
    /** Set the Select's caption. Have a certain icon according to the Select's status */
    caption?: ReactNode;
    /** Set the Select to be disabled */
    disabled?: boolean;
    /** Set the Select's hint */
    hint?: ReactNode;
    /** Set the Select's label */
    label?: ReactNode;
    /** Set the Select's be able to selects multiple options */
    multiple?: boolean;
    /** Set the Select's `onChange` function */
    onChange?: (value: TSelectValue) => void;
    /** Set the SelectOption's `onChange` function */
    onChangeSearch?: (search: string, e?: ChangeEvent<HTMLInputElement>) => void;
    /** Set the SelectOption's function when clear up the search input */
    onClearSearch?: (search?: string) => void;
    /** Set the Select's option */
    optionClassName?: string;
    /** Set the Select's list options */
    options: TSelectOption[];
    /** Set the Select's options wrapper class name */
    optionsWrapperClassName?: string;
    /** Set the Select's placeholder */
    placeholder?: string;
    /** Make the Select's options to be searchable */
    searchable?: boolean;
    /** Set the Select's search option placeholder */
    searchPlaceholder?: string;
    /** Set the Select's search option input value */
    searchValue?: string;
    /** Set the Select's size */
    size?: TSelectSize;
    /** Set the Select's status. This status affects the icon that is shown in caption when the caption is provided */
    status?: TSelectStatus;
    /** Set the Select's value */
    value?: TSelectValue;
    /** Set the Select's variant */
    variant?: TSelectVariant;
} & Omit<HTMLProps<HTMLInputElement>, 'size' | 'onChange' | 'readonly' | 'value'>;

declare const Select: (props: TSelectProps) => react_jsx_runtime.JSX.Element;

interface SliderProps extends Omit<HTMLProps<HTMLDivElement>, 'min' | 'max' | 'onChange' | 'value'> {
    /**
     * Sets the minimun number of the component
     */
    min?: number;
    /**
     * Sets the maximal number of the component
     */
    max?: number;
    /**
     * Sets the onChange of the component
     */
    onChange?: ({ min, max }: {
        min: number;
        max: number;
    }) => void;
    /**
     * Sets the step of the component
     */
    step?: number;
    /**
     * Sets the stae show text of the component
     */
    showText?: boolean;
    /**
     * Sets the value of the component
     */
    value?: {
        min: number;
        max: number;
    };
    /**
     * Sets the variant of the component
     */
    variant?: 'plain' | 'box';
}

declare const Slider: react.NamedExoticComponent<SliderProps>;

type TSpinnerSize = 'sm' | 'md' | 'lg';
type TSpinnerProps = {
    /** Set the className for the Spinner's indicator to make it easier to customize the indicator */
    indicatorClassName?: string;
    /** Set the size of the Spinner */
    size?: TSpinnerSize;
    /** Set the className for the Spinner's track to make it easier to customize the track */
    trackClassName?: string;
} & Omit<HTMLProps<HTMLDivElement>, 'size'>;

declare const SpinnerMemo: react.NamedExoticComponent<TSpinnerProps>;

interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Sets the avatar src of the component
     */
    avatarSrc?: string;
    /**
     * Sets the avatar alt of the component
     */
    avatarAlt?: string;
    /**
     * Sets the description of the component
     */
    description?: string;
    /**
     * Sets the icon of the component
     */
    icon?: ReactNode;
    /**
     * Callback fired when the component requests to be closed
     */
    onClose?: () => void;
    /**
     * Sets the position of the component
     */
    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
    /**
     * Sets the state show of the component
     */
    show?: boolean;
    /**
     * Sets the text button close of the component
     */
    textClose?: string;
    /**
     * Sets the title of the component
     */
    title?: string;
    /**
     * Sets the timer of the component
     */
    timer?: number;
}

declare const Snackbar: (props: SnackbarProps) => react_jsx_runtime.JSX.Element | null;

type TStepperPosition = 'start' | 'middle' | 'end';
type TStepperTextPosition = 'top' | 'bottom' | 'left' | 'right';
type TStepperOrientation = 'horizontal' | 'vertical';
type TStepperStatus = 'default' | 'active' | 'complete';
type TStepProps = {
    /** Set Step description */
    description?: string;
    /** Set Step indicator */
    indicator?: ReactNode;
    /** Set Step orientation. If `Step` is wrapped inside `Stepper`, this value will be overridden by the `Stepper` */
    orientation?: TStepperOrientation;
    /** Set Step position within the list of Stepper. If `Step` is wrapped inside `Stepper`, this value will be overridden by the `Stepper` */
    position?: TStepperPosition;
    /** Set Step status */
    status?: TStepperStatus;
    /** Set Step text position. If `Step` is wrapped inside `Stepper`, this value will be overridden by the `Stepper` */
    textPosition?: TStepperTextPosition;
    /** Set Step title */
    title?: string;
} & Omit<HTMLProps<HTMLDivElement>, 'children'>;
type TStepperProps = {
    /** Set Stepper active step. The value is a zero based index of the `Step` in the `Stepper` */
    activeStep?: number;
    /** Set Stepper children */
    children: ReactNode;
    /** Set Stepper onChange */
    onChange?: (step?: number) => void;
    /** Set Stepper orientation */
    orientation?: TStepperOrientation;
    /** Set Stepper text position */
    textPosition?: TStepperTextPosition;
    /** Set Stepper Step className */
    stepClassName?: string;
} & Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>, 'onChange' | 'children'>;

declare const Step: (props: TStepProps) => react_jsx_runtime.JSX.Element;

declare const Stepper: (props: TStepperProps) => react_jsx_runtime.JSX.Element;

type TSwitchSize = 'sm' | 'md' | 'lg';
type TSwitchType = 'single' | 'multiple';
type TSwitchLabelPosition = 'left' | 'right';
type TSwitchProps = {
    /** Set Switch's field class name */
    fieldClassName?: string;
    /** Set Switch's input class name */
    inputClassName?: string;
    /** Set Switch's label */
    label?: string;
    /** Set Switch's label class name */
    labelClassName?: string;
    /** Set Switch's label position */
    labelPosition?: TSwitchLabelPosition;
    /** Set Switch's size */
    size?: TSwitchSize;
    /** Set Switch's toggle class name */
    toggleClassName?: string;
    /** Set Switch's type. 'single' type will imitate the behaviour of the radio input while the multiple will imitate the behaviour of the checkbox input */
    type?: TSwitchType;
} & Omit<HTMLProps<HTMLInputElement>, 'size' | 'type'>;

declare const Switch: (props: TSwitchProps) => react_jsx_runtime.JSX.Element;

type TTableBorderCell = 'none' | 'column' | 'row' | 'both';
type TTableProps = {
    /** Set the Table cell's border */
    borderCell?: TTableBorderCell;
    /** Set the Table to have a hover effect */
    hoverable?: boolean;
    /** Set the Table to have striped row styles */
    striped?: boolean;
} & HTMLProps<HTMLTableElement>;

declare const Table: (props: TTableProps) => react_jsx_runtime.JSX.Element;

type TTabPosition = 'top' | 'bottom' | 'left' | 'right';
type TTabPanelSlideDirection = 'right' | 'left';
type TTabProps = {
    /** Set `Tab` to be active. If `Tab` is wrapped inside a `TabList`, this value will be overridden by the `TabList` */
    active?: boolean;
    /** Set Tab `onClick` function */
    onClick?: (value?: number) => void;
    /** Set Tab position. If `Tab` is wrapped inside a `TabList`, this value will be overridden by the `TabList` */
    position?: TTabPosition;
} & Omit<HTMLProps<HTMLDivElement>, 'onClick' | 'value'>;
type TTabListProps = {
    /** Set TabList's active Tab. The value is a zero based index of the `Tab` in the `TabList` */
    activeTab?: number;
    /** Set TabList `onChange`. The `onChange` will be triggered when the `Tab` inside the `TabList` is clicked  */
    onChange?: (value?: number) => void;
    /** Set TabList position */
    position?: TTabPosition;
} & Omit<HTMLProps<HTMLDivElement>, 'onChange'>;
type TTabPanelProps = {
    /** Set TabPanel to be active. If `TabPanel` is wrapped inside `TabPanelList`, this value will be overridden by the `TabPanelList` */
    active?: boolean;
    /** Set TabPanel slide direction when active. If `TabPanel` is wrapped inside `TabPanelList`, this value will be overridden by the `TabPanelList` */
    slideDirection?: TTabPanelSlideDirection;
} & Omit<HTMLProps<HTMLDivElement>, 'value'>;
type TTabPanelListProps = {
    /** Set TabPanelList's active TabPanel. The value is a zero based index of the `TabPanel` in the `TabPanelList` */
    activePanel?: number;
} & HTMLProps<HTMLDivElement>;
type TTabsProps = {
    /** Set Tabs active Tab. The value is a zero based index of the `Tab` in the `TabList` */
    activeTab?: number;
    /** Set Tabs `onChange`. The `onChange` will be triggered when the `Tab` inside the `TabList` is clicked  */
    onChange?: (value?: number) => void;
    /** Set Tabs position */
    position?: TTabPosition;
} & Omit<HTMLProps<HTMLDivElement>, 'onChange'>;

declare const Tab: (props: TTabProps) => react_jsx_runtime.JSX.Element;

declare const TabList: (props: TTabListProps) => react_jsx_runtime.JSX.Element;

declare const TabPanel: (props: TTabPanelProps) => false | react_jsx_runtime.JSX.Element;

declare const TabPanelList: (props: TTabPanelListProps) => react_jsx_runtime.JSX.Element;

declare const Tabs: (props: TTabsProps) => react_jsx_runtime.JSX.Element;

interface TextProps extends Omit<HTMLProps<HTMLParagraphElement>, 'size'> {
    /**
     * Sets the type of element
     */
    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    /**
     * Sets the block of the component
     */
    block?: boolean;
    /**
     * Sets the children of element
     */
    children?: ReactNode;
    /**
     * Sets the className of the element
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}
declare const Text: react.NamedExoticComponent<TextProps>;

type TTooltipPosition = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-center' | 'left-top' | 'right-bottom' | 'right-center' | 'right-top' | 'top-center' | 'top-left' | 'top-right';
type TTooltipDialogueProps = {
    /** Set Tooltip Dialogue's content class name */
    dialogueContentClassName?: string;
    /** Set Tooltip Dialogue has no arrow */
    noArrow?: boolean;
    /** Set Tooltip Dialogue's position */
    position?: TTooltipPosition;
} & HTMLProps<HTMLDivElement>;
type TTooltipProps = {
    /** Set Element / Node that want to have a Tooltip */
    children: JSX.Element;
} & Omit<TTooltipDialogueProps, 'children'>;

declare const Tooltip: (props: TTooltipProps) => react_jsx_runtime.JSX.Element;

declare const TooltipDialogue: (props: TTooltipDialogueProps) => react_jsx_runtime.JSX.Element;

type TTextAreaSize = 'sm' | 'md' | 'lg';
type TTextAreaStatus = 'default' | 'error' | 'success';
type TTextAreaVariant = 'inline' | 'outline';
type TTextAreaProps = {
    /** Set the TextArea to have full width */
    block?: boolean;
    /** Set the TextArea's caption. Have a certain icon according to the TextArea's status */
    caption?: ReactNode;
    /** Set the TextArea's caption class name */
    captionClassName?: string;
    /** Set the TextArea's class name */
    className?: string;
    /** Set the TextArea to be disabled */
    disabled?: boolean;
    /** Set the TextArea's hint */
    hint?: ReactNode;
    /** Set the TextArea's hint class name */
    hintClassName?: string;
    /** Set the TextArea's id */
    id?: string;
    /** Set the TextArea's input class name */
    inputClassName?: string;
    /** Set the TextArea's label */
    label?: ReactNode;
    /** Set the TextArea's label class name */
    labelClassName?: string;
    /** Set the TextArea's placeholder */
    placeholder?: string;
    /** Set the TextArea's size */
    size?: TTextAreaSize;
    /** Set the TextArea's status. This status affects the icon that is shown in caption when the caption is provided */
    status?: TTextAreaStatus;
    /** Set the TextArea's variant */
    variant?: TTextAreaVariant;
} & Omit<HTMLProps<HTMLTextAreaElement>, 'size'>;

declare const TextArea: (props: TTextAreaProps) => react_jsx_runtime.JSX.Element;

type TTextFieldSize = 'sm' | 'md' | 'lg';
type TTextFieldStatus = 'default' | 'error' | 'success';
type TTextFieldVariant = 'inline' | 'outline';
type TTextFieldProps = {
    /** Set the TextField to have full width */
    block?: boolean;
    /** Set the TextField's caption. Have a certain icon according to the TextField's status */
    caption?: ReactNode;
    /** Set the TextField's caption class name */
    captionClassName?: string;
    /** Set the TextField to be disabled */
    disabled?: boolean;
    /** Set the TextField's hint */
    hint?: ReactNode;
    /** Set the TextField's hint class name */
    hintClassName?: string;
    /** Set the TextField's icon on the left side */
    iconLeft?: ReactNode;
    /** Set the TextField's icon on the right side */
    iconRight?: ReactNode;
    /** Set the TextField's input class name */
    inputClassName?: string;
    /** Set the TextField's label */
    label?: ReactNode;
    /** Set the TextField's label class name */
    labelClassName?: string;
    /** Set the TextField's placeholder */
    placeholder?: string;
    /** Set the TextField's prefix. The prefix is separated from the icons and the TextField's input by a divider */
    prefix?: ReactNode;
    /** Set the TextField's size */
    size?: TTextFieldSize;
    /** Set the TextField's status. This status affects the icon that is shown in caption when the caption is provided */
    status?: TTextFieldStatus;
    /** Set the TextField's suffix. The suffix is separated from the icons and the TextField's input by a divider */
    suffix?: ReactNode;
    /** Set the TextField's variant */
    variant?: TTextFieldVariant;
} & Omit<HTMLProps<HTMLInputElement>, 'size' | 'prefix' | 'suffix'>;

declare const TextField: (props: TTextFieldProps) => react_jsx_runtime.JSX.Element;

interface TreeNodeProps {
    title: ReactNode;
    childrens?: {
        title: ReactNode;
    }[];
}
interface TreeProps extends HTMLProps<HTMLDivElement> {
    /**
     * Sets the items of the component
     */
    items: TreeNodeProps[];
    /**
     * Sets the iconShow of the component
     */
    iconShow?: ReactNode;
    /**
     * Sets the iconHide of the component
     */
    iconHide?: ReactNode;
    /**
     * Sets the classname of the component
     */
    className?: string;
}

declare const Tree: react.NamedExoticComponent<TreeProps>;

interface UploadProps extends HTMLAttributes<HTMLInputElement> {
    /**
     * Sets the description of the component
     */
    description?: string;
    /**
     * Sets the disabled state of the component
     */
    disabled?: boolean;
    /**
     * Sets the label of the component
     */
    label?: string;
    /**
     * Sets the percentage of the component
     */
    percent?: number;
    /**
     * Sets the title of the component
     */
    title?: string;
    /**
     * Sets the uploading state of the component
     */
    uploading?: boolean;
    /**
     * Sets the callback onUpload of the component
     */
    onUpload?: (files: FileList) => void;
    /**
     * Sets the variant of the component
     */
    variant?: 'information' | 'success' | 'error';
}

declare const Upload: ({ onUpload, className, description, percent, disabled, uploading, variant, label, title, ...rest }: UploadProps) => react_jsx_runtime.JSX.Element;

export { Accordion, AccordionGroup, Alert, Anchor, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, CardMedia, Checkbox, Chip, Divider, Dropdown, DropdownDialogue, Image, Modal, ModalBody, ModalHeader, Navbar, Pagination, PaginationButton, PinInput, ProgressBar as Progressbar, Radio, Rating, Select, Slider, Snackbar, SpinnerMemo as Spinner, Step, Stepper, Switch, Tab, TabList, TabPanel, TabPanelList, Table, Tabs, Text, TextArea, TextField, Tooltip, TooltipDialogue, Tree, Upload };