import { ComponentPropsWithRef, ReactNode } from 'react';
import { AvatarProps } from '../Avatar/Avatar';
type HTMLUnorderedListProps = ComponentPropsWithRef<'ul'>;
type FilteredAvatarProps = Omit<AvatarProps, 'design' | 'size' | 'tooltip'>;
export type AvatarGroupProps = HTMLUnorderedListProps & {
    /** [Avatar](../?path=/docs/avatar--docs) */
    avatars: readonly FilteredAvatarProps[];
    /** Render content at the end of the list (e.g., `+2`) */
    renderListFooter?: (hiddenAvatars: readonly FilteredAvatarProps[]) => ReactNode;
    /** [Avatar](../?path=/docs/avatar--docs) sizes */
    size?: AvatarProps['size'];
};
/**
- [Avatars](../?path=/docs/avatar--docs) will overlap and hide as needed.
- Array of `hiddenAvatars` is passed to the `renderListFooter` function for handling overflow UI (e.g., `+2 users`).
- Opt in to show a [Tooltip](../?path=/docs/tooltip--docs) on hover with the user's `fullName`.
*
* > **Note:** If you're wrapping AvatarGroup in a link, you might need to add `style: { cursor: 'pointer' }` as a prop for each Avatar you pass in.
*/
export declare function AvatarGroup({ avatars, renderListFooter, size, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
export default AvatarGroup;