anima-ds-nucleus 1.0.22 → 1.0.24

package/package.json

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

package/src/components/DataDisplay/Card/CardError.jsx

@@ -51,7 +51,6 @@ export const CardError = ({
         style={{
           paddingTop: '80px',
           paddingBottom: '24px',
-          minHeight: 'calc(476px - 60px)',
           display: 'flex',
           justifyContent: 'flex-start'
         }}

package/src/components/DataDisplay/Card/CardVacia.jsx

@@ -50,7 +50,6 @@ export const CardVacia = ({
         style={{
           paddingTop: '80px',
           paddingBottom: '24px',
-          minHeight: 'calc(476px - 60px)',
           display: 'flex',
           justifyContent: 'flex-start'
         }}

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

@@ -160,7 +160,7 @@ export const HeaderCore = ({
           border-color: #3b82f6 !important;
           box-shadow: 0 0 0 1px #3b82f6;
         }
-        @media (max-width: 768px) {
+        @media (max-width: 1365px) {
           .header-mobile-layout {
             display: block;
           }
@@ -187,7 +187,7 @@ export const HeaderCore = ({
             width: 36px !important;
           }
         }
-        @media (min-width: 769px) {
+        @media (min-width: 1366px) {
           .header-mobile-layout {
             display: none;
           }
@@ -195,7 +195,7 @@ export const HeaderCore = ({
       `}</style>
       
       <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
-        {/* Layout Desktop (más de 768px) */}
+        {/* Layout Desktop (más de 1365px) */}
         <div
           className={`header-desktop-layout flex items-center justify-between h-16 ${desktopLayoutClassName}`}
           style={desktopLayoutStyle}
@@ -373,7 +373,7 @@ export const HeaderCore = ({
           </div>
         </div>
 
-        {/* Layout Mobile (768px o menos) */}
+        {/* Layout Mobile (1365px o menos) */}
         <div
           className={`header-mobile-layout ${mobileHeaderClassName}`}
           style={{ background: mobileBackgroundColor, ...(mobileHeaderStyle || {}) }}

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,
@@ -41,7 +42,7 @@ export const SaludoConFechaDashboard = ({
   inicioIconVariant = '20-solid', // heroicons "mini"
   inicioIconSize = 16,
   // Responsive behavior (<= breakpoint): centrar saludo y ocultar el resto
-  responsiveBreakpointPx = 768,
+  responsiveBreakpointPx = 1365,
   responsiveHideInicio = true,
   responsiveHideDate = true,
   responsiveCenterGreeting = 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
 }) => {
@@ -549,7 +650,7 @@ export const SidebarCore = ({
   // Detectar tamaño de pantalla
   useEffect(() => {
     const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 768);
+      setIsMobile(window.innerWidth <= 1365);
     };
 
     // Verificar al montar
@@ -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}