anima-ds-nucleus 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "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

@@ -5,7 +5,7 @@ import { Typography } from '../../Atoms/Typography/Typography';
 import { SidebarPointMobile } from '../Sidebar/SidebarPoint';
 
 // Constantes de diseño reutilizables
-const HEADER_HEIGHT = '80px';
+const HEADER_HEIGHT = '64px'; // h-16 equivalente a HeaderCore
 const SEARCH_INPUT_HEIGHT = '40px';
 const SEARCH_ICON_SIZE = '40px';
 const NOTIFICATION_BADGE_COLOR = '#6D3856';
@@ -21,8 +21,8 @@ const FONT_SIZE_BASE = '14px';
 const LINE_HEIGHT_BASE = '20px';
 
 // Constantes de breakpoints
-const BREAKPOINT_MOBILE_MAX = '1024px';
-const BREAKPOINT_DESKTOP_MIN = '1025px';
+const BREAKPOINT_MOBILE_MAX = '1336px';
+const BREAKPOINT_DESKTOP_MIN = '1337px';
 const BREAKPOINT_TABLET_MAX = '700px';
 
 // Constantes de valores por defecto
@@ -185,9 +185,8 @@ export const HeaderPoint = ({
             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;
+            padding: 8px 4px !important;
+            min-height: 48px !important;
             width: 100% !important;
             max-width: 100% !important;
             box-sizing: border-box !important;
@@ -209,7 +208,7 @@ export const HeaderPoint = ({
             left: 0 !important;
             right: 0 !important;
             width: 100% !important;
-            height: calc(64px + 12px + 20px) !important;
+            height: calc(48px + 12px + 8px + 40px) !important;
             background-color: ${mobileBackgroundColor} !important;
             background: ${mobileBackgroundColor} !important;
             z-index: 0 !important;
@@ -227,8 +226,7 @@ export const HeaderPoint = ({
             position: relative;
             z-index: 2 !important;
             display: block;
-            padding: 12px 24px 0 24px;
-            margin-top: -8px;
+            padding: 12px 4px 8px 4px !important;
             width: 100% !important;
             max-width: 100% !important;
             box-sizing: border-box !important;
@@ -238,13 +236,13 @@ export const HeaderPoint = ({
           }
           .header-mobile-layout .header-search-input {
             font-size: 12px !important;
-            padding-left: 8px !important;
-            padding-right: 8px !important;
-            height: 44px !important;
+            padding-left: 12px !important;
+            padding-right: 12px !important;
+            height: 40px !important;
           }
           .header-mobile-layout .header-search-icon-container {
-            width: 44px !important;
-            height: 44px !important;
+            width: 36px !important;
+            height: 40px !important;
           }
           .header-mobile-menu-icon {
             color: var(--color-neutrals-white) !important;
@@ -281,21 +279,39 @@ export const HeaderPoint = ({
         className={`bg-white header-point-mobile rounded-12 header-point-container ${className}`}
         {...props}
       >
-        <div className="w-full px-1">
-          {/* Layout Desktop (más de 480px) */}
-          <div className="header-desktop-layout flex items-center justify-between gap-2 md:gap-4">
+        <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
+          {/* Layout Desktop (más de 1336px) */}
+          <div className="header-desktop-layout flex items-center justify-between h-16">
             {/* Barra de búsqueda con icono a la derecha */}
-            <div className="header-search-wrapper">
+            <div className="header-search-wrapper" style={{ marginRight: '16px' }}>
               <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
                 <input
                   type="text"
                   value={searchValue}
                   onChange={handleSearchChange}
                   placeholder={searchPlaceholder}
-                  className="header-search-input flex-1 pl-2 md:pl-4 pr-2 md:pr-4 py-2 md:py-2.5 bg-white border border-gray-400 rounded-l-lg focus:outline-none text-sm md:text-base border-r-0 rounded-r-none"
+                  className="header-search-input flex-1 pl-2 md:pl-4 pr-2 md:pr-4 py-2 md:py-2.5 bg-white border border-gray-400 rounded-l-lg focus:outline-none text-sm md:text-base"
+                  style={{ 
+                    height: '40px', 
+                    borderRight: 'none', 
+                    borderTopRightRadius: '0', 
+                    borderBottomRightRadius: '0',
+                    color: '#374151',
+                    fontFamily: 'IBM Plex Sans',
+                    fontWeight: 400,
+                    fontStyle: 'italic',
+                    fontSize: '14px',
+                    lineHeight: '20px',
+                    letterSpacing: '0px'
+                  }}
                 />
                 
-                <div className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white border-l-0">
+                <div className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white" style={{
+                  width: '40px',
+                  height: '40px',
+                  borderTopLeftRadius: '0',
+                  borderBottomLeftRadius: '0'
+                }}>
                   <Icon 
                     name="MagnifyingGlassIcon" 
                     variant="24-outline" 
@@ -307,12 +323,13 @@ export const HeaderPoint = ({
             </div>
 
             {/* Notificaciones y Perfil */}
-            <div className="header-actions-wrapper flex items-center gap-3 md:gap-6">
+            <div className="header-actions-wrapper flex items-center space-x-3 md:space-x-6 flex-shrink-0" style={{ marginLeft: 'auto', paddingRight: '0px' }}>
               {notificationCount !== undefined && (
                 <button
                   onClick={onNotificationClick}
-                  className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                  className="relative ml-3 p-2 hover:bg-gray-100 rounded-lg transition-colors"
                   aria-label="Notificaciones"
+                  style={{ transform: 'translateX(12px)' }}
                 >
                   <Icon 
                     name="BellIcon" 
@@ -419,10 +436,28 @@ export const HeaderPoint = ({
                   value={searchValue}
                   onChange={handleSearchChange}
                   placeholder={searchPlaceholder}
-                  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 border-r-0 rounded-r-none"
+                  className="header-search-input flex-1 pl-3 pr-3 py-2 bg-white border border-gray-400 rounded-l-lg focus:outline-none text-sm"
+                  style={{ 
+                    height: '40px', 
+                    borderRight: 'none', 
+                    borderTopRightRadius: '0', 
+                    borderBottomRightRadius: '0',
+                    color: '#374151',
+                    fontFamily: 'IBM Plex Sans',
+                    fontWeight: 400,
+                    fontStyle: 'italic',
+                    fontSize: '14px',
+                    lineHeight: '20px',
+                    letterSpacing: '0px'
+                  }}
                 />
                 
-                <div className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white border-l-0">
+                <div className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white" style={{ 
+                  width: '36px', 
+                  height: '40px',
+                  borderTopLeftRadius: '0',
+                  borderBottomLeftRadius: '0'
+                }}>
                   <Icon 
                     name="MagnifyingGlassIcon" 
                     variant="24-outline" 

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

@@ -13,8 +13,8 @@ const BORDER_RADIUS_TOP = '16px';
 const SHADOW_COLOR = 'rgba(0, 0, 0, 0.1)';
 
 // Constantes de breakpoints
-const BREAKPOINT_MOBILE_MAX = '1024px';
-const BREAKPOINT_DESKTOP_MIN = '1025px';
+const BREAKPOINT_MOBILE_MAX = '1336px';
+const BREAKPOINT_DESKTOP_MIN = '1337px';
 
 const DEFAULT_ITEMS = [
   { id: 'inicio', label: 'Inicio', icon: 'Squares2X2Icon' },