anima-ds-nucleus 1.0.16 → 1.0.17

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

@@ -1,6 +1,17 @@
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Typography } from '../../Atoms/Typography/Typography';
 
+// Constantes de diseño reutilizables
+const ICON_SIZE = 24;
+const ICON_COLOR_ACTIVE = '#FFFFFF';
+const ICON_COLOR_INACTIVE = '#374151';
+const BACKGROUND_COLOR_ACTIVE = '#2D5C63';
+const TEXT_COLOR_ACTIVE = '#FFFFFF';
+const TEXT_COLOR_INACTIVE = '#374151';
+const NAV_HEIGHT = '80px'; // Altura fija para garantizar espacio para icono + label + padding
+const BORDER_RADIUS_TOP = '16px';
+const SHADOW_COLOR = 'rgba(0, 0, 0, 0.1)';
+
 const DEFAULT_ITEMS = [
   { id: 'inicio', label: 'Inicio', icon: 'Squares2X2Icon' },
   { id: 'docs', label: 'Docs', icon: 'DocumentTextIcon' },
@@ -15,91 +26,86 @@ export const NavPoint = ({
   className = '',
   ...props
 }) => {
-  const shouldCompress = items.length >= 5;
-  
+  const handleItemClick = (itemId) => {
+    if (onItemClick) {
+      onItemClick(itemId);
+    }
+  };
+
+  const getBorderRadius = (isActive, isFirst, isLast) => {
+    if (!isActive) return '0';
+    if (isFirst) return `${BORDER_RADIUS_TOP} 0 0 0`;
+    if (isLast) return `0 ${BORDER_RADIUS_TOP} 0 0`;
+    return '0';
+  };
+
   return (
     <nav
-      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md 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 ${className}`}
       style={{ 
-        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)',
-        borderRadius: '16px 16px 0 0',
-        overflow: 'hidden'
+        boxShadow: `0 -2px 8px ${SHADOW_COLOR}`,
+        borderRadius: `${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0`,
+        overflow: 'hidden',
+        minHeight: NAV_HEIGHT,
+        height: NAV_HEIGHT,
       }}
       {...props}
     >
       <style>{`
         .nav-point {
-          border-radius: 16px 16px 0 0 !important;
+          border-radius: ${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0 !important;
           overflow: hidden !important;
+          min-height: ${NAV_HEIGHT} !important;
+          height: ${NAV_HEIGHT} !important;
         }
         .nav-point > div {
           overflow: hidden;
+          height: 100%;
+        }
+        .nav-point-item {
+          min-width: 0;
+          min-height: ${NAV_HEIGHT};
+          height: 100%;
         }
         .nav-point-text {
-          display: block;
-          transition: opacity 0.2s, max-height 0.2s;
+          display: block !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          max-height: none !important;
           overflow: hidden;
           white-space: nowrap !important;
           text-overflow: ellipsis;
           width: 100%;
           text-align: center;
         }
-        .nav-point-item {
-          min-width: 0;
-        }
-        /* Ocultar textos solo cuando hay muchos items (5+) y pantalla pequeña para evitar desorden */
-        @media (max-width: 480px) {
-          .nav-point.compressed .nav-point-text {
-            display: none !important;
-            max-height: 0;
-            opacity: 0;
-          }
-          .nav-point.compressed .nav-point-item {
-            padding-left: 0.5rem !important;
-            padding-right: 0.5rem !important;
-          }
-        }
-        /* Ocultar textos solo en pantallas muy pequeñas (< 320px) donde definitivamente no caben */
-        @media (max-width: 320px) {
-          .nav-point-text {
-            display: none !important;
-            max-height: 0;
-            opacity: 0;
-          }
-          .nav-point-item {
-            padding-left: 0.5rem !important;
-            padding-right: 0.5rem !important;
-          }
-        }
       `}</style>
-      <div className="flex items-stretch" style={{ overflow: 'hidden' }}>
+      <div className="flex items-stretch h-full" style={{ overflow: 'hidden' }}>
         {items.map((item, index) => {
           const isActive = activeItem === item.id;
           const isFirst = index === 0;
           const isLast = index === items.length - 1;
+          
           return (
             <button
               key={item.id}
-              onClick={() => onItemClick && onItemClick(item.id)}
-              className="flex flex-col items-center justify-center px-4 py-3 transition-all duration-200 cursor-pointer flex-1 relative nav-point-item"
+              onClick={() => handleItemClick(item.id)}
+              className="flex flex-col items-center justify-center px-4 py-3 transition-colors duration-200 cursor-pointer flex-1 relative nav-point-item"
               style={{
-                backgroundColor: isActive ? '#2D5C63' : 'transparent',
-                borderRadius: isActive 
-                  ? (isFirst ? '16px 0 0 0' : isLast ? '0 16px 0 0' : '0')
-                  : '0',
+                backgroundColor: isActive ? BACKGROUND_COLOR_ACTIVE : 'transparent',
+                borderRadius: getBorderRadius(isActive, isFirst, isLast),
               }}
             >
               <Icon
                 name={item.icon}
                 variant="24-outline"
-                size={24}
-                style={{ color: isActive ? '#FFFFFF' : '#374151' }}
+                size={ICON_SIZE}
+                style={{ color: isActive ? ICON_COLOR_ACTIVE : ICON_COLOR_INACTIVE }}
               />
               <Typography
                 variant="body-sm"
                 className="mt-1 font-medium nav-point-text"
                 style={{ 
-                  color: isActive ? '#FFFFFF' : '#374151',
+                  color: isActive ? TEXT_COLOR_ACTIVE : TEXT_COLOR_INACTIVE,
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',

package/src/index.js

@@ -32,6 +32,7 @@ export { HeaderConBuscador } from './components/Layout/Header/HeaderConBuscador'
 export { HeaderCore } from './components/Layout/Header/HeaderCore';
 export { HeaderPoint } from './components/Layout/Header/HeaderPoint';
 export { HeaderGeneral } from './components/Layout/Header/HeaderGeneral';
+export { HeaderCompartido } from './components/Layout/Header/HeaderCompartido';
 export { SidebarCore, SidebarCoreMobile } from './components/Layout/Sidebar/SidebarCore';
 export { SidebarPoint, SidebarPointMobile } from './components/Layout/Sidebar/SidebarPoint';
 export { NavPoint } from './components/Layout/NavPoint/NavPoint';