import React$1, { PropsWithChildren, ReactNode, ComponentProps, MouseEvent, ChangeEvent, SVGProps } from 'react';

type BaseVariantTypes = 'primary' | 'default' | 'info' | 'danger' | 'success' | 'warning';
type FormVariantTypes = 'standard' | 'outlined';
type Props<P = unknown> = {
    id?: string;
    className?: string;
    style?: React.CSSProperties;
} & P;
type PropsHasChildren<P = unknown> = PropsWithChildren<Props<P>>;

type AccordionType = PropsHasChildren<{
    heading: string | ReactNode;
    defaultOpen?: boolean;
}>;

type AlertProps = Props<{
    variant?: BaseVariantTypes;
    title?: string;
    description?: string;
    onClose?: () => void;
}>;

type AvatarProps = PropsHasChildren<{
    withDefaultIcon?: boolean;
    withBorder?: boolean;
    size?: number;
}>;

type BadgeProps = PropsHasChildren<{
    variant?: BaseVariantTypes;
}>;

type BottomNavButtonType = Props<{
    id: string;
    icon: ReactNode;
    label: string | ReactNode;
    disabled?: boolean;
}>;
type BottomNavigationProps = Props<{
    nav: BottomNavButtonType[];
    selectedId: string;
    onClick: (id: string) => void;
    asTabs?: boolean;
}>;

type ButtonStyleTypes = 'filled' | 'outlined' | 'text' | 'pill';
type ButtonVariantTypes = Omit<BaseVariantTypes, 'info'>;
type ButtonProps = Omit<ComponentProps<'a'>, 'href' | 'id'> & {
    id: string;
    href?: string;
    disabled?: boolean;
    variant?: ButtonVariantTypes;
    styleType?: ButtonStyleTypes;
    resetStyle?: boolean;
};
type IconTypes = 'BellIcons' | 'ChevronIcon' | 'CrossIcon' | 'HomeIcon' | 'InfoIcon' | 'MenuIcon' | 'ProfileIcon';
type IconButtonProps = Omit<ComponentProps<'button'>, 'id'> & {
    id: string;
    icon: IconTypes;
    size?: number;
};

type ButtonGroupStyleTypes = Omit<ButtonStyleTypes, 'text'>;
type ButtonGroupProps = Props<{
    buttons: Omit<ButtonProps, 'variant' | 'styleType'>[];
    disabled?: boolean;
    variant?: ButtonVariantTypes;
    styleType?: ButtonGroupStyleTypes;
    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
}>;

type BorderStyleTypes = 'row' | 'cell' | 'outer';
type DataTableColumnType = Props<{
    colSpan?: number;
    label: string | ReactNode;
}>;
type DataTableProps = Props<{
    isStickyTHead?: boolean;
    borderStyle?: BorderStyleTypes;
    cols: DataTableColumnType[];
    /** table thead, th className style based on tailwind styles */
    classNameThead?: string;
    /** table thead, th className style based on React.CSSProperties */
    styleThead?: React.CSSProperties;
    /** table body rows */
    children: ReactNode;
}>;

type LabelProps = ComponentProps<'label'> & {
    error?: boolean;
};

type MenuProps = Props & {
    href?: string;
    icon?: ReactNode;
    label?: string | ReactNode;
    disabled?: boolean;
    active?: boolean;
};
type ExpandableMenuProps = MenuProps & {
    defaultExpanded?: boolean;
    subMenu?: MenuProps[];
};

type SidebarProps = {
    menu: ExpandableMenuProps[];
};

type TabsProps = Omit<BottomNavigationProps, 'nav' | 'asTabs'> & {
    tabs: BottomNavButtonType[];
    compact?: boolean;
    children: ReactNode;
};

type ToastVariantTypes = 'success' | 'warning' | 'info' | 'error';
type ToastDataType = {
    id: string;
    label: string | ReactNode;
    variant: ToastVariantTypes;
};
type ToastProps = Props<{
    toasts: Array<ToastDataType>;
}>;

type FormVariantTypeProps = {
    variant?: FormVariantTypes;
};
type InputProps = Omit<ComponentProps<'input'>, 'prefix'> & FormVariantTypeProps & {
    prefix?: string | ReactNode;
    suffix?: string | ReactNode;
    error?: string | boolean;
};

