@imj_media/ui 1.2.23 → 1.2.25

package/CHANGELOG.md

@@ -5,18 +5,87 @@ 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.21] - 2026-01-XX
+## [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
+- **Toolbar - Nuevo Componente**: Nuevo módulo Toolbar como barra de herramientas flexible
+  - Posicionamiento fijo en la parte inferior de la pantalla usando portal
+  - Soporte para botones configurables con `color`, `icon`, `label`, `onClick`, `disabled`, `show`
+  - Cada botón puede tener sus propios addons (inputs o date pickers)
+  - Vista de botones y vista de addons con navegación entre ellas
+  - Props `text` y `count` para mostrar "(count) text" en la vista de addons
+  - Botón de cerrar para ocultar el toolbar
+  - Diseño responsivo con adaptación móvil
+  - Stories completas en Storybook
+- **Modal.Image - Mejoras en Modo Zoom**: Mejoras en la visualización de imagen expandida
+  - Mantiene el aspect ratio original de la imagen en modo zoom
+  - Contenedor con borde y padding según diseño de Figma
+  - Botón de minimizar posicionado dentro de la imagen
+  - Cálculo dinámico de dimensiones respetando el espacio disponible
+
+### Changed
+- **DatePicker - Manejo de Confirmación**: Mejoras en el comportamiento de selección de fechas
+  - El evento `onChange` solo se invoca cuando se hace clic en "Aceptar"
+  - Nuevos props `onAccept` y `onCancel` para manejo explícito de confirmación
+
+## [1.2.23] - 2026-01-XX
 
 ### Added
-- **Title - Soporte para Children**: El componente Title ahora puede recibir el contenido tanto mediante la prop `title` como mediante `children`
-  - La prop `title` ahora es opcional (`title?: string`)
-  - Nueva prop `children?: ReactNode` para pasar el contenido como children
-  - El componente usa `title || children` para determinar el contenido a mostrar
-  - Permite mayor flexibilidad: usar `title` para texto simple o `children` para contenido más complejo (JSX, elementos con formato, etc.)
-  - Nueva historia `WithChildren` en Storybook que demuestra diferentes casos de uso con children
-  - Actualizada la historia `Default` para mostrar ejemplos con ambas formas de uso
-  - Actualizados `argTypes` en Storybook para incluir control de `children`
-  - Actualizada la documentación del componente para mencionar soporte de `children`
 - **Switch - Soporte para Iconos Font Awesome Duotone**: El componente Switch ahora soporta iconos Font Awesome Duotone con colores personalizados
   - Nuevas props en `SwitchOption` para configurar iconos duotone:
     - `leftSlotDuotonePrimary`, `leftSlotDuotoneSecondary`: Colores primario y secundario para el slot izquierdo
@@ -32,24 +101,18 @@ y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
     - `WithSlotLeft`, `WithSlotRight`, `WithBothSlots`, `WithoutSlots`, `MixedSlots`: Historias adicionales que muestran diferentes combinaciones de slots
   - Compatible con iconos importados desde `@fortawesome/pro-duotone-svg-icons`
 
-### Fixed
-- **Dropdown - Comparación Flexible de Valores**: Corregido el problema donde las opciones por defecto no se mostraban correctamente cuando se pasaba un valor inicial
-  - Problema: Cuando se pasaba un valor numérico (ej: `2`) pero las opciones tenían valores string (ej: `'2'`), la comparación estricta (`===`) fallaba y no se encontraba la opción seleccionada
-  - Solución: Implementada función `compareValues` que realiza comparación flexible entre strings y números
-    - Compara valores de tres formas: comparación estricta, comparación como strings, y comparación como números
-    - Permite que valores numéricos coincidan con strings equivalentes y viceversa
-  - Cambios realizados:
-    - Agregada función `compareValues` en `useDropdown.ts` para comparación flexible
-    - Actualizada lógica de `selectedOptions` para usar comparación flexible
-    - Actualizada lógica de `filteredOptions` para usar comparación flexible
-    - Agregada función `compareValues` en `Dropdown.tsx` con `useCallback`
-    - Actualizada comparación en `renderDropdown` para determinar si una opción está seleccionada
-    - Actualizada comparación en `useEffect` que busca la opción seleccionada para establecer iconos
-  - Ahora el dropdown muestra correctamente la opción seleccionada independientemente de si el valor es número o string
-
-## [1.2.20] - 2026-01-XX
+## [1.2.22] - 2026-01-XX
 
 ### Added
