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

import { AvatarProps } from './Avatar.js';
import * as React from 'react';
/** Props for a focusable Avatar that exposes a hover- and focus-triggered tooltip. */
export type AvatarWithTooltipProps = AvatarProps & {
    /** Text shown when the avatar receives hover or keyboard focus. */
    tooltip: string;
};
/**
 * Makes an Avatar focusable so people can identify it with a tooltip.
 *
 * Use `AvatarWithTooltip` when the avatar needs hover and keyboard-focus
 * feedback but does not perform an action. Use `InteractiveAvatar` when the
 * avatar also needs a press action.
 * @param props - Avatar content, accessible naming, visual options, and tooltip text.
 * @param props.tooltip - Text shown on hover and keyboard focus.
 * @param props.aria-label - Accessible name announced for the avatar trigger.
 * @param props.aria-labelledby - ID of visible text that names the avatar trigger.
 * @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 AvatarWithTooltipProps} for all available props.
 * @see {@link InteractiveAvatar} for an actionable avatar with the same tooltip behavior.
 * @example
 * ```tsx
 * import {
 *   AvatarFallback,
 *   AvatarWithTooltip,
 * } from '@payfit/unity-components'
 *
 * export function EmployeeAvatar() {
 *   return (
 *     <AvatarWithTooltip tooltip="Alex Wu" aria-label="Alex Wu">
 *       <AvatarFallback variant="initials">AW</AvatarFallback>
 *     </AvatarWithTooltip>
 *   )
 * }
 * ```
 * @remarks
 * The component renders a real button as the tooltip trigger, but it does not
 * attach press callbacks and keeps the default cursor. The trigger receives
 * the avatar's focus ring and the tooltip opens on hover or keyboard focus.
 * Provide `aria-label` or `aria-labelledby`; the visible Avatar is hidden from
 * assistive technologies because the outer trigger owns the accessible name.
 */
declare const AvatarWithTooltip: React.ForwardRefExoticComponent<AvatarWithTooltipProps & React.RefAttributes<HTMLButtonElement>>;
export { AvatarWithTooltip };