anima-ds-nucleus 1.0.3 → 1.0.5

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { SidebarCore } from './SidebarCore';
+import { SidebarCore, SidebarCoreMobile } from './SidebarCore';
 
 export default {
   title: 'Layout/SidebarCore',
@@ -36,6 +36,8 @@ export const Default = {
           onItemClick={setActiveItem}
           companyName="HEXA Core"
           onCompanyClick={() => console.log('Company clicked')}
+          footerText="v1.0 | Powered by Nucleus"
+          footerCollapsedContent="v1.0"
         />
       </div>
     );
@@ -52,6 +54,8 @@ export const Colapsado = {
           activeItem={activeItem}
           onItemClick={setActiveItem}
           defaultCollapsed={true}
+          footerText="v1.0 | Powered by Nucleus"
+          footerCollapsedContent="v1.0"
         />
       </div>
     );
@@ -89,4 +93,75 @@ export const ConSeccionesPersonalizadas = {
   },
 };
 
+export const ConFooter = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarCore
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Core"
+          onCompanyClick={() => console.log('Company clicked')}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </div>
+    );
+  },
+};
+
+export const ConFooterPersonalizado = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarCore
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Core"
+          onCompanyClick={() => console.log('Company clicked')}
+          footerText={{
+            version: 'v2.1',
+            poweredBy: 'Powered by',
+            brand: 'Nucleus'
+          }}
+          footerCollapsedContent={{
+            icon: 'InformationCircleIcon',
+            text: 'v2.1'
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Mobile = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100 relative">
+        <SidebarCoreMobile
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Core"
+          companyLogo="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQAmAMBIgACEQEDEQH/xAAbAAEBAAMBAQEAAAAAAAAAAAAABQMEBgIBB//EADYQAAICAgECAwQHBwUAAAAAAAABAgMEEQUSIQYxURMUQWEVNXFygZGyIiM2g7HBwjIzQlRz/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwUE/8QAHxEBAQEAAgIDAQEAAAAAAAAAAAECAxEhMQQSQWFR/9oADAMBAAIRAxEAPwD9bAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGtZn4leT7tZkQjc9Lofn38jZCTUvoBr5WbjYbism6FfV/p6t9zOmmk13T7oEst6fQAFADzZZCquVlklGEVtyfwQHoGHGyqMut2Y1kbIJ6bXqZgkvc7gAAoAAAAAAAAAAOL8QVTu5+dVS3ZJQUVvzfSix4e5Z5MfdMp6yILSb85pevzNHM/jCr79f6UbPiHi5dX0hhbjbD9qxR83r/kvmcJ3LbHm4ms61vP5fLB4z/wBzF+7L+qLt2bj4WNTPJs6IySSem++vkchy/JfSNGNKS1dXGSn6Py7oseK/q3F++v0lmvNsazy+eTeV53VrHd7l+7UOvq+Rjw8yjNrdmNPrgnptJ+ZrWfUDT/6v+JH4a6dHhzOtrepqT0/wS2burK+i81mpP52s5XM4GLY67b05rzUE5a/I8ZeZj5vD5s8axTUapJ9ta7E7wxx+LfiTyciuNs3NxXtF1JaS+Hr3KediUYvFZ/u9Ua1OqTko9lvRJbZ2znfJvH2vpp+D/q63/wBn/RG7k81x+Na67MhOSemoJy1+RG4a2dHhvOsrepqUtP07RMHBuyvHnKHE+9uUmnY9dvlpmZrqSOOOa5xnM/x1WLk0ZdftMe2Nkd63H4GPF5DFy7Z1UW9c4Lclp9u+iPwOPmUctbN4dmPjWpvpemo+hh8L/Wub9j/Uamr4ds8+rcyz3V6/kMWjKhjW2qN09dMdPvt6R8zeRxMHXvVyi35RXdv8CFzf8TYX8r9bPfP4WXXyUeRopV8El+y49Wteq9Bd3z0mufc+3U9VawuSxM5tY1vVKK24taaRtkTg87BzL3KvGjj5fQ1KMeyktrevx0WzWb3Hfi39892gANOgAAIeRxWTZ4hhnRUPYxlBvcu+ku/YufAAkzIxjjznvr9czy/hyy3JdmB7NQn3cJS10v5fIqcvxr5Dj40xlGNsNOLflvWmikDP0jE+Pid+PbnIcfzduG8S66uumMdLT7zXwW/Q3OG4yzG4+/FzVB+1k9qMt9taK4LMRM/Hzm9uaq4rluMtn9HWwnVL4Tet/an8fmjfqxuTtwM2vOnXK26txrjF9o7RWAmOjPBmer4SeE42eLx92NmqElZJ7UZb7NJf2NKnjOW4u2a42yuymT2ozevzXbv9h0YFxC8GepJ+JnH0cm8n2/I319Ci1GmtdvtJ9nE8jh8jZk8ZKDjY22ptdtvbTTOjA+i3glklt8Oalw3JT5KjLvtqtcZQlY+rWtPyS18Fo38+vmI5crcCyuVLS/dzfkVgT6SJPj5kvVvlD4fisqrkLc/OdaslvUK/Lb+JcANSSOnHxzjnUAAVsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/9k="
+          onCompanyClick={() => console.log('Company clicked')}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+        <div className="p-4">
+          <p className="text-sm text-gray-600">
+            Haz clic en el botón hamburguesa (esquina superior izquierda) para abrir el menú mobile.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+
+
+
 

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Typography } from '../../Atoms/Typography/Typography';
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
 
 // Mock data con 2 títulos y 2 secciones
 const MOCK_SECTIONS = [
@@ -29,6 +30,9 @@ export const SidebarPoint = ({
   companyLogo,
   onCompanyClick,
   itemBadges = {}, // Objeto con { itemId: number } para los badges
+  footerText, // Texto del footer: puede ser string "v1.0 | Powered by Nucleus" o objeto { version: "v1.0", poweredBy: "Powered by", brand: "Nucleus" }
+  footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
+  Client = false, // Propiedad booleana para mostrar el logo de la empresa en la parte superior
   className = '',
   ...props
 }) => {
@@ -39,42 +43,118 @@ export const SidebarPoint = ({
   };
 
   return (
-    <>
-      <style>{`
-        /* SidebarPoint Responsive Styles - Preparado para diseño distinto */
-        .sidebar-point-responsive {
-          /* Tablet (481px-768px) - breakpoint-md */
-          width: ${isCollapsed ? '5rem' : '16rem'};
-        }
-        
-        /* Desktop Small/Medium (769px-1440px) - breakpoint-base */
-        @media (min-width: 769px) and (max-width: 1440px) {
-          .sidebar-point-responsive {
-            width: ${isCollapsed ? '5rem' : '16rem'};
-          }
-        }
-        
-        /* Desktop Large (1441px+) - breakpoint-lg */
-        @media (min-width: 1441px) {
-          .sidebar-point-responsive {
-            width: ${isCollapsed ? '5rem' : '16rem'};
-          }
-        }
-      `}</style>
-      <aside
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out sidebar-point-responsive hidden md:block ${className}`}
-        {...props}
-      >
-      <nav className="h-full flex flex-col">
+    <aside
+      className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out h-full ${
+        isCollapsed ? 'w-20' : 'w-64'
+      } ${className}`}
+      {...props}
+    >
+      <nav className="h-full flex flex-col" style={{ overflow: 'hidden' }}>
+        {/* Barra superior con HEXA Point */}
+        {!isCollapsed && (
+          <div className="p-4 border-b border-gray-200 flex-shrink-0">
+            <button
+              onClick={onCompanyClick}
+              className="w-full bg-white rounded-lg px-3 py-2.5 
+                       flex items-center justify-between hover:bg-gray-50 transition-colors"
+            >
+              <div className="flex items-center space-x-3">
+                {/* Logo hexagonal */}
+                {companyLogo ? (
+                  <img
+                    src={companyLogo}
+                    alt={companyName}
+                    className="w-8 h-8 rounded"
+                  />
+                ) : (
+                  <LogoHexa width={36} height={40} />
+                )}
+                {/* Nombre de la empresa */}
+                <Typography
+                  variant="body-md"
+                  className="color-gray-900 font-medium"
+                >
+                  {companyName}
+                </Typography>
+              </div>
+            </button>
+          </div>
+        )}
+
+        {/* Botón de colapsar/expandir - Solo visible cuando está expandido */}
+        {!isCollapsed && (
+          <div className="px-4 pt-2 pb-2 flex justify-end flex-shrink-0">
+            <button
+              onClick={toggleCollapse}
+              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+              aria-label="Colapsar sidebar"
+              style={{ marginRight: '10px' }}
+            >
+              <Icon
+                name="ChevronDoubleLeftIcon"
+                variant="24-outline"
+                size={20}
+                className="color-teal"
+              />
+            </button>
+          </div>
+        )}
+
+        {/* Header con logo de empresa cuando Client es true - entre botón colapsar y botón Inicio */}
+        {Client && companyLogo && !isCollapsed && (
+          <div className="flex-shrink-0 border-b border-gray-200" style={{ borderStyle: 'dashed' }}>
+            <div className="px-4 py-6 flex flex-col items-center justify-center">
+              <img
+                src={companyLogo}
+                alt={companyName || 'Company Logo'}
+                className="max-w-[200px] max-h-[80px] object-contain"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Logo cuando está colapsado */}
+        {isCollapsed && (
+          <div className="p-4 border-b border-gray-200 flex justify-center flex-shrink-0">
+            {companyLogo ? (
+              <img
+                src={companyLogo}
+                alt={companyName}
+                className="w-8 h-8 rounded"
+              />
+            ) : (
+              <LogoHexa width={36} height={40} />
+            )}
+          </div>
+        )}
+
+        {/* Botón para expandir - Solo visible cuando está colapsado */}
+        {isCollapsed && (
+          <div className="px-4 pt-2 pb-2 flex justify-center flex-shrink-0">
+            <button
+              onClick={toggleCollapse}
+              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+              aria-label="Expandir sidebar"
+            >
+              <Icon
+                name="ChevronDoubleRightIcon"
+                variant="24-outline"
+                size={20}
+                className="color-teal"
+              />
+            </button>
+          </div>
+        )}
 
-        {/* Contenido del sidebar */}
-        <div className="flex-1 overflow-y-auto py-4">
+        {/* Contenido del sidebar - Wrapper para controlar el espacio */}
+        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+          <div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
           {/* Item "Inicio" destacado */}
           <div className="px-4 mb-4">
             <button
               onClick={() => onItemClick && onItemClick('inicio')}
-              className={`w-full flex items-center ${
-                isCollapsed ? 'justify-center px-2' : 'px-4'
+              className={`w-full flex items-center cursor-pointer ${
+                isCollapsed ? 'justify-center px-2' : 'px-4 justify-between'
               } py-2.5 rounded-lg transition-all duration-200 ${
                 activeItem === 'inicio'
                   ? ''
@@ -95,29 +175,27 @@ export const SidebarPoint = ({
                 }`}
               />
               {!isCollapsed && (
-                <>
-                  <Typography
-                    variant="body-md"
-                    className={`font-medium ${
-                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
-                    }`}
-                  >
-                    Inicio
-                  </Typography>
-                  {itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
-                    <span
-                      className="px-2 py-0.5 min-w-[20px] h-5 
-                               text-white rounded-full flex items-center justify-center
-                               text-body-sm font-medium ml-2"
-                      style={{ 
-                        backgroundColor: '#6D3856',
-                        borderRadius: '12px'
-                      }}
-                    >
-                      {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
-                    </span>
-                  )}
-                </>
+                <Typography
+                  variant="body-md"
+                  className={`font-medium ${
+                    activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                  }`}
+                >
+                  Inicio
+                </Typography>
+              )}
+              {!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
+                <span
+                  className="px-2 py-0.5 min-w-[20px] h-5 
+                           text-white rounded-full flex items-center justify-center
+                           text-body-sm font-medium"
+                  style={{ 
+                    backgroundColor: '#6D3856',
+                    borderRadius: '12px'
+                  }}
+                >
+                  {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
+                </span>
               )}
             </button>
           </div>
@@ -125,7 +203,14 @@ export const SidebarPoint = ({
           {/* Secciones */}
           {sections.map((section, sectionIndex) => (
             <div key={sectionIndex} className="mb-6">
-              {/* Título de la sección */}
+              {/* Línea separadora cuando está colapsado - antes de cada sección */}
+              {isCollapsed && (
+                <div className="px-4 mb-4">
+                  <div className="border-t" style={{ borderColor: '#2D5C63' }}></div>
+                </div>
+              )}
+              
+              {/* Título de la sección - solo visible cuando NO está colapsado */}
               {!isCollapsed && (
                 <div className="px-4 mb-2">
                   <Typography
@@ -143,7 +228,7 @@ export const SidebarPoint = ({
                   <div key={item.id} className="px-4">
                     <button
                       onClick={() => onItemClick && onItemClick(item.id)}
-                      className={`w-full flex items-center ${
+                      className={`w-full flex items-center cursor-pointer ${
                         isCollapsed ? 'justify-center px-2' : 'px-4 justify-between'
                       } py-2.5 rounded-lg transition-all duration-200 ${
                         activeItem === item.id
@@ -196,10 +281,120 @@ export const SidebarPoint = ({
               </div>
             </div>
           ))}
+          </div>
         </div>
+
+        {/* Footer con texto configurable - cuando está expandido */}
+        {footerText && !isCollapsed && (
+          <div className="px-4 pb-4 flex-shrink-0">
+            <div 
+              className="bg-white border rounded-lg px-3 py-2 flex items-center justify-center"
+              style={{ 
+                borderColor: '#2D5C63',
+                borderRadius: '8px'
+              }}
+            >
+              {typeof footerText === 'string' ? (
+                <Typography
+                  variant="body-sm"
+                  style={{ color: '#2D5C63' }}
+                  className="text-center"
+                >
+                  {(() => {
+                    const parts = footerText.split('|');
+                    if (parts.length === 2) {
+                      const leftPart = parts[0].trim();
+                      const rightPart = parts[1].trim();
+                      // Si contiene "Powered by", separar y poner la marca en bold
+                      if (rightPart.includes('Powered by')) {
+                        const poweredByMatch = rightPart.match(/Powered by (.+)/);
+                        if (poweredByMatch) {
+                          return (
+                            <>
+                              {leftPart} | Powered by <span className="font-bold">{poweredByMatch[1]}</span>
+                            </>
+                          );
+                        }
+                      }
+                      return `${leftPart} | ${rightPart}`;
+                    }
+                    return footerText;
+                  })()}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="body-sm"
+                  style={{ color: '#2D5C63' }}
+                  className="text-center"
+                >
+                  {footerText.version && `${footerText.version}`}
+                  {footerText.version && (footerText.poweredBy || footerText.brand) && ' | '}
+                  {footerText.poweredBy && `${footerText.poweredBy} `}
+                  {footerText.brand && <span className="font-bold">{footerText.brand}</span>}
+                </Typography>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Footer cuando está colapsado */}
+        {footerCollapsedContent && isCollapsed && (
+          <div className="px-1 pt-2 pb-2 flex justify-center flex-shrink-0" style={{ zIndex: 10 }}>
+            <div 
+              className="bg-white border rounded px-1 py-0.5 flex items-center justify-center"
+              style={{ 
+                borderColor: '#2D5C63',
+                borderRadius: '4px',
+                width: 'calc(100% - 8px)',
+                minHeight: '20px'
+              }}
+            >
+              {typeof footerCollapsedContent === 'string' ? (
+                <span
+                  style={{ 
+                    color: '#2D5C63', 
+                    fontSize: '9px', 
+                    lineHeight: '1.2',
+                    fontWeight: '600',
+                    textAlign: 'center',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%'
+                  }}
+                >
+                  {footerCollapsedContent}
+                </span>
+              ) : typeof footerCollapsedContent === 'object' && footerCollapsedContent.icon ? (
+                <div className="flex items-center justify-center">
+                  {footerCollapsedContent.icon && (
+                    <Icon
+                      name={footerCollapsedContent.icon}
+                      variant="24-outline"
+                      size={14}
+                      style={{ color: '#2D5C63' }}
+                    />
+                  )}
+                  {footerCollapsedContent.text && (
+                    <span
+                      style={{ 
+                        color: '#2D5C63', 
+                        fontSize: '10px',
+                        marginLeft: footerCollapsedContent.icon ? '4px' : '0'
+                      }}
+                    >
+                      {footerCollapsedContent.text}
+                    </span>
+                  )}
+                </div>
+              ) : (
+                footerCollapsedContent
+              )}
+            </div>
+          </div>
+        )}
       </nav>
     </aside>
-    </>
   );
 };
 
@@ -302,6 +497,16 @@ const SidebarPointMobile = ({
               {capitalizedDate}
             </Typography>
           </div>
+          {/* Logo de empresa (si se proporciona) */}
+          {companyLogo && (
+            <div className="bg-gray-100 px-4 py-6 flex justify-center border-b border-gray-200">
+              <img
+                src={companyLogo}
+                alt={companyName || 'Company Logo'}
+                className="max-w-[120px] max-h-[120px] object-contain"
+              />
+            </div>
+          )}
           {/* Contenido del sidebar mobile */}
           <div className="flex-1 overflow-y-auto py-4">
             {/* Item "Inicio" destacado */}
@@ -311,7 +516,7 @@ const SidebarPointMobile = ({
                   onItemClick && onItemClick('inicio');
                   toggleMobileMenu();
                 }}
-                className={`w-full flex items-center px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
                   activeItem === 'inicio'
                     ? ''
                     : 'color-gray-700 hover:bg-gray-100'
@@ -378,7 +583,7 @@ const SidebarPointMobile = ({
                           onItemClick && onItemClick(item.id);
                           toggleMobileMenu();
                         }}
-                        className={`w-full flex items-center px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                        className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
                           activeItem === item.id
                             ? ''
                             : 'color-gray-700 hover:bg-gray-100'

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

@@ -36,6 +36,8 @@ export const Default = {
           onItemClick={setActiveItem}
           companyName="HEXA Point"
           onCompanyClick={() => console.log('Company clicked')}
+          Client={false}
+          footerText="v1.0 | Powered by Nucleus"
         />
       </div>
     );
@@ -52,6 +54,8 @@ export const Colapsado = {
           activeItem={activeItem}
           onItemClick={setActiveItem}
           defaultCollapsed={true}
+          footerText="v1.0 | Powered by Nucleus"
+          footerCollapsedContent="v1.0"
         />
       </div>
     );
@@ -83,6 +87,7 @@ export const ConSeccionesPersonalizadas = {
           sections={customSections}
           activeItem={activeItem}
           onItemClick={setActiveItem}
+          footerText="v1.0 | Powered by Nucleus"
         />
       </div>
     );
@@ -99,6 +104,7 @@ export const Mobile = {
           activeItem={activeItem}
           onItemClick={setActiveItem}
           companyName="HEXA Point"
+          companyLogo="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQAmAMBIgACEQEDEQH/xAAbAAEBAAMBAQEAAAAAAAAAAAAABQMEBgIBB//EADYQAAICAgECAwQHBwUAAAAAAAABAgMEEQUSIQYxURMUQWEVNXFygZGyIiM2g7HBwjIzQlRz/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwUE/8QAHxEBAQEAAgIDAQEAAAAAAAAAAAECAxEhMQQSQWFR/9oADAMBAAIRAxEAPwD9bAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGtZn4leT7tZkQjc9Lofn38jZCTUvoBr5WbjYbism6FfV/p6t9zOmmk13T7oEst6fQAFADzZZCquVlklGEVtyfwQHoGHGyqMut2Y1kbIJ6bXqZgkvc7gAAoAAAAAAAAAAOL8QVTu5+dVS3ZJQUVvzfSix4e5Z5MfdMp6yILSb85pevzNHM/jCr79f6UbPiHi5dX0hhbjbD9qxR83r/kvmcJ3LbHm4ms61vP5fLB4z/wBzF+7L+qLt2bj4WNTPJs6IySSem++vkchy/JfSNGNKS1dXGSn6Py7oseK/q3F++v0lmvNsazy+eTeV53VrHd7l+7UOvq+Rjw8yjNrdmNPrgnptJ+ZrWfUDT/6v+JH4a6dHhzOtrepqT0/wS2burK+i81mpP52s5XM4GLY67b05rzUE5a/I8ZeZj5vD5s8axTUapJ9ta7E7wxx+LfiTyciuNs3NxXtF1JaS+Hr3KediUYvFZ/u9Ua1OqTko9lvRJbZ2znfJvH2vpp+D/q63/wBn/RG7k81x+Na67MhOSemoJy1+RG4a2dHhvOsrepqUtP07RMHBuyvHnKHE+9uUmnY9dvlpmZrqSOOOa5xnM/x1WLk0ZdftMe2Nkd63H4GPF5DFy7Z1UW9c4Lclp9u+iPwOPmUctbN4dmPjWpvpemo+hh8L/Wub9j/Uamr4ds8+rcyz3V6/kMWjKhjW2qN09dMdPvt6R8zeRxMHXvVyi35RXdv8CFzf8TYX8r9bPfP4WXXyUeRopV8El+y49Wteq9Bd3z0mufc+3U9VawuSxM5tY1vVKK24taaRtkTg87BzL3KvGjj5fQ1KMeyktrevx0WzWb3Hfi39892gANOgAAIeRxWTZ4hhnRUPYxlBvcu+ku/YufAAkzIxjjznvr9czy/hyy3JdmB7NQn3cJS10v5fIqcvxr5Dj40xlGNsNOLflvWmikDP0jE+Pid+PbnIcfzduG8S66uumMdLT7zXwW/Q3OG4yzG4+/FzVB+1k9qMt9taK4LMRM/Hzm9uaq4rluMtn9HWwnVL4Tet/an8fmjfqxuTtwM2vOnXK26txrjF9o7RWAmOjPBmer4SeE42eLx92NmqElZJ7UZb7NJf2NKnjOW4u2a42yuymT2ozevzXbv9h0YFxC8GepJ+JnH0cm8n2/I319Ci1GmtdvtJ9nE8jh8jZk8ZKDjY22ptdtvbTTOjA+i3glklt8Oalw3JT5KjLvtqtcZQlY+rWtPyS18Fo38+vmI5crcCyuVLS/dzfkVgT6SJPj5kvVvlD4fisqrkLc/OdaslvUK/Lb+JcANSSOnHxzjnUAAVsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/9k="
           onCompanyClick={() => console.log('Company clicked')}
         />
         <div className="p-4">
@@ -111,4 +117,67 @@ export const Mobile = {
   },
 };
 
+export const ConFooter = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarPoint
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Point"
+          onCompanyClick={() => console.log('Company clicked')}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </div>
+    );
+  },
+};
+
+export const ConFooterPersonalizado = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarPoint
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Point"
+          onCompanyClick={() => console.log('Company clicked')}
+          footerText={{
+            version: 'v2.1',
+            poweredBy: 'Powered by',
+            brand: 'Nucleus'
+          }}
+          footerCollapsedContent={{
+            icon: 'InformationCircleIcon',
+            text: 'v2.1'
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Client = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarPoint
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Point"
+          onCompanyClick={() => console.log('Company clicked')}
+          Client={false}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </div>
+    );
+  },
+};
+
 

package/src/index.js

@@ -14,6 +14,7 @@ export { Divider } from './components/Atoms/Divider/Divider';
 export { Skeleton } from './components/Atoms/Skeleton/Skeleton';
 export { Toast } from './components/Atoms/Toast/Toast';
 export { Tooltip } from './components/Atoms/Tooltip/Tooltip';
+export { LogoHexa } from './components/Atoms/LogoHexa/LogoHexa';
 
 // Inputs
 export { Input } from './components/Inputs/Input/Input';
@@ -27,12 +28,13 @@ export { FileUpload } from './components/Inputs/FileUpload/FileUpload';
 
 // Layout
 export { Layout } from './components/Layout/Layout/Layout';
-export { Header } from './components/Layout/Header/Header';
 export { HeaderConBuscador } from './components/Layout/Header/HeaderConBuscador';
 export { HeaderCore } from './components/Layout/Header/HeaderCore';
-export { Sidebar } from './components/Layout/Sidebar/Sidebar';
-export { SidebarCore } from './components/Layout/Sidebar/SidebarCore';
+export { HeaderPoint } from './components/Layout/Header/HeaderPoint';
+export { HeaderGeneral } from './components/Layout/Header/HeaderGeneral';
+export { SidebarCore, SidebarCoreMobile } from './components/Layout/Sidebar/SidebarCore';
 export { SidebarPoint, SidebarPointMobile } from './components/Layout/Sidebar/SidebarPoint';
+export { NavPoint } from './components/Layout/NavPoint/NavPoint';
 export { Modal } from './components/Layout/Modal/Modal';
 export { Tabs } from './components/Layout/Tabs/Tabs';
 export { Accordion } from './components/Layout/Accordion/Accordion';
@@ -44,6 +46,13 @@ export { Stepper } from './components/Layout/Stepper/Stepper';
 
 // DataDisplay
 export { Card } from './components/DataDisplay/Card/Card';
+export { CardTituloCorto } from './components/DataDisplay/Card/CardTituloCorto';
+export { CardTituloLargo } from './components/DataDisplay/Card/CardTituloLargo';
+export { CardTituloCortoMasEstado } from './components/DataDisplay/Card/CardTituloCortoMasEstado';
+export { CardTituloLargoMasEstado } from './components/DataDisplay/Card/CardTituloLargoMasEstado';
+export { CardSkeleton } from './components/DataDisplay/Card/CardSkeleton';
+export { CardVacia } from './components/DataDisplay/Card/CardVacia';
+export { CardError } from './components/DataDisplay/Card/CardError';
 export { DBGrid } from './components/DataDisplay/DBGrid/DBGrid';
 export { LineChart } from './components/DataDisplay/LineChart/LineChart';
 export { BarChart } from './components/DataDisplay/BarChart/BarChart';

package/src/style.css

@@ -104,6 +104,31 @@
   font-family: 'IBM Plex Mono', monospace;
 }
 
+/* --- MONO TEXT - IBM Plex Mono --- */
+.text-mono-lg {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
+.text-mono-md {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.3125rem; /* 21px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
+.text-mono-sm {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.125rem; /* 18px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
 /* --- COLORS GENÉRICOS (Clases utilitarias) --- */
 .color-black {
   color: #111827; /* gray-900 */