import { PopperPlacementType, PopperProps } from '@mui/material/Popper'; import { SxProps, Theme } from '@mui/material/styles'; import { ReactNode } from '../../../node_modules/react'; import { AvatarProps, AvatarSize } from '../Avatar'; import { BoxProps } from '../Box'; import { PaperProps } from '../Paper'; import { TypographyProps } from '../Typography'; import { ProfileCardAvatar, ProfileCardData, ProfileCardVariant } from './types'; export interface ProfileCardSlotProps { trigger?: BoxProps; avatar?: AvatarProps; name?: TypographyProps; paper?: PaperProps; popper?: Partial; } export interface ProfileCardProps { /** Display name. Seeds the trigger label, avatar initials, and avatar color. */ name: string; /** * Trigger avatar image. Initials and colors are derived from `name`, and the * shape from `variant` — the same shape the card's own avatars use. */ avatar?: ProfileCardAvatar; /** Trigger avatar size. `small` 18px, `medium` 24px, `large` 32px, `extraLarge` 40px. @default 'medium' */ avatarSize?: AvatarSize; /** * Card payload. Omit it and only the avatar and name render — pass it (or * fetch it in `onHoverIntent`) to let the card open. */ data?: ProfileCardData; /** * Card kind, and the only place it is set. `customer` uses a circular avatar * and the customer banner; `user` uses a rounded-square avatar and the user * banner. Shapes the trigger avatar and every avatar on the card. * @default 'user' */ variant?: ProfileCardVariant; /** Escape hatch for a fully custom card body. Replaces `data` rendering. */ content?: ReactNode; /** * Fires once the pointer has rested on the trigger for `hoverDelay`, and * only while there is no card to show — the cue to fetch the profile. Skipped * when `data` or `content` is already available, so a cached row does not refetch. */ onHoverIntent?: () => void; /** * Sustained hover in ms before `onHoverIntent` fires and the card may open. * Keyboard focus bypasses this. * @default 800 */ hoverDelay?: number; /** * Delay in ms before the card closes after hover leaves the trigger or card. * @default 200 */ leaveDelay?: number; /** Shows a spinner in place of the card while `onHoverIntent` resolves. */ loading?: boolean; /** Card width in px. @default 346 */ width?: number; /** Width of the detail label column in px. @default 88 */ labelWidth?: number; /** * Caps the card height in px — taller content scrolls inside the card. * Defaults to the variant preset (382 for `customer`, 412 for `user`). * Pass `'none'` to drop the fixed cap; the card still stays in the viewport. */ maxHeight?: number | string; /** * Preferred popper placement relative to the trigger. The card flips to the * opposite side when the preferred one does not fit — see `flip`. * @default 'bottom-start' */ placement?: PopperPlacementType; /** * Lets the card open on the opposite side when the preferred `placement` * would overflow the viewport. * @default true */ flip?: boolean; /** * Placements tried, in order, when `placement` does not fit. * @default the opposite side with the same alignment */ fallbackPlacements?: PopperPlacementType[]; /** When true, hover is ignored and only the avatar and name render. */ disabled?: boolean; /** * Whether the card is shown. Always controlled — hover and focus call * `onOpenChange` and never open the popup on their own. * @default false */ open?: boolean; /** Called after the dwell delay to open, and after `leaveDelay` to close. */ onOpenChange?: (open: boolean) => void; /** Popper offset `[skidding, distance]`. @default [0, 8] */ offset?: [number, number]; slotProps?: ProfileCardSlotProps; /** Styles applied to the trigger row, not the card. Use `slotProps.paper` for the card. */ sx?: SxProps; } export declare const ProfileCard: { ({ name, avatar, avatarSize, data, variant, content, onHoverIntent, hoverDelay, leaveDelay, loading, width, labelWidth, maxHeight, placement, flip, fallbackPlacements, disabled, open, onOpenChange, offset, slotProps, sx, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element; displayName: string; };