anima-ds-nucleus 1.0.16 → 1.0.18

package/package.json

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

package/src/components/DataDisplay/Card/CardTituloCorto.jsx

@@ -39,14 +39,35 @@ export const CardTituloCorto = ({
         >
           <Typography
             variant="body-md"
-            className="color-gray-700"
+            style={{
+              fontFamily: 'IBM Plex Sans',
+              fontWeight: 400,
+              fontStyle: 'normal',
+              fontSize: '20px',
+              lineHeight: '30px',
+              letterSpacing: '0%',
+              verticalAlign: 'middle',
+              color: '#223B40',
+              margin: 0
+            }}
           >
             {title}
           </Typography>
         </div>
       </div>
       {children && (
-        <div className="px-4 pb-4">
+        <div
+          style={{
+            width: '379.5px',
+            height: '416px',
+            paddingRight: '24px',
+            paddingLeft: '24px',
+            gap: '16px',
+            opacity: 1,
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
           {children}
         </div>
       )}

package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx

@@ -40,7 +40,17 @@ export const CardTituloCortoMasEstado = ({
         >
           <Typography
             variant="body-md"
-            className="color-gray-700"
+            style={{
+              fontFamily: 'IBM Plex Sans',
+              fontWeight: 400,
+              fontStyle: 'normal',
+              fontSize: '20px',
+              lineHeight: '30px',
+              letterSpacing: '0%',
+              verticalAlign: 'middle',
+              color: '#223B40',
+              margin: 0
+            }}
           >
             {title}
           </Typography>
@@ -64,7 +74,18 @@ export const CardTituloCortoMasEstado = ({
         </span>
       </div>
       {children && (
-        <div className="px-4 pb-4">
+        <div
+          style={{
+            width: '379.5px',
+            height: '416px',
+            paddingRight: '24px',
+            paddingLeft: '24px',
+            gap: '16px',
+            opacity: 1,
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
           {children}
         </div>
       )}

package/src/components/DataDisplay/Card/CardTituloLargo.jsx

@@ -39,14 +39,35 @@ export const CardTituloLargo = ({
         >
           <Typography
             variant="body-md"
-            className="color-gray-700"
+            style={{
+              fontFamily: 'IBM Plex Sans',
+              fontWeight: 400,
+              fontStyle: 'normal',
+              fontSize: '20px',
+              lineHeight: '30px',
+              letterSpacing: '0%',
+              verticalAlign: 'middle',
+              color: '#223B40',
+              margin: 0
+            }}
           >
             {title}
           </Typography>
         </div>
       </div>
       {children && (
-        <div className="px-4 pb-4">
+        <div
+          style={{
+            width: '379.5px',
+            height: '416px',
+            paddingRight: '24px',
+            paddingLeft: '24px',
+            gap: '16px',
+            opacity: 1,
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
           {children}
         </div>
       )}

package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx

@@ -40,7 +40,17 @@ export const CardTituloLargoMasEstado = ({
         >
           <Typography
             variant="body-md"
-            className="color-gray-700"
+            style={{
+              fontFamily: 'IBM Plex Sans',
+              fontWeight: 400,
+              fontStyle: 'normal',
+              fontSize: '20px',
+              lineHeight: '30px',
+              letterSpacing: '0%',
+              verticalAlign: 'middle',
+              color: '#223B40',
+              margin: 0
+            }}
           >
             {title}
           </Typography>
@@ -64,7 +74,18 @@ export const CardTituloLargoMasEstado = ({
         </span>
       </div>
       {children && (
-        <div className="px-4 pb-4">
+        <div
+          style={{
+            width: '379.5px',
+            height: '416px',
+            paddingRight: '24px',
+            paddingLeft: '24px',
+            gap: '16px',
+            opacity: 1,
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
           {children}
         </div>
       )}

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

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const PasswordInput = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  error,
+  required = false,
+  disabled = false,
+  variant,
+  className = '',
+  inputClassName = '',
+  labelClassName = '',
+  labelStyle,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const isHexaLogin = variant === 'hexa-login';
+
+  const baseInputClasses = isHexaLogin
+    ? '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'
+    : 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed';
+
+  const resolvedInputClasses = `
+    ${baseInputClasses}
+    ${isHexaLogin ? '' : (error ? 'border-red-500' : 'border-gray-300')}
+    ${inputClassName}
+  `.trim().replace(/\s+/g, ' ');
+
+  return (
+    <div className={`w-full ${className}`}>
+      {label && (
+        <label
+          className={labelClassName || 'block text-sm font-medium text-gray-700 mb-1'}
+          style={labelStyle}
+        >
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+
+      <div className="relative w-full">
+        <input
+          type={showPassword ? 'text' : 'password'}
+          placeholder={placeholder}
+          disabled={disabled}
+          value={value}
+          onChange={onChange}
+          className={resolvedInputClasses}
+          {...props}
+        />
+
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={() => setShowPassword((prev) => !prev)}
+          className="absolute"
+          style={{
+            top: '50%',
+            transform: 'translateY(-50%)',
+            right: '0.75rem',
+            color: '#6b7280',
+          }}
+          aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+        >
+          <Icon
+            name={showPassword ? 'EyeSlashIcon' : 'EyeIcon'}
+            variant="24-outline"
+            size={18}
+          />
+        </button>
+      </div>
+
+      {error && !isHexaLogin && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default PasswordInput;
+
+

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

@@ -0,0 +1,192 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+// Constantes de diseño reutilizables
+const NOTIFICATION_BADGE_COLOR = '#6D3856';
+
+export const HeaderCompartido = ({
+  searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  userName,
+  userAvatar,
+  notificationCount = 0,
+  onSearch,
+  onNotificationClick,
+  onUserClick,
+  // Borde inferior (subrayado)
+  showBottomBorder = false,
+  bottomBorderClassName = 'border-b border-gray-200',
+  // Overrides de estilo/clases para poder ajustar layout desde el proyecto consumidor
+  desktopLayoutClassName = '',
+  desktopLayoutStyle,
+  desktopSearchContainerClassName = '',
+  desktopSearchContainerStyle,
+  className = '',
+  ...props
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const formatNotificationCount = (count) => {
+    return count > 9 ? '9+' : count;
+  };
+
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+
+  return (
+    <header
+      className={`bg-white ${showBottomBorder ? bottomBorderClassName : ''} ${className}`}
+      {...props}
+    >
+      <style>{`
+        .header-search-input {
+          border-color: #9ca3af;
+        }
+        .header-search-input::placeholder {
+          color: #9ca3af !important;
+          opacity: 1 !important;
+        }
+        .header-search-icon-container {
+          border-color: #9ca3af;
+        }
+        .header-search-form:focus-within .header-search-input {
+          border-color: #3b82f6 !important;
+          box-shadow: 0 0 0 1px #3b82f6;
+        }
+        .header-search-form:focus-within .header-search-icon-container {
+          border-color: #3b82f6 !important;
+          box-shadow: 0 0 0 1px #3b82f6;
+        }
+        .header-notification-badge {
+          background-color: ${NOTIFICATION_BADGE_COLOR};
+          border-radius: 12px;
+        }
+        .header-actions-wrapper {
+          flex-shrink: 0;
+        }
+      `}</style>
+      
+      <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
+        {/* Layout Desktop */}
+        <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 ${desktopSearchContainerClassName}`}
+            style={{ maxWidth: 'none', minWidth: '0', ...(desktopSearchContainerStyle || {}) }}
+          >
+            <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
+              {/* Input de búsqueda */}
+              <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"
+                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'
+                }}
+              />
+              
+              {/* Recuadro con icono de buscar a la derecha */}
+              <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" 
+                  size={20} 
+                  className="color-gray-600" 
+                />
+              </div>
+            </form>
+          </div>
+
+          {/* Notificaciones y Perfil */}
+          <div className="header-actions-wrapper flex items-center gap-3 md:gap-6">
+            {notificationCount !== undefined && (
+              <button
+                onClick={onNotificationClick}
+                className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                aria-label="Notificaciones"
+              >
+                <Icon 
+                  name="BellIcon" 
+                  variant="24-outline" 
+                  size={24} 
+                  className="color-gray-600" 
+                />
+                {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 header-notification-badge">
+                    {formatNotificationCount(notificationCount)}
+                  </span>
+                )}
+              </button>
+            )}
+
+            {userName && (
+              <button
+                onClick={onUserClick}
+                className="flex items-center gap-3 hover:bg-gray-50 rounded-lg px-2 py-1.5 transition-colors"
+                aria-label="Perfil de usuario"
+              >
+                <Avatar
+                  src={userAvatar}
+                  name={userName}
+                  size="medium"
+                  variant="circle"
+                />
+                <Typography
+                  variant="body-lg"
+                  className="color-gray-700 hidden md:block header-user-name"
+                >
+                  {userName}
+                </Typography>
+                <Icon
+                  name="ChevronDownIcon"
+                  variant="24-outline"
+                  size={20}
+                  className="color-gray-500 header-user-chevron hidden md:block"
+                />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderCompartido;

package/src/components/Layout/Header/HeaderCompartido.stories.jsx

@@ -0,0 +1,66 @@
+import { HeaderCompartido } from './HeaderCompartido';
+
+export default {
+  title: 'Layout/HeaderCompartido',
+  component: HeaderCompartido,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Maria García Alonso"
+      userAvatar="https://i.pravatar.cc/150?img=12"
+      notificationCount={7}
+      onSearch={(value) => console.log('Búsqueda:', value)}
+      onNotificationClick={() => console.log('Notificaciones clickeadas')}
+      onUserClick={() => console.log('Usuario clickeado')}
+    />
+  ),
+};
+
+export const SinNotificaciones = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Juan Pérez"
+      userAvatar="https://i.pravatar.cc/150?img=33"
+      notificationCount={0}
+    />
+  ),
+};
+
+export const ConNotificaciones = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Maria García Alonso"
+      userAvatar="https://i.pravatar.cc/150?img=12"
+      notificationCount={7}
+      onSearch={(value) => console.log('Búsqueda:', value)}
+      onNotificationClick={() => console.log('Notificaciones clickeadas')}
+      onUserClick={() => console.log('Usuario clickeado')}
+    />
+  ),
+};
+
+export const ConMuchasNotificaciones = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Ana Martínez"
+      userAvatar="https://i.pravatar.cc/150?img=47"
+      notificationCount={15}
+    />
+  ),
+};
+
+export const SinUsuario = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      notificationCount={3}
+    />
+  ),
+};

package/src/components/Layout/Header/HeaderConBuscador.stories.jsx

@@ -85,3 +85,4 @@ export const CustomSearchPlaceholder = {
 
 
 
+

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

@@ -40,7 +40,7 @@ export const HeaderCore = ({
   notificationDesktopButtonStyle,
   notificationDesktopIconWrapperClassName = '',
   notificationDesktopIconWrapperStyle,
-  notificationDesktopIconSize = 18,
+  notificationDesktopIconSize = 24,
   notificationDesktopIconStrokeWidth = 1.5,
   notificationDesktopIconStyle,
   notificationDesktopBadgeStyle,
@@ -48,7 +48,7 @@ export const HeaderCore = ({
   notificationMobileButtonStyle,
   notificationMobileIconWrapperClassName = '',
   notificationMobileIconWrapperStyle,
-  notificationMobileIconSize = 18,
+  notificationMobileIconSize = 24,
   notificationMobileIconStrokeWidth = 1.5,
   notificationMobileIconStyle,
   showNotificationBadgeOnMobile = false,
@@ -286,11 +286,11 @@ export const HeaderCore = ({
                     strokeWidth={notificationDesktopIconStrokeWidth}
                     className={`color-gray-600 ${notificationIconClassName}`}
                     style={{
-                      width: '17.75112533569336px',
-                      height: '18px',
+                      width: '24px',
+                      height: '24px',
                       position: 'absolute',
-                      top: '3px',
-                      left: '3.12px',
+                      top: '0px',
+                      left: '0px',
                       opacity: 1,
                       transform: 'rotate(0deg)',
                       ...(notificationIconStyle || {}),
@@ -310,7 +310,7 @@ export const HeaderCore = ({
                       paddingRight: '8px',
                       paddingBottom: '2px',
                       paddingLeft: '8px',
-                      borderRadius: '8px',
+                      borderRadius: '16px',
                       opacity: 1,
                       transform: 'rotate(0deg)',
                       ...(notificationBadgeStyle || {}),
@@ -448,11 +448,11 @@ export const HeaderCore = ({
                       strokeWidth={notificationMobileIconStrokeWidth}
                       className={`color-gray-600 ${notificationIconClassName}`}
                       style={{
-                        width: '17.75112533569336px',
-                        height: '18px',
+                        width: '24px',
+                        height: '24px',
                         position: 'absolute',
-                        top: '3px',
-                        left: '3.12px',
+                        top: '0px',
+                        left: '0px',
                         opacity: 1,
                         transform: 'rotate(0deg)',
                         ...(notificationIconStyle || {}),
@@ -472,7 +472,7 @@ export const HeaderCore = ({
                         paddingRight: '8px',
                         paddingBottom: '2px',
                         paddingLeft: '8px',
-                        borderRadius: '8px',
+                        borderRadius: '16px',
                         marginLeft: '6px',
                         opacity: 1,
                         transform: 'rotate(0deg)',