anima-ds-nucleus 1.0.10 → 1.0.11

package/package.json

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

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

@@ -12,6 +12,43 @@ export const HeaderCore = ({
   onSearch,
   onNotificationClick,
   onUserClick,
+  // Overrides de estilo/clases para poder ajustar layout desde el proyecto consumidor
+  desktopLayoutClassName = '',
+  desktopLayoutStyle,
+  desktopSearchContainerClassName = '',
+  desktopSearchContainerStyle,
+  desktopRightContainerClassName = '',
+  desktopRightContainerStyle,
+  notificationButtonClassName = '',
+  notificationButtonStyle,
+  notificationIconClassName = '',
+  notificationIconStyle,
+  notificationBadgeClassName = '',
+  notificationBadgeStyle,
+  // Overrides específicos de medidas/posiciones (Desktop / Mobile)
+  notificationDesktopButtonStyle,
+  notificationDesktopIconWrapperClassName = '',
+  notificationDesktopIconWrapperStyle,
+  notificationDesktopIconSize = 18,
+  notificationDesktopIconStrokeWidth = 1.5,
+  notificationDesktopIconStyle,
+  notificationDesktopBadgeStyle,
+  notificationMobileButtonClassName = '',
+  notificationMobileButtonStyle,
+  notificationMobileIconWrapperClassName = '',
+  notificationMobileIconWrapperStyle,
+  notificationMobileIconSize = 24,
+  notificationMobileIconStrokeWidth = 1.5,
+  notificationMobileIconStyle,
+  showNotificationBadgeOnMobile = false,
+  notificationMobileBadgeStyle,
+  // Desktop avatar / nombre (overrides)
+  desktopUserAvatarClassName = '',
+  desktopUserAvatarStyle,
+  desktopUserNameStyle,
+  // Mobile avatar (overrides)
+  mobileUserAvatarClassName = '',
+  mobileUserAvatarStyle,
   sidebarSections,
   sidebarActiveItem,
   onSidebarItemClick,
@@ -103,9 +140,15 @@ export const HeaderCore = ({
       
       <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
         {/* Layout Desktop (más de 768px) */}
-        <div className="header-desktop-layout flex items-center justify-between h-16">
+        <div
+          className={`header-desktop-layout flex items-center justify-between h-16 ${desktopLayoutClassName}`}
+          style={desktopLayoutStyle}
+        >
           {/* Barra de búsqueda con icono a la derecha */}
-          <div className="flex-1 mr-2 md:mr-4" style={{ maxWidth: 'none', minWidth: '0' }}>
+          <div
+            className={`flex-1 mr-2 md:mr-4 ${desktopSearchContainerClassName}`}
+            style={{ maxWidth: 'none', minWidth: '0', ...(desktopSearchContainerStyle || {}) }}
+          >
             <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
               {/* Input de búsqueda */}
               <input
@@ -151,28 +194,71 @@ export const HeaderCore = ({
           </div>
 
           {/* Notificaciones y Perfil */}
-          <div className="flex items-center space-x-3 md:space-x-6 flex-shrink-0" style={{ marginLeft: 'auto', paddingRight: '0px' }}>
+          <div
+            className={`flex items-center space-x-3 md:space-x-6 flex-shrink-0 ${desktopRightContainerClassName}`}
+            style={{ marginLeft: 'auto', paddingRight: '0px', ...(desktopRightContainerStyle || {}) }}
+          >
             {/* Icono de notificaciones */}
             {notificationCount !== undefined && (
               <button
                 onClick={onNotificationClick}
-                className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                className={`ml-3 p-2 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2 ${notificationButtonClassName}`}
                 aria-label="Notificaciones"
+                style={{
+                  // Nota: en desktop el contenedor derecho está anclado a la derecha (marginLeft: auto).
+                  // Un ml-* en el primer hijo no “mueve” visualmente, porque ensancha el contenedor hacia la izquierda.
+                  // Por eso usamos translateX por defecto (overrideable por props).
+                  transform: 'translateX(12px)',
+                  ...(notificationButtonStyle || {}),
+                  ...(notificationDesktopButtonStyle || {}),
+                }}
               >
-                <Icon 
-                  name="BellIcon" 
-                  variant="24-outline" 
-                  size={24} 
-                  className="color-gray-600" 
-                />
+                {/* Contenedor 24x24 + icono posicionado (Figma) */}
+                <span
+                  className={`relative inline-block ${notificationDesktopIconWrapperClassName}`}
+                  style={{
+                    width: '24px',
+                    height: '24px',
+                    opacity: 1,
+                    ...(notificationDesktopIconWrapperStyle || {}),
+                  }}
+                >
+                  <Icon 
+                    name="BellAlertIcon" 
+                    variant="24-outline" 
+                    size={notificationDesktopIconSize}
+                    strokeWidth={notificationDesktopIconStrokeWidth}
+                    className={`color-gray-600 ${notificationIconClassName}`}
+                    style={{
+                      width: '17.75112533569336px',
+                      height: '18px',
+                      position: 'absolute',
+                      top: '3px',
+                      left: '3.12px',
+                      opacity: 1,
+                      transform: 'rotate(0deg)',
+                      ...(notificationIconStyle || {}),
+                      ...(notificationDesktopIconStyle || {}),
+                    }}
+                  />
+                </span>
                 {notificationCount > 0 && (
                   <span
-                    className="absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[20px] h-5 
-                             text-white rounded-full flex items-center justify-center
-                             text-body-sm font-medium"
+                    className={`h-5 text-white flex items-center justify-center text-body-sm font-medium ${notificationBadgeClassName}`}
                     style={{ 
                       backgroundColor: '#6D3856',
-                      borderRadius: '12px'
+                      minWidth: '24px',
+                      width: 'fit-content',
+                      height: '20px',
+                      paddingTop: '2px',
+                      paddingRight: '8px',
+                      paddingBottom: '2px',
+                      paddingLeft: '8px',
+                      borderRadius: '8px',
+                      opacity: 1,
+                      transform: 'rotate(0deg)',
+                      ...(notificationBadgeStyle || {}),
+                      ...(notificationDesktopBadgeStyle || {}),
                     }}
                   >
                     {notificationCount > 9 ? '9+' : notificationCount}
@@ -194,6 +280,15 @@ export const HeaderCore = ({
                   name={userName}
                   size="medium"
                   variant="circle"
+                  className={desktopUserAvatarClassName}
+                  style={{
+                    width: '36px',
+                    height: '36px',
+                    opacity: 1,
+                    borderRadius: '16777200px',
+                    transform: 'rotate(0deg)',
+                    ...(desktopUserAvatarStyle || {}),
+                  }}
                 />
                 <Typography
                   variant="body-lg"
@@ -206,6 +301,7 @@ export const HeaderCore = ({
                     lineHeight: '24px',
                     letterSpacing: '0%',
                     verticalAlign: 'middle'
+                    ,...(desktopUserNameStyle || {})
                   }}
                 >
                   {userName}
@@ -263,23 +359,66 @@ export const HeaderCore = ({
               {notificationCount !== undefined && (
                 <button
                   onClick={onNotificationClick}
-                  className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                  className={`ml-2 hover:bg-gray-100 transition-colors flex items-center justify-center ${notificationButtonClassName} ${notificationMobileButtonClassName}`}
                   aria-label="Notificaciones"
+                  style={{
+                    width: '48px',
+                    height: '48px',
+                    paddingRight: '0px',
+                    borderRadius: '8px',
+                    opacity: 1,
+                    transform: 'rotate(0deg)',
+                    ...(notificationButtonStyle || {}),
+                    ...(notificationMobileButtonStyle || {}),
+                  }}
                 >
-                  <Icon 
-                    name="BellIcon" 
-                    variant="24-outline" 
-                    size={24} 
-                    className="color-gray-600" 
-                  />
-                  {notificationCount > 0 && (
+                  {/* Contenedor 32x32 implícito dentro del botón 48x48 + icono posicionado (Figma) */}
+                  <span
+                    className={`relative inline-block ${notificationMobileIconWrapperClassName}`}
+                    style={{
+                      width: '32px',
+                      height: '32px',
+                      opacity: 1,
+                      ...(notificationMobileIconWrapperStyle || {}),
+                    }}
+                  >
+                    <Icon 
+                      name="BellAlertIcon" 
+                      variant="24-outline" 
+                      size={notificationMobileIconSize}
+                      strokeWidth={notificationMobileIconStrokeWidth}
+                      className={`color-gray-600 ${notificationIconClassName}`}
+                      style={{
+                        width: '22.163536071777344px',
+                        height: '24px',
+                        position: 'absolute',
+                        top: '4px',
+                        left: '4.92px',
+                        opacity: 1,
+                        transform: 'rotate(0deg)',
+                        ...(notificationIconStyle || {}),
+                        ...(notificationMobileIconStyle || {}),
+                      }}
+                    />
+                  </span>
+                  {showNotificationBadgeOnMobile && notificationCount > 0 && (
                     <span
-                      className="absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[20px] h-5 
-                               text-white rounded-full flex items-center justify-center
-                               text-body-sm font-medium"
-                      style={{ 
+                      className={`h-5 text-white flex items-center justify-center text-body-sm font-medium ${notificationBadgeClassName}`}
+                      style={{
                         backgroundColor: '#6D3856',
-                        borderRadius: '12px'
+                        minWidth: '24px',
+                        width: 'fit-content',
+                        height: '20px',
+                        paddingTop: '2px',
+                        paddingRight: '8px',
+                        paddingBottom: '2px',
+                        paddingLeft: '8px',
+                        borderRadius: '8px',
+                        marginLeft: '6px',
+                        opacity: 1,
+                        transform: 'rotate(0deg)',
+                        ...(notificationBadgeStyle || {}),
+                        ...(notificationMobileBadgeStyle || {}),
                       }}
                     >
                       {notificationCount > 9 ? '9+' : notificationCount}
@@ -300,6 +439,8 @@ export const HeaderCore = ({
                     name={userName || ''}
                     size="medium"
                     variant="circle"
+                    className={mobileUserAvatarClassName}
+                    style={mobileUserAvatarStyle}
                   />
                 </button>
               )}

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

@@ -386,6 +386,9 @@ export const SidebarCore = ({
   companyName = 'HEXA Core',
   companyLogo,
   onCompanyClick,
+  // Overrides desktop para el header "HEXA Core"
+  desktopCompanyNameClassName = '',
+  desktopCompanyNameStyle,
   nucleusName = 'Nucleus AR',
   nucleusLogo,
   onNucleusClick,
@@ -495,7 +498,18 @@ export const SidebarCore = ({
                 {/* Nombre de la empresa */}
                 <Typography
                   variant="body-md"
-                  className="color-gray-900 font-medium"
+                  className={`color-gray-900 ${desktopCompanyNameClassName}`}
+                  style={{
+                    fontFamily: 'IBM Plex Sans',
+                    fontWeight: 600,
+                    fontStyle: 'normal',
+                    fontSize: '18px',
+                    lineHeight: '28px',
+                    letterSpacing: '0px',
+                    opacity: 1,
+                    transform: 'rotate(0deg)',
+                    ...(desktopCompanyNameStyle || {}),
+                  }}
                 >
                   {companyName}
                 </Typography>