dgz-ui/dist/types/ui/avatar/avatar.d.ts

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

import { VariantProps } from 'class-variance-authority';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import * as React from 'react';
/**
 * Avatar size variants configuration using class-variance-authority.
 * Defines different avatar sizes with corresponding Tailwind CSS classes.
 */
export declare const avatarVariants: (props?: ({
    size?: "default" | "lg" | "sm" | "md" | "xl" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
/**
 * Props interface for the Avatar component.
 * Extends Radix UI Avatar Root props with size variant support.
 */
export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
}
/**
 * Avatar component - A circular container for displaying user profile images or initials.
 *
 * Built on top of Radix UI's Avatar primitive with additional size variants.
 * Supports image display with automatic fallback to placeholder content.
 *
 * @example
 * ```tsx
 * // Basic usage with image and fallback
 * <Avatar size="lg">
 *   <AvatarImage src="/path/to/image.jpg" alt="User name" />
 *   <AvatarFallback>JD</AvatarFallback>
 * </Avatar>
 *
 * // Small avatar with custom styling
 * <Avatar size="sm" className="border-2 border-blue-500">
 *   <AvatarImage src="/avatar.jpg" alt="Profile" />
 *   <AvatarFallback className="bg-blue-100">U</AvatarFallback>
 * </Avatar>
 * ```
 *
 * @param size - The size variant of the avatar (sm, default, md, lg, xl)
 * @param className - Additional CSS classes to apply
 * @param children - Child components (typically AvatarImage and AvatarFallback)
 */
export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
/**
 * AvatarImage component - Displays the actual avatar image.
 *
 * Automatically handles image loading and will fall back to AvatarFallback
 * if the image fails to load or is not provided.
 *
 * @example
 * ```tsx
 * <AvatarImage
 *   src="https://example.com/avatar.jpg"
 *   alt="John Doe's profile picture"
 *   className="object-cover"
 * />
 * ```
 *
 * @param src - The image source URL
 * @param alt - Alternative text for accessibility
 * @param className - Additional CSS classes to apply
 */
export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
/**
 * AvatarFallback component - Displays fallback content when image is unavailable.
 *
 * Typically contains user initials, an icon, or other placeholder content.
 * Only renders when the AvatarImage fails to load or is not provided.
 *
 * @example
 * ```tsx
 * // Text fallback with user initials
 * <AvatarFallback className="bg-blue-500 text-white">
 *   JD
 * </AvatarFallback>
 *
 * // Icon fallback
 * <AvatarFallback>
 *   <UserIcon className="h-4 w-4" />
 * </AvatarFallback>
 * ```
 *
 * @param className - Additional CSS classes to apply
 * @param children - Fallback content (text, icons, etc.)
 */
export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=avatar.d.ts.map