anima-ds-nucleus 1.0.2 → 1.0.4

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

@@ -0,0 +1,142 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardError = ({
+  title = "Notificaciones",
+  errorMessage = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta elementum neque, vel vehicula nulla pharetra id.",
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '60px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '331.5px',
+            height: '30px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+      </div>
+      <div 
+        className="flex flex-col items-center justify-center"
+        style={{
+          paddingTop: '80px',
+          paddingBottom: '24px',
+          minHeight: 'calc(476px - 60px)',
+          display: 'flex',
+          justifyContent: 'flex-start'
+        }}
+      >
+        <div 
+          className="mb-4 flex items-center justify-center border-2 rounded-full"
+          style={{ 
+            borderColor: '#374151',
+            width: '48px',
+            height: '48px',
+            opacity: 1
+          }}
+        >
+          <Icon
+            name="XMarkIcon"
+            variant="24-outline"
+            size={32}
+            className="color-gray-900"
+          />
+        </div>
+        <div
+          style={{
+            width: '331.5px',
+            height: '48px',
+            opacity: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '16px'
+          }}
+        >
+          <Typography
+            variant="h3"
+            style={{ 
+              fontFamily: 'IBM Plex Sans',
+              fontWeight: 600,
+              fontStyle: 'normal',
+              fontSize: '32px',
+              lineHeight: '48px',
+              letterSpacing: '0px',
+              textAlign: 'center',
+              color: '#2D5C63'
+            }}
+          >
+            ERROR
+          </Typography>
+        </div>
+        <div 
+          className="border flex items-center justify-center"
+          style={{
+            width: '331.5px',
+            height: '128px',
+            borderRadius: '10px',
+            borderWidth: '1px',
+            borderColor: '#EF4444',
+            backgroundColor: '#FEE2E2',
+            paddingTop: '16px',
+            paddingRight: '16px',
+            paddingBottom: '8px',
+            paddingLeft: '16px',
+            opacity: 1
+          }}
+        >
+          <div
+            style={{
+              width: '298px',
+              height: '96px',
+              opacity: 1
+            }}
+          >
+            <Typography
+              variant="mono-md"
+              style={{ 
+                color: '#991B1B'
+              }}
+            >
+              {errorMessage}
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardError;
+

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

@@ -0,0 +1,96 @@
+export const CardSkeleton = ({
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <style>{`
+        @keyframes skeleton-pulse {
+          0%, 100% {
+            background-color: #DDDDDD;
+          }
+          50% {
+            background-color: #AAAAAA;
+          }
+        }
+        .skeleton-animation {
+          animation: skeleton-pulse 1.5s ease-in-out infinite;
+        }
+      `}</style>
+      <div className="h-full flex flex-col">
+        {/* Header skeleton - placeholder para el título */}
+        <div 
+          style={{
+            width: '379.5px',
+            height: '60px',
+            paddingTop: '24px',
+            paddingRight: '24px',
+            paddingBottom: '6px',
+            paddingLeft: '24px',
+            opacity: 1
+          }}
+        >
+          <div 
+            className="rounded skeleton-animation" 
+            style={{ 
+              backgroundColor: '#DDDDDD',
+              height: '20px',
+              width: '200px'
+            }}
+          ></div>
+        </div>
+        {/* Body skeleton - 3 placeholders grandes */}
+        <div 
+          className="flex-1"
+          style={{
+            paddingLeft: '24px',
+            paddingRight: '24px',
+            paddingBottom: '24px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px'
+          }}
+        >
+          <div 
+            className="rounded skeleton-animation" 
+            style={{ 
+              backgroundColor: '#DDDDDD',
+              height: '80px',
+              width: '100%'
+            }}
+          ></div>
+          <div 
+            className="rounded skeleton-animation" 
+            style={{ 
+              backgroundColor: '#DDDDDD',
+              height: '80px',
+              width: '100%'
+            }}
+          ></div>
+          <div 
+            className="rounded skeleton-animation" 
+            style={{ 
+              backgroundColor: '#DDDDDD',
+              height: '80px',
+              width: '100%'
+            }}
+          ></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardSkeleton;
+

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

@@ -0,0 +1,61 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardTituloCorto = ({
+  title = "Notificaciones",
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '60px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '331.5px',
+            height: '30px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+      </div>
+      {children && (
+        <div className="px-4 pb-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardTituloCorto;
+
+
+

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

@@ -0,0 +1,79 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardTituloCortoMasEstado = ({
+  title = "Notificaciones",
+  status = "3 nuevas",
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '60px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '331.5px',
+            height: '30px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+        <span
+          className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
+          style={{
+            width: '90px',
+            height: '24px',
+            borderRadius: '12px',
+            paddingTop: '2px',
+            paddingRight: '12px',
+            paddingBottom: '4px',
+            paddingLeft: '12px',
+            backgroundColor: '#E6F7F0',
+            color: '#2D5C63',
+            opacity: 1
+          }}
+        >
+          {status}
+        </span>
+      </div>
+      {children && (
+        <div className="px-4 pb-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardTituloCortoMasEstado;
+
+
+

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

@@ -0,0 +1,61 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardTituloLargo = ({
+  title = "Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '60px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '331.5px',
+            height: '30px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+      </div>
+      {children && (
+        <div className="px-4 pb-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardTituloLargo;
+
+
+

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

@@ -0,0 +1,77 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardTituloLargoMasEstado = ({
+  title = "Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",
+  status = "3 nuevas",
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '90px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '241.5px',
+            height: '60px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+        <span
+          className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
+          style={{
+            width: '90px',
+            height: '24px',
+            borderRadius: '12px',
+            paddingTop: '2px',
+            paddingRight: '12px',
+            paddingBottom: '4px',
+            paddingLeft: '12px',
+            backgroundColor: '#E6F7F0',
+            color: '#2D5C63',
+            opacity: 1
+          }}
+        >
+          {status}
+        </span>
+      </div>
+      {children && (
+        <div className="px-4 pb-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardTituloLargoMasEstado;
+

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

@@ -0,0 +1,111 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardVacia = ({
+  title = "Notificaciones",
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '60px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '331.5px',
+            height: '30px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+      </div>
+      <div 
+        className="flex flex-col items-center justify-center"
+        style={{
+          paddingTop: '80px',
+          paddingBottom: '24px',
+          minHeight: 'calc(476px - 60px)',
+          display: 'flex',
+          justifyContent: 'flex-start'
+        }}
+      >
+        <div 
+          className="mb-4 flex items-center justify-center"
+          style={{ 
+            width: '63.99068069458008px',
+            height: '64px',
+            borderRadius: '12px',
+            paddingTop: '8px',
+            paddingRight: '8px',
+            paddingBottom: '8px',
+            paddingLeft: '8px',
+            backgroundColor: '#E6F7F0',
+            opacity: 1
+          }}
+        >
+          <Icon
+            name="HandThumbDownIcon"
+            variant="24-outline"
+            size={32}
+            className="color-gray-900"
+          />
+        </div>
+        <Typography
+          variant="h5"
+          className="color-gray-900 mb-2"
+          style={{
+            fontFamily: 'IBM Plex Sans',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '24px',
+            lineHeight: '36px',
+            letterSpacing: '0px',
+            textAlign: 'center'
+          }}
+        >
+          UPS...
+        </Typography>
+        <Typography
+          variant="body-lg"
+          className="color-gray-700 text-center"
+          style={{
+            fontSize: '18px',
+            lineHeight: '27px'
+          }}
+        >
+          Parece que esta tarjeta no contiene información.
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default CardVacia;
+