import { AriaAttributes } from 'react';
import { ChangeEvent } from 'react';
import { ComponentPropsWithoutRef } from 'react';
import { default as default_2 } from 'react';
import { ImgHTMLAttributes } from 'react';
import { JSX } from 'react/jsx-runtime';
import { ReactNode } from 'react';

export declare const Accordion: ({ children, open, summary }: AccordionProps) => JSX.Element;

declare type AccordionProps = {
    children: React.ReactNode;
    open?: boolean;
    summary: React.ReactNode;
};

export declare const AppLink: ({ label, type }: AppLinkProps) => JSX.Element;

declare type AppLinkProps = {
    label: string;
    type: 'apple' | 'google';
};

export declare const Aside: ({ children, className, sticky, variant }: AsideProps) => JSX.Element;

declare type AsideProps = {
    className?: string;
    children: React.ReactNode;
    open?: boolean;
    sticky?: boolean;
    variant?: keyof typeof variants_2;
};

export declare const Avatar: ({ accessibleLabel, imageUrl, link }: AvatarProps) => JSX.Element;

declare type AvatarProps = {
    accessibleLabel?: string;
    imageUrl?: string;
    link?: string;
};

export declare const Badge: ({ children, deleteAccessibleLabel, onDelete, variant, }: BadgeProps) => JSX.Element;

declare type BadgeProps = {
    children?: React.ReactNode;
    deleteAccessibleLabel?: string;
    onDelete?: () => void;
    variant?: keyof typeof variants;
};

export declare const Banner: ({ button, message, onClick, onDismiss, visible }: BannerProps) => JSX.Element;

declare type BannerProps = {
    button: string;
    message: string;
    onClick?: () => void;
    onDismiss?: () => void;
    visible?: boolean;
};

declare type BaseCardProps = {
    badge?: BadgeProps;
    checkbox?: CheckboxProps;
    icon?: IconName;
    onClick?: React.MouseEventHandler<HTMLElement>;
};

export declare const Branding: ({ name, size, variant }: BrandingProps) => JSX.Element;

declare type BrandingProps = {
    name: keyof typeof brandingSVG;
    size?: number | string;
    variant?: keyof typeof variants_3;
};

declare const brandingSVG: {
    logo: string;
};

export declare function Button({ children, className, disabled, icon, onClick, ref, variant, ...props }: ButtonProps): JSX.Element;

declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
    children: React.ReactNode;
    className?: string;
    disabled?: boolean;
    icon?: IconName;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    variant?: keyof typeof variants_4;
};

export declare const Card: ({ badge, checkbox, children, header, icon, image, imagePosition, onClick, variant, }: CardProps) => JSX.Element;

declare type CardProps = DefaultCardProps | MinimalCardProps;

export declare const Checkbox: ({ checked, disabled, isLoading, label, onChange, ...props }: CheckboxProps) => JSX.Element;

declare type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
    checked?: boolean;
    disabled?: boolean;
    isLoading?: boolean;
    label?: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

export declare const Collapsible: ({ children, disabled, label }: CollapsibleProps) => JSX.Element;

declare type CollapsibleProps = {
    children: default_2.ReactNode;
    disabled?: boolean;
    label?: default_2.ReactNode;
};

export declare const Controls: ({ children, onSaveShortcut, ...props }: ControlsProps) => JSX.Element;

declare type ControlsProps = React.ComponentPropsWithoutRef<'menu'> & {
    onSaveShortcut?: () => void;
};

export declare const Croppable: ({ children, fill, height, image, label, onCroppableChange, onFileChange, onImageChange, onTransformChange, transform, standalone, }: CroppableProps) => JSX.Element;

declare type CroppableProps = {
    children?: default_2.ReactNode;
    fill?: 'width' | 'height' | 'none';
    height?: number;
    image?: string | null;
    label?: string;
    onCroppableChange?: (rect: DOMRect) => void;
    onFileChange?: (file: File | null) => void;
    onImageChange?: (file: File | null) => void;
    onTransformChange?: (transform: CroppableTransform) => void;
    standalone?: boolean;
    transform?: CroppableTransform;
};

declare type CroppableTransform = {
    offset: {
        x: number;
        y: number;
    };
    zoom: number;
};

