anima-ds-nucleus 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Anima Design System - A comprehensive React component library",
   "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
   "license": "UNLICENSED",

package/src/components/Layout/Header/HeaderPoint.jsx

@@ -5,7 +5,7 @@ import { Typography } from '../../Atoms/Typography/Typography';
 import { SidebarPointMobile } from '../Sidebar/SidebarPoint';
 
 // Constantes de diseño reutilizables
-const HEADER_HEIGHT = '64px'; // h-16 equivalente a HeaderCore
+const HEADER_HEIGHT = '80px';
 const SEARCH_INPUT_HEIGHT = '40px';
 const SEARCH_ICON_SIZE = '40px';
 const NOTIFICATION_BADGE_COLOR = '#6D3856';
@@ -21,8 +21,9 @@ const FONT_SIZE_BASE = '14px';
 const LINE_HEIGHT_BASE = '20px';
 
 // Constantes de breakpoints
-const BREAKPOINT_MOBILE_MAX = '1336px';
-const BREAKPOINT_DESKTOP_MIN = '1337px';
+// SM: ≤ 480px, MD: 481px - 1364px, BASE: 1365px - 1440px, LG: ≥ 1441px
+const BREAKPOINT_MOBILE_MAX = '1364px'; // Mobile hasta 1364px (SM y MD)
+const BREAKPOINT_DESKTOP_MIN = '1365px'; // Desktop desde 1365px (BASE y LG)
 const BREAKPOINT_TABLET_MAX = '700px';
 
 // Constantes de valores por defecto