type CurrencyCodeOptionsType = {
    id: string;
    value: string;
    label: string;
    locale: string;
    fractionSymbol: string;
};
type InputCurrencyProps = Omit<InputProps, 'id' | 'value'> & {
    id: string;
    value: '0.00' | string;
    currencyCode?: 'IDR' | 'USD';
    currencyCodeOptions?: CurrencyCodeOptionsType[];
    onChangeCurrencyCode?: (event: ChangeEvent<HTMLSelectElement>) => void;
};

type InputFieldProps = InputProps & {
    label?: string | ReactNode;
    classNameLabel?: string;
    classNameInput?: string;
    styleInput?: React.CSSProperties;
    styleLabel?: React.CSSProperties;
};

type OptionType = {
    id: string;
    value: string;
    label: string | ReactNode;
    [key: string]: any;
};
type SelectAutocompleteType = Omit<InputFieldProps, 'id' | 'text' | 'onChange'> & {
    id: string;
    options: OptionType[];
    onChange: (target: OptionType) => void;
    isAsync?: boolean;
};

type ToggleSwitchProps = Props<{
    variant?: BaseVariantTypes;
    label: string | ReactNode;
    checked: boolean;
    disabled?: boolean;
    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
    error?: boolean;
}>;

type IconVariantTypes = 'outlined' | 'filled';
type IconStyleTypes = 'default' | 'rounded' | 'square';
type IconProps = SVGProps<SVGSVGElement> & {
    id?: string;
};
type IconWithVariantProps = IconProps & {
    variant?: IconVariantTypes;
};
type IconWithStyleTypeProps = IconProps & {
    styleType?: IconStyleTypes;
};

type LogoType = {
    content: string | ReactNode;
    href: string;
};
type AvatarProfileType = {
    abbr: string | ReactNode;
    picture?: string | ReactNode;
    onClick?: (id: string) => void;
};
type PageTitleType = {
    title?: string | ReactNode;
    subTitle?: string | ReactNode;
};
type PageTemplateV1Props = PropsHasChildren<{
    logo: LogoType;
    avatarProfile: AvatarProfileType;
    sidebarMenu: ExpandableMenuProps[];
    pageTitle: PageTitleType;
}>;

declare const getIconAttrs: ({ size, ...props }: SVGProps<SVGSVGElement> & {
    size?: number;
}) => SVGProps<SVGSVGElement>;

declare const combineClassName: (prevClassName?: string, nextClassName?: string) => string;

declare const OverlayBackdrop: ({ children, ...props }: PropsHasChildren) => React$1.JSX.Element;

declare const Accordion: ({ id, heading, defaultOpen, children, className }: AccordionType) => React$1.JSX.Element;

declare const Alert: ({ id, className, variant, title, description, onClose }: AlertProps) => React$1.JSX.Element;

declare const Avatar: ({ id, className, style, children, withDefaultIcon, withBorder, size }: AvatarProps) => React$1.JSX.Element;

declare const Badge: ({ variant, children, ...props }: BadgeProps) => React$1.JSX.Element;

declare const BottomNavigation: ({ id, className, nav, selectedId, asTabs, onClick }: BottomNavigationProps) => React$1.JSX.Element;

declare const Button: ({ variant, styleType, type, href, onClick, disabled, children, resetStyle, ...props }: ButtonProps) => React$1.JSX.Element;

declare const ButtonGroup: ({ variant, styleType, buttons, onClick, disabled, ...props }: ButtonGroupProps) => React$1.JSX.Element;

declare const DataTable: ({ id, cols, className, classNameThead, styleThead, children, isStickyTHead, borderStyle }: DataTableProps) => React$1.JSX.Element;

declare const Label: ({ error, ...props }: LabelProps) => React$1.JSX.Element;

type ModalProps = PropsHasChildren<{
    isShow: boolean;
    id: string;
    title?: string | ReactNode;
    footer?: ReactNode;
    footerStyles?: string | React.CSSProperties;
    disabledCloseClickOutside?: boolean;
    isModalConfirm?: boolean;
    onClose?: () => void;
}>;
type ModalConfirmProps = Omit<ModalProps, 'title' | 'footer' | 'footerStyles' | 'isModalConfirm'> & {
    onConfirm: () => void;
};

declare const Modal: ({ isShow, ...props }: ModalProps) => React$1.JSX.Element;

declare const ModalConfirm: ({ isShow, onClose, onConfirm, children, ...props }: ModalConfirmProps) => React$1.JSX.Element;

declare const Sidebar: ({ menu }: SidebarProps) => React$1.JSX.Element;