declare type DefaultCardProps = BaseCardProps & {
    children?: React.ReactNode;
    header?: React.ReactNode;
    image?: React.ReactNode;
    imagePosition?: 'top' | 'left' | 'right';
    variant?: 'default';
};

export declare const Dialog: ({ children, setOpen, ...props }: DialogProps) => JSX.Element;

declare type DialogProps = default_2.DialogHTMLAttributes<HTMLDialogElement> & {
    children: default_2.ReactNode;
    setOpen?: default_2.Dispatch<default_2.SetStateAction<boolean>>;
};

export declare const Dropdown: ({ children: selectElement, className, emptyLabel, searchPlaceholder, variant, ...props }: DropdownProps) => JSX.Element;

declare type DropdownProps = Omit<default_2.ComponentPropsWithoutRef<'div'>, 'children'> & {
    children: DropdownSelectElement;
    emptyLabel?: string;
    searchPlaceholder?: string;
    variant?: 'default' | 'minimal';
};

declare type DropdownSelectElement = NativeSelectElement | WrappedSelectElement;

export declare const Dropzone: ({ accepts, label, maxFileSize, multiple, onChange, onValidation, variant, ...props }: DropzoneProps) => JSX.Element;

declare type DropzoneProps = {
    accepts?: string;
    label: string;
    maxFileSize?: number;
    multiple?: boolean;
    onChange?: React.ChangeEventHandler<HTMLInputElement>;
    onValidation?: (empty: File[], oversized: File[]) => void;
    variant?: 'default' | 'minimal';
};

export declare const Editor: ({ autofocus, autolink, content, inline, onChange, }: EditorProps) => JSX.Element;

declare type EditorProps = {
    autofocus?: boolean;
    autolink?: boolean;
    content?: string;
    inline?: boolean;
    onChange?: (html: string) => void;
};

export declare const Figure: ({ accessibleLabel, children, className, offset }: FigureProps) => JSX.Element;

declare type FigureProps = {
    accessibleLabel?: string;
    children?: React.ReactNode;
    className?: string;
    offset?: 'left' | 'right';
};

declare const File_2: ({ deleteAccessibleLabel, name, onClick, onDelete, ref, url }: FileProps) => JSX.Element;
export { File_2 as File }

declare type FileProps = React.ComponentPropsWithRef<'div'> & {
    deleteAccessibleLabel?: string;
    name: string;
    onClick?: () => void;
    onDelete?: () => void;
    url?: string;
};

export declare const Footer: ({ animation, children, ...props }: FooterProps) => JSX.Element;

declare type FooterProps = React.ComponentPropsWithoutRef<'footer'> & {
    animation?: string;
    children?: React.ReactNode;
};

export declare const Form: ({ animation, children, className, inline, ...props }: FormProps) => JSX.Element;

declare type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
    animation?: string;
    children?: React.ReactNode;
    className?: string;
    inline?: boolean;
};

export declare const Graph: ({ accessibleLabel, className, height, items, style, valueFormatter, ...props }: GraphProps) => JSX.Element;

declare type GraphItem = {
    color?: string;
    label: string;
    value: number;
};

declare type GraphProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children'> & {
    accessibleLabel?: string;
    height?: string;
    items?: GraphItem[];
    valueFormatter?: (value: number) => string;
};

export declare const Group: ({ animation, children, className, ...props }: GroupProps) => JSX.Element;

declare type GroupProps = React.HTMLAttributes<HTMLDivElement> & {
    animation?: string;
    children: React.ReactNode;
};

export declare const Header: ({ children, variant }: HeaderProps) => JSX.Element;

declare type HeaderProps = {
    children: React.ReactNode;
    variant?: keyof typeof variants_5;
};

export declare const Icon: ({ fill, gap, name, size, variant, }: IconProps) => JSX.Element;

declare type IconName = keyof typeof iconPaths;

