import { ReactNode } from 'react';
import type * as React from "react";
export type AvatarStackItem = {
    /** Stable key for the item. */
    id: string;
    /** Compact tile shown in the overlapping row (avatar/icon). */
    avatar: ReactNode;
    /** Row content shown inside the overflow popover. Defaults to `avatar`. */
    overflowRow?: ReactNode;
    /**
     * Accessible label for the overflow row. Pass this whenever `onSelect` makes
     * the row an interactive button — its content is often icon-only, so the
     * label is the button's accessible name.
     */
    overflowRowLabel?: string;
    /** Click handler for the overflow row; renders the row as a button. */
    onSelect?: () => void;
};
export type AvatarStackProps = {
    /** Ordered items; the first `maxVisible` render inline, the rest overflow. */
    items: AvatarStackItem[];
    /** Items past this count collapse into the "+N" overflow. @default 5 */
    maxVisible?: number;
    /** Noun phrase completing the "+N" trigger label, e.g. "more servers". */
    overflowLabel?: string;
    /** Popover header content; receives the overflow count. Omit for no header. */
    renderOverflowHeader?: (overflowCount: number) => ReactNode;
    /** Reveal overflow items in a popover. When false, "+N" is a static badge. @default true */
    overflowPopover?: boolean;
} & Omit<React.ComponentProps<"span">, "children">;
export declare function AvatarStack({ items, maxVisible, overflowLabel, renderOverflowHeader, overflowPopover, className, ...rest }: AvatarStackProps): React.JSX.Element | null;
//# sourceMappingURL=avatar-stack.d.ts.map