@imj_media/ui 1.2.37 → 1.2.38

package/CHANGELOG.md

@@ -5,6 +5,74 @@ 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.38] - 2026-02-06
+
+### Added
+- **Checkbox - Nuevo Componente Base**: Componente atómico de checkbox basado en los tokens semánticos de Figma (`Forms`)
+  - Estados completos: Default, Hover, Focus, Disabled, Error
+  - Soporte para `checked`, `indeterminate` y `error`
+  - Border radius semántico: `ui-rounded-surface-forms` (token `radius/surface/forms` = 2px)
+  - Estado checked sin borde visible (`ui-border-transparent`), solo borde en focus (`ui-border-focus`)
+  - Estado error con borde rojo (`ui-border-danger` = #ef4444) en checked y unchecked
+  - Disabled checked usa `ui-bg-fill-brand-disabled` (#b8c5ee)
+  - Marca de check: SVG con tamaño exacto de Figma (10×12px)
+  - Marca indeterminate: SVG minus-solid con tamaño exacto de Figma (10×12px)
+  - Dos tamaños: `sm` (14×14) y `md` (16×16, default — `space_16`)
+  - Forma cuadrada (default) o redonda (`round`)
+  - Nuevas props `label` y `supportingText` con tipografía semántica de Figma:
+    - Label: `type/label/md/Bold` — 14px, weight 700, line-height 20.5px, tracking 0.5px
+    - Supporting text: `type/body/xs/Regular` — 12px, weight 400, line-height 17.5px, tracking 0.5px
+  - Gap checkbox ↔ label: `space_8` (8px); Gap label ↔ supporting: `space_4` (4px)
+  - Color de texto: `ui-text-primary` / `ui-text-tertiary`, disabled: `ui-text-disabled`
+  - Prop `classNameLabel` para estilos personalizados en el contenedor del label
+  - Stories completas: Estados, Error, Formas, Tamaños, Con Label, Selección Múltiple, Combinaciones, Componentes que extienden
+  - Exportado desde `@imj_media/ui`
+- **Modal - Sistema Flexible de Configuración**: Nuevo sistema agnostico y escalable para el Modal
+  - `footerButtons`: Array de botones configurables para el footer con prioridad sobre props legacy
+  - `headerButtons`: Array de botones configurables para el header
+  - Props de "modelo cerrado": `headerButton`, `badge`, `footerPrimaryButton`, `footerSecondaryButton`, `footerAuxButton`
+  - `iconConfig`: Configuración completa del ícono principal del modal
+  - `badges`: Array de badges configurables
+  - `ModalButton`, `ModalIcon`, `ModalBadge` heredan automáticamente de `IInnerButtonProps`, `IconProps`, `IBadgeProps`
+  - Sistema de prioridad: nuevas configs > "modelo cerrado" > props legacy
+  - Deprecación con `console.warn` para props legacy en desarrollo
+  - Stories de "CompleteSystem" con 5 historias que prueban todos los escenarios
+- **InnerButton - Sistema Agnostico de Configuración**: Nuevo sistema de props para configuración modular
+  - `iconProps`: Configuración completa del ícono (`ButtonIconConfig`)
+  - `badge`: Configuración completa del badge (`ButtonBadgeConfig`)
+  - `leftSlotProps` / `rightSlotProps`: Configuración de slots (`ButtonSlotConfig`)
+  - `tooltipProps`: Configuración completa del tooltip (`ButtonTooltipConfig`)
+  - Props duales: `icon`, `leftSlot`, `rightSlot` y `tooltip` aceptan valores simples o objetos de configuración completos
+  - Ejemplo: `icon="faCheck"` (simple) o `icon={{ icon: "faCheck", color: "success" }}` (configuración)
+  - Ejemplo: `tooltip="Guardar"` (simple) o `tooltip={{ label: "Guardar", position: "top", delay: 500 }}` (configuración)
+  - Deprecación inteligente: solo se deprecan props de estilizado legacy (`iconDuotonePrimary`, `tooltipPosition`, etc.), no las props base
+  - Stories completas con secciones de sistema nuevo, comparación legacy, duotone, convergencia y casos raros
+
+### Changed
+- **InnerButton - Arquitectura Modular (Atomic Design)**: Reestructuración completa del componente
+  - Componentes atómicos: `ButtonContent`, `ButtonIcon`, `ButtonBadge`, `ButtonSlotLeft`, `ButtonSlotRight`
+  - Custom hooks: `useBadgeLoading`, `useHoverText`, `useButtonClasses`
+  - Utilidades: `badgeUtils`, `colorUtils`, `iconUtils`, `configConverters`, `deprecation`
+  - Estilos: `buttonVariants` (CVA), `variantColors`
+  - Backward compatible: `index.tsx` re-exporta desde `InnerButton.tsx`
+- **Renombrado de Props de Slots**: `slotLeft` → `leftSlot`, `slotRight` → `rightSlot`
+  - Actualización en 50+ archivos: `Button`, `InnerButton`, `Popup`, `Dropdown`, `Sidebar`, `Switch`, `Table`, `Toolbar`, `Filters`, `DatePicker`, `EmojiPicker`, `Modal`
+  - Props de duotone y handlers renombrados: `slotLeftDuotonePrimary` → `leftSlotDuotonePrimary`, `onClickSlotLeft` → `onClickLeftSlot`, etc.
+  - Tipos actualizados: `IInnerButtonProps`, `IButtonProps`, `emojipicker.ts`, `switch.ts`, `modal.ts`
+- **SelectionCheckbox**: Refactorizado como wrapper del nuevo componente `Checkbox` base
+- **ListItemCheckbox**: Reemplazado `<input>` raw por componente `Checkbox`
+- **ListFiltersCheckbox**: Reemplazado `<input>` raw por componente `Checkbox`
+- **ListBase**: Reemplazados checkboxes raw en variantes `filters-checkbox` y `users-select` por `Checkbox`
+- **ListUsersSelect**: Reemplazado `<input>` raw por componente `Checkbox`
+- **List**: Reemplazado `<input>` raw en `checkboxProps` por `Checkbox`
+- **TableRow**: Reemplazados 2 `<input type="checkbox">` raw por `SelectionCheckbox` (filas padres e hijos)
+- **Toolbar**: Ajustes de layout y responsividad con clases flex mejoradas
+- **Modal**: Actualización de clases de borde para mejor estilizado
+
+### Fixed
+- **Badge - Padding con Ícono**: Corrección del padding en badges `sm` cuando tienen ícono, ahora aplica `ui-pl-8 ui-pr-8` explícitamente
+- **Toolbar - Responsividad**: Ajustes de clases de layout para que los addons se ajusten correctamente dentro del contenedor
+
 ## [1.2.37] - 2026-02-05
 
 ### Fixed