@cmk/fe_utils/dist/components/basics/Avatar.d.ts

frontend utility library

import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
import { AvatarProps as MAvatarProps, TypographyProps, TooltipProps } from '@mui/material';

export type AvatarProps = Omit<MAvatarProps, 'title' | 'slotProps'> & {
    size?: CSSProperties['width'];
    fullName?: string;
    fontSize?: CSSProperties['fontSize'];
    disableInitials?: boolean;
    customTooltip?: ReactNode;
    bgColor?: string;
    slotProps?: MAvatarProps['slotProps'] & {
        typography?: TypographyProps;
        tooltip?: TooltipProps;
    };
    borderRadius?: CSSProperties['borderRadius'];
};
/** Simple composite component building on top of mui's
 * [Avatar](https://mui.com/material-ui/react-avatar/) component
 * <br/><br/>Additional features:
 * - convenience props for size, bgColor, color, fontSize, fullName
 * - display initials when no image is provided and !disableInitials (future: maybe outsource initialsFn)
 * - display tooltip with customTooltip or fallback fullName, to disableTooltip set customTooltip to ""<br/>
 * - props: additional to [Mui' Avatar Props](https://mui.com/material-ui/api/avatar/) <br/>
 * @prop size - size of the avatar (all size dimensions ?)<br/>
 * @prop children - Unformated text content to display in the avatar - PRECEEDS fullName<br/>
 * @prop fullName - full name of the user to display as initials (initial letter of first and last word) in the avator or tooltip<br/>
 * @prop fontSize - font size of the initials<br/>
 * @prop disableInitials - disable initials display<br/>
 * @prop customTooltip - custom tooltip to display<br/>
 * @prop bgColor - background color of the avatar
 * @prop color - color of the initials<br/>
 * @prop slotProps - additional slotProps for typography, tooltip and mui's img <br/>
 */
export declare const Avatar: (props: PropsWithChildren<AvatarProps>) => import("react/jsx-runtime").JSX.Element;