/**
 * @file AvatarGroup.tsx
 * @input Uses React, StyleX, theme tokens, AvatarGroupContext
 * @output Exports AvatarGroup component and AvatarGroupProps
 * @position Core implementation; consumed by index.ts
 *
 * Compositional API: children are Avatar elements (and optionally
 * one AvatarGroupOverflow). The group provides overlap styling via
 * context — no child introspection needed.
 *
 * When the group contains interactive avatars (rendered as links/buttons) or an
 * interactive AvatarGroupOverflow, it becomes a single Tab stop with roving
 * arrow-key focus (via useListFocus with hasRovingTabIndex) and exposes a
 * screen-reader keyboard hint via aria-describedby. A purely static facepile
 * gets neither — it stays a plain non-focusable group.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs (props table, features)
 * - /packages/core/src/AvatarGroup/index.ts (exports if types change)
 * - /apps/storybook/stories/AvatarGroup.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import { type AvatarSize } from '../Avatar';
export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element. */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Avatar children, optionally followed by one AvatarGroupOverflow.
     * Consumers are responsible for slicing to the desired visible count.
     */
    children: ReactNode;
    /**
     * Size applied to all avatars via context.
     * @default 'md'
     */
    size?: AvatarSize;
    /**
     * Test ID for integration testing.
     */
    'data-testid'?: string;
}
/**
 * Stacked avatar display showing multiple avatars overlapping with an
 * optional overflow indicator. Uses a compositional children-based API
 * so each avatar can carry its own props (status dots, click handlers, etc.).
 *
 * Consumers handle slicing — pass only the avatars you want visible,
 * then add an AvatarGroupOverflow for the "+N" indicator.
 *
 * @example
 * ```
 * <AvatarGroup size="lg">
 *   {users.slice(0, 3).map(u => (
 *     <Avatar key={u.id} src={u.src} name={u.name} />
 *   ))}
 *   <AvatarGroupOverflow count={users.length - 3} />
 * </AvatarGroup>
 * ```
 */
export declare function AvatarGroup({ children, size, 'data-testid': testId, 'aria-label': ariaLabelFromProps, 'aria-describedby': ariaDescribedByFromProps, onKeyDown, onFocus, xstyle, className, style, ref, ...props }: AvatarGroupProps): ReactNode;
export declare namespace AvatarGroup {
    var displayName: string;
}
//# sourceMappingURL=AvatarGroup.d.ts.map