@@ -280,8 +281,8 @@ export const HeaderPoint = ({
         {...props}
       >
         <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
-          {/* Layout Desktop (más de 1336px) */}
-          <div className="header-desktop-layout flex items-center justify-between h-16">
+          {/* Layout Desktop (más de 1364px) */}
+          <div className="header-desktop-layout flex items-center justify-between" style={{ height: HEADER_HEIGHT, padding: '16px' }}>
             {/* Barra de búsqueda con icono a la derecha */}
             <div className="header-search-wrapper" style={{ marginRight: '16px' }}>
               <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">

package/src/components/Layout/NavPoint/NavPoint.jsx

@@ -13,8 +13,9 @@ const BORDER_RADIUS_TOP = '16px';
 const SHADOW_COLOR = 'rgba(0, 0, 0, 0.1)';
 
 // Constantes de breakpoints
-const BREAKPOINT_MOBILE_MAX = '1336px';
-const BREAKPOINT_DESKTOP_MIN = '1337px';
+// SM: ≤ 480px, MD: 481px - 1364px, BASE: 1365px - 1440px, LG: ≥ 1441px
+const BREAKPOINT_MOBILE_MAX = '1364px'; // Visible en SM y MD
+const BREAKPOINT_DESKTOP_MIN = '1365px'; // Oculto en BASE y LG
 
 const DEFAULT_ITEMS = [
   { id: 'inicio', label: 'Inicio', icon: 'Squares2X2Icon' },
@@ -51,13 +52,13 @@ export const NavPoint = ({
           min-height: ${NAV_HEIGHT} !important;
           height: ${NAV_HEIGHT} !important;
         }
-        /* Mostrar NavPoint de 0px a 1024px */
+        /* Mostrar NavPoint en SM (≤ 480px) y MD (481px - 1364px) */
         @media (max-width: ${BREAKPOINT_MOBILE_MAX}) {
           .nav-point {
             display: block !important;
           }
         }
-        /* Ocultar NavPoint desde 1025px en adelante */
+        /* Ocultar NavPoint en BASE (1365px - 1440px) y LG (≥ 1441px) */
         @media (min-width: ${BREAKPOINT_DESKTOP_MIN}) {
           .nav-point {
             display: none !important;

package/src/components/Layout/SaludoConFechaDashboard/SaludoConFechaDashboard.jsx

@@ -32,6 +32,7 @@ export const SaludoConFechaDashboard = ({
   saludo = 'Hola',
   date = new Date(),
   showDate = true,
+  showSaludoFecha = true, // Prop para ocultar saludo y fecha manteniendo el alto
 
   // Breadcrumb / inicio (arriba del saludo)
   showInicio = true,
@@ -178,6 +179,7 @@ export const SaludoConFechaDashboard = ({
             paddingBottom: '16px',
             paddingLeft: '8px',
             boxSizing: 'border-box',
+            visibility: showSaludoFecha ? 'visible' : 'hidden',
             ...(saludoFechaContainerStyle || {}),
           }}
         >

package/src/components/Layout/Sidebar/SidebarCore.jsx

@@ -46,6 +46,12 @@ const SidebarCoreMobile = ({
   // Mobile: íconos
   mobileIconSize = 24,
   mobileIconStyle,
+  // Sección de Configuración
+  configSectionLabel = 'Configuración',
+  configSectionIcon = 'Cog6ToothIcon',
+  configSectionId = 'configuracion',
+  onConfigClick,
+  configBadge,
   isOpen: controlledIsOpen,
   onClose: controlledOnClose,
   className = '',
@@ -385,6 +391,95 @@ const SidebarCoreMobile = ({
             ))}
           </div>
 
+          {/* Sección de Configuración */}
+          <div 
+            className="flex-shrink-0 px-4"
+            style={{
+              paddingTop: '24px',
+              paddingBottom: '40px',
+              position: 'relative',
+            }}
+          >
+            {/* Borde superior centrado */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '24px',
+                left: '16px',
+                right: '16px',
+                height: '1px',
+                backgroundColor: '#E5E5E5',
+              }}
+            />
+            <button
+              onClick={() => {
+                if (enableOptimisticActiveItem) {
+                  setOptimisticActiveItem(configSectionId);
+                }
+                onConfigClick && onConfigClick(configSectionId);
+                if (controlledOnClose) {
+                  if (closeOnItemClickAnimationFrame) {
+                    requestAnimationFrame(() => controlledOnClose());
+                  } else {
+                    controlledOnClose();
+                  }
+                } else {
+                  toggleMobileMenu();
+                }
+              }}
+              className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                effectiveActiveItem === configSectionId
+                  ? ''
+                  : 'color-gray-700 hover:bg-gray-100'
+              }`}
+              style={
+                effectiveActiveItem === configSectionId
+                  ? { backgroundColor: '#2D5C63' }
+                  : {}
+              }
+            >
+              <div className="flex items-center">
+                <Icon
+                  name={configSectionIcon}
+                  variant="24-outline"
+                  size={mobileIconSize}
+                  className={`mr-3 ${
+                    effectiveActiveItem === configSectionId ? 'color-white' : 'color-gray-700'
+                  }`}
+                  style={{
+                    width: `${mobileIconSize}px`,
+                    height: `${mobileIconSize}px`,
+                    opacity: 1,
+                    transform: 'rotate(0deg)',
+                    ...(mobileIconStyle || {}),
+                  }}
+                />
+                <Typography
+                  variant="body-md"
+                  weight={effectiveActiveItem === configSectionId ? mobileItemLabelWeightActive : mobileItemLabelWeightInactive}
+                  className={effectiveActiveItem === configSectionId ? 'color-white' : 'color-gray-700'}
+                  style={{ fontSize: mobileItemLabelFontSize }}
+                >
+                  {configSectionLabel}
+                </Typography>
+              </div>
+              {configBadge !== undefined && configBadge > 0 && (
+                <span
+                  className="px-2 py-0.5 min-w-[20px] h-5 
+                           rounded-full flex items-center justify-center
+                           text-body-sm font-medium"
+                  style={{ 
+                    backgroundColor: effectiveActiveItem === configSectionId ? '#ffffff' : '#6D3856',
+                    color: effectiveActiveItem === configSectionId ? '#6D3856' : '#ffffff',
+                    borderRadius: '12px'
+                  }}
+                >
+                  {configBadge > 9 ? '9+' : configBadge}
+                </span>
+              )}
+            </button>
+          </div>
+
           {/* Footer con texto configurable */}
           {footerText && (
             <div className="px-4 pb-4 flex-shrink-0">
@@ -525,6 +620,12 @@ export const SidebarCore = ({
   coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core" (solo mobile)
   coreTextStyle, // Estilos personalizados para el texto "Core" (solo mobile)
   fluidWidth = false, // Si es true, el root respeta el ancho del contenedor (grid/flex) en lugar de usar anchos fijos
+  // Sección de Configuración
+  configSectionLabel = 'Configuración',
+  configSectionIcon = 'Cog6ToothIcon',
+  configSectionId = 'configuracion',
+  onConfigClick,
+  configBadge,
   className = '',
   ...props
 }) => {
@@ -604,6 +705,11 @@ export const SidebarCore = ({
         footerCollapsedContent={footerCollapsedContent}
         coreContainerStyle={coreContainerStyle}
         coreTextStyle={coreTextStyle}
+        configSectionLabel={configSectionLabel}
+        configSectionIcon={configSectionIcon}
+        configSectionId={configSectionId}
+        onConfigClick={onConfigClick}
+        configBadge={configBadge}
         className={className}
         {...props}
       />
@@ -1175,6 +1281,209 @@ export const SidebarCore = ({
           </div>
         </div>
 
+        {/* Sección de Configuración - Desktop expandido */}
+        {!isCollapsed && (
+          <div 
+            className="flex-shrink-0 px-4"
+            style={{
+              paddingTop: '24px',
+              paddingBottom: '40px',
+              position: 'relative',
+            }}
+          >
+            {/* Borde superior centrado */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '24px',
+                left: '16px',
+                right: '16px',
+                height: '1px',
+                backgroundColor: '#E5E5E5',
+              }}
+            />
+            <button
+              onClick={() => onConfigClick && onConfigClick(configSectionId)}
+              className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                activeItem === configSectionId
+                  ? ''
+                  : 'color-gray-700 hover:bg-gray-100'
+              }`}
+              style={
+                activeItem === configSectionId
+                  ? { backgroundColor: '#2D5C63' }
+                  : {}
+              }
+            >
+              <div className="flex items-center">
+                <Icon
+                  name={configSectionIcon}
+                  variant="24-outline"
+                  size={desktopNavIconGlyphSize}
+                  className={`mr-3 ${
+                    activeItem === configSectionId ? 'color-white' : 'color-gray-700'
+                  }`}
+                />
+                <Typography
+                  variant="body-lg"
+                  weight={activeItem === configSectionId ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
+                  className={`${
+                    activeItem === configSectionId ? 'color-white' : 'color-gray-700'
+                  } min-w-0`}
+                  style={{
+                    fontSize: desktopItemLabelFontSize,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {configSectionLabel}
+                </Typography>
+              </div>
+              {configBadge !== undefined && configBadge > 0 && (
+                <span
+                  className="px-2 py-0.5 min-w-[20px] h-5 
+                           rounded-full flex items-center justify-center
+                           text-body-sm font-medium"
+                  style={{ 
+                    backgroundColor: activeItem === configSectionId ? '#ffffff' : '#6D3856',
+                    color: activeItem === configSectionId ? '#6D3856' : '#ffffff',
+                    borderRadius: '12px'
+                  }}
+                >
+                  {configBadge > 9 ? '9+' : configBadge}
+                </span>
+              )}
+            </button>
+          </div>
+        )}
+
+        {/* Sección de Configuración - Desktop colapsado */}
+        {isCollapsed && (
+          <div 
+            className="flex-shrink-0 px-2"
+            style={{
+              paddingTop: '24px',
+              paddingBottom: '40px',
+              position: 'relative',
+            }}
+          >
+            {/* Borde superior centrado */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '24px',
+                left: '8px',
+                right: '8px',
+                height: '1px',
+                backgroundColor: '#E5E5E5',
+              }}
+            />
+            <div
+              className={desktopCollapsedItemWrapperClassName}
+              style={{
+                ...collapsedItemWrapperDefaults,
+                backgroundColor:
+                  activeItem === configSectionId ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
+                ...(desktopCollapsedItemWrapperStyle || {}),
+              }}
+              title={configSectionLabel}
+            >
+              <button
+                onClick={() => onConfigClick && onConfigClick(configSectionId)}
+                className="flex items-center justify-center transition-all duration-200"
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  backgroundColor: 'transparent',
+                  borderRadius: '8px',
+                }}
+                title={configSectionLabel}
+              >
+                <div
+                  className="flex items-center"
+                  style={{
+                    justifyContent: 'center',
+                    columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
+                    width: '100%',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: `${desktopNavIconSize}px`,
+                      height: `${desktopNavIconSize}px`,
+                      opacity: 1,
+                      transform: 'rotate(0deg)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      marginLeft:
+                        desktopCollapsedOverlapEnabled &&
+                        configBadge !== undefined &&
+                        configBadge > 0
+                          ? `${desktopCollapsedOverlapIconMarginLeftPx}px`
+                          : undefined,
+                      ...(desktopCollapsedIconWrapperStyle || {}),
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '24px',
+                        height: '24px',
+                        opacity: 1,
+                        transform: 'rotate(0deg)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        ...(desktopCollapsedIconInnerStyle || {}),
+                      }}
+                    >
+                      <Icon
+                        name={configSectionIcon}
+                        variant="24-outline"
+                        size={desktopNavIconGlyphSize}
+                        className={activeItem === configSectionId ? 'color-white' : 'color-gray-700'}
+                        style={{
+                          width: `${desktopNavIconGlyphSize}px`,
+                          height: `${desktopNavIconGlyphSize}px`,
+                          opacity: 1,
+                          transform: 'rotate(0deg)',
+                          ...(desktopNavIconStyle || {}),
+                        }}
+                      />
+                    </div>
+                  </div>
+                  {configBadge !== undefined && configBadge > 0 && (
+                    <span
+                      className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
+                      style={{
+                        backgroundColor: activeItem === configSectionId ? '#ffffff' : '#6D3856',
+                        color: activeItem === configSectionId ? '#6D3856' : '#ffffff',
+                        width: desktopCollapsedBadgeWidth,
+                        height: desktopCollapsedBadgeHeight,
+                        paddingTop: '4px',
+                        paddingRight: '6px',
+                        paddingBottom: '4px',
+                        paddingLeft: '6px',
+                        borderRadius: '16px',
+                        opacity: 1,
+                        transform: 'rotate(0deg)',
+                        marginLeft: desktopCollapsedOverlapEnabled
+                          ? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
+                          : undefined,
+                        boxSizing: 'border-box',
+                        ...(desktopCollapsedBadgeStyle || {}),
+                      }}
+                    >
+                      {configBadge > 9 ? '9+' : configBadge}
+                    </span>
+                  )}
+                </div>
+              </button>
+            </div>
+          </div>
+        )}
+
         {/* Footer con texto configurable - cuando está expandido */}
         {footerText && !isCollapsed && (
           <div className="px-4 pb-4 flex-shrink-0">
@@ -1292,8 +1601,8 @@ export const SidebarCore = ({
                         lineHeight: '100%',
                         letterSpacing: '0%',
                         textAlign: 'center',
-                        marginLeft: effectiveFooterCollapsedContent.icon ? '4px' : '0'
-                        ,...(desktopCollapsedFooterTextStyle || {})
+                        marginLeft: effectiveFooterCollapsedContent.icon ? '4px' : '0',
+                        ...(desktopCollapsedFooterTextStyle || {})
                       }}
                     >
                       {effectiveFooterCollapsedContent.text}

package/src/components/Views/ForgotPassword/ForgotPassword.jsx

@@ -128,6 +128,8 @@ export const ForgotPassword = ({
     <div
       className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
       style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+      data-variant={isHexaLogin ? 'hexa-login' : undefined}
+      data-layout={layout}
       {...props}
     >
       <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>

package/src/components/Views/LoginForm/LoginForm.jsx

@@ -77,7 +77,7 @@ export const LoginForm = ({
 
   return (
     isHexaLogin ? (
-      <div className={`anima-loginform__container ${className}`} {...props}>
+      <div className={`anima-loginform__container ${className}`} data-variant="hexa-login" {...props}>
         <div className="anima-loginform__card">
         <form onSubmit={handleSubmit}>
           {/* 1) Email */}

package/src/components/Views/NewPassword/NewPassword.jsx

@@ -63,6 +63,8 @@ export const NewPassword = ({
       <div
         className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
         style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+        data-variant={isHexaLogin ? 'hexa-login' : undefined}
+        data-layout={layout}
         {...props}
       >
         <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
@@ -157,6 +159,8 @@ export const NewPassword = ({
     <div
       className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
       style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+      data-variant={isHexaLogin ? 'hexa-login' : undefined}
+      data-layout={layout}
       {...props}
     >
       <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>

package/src/style.css

@@ -847,10 +847,59 @@
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+}
+
+/* ============================================
+   ESTILOS PERSONALIZADOS PARA VARIANTE HEXA-LOGIN
+   ============================================ */
+
+/* 1. Tipografía IBM Plex Sans en LoginForm (variante hexa-login) */
+.anima-loginform__container[data-variant="hexa-login"],
+.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__card,
+.anima-loginform__container[data-variant="hexa-login"] p,
+.anima-loginform__container[data-variant="hexa-login"] span,
+.anima-loginform__container[data-variant="hexa-login"] label,
+.anima-loginform__container[data-variant="hexa-login"] button {
+  font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
+}
+
+/* 2. Tamaño fijo de iconos en botones sociales de LoginForm (variante hexa-login) */
+.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__socialButton svg {
+  width: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  height: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  min-width: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  min-height: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  max-width: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  max-height: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  flex-shrink: 0;
+}
+
+/* 3. Tipografía IBM Plex Sans en NewPassword y ForgotPassword (variante hexa-login) - títulos y subtítulos */
+[data-variant="hexa-login"] div[class*="mb-8"] h3,
+[data-variant="hexa-login"] div[class*="mb-8"] p,
+[data-variant="hexa-login"] div[class*="text-center"] h3,
+[data-variant="hexa-login"] div[class*="text-center"] p {
+  font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
+}
+
+/* ============================================
+   ESTILOS PERSONALIZADOS PARA VARIANTE LOGIN EN HEADER
+   ============================================ */
+
+/* 4. Responsive: Ocultar icono de idioma en HeaderGeneral (variante login) */
+@media (max-width: var(--anima-login-header-mobile-breakpoint, 768px)) {
+  /* Ocultar el icono LanguageIcon en el header de login */
+  /* El icono es el primer hijo del contenedor flex dentro del div.relative del selector de idioma */
+  header[data-variant="login"] .relative > .flex.items-center > *:first-child:not(button),
+  header[data-variant="login"] .relative > div.flex.items-center > *:first-child:not(button) {
+    display: none !important;
+  }
+  
+  /* Ajustar el contenedor del selector para que no tenga gap cuando el icono desaparece */
+  header[data-variant="login"] .relative > .flex.items-center,
+  header[data-variant="login"] .relative > div.flex.items-center {
+    gap: 0 !important;
+  }
 }
 
 .anima-passwordfield__toggle:hover {