declare const iconPaths: {
    bold: string;
    buildings: string;
    card: string;
    check: string;
    chevron: string;
    clipboard: {
        filled: string;
        outline: string;
    };
    document: string;
    dots: {
        filled: string;
        outline: string;
    };
    error: string;
    gear: string;
    goTo: string;
    home: string;
    image: string;
    info: string;
    italic: string;
    link: string;
    list: string;
    megaphone: {
        filled: string;
        outline: string;
    };
    menu: string;
    mobile: string;
    pencil: string;
    people: string;
    phone: string;
    plane: {
        filled: string;
        outline: string;
    };
    plus: string;
    search: string;
    sort: {
        filled: string;
        outline: string;
    };
    success: string;
    trash: string;
    updown: string;
    upload: string;
    user: string;
    x: string;
};

declare type IconProps = {
    fill?: boolean;
    gap?: 'left' | 'none' | 'right';
    name: IconName;
    size?: keyof typeof sizes;
    variant?: keyof typeof variants_6;
};

declare function Image_2({ fadeDurationMs, showOnError, onLoad, onError, style, ...props }: ImageProps): JSX.Element;
export { Image_2 as Image }

declare type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
    fadeDurationMs?: number;
    showOnError?: boolean;
};

export declare function Input({ className, defaultCountryCode, disabled, icon, label, placeholder, ref, required, type, ...props }: InputProps): JSX.Element;

declare type InputProps = React.ComponentPropsWithRef<'input'> & {
    defaultCountryCode?: string;
    disabled?: boolean;
    icon?: IconName;
    label?: string;
    onClick?: React.MouseEventHandler<HTMLInputElement>;
    placeholder?: string;
    type?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';
};

export declare const Link: ({ children, className, to, variant, ...props }: LinkProps) => JSX.Element;

declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
    children: React.ReactNode;
    className?: string;
    to?: string;
    variant?: 'danger' | 'minimal' | 'primary';
};

export declare function List({ children, className, columns, horizontal, ordered, style, ...props }: ListProps): JSX.Element;

declare type ListProps = React.ComponentPropsWithoutRef<'ul'> & {
    columns?: number;
    horizontal?: boolean;
    ordered?: boolean;
};

/**
 *  Loader `size` needs to be divisible by `8` to ensure proper scaling (or by `unit` for golden ratio).
 */
export declare const Loading: ({ variant, size, sticky, ...props }: LoadingProps) => JSX.Element;

declare type LoadingProps = {
    size?: number;
    sticky?: boolean;
    variant?: 'default' | 'ping';
};

export declare const Menu: ({ items, menuAccessibleLabel, onItemSelect, position, triggerAccessibleLabel, }: MenuProps) => JSX.Element;

declare type MenuItem = {
    accessibleLabel?: string;
    disabled?: boolean;
    icon?: IconName;
    id?: string;
    isDanger?: boolean;
    label: React.ReactNode;
    onSelect?: () => void;
};

declare type MenuProps = {
    items: MenuItem[];
    menuAccessibleLabel?: string;
    onItemSelect?: (item: MenuItem) => void;
    position?: 'left' | 'right';
    triggerAccessibleLabel?: string;
};

export declare const Message: ({ content, id, preview, type }: MessageOptions) => JSX.Element;

declare type MessageItem = MessageOptions;

export declare type MessageOptions = {
    content: React.ReactNode;
    id: string;
    preview?: boolean;
    type?: 'default' | 'minimal' | 'system' | 'user';
};

export declare const Messages: ({ handleUpload, message, messages, onChange, onSubmit, placeholder, sending, }: MessagesProps) => JSX.Element;

declare type MessagesProps = {
    handleUpload: (files: FileList) => void;
    message: string;
    messages: MessageItem[];
    onSubmit: () => void;
    onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
    placeholder?: string;
    sending: boolean;
};

declare type MinimalCardProps = BaseCardProps & {
    children?: never;
    header: React.ReactNode;
    image?: never;
    imagePosition?: never;
    variant: 'minimal';
};

declare type NativeSelectElement = default_2.ReactElement<NativeSelectProps, 'select'>;

declare type NativeSelectProps = Omit<default_2.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {
    children: default_2.ReactNode;
    multiple?: false;
};

export declare const Nav: ({ animation, children, className, horizontal, variant, ...props }: NavProps) => JSX.Element;

declare type NavProps = React.HTMLAttributes<HTMLElement> & {
    animation?: string;
    children?: React.ReactNode;
    className?: string;
    horizontal?: boolean;
    variant?: keyof typeof variants_7;
};

declare const Object_2: ({ accessibleLabel, url, ...props }: ObjectProps) => JSX.Element;
export { Object_2 as Object }

