import { default as React } from 'react';
import { ListWithDataInHoverProps } from '../../types';
/**
 * ListWithDataInHover - Lista de elementos con tooltips que muestran datos
 *
 * Muestra una lista de elementos, cada uno con un indicador de color y un nombre.
 * Al hacer hover sobre un elemento, se muestra un tooltip con el porcentaje asociado.
 *
 * @example
 * ```tsx
 * <ListWithDataInHover
 *   data={[
 *     { name: 'Completado', percent: 60 },
 *     { name: 'En progreso', percent: 30 },
 *     { name: 'Pendiente', percent: 10 }
 *   ]}
 *   colors={['#039B59', '#DC8921', '#D9D9D9']}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Con colores semánticos del sistema
 * <ListWithDataInHover
 *   data={[
 *     { name: 'Éxito', percent: 70 },
 *     { name: 'Advertencia', percent: 20 },
 *     { name: 'Error', percent: 10 }
 *   ]}
 *   colors={[
 *     'var(--ui-color-green-500)',
 *     'var(--ui-color-orange-500)',
 *     'var(--ui-color-red-500)'
 *   ]}
 *   indicatorSize={12}
 *   gap={8}
 * />
 * ```
 */
export declare const ListWithDataInHover: React.MemoExoticComponent<({ data, colors, className, disabled, indicatorSize, gap, showTooltips, showPercent, tooltipPosition, onItemHover, onItemLeave, }: ListWithDataInHoverProps) => import("react/jsx-runtime").JSX.Element>;
//# sourceMappingURL=ListWithDataInHover.d.ts.map