anima-ds-nucleus 1.0.8 → 1.0.9

package/package.json

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

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Avatar } from '../../Atoms/Avatar/Avatar';
 import { Typography } from '../../Atoms/Typography/Typography';
+import { SidebarCoreMobile } from '../Sidebar/SidebarCore';
 
 export const HeaderCore = ({
   searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
@@ -11,10 +12,21 @@ export const HeaderCore = ({
   onSearch,
   onNotificationClick,
   onUserClick,
+  sidebarSections,
+  sidebarActiveItem,
+  onSidebarItemClick,
+  sidebarItemBadges,
+  sidebarCompanyName,
+  sidebarCompanyLogo,
+  sidebarFooterText,
+  sidebarFooterCollapsedContent,
+  sidebarCoreContainerStyle,
+  sidebarCoreTextStyle,
   className = '',
   ...props
 }) => {
   const [searchValue, setSearchValue] = useState('');
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   const handleSearchChange = (e) => {
     const value = e.target.value;
@@ -217,6 +229,7 @@ export const HeaderCore = ({
             <div className="flex items-center space-x-2">
               {/* Botón menú hamburguesa */}
               <button
+                onClick={() => setIsSidebarOpen(true)}
                 className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                 aria-label="Menú"
               >
@@ -340,6 +353,31 @@ export const HeaderCore = ({
           </div>
         </div>
       </div>
+
+      {/* SidebarCoreMobile - Solo visible en móvil cuando está abierto */}
+      {isSidebarOpen && (
+        <div className="header-core-mobile-sidebar-wrapper">
+          <SidebarCoreMobile
+            sections={sidebarSections}
+            activeItem={sidebarActiveItem}
+            onItemClick={(itemId) => {
+              if (onSidebarItemClick) {
+                onSidebarItemClick(itemId);
+              }
+              setIsSidebarOpen(false);
+            }}
+            itemBadges={sidebarItemBadges}
+            companyName={sidebarCompanyName}
+            companyLogo={sidebarCompanyLogo}
+            footerText={sidebarFooterText}
+            footerCollapsedContent={sidebarFooterCollapsedContent}
+            coreContainerStyle={sidebarCoreContainerStyle}
+            coreTextStyle={sidebarCoreTextStyle}
+            isOpen={isSidebarOpen}
+            onClose={() => setIsSidebarOpen(false)}
+          />
+        </div>
+      )}
     </header>
   );
 };

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Avatar } from '../../Atoms/Avatar/Avatar';
 import { Typography } from '../../Atoms/Typography/Typography';
+import { SidebarPointMobile } from '../Sidebar/SidebarPoint';
 
 export const HeaderPoint = ({
   searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
@@ -11,10 +12,17 @@ export const HeaderPoint = ({
   onSearch,
   onNotificationClick,
   onUserClick,
+  sidebarSections,
+  sidebarActiveItem,
+  onSidebarItemClick,
+  sidebarItemBadges,
+  sidebarCompanyName,
+  sidebarCompanyLogo,
   className = '',
   ...props
 }) => {
   const [searchValue, setSearchValue] = useState('');
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   const handleSearchChange = (e) => {
     const value = e.target.value;
@@ -65,6 +73,12 @@ export const HeaderPoint = ({
             background-color: transparent !important;
             background: transparent !important;
             border-bottom: none !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
           }
           header.header-point-mobile[style*="background"],
           .header-point-mobile[style*="background"],
@@ -72,9 +86,18 @@ export const HeaderPoint = ({
             background-color: transparent !important;
             background: transparent !important;
           }
+          header.header-point-mobile > div {
+            width: 100% !important;
+            max-width: 100% !important;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            margin: 0 !important;
+          }
           .header-mobile-layout {
             display: block !important;
             position: relative !important;
+            width: 100% !important;
+            max-width: 100% !important;
           }
           .header-mobile-top-row {
             display: flex !important;
@@ -83,6 +106,9 @@ export const HeaderPoint = ({
             padding: 24px 24px 12px 24px !important;
             min-height: 64px !important;
             height: 64px !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box !important;
           }
           .header-mobile-menu-button,
           .header-mobile-notification-button {
@@ -118,11 +144,12 @@ export const HeaderPoint = ({
           .header-mobile-search-row {
             position: relative;
             z-index: 2 !important;
-          }
-          .header-mobile-search-row {
             display: block;
             padding: 12px 24px 0 24px;
             margin-top: -8px;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box !important;
           }
           .header-desktop-layout {
             display: none !important;
@@ -283,6 +310,7 @@ export const HeaderPoint = ({
             {/* Lado izquierdo: Menú hamburguesa */}
             <div className="flex items-center">
               <button
+                onClick={() => setIsSidebarOpen(true)}
                 className="p-2 hover:bg-gray-100 rounded-lg transition-colors header-mobile-menu-button"
                 style={{ cursor: 'pointer', padding: '8px' }}
                 aria-label="Menú"
@@ -402,6 +430,27 @@ export const HeaderPoint = ({
           </div>
         </div>
       </div>
+
+      {/* SidebarPointMobile - Solo visible en móvil cuando está abierto */}
+      {isSidebarOpen && (
+        <div className="header-mobile-sidebar-wrapper">
+          <SidebarPointMobile
+            sections={sidebarSections}
+            activeItem={sidebarActiveItem}
+            onItemClick={(itemId) => {
+              if (onSidebarItemClick) {
+                onSidebarItemClick(itemId);
+              }
+              setIsSidebarOpen(false);
+            }}
+            itemBadges={sidebarItemBadges}
+            companyName={sidebarCompanyName}
+            companyLogo={sidebarCompanyLogo}
+            isOpen={isSidebarOpen}
+            onClose={() => setIsSidebarOpen(false)}
+          />
+        </div>
+      )}
     </header>
   );
 };

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

@@ -34,13 +34,23 @@ const SidebarCoreMobile = ({
   footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
   coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core"
   coreTextStyle, // Estilos personalizados para el texto "Core"
+  isOpen: controlledIsOpen,
+  onClose: controlledOnClose,
   className = '',
   ...props
 }) => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  
+  // Si se proporciona control externo, usarlo; si no, usar estado interno
+  const isMobileMenuOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  const setIsMobileMenuOpen = controlledOnClose ? controlledOnClose : setInternalIsOpen;
 
   const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
+    if (controlledOnClose) {
+      controlledOnClose();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
   };
 
   // Generar footerCollapsedContent automáticamente si no se proporciona pero sí hay footerText
@@ -79,8 +89,8 @@ const SidebarCoreMobile = ({
           transition: transform 0.3s ease-in-out;
         }
       `}</style>
-      {/* Botón hamburguesa - solo visible cuando el menú está cerrado */}
-      {!isMobileMenuOpen && (
+      {/* Botón hamburguesa - solo visible cuando el menú está cerrado y no hay control externo */}
+      {!isMobileMenuOpen && controlledIsOpen === undefined && (
         <button
           onClick={toggleMobileMenu}
           className="fixed top-4 left-4 z-50 p-2 bg-white border border-gray-200 rounded-lg shadow-md 
@@ -96,12 +106,21 @@ const SidebarCoreMobile = ({
         </button>
       )}
       {/* Overlay para cerrar el menú */}
-      {isMobileMenuOpen && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-40"
-          onClick={toggleMobileMenu}
-        />
-      )}
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 z-40"
+        style={{
+          opacity: isMobileMenuOpen ? 1 : 0,
+          pointerEvents: isMobileMenuOpen ? 'auto' : 'none',
+          transition: 'opacity 0.3s ease-in-out'
+        }}
+        onClick={() => {
+          if (controlledOnClose) {
+            controlledOnClose();
+          } else {
+            toggleMobileMenu();
+          }
+        }}
+      />
       <aside
         className={`bg-white border-r border-gray-200 sidebar-core-mobile ${className}`}
         {...props}
@@ -145,7 +164,13 @@ const SidebarCoreMobile = ({
             
             {/* Lado derecho: Botón X */}
             <button
-              onClick={toggleMobileMenu}
+              onClick={() => {
+                if (controlledOnClose) {
+                  controlledOnClose();
+                } else {
+                  toggleMobileMenu();
+                }
+              }}
               className="p-1 hover:bg-gray-100 rounded transition-colors flex-shrink-0"
               aria-label="Cerrar menú"
             >
@@ -164,7 +189,11 @@ const SidebarCoreMobile = ({
               <button
                 onClick={() => {
                   onItemClick && onItemClick('inicio');
-                  toggleMobileMenu();
+                  if (controlledOnClose) {
+                    controlledOnClose();
+                  } else {
+                    toggleMobileMenu();
+                  }
                 }}
                 className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
                   activeItem === 'inicio'
@@ -232,7 +261,11 @@ const SidebarCoreMobile = ({
                       <button
                         onClick={() => {
                           onItemClick && onItemClick(item.id);
-                          toggleMobileMenu();
+                          if (controlledOnClose) {
+                            controlledOnClose();
+                          } else {
+                            toggleMobileMenu();
+                          }
                         }}
                         className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
                           activeItem === item.id

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Typography } from '../../Atoms/Typography/Typography';
 import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
@@ -331,13 +331,44 @@ const SidebarPointMobile = ({
   companyLogo,
   onCompanyClick,
   itemBadges = {},
+  isOpen: controlledIsOpen,
+  onClose: controlledOnClose,
   className = '',
   ...props
 }) => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+  
+  // Si se proporciona control externo, usarlo; si no, usar estado interno
+  const isMobileMenuOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  const setIsMobileMenuOpen = controlledOnClose ? controlledOnClose : setInternalIsOpen;
+
+  // Efecto para manejar la animación cuando se controla externamente
+  useEffect(() => {
+    if (controlledIsOpen !== undefined) {
+      if (controlledIsOpen) {
+        // Cuando se abre, primero montamos sin animación, luego activamos la animación
+        setShouldAnimate(false);
+        // Pequeño delay para asegurar que el DOM esté listo antes de animar
+        const timer = setTimeout(() => {
+          setShouldAnimate(true);
+        }, 10);
+        return () => clearTimeout(timer);
+      } else {
+        // Cuando se cierra, desactivamos la animación inmediatamente
+        setShouldAnimate(false);
+      }
+    } else {
+      setShouldAnimate(internalIsOpen);
+    }
+  }, [controlledIsOpen, internalIsOpen]);
 
   const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
+    if (controlledOnClose) {
+      controlledOnClose();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
   };
 
   // Formatear fecha de hoy
@@ -360,11 +391,20 @@ const SidebarPointMobile = ({
           top: 0;
           height: 100vh;
           z-index: 50;
-          transition: transform 0.3s ease-in-out;
+          transition: ${shouldAnimate ? 'transform 0.3s ease-in-out' : 'none'};
+        }
+        .sidebar-point-mobile-overlay {
+          position: fixed;
+          inset: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          z-index: 40;
+          transition: opacity 0.3s ease-in-out;
+          opacity: ${isMobileMenuOpen ? '1' : '0'};
+          pointer-events: ${isMobileMenuOpen ? 'auto' : 'none'};
         }
       `}</style>
-      {/* Botón hamburguesa - solo visible cuando el menú está cerrado */}
-      {!isMobileMenuOpen && (
+      {/* Botón hamburguesa - solo visible cuando el menú está cerrado y no hay control externo */}
+      {!isMobileMenuOpen && controlledIsOpen === undefined && (
         <button
           onClick={toggleMobileMenu}
           className="fixed top-4 left-4 z-50 p-2 bg-white border border-gray-200 rounded-lg shadow-md 
@@ -380,19 +420,23 @@ const SidebarPointMobile = ({
         </button>
       )}
       {/* Overlay para cerrar el menú */}
-      {isMobileMenuOpen && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-40"
-          onClick={toggleMobileMenu}
-        />
-      )}
+      <div
+        className="sidebar-point-mobile-overlay"
+        onClick={() => {
+          if (controlledOnClose) {
+            controlledOnClose();
+          } else {
+            toggleMobileMenu();
+          }
+        }}
+      />
       <aside
         className={`bg-gray-100 border-r border-gray-200 sidebar-point-mobile ${className}`}
         {...props}
       >
         <nav className="h-full flex flex-col">
-          {/* Header verde con "Point" y botón X */}
-          <div className="bg-brand px-4 py-4 flex items-center justify-between" style={{ backgroundColor: '#56B676' }}>
+          {/* Header MAIN con "Point" y botón X */}
+          <div className="px-4 py-4 flex items-center justify-between" style={{ backgroundColor: 'var(--color-main)' }}>
             <Typography
               variant="h5"
               className="color-white font-bold"
@@ -400,8 +444,15 @@ const SidebarPointMobile = ({
               Point
             </Typography>
             <button
-              onClick={toggleMobileMenu}
+              onClick={() => {
+                if (controlledOnClose) {
+                  controlledOnClose();
+                } else {
+                  toggleMobileMenu();
+                }
+              }}
               className="p-1 hover:bg-opacity-80 rounded transition-colors"
+              style={{ cursor: 'pointer' }}
               aria-label="Cerrar menú"
             >
               <Icon
@@ -421,7 +472,7 @@ const SidebarPointMobile = ({
               {capitalizedDate}
             </Typography>
           </div>
-          {/* Logo de empresa (si se proporciona) */}
+          {/* Logo de empresa (solo si se proporciona) */}
           {companyLogo && (
             <div className="bg-gray-100 px-4 py-6 flex justify-center border-b border-gray-200">
               <img