import { type JSX } from 'react';
import { type SaasflareComponentProps } from '../../../providers';
/**
 * Shape of a single tooltip item.
 */
export interface TooltipItem {
    /** Unique numeric identifier (used for hover matching). */
    id: number;
    /** Display name shown in the tooltip. */
    name: string;
    /** Secondary label (e.g. job title, role). */
    designation: string;
    /** Image source path or absolute URL. */
    image: string;
}
/**
 * AnimatedTooltip
 *
 * Renders a row (or flex-wrapped set) of circular avatar images that reveal
 * an animated, tilted tooltip on hover. The tooltip tilts and translates in
 * sync with the user’s mouse position, creating a smooth parallax effect.
 *
 * @component
 * @param {Object}   props
 * @param {TooltipItem[]} props.items – Array of tooltip items to render.
 * @returns {JSX.Element} React element containing the interactive avatars.
 *
 * @example
 * ```tsx
 * <AnimatedTooltip
 *   items={[
 *     { id: 1, name: 'Michaela', designation: 'Creator', image: '/img/michaela.jpg' },
 *     { id: 2, name: 'Lukas',    designation: 'Marketer', image: '/img/lukas.jpg'    },
 *   ]}
 * />
 * ```
 */
export interface AnimatedTooltipProps extends SaasflareComponentProps {
    items: TooltipItem[];
}
/**
 * Row of circular avatar images that reveal a spring-animated, mouse-tracking
 * tooltip (name + designation) on hover or keyboard focus. Suited for team
 * strips, contributor lists, and social-proof clusters. The parallax tilt is
 * skipped entirely when the resolved `animated` axis is off.
 *
 * @component
 * @layer ui
 */
export declare const AnimatedTooltip: ({ items, surface, radius, animated, iconWeight, }: AnimatedTooltipProps) => JSX.Element;