@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
99 lines (98 loc) • 3.1 kB
TypeScript
import { VariantProps } from 'class-variance-authority';
import { ComponentProps, ReactNode } from 'react';
import { Nil } from '../../utils/misc';
type AvatarProps = VariantProps<typeof avatarVariance> & ComponentProps<"div"> & {
/**
* The source URL of the avatar image.
* If provided, the image will be displayed.
* If the image fails to load, the fallback content will be shown.
*/
src?: Nil<string>;
/**
* Custom fallback content to display when:
* - No src is provided
* - The image fails to load
* - The name is not provided
*
* Initials from the name will be used as fallback if provided.
*/
fallback?: ReactNode;
/**
* The name associated with the avatar.
* Used for:
* - Generating fallback initials when no fallback is provided
* - Setting the alt text for the image
*/
name?: Nil<string>;
/**
* Overlay content to render on top of the avatar.
* Can be any ReactNode - badges, status indicators, icons, etc.
* Positioned absolutely within the avatar container.
*/
overlay?: ReactNode;
/**
* How the image should be resized to fit its container.
* - `cover`: Image covers the entire container, may be cropped.
* - `contain`: Image fits within the container, may have empty space.
*
* @default "cover"
*/
objectFit?: "cover" | "contain";
};
/**
* Extracts initials from a given name string.
* For full names, returns first letters of first and last name.
* For single names, returns first two letters.
*/
export declare const getInitials: (value: string) => string;
export declare const avatarVariants: {
/**
* Affects width, height, and font size.
* - `sm`: 32px with smaller text.
* - `default`: 48px with base text.
* - `lg`: 64px with larger text.
*
* @default "default"
*/
size: {
sm: string;
default: string;
lg: string;
};
};
export declare const avatarVariance: (props?: ({
size?: "default" | "sm" | "lg" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
/**
* Avatar component that displays a user's profile picture or fallback content.
* Supports different sizes and can show either an image, custom fallback content,
* or automatically generated initials from a name.
*
* @example
* ```tsx
* // Basic usage with image
* <Avatar src="/path/to/image.jpg" name="John Doe" />
* ```
*
* @example
* ```tsx
* // With custom fallback
* <Avatar name="John Doe" fallback={<UserIcon />} />
* ```
*
* @example
* ```tsx
* // With overlay (e.g., status badge)
* <Avatar name="John Doe" overlay={<Badge variant="success" />} />
* ```
*
* @example
* ```tsx
* // Different sizes
* <Avatar size="sm" name="John Doe" />
* <Avatar size="default" name="John Doe" />
* <Avatar size="lg" name="John Doe" />
* ```
*/
export declare const Avatar: ({ className, src, fallback, size, name, overlay, objectFit, ...props }: AvatarProps) => import("react").JSX.Element;
export {};