anima-ds-nucleus 1.0.6 → 1.0.8

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

@@ -15,15 +15,64 @@ export const NavPoint = ({
   className = '',
   ...props
 }) => {
+  const shouldCompress = items.length >= 5;
+  
   return (
     <nav
-      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md overflow-hidden ${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}
     >
-      <div className="flex items-stretch">
+      <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;
+          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' }}>
         {items.map((item, index) => {
           const isActive = activeItem === item.id;
           const isFirst = index === 0;
@@ -32,7 +81,7 @@ export const NavPoint = ({
             <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"
+              className="flex flex-col items-center justify-center px-4 py-3 transition-all duration-200 cursor-pointer flex-1 relative nav-point-item"
               style={{
                 backgroundColor: isActive ? '#2D5C63' : 'transparent',
                 borderRadius: isActive 
@@ -48,8 +97,14 @@ export const NavPoint = ({
               />
               <Typography
                 variant="body-sm"
-                className="mt-1 font-medium"
-                style={{ color: isActive ? '#FFFFFF' : '#374151' }}
+                className="mt-1 font-medium nav-point-text"
+                style={{ 
+                  color: isActive ? '#FFFFFF' : '#374151',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  width: '100%'
+                }}
               >
                 {item.label}
               </Typography>

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

@@ -50,55 +50,6 @@ export const SidebarPoint = ({
       {...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 && (
@@ -113,38 +64,7 @@ export const SidebarPoint = ({
           </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 - Wrapper para controlar el espacio */}
         <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
@@ -166,31 +86,34 @@ export const SidebarPoint = ({
                   : {}
               }
             >
-              <Icon
-                name="HomeIcon"
-                variant="24-outline"
-                size={20}
-                className={`${isCollapsed ? '' : 'mr-3'} ${
-                  activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
-                }`}
-              />
-              {!isCollapsed && (
-                <Typography
-                  variant="body-md"
-                  className={`font-medium ${
+              <div className="flex items-center">
+                <Icon
+                  name="HomeIcon"
+                  variant="24-outline"
+                  size={20}
+                  className={`${isCollapsed ? '' : 'mr-3'} ${
                     activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
                   }`}
-                >
-                  Inicio
-                </Typography>
-              )}
+                />
+                {!isCollapsed && (
+                  <Typography
+                    variant="body-md"
+                    className={`font-medium ${
+                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                    }`}
+                  >
+                    Inicio
+                  </Typography>
+                )}
+              </div>
               {!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
+                           rounded-full flex items-center justify-center
                            text-body-sm font-medium"
                   style={{ 
-                    backgroundColor: '#6D3856',
+                    backgroundColor: activeItem === 'inicio' ? '#FFFFFF' : '#6D3856',
+                    color: activeItem === 'inicio' ? '#6D3856' : '#FFFFFF',
                     borderRadius: '12px'
                   }}
                 >
@@ -265,10 +188,11 @@ export const SidebarPoint = ({
                       {!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
                         <span
                           className="px-2 py-0.5 min-w-[20px] h-5 
-                                   text-white rounded-full flex items-center justify-center
+                                   rounded-full flex items-center justify-center
                                    text-body-sm font-medium"
                           style={{ 
-                            backgroundColor: '#6D3856',
+                            backgroundColor: activeItem === item.id ? '#FFFFFF' : '#6D3856',
+                            color: activeItem === item.id ? '#6D3856' : '#FFFFFF',
                             borderRadius: '12px'
                           }}
                         >

package/src/components/Layout/TituloPoint/TituloPoint.jsx

@@ -0,0 +1,92 @@
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const TituloPoint = ({
+  backgroundColor = 'var(--color-main)',
+  textColor = '#FFFFFF',
+  borderBottomColor = 'var(--color-main-800)',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`titulo-point ${className}`}
+      style={{
+        backgroundColor: backgroundColor,
+        width: '100%',
+        display: 'none',
+        opacity: 1,
+        borderBottomColor: borderBottomColor
+      }}
+      {...props}
+    >
+      <style>{`
+        @media (min-width: 769px) {
+          .titulo-point {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            width: 100%;
+            height: calc(60px * (100vw / 1440px));
+            min-height: 40px;
+            max-height: 60px;
+            padding-top: 20px;
+            padding-right: 16px;
+            padding-left: 16px;
+            padding-bottom: 0;
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            box-sizing: border-box;
+            position: relative;
+          }
+          .titulo-point-inner {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            gap: 12px;
+            width: 100%;
+            margin: 0 auto;
+            padding: 0;
+            flex-shrink: 0;
+          }
+        }
+        @media (min-width: 1440px) {
+          .titulo-point {
+            height: 60px;
+          }
+        }
+        @media (max-width: 768px) {
+          .titulo-point {
+            display: none !important;
+          }
+        }
+      `}</style>
+      <div className="titulo-point-inner" style={{ margin: 0, padding: 0 }}>
+        <LogoHexa 
+          width={28} 
+          height={32}
+          backgroundColor="#FFFFFF"
+          textColor="var(--color-main)"
+        />
+        <Typography
+          variant="h5"
+          style={{
+            color: textColor,
+            fontFamily: 'IBM Plex Sans',
+            fontWeight: 600,
+            fontSize: '18px',
+            lineHeight: '1.2',
+            margin: 0,
+            padding: 0,
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
+          HEXA Point
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default TituloPoint;

package/src/components/Layout/TituloPoint/TituloPoint.stories.jsx

@@ -0,0 +1,31 @@
+import { TituloPoint } from './TituloPoint';
+
+export default {
+  title: 'Layout/TituloPoint',
+  component: TituloPoint,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <TituloPoint />
+  ),
+};
+
+export const ConColorPersonalizado = {
+  render: () => (
+    <TituloPoint
+      backgroundColor="#000000"
+      textColor="#FFFFFF"
+    />
+  ),
+};
+
+export const ConColorSecundario = {
+  render: () => (
+    <TituloPoint
+      backgroundColor="var(--color-secondary)"
+      textColor="#FFFFFF"
+    />
+  ),
+};