@imj_media/ui 1.2.31 → 1.2.33

package/dist/modules/LinearGraphic/components/molecules/LinearGraphicLegend.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { LinearGraphicData, LinearGraphicColor } from '../../types';
+export interface LinearGraphicLegendItemProps {
+    /** Datos del item */
+    data: LinearGraphicData;
+    /** Color semántico */
+    color: LinearGraphicColor;
+    /** Tamaño del indicador en píxeles */
+    indicatorSize?: number;
+}
+export interface LinearGraphicLegendProps {
+    /** Datos de todos los segmentos */
+    data: LinearGraphicData[];
+    /** Colores de todos los segmentos */
+    colors: LinearGraphicColor[];
+    /** Espacio entre items en píxeles */
+    gap?: number;
+    /** Tamaño del indicador en píxeles */
+    indicatorSize?: number;
+    /** Clase CSS adicional */
+    className?: string;
+}
+/**
+ * Leyenda del LinearGraphic
+ * Muestra indicadores de color con nombres y tooltip con porcentaje
+ */
+export declare const LinearGraphicLegend: React.MemoExoticComponent<({ data, colors, gap, indicatorSize, className, }: LinearGraphicLegendProps) => import("react/jsx-runtime").JSX.Element | null>;
+//# sourceMappingURL=LinearGraphicLegend.d.ts.map

package/dist/modules/LinearGraphic/components/molecules/LinearGraphicLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGraphicLegend.d.ts","sourceRoot":"","sources":["../../../../../src/modules/LinearGraphic/components/molecules/LinearGraphicLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAG7C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAGnE,MAAM,WAAW,4BAA4B;IAC3C,qBAAqB;IACrB,IAAI,EAAE,iBAAiB,CAAA;IACvB,sBAAsB;IACtB,KAAK,EAAE,kBAAkB,CAAA;IACzB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4CD,MAAM,WAAW,wBAAwB;IACvC,mCAAmC;IACnC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,qCAAqC;IACrC,MAAM,EAAE,kBAAkB,EAAE,CAAA;IAC5B,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,+EAM7B,wBAAwB,oDAuBzB,CAAA"}

package/dist/modules/LinearGraphic/components/molecules/index.d.ts