+- **Title - Soporte para Children**: El componente Title ahora puede recibir el contenido tanto mediante la prop `title` como mediante `children`
+  - La prop `title` ahora es opcional (`title?: string`)
+  - Nueva prop `children?: ReactNode` para pasar el contenido como children
+  - El componente usa `title || children` para determinar el contenido a mostrar
+  - Permite mayor flexibilidad: usar `title` para texto simple o `children` para contenido más complejo (JSX, elementos con formato, etc.)
+  - Nueva historia `WithChildren` en Storybook que demuestra diferentes casos de uso con children
+  - Actualizada la historia `Default` para mostrar ejemplos con ambas formas de uso
+  - Actualizados `argTypes` en Storybook para incluir control de `children`
+  - Actualizada la documentación del componente para mencionar soporte de `children`
 - **Title - Prop `center` para Alineación Centrada**: Nueva prop `center` que permite centrar horizontalmente el contenido del título
   - Nueva prop `center?: boolean` en `TitleProps` para controlar la alineación del contenido
   - Cuando `center` es `true`, se aplica `ui-justify-center` al contenedor flex
@@ -66,8 +129,23 @@ y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
   - Nueva historia `RealWorldExamples` que muestra casos de uso prácticos (Dashboard, Gestión de Archivos, Calendario, etc.)
   - Todas las historias incluyen descripciones, ejemplos visuales y código de ejemplo usando `StoryBox`
   - Documentación completa con `tags: ['autodocs']` para generación automática de documentación
+- **Switch - Props slotLeft y slotRight**: Nuevas props para mayor flexibilidad en el Switch
+- **SelectionCheckbox - Prop round**: Nueva prop para estilo redondeado en checkboxes de selección
 
 ### Fixed
+- **Dropdown - Comparación Flexible de Valores**: Corregido el problema donde las opciones por defecto no se mostraban correctamente cuando se pasaba un valor inicial
+  - Problema: Cuando se pasaba un valor numérico (ej: `2`) pero las opciones tenían valores string (ej: `'2'`), la comparación estricta (`===`) fallaba y no se encontraba la opción seleccionada
+  - Solución: Implementada función `compareValues` que realiza comparación flexible entre strings y números
+    - Compara valores de tres formas: comparación estricta, comparación como strings, y comparación como números
+    - Permite que valores numéricos coincidan con strings equivalentes y viceversa
+  - Cambios realizados:
+    - Agregada función `compareValues` en `useDropdown.ts` para comparación flexible
+    - Actualizada lógica de `selectedOptions` para usar comparación flexible
+    - Actualizada lógica de `filteredOptions` para usar comparación flexible
+    - Agregada función `compareValues` en `Dropdown.tsx` con `useCallback`
+    - Actualizada comparación en `renderDropdown` para determinar si una opción está seleccionada
+    - Actualizada comparación en `useEffect` que busca la opción seleccionada para establecer iconos
+  - Ahora el dropdown muestra correctamente la opción seleccionada independientemente de si el valor es número o string
 - **Title - Corrección de Clases de Tipografía**: Corrección del uso de clases de tipografía para headings
   - Reemplazada la clase compuesta `ui-leading-tracking-h3` (que no funcionaba correctamente) por clases individuales de Tailwind
   - Ahora usa `ui-leading-heading-h3` y `ui-tracking-heading-h3` que están correctamente definidas en la configuración de Tailwind