@imj_media/ui 1.2.24 → 1.2.26

package/CHANGELOG.md

@@ -5,6 +5,79 @@ 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.26] - 2026-01-22
+
+### Added
+- **InnerButton - Soporte para Badge en Icon Buttons**: Nueva funcionalidad para mostrar badges en botones de icono
+  - El badge se muestra automáticamente cuando el botón solo tiene prop `icon` y no tiene `children` (icon button)
+  - Posicionamiento absoluto en la esquina superior derecha del botón, centrado perfectamente en la esquina
+  - Nuevas props relacionadas con badge: `badgeColor`, `badgeLabel`, `badgeTheme`, `badgeSize`, `badgeStroke`, `badgeIcon`
+  - Soporte para iconos duotone en el badge: `badgeIconDuotonePrimary`, `badgeIconDuotoneSecondary`, `badgeIconDuotoneOpacityPrimary`, `badgeIconDuotoneOpacitySecondary`
+  - Lógica automática para determinar si el badge debe tener borde basado en la combinación de colores del botón y el badge
+    - Badge `accent` en botón `primary` → borde automático
+    - Badge `gray` en botones `secondary` o `tertiary` → borde automático
+  - El badge mantiene su funcionalidad inline cuando el botón tiene `children`
+  - Nueva story en Storybook "Icon Button con Badge" que demuestra todas las variantes
+
+### Changed
+- **InnerButton - Overflow handling**: El botón ahora usa `overflow-visible` cuando es un icon button con badge para evitar que el badge sea recortado
+- **Badge - Border colors**: Actualización de colores de borde para usar design tokens (`ui-border-brand`, `ui-border-success`, etc.) en lugar de colores genéricos de Tailwind
+
+## [1.2.25] - 2026-01-22
+
+### Added
+- **Badges - Nuevo Componente**: Nuevo componente para gestión dinámica de tags/badges
+  - Contenedor estilo input donde se pueden escribir y agregar badges presionando Enter
+  - Cada badge tiene botón de cierre para eliminarlo de la lista
+  - Soporte para valores iniciales como array de `BadgeItem[]` o array de `string[]`
+  - Prop `colorCycle` para asignar colores cíclicos automáticamente a nuevos badges
+  - Prop `defaultColor` para establecer el color por defecto de nuevos badges
+  - Prop `maxBadges` para limitar el número máximo de badges permitidos
+  - Eventos: `onChange` (al agregar/eliminar), `onAdd`, `onRemove`, `onFocus`, `onBlur`
+  - El evento `onChange` retorna objeto con `type` ('add'|'remove'), `item` y `items`
+  - Reutiliza componente Tag existente para los badges
+  - Hook `useBadges` separado para manejo de lógica (siguiendo principio DRY)
+  - Función `normalizeValue` que convierte arrays de strings a `BadgeItem[]` automáticamente
+  - Tamaños: xs, sm, md, lg (consistente con otros inputs)
+  - Estados: disabled, error, helperText
+  - 12 stories completas en Storybook: Default, WithInitialValues, WithStringArray, ColorCycle, DefaultColor, MaxBadges, Sizes, Disabled, WithError, WithHelperText, Events, FullExample
+- **AlertDialog - Prop size**: Nueva prop `size` que hereda los tamaños del componente Modal
+  - Tamaños disponibles: xs, sm, md, lg, xl, 2xl, full
+  - Nueva story `Sizes` que demuestra todos los tamaños disponibles
+- **AlertDialog - z-index mejorado**: AlertDialog ahora siempre aparece sobre Modal
+  - Nuevo z-index de 60 para AlertDialog (Modal usa 50 por defecto)
+  - Resuelve problema de layering cuando AlertDialog se abre desde un Modal
+- **Dropdown - Prop infoTooltip**: Nueva prop para mostrar icono de información con tooltip
+  - Se pasa al componente Input interno para mantener consistencia
+  - Nueva story `WithInfoTooltip` que demuestra el uso
+- **Textarea - Props onFocus y onBlur**: Nuevas props para eventos de focus
+  - Retornan el evento nativo `React.FocusEvent<HTMLTextAreaElement>`
+  - Parámetro del evento es opcional para mayor flexibilidad
+- **Text - Mejora en manejo de colores**: Autocompletado de colores del sistema de diseño
+  - Tipo `TextColor` expandido con todos los colores semánticos y de paleta
+  - Prop `color` ahora acepta `TextColor | string` para autocompletado + flexibilidad
+  - Colores semánticos: primary, secondary, tertiary, disabled, on-color, etc.
+  - Colores de marca: brand, success, warning, danger, info (con variantes hover/pressed/selected)
+  - Colores de paleta: all-colors-red, all-colors-blue, etc.
+  - Constante `DEFAULT_TEXT_COLORS` para identificar colores del sistema
+
+### Changed
+- **Modal - Props onCancel y onSuccess**: Ahora retornan el evento nativo del click
+  - Tipo actualizado a `(event?: React.MouseEvent<HTMLButtonElement>) => void`
+  - Parámetro del evento es opcional para compatibilidad con código existente
+  - ModalFooter actualizado para pasar el evento a los callbacks
+- **Modal - Prop zIndex configurable**: Nueva prop para controlar el z-index del modal
+  - Valores: 50 (default) o 60 (para modales anidados)
+  - Útil cuando se necesita mostrar AlertDialog sobre Modal
+- **useBodyScrollLock - Mejora en gestión de locks**: Implementación mejorada para múltiples modales
+  - Usa `Set<string>` con IDs únicos en lugar de contador simple
+  - El scroll solo se restaura cuando todos los modales/dialogs se cierran
+  - Previene problema de scroll restaurándose prematuramente con modales anidados
+
+### Fixed
+- **Header, Title**: Ajuste de layout para mejorar alineación
+- **ModalFooter**: Corrección de handlers onCancel y onSuccess para aceptar parámetro de evento
+
 ## [1.2.24] - 2026-01-XX
 
 ### Added