@payfit/unity-components/dist/esm/components/avatar/InteractiveAvatar.d.ts

import { ActionableProps } from '../actionable/Actionable.js';
import { AvatarProps } from './Avatar.js';
import * as React from 'react';
/** Props for an actionable Avatar with an accessible tooltip. */
export type InteractiveAvatarProps = Omit<AvatarProps, 'aria-label' | 'aria-labelledby'> & {
    /** Text shown on hover and keyboard focus to describe the action. */
    tooltip: string;
    /** Accessible name for the button. */
    'aria-label': string;
    /** Callback invoked when the avatar is pressed. */
    onPress: NonNullable<ActionableProps['onPress']>;
} & Pick<ActionableProps, 'onPressStart' | 'onPressEnd' | 'onPressChange'>;
/**
 * Combines an actionable Avatar with a tooltip that describes its action.
 *
 * Use `InteractiveAvatar` when a person or entity avatar activates an action,
 * opens a Popover, or triggers navigation. Pass `onPress` for the action and
 * provide the same action description through `tooltip` and `aria-label`.
 * @param props - Avatar content, visual options, accessible naming, tooltip text, and press callbacks.
 * @param props.tooltip - Text shown on hover and keyboard focus.
 * @param props.aria-label - Accessible name announced for the button.
 * @param props.onPress - Callback invoked after a pointer or keyboard press.
 * @param props.onPressStart - Callback invoked when a press starts.
 * @param props.onPressEnd - Callback invoked when a press ends.
 * @param props.onPressChange - Callback invoked when the pressed state changes.
 * @param props.variant - Avatar shape: `circle` for people or `square` for entities.
 * @param props.size - Avatar size. The AvatarGroup context supplies a responsive
 * size when this prop is omitted.
 * @see {@link InteractiveAvatarProps} for all available props.
 * @see {@link AvatarWithTooltip} for a focusable avatar without an action.
 * @example
 * ```tsx
 * import {
 *   AvatarFallback,
 *   InteractiveAvatar,
 * } from '@payfit/unity-components'
 *
 * export function EmployeeAction({ openProfile }: { openProfile: () => void }) {
 *   return (
 *     <InteractiveAvatar
 *       tooltip="Open Alex Wu's profile"
 *       aria-label="Open Alex Wu's profile"
 *       onPress={openProfile}
 *     >
 *       <AvatarFallback variant="initials">AW</AvatarFallback>
 *     </InteractiveAvatar>
 *   )
 * }
 * ```
 * @remarks
 * The component renders a real button and supports React Aria press
 * callbacks, including keyboard activation. Its focus ring follows the
 * selected `variant`. Provide `aria-label` because the inner visual Avatar is
 * hidden from assistive technologies; use `PopoverTrigger` when the action
 * opens a Popover.
 */
declare const InteractiveAvatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "aria-label" | "aria-labelledby"> & {
    /** Text shown on hover and keyboard focus to describe the action. */
    tooltip: string;
    /** Accessible name for the button. */
    'aria-label': string;
    /** Callback invoked when the avatar is pressed. */
    onPress: NonNullable<ActionableProps["onPress"]>;
} & Pick<ActionableProps, "onPressStart" | "onPressEnd" | "onPressChange"> & React.RefAttributes<HTMLButtonElement>>;
export { InteractiveAvatar };