import type { AvatarBaseProps } from '@fluentui/react-avatar';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities/';
import type { PersonaProps as PersonaProps_2 } from '@fluentui/react-persona';
import type { PersonaSlots as PersonaSlots_2 } from '@fluentui/react-persona';
import type { PersonaState as PersonaState_2 } from '@fluentui/react-persona';
import type * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';

/**
 * An avatar component that displays an image or icon.
 */
declare const Avatar: ForwardRefComponent<AvatarProps>;

/**
 * Avatar component props
 */
declare type AvatarProps = AvatarBaseProps;

/**
 * Represents a person or with an avatar, primary text, and optional secondary text.
 */
export declare const Persona: ForwardRefComponent<PersonaProps>;

/**
 * Persona Props
 */
export declare type PersonaProps = ComponentProps<PersonaSlots> & Pick<PersonaProps_2, 'name' | 'textPosition'>;

export declare type PersonaSlots = Omit<PersonaSlots_2, 'avatar' | 'presence'> & {
    avatar?: Slot<typeof Avatar>;
};

/**
 * State used in rendering Persona
 */
export declare type PersonaState = ComponentState<PersonaSlots> & Pick<PersonaState_2, 'textPosition' | 'numTextLines'> & {
    root: {
        'data-text-position'?: PersonaState_2['textPosition'];
    };
};

export declare const renderPersona: (state: PersonaState) => JSXElement;

/**
 * Create the state required to render Persona.
 *
 * The returned state can be modified with hooks such as usePersonaStyles_unstable,
 * before being passed to renderPersona_unstable.
 *
 * @param props - props from this instance of Persona
 * @param ref - reference to root HTMLDivElement of Persona
 */
export declare const usePersona: (props: PersonaProps, ref: React_2.Ref<HTMLDivElement>) => PersonaState;

export { }