import React from 'react';
export type AvatarSize = 'mini' | 'sm' | 'md' | 'lg';
export type AvatarShape = 'circle' | 'square';
/**
 * The intents Figma's `Status Indicator` draws. Same six words as `BadgeIntent`
 * and `AlertIntent`, and deliberately so — an indicator is the smallest way this
 * system says "success", and it should not say it differently here.
 */
export type AvatarIndicatorIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'information';
export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
    /** Matches the Figma `Size` variant: Mini 24, Small 32, Medium 40, Large 48. */
    size?: AvatarSize;
    /** Matches the Figma `Shape` variant. */
    shape?: AvatarShape;
    /** Image source. Figma's `Type=Image`. */
    src?: string;
    /**
     * Describes the person, not the picture. Falls back to `initials` so the
     * avatar is never announced as an unlabelled image.
     */
    alt?: string;
    /** Figma's `Type=Character`. Rendered when there is no `src`, or when `src`
     *  fails to load. */
    initials?: string;
    /** Figma's `Type=Icon`. Rendered when there is neither `src` nor `initials`. */
    icon?: React.ReactNode;
    /** Figma's `Show Ring` — a 1px/2px brand ring drawn inside the avatar's edge. */
    ring?: boolean;
    /**
     * Figma's `Show Top Indicator`, as the intent of the `Status Indicator`
     * instance it holds. Top-right, and it carries a glyph: this is the corner
     * that says something was verified or requested, not who is online.
     */
    topIndicator?: AvatarIndicatorIntent;
    /** Replaces the top indicator's default check glyph. */
    topIndicatorIcon?: React.ReactNode;
    /** Names the top indicator for assistive tech. Without it the mark is decorative. */
    topIndicatorLabel?: string;
    /**
     * Figma's `Show Bottom Indicator`. Bottom-right and glyphless — the presence
     * dot.
     */
    bottomIndicator?: AvatarIndicatorIntent;
    /** Names the bottom indicator for assistive tech. Colour alone is not a status. */
    bottomIndicatorLabel?: string;
}
/**
 * Avatar picks its content the way Figma's `Type` variant does, but by
 * precedence rather than by a prop: image, then initials, then icon. A caller
 * passing `src` and `initials` gets the image with the initials as its alt
 * fallback, which is what you want when the image 404s.
 *
 * A failed `src` falls through to initials (then icon) rather than leaving the
 * browser's broken-image glyph — that is why initials exist alongside `src`.
 *
 * It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
 * caller fighting a block element.
 *
 * THE MEDIA IS A CHILD, AND IT HAS TO BE
 *
 * The box that clips the image is `.ion-avatar__media`, not the root. The root
 * cannot clip: a corner indicator sits outside a circle's clip path and would
 * be sliced in half by the `overflow: hidden` that crops the photo. Figma
 * draws exactly this — an unclipped frame holding a clipped `Media` child and
 * the indicators as its siblings.
 */
export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    size?: AvatarSize;
    /** Cap on avatars shown; the remainder becomes a `+N` overflow avatar. */
    max?: number;
    shape?: AvatarShape;
    /**
     * The overflow avatar's name — "4 more" in English. Receives the count as a
     * number so a translation can choose its plural form.
     */
    overflowLabel?: (count: number) => string;
    children?: React.ReactNode;
}
/**
 * AvatarGroup overlaps its children by a quarter of the avatar size, matching
 * Figma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.
 *
 * Group defaults fill in `size` / `shape` only when a child Avatar has not set
 * them itself — an explicit child prop wins. Non-Avatar children are left
 * alone so `size`/`shape` are never pushed onto arbitrary DOM nodes.
 *
 * Children render in source order because that is Figma's stacking: each avatar
 * paints over the one before it, so the `+N` overflow ends up on top. Later
 * siblings paint later, so this needs no z-index.
 */
export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=Avatar.d.ts.map