@@ -0,0 +1,3 @@
+export { LinearGraphicLegend } from './LinearGraphicLegend';
+export type { LinearGraphicLegendProps, LinearGraphicLegendItemProps } from './LinearGraphicLegend';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/LinearGraphic/components/molecules/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/LinearGraphic/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,YAAY,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/modules/LinearGraphic/components/organisms/LinearGraphic.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { LinearGraphicProps } from '../../types';
+/**
+ * LinearGraphic - Gráfica lineal de barras de progreso múltiples
+ *
+ * Muestra una barra de progreso con múltiples segmentos, cada uno con su propio
+ * color y porcentaje. Soporta tooltips en hover para mostrar información detallada.
+ *
+ * @example
+ * ```tsx
+ * <LinearGraphic
+ *   data={[
+ *     { name: 'Completado', percent: 60 },
+ *     { name: 'En progreso', percent: 30 },
+ *     { name: 'Pendiente', percent: 10 }
+ *   ]}
+ *   colors={['success', 'warning', 'neutral']}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con colores semánticos del sistema
+ * <LinearGraphic
+ *   data={[
+ *     { name: 'Éxito', percent: 70 },
+ *     { name: 'Advertencia', percent: 20 },
+ *     { name: 'Error', percent: 10 }
+ *   ]}
+ *   colors={['success', 'warning', 'danger']}
+ *   height={12}
+ *   showTooltips={true}
+ * />
+ * ```
+ */
+export declare const LinearGraphic: React.MemoExoticComponent<({ data, colors, className, height, showTooltips, showLegend, showLegendPercent, legendGap, transitionDuration, disabled, onSegmentHover, onSegmentLeave, }: LinearGraphicProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=LinearGraphic.d.ts.map

package/dist/modules/LinearGraphic/components/organisms/LinearGraphic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGraphic.d.ts","sourceRoot":"","sources":["../../../../../src/modules/LinearGraphic/components/organisms/LinearGraphic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAMhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa,yLAavB,kBAAkB,6CA6HnB,CAAA"}

package/dist/modules/LinearGraphic/components/organisms/LinearGraphic.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LinearGraphic.test.d.ts.map

package/dist/modules/LinearGraphic/components/organisms/LinearGraphic.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGraphic.test.d.ts","sourceRoot":"","sources":["../../../../../src/modules/LinearGraphic/components/organisms/LinearGraphic.test.tsx"],"names":[],"mappings":""}

package/dist/modules/LinearGraphic/components/organisms/index.d.ts

@@ -0,0 +1,2 @@
+export { LinearGraphic } from './LinearGraphic';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/LinearGraphic/components/organisms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/LinearGraphic/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/modules/LinearGraphic/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ============================================
+ * LINEAR GRAPHIC MODULE - ATOMIC DESIGN
+ * ============================================
+ *
+ * Componente de gráfica lineal modular que sigue principios de:
+ * - Screaming Architecture: La estructura de carpetas refleja el dominio
+ * - Atomic Design: Atoms → Molecules → Organisms
+ * - DRY: Reutilización de componentes y tipos
+ *
+ * ## Estructura
+ *
+ * ```
+ * LinearGraphic/
+ * ├── components/
+ * │   ├── atoms/           # Componentes básicos
+ * │   │   └── LinearGraphicSegment
+ * │   └── organisms/       # Componente completo
+ * │       └── LinearGraphic
+ * ├── types/
+ * │   └── index.ts         # Definición de tipos
+ * ├── stories/
+ * │   └── linearGraphic.stories.tsx
+ * └── index.ts             # Exports públicos
+ * ```
+ *
+ * ## Uso Básico
+ *
+ * @example
+ * ```tsx
+ * import { LinearGraphic } from '@imjmedia/ui'
+ *
+ * <LinearGraphic
+ *   data={[
+ *     { name: 'Completado', percent: 60 },
+ *     { name: 'En progreso', percent: 30 },
+ *     { name: 'Pendiente', percent: 10 }
+ *   ]}
+ *   colors={['#039B59', '#DC8921', '#D9D9D9']}
+ * />
+ * ```
+ */
+export { LinearGraphic } from './components';
+export { LinearGraphicSegment } from './components';
+export type { LinearGraphicProps, LinearGraphicData, } from './types';
+export type { LinearGraphicSegmentProps, } from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/LinearGraphic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modules/LinearGraphic/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAGnD,YAAY,EACV,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,yBAAyB,GAC1B,MAAM,cAAc,CAAA"}

package/dist/modules/LinearGraphic/stories/LinearGraphic.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LinearGraphic } from '../index';
+declare const meta: Meta<typeof LinearGraphic>;
+export default meta;
+type Story = StoryObj<typeof LinearGraphic>;
+export declare const Default: Story;
+export declare const WithSemanticColors: Story;
+export declare const MultipleSegments: Story;
+export declare const TallHeight: Story;
+export declare const WithoutTooltips: Story;
+export declare const Disabled: Story;
+export declare const FastTransition: Story;
+export declare const SingleSegment: Story;
+export declare const WithCallbacks: Story;
+/**
+ * Todos los colores semánticos disponibles
+ */
+export declare const AllColors: Story;
+//# sourceMappingURL=LinearGraphic.stories.d.ts.map

package/dist/modules/LinearGraphic/stories/LinearGraphic.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGraphic.stories.d.ts","sourceRoot":"","sources":["../../../../src/modules/LinearGraphic/stories/LinearGraphic.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAkDpC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAiBhC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAA"}

