anima-ds-nucleus 1.0.20 → 1.0.22

package/package.json

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

package/src/components/Inputs/PasswordInput/PasswordInput.jsx

@@ -30,7 +30,7 @@ export const PasswordInput = ({
   `.trim().replace(/\s+/g, ' ');
 
   return (
-    <div className={`w-full ${className}`}>
+    <div className={`anima-passwordfield w-full ${className}`}>
       {label && (
         <label
           className={labelClassName || 'block text-sm font-medium text-gray-700 mb-1'}
@@ -48,7 +48,7 @@ export const PasswordInput = ({
           disabled={disabled}
           value={value}
           onChange={onChange}
-          className={resolvedInputClasses}
+          className={`${resolvedInputClasses} ${isHexaLogin ? 'anima-passwordfield__input' : ''}`}
           {...props}
         />
 
@@ -56,13 +56,7 @@ export const PasswordInput = ({
           type="button"
           tabIndex={-1}
           onClick={() => setShowPassword((prev) => !prev)}
-          className="absolute"
-          style={{
-            top: '50%',
-            transform: 'translateY(-50%)',
-            right: '0.75rem',
-            color: '#6b7280',
-          }}
+          className="anima-passwordfield__toggle"
           aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
         >
           <Icon

package/src/components/Layout/AccionesRapidas/AccionesRapidas.jsx

@@ -0,0 +1,40 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const AccionesRapidas = ({
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`w-full bg-white ${className}`}
+      style={{
+        height: '150px',
+        border: '1px solid #c4c4c4',
+        borderRadius: '16px',
+        paddingTop: '24px',
+        paddingLeft: '24px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+      {...props}
+    >
+      <Typography
+        variant="body-lg"
+        style={{
+          fontFamily: 'IBM Plex Sans',
+          fontWeight: 400,
+          fontStyle: 'normal',
+          fontSize: '20px',
+          lineHeight: '30px',
+          letterSpacing: '0%',
+          verticalAlign: 'middle',
+          color: '#223B40',
+        }}
+      >
+        Acciones rápidas
+      </Typography>
+    </div>
+  );
+};
+
+export default AccionesRapidas;

package/src/components/Layout/AccionesRapidas/AccionesRapidas.stories.jsx

@@ -0,0 +1,11 @@
+import { AccionesRapidas } from './AccionesRapidas';
+
+export default {
+  title: 'Layout/AccionesRapidas',
+  component: AccionesRapidas,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {},
+};

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

@@ -11,10 +11,12 @@ export const ForgotPassword = ({
   error: externalError,
   className = '',
   variant = 'default',
+  layout = 'embedded',
   ...props
 }) => {
   const { t } = useTranslation();
   const isHexaLogin = variant === 'hexa-login';
+  const isPageLayout = layout === 'page';
 
   // Estados internos (si no se pasan como props)
   const [email, setEmail] = useState('');
@@ -124,11 +126,11 @@ export const ForgotPassword = ({
 
   return (
     <div
-      className={`min-h-screen flex flex-col ${className}`}
-      style={{ backgroundColor: '#f5f5f5' }}
+      className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
+      style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
       {...props}
     >
-      <div className="flex-1 flex items-center justify-center p-4">
+      <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
         <div className="w-full max-w-md">
           {/* Título y subtítulo */}
           <div className="mb-8 text-center">

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

@@ -16,6 +16,9 @@ export const LoginForm = ({
   showSocialLogin = true,
   showDivider = true,
   showPasswordRequirementsOnError = true,
+  passwordRequirementsItems,
+  passwordRequirementsTitle,
+  passwordRequirementsPrefix,
   labels,
   generalError,
   generalErrorTitle,
@@ -74,18 +77,9 @@ export const LoginForm = ({
 
   return (
     isHexaLogin ? (
-      <div
-        style={{
-          width: '427px',
-          minHeight: '409px',
-          borderRadius: '14px',
-          border: '1px solid #0000001A',
-          padding: '24px',
-          background: '#FFFFFF',
-          boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
-        }}
-      >
-        <form onSubmit={handleSubmit} className={className} {...props}>
+      <div className={`anima-loginform__container ${className}`} {...props}>
+        <div className="anima-loginform__card">
+        <form onSubmit={handleSubmit}>
           {/* 1) Email */}
           <div className="w-full">
             <label
@@ -114,9 +108,8 @@ export const LoginForm = ({
             placeholder={t('placeholder.password')}
             value={formData.password}
             onChange={(e) => handleChange('password', e.target.value)}
-            inputClassName="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900"
+            inputClassName="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900 anima-passwordfield__input"
             style={{
-              paddingRight: '2.75rem',
               borderColor: errors.password ? '#ef4444' : '#2D5C63',
             }}
           />
@@ -125,20 +118,36 @@ export const LoginForm = ({
         {/* 3) Password requirements box (solo si hay error de password) */}
         {showPasswordRequirementsOnError && !!errors.password && (
           <div
-            className="rounded-lg p-4 border mt-4"
+            className="anima-loginform__requirementsBox rounded-lg p-4 border mt-4"
             style={{
               background: '#f5f3ff',
               borderColor: '#a78bfa',
               color: '#0c4a6e',
-              fontFamily: 'IBM Plex Mono',
+              fontFamily: "'IBM Plex Mono', monospace",
             }}
           >
-            <ul className="list-disc list-inside text-sm space-y-1" style={{ color: '#0c4a6e' }}>
-              <li>Al menos 8 caracteres</li>
-              <li>Al menos una letra mayúscula</li>
-              <li>Al menos un número</li>
-              <li>Al menos un caracter especial</li>
-            </ul>
+            <Typography
+              variant="body2"
+              className="text-sm"
+              style={{ 
+                color: '#0c4a6e',
+                fontFamily: "'IBM Plex Mono', monospace",
+                whiteSpace: 'pre-line',
+              }}
+            >
+              {passwordRequirementsTitle || (() => {
+                const prefix = passwordRequirementsPrefix || t('form.passwordRequirementsPrefix') || 'Recuerda que la contraseña debe tener:';
+                const defaultItems = passwordRequirementsItems || [
+                  t('form.passwordRequirementMinChars') || 'Un mínimo de 6 caracteres',
+                  t('form.passwordRequirementOther') || 'Una mayúscula, un número, un carácter especial',
+                ];
+                
+                if (passwordRequirementsItems && passwordRequirementsItems.length > 0) {
+                  return `${prefix}\n${passwordRequirementsItems[0]}\n\n${passwordRequirementsItems.slice(1).join(', ')}`;
+                }
+                return `${prefix}\n${defaultItems[0]}\n\n${defaultItems[1]}`;
+              })()}
+            </Typography>
           </div>
         )}
 
@@ -176,10 +185,8 @@ export const LoginForm = ({
         {/* 5) Error general box rojo (si existe) */}
         {(generalError || errors.general) && (
           <div
-            className="mt-4"
+            className="anima-loginform__errorBox mt-4"
             style={{
-              width: '377px',
-              height: '68px',
               paddingTop: '12px',
               paddingRight: '16px',
               paddingBottom: '12px',
@@ -272,28 +279,11 @@ export const LoginForm = ({
 
         {/* 8) Social buttons */}
         {showSocialLogin && (
-          <div
-            style={{
-              width: '377px',
-              height: '36px',
-              gap: '20px',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              display: 'flex',
-            }}
-          >
+          <div className="anima-loginform__socialRow">
             <button
               type="button"
               onClick={onGoogleLogin}
-              className="flex-1 flex items-center justify-center bg-white hover:bg-gray-50 transition-colors"
-              style={{
-                width: '178.5px',
-                height: '36px',
-                padding: '8px 43px',
-                gap: '16px',
-                borderRadius: '8px',
-                border: '1px solid #38656D',
-              }}
+              className="anima-loginform__socialButton anima-loginform__socialButton--google"
             >
               <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
                 <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303C33.651 32.659 29.227 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.047 6.053 29.272 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" />
@@ -309,15 +299,7 @@ export const LoginForm = ({
             <button
               type="button"
               onClick={onMicrosoftLogin}
-              className="flex-1 flex items-center justify-center bg-white hover:bg-gray-50 transition-colors"
-              style={{
-                width: '178.5px',
-                height: '36px',
-                padding: '8px 43px',
-                gap: '16px',
-                borderRadius: '8px',
-                border: '1px solid #38656D',
-              }}
+              className="anima-loginform__socialButton anima-loginform__socialButton--microsoft"
             >
               <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
                 <path fill="#F25022" d="M6 6h17v17H6z" />
@@ -332,6 +314,7 @@ export const LoginForm = ({
           </div>
         )}
         </form>
+        </div>
       </div>
     ) : (
       <form

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

@@ -36,6 +36,14 @@ export default {
       control: 'text',
       description: 'Mensaje de error general',
     },
+    passwordRequirementsItems: {
+      control: 'object',
+      description: 'Array de strings con los requisitos de contraseña',
+    },
+    passwordRequirementsTitle: {
+      control: 'text',
+      description: 'Título opcional para la caja de requisitos de contraseña',
+    },
   },
 };
 
@@ -231,3 +239,31 @@ export const Portuguese = {
   },
 };
 
+// Con requisitos de contraseña personalizados
+export const CustomPasswordRequirements = {
+  args: {
+    variant: 'hexa-login',
+    passwordRequirementsTitle: 'Requisitos de contraseña',
+    passwordRequirementsItems: [
+      'Mínimo 12 caracteres',
+      'Debe contener mayúsculas y minúsculas',
+      'Debe incluir números',
+      'Debe incluir símbolos especiales',
+      'No puede ser una contraseña común',
+    ],
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+      alert('Login submitted!');
+    },
+    onForgotPassword: () => {
+      alert('Forgot password clicked');
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+