import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; import { InternalStandardProps as StandardProps, Theme } from '@mui/material'; import { AvatarGroupClasses } from './avatarGroupClasses'; import Avatar from '../Avatar'; export interface AvatarGroupPropsVariantOverrides {} export interface AvatarGroupComponentsPropsOverrides {} export interface AvatarGroupProps extends StandardProps> { /** * The avatars to stack. */ children?: React.ReactNode; /** * Override or extend the styles applied to the component. */ classes?: Partial; /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component?: React.ElementType; /** * The extra props for the slot components. * You can override the existing props or add new ones. * * This prop is an alias for the `slotProps` prop. * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. * * @default {} */ componentsProps?: { additionalAvatar?: React.ComponentPropsWithRef & AvatarGroupComponentsPropsOverrides; }; /** * Max avatars to show before +x. * @default 5 */ max?: number; /** * custom renderer of extraAvatars * @param {number} surplus number of extra avatars * @returns {React.ReactNode} custom element to display */ renderSurplus?: (surplus: number) => React.ReactNode; /** * The extra props for the slot components. * You can override the existing props or add new ones. * * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. * * @default {} */ slotProps?: { additionalAvatar?: React.ComponentPropsWithRef & AvatarGroupComponentsPropsOverrides; }; /** * Spacing between avatars. * @default 'medium' */ spacing?: 'small' | 'medium' | number; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; /** * The total number of avatars. Used for calculating the number of extra avatars. * @default children.length */ total?: number; /** * The variant to use. * @default 'circular' */ variant?: OverridableStringUnion< 'circular' | 'rounded' | 'square', AvatarGroupPropsVariantOverrides >; } /** * * Demos: * * - [Avatar](https://mui.com/material-ui/react-avatar/) * * API: * * - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/) */ export default function AvatarGroup(props: AvatarGroupProps): React.JSX.Element;