import React from 'react';
import { ThemeOverrideProps, useResolvedTheme } from '@xsolla/xui-core';

interface AvatarProps extends ThemeOverrideProps {
    /** Image source URL */
    src?: string;
    /** Icon component to display when no image is provided */
    icon?: React.ReactNode;
    /** Text/Initials to display when no image or icon is provided */
    text?: string;
    /** Size of the avatar */
    size?: "xl" | "lg" | "md" | "sm" | "xs" | "xxs";
    /** If true, the avatar will be square with small border radius. If false, it will be a circle. */
    square?: boolean;
    /** Visual tone — 'mono' (default) or 'brand'. */
    tone?: "mono" | "brand";
    /**
     * Whether to render the avatar's outer border (stroke). Defaults to `true`,
     * preserving the existing bordered look. Set to `false` to remove the border
     * entirely — useful on surfaces that already provide separation, or in dense
     * layouts where the border adds visual noise.
     */
    stroke?: boolean;
    /** Whether to show an alert badge */
    badge?: boolean;
    /** Number or text to display in the badge notification */
    badgeCount?: React.ReactNode;
    /** Icon to display in the badge */
    badgeIcon?: React.ReactNode;
    /**
     * Background colour override. Intended for internal use by AvatarGroup to
     * drive its `avatarBackgroundMode` cycling; not part of the public API.
     * @internal
     */
    backgroundColor?: string;
    /** Disable hover effect. Used internally by AvatarGroup. */
    disableHover?: boolean;
    /** Accessible label for the avatar. Recommended for screen readers. */
    "aria-label"?: string;
    /** Alternative text for the avatar image */
    alt?: string;
    /** Click handler for the avatar */
    onClick?: () => void;
    /** Color tone for the badge */
    badgeTone?: "primary" | "secondary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
    testID?: string;
}
declare const Avatar: React.FC<AvatarProps>;

type Theme = ReturnType<typeof useResolvedTheme>["theme"];
/** Item in the avatar group list */
interface AvatarGroupItem {
    /** Image source URL */
    src?: string;
    /** Initials to display when no image is provided */
    initials?: string;
    /** Tooltip text to display on hover */
    tooltip?: string;
    /** Whether to show a badge on the avatar */
    badge?: boolean;
    /** Number or text to display in the badge notification */
    badgeCount?: React.ReactNode;
    /** Icon to display in the badge */
    badgeIcon?: React.ReactNode;
    /** Color tone for the badge */
    badgeTone?: AvatarProps["badgeTone"];
}
/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */
type AvatarBackgroundMode = "mixed" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral" | ((theme: Theme) => string);
interface AvatarGroupProps extends ThemeOverrideProps {
    /**
     * List of avatars to display in the group.
     * `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.
     */
    list: AvatarGroupItem[];
    /** Size of the avatars in the group */
    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
    /**
     * Maximum number of slots rendered, including the "+N" overflow counter.
     * When the list exceeds this, (maxVisible - 1) avatars are shown plus a "+N" indicator.
     * When the list fits, all avatars are shown and no "+N" is rendered.
     */
    maxVisible?: number;
    /**
     * Controls the background color mode for avatars in the group.
     * - 'mixed' (default): Avatars cycle through different colors
     * - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars
     * - Theme function: A function that receives theme and returns any color from the design system.
     *   Example: (theme) => theme.colors.core.link.link
     */
    avatarBackgroundMode?: AvatarBackgroundMode;
    /** Accessible label for the avatar group. Defaults to "Group of X users". */
    "aria-label"?: string;
    testID?: string;
}
declare const AvatarGroup: React.FC<AvatarGroupProps>;

export { Avatar, type AvatarBackgroundMode, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps };