anima-ds-nucleus 1.0.7 → 1.0.8

package/package.json

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

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

@@ -33,7 +33,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 +59,70 @@ 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;
           }
+          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-mobile-layout {
-            display: block;
-            position: relative;
+            display: block !important;
+            position: relative !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;
+          }
+          .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;
           }
           .header-mobile-search-row {
             display: block;
-            padding: 4px 4px 8px 4px;
+            padding: 12px 24px 0 24px;
+            margin-top: -8px;
           }
           .header-desktop-layout {
             display: none !important;
@@ -95,7 +133,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 +150,9 @@ export const HeaderPoint = ({
           .header-mobile-layout {
             display: none;
           }
+          header.header-point-mobile {
+            border-bottom: none !important;
+          }
         }
       `}</style>
       
@@ -242,7 +284,7 @@ export const HeaderPoint = ({
             <div className="flex items-center">
               <button
                 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 +301,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 +328,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 +364,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',

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/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"
+    />
+  ),
+};