declare type ObjectProps = Omit<ComponentPropsWithoutRef<'object'>, 'data' | 'type'> & {
    accessibleLabel: string;
    url: string;
};

export declare const Popover: ({ children, position, triggerAccessibleLabel, triggerAriaHasPopup, triggerButtonContent, }: PopoverProps) => JSX.Element;

declare type PopoverCloseOptions = {
    restoreFocus?: boolean;
};

declare type PopoverInitialFocus = 'first' | 'last';

declare type PopoverProps = {
    children: ReactNode | ((props: PopoverRenderProps) => ReactNode);
    position?: 'left' | 'right';
    triggerAccessibleLabel?: string;
    triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];
    triggerButtonContent: ReactNode;
};

declare type PopoverRenderProps = {
    close: (options?: PopoverCloseOptions) => void;
    initialFocus?: PopoverInitialFocus;
    isOpen: boolean;
};

export declare const Portal: ({ accessibleLabel, children, portals, open, }: PortalProps) => JSX.Element;

declare type PortalProps = {
    accessibleLabel?: string;
    children?: React.ReactNode;
    portals?: React.ReactNode;
    open?: boolean;
};

export declare const Select: ({ children, label, placeholder, ...props }: SelectProps) => JSX.Element;

declare type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
    children: React.ReactNode;
    label?: string;
    placeholder?: string;
};

declare const sizes: {
    large: string;
    medium: string;
    small: string;
};

/**
 * Children must provide a stable `data-id` for emits `{ id, weight }` and `key` (reconciliation).
 */
export declare function Sortable({ children, className, columns, isRearranging, onChangeOrder, ...props }: SortableProps): JSX.Element;

declare type SortableProps = default_2.ComponentPropsWithoutRef<'ol'> & {
    columns?: number;
    isRearranging?: boolean;
    onChangeOrder: (order: SortItem[]) => void;
};

declare type SortItem = {
    id: string;
    weight: number;
};

export declare const Table: ({ children, locale, ...props }: TableProps) => JSX.Element;

declare type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
    children?: React.ReactNode;
    locale?: string | string[];
};

export declare const Textarea: ({ label, maxRows, minRows, required, value, ...props }: TextareaProps) => JSX.Element;

declare type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {
    label?: string;
    maxRows?: number;
    minRows?: number;
};

export declare const Toast: ({ label, type, onClick, onExitComplete, open, }: ToastProps) => JSX.Element;

declare type ToastItem = ToastOptions & {
    id: string;
};

export declare type ToastOptions = {
    durationMs?: number;
    label: string;
    type?: 'error' | 'success';
};

declare type ToastProps = ToastOptions & {
    onClick?: () => void;
    onExitComplete?: () => void;
    open?: boolean;
};

export declare const Toasts: ({ defaultDurationMs, onRemove, toasts }: ToastsProps) => JSX.Element | null;

declare type ToastsProps = {
    defaultDurationMs?: number;
    onRemove: (id: string) => void;
    toasts: ToastItem[];
};

export declare const Toggle: ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => JSX.Element;

declare type ToggleProps = {
    checked?: boolean;
    disabled?: boolean;
    isLoading?: boolean;
    label?: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

export declare const Toolbar: ({ children, variant }: ToolbarProps) => JSX.Element;

declare type ToolbarProps = {
    children?: ReactNode;
    variant?: 'default' | 'editor';
};

declare const variants: {
    default: string;
    info: string;
    primary: string;
};

declare const variants_2: {
    default: string;
    meta: string;
};

declare const variants_3: {
    default: string;
    white: string;
};

declare const variants_4: {
    danger: string;
    default: string;
    minimal: string;
    primary: string;
};

declare const variants_5: {
    default: string;
    jumbo: string;
};

declare const variants_6: {
    danger: string;
    default: string;
    primary: string;
    white: string;
};

declare const variants_7: {
    default: string;
    pills: string;
    tabs: string;
};

export declare const Widget: ({ children, ...props }: WidgetProps) => JSX.Element;

declare type WidgetProps = {
    children: React.ReactNode;
};

declare type WrappedSelectElement = default_2.ReactElement<SelectProps, typeof Select>;

export { }
