anima-ds-nucleus 1.0.24 → 1.0.25

package/package.json

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

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

@@ -128,6 +128,8 @@ export const ForgotPassword = ({
     <div
       className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
       style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+      data-variant={isHexaLogin ? 'hexa-login' : undefined}
+      data-layout={layout}
       {...props}
     >
       <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>

package/src/components/Views/LoginForm/LoginForm.jsx

@@ -77,7 +77,7 @@ export const LoginForm = ({
 
   return (
     isHexaLogin ? (
-      <div className={`anima-loginform__container ${className}`} {...props}>
+      <div className={`anima-loginform__container ${className}`} data-variant="hexa-login" {...props}>
         <div className="anima-loginform__card">
         <form onSubmit={handleSubmit}>
           {/* 1) Email */}

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

@@ -63,6 +63,8 @@ export const NewPassword = ({
       <div
         className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
         style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+        data-variant={isHexaLogin ? 'hexa-login' : undefined}
+        data-layout={layout}
         {...props}
       >
         <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
@@ -157,6 +159,8 @@ export const NewPassword = ({
     <div
       className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
       style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+      data-variant={isHexaLogin ? 'hexa-login' : undefined}
+      data-layout={layout}
       {...props}
     >
       <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>

package/src/style.css

@@ -847,10 +847,59 @@
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+}
+
+/* ============================================
+   ESTILOS PERSONALIZADOS PARA VARIANTE HEXA-LOGIN
+   ============================================ */
+
+/* 1. Tipografía IBM Plex Sans en LoginForm (variante hexa-login) */
+.anima-loginform__container[data-variant="hexa-login"],
+.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__card,
+.anima-loginform__container[data-variant="hexa-login"] p,
+.anima-loginform__container[data-variant="hexa-login"] span,
+.anima-loginform__container[data-variant="hexa-login"] label,
+.anima-loginform__container[data-variant="hexa-login"] button {
+  font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !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;
+  height: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  min-width: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  min-height: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  max-width: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  max-height: var(--anima-hexa-login-social-icon-size, 18px) !important;
+  flex-shrink: 0;
+}
+
+/* 3. Tipografía IBM Plex Sans en NewPassword y ForgotPassword (variante hexa-login) - títulos y subtítulos */
+[data-variant="hexa-login"] div[class*="mb-8"] h3,
+[data-variant="hexa-login"] div[class*="mb-8"] p,
+[data-variant="hexa-login"] div[class*="text-center"] h3,
+[data-variant="hexa-login"] div[class*="text-center"] p {
+  font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
+}
+
+/* ============================================
+   ESTILOS PERSONALIZADOS PARA VARIANTE LOGIN EN HEADER
+   ============================================ */
+
+/* 4. Responsive: Ocultar icono de idioma en HeaderGeneral (variante login) */
+@media (max-width: var(--anima-login-header-mobile-breakpoint, 768px)) {
+  /* Ocultar el icono LanguageIcon en el header de login */
+  /* El icono es el primer hijo del contenedor flex dentro del div.relative del selector de idioma */
+  header[data-variant="login"] .relative > .flex.items-center > *:first-child:not(button),
+  header[data-variant="login"] .relative > div.flex.items-center > *:first-child:not(button) {
+    display: none !important;
+  }
+  
+  /* Ajustar el contenedor del selector para que no tenga gap cuando el icono desaparece */
+  header[data-variant="login"] .relative > .flex.items-center,
+  header[data-variant="login"] .relative > div.flex.items-center {
+    gap: 0 !important;
+  }
 }
 
 .anima-passwordfield__toggle:hover {