import * as tailwind_variants from 'tailwind-variants';
import * as react from 'react';
import * as _heroui_system from '@heroui/system';
import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
import { SlotsToClasses, AvatarSlots, AvatarVariantProps } from '@heroui/theme';
import { ReactRef } from '@heroui/react-utils';

interface Props extends HTMLHeroUIProps<"span"> {
    /**
     * Ref to the DOM node.
     */
    ref?: ReactRef<HTMLSpanElement | null>;
    /**
     * Ref to the Image DOM node.
     */
    imgRef?: ReactRef<HTMLImageElement>;
    /**
     * The name of the person in the avatar. -
     * if **src** has loaded, the name will be used as the **alt** attribute of the **img**
     * - If **src** is not loaded, the name will be used to create the initials
     */
    name?: string;
    /**
     * Image source.
     */
    src?: string;
    /**
     * Image alt text.
     */
    alt?: string;
    icon?: React.ReactNode;
    /**
     * Whether the avatar can be focused.
     * @default false
     */
    isFocusable?: boolean;
    /**
     * If `true`, the fallback logic will be skipped.
     * @default false
     */
    ignoreFallback?: boolean;
    /**
     * If `false`, the avatar will show the background color while loading.
     */
    showFallback?: boolean;
    /**
     * Function to get the initials to display
     */
    getInitials?: (name: string) => string;
    /**
     * Custom fallback component.
     */
    fallback?: React.ReactNode;
    /**
     * Function called when image failed to load
     */
    onError?: () => void;
    /**
     * The component used to render the image.
     * @default "img"
     */
    ImgComponent?: React.ElementType;
    /**
     * Props to pass to the image component.
     */
    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
    /**
     * Classname or List of classes to change the classNames of the avatar.
     * if `className` is passed, it will be added to the base slot.
     *
     * @example
     * ```ts
     * <Avatar classNames={{
     *    base:"base-classes",
     *    img: "image-classes",
     *    name: "name-classes",
     *    icon: "icon-classes",
     *    fallback: "fallback-classes"
     * }} />
     * ```
     */
    classNames?: SlotsToClasses<AvatarSlots>;
}
type UseAvatarProps = Props & Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
declare function useAvatar(originalProps?: UseAvatarProps): {
    Component: _heroui_system.As<any>;
    ImgComponent: react.ElementType<any>;
    src: string | undefined;
    alt: string;
    icon: react.ReactNode;
    name: string | undefined;
    imgRef: react.RefObject<HTMLImageElement>;
    slots: {
        base: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        img: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        fallback: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        name: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        icon: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
    } & {
        base: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        img: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        fallback: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        name: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        icon: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isBordered?: boolean | undefined;
            isDisabled?: boolean | undefined;
            isInGroup?: boolean | undefined;
            isInGridGroup?: boolean | undefined;
            disableAnimation?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
    } & {};
    classNames: SlotsToClasses<"name" | "base" | "img" | "fallback" | "icon"> | undefined;
    fallback: react.ReactNode;
    isImgLoaded: boolean;
    showFallback: boolean;
    ignoreFallback: boolean;
    getInitials: (text: string) => string;
    getAvatarProps: PropGetter;
    getImageProps: PropGetter;
};
type UseAvatarReturn = ReturnType<typeof useAvatar>;

export { type UseAvatarProps, type UseAvatarReturn, useAvatar };