import { ReactNode } from 'react';
import type { AvatarProps } from '../Avatar/Avatar.types';
export type AvatarGroupSpacing = 'tight' | 'normal' | 'loose';
export type AvatarGroupDirection = 'row' | 'row-reverse';
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Array of avatar props to render in the group
     */
    avatars: AvatarProps[];
    /**
     * Maximum number of avatars to display before showing a count
     * @default 5
     */
    max?: number;
    /**
     * Size for all avatars in the group
     * @default "md"
     */
    size?: AvatarProps["size"];
    /**
     * Amount of overlap between avatars (higher value = more overlap)
     * @default "normal"
     */
    spacing?: AvatarGroupSpacing;
    /**
     * Direction of the avatar stack
     * @default "row"
     */
    direction?: AvatarGroupDirection;
    /**
     * Custom renderer for the overflow avatar
     */
    overflowIndicator?: (overflowCount: number) => ReactNode;
    /**
     * ARIA label for the avatar group for accessibility
     * @default "Group of users"
     */
    ariaLabel?: string;
    /**
     * Enable motion animations for hover effects
     * @default true
     */
    shouldAnimate?: boolean;
}