package/dist/modules/LinearGraphic/types/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Tipos para el módulo LinearGraphic
+ */
+/**
+ * Colores semánticos disponibles para la gráfica lineal
+ */
+export type LinearGraphicColor = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'yellow';
+/**
+ * Datos de un segmento de la gráfica lineal
+ */
+export interface LinearGraphicData {
+    /** Nombre del segmento */
+    name: string;
+    /** Porcentaje del segmento (0-100) */
+    percent: number;
+}
+/**
+ * Props del componente LinearGraphic
+ */
+export interface LinearGraphicProps {
+    /** Array de datos para cada segmento */
+    data: LinearGraphicData[];
+    /** Array de colores semánticos para cada segmento */
+    colors: LinearGraphicColor[];
+    /** Clase CSS adicional */
+    className?: string;
+    /** Altura de la barra en píxeles (por defecto: 8px) */
+    height?: number;
+    /** Si mostrar tooltips en hover (por defecto: true) */
+    showTooltips?: boolean;
+    /** Si mostrar la leyenda debajo de la gráfica (por defecto: false) */
+    showLegend?: boolean;
+    /** Si mostrar el porcentaje en la leyenda (por defecto: false) */
+    showLegendPercent?: boolean;
+    /** Espacio entre leyendas en píxeles (por defecto: 8) */
+    legendGap?: number;
+    /** Duración de la transición en ms (por defecto: 500) */
+    transitionDuration?: number;
+    /** Si deshabilitar la gráfica */
+    disabled?: boolean;
+    /** Callback cuando se hace hover sobre un segmento */
+    onSegmentHover?: (data: LinearGraphicData, index: number) => void;
+    /** Callback cuando se sale del hover de un segmento */
+    onSegmentLeave?: (data: LinearGraphicData, index: number) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/LinearGraphic/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/LinearGraphic/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,CAAA;AAEZ;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,qDAAqD;IACrD,MAAM,EAAE,kBAAkB,EAAE,CAAA;IAC5B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClE"}

package/dist/modules/LinearGraphic/utils/colors.d.ts

@@ -0,0 +1,18 @@
+import { LinearGraphicColor } from '../types';
+/**
+ * Mapeo de colores semánticos a variables CSS del sistema de diseño
+ */
+export declare const SEMANTIC_COLOR_MAP: Record<LinearGraphicColor, string>;
+/**
+ * Colores por defecto si no se proporcionan
+ */
+export declare const DEFAULT_COLORS: LinearGraphicColor[];
+/**
+ * Obtiene el valor CSS del color semántico
+ */
+export declare const getColorValue: (color: LinearGraphicColor) => string;
+/**
+ * Valida y normaliza un color semántico
+ */
+export declare const normalizeColor: (color: unknown) => LinearGraphicColor;
+//# sourceMappingURL=colors.d.ts.map

package/dist/modules/LinearGraphic/utils/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/modules/LinearGraphic/utils/colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7C;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAQxD,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAM9C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,KAAG,MAEzD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,kBAK/C,CAAA"}

package/dist/modules/LinearGraphic/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './colors';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/LinearGraphic/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/LinearGraphic/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/modules/ListWithDataInHover/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './organisms';
+export * from './molecules';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/ListWithDataInHover/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/ListWithDataInHover/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA"}

package/dist/modules/ListWithDataInHover/components/molecules/ListWithDataInHoverItem.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { InlineTooltipPosition } from '../../../Tooltip';
+import { ListWithDataInHoverItem as ListItem, ListWithDataInHoverColor } from '../../types';
+export interface ListWithDataInHoverItemProps {
+    /** Datos del elemento */
+    item: ListItem;
+    /** Índice del elemento */
+    index: number;
+    /** Color semántico del indicador */
+    color: ListWithDataInHoverColor;
+    /** Tamaño del indicador */
+    indicatorSize: number;
+    /** Gap entre elementos */
+    gap: number;
+    /** Si mostrar tooltip */
+    showTooltip: boolean;
+    /** Si mostrar el porcentaje junto al nombre */
+    showPercent: boolean;
+    /** Posición del tooltip */
+    tooltipPosition: InlineTooltipPosition;
+    /** Callback cuando se hace hover */
+    onHover?: (item: ListItem, index: number) => void;
+    /** Callback cuando se sale del hover */
+    onLeave?: (item: ListItem, index: number) => void;
+}
+/**
+ * Elemento individual de la lista con datos en hover
+ * Molécula que combina indicador de color, texto y tooltip
+ */
+export declare const ListWithDataInHoverItem: React.MemoExoticComponent<({ item, index, color, indicatorSize, gap, showTooltip, showPercent, tooltipPosition, onHover, onLeave, }: ListWithDataInHoverItemProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ListWithDataInHoverItem.d.ts.map

package/dist/modules/ListWithDataInHover/components/molecules/ListWithDataInHoverItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListWithDataInHoverItem.d.ts","sourceRoot":"","sources":["../../../../../src/modules/ListWithDataInHover/components/molecules/ListWithDataInHoverItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAiB,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,uBAAuB,IAAI,QAAQ,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAG3F,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,KAAK,EAAE,wBAAwB,CAAA;IAC/B,2BAA2B;IAC3B,aAAa,EAAE,MAAM,CAAA;IACrB,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,yBAAyB;IACzB,WAAW,EAAE,OAAO,CAAA;IACpB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAA;IACpB,2BAA2B;IAC3B,eAAe,EAAE,qBAAqB,CAAA;IACtC,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,uIAWjC,4BAA4B,6CAuD7B,CAAA"}

package/dist/modules/ListWithDataInHover/components/molecules/index.d.ts

@@ -0,0 +1,3 @@
+export { ListWithDataInHoverItem } from './ListWithDataInHoverItem';
+export type { ListWithDataInHoverItemProps } from './ListWithDataInHoverItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/ListWithDataInHover/components/molecules/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/ListWithDataInHover/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAA"}

package/dist/modules/ListWithDataInHover/components/organisms/ListWithDataInHover.d.ts

@@ -0,0 +1,41 @@
+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

package/dist/modules/ListWithDataInHover/components/organisms/ListWithDataInHover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListWithDataInHover.d.ts","sourceRoot":"","sources":["../../../../../src/modules/ListWithDataInHover/components/organisms/ListWithDataInHover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,wBAAwB,EAA4B,MAAM,aAAa,CAAA;AAIhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,mBAAmB,+JAY7B,wBAAwB,6CAiFzB,CAAA"}

package/dist/modules/ListWithDataInHover/components/organisms/ListWithDataInHover.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ListWithDataInHover.test.d.ts.map

package/dist/modules/ListWithDataInHover/components/organisms/ListWithDataInHover.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListWithDataInHover.test.d.ts","sourceRoot":"","sources":["../../../../../src/modules/ListWithDataInHover/components/organisms/ListWithDataInHover.test.tsx"],"names":[],"mappings":""}

package/dist/modules/ListWithDataInHover/components/organisms/index.d.ts

@@ -0,0 +1,2 @@
+export { ListWithDataInHover } from './ListWithDataInHover';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/ListWithDataInHover/components/organisms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/modules/ListWithDataInHover/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/modules/ListWithDataInHover/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ============================================
+ * LIST WITH DATA IN HOVER MODULE - ATOMIC DESIGN
+ * ============================================
+ *
+ * Componente de lista con tooltips modular que sigue principios de:
+ * - Screaming Architecture: La estructura de carpetas refleja el dominio
+ * - Atomic Design: Atoms → Molecules → Organisms
+ * - DRY: Reutilización de componentes y tipos
+ *
+ * ## Estructura
+ *
+ * ```
+ * ListWithDataInHover/
+ * ├── components/
+ * │   ├── molecules/       # Componentes moleculares
+ * │   │   └── ListWithDataInHoverItem
+ * │   └── organisms/       # Componente completo
+ * │       └── ListWithDataInHover
+ * ├── types/
+ * │   └── index.ts         # Definición de tipos
+ * ├── stories/
+ * │   └── listWithDataInHover.stories.tsx
+ * └── index.ts             # Exports públicos
+ * ```
+ *
+ * ## Uso Básico
+ *
+ * @example
+ * ```tsx
+ * import { ListWithDataInHover } from '@imjmedia/ui'
+ *
+ * <ListWithDataInHover
+ *   data={[
+ *     { name: 'Completado', percent: 60 },
+ *     { name: 'En progreso', percent: 30 },
+ *     { name: 'Pendiente', percent: 10 }
+ *   ]}
+ *   colors={['#039B59', '#DC8921', '#D9D9D9']}
+ * />
+ * ```
+ */
+export { ListWithDataInHover } from './components';
+export type { ListWithDataInHoverProps, ListWithDataInHoverItem, ListWithDataInHoverColor, } from './types';
+export type { ListWithDataInHoverItemProps, } from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/ListWithDataInHover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modules/ListWithDataInHover/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAGH,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAGlD,YAAY,EACV,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,4BAA4B,GAC7B,MAAM,cAAc,CAAA"}

package/dist/modules/ListWithDataInHover/stories/ListWithDataInHover.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ListWithDataInHover } from '../index';
+declare const meta: Meta<typeof ListWithDataInHover>;
+export default meta;
+type Story = StoryObj<typeof ListWithDataInHover>;
+export declare const Default: Story;
+export declare const WithSemanticColors: Story;
+export declare const LargeIndicators: Story;
+export declare const WithoutTooltips: Story;
+export declare const Disabled: Story;
+export declare const MultipleItems: Story;
+export declare const WithCallbacks: Story;
+//# sourceMappingURL=ListWithDataInHover.stories.d.ts.map

package/dist/modules/ListWithDataInHover/stories/ListWithDataInHover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListWithDataInHover.stories.d.ts","sourceRoot":"","sources":["../../../../src/modules/ListWithDataInHover/stories/ListWithDataInHover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAkD1C,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEjD,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA"}

package/dist/modules/ListWithDataInHover/types/index.d.ts

@@ -0,0 +1,42 @@
+import { InlineTooltipPosition } from '../../Tooltip';
+/**
+ * Colores semánticos disponibles
+ */
+export type ListWithDataInHoverColor = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'yellow';
+/**
+ * Datos de un elemento de la lista
+ */
+export interface ListWithDataInHoverItem {
+    /** Nombre del elemento */
+    name: string;
+    /** Porcentaje del elemento */
+    percent: number;
+}
+/**
+ * Props del componente ListWithDataInHover
+ */
+export interface ListWithDataInHoverProps {
+    /** Array de datos para cada elemento */
+    data: ListWithDataInHoverItem[];
+    /** Array de colores semánticos para cada elemento */
+    colors: ListWithDataInHoverColor[];
+    /** Clase CSS adicional */
+    className?: string;
+    /** Si deshabilitar la lista */
+    disabled?: boolean;
+    /** Tamaño del indicador circular en píxeles (por defecto: 8px) */
+    indicatorSize?: number;
+    /** Gap entre elementos en píxeles (por defecto: 4px) */
+    gap?: number;
+    /** Si mostrar tooltips (por defecto: true) */
+    showTooltips?: boolean;
+    /** Si mostrar el porcentaje junto al nombre (por defecto: true) */
+    showPercent?: boolean;
+    /** Posición del tooltip (por defecto: 'over') */
+    tooltipPosition?: InlineTooltipPosition;
+    /** Callback cuando se hace hover sobre un elemento */
+    onItemHover?: (item: ListWithDataInHoverItem, index: number) => void;
+    /** Callback cuando se sale del hover de un elemento */
+    onItemLeave?: (item: ListWithDataInHoverItem, index: number) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/ListWithDataInHover/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/ListWithDataInHover/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAChC,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,CAAA;AAEZ;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,wCAAwC;IACxC,IAAI,EAAE,uBAAuB,EAAE,CAAA;IAC/B,qDAAqD;IACrD,MAAM,EAAE,wBAAwB,EAAE,CAAA;IAClC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iDAAiD;IACjD,eAAe,CAAC,EAAE,qBAAqB,CAAA;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpE,uDAAuD;IACvD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACrE"}

package/dist/modules/ListWithDataInHover/utils/colors.d.ts

@@ -0,0 +1,18 @@
+import { ListWithDataInHoverColor } from '../types';
+/**
+ * Mapeo de colores semánticos a variables CSS del sistema de diseño
+ */
+export declare const SEMANTIC_COLOR_MAP: Record<ListWithDataInHoverColor, string>;
+/**
+ * Colores por defecto si no se proporcionan
+ */
+export declare const DEFAULT_COLORS: ListWithDataInHoverColor[];
+/**
+ * Obtiene el valor CSS del color semántico
+ */
+export declare const getColorValue: (color: ListWithDataInHoverColor) => string;
+/**
+ * Valida y normaliza un color semántico
+ */
+export declare const normalizeColor: (color: unknown) => ListWithDataInHoverColor;
+//# sourceMappingURL=colors.d.ts.map

package/dist/modules/ListWithDataInHover/utils/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/modules/ListWithDataInHover/utils/colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAEnD;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,wBAAwB,EAAE,MAAM,CAQ9D,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,wBAAwB,EAMpD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,wBAAwB,KAAG,MAE/D,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,wBAK/C,CAAA"}

package/dist/modules/Message/components/molecules/MessageItem.d.ts

@@ -1,7 +1,8 @@
 import { BaseMessageProps } from '../../../../shared/types/message';
+import { default as React } from 'react';
 interface MessageItemProps {
     message: BaseMessageProps;
 }
-export declare const MessageItem: ({ message }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MessageItem: React.MemoExoticComponent<({ message }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};
 //# sourceMappingURL=MessageItem.d.ts.map

package/dist/modules/Message/components/molecules/MessageItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/MessageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAMzD,UAAU,gBAAgB;IACxB,OAAO,EAAE,gBAAgB,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,GAAI,aAAa,gBAAgB,mDAkDxD,CAAA"}
+{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/MessageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAKzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,gBAAgB;IACxB,OAAO,EAAE,gBAAgB,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,0CAA4B,gBAAgB,oDAqElE,CAAA"}

package/dist/modules/Message/components/molecules/MessageItem.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MessageItem.test.d.ts.map

package/dist/modules/Message/components/molecules/MessageItem.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.test.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/MessageItem.test.tsx"],"names":[],"mappings":""}

package/dist/modules/Message/components/molecules/MessagePositions.d.ts

@@ -1,7 +1,8 @@
 import { MessagesByPosition } from '../../../../shared/types/message';
+import { default as React } from 'react';
 interface MessagePositionsProps {
     messages: MessagesByPosition;
 }
-export declare const MessagePositions: ({ messages }: MessagePositionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MessagePositions: React.MemoExoticComponent<({ messages }: MessagePositionsProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};
 //# sourceMappingURL=MessagePositions.d.ts.map

package/dist/modules/Message/components/molecules/MessagePositions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagePositions.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/MessagePositions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAI5E,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,kBAAkB,CAAA;CAC7B;AAED,eAAO,MAAM,gBAAgB,GAAI,cAAc,qBAAqB,4CAiBnE,CAAA"}
+{"version":3,"file":"MessagePositions.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/MessagePositions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,kBAAkB,CAAA;CAC7B;AAED,eAAO,MAAM,gBAAgB,2CAA6B,qBAAqB,oDAuC7E,CAAA"}

package/dist/modules/Message/components/molecules/MessagePositions.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MessagePositions.test.d.ts.map

package/dist/modules/Message/components/molecules/MessagePositions.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagePositions.test.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/MessagePositions.test.tsx"],"names":[],"mappings":""}

package/dist/modules/Message/components/molecules/NotificationItem.d.ts

@@ -1,7 +1,8 @@
 import { NotificationGroup } from '../../../../shared/types/message';
+import { default as React } from 'react';
 interface NotificationItemProps {
     group: NotificationGroup;
 }
-export declare const NotificationItem: ({ group }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NotificationItem: React.MemoExoticComponent<({ group }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};
 //# sourceMappingURL=NotificationItem.d.ts.map

package/dist/modules/Message/components/molecules/NotificationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/NotificationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,wBAAwB,CAAA;AAS7E,UAAU,qBAAqB;IAC7B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,qBAAqB,mDA+DhE,CAAA"}
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/NotificationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,wBAAwB,CAAA;AAQ7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,qBAAqB;IAC7B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,eAAO,MAAM,gBAAgB,wCAA0B,qBAAqB,oDAuE1E,CAAA"}

package/dist/modules/Message/components/molecules/NotificationItem.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NotificationItem.test.d.ts.map

package/dist/modules/Message/components/molecules/NotificationItem.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.test.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/NotificationItem.test.tsx"],"names":[],"mappings":""}

package/dist/modules/Message/components/molecules/NotificationPositions.d.ts

@@ -1,7 +1,8 @@
 import { NotificationGroup, NotificationColor } from '../../../../shared/types/message';
+import { default as React } from 'react';
 interface NotificationPositionsProps {
     groups: Record<NotificationColor, NotificationGroup | null>;
 }
-export declare const NotificationPositions: ({ groups }: NotificationPositionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NotificationPositions: React.MemoExoticComponent<({ groups }: NotificationPositionsProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};
 //# sourceMappingURL=NotificationPositions.d.ts.map

package/dist/modules/Message/components/molecules/NotificationPositions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPositions.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/NotificationPositions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAK7E,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAC5D;AAED,eAAO,MAAM,qBAAqB,GAAI,YAAY,0BAA0B,mDAwB3E,CAAA"}
+{"version":3,"file":"NotificationPositions.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/NotificationPositions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAI7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAC5D;AAED,eAAO,MAAM,qBAAqB,yCAA2B,0BAA0B,oDAoCrF,CAAA"}

package/dist/modules/Message/components/molecules/NotificationPositions.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NotificationPositions.test.d.ts.map

package/dist/modules/Message/components/molecules/NotificationPositions.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationPositions.test.d.ts","sourceRoot":"","sources":["../../../../../src/modules/Message/components/molecules/NotificationPositions.test.tsx"],"names":[],"mappings":""}