anima-ds-nucleus 1.0.26 → 1.0.27

package/package.json

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

@@ -194,7 +194,7 @@ export const HeaderCore = ({
         }
       `}</style>
       
-      <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
+      <div className="w-full">
         {/* Layout Desktop (más de 1365px) */}
         <div
           className={`header-desktop-layout flex items-center justify-between h-16 ${desktopLayoutClassName}`}

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

@@ -118,9 +118,10 @@ export const NavPoint = ({
               />
               <Typography
                 variant="body-sm"
-                className="mt-1 font-medium nav-point-text"
+                className={`mt-1 ${isActive ? 'font-medium' : 'font-regular'} nav-point-text`}
                 style={{ 
                   color: isActive ? TEXT_COLOR_ACTIVE : TEXT_COLOR_INACTIVE,
+                  fontSize: '1rem',
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',

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

@@ -306,8 +306,7 @@ const SidebarCoreMobile = ({
                 {/* Título de la sección */}
                 <div className="px-4 mb-2">
                   <Typography
-                    variant="body-sm"
-                    className="color-gray-500 uppercase font-medium tracking-wider"
+                    className="text-sidebar-core color-gray-500 uppercase font-medium tracking-wider"
                   >
                     {section.title}
                   </Typography>
@@ -404,7 +403,7 @@ const SidebarCoreMobile = ({
             <div
               style={{
                 position: 'absolute',
-                top: '24px',
+                top: '0px',
                 left: '16px',
                 right: '16px',
                 height: '1px',
@@ -416,6 +415,7 @@ const SidebarCoreMobile = ({
                 if (enableOptimisticActiveItem) {
                   setOptimisticActiveItem(configSectionId);
                 }
+                onItemClick && onItemClick(configSectionId);
                 onConfigClick && onConfigClick(configSectionId);
                 if (controlledOnClose) {
                   if (closeOnItemClickAnimationFrame) {
@@ -1103,8 +1103,7 @@ export const SidebarCore = ({
               {!isCollapsed && (
                 <div className="px-4 mb-2">
                   <Typography
-                    variant="body-sm"
-                    className="color-gray-500 uppercase font-medium tracking-wider"
+                    className="text-sidebar-core color-gray-500 uppercase font-medium tracking-wider"
                   >
                     {section.title}
                   </Typography>
@@ -1295,7 +1294,7 @@ export const SidebarCore = ({
             <div
               style={{
                 position: 'absolute',
-                top: '24px',
+                top: '0px',
                 left: '16px',
                 right: '16px',
                 height: '1px',
@@ -1303,7 +1302,10 @@ export const SidebarCore = ({
               }}
             />
             <button
-              onClick={() => onConfigClick && onConfigClick(configSectionId)}
+              onClick={() => {
+                onItemClick && onItemClick(configSectionId);
+                onConfigClick && onConfigClick(configSectionId);
+              }}
               className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
                 activeItem === configSectionId
                   ? ''
@@ -1372,7 +1374,7 @@ export const SidebarCore = ({
             <div
               style={{
                 position: 'absolute',
-                top: '24px',
+                top: '0px',
                 left: '8px',
                 right: '8px',
                 height: '1px',
@@ -1390,7 +1392,10 @@ export const SidebarCore = ({
               title={configSectionLabel}
             >
               <button
-                onClick={() => onConfigClick && onConfigClick(configSectionId)}
+                onClick={() => {
+                  onItemClick && onItemClick(configSectionId);
+                  onConfigClick && onConfigClick(configSectionId);
+                }}
                 className="flex items-center justify-center transition-all duration-200"
                 style={{
                   width: '100%',

package/src/components/Views/ForgotPassword/ForgotPassword.jsx

@@ -289,7 +289,7 @@ export const ForgotPassword = ({
                   {/* Error general */}
                   {error && (
                     <div
-                      className="rounded-lg p-4 border"
+                      className="rounded-lg p-4 border anima-forgotpassword__errorBox"
                       style={{
                         backgroundColor: '#fecaca',
                         borderColor: '#ef4444',
@@ -298,7 +298,15 @@ export const ForgotPassword = ({
                       <Typography
                         variant="body2"
                         className="font-bold"
-                        style={{ color: '#b91c1c' }}
+                        style={{ 
+                          color: '#b91c1c',
+                          fontFamily: "'IBM Plex Mono', monospace",
+                          fontWeight: 400,
+                          fontStyle: 'normal',
+                          fontSize: '14px',
+                          lineHeight: '21px',
+                          letterSpacing: '0.02em',
+                        }}
                       >
                         {error}
                       </Typography>

package/src/components/Views/NewPassword/NewPassword.jsx

@@ -300,7 +300,10 @@ export const NewPassword = ({
                         t('form.passwordRequirementOther') || 'Una mayúscula, un número, un carácter especial',
                       ];
                       
-                      return `${prefix}\n${defaultItems[0]}\n\n${defaultItems.slice(1).join(', ')}`;
+                      if (defaultItems.length > 0) {
+                        return `${prefix}\n\n${defaultItems.map(item => `• ${item}`).join('\n')}`;
+                      }
+                      return prefix;
                     })()}
                   </Typography>
                 </div>

package/src/style.css

@@ -81,6 +81,13 @@
   font-weight: 400; /* Regular */
   letter-spacing: -0.02em; /* -2% */
 }
+.text-sidebar-core {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem; /* 12px */
+  line-height: 1.125rem; /* 18px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 1px; /* -2% */
+}
 
 /* --- TEXT SIZES ADICIONALES --- */
 .text-xsm {
@@ -863,6 +870,23 @@
   font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
 }
 
+/* Excepción: Caja de error debe usar IBM Plex Mono */
+.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__errorBox,
+.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__errorBox p,
+.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__errorBox span {
+  font-family: 'IBM Plex Mono', monospace !important;
+}
+
+/* Excepción: Caja de error en ForgotPassword debe usar IBM Plex Mono */
+.anima-forgotpassword__errorBox,
+.anima-forgotpassword__errorBox p,
+.anima-forgotpassword__errorBox span,
+[data-variant="hexa-login"] .anima-forgotpassword__errorBox,
+[data-variant="hexa-login"] .anima-forgotpassword__errorBox p,
+[data-variant="hexa-login"] .anima-forgotpassword__errorBox span {
+  font-family: 'IBM Plex Mono', monospace !important;
+}
+
 /* 2. Tamaño fijo de iconos en botones sociales de LoginForm (variante hexa-login) */
 .anima-loginform__container[data-variant="hexa-login"] .anima-loginform__socialButton svg {
   width: var(--anima-hexa-login-social-icon-size, 18px) !important;