anima-ds-nucleus 1.0.10 → 1.0.12

package/package.json

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Avatar } from '../../Atoms/Avatar/Avatar';
 import { Typography } from '../../Atoms/Typography/Typography';
@@ -6,15 +6,65 @@ import { SidebarCoreMobile } from '../Sidebar/SidebarCore';
 
 export const HeaderCore = ({
   searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  mobileSearchPlaceholder = 'Busca lo que necesites',
   userName,
   userAvatar,
   notificationCount = 0,
   onSearch,
   onNotificationClick,
   onUserClick,
+  // Borde inferior (subrayado)
+  showBottomBorder = false,
+  bottomBorderClassName = 'border-b border-gray-200',
+  // Sidebar mobile (animación/cierre controlado)
+  mobileSidebarTransitionDurationMs = 300,
+  mobileSidebarTransitionEasing = 'ease-in-out',
+  // Mobile background
+  mobileBackgroundColor = '#F3F3F3',
+  mobileHeaderClassName = '',
+  mobileHeaderStyle,
+  // 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,
+  // Mobile: permitir persistir el item activo aunque el consumidor no controle sidebarActiveItem
+  enableInternalSidebarActiveItem = true,
   sidebarItemBadges,
   sidebarCompanyName,
   sidebarCompanyLogo,
@@ -27,6 +77,48 @@ export const HeaderCore = ({
 }) => {
   const [searchValue, setSearchValue] = useState('');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [shouldRenderSidebarMobile, setShouldRenderSidebarMobile] = useState(false);
+  const [internalSidebarActiveItem, setInternalSidebarActiveItem] = useState(undefined);
+  const closeTimeoutRef = useRef(null);
+
+  const openSidebarMobile = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    // Para que se vea la animación de apertura:
+    // 1) montamos el sidebar en estado cerrado
+    // 2) lo abrimos en el siguiente frame (después de pintar)
+    setShouldRenderSidebarMobile(true);
+    setIsSidebarOpen(false);
+    requestAnimationFrame(() => setIsSidebarOpen(true));
+  };
+
+  const closeSidebarMobile = () => {
+    setIsSidebarOpen(false);
+  };
+
+  const resolvedSidebarActiveItem =
+    sidebarActiveItem !== undefined && sidebarActiveItem !== null
+      ? sidebarActiveItem
+      : enableInternalSidebarActiveItem
+        ? internalSidebarActiveItem
+        : sidebarActiveItem;
+
+  useEffect(() => {
+    if (!isSidebarOpen && shouldRenderSidebarMobile) {
+      closeTimeoutRef.current = setTimeout(() => {
+        setShouldRenderSidebarMobile(false);
+        closeTimeoutRef.current = null;
+      }, mobileSidebarTransitionDurationMs);
+    }
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    };
+  }, [isSidebarOpen, shouldRenderSidebarMobile, mobileSidebarTransitionDurationMs]);
 
   const handleSearchChange = (e) => {
     const value = e.target.value;
@@ -45,7 +137,7 @@ export const HeaderCore = ({
 
   return (
     <header
-      className={`bg-white border-b border-gray-200 ${className}`}
+      className={`bg-white ${showBottomBorder ? bottomBorderClassName : ''} ${className}`}
       {...props}
     >
       <style>{`
@@ -103,9 +195,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 +249,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" 
+                {/* Contenedor 24x24 + icono posicionado (Figma) */}
+                <span
+                  className={`relative inline-block ${notificationDesktopIconWrapperClassName}`}
+                  style={{
+                    width: '24px',
+                    height: '24px',
+                    opacity: 1,
+                    ...(notificationDesktopIconWrapperStyle || {}),
+                  }}
+              >
+                  <Icon 
+                    name="BellIcon" 
                   variant="24-outline" 
-                  size={24} 
-                  className="color-gray-600" 
+                    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 +335,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 +356,7 @@ export const HeaderCore = ({
                     lineHeight: '24px',
                     letterSpacing: '0%',
                     verticalAlign: 'middle'
+                    ,...(desktopUserNameStyle || {})
                   }}
                 >
                   {userName}
@@ -222,14 +373,17 @@ export const HeaderCore = ({
         </div>
 
         {/* Layout Mobile (768px o menos) */}
-        <div className="header-mobile-layout">
+        <div
+          className={`header-mobile-layout ${mobileHeaderClassName}`}
+          style={{ background: mobileBackgroundColor, ...(mobileHeaderStyle || {}) }}
+        >
           {/* Primera fila: Menú, Core, Notificaciones y Avatar */}
           <div className="header-mobile-top-row">
             {/* Lado izquierdo: Menú hamburguesa y Core */}
             <div className="flex items-center space-x-2">
               {/* Botón menú hamburguesa */}
               <button
-                onClick={() => setIsSidebarOpen(true)}
+                onClick={openSidebarMobile}
                 className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                 aria-label="Menú"
               >
@@ -263,23 +417,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" 
+                  {/* 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="BellIcon" 
                     variant="24-outline" 
-                    size={24} 
-                    className="color-gray-600" 
-                  />
-                  {notificationCount > 0 && (
+                      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"
+                      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 +497,8 @@ export const HeaderCore = ({
                     name={userName || ''}
                     size="medium"
                     variant="circle"
+                    className={mobileUserAvatarClassName}
+                    style={mobileUserAvatarStyle}
                   />
                 </button>
               )}
@@ -314,7 +513,7 @@ export const HeaderCore = ({
                 type="text"
                 value={searchValue}
                 onChange={handleSearchChange}
-                placeholder={searchPlaceholder}
+                placeholder={mobileSearchPlaceholder}
                 className="header-search-input flex-1 pl-3 pr-3 py-2 bg-white border border-gray-400 rounded-l-lg 
                          focus:outline-none text-sm"
                 style={{ 
@@ -354,17 +553,21 @@ export const HeaderCore = ({
         </div>
       </div>
 
-      {/* SidebarCoreMobile - Solo visible en móvil cuando está abierto */}
-      {isSidebarOpen && (
+      {/* SidebarCoreMobile - mantener montado para animación de cierre */}
+      {shouldRenderSidebarMobile && (
         <div className="header-core-mobile-sidebar-wrapper">
           <SidebarCoreMobile
             sections={sidebarSections}
-            activeItem={sidebarActiveItem}
+            activeItem={resolvedSidebarActiveItem}
             onItemClick={(itemId) => {
+              if (enableInternalSidebarActiveItem) {
+                setInternalSidebarActiveItem(itemId);
+              }
               if (onSidebarItemClick) {
                 onSidebarItemClick(itemId);
               }
-              setIsSidebarOpen(false);
+              // permitir que el item se "pinte" y luego cerrar con animación
+              requestAnimationFrame(() => closeSidebarMobile());
             }}
             itemBadges={sidebarItemBadges}
             companyName={sidebarCompanyName}
@@ -374,7 +577,9 @@ export const HeaderCore = ({
             coreContainerStyle={sidebarCoreContainerStyle}
             coreTextStyle={sidebarCoreTextStyle}
             isOpen={isSidebarOpen}
-            onClose={() => setIsSidebarOpen(false)}
+            onClose={closeSidebarMobile}
+            transitionDurationMs={mobileSidebarTransitionDurationMs}
+            transitionEasing={mobileSidebarTransitionEasing}
           />
         </div>
       )}

package/src/components/Layout/SaludoConFechaDashboard/SaludoConFechaDashboard.jsx

@@ -0,0 +1,262 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+const defaultDateOptions = {
+  weekday: 'long',
+  day: '2-digit',
+  month: 'long',
+  year: 'numeric',
+};
+
+const coerceDate = (value) => {
+  if (!value) return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+};
+
+const capitalizeFirst = (value) => {
+  if (!value) return value;
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};
+
+/**
+ * SaludoConFechaDashboard
+ *
+ * Encabezado de dashboard con saludo y fecha formateada (locale-aware).
+ * Todas las medidas/estilos se pueden overridear por props para que el proyecto consumidor ajuste sin tocar la librería.
+ */
+export const SaludoConFechaDashboard = ({
+  // Content
+  userName,
+  saludo = 'Hola',
+  date = new Date(),
+  showDate = true,
+
+  // Breadcrumb / inicio (arriba del saludo)
+  showInicio = true,
+  inicioText = 'Inicio',
+  showInicioIcon = true,
+  inicioIconName = 'ChevronRightIcon',
+  inicioIconVariant = '20-solid', // heroicons "mini"
+  inicioIconSize = 16,
+  // Responsive behavior (<= breakpoint): centrar saludo y ocultar el resto
+  responsiveBreakpointPx = 768,
+  responsiveHideInicio = true,
+  responsiveHideDate = true,
+  responsiveCenterGreeting = true,
+
+  // Date formatting
+  locale = 'es-AR',
+  dateOptions = defaultDateOptions,
+  formatDate, // (date, { locale, dateOptions }) => string
+  capitalizeDate = true,
+
+  // Layout / styles (overrideable)
+  className = '',
+  style,
+  leftClassName = '',
+  leftStyle,
+  rightClassName = '',
+  rightStyle,
+  saludoFechaContainerClassName = '',
+  saludoFechaContainerStyle,
+  inicioContainerClassName = '',
+  inicioContainerStyle,
+  inicioTextClassName = '',
+  inicioTextStyle,
+  inicioIconClassName = '',
+  inicioIconStyle,
+  greetingClassName = '',
+  greetingStyle,
+  greetingPrefix = '¡',
+  greetingSuffix = '!',
+  nameClassName = '',
+  nameStyle,
+  dateTextClassName = '',
+  dateTextStyle,
+  ...props
+}) => {
+  const resolvedDate = showDate ? coerceDate(date) : null;
+
+  let formattedDate = '';
+  if (resolvedDate) {
+    if (typeof formatDate === 'function') {
+      formattedDate = formatDate(resolvedDate, { locale, dateOptions });
+    } else {
+      formattedDate = new Intl.DateTimeFormat(locale, dateOptions).format(resolvedDate);
+    }
+    if (capitalizeDate) {
+      formattedDate = capitalizeFirst(formattedDate);
+    }
+  }
+
+  return (
+    <div
+      className={`w-full ${className}`}
+      style={style}
+      {...props}
+    >
+      <style>{`
+        @media (max-width: ${responsiveBreakpointPx}px) {
+          .scfd-inicio {
+            display: ${responsiveHideInicio ? 'none' : 'flex'};
+          }
+          .scfd-date {
+            display: ${responsiveHideDate ? 'none' : 'flex'};
+          }
+          .scfd-saludo-fecha {
+            justify-content: ${responsiveCenterGreeting ? 'center' : 'space-between'};
+          }
+          .scfd-greeting-wrapper {
+            width: 100%;
+          }
+          .scfd-greeting {
+            text-align: ${responsiveCenterGreeting ? 'center' : 'left'};
+          }
+        }
+      `}</style>
+      {/* Grid de 2 filas:
+          - Fila 1: "Inicio >" (solo izquierda)
+          - Fila 2: "Hola, Nombre" (izquierda) + Fecha (derecha) alineados a la misma altura */}
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-4 gap-y-1 items-center">
+        {showInicio && (
+          <div
+            className={`scfd-inicio col-start-1 row-start-1 flex items-center gap-1 ${inicioContainerClassName}`}
+            style={{
+              // Mantener "Inicio" alineado al mismo borde que "Hola" (padding-left del contenedor inferior)
+              paddingLeft: '8px',
+              ...(inicioContainerStyle || {}),
+            }}
+          >
+            <Typography
+              variant="body-md"
+              className={inicioTextClassName}
+              style={{
+                color: '#223B40',
+                fontFamily: 'IBM Plex Sans',
+                fontWeight: 700,
+                fontStyle: 'normal',
+                fontSize: '14px',
+                lineHeight: '20px',
+                letterSpacing: '0%',
+                verticalAlign: 'middle',
+                ...(inicioTextStyle || {}),
+              }}
+            >
+              {inicioText}
+            </Typography>
+            {showInicioIcon && inicioIconName ? (
+              <Icon
+                name={inicioIconName}
+                variant={inicioIconVariant}
+                size={inicioIconSize}
+                className={inicioIconClassName}
+                style={{
+                  color: '#223B40',
+                  opacity: 1,
+                  transform: 'rotate(0deg)',
+                  ...(inicioIconStyle || {}),
+                }}
+              />
+            ) : null}
+          </div>
+        )}
+
+        {/* Contenedor padre de la fila "Hola + Fecha" (Figma) */}
+        <div
+          className={`scfd-saludo-fecha col-start-1 col-end-3 row-start-2 flex items-center justify-between ${saludoFechaContainerClassName}`}
+          style={{
+            // Responsive: ocupar el ancho disponible sin generar scroll horizontal,
+            // manteniendo el ancho Figma como máximo.
+            width: '100%',
+            maxWidth: '1250px',
+            minHeight: '74px',
+            gap: '24px',
+            opacity: 1,
+            transform: 'rotate(0deg)',
+            paddingTop: '16px',
+            paddingBottom: '16px',
+            paddingLeft: '8px',
+            boxSizing: 'border-box',
+            ...(saludoFechaContainerStyle || {}),
+          }}
+        >
+          <div className={`scfd-greeting-wrapper min-w-0 ${leftClassName}`} style={leftStyle}>
+            <Typography
+              variant="h5"
+              className={`scfd-greeting ${greetingClassName}`}
+              style={{
+                color: '#223B40',
+                fontFamily: 'IBM Plex Sans',
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '28px',
+                lineHeight: '42px',
+                letterSpacing: '0%',
+                verticalAlign: 'middle',
+                ...(greetingStyle || {}),
+              }}
+            >
+              <span
+                style={{
+                  display: 'inline-block',
+                  verticalAlign: 'middle',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 400,
+                  fontStyle: 'normal',
+                  fontSize: '28px',
+                  lineHeight: '42px',
+                  letterSpacing: '0%',
+                  color: '#223B40',
+                }}
+              >
+                {greetingPrefix}
+                {saludo}
+              </span>
+              {userName ? (
+                <>
+                  <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>{',\u00A0'}</span>
+                  <span
+                    className={nameClassName}
+                    style={{
+                      display: 'inline-block',
+                      verticalAlign: 'middle',
+                      color: '#223B40',
+                      fontFamily: 'IBM Plex Sans',
+                      fontWeight: 400,
+                      fontStyle: 'normal',
+                      fontSize: '28px',
+                      lineHeight: '42px',
+                      letterSpacing: '0%',
+                      ...(nameStyle || {}),
+                    }}
+                  >
+                    {userName}
+                  </span>
+                </>
+              ) : null}
+              <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>{greetingSuffix}</span>
+            </Typography>
+          </div>
+
+          {showDate && formattedDate ? (
+            <div className={`scfd-date flex items-center flex-shrink-0 ${rightClassName}`} style={rightStyle}>
+              <Typography
+                variant="body-lg"
+                className={`color-gray-600 ${dateTextClassName}`}
+                style={dateTextStyle}
+              >
+                {formattedDate}
+              </Typography>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SaludoConFechaDashboard;
+
+