@imj_media/ui 1.2.32 → 1.2.34

package/CHANGELOG.md

@@ -5,6 +5,101 @@ Todos los cambios notables de este proyecto serán documentados en este archivo.
 El formato está basado en [Keep a Changelog](https://keepachangelog.com/es-ES/1.0.0/),
 y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
+## [1.2.34] - 2026-02-04
+
+### Added
+- **Drawer - Compound Components para Footer**: El componente Drawer ahora soporta footer personalizado usando compound components
+  - Nuevo subcomponente `Drawer.Footer` que puede ser pasado como hijo del componente
+  - Función `extractFooterFromChildren` que detecta automáticamente el footer personalizado dentro de los children
+  - Si no se proporciona `Drawer.Footer`, se mantiene el comportamiento por defecto con botones Cancelar/Guardar
+  - Nueva story `CustomFooter` que demuestra el uso de compound components para footer personalizado
+- **CardsWithAside - Tooltips Configurables**: Sistema completo de tooltips para las opciones de tabs
+  - Nueva prop `showTooltips` (por defecto: `true`) para habilitar/deshabilitar tooltips globalmente
+  - Nueva prop `tooltipPosition` (por defecto: `'right'`) para establecer la posición global de los tooltips
+  - Cada tab individual puede sobrescribir la posición del tooltip con su propia prop `tooltipPosition`
+  - Tooltips aplicados tanto a los botones de tabs como al botón de "más opciones"
+  - Nuevas stories: `WithTooltips`, `TooltipPositionGlobal`, `TooltipPositionIndividual`, `ShowHideTooltips`
+- **Badge - Spinner de Carga**: Nuevo sistema de spinner de carga dentro del badge
+  - Nueva prop `loading` en el componente Badge para mostrar un spinner de carga
+  - Spinner adaptativo que se ajusta proporcionalmente a todos los tamaños de badge (`dot`, `sm`, `md`, `lg`)
+  - Tamaños del spinner: 32px para `dot`, 40px para `sm` y `md`, 48px para `lg`
+  - Badges `sm`, `md` y `lg` tienen tamaño fijo y circular cuando están en modo loading
+  - Spinner con borde delgado (`ui-border`) para mejor apariencia visual
+  - Nueva prop `badgeLoading` en `InnerButton` para pasar el estado de carga al badge
+  - Nueva story `BadgeWithLoading` en InnerButton que demuestra el spinner en diferentes configuraciones
+
+### Changed
+- **Drawer - API de Footer**: Cambio de prop `footer` a compound component `Drawer.Footer`
+  - La prop `footer` ha sido removida en favor de usar `Drawer.Footer` como hijo
+  - Mejora la flexibilidad y expresividad de la API del componente
+  - Mantiene compatibilidad con el comportamiento por defecto cuando no se usa footer personalizado
+
+### Fixed
+- **CardsWithAside - Icono "More Options"**: Corrección del icono que no aparecía en el componente Popup
+  - Cambio de `label || ''` a `label || null` en el componente Popup para que el icono se muestre correctamente
+  - El componente `InnerButton` solo renderiza el icono cuando `children` es `null` o `false`
+- **Tooltip - Z-index CSS**: Corrección del valor de z-index en variables CSS
+  - Cambio de `--ui-z-max: 99999px` a `--ui-z-max: 99999` (z-index no debe tener unidades)
+  - Resuelve problema de tooltips no visibles debido a z-index incorrecto
+- **Tooltip - Exportación de Tipos**: Agregada exportación de tipos `TooltipPosition` y `TooltipAlignment`
+  - Los tipos ahora están disponibles para importación desde `@/shared/types/tooltip`
+  - Resuelve error de TypeScript: "Module declares 'TooltipPosition' locally, but it is not exported"
+
+## [1.2.33] - 2026-02-04
+
+### Added
+- **LinearGraphic - Nuevo Componente**: Componente de gráfica lineal para visualización de datos proporcionales
+  - Segmentos visuales con colores semánticos configurables: `brand`, `success`, `warning`, `danger`, `info`, `neutral`, `yellow`
+  - Sistema de tooltips integrado con posicionamiento automático
+  - Prop `showLegend` para mostrar leyenda con indicadores de color
+  - Prop `showLegendPercent` para controlar la visualización del porcentaje en la leyenda (por defecto: `false`)
+  - Prop `legendGap` para ajustar el espaciado de la leyenda
+  - Animaciones de transición configurables con `transitionDuration`
+  - Soporte para estados `disabled`
+  - Eventos `onSegmentHover` y `onSegmentLeave` para interactividad
+  - Stories completas en Storybook incluyendo `AllColors` con los 7 colores disponibles
+- **ListWithDataInHover - Nuevo Componente**: Componente de lista con datos en hover
+  - Indicadores de color con colores semánticos: `brand`, `success`, `warning`, `danger`, `info`, `neutral`, `yellow`
+  - Tooltips integrados con posicionamiento configurable (`top`, `bottom`, `left`, `right`, `over`)
+  - Prop `showPercent` para mostrar/ocultar el porcentaje junto al nombre (por defecto: `true`)
+  - Prop `tooltipPosition` para controlar la posición del tooltip (por defecto: `over`)
+  - Integración con el sistema de leyenda de `LinearGraphic`
+- **TextListWithData - Nuevo Componente**: Componente de lista de texto con datos
+  - Colores semánticos unificados con `LinearGraphic` y `ListWithDataInHover`
+  - Indicadores de color configurables con `indicatorSize` y `showIndicator`
+- **InlineTooltip - Nuevo Componente**: Tooltip inline reutilizable para uso dentro de otros componentes
+  - Posiciones disponibles: `top`, `bottom`, `left`, `right`, `over`
+  - Estilo visual consistente con el componente `Tooltip` existente
+  - Z-index alto (99999) para garantizar visibilidad sobre otros elementos
+  - Flecha con diseño de cuadrado rotado como el tooltip original
+- **Drawer - Soporte para Tabs**: El componente Drawer ahora soporta tabs internos
+  - Props `tabs`, `onChangeTab`, `defaultTab` para configuración de tabs
+  - Ancho personalizable con prop `width` (sm, md, lg, xl, 2xl, full)
+- **CardsWithAside - Nuevo Componente**: Componente de tarjetas con panel lateral
+  - Funcionalidad de tabs integrada para navegación entre secciones
+  - Layout responsivo con aside configurable
+
+### Changed
+- **Message & Notification**: Mejora en rendimiento y validación de componentes
+  - Optimización de re-renders con memoización mejorada
+  - Validación de props más robusta
+- **InnerButton**: Mejora en lógica de validación y cobertura de pruebas unitarias
+- **Alert**: Mejora en accesibilidad y cobertura de pruebas unitarias
+- **Accordion**: Documentación completa y pruebas unitarias exhaustivas
+- **Text - Tamaño por defecto**: El componente Body ahora usa tamaño `xs` por defecto en lugar de `md`
+  - Mejora en la consistencia visual para textos de cuerpo
+- **Text - Historia de colores**: Nueva historia `AllSystemColors` que muestra los 42 colores del sistema
+  - Colores base: primary, secondary, tertiary, disabled, on-color, on-canvas-inverse
+  - Colores semánticos: brand, success, warning, danger, info con variantes hover/pressed/selected
+  - Colores de link: link, link-hover, link-pressed, link-visited
+  - Paleta de colores: all-colors-red, all-colors-orange, all-colors-yellow, etc.
+
+### Fixed
+- **Tooltip - Z-index**: Actualización de clase z-index para mejor posicionamiento sobre modales
+- **Tailwind - Safelist de colores**: Agregadas 42 clases de colores de texto al safelist de Tailwind
+  - Resuelve problema de clases dinámicas no generadas con `ui-text-${color}`
+  - Incluye todos los colores del sistema de diseño para el componente Text
+
 ## [1.2.32] - 2026-02-03
 
 ### Changed