anima-ds-nucleus 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.7",
+  "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;
@@ -33,7 +41,10 @@ export const HeaderPoint = ({
 
   return (
     <header
-      className={`bg-white border-b border-gray-200 header-point-mobile ${className}`}
+      className={`bg-white header-point-mobile ${className}`}
+      style={{
+        ...(props.style || {}),
+      }}
       {...props}
     >
       <style>{`
@@ -56,35 +67,89 @@ export const HeaderPoint = ({
           box-shadow: 0 0 0 1px #3b82f6;
         }
         @media (max-width: 768px) {
-          .header-point-mobile {
+          header.header-point-mobile,
+          .header-point-mobile,
+          header.bg-white.header-point-mobile {
             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"],
+          header.header-point-mobile[style*="backgroundColor"] {
+            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;
-            position: relative;
+            display: block !important;
+            position: relative !important;
+            width: 100% !important;
+            max-width: 100% !important;
           }
           .header-mobile-top-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 8px 4px;
-            min-height: 48px;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: space-between !important;
+            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 {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          }
+          .header-mobile-point-text {
+            display: flex !important;
+            align-items: center !important;
           }
           .header-mobile-layout::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: calc(48px + 16px + 4px + 20px);
-            background-color: var(--color-main);
-            z-index: -1;
-            border-bottom: 1px solid var(--color-main-800);
+            content: '' !important;
+            position: absolute !important;
+            top: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+            height: calc(64px + 12px + 20px) !important;
+            background-color: var(--color-main) !important;
+            background: var(--color-main) !important;
+            z-index: 0 !important;
+            border-bottom: 1px solid var(--color-main-800) !important;
+            pointer-events: none !important;
+            display: block !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+          }
+          .header-mobile-top-row {
+            position: relative;
+            z-index: 2 !important;
           }
           .header-mobile-search-row {
+            position: relative;
+            z-index: 2 !important;
             display: block;
-            padding: 4px 4px 8px 4px;
+            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;
@@ -95,7 +160,8 @@ export const HeaderPoint = ({
             padding-right: 8px !important;
           }
           .header-mobile-layout .header-search-icon-container {
-            width: 36px !important;
+            width: 44px !important;
+            height: 44px !important;
           }
           .header-mobile-menu-icon {
             color: var(--color-neutrals-white) !important;
@@ -111,6 +177,9 @@ export const HeaderPoint = ({
           .header-mobile-layout {
             display: none;
           }
+          header.header-point-mobile {
+            border-bottom: none !important;
+          }
         }
       `}</style>
       
@@ -241,8 +310,9 @@ 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' }}
+                style={{ cursor: 'pointer', padding: '8px' }}
                 aria-label="Menú"
               >
                 <Icon 
@@ -259,14 +329,17 @@ export const HeaderPoint = ({
               style={{ 
                 position: 'absolute', 
                 left: '50%', 
-                transform: 'translateX(-50%)' 
+                top: '54%',
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                alignItems: 'center'
               }}
             >
               <Typography
                 variant="h6"
                 className="header-mobile-point-text"
                 style={{
-                  fontSize: '24px',
+                  fontSize: '20px',
                   fontFamily: 'IBM Plex Sans',
                   fontWeight: 600,
                   lineHeight: '1.2',
@@ -283,7 +356,7 @@ export const HeaderPoint = ({
                 <button
                   onClick={onNotificationClick}
                   className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors header-mobile-notification-button"
-                  style={{ cursor: 'pointer' }}
+                  style={{ cursor: 'pointer', padding: '8px' }}
                   aria-label="Notificaciones"
                 >
                   <Icon 
@@ -319,10 +392,10 @@ export const HeaderPoint = ({
                 value={searchValue}
                 onChange={handleSearchChange}
                 placeholder={searchPlaceholder}
-                className="header-search-input flex-1 pl-3 pr-3 py-2 bg-white border border-gray-400 rounded-l-lg 
+                className="header-search-input flex-1 pl-4 pr-4 py-2 bg-white border border-gray-400 rounded-l-lg 
                          focus:outline-none text-sm"
                 style={{ 
-                  height: '40px', 
+                  height: '44px', 
                   borderRight: 'none', 
                   borderTopRightRadius: '0', 
                   borderBottomRightRadius: '0',
@@ -357,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/NavPoint/NavPoint.jsx

@@ -19,13 +19,22 @@ export const NavPoint = ({
   
   return (
     <nav
-      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md overflow-hidden nav-point ${shouldCompress ? 'compressed' : ''} ${className}`}
+      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md nav-point ${shouldCompress ? 'compressed' : ''} ${className}`}
       style={{ 
-        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)'
+        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)',
+        borderRadius: '16px 16px 0 0',
+        overflow: 'hidden'
       }}
       {...props}
     >
       <style>{`
+        .nav-point {
+          border-radius: 16px 16px 0 0 !important;
+          overflow: hidden !important;
+        }
+        .nav-point > div {
+          overflow: hidden;
+        }
         .nav-point-text {
           display: block;
           transition: opacity 0.2s, max-height 0.2s;
@@ -63,7 +72,7 @@ export const NavPoint = ({
           }
         }
       `}</style>
-      <div className="flex items-stretch">
+      <div className="flex items-stretch" style={{ overflow: 'hidden' }}>
         {items.map((item, index) => {
           const isActive = activeItem === item.id;
           const isFirst = index === 0;

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