import type { ReactNode, FC } from "react"; /** * @deprecated Use `isSelf` instead: `primary` -> `isSelf`, `slate` -> * `isSelf={false}`. The design system models this as who the avatar * belongs to, not as a color, and these names no longer describe the * colors that are actually rendered. */ type AvatarColor = "primary" | "slate"; /** * The sizes defined by the design system. Their actual dimensions come * from the semantic size tokens in `avatarSizeTokens`, so they follow * the design whenever the tokens are re-exported. */ type AvatarSize = "xs" | "s" | "m"; /** * @deprecated Use the design system sizes instead: `xsmall` -> `xs`, * `small` -> `s`, `medium` -> `m`. `large` has no equivalent in the * design system and will be removed in a future major release. */ type LegacyAvatarSize = "large" | "medium" | "small" | "xsmall"; type AvatarSizeProp = AvatarSize | LegacyAvatarSize; /** * Union to prevent both "isSelf" and the deprecated "color" from being * used at the same time, which would otherwise silently let one of them * win. Passing both is a type error. */ type ColorProps = { /** * Whether the avatar belongs to the current user. Self avatars are * rendered in the brand color, everyone else in neutral. * * @default false */ isSelf?: boolean; color?: never; } | { /** * @deprecated Use `isSelf` instead: `primary` -> `isSelf`, * `slate` -> `isSelf={false}`. */ color: AvatarColor; isSelf?: never; }; /** * Union to prevent both "initials" and "children" to be used at the same time. */ type BaseProps = { initials: string; children?: never; } | { children: ReactNode; initials?: never; }; type Props = { src?: string; /** * Put the name of the person here, so less sighted * users can know who the avatar belongs to. * * In case of rendering the default image or the * initials, this will also be used as the `alt` text. */ alt?: string; /** * Size of the avatar. Prefer the current sizes `xs`, `s` and `m`. The * `xsmall` / `small` / `medium` spellings are deprecated aliases of * those, and `large` is deprecated without a replacement. * * @default "m" */ size?: AvatarSizeProp; /** * URL to an image to be used as the default image. * If this is set, the image provided via `src` will never render. */ defaultImage?: string; className?: string; /** * Sometimes avatars are rendered in a group. Setting this to `true` * makes it so that the avatars overlap each other a bit, as designed. */ applyGroupOffset?: boolean; } & BaseProps & ColorProps; /** * Displays a badge-style avatar. Keep in mind that * you can only use `initials` or `children`, not both. * * @example * // Using initials * * * @example * // Using children * * Jane Doe * */ export declare const Avatar: FC; export {};