import { ClassValue, StyledComponentProps } from "../../types/shared.js";
import { AvatarSlots } from "./avatar-variants.js";
import { AvatarFallbackProps, AvatarImageProps, AvatarProps } from "@radix-ui/react-avatar";

//#region src/components/avatar/types.d.ts

/**
 * Class names for different slots in the avatar component.
 * Allows customizing styles for specific parts of the avatar.
 */
type AvatarUi = Partial<Record<AvatarSlots, ClassValue>>;
/**
 * Props for the avatar root component.
 * Serves as the main container for the avatar element.
 */
interface AvatarRootProps extends StyledComponentProps<AvatarProps> {}
/**
 * Props for the avatar fallback component.
 * Displays alternative content when the avatar image fails to load.
 */
interface AvatarFallbackProps$1 extends StyledComponentProps<AvatarFallbackProps> {}
/**
 * Props for the avatar image component.
 * Displays the avatar image from a specified source.
 */
interface AvatarImageProps$1 extends StyledComponentProps<AvatarImageProps> {}
/**
 * Props for the main Avatar component.
 * Combines image and fallback content for displaying user avatars with graceful degradation.
 *
 * @example
 * ```jsx
 * <Avatar
 *   src="https://example.com/avatar.jpg"
 *   alt="John Doe"
 *   fallback="JD"
 *   delayMs={600}
 * />
 * ```
 */
interface AvatarProps$1 extends AvatarImageProps$1, Pick<AvatarFallbackProps$1, 'delayMs'> {
  /**
   * Class names for customizing different parts of the avatar.
   */
  classNames?: AvatarUi;
  /**
   * Fallback content displayed when the image fails to load or is still loading.
   * Typically shows initials or a placeholder icon.
   */
  fallback?: React.ReactNode;
}
//#endregion
export { AvatarFallbackProps$1 as AvatarFallbackProps, AvatarImageProps$1 as AvatarImageProps, AvatarProps$1 as AvatarProps, AvatarRootProps, AvatarUi };