import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
export declare const avatarStyles: (props?: ({
    size?: "lg" | "md" | "sm" | null | undefined;
    shape?: "rounded" | "circle" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>, VariantProps<typeof avatarStyles> {
}
/**
 * A person or an account, as an image with a text fallback.
 *
 * **The fallback is the point.** An avatar whose image 404s and renders a broken-image glyph is
 * worse than no avatar, and it is the state nobody tests. Base UI tracks the image's load status and
 * swaps in `AvatarFallback` on error, so the failure path is the primitive's rather than a caller's
 * `onError` handler.
 *
 * @example
 * <Avatar>
 *   <AvatarImage src={user.photo} alt="" />
 *   <AvatarFallback>{initials}</AvatarFallback>
 * </Avatar>
 */
export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>;
/**
 * The image.
 *
 * `alt=""` is usually correct and is deliberately not defaulted: an avatar beside the name it
 * belongs to is decorative, and alt text repeating the name is noise — but an avatar that is the
 * only identification of a person needs a real one. The caller knows which.
 */
export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>;
/** Shown while the image loads and if it fails. Initials, or an icon. */
export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
export interface AvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    /**
     * Presence or status. `none` renders the badge as a plain dot the caller colours themselves.
     * @default 'none'
     */
    status?: 'none' | 'available' | 'busy' | 'away' | 'offline';
}
/**
 * A status dot on the avatar's corner.
 *
 * `aria-hidden` by default and NOT because status does not matter — because a coloured dot conveys
 * it by hue alone, which WCAG 1.4.1 prohibits, so it cannot be the only carrier. Put the status in
 * text beside the avatar (or in the accessible name of whatever contains it) and leave this as the
 * visual echo. `ring-2 ring-surface-base` cuts the dot out of the image beneath it so it stays
 * legible on a busy photo.
 */
export declare const AvatarBadge: React.ForwardRefExoticComponent<AvatarBadgeProps & React.RefAttributes<HTMLSpanElement>>;
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Accessible name for the group — "Three people on this account". A row of overlapping images with
     * no name is a set of unlabelled graphics.
     */
    label?: string;
}
/**
 * Overlapping avatars.
 *
 * `-space-x-2` plus a ring on each child, so the overlap reads as a stack rather than a smear. The
 * group takes `role="group"` and a name, because the individual images are decorative once they are
 * a pile — the information is "how many and who", and that belongs to the container.
 */
export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
export interface AvatarGroupCountProps extends React.HTMLAttributes<HTMLSpanElement> {
    /** How many are not shown. Rendered as `+n`. */
    count: number;
}
/**
 * The overflow count at the end of a group.
 *
 * Same geometry as an avatar so the row stays even, and it is real text rather than an image, so
 * "+3" is announced when the group is read.
 */
export declare const AvatarGroupCount: React.ForwardRefExoticComponent<AvatarGroupCountProps & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=avatar.d.ts.map