@loke/design-system
Version:
A design system with individually importable components
31 lines (30 loc) • 2.02 kB
text/typescript
import * as AvatarPrimitive from "@loke/ui/avatar";
/**
* Avatar component for displaying a user's profile picture or initials
*
* The Avatar component provides a consistent way to represent users with images or fallback content when images are unavailable.
* It's commonly used in user interfaces for comments, user lists, profile pages, and navigation menus.
*/
declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
size?: "default" | "sm" | "lg";
}): import("react/jsx-runtime").JSX.Element;
/**
* AvatarImage component for displaying the user's profile picture
*
* This component renders the image within an Avatar component. It handles loading states intelligently
* and coordinates with the AvatarFallback component to provide a seamless user experience.
*
* When the image fails to load, this component renders nothing, allowing the fallback to be shown instead.
*/
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
/**
* AvatarFallback component for displaying alternative content when the image is unavailable
*
* This component provides a visual fallback when an avatar image is loading or has failed to load.
* It's typically used to display user initials, a generic user icon, or a placeholder graphic.
*/
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, };