/**
 * @fileoverview Positioned tooltip hotspot markers on an image or container.
 * @author Saasflare™
 * Renders pulsing dot markers at absolute positions with tooltips on hover.
 * @module packages/ui/components/ui/hotspot
 * @package ui
 *
 * @component
 * @example
 * import { Hotspot, HotspotMarker } from '@saasflare/ui';
 * <Hotspot>
 *   <img src="/product.png" alt="Product" />
 *   <HotspotMarker x={30} y={45} label="Dashboard" />
 *   <HotspotMarker x={70} y={60} label="Analytics" />
 * </Hotspot>
 */
import * as React from "react";
import { type ReactNode } from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Props for the Hotspot container. */
export interface HotspotProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
    /** Background content (image, illustration, etc.) plus HotspotMarker children. */
    children: ReactNode;
    /** Additional class names. */
    className?: string;
}
/**
 * Container for positioned hotspot markers.
 *
 * @component
 * @package ui
 */
export declare function Hotspot({ children, className, surface, radius, animated, iconWeight, ...props }: HotspotProps): import("react/jsx-runtime").JSX.Element;
/** Props for a HotspotMarker. */
export interface HotspotMarkerProps extends Omit<React.ComponentProps<"div">, "color" | keyof SaasflareComponentProps>, SaasflareComponentProps {
    /** Horizontal position as percentage (0–100). */
    x: number;
    /** Vertical position as percentage (0–100). */
    y: number;
    /** Tooltip label text. */
    label: string;
    /** Detailed description shown in the tooltip. */
    description?: string;
    /** Marker dot color. Default: `"var(--primary)"` */
    color?: string;
    /** Additional class names. */
    className?: string;
}
/**
 * Pulsing dot marker with hover/focus tooltip at an absolute position.
 *
 * The pulse ring honors the `animated` axis (Pattern B): when animations are
 * disabled the ring stops pinging. The tooltip is reachable by keyboard (focus
 * reveals it) and associated to the trigger via `aria-describedby`.
 *
 * @component
 * @package ui
 */
export declare function HotspotMarker({ x, y, label, description, color, className, surface, radius, animated, iconWeight, ...props }: HotspotMarkerProps): import("react/jsx-runtime").JSX.Element;