declare const SVGWrapper: ({ children, ...props }: IconProps) => React$1.JSX.Element;

declare const Tabs: ({ tabs: nav, selectedId, onClick, children, compact, ...props }: TabsProps) => React$1.JSX.Element;

declare const useToast: () => {
    success: (_: string) => void;
    warning: (_: string) => void;
    info: (_: string) => void;
    error: (_: string) => void;
    remove: (_: string) => void;
};
declare const ToastProvider: ({ children }: PropsHasChildren) => React$1.JSX.Element;

declare const Input: ({ variant, type, error, prefix, suffix, ...props }: InputProps) => React$1.JSX.Element;

declare const InputCurrency: ({ currencyCode, currencyCodeOptions, onChangeCurrencyCode, ...props }: InputCurrencyProps) => React$1.JSX.Element;

declare const InputField: ({ variant, type, label, className, style, classNameLabel, classNameInput, styleInput, styleLabel, ...props }: InputFieldProps) => React$1.JSX.Element;

declare const InputPassword: ({ variant, className, ...props }: Omit<InputProps, 'type'>) => React$1.JSX.Element;

declare const SelectAutocomplete: ({ variant, options, onChange, isAsync, className, style, ...props }: SelectAutocompleteType) => React$1.JSX.Element;

declare const ToggleSwitch: ({ id, className, checked, label, variant, disabled, onChange, error }: ToggleSwitchProps) => React$1.JSX.Element;

declare const BellIcon: (props: IconProps) => React$1.JSX.Element;

declare const CheckmarkIcon: ({ styleType, ...props }: IconWithStyleTypeProps) => React$1.JSX.Element;

declare const ChevronDoubleIcon: ({ styleType, ...props }: IconWithStyleTypeProps) => React$1.JSX.Element;

declare const ChevronIcon: ({ styleType, ...props }: IconWithStyleTypeProps) => React$1.JSX.Element;

declare const CrossIcon: (props: IconProps) => React$1.JSX.Element;

declare const EyeIcon: ({ variant, ...props }: IconWithVariantProps) => React$1.JSX.Element;

declare const EyeSlashIcon: ({ variant, ...props }: IconWithVariantProps) => React$1.JSX.Element;

declare const HomeIcon: (props: IconProps) => React$1.JSX.Element;

declare const InfoIcon: (props: IconProps) => React$1.JSX.Element;

declare const MenuIcon: (props: IconProps) => React$1.JSX.Element;

declare const ProfileIcon: (props: IconProps) => React$1.JSX.Element;

declare const RadioIcon: ({ checked, ...props }: React$1.SVGProps<SVGSVGElement> & {
    id?: string;
} & {
    checked?: boolean;
}) => React$1.JSX.Element;

declare const SettingsIcon: (props: IconProps) => React$1.JSX.Element;

declare const PageTemplateV1: ({ logo, avatarProfile, sidebarMenu, pageTitle, children }: PageTemplateV1Props) => React$1.JSX.Element;

export { Accordion, type AccordionType, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseVariantTypes, BellIcon, type BorderStyleTypes, type BottomNavButtonType, BottomNavigation, type BottomNavigationProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupStyleTypes, type ButtonProps, type ButtonStyleTypes, type ButtonVariantTypes, CheckmarkIcon, ChevronDoubleIcon, ChevronIcon, CrossIcon, DataTable, type DataTableColumnType, type DataTableProps, type ExpandableMenuProps, EyeIcon, EyeSlashIcon, type FormVariantTypeProps, type FormVariantTypes, HomeIcon, type IconButtonProps, type IconProps, type IconTypes, type IconWithStyleTypeProps, type IconWithVariantProps, InfoIcon, Input, InputCurrency, type InputCurrencyProps, InputField, type InputFieldProps, InputPassword, type InputProps, Label, type LabelProps, MenuIcon, type MenuProps, Modal, ModalConfirm, type OptionType, OverlayBackdrop, PageTemplateV1, type PageTemplateV1Props, type PageTitleType, ProfileIcon, type Props, type PropsHasChildren, RadioIcon, SVGWrapper, SelectAutocomplete, type SelectAutocompleteType, SettingsIcon, Sidebar, type SidebarProps, Tabs, type TabsProps, type ToastDataType, type ToastProps, ToastProvider, type ToastVariantTypes, ToggleSwitch, type ToggleSwitchProps, combineClassName, getIconAttrs, useToast };