import React from "react";
import { type StackProps } from "../Stack/Stack";
export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & StackProps<C> & {
    as?: C;
    children?: React.ReactNode;
    /**
     * In a group each avatar receives a border that
     * matches the background the group is on. This to
     * create some separation between the avatars.
     * In case your background is not white, you might
     * want to specify a different color.
     *
     * This color will be added to a Tailwind class in
     * the form of `ui:outline-{outlineColor}`.
     */
    outlineColor?: "surface" | "slate-50" | "slate-100" | "white";
    /**
     * The maximum number of avatars to show in the group, before
     * we render an extra element that shows there are more avatars.
     *
     * @default 3
     */
    maxAvatars?: number;
    /**
     * The label to show when there are more avatars than the
     * `maxAvatars` prop.
     * This function receives the amount of avatars that are not shown.
     */
    moreAvatarsLabel?: (avatarsNotShownCount: number) => React.ReactNode;
};
export declare const AvatarGroup: <C extends React.ElementType>(props: Props<C>) => React.JSX.Element;