import type { AvatarGroupBaseState } from '@fluentui/react-avatar';
import { AvatarGroupContextValue } from '@fluentui/react-avatar';
import { AvatarGroupContextValues } from '@fluentui/react-avatar';
import type { AvatarGroupItemBaseProps } from '@fluentui/react-avatar';
import { AvatarGroupItemSlots } from '@fluentui/react-avatar';
import { AvatarGroupItemBaseState as AvatarGroupItemState } from '@fluentui/react-avatar';
import { AvatarGroupBaseProps as AvatarGroupProps } from '@fluentui/react-avatar';
import type { AvatarGroupProps as AvatarGroupProps_2 } from '@fluentui/react-avatar';
import { AvatarGroupSlots } from '@fluentui/react-avatar';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { PartitionAvatarGroupItems } from '@fluentui/react-avatar';
import { partitionAvatarGroupItems } from '@fluentui/react-avatar';
import { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar';
import { PositioningShorthand } from '@fluentui/react-positioning';
import type * as React_2 from 'react';
import { renderAvatarGroup_unstable as renderAvatarGroup } from '@fluentui/react-avatar';
import { renderAvatarGroupItem_unstable as renderAvatarGroupItem } from '@fluentui/react-avatar';
import type { Slot } from '@fluentui/react-utilities';
import type { TooltipBaseProps } from '@fluentui/react-tooltip';

/**
 * The AvatarGroup component displays a group of Avatars, each represented as an AvatarGroupItem.
 */
export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;

export { AvatarGroupContextValue }

export { AvatarGroupContextValues }

/**
 * An AvatarGroupItem represents a single Avatar inside an AvatarGroup. When rendered
 * inside an AvatarGroupPopover it is displayed as an overflow item with its name label.
 */
export declare const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps>;

/**
 * TODO: Update the AvatarGroupItemProps to extend from AvatarGroupItemBaseProps once the color and idForColor props are removed from the base props.
 */
export declare type AvatarGroupItemProps = Omit<AvatarGroupItemBaseProps, 'color' | 'idForColor'>;

export { AvatarGroupItemSlots }

export { AvatarGroupItemState }

/**
 * The AvatarGroupPopover renders the overflowed AvatarGroupItems of an AvatarGroup
 * inside a headless Popover, triggered by a button showing the overflow count.
 */
export declare const AvatarGroupPopover: {
    (props: AvatarGroupPopoverProps): JSXElement;
    displayName: string;
};

/**
 * Subset of the headless {@link PopoverProps} forwarded to the underlying
 * `Popover` that wraps the overflow surface.
 */
export declare type AvatarGroupPopoverPopoverProps = Pick<PopoverProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'openOnHover' | 'openOnContext' | 'mouseLeaveDelay' | 'positioning' | 'withArrow' | 'trapFocus'>;

/**
 * AvatarGroupPopover Props
 */
export declare type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & AvatarGroupPopoverPopoverProps & {
    /**
     * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.
     * @default count
     */
    indicator?: 'count' | 'icon';
    /**
     * Number of AvatarGroupItems that will be rendered.
     *
     * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the
     * children, this is not possible and therefore it has to be added manually.
     */
    count?: number;
    children: React_2.ReactNode;
};

export declare type AvatarGroupPopoverSlots = {
    /**
     * Button that triggers the Popover.
     */
    triggerButton: NonNullable<Slot<'button'>>;
    /**
     * Tooltip slot for the trigger button.
     */
    tooltip: NonNullable<Slot<typeof Tooltip>>;
    /**
     * List that contains the overflowed AvatarGroupItems.
     */
    content: NonNullable<Slot<'ul'>>;
    /**
     * PopoverSurface that contains the content.
     */
    popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;
};

/**
 * AvatarGroupPopover State
 */
export declare type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {
    popoverOpen: boolean;
    layout: AvatarGroupProps_2['layout'];
    /**
     * Behavior props forwarded to the headless `Popover` wrapper.
     */
    popover: AvatarGroupPopoverPopoverProps;
};

export { AvatarGroupProps }

export { AvatarGroupSlots }

export declare type AvatarGroupState = AvatarGroupBaseState & {
    root: {
        'data-layout'?: AvatarGroupBaseState['layout'];
    };
};

/**
 * Data attached to open/close events. Uses the canonical `EventData` shape so
 * consumers can discriminate on `type` or use the handler directly via
 * `EventHandler<OnOpenChangeData>`.
 */
declare type OnOpenChangeData = EventData<string, React_2.SyntheticEvent | Event> & {
    open: boolean;
};

export { PartitionAvatarGroupItems }

export { partitionAvatarGroupItems }

export { PartitionAvatarGroupItemsOptions }

/**
 * Popover Props
 */
declare type PopoverProps = {
    /**
     * Can contain two children including `PopoverTrigger` and `PopoverSurface`.
     * Alternatively can only contain `PopoverSurface` if using a custom `target`.
     */
    children: [JSXElement, JSXElement] | JSXElement;
    /** Controlled open state. */
    open?: boolean;
    /**
     * Default open state for uncontrolled mode.
     * @default false
     */
    defaultOpen?: boolean;
    /** Callback when the open state changes. */
    onOpenChange?: EventHandler<OnOpenChangeData>;
    /**
     * Open on hover.
     * @default false
     */
    openOnHover?: boolean;
    /**
     * Open on context menu (right-click).
     * @default false
     */
    openOnContext?: boolean;
    /**
     * Delay in ms before closing on mouse leave.
     * @default 500
     */
    mouseLeaveDelay?: number;
    /**
     * Positioning configuration. Accepts either a full `PositioningProps`
     * object or a shorthand string such as `'below'` / `'above-end'`.
     *
     * See the {@link https://react.fluentui.dev/?path=/docs/headless-concepts-positioning--docs Positioning concept}
     * for the full list of options and live examples.
     */
    positioning?: PositioningShorthand;
    /**
     * Display an arrow pointing to the target.
     * @default false
     */
    withArrow?: boolean;
    /**
     * Optional id for the popover surface. When provided, this id is applied to
     * the `PopoverSurface` element and referenced by `PopoverTrigger`
     * (`aria-details`). If omitted, a generated id is used.
     */
    id?: string;
    /**
     * When true, opens the popover as a modal via `HTMLDialogElement.showModal()`.
     * Focus is trapped inside the surface, the rest of the page is inert, and
     * focus is restored to the trigger when the popover closes — all spec-mandated
     * by the native dialog element.
     *
     * When false (default), the popover is non-modal: opens via `showPopover()`,
     * the browser handles light dismiss (Escape, click-outside, popover-stack
     * peer dismissal), and no focus trap or autofocus is applied unless a child
     * has the HTML `autofocus` attribute.
     *
     * @default false
     */
    trapFocus?: boolean;
};

/**
 * Headless PopoverSurface component.
 *
 * Renders the popover content area as a native `<dialog popover="auto">` so
 * a single element supports both non-modal (`showPopover()`) and modal
 * (`showModal()`) show modes; the choice is driven by the parent
 * `Popover`'s `trapFocus` prop.
 */
declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;

declare type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;

/**
 * PopoverSurface Slots.
 *
 * The root renders as a native `<dialog popover="auto">` so a single element
 * supports both show modes: `showPopover()` for non-modal (default) and
 * `showModal()` for the modal/focus-trap path.
 */
declare type PopoverSurfaceSlots = {
    root: Slot<'dialog'>;
};

export { renderAvatarGroup }

export { renderAvatarGroupItem }

/**
 * Renders the final JSX of the AvatarGroupPopover component.
 *
 * Composes the headless `Popover`, `PopoverTrigger`, and `PopoverSurface` to
 * present the overflowed AvatarGroupItems. The overflow list is wrapped in an
 * `AvatarGroupProvider` so nested AvatarGroupItems render in their overflow form.
 */
export declare const renderAvatarGroupPopover: (state: AvatarGroupPopoverState, contextValues: AvatarGroupContextValues) => JSXElement;

/**
 * Tooltip renders a non-modal floating label or description anchored to a trigger element.
 */
declare const Tooltip: {
    (props: TooltipProps): JSXElement;
    displayName: string;
};

/**
 * Props for the Tooltip component.
 *
 * Reuses Tooltip base props while omitting `mountNode` for the headless preview API surface.
 * Positioning is handled by the Tooltip base implementation via `usePositioning` from
 * `@fluentui/react-positioning`.
 */
declare type TooltipProps = Omit<TooltipBaseProps, 'mountNode'>;

/**
 * Returns the state for an AvatarGroup component, given its props and ref.
 * The returned state can be modified with hooks before being passed to `renderAvatarGroup`.
 */
export declare const useAvatarGroup: (props: AvatarGroupProps, ref: React_2.Ref<HTMLDivElement>) => AvatarGroupState;

/**
 * Builds the context value shared with the AvatarGroupItems and AvatarGroupPopover
 * rendered inside the AvatarGroup. Only the design-agnostic `layout` is forwarded;
 * the styling `size` is owned by the consumer.
 */
export declare const useAvatarGroupContextValues: (state: AvatarGroupState) => AvatarGroupContextValues;

/**
 * Returns the state for an AvatarGroupItem component, given its props and ref.
 *
 * Reuses the design-agnostic base hook from `@fluentui/react-avatar` for the
 * root/overflow-label wiring, then swaps the `avatar` slot to render the
 * headless `Avatar` from this package instead of the styled v9 Avatar.
 */
export declare const useAvatarGroupItem: (props: AvatarGroupItemProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupItemState;

/**
 * Returns the state for an AvatarGroupPopover component.
 *
 * The design-agnostic base hook from `@fluentui/react-avatar` drives the
 * triggerButton content (the overflow count / indicator) and the overflow
 * list. Open/close behavior is delegated to the headless `Popover` wrapper, so
 * the popover-behavior props are surfaced on `state.popover` rather than wired
 * into a v9 Popover slot.
 */
export declare const useAvatarGroupPopover: (props: AvatarGroupPopoverProps) => AvatarGroupPopoverState;

/**
 * Builds the context value provided to the overflowed AvatarGroupItems rendered
 * inside the popover surface. `isOverflow` switches the items to their overflow
 * (list) presentation.
 */
export declare const useAvatarGroupPopoverContextValues: (state: AvatarGroupPopoverState) => AvatarGroupContextValues;

export { }