import { ReactNode } from "react";
export type TooltipPlacement = "top" | "right" | "bottom" | "left";
export interface TooltipThemeOverrides {
    /**
     * Base style for the tooltip container
     */
    baseStyle?: string;
    /**
     * Placement styles
     */
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
}
export interface TooltipProps {
    /**
     * Content to display in the tooltip
     */
    content: ReactNode;
    /**
     * The element that triggers the tooltip
     */
    children: ReactNode;
    /**
     * Tooltip placement relative to the child element
     * @default "top"
     */
    placement?: TooltipPlacement;
    /**
     * Delay before showing tooltip (in ms)
     * @default 300
     */
    delay?: number;
    /**
     * Whether the tooltip is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Additional classes for the tooltip container
     */
    className?: string;
    /**
     * Max width for the tooltip content
     * @default "360px"
     */
    maxWidth?: string;
    /**
     * Min width for the tooltip content
     * @default "fit-content"
     */
    minWidth?: string | 'fit-content';
    /**
     * Whether the tooltip should be shown on focus (improves keyboard accessibility)
     * @default true
     */
    showOnFocus?: boolean;
    /**
     * Whether to allow text wrapping for longer content
     * @default false
     */
    wrapText?: boolean;
    /**
     * ID to be applied to the tooltip element (important for ARIA)
     */
    id?: string;
    /**
     * Theme overrides following shadcn patterns
     */
    theme?: TooltipThemeOverrides;
    /**
     * Custom ARIA label for the tooltip (enhances screen reader support)
     */
    'aria-label'?: string;
    /**
     * Role override for specific accessibility contexts
     * @default "tooltip"
     */
    role?: 'tooltip' | 'dialog' | 'region';
    /**
     * Distance offset between the tooltip and trigger element (in pixels)
     * Positive values increase the gap, negative values decrease it (can overlap)
     * The offset is applied based on placement direction:
     * - top/bottom: affects Y axis
     * - left/right: affects X axis
     * @default 8
     */
    offset?: number;
    /**
     * Force dark mode styling for the component. Use when placing the component
     * on a dark background while the page is in light mode. This applies the
     * 'dark' class to the container, making text, borders, and other elements
     * use light colors for visibility.
     * @default false
     */
    darkMode?: boolean;
}
