anteriority-ui 1.0.0

package/screens/components/Checks/index.module.css

@@ -0,0 +1,32 @@
+.itemContainer {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  text-align: left !important;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.itemContainer:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.checked {
+  background-color: var(--checks-checked-bg, rgba(25, 118, 210, 0.08));
+}
+
+.label {
+  font-size: 0.95rem;
+  color: #e5e7eb;
+  margin-left: 8px;
+}
+
+.checked .label {
+  color: #94a3b8;
+  text-decoration: line-through;
+}

package/screens/components/Checks/index.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PermissionCheckboxItem from './index';
+
+export default {
+  title: 'Components/Checks',
+  component: PermissionCheckboxItem,
+};
+
+export const Unchecked = {
+  args: {
+    label: 'Ver historial clínico',
+    checked: false,
+    onChange: () => console.log('toggled'),
+  },
+};
+
+export const Checked = {
+  args: {
+    label: 'Editar información de pacientes',
+    checked: true,
+    onChange: () => console.log('toggled'),
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Eliminar registros (bloqueado)',
+    checked: false,
+    disabled: true,
+    onChange: () => console.log('toggled'),
+  },
+};

package/screens/components/Container/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './index.module.css';
+import Paginador from '../Material-UI/Components/Paginador';
+
+export default function Container({ 
+  children, 
+  className = '', 
+  showPagination = false,
+  paginationCount = 10,
+  paginationPage = 1,
+  onPaginationChange,
+  paginationProps = {},
+  pageSize = 10,
+  pageSizeOptions = [5, 10, 20, 50],
+  onPageSizeChange,
+  ...props 
+}) {
+  return (
+    <div className={`${styles.containerCard} ${className}`} {...props}>
+      {children}
+      {showPagination && (
+        <div className={styles.paginationContainer}>
+          <Paginador 
+            count={paginationCount} 
+            page={paginationPage} 
+            onChange={onPaginationChange} 
+            pageSize={pageSize}
+            pageSizeOptions={pageSizeOptions}
+            onPageSizeChange={onPageSizeChange}
+            {...paginationProps}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/screens/components/Container/index.module.css

@@ -0,0 +1,24 @@
+.containerCard {
+  position: relative;
+  width: 100%;
+  max-width: 1300px;
+  background: var(--letter-white, #ffffff);
+  backdrop-filter: var(--blur, blur(10px));
+  -webkit-backdrop-filter: var(--blur, blur(10px));
+  padding: 35px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--logo-yellow-border, #e2e8f0);
+  min-height: 550px; /* Tamaño estático/mínimo por defecto para evitar saltos al cargar */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .containerCard {
+    max-width: 100%;
+    padding: 1.5rem;
+    min-height: auto; /* Permite que sea fluido en móviles */
+  }
+}

package/screens/components/Container/index.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Container from './index';
+
+export default {
+  title: 'Components/Container',
+  component: Container,
+};
+
+export const Default = {
+  args: {
+    children: <p>Contenido de ejemplo dentro del contenedor.</p>,
+  },
+};
+
+export const WithPagination = {
+  args: {
+    children: <p>Lista de resultados paginados.</p>,
+    showPagination: true,
+    paginationCount: 50,
+    paginationPage: 1,
+    pageSize: 10,
+    onPaginationChange: (page) => console.log('page changed', page),
+    onPageSizeChange: (size) => console.log('page size changed', size),
+  },
+};
+
+export const CustomClassName = {
+  args: {
+    children: <p>Contenedor con clase personalizada.</p>,
+    className: 'custom-container',
+  },
+};

package/screens/components/CopyText/index.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+import styles from './index.module.css'; 
+
+export default function CopyableText({ text, bgColor, borderColor, textColor }) {
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();  
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Error al copiar el texto: ', err);
+    }
+  };
+
+  return (
+    <ModalTooltip text={copied ? "¡Copiado!" : "Haga clic para copiar"}>
+      <span
+        className={styles.copyableContainer}
+        onClick={handleCopy}
+        style={{
+          ...(bgColor ? { '--copytext-bg': bgColor } : {}),
+          ...(borderColor ? { '--copytext-border': borderColor } : {}),
+          ...(textColor ? { '--copytext-text': textColor } : {}),
+        }}
+      >
+        <span className={styles.copyableText}>{text}</span>
+        {copied ? (
+          <Check size={14} className={styles.copyIconSuccess} />
+        ) : (
+          <Copy size={14} className={styles.copyIcon} />
+        )}
+      </span>
+    </ModalTooltip>
+  );
+}

package/screens/components/CopyText/index.module.css

@@ -0,0 +1,52 @@
+.copyableContainer {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background-color: var(--copytext-bg, rgba(226, 232, 240, 0.6)); /* Fondo gris suave e interactivo */
+  border: 1px solid var(--copytext-border, #cbd5e1);
+  padding: 2px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Tipografía limpia para datos copiables */
+  font-weight: 600;
+  color: var(--copytext-text, #334155);
+  transition: all 0.2s ease;
+  user-select: all;
+}
+
+.copyableContainer:hover {
+  background-color: #e2e8f0;
+  border-color: #94a3b8;
+}
+
+.copyableText {
+  font-size: 0.9em;
+  line-height: 1.2;
+}
+
+.copyIcon {
+  color: #64748b;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.copyableContainer:hover .copyIcon {
+  color: #334155;
+}
+
+.copyIconSuccess {
+  color: #10b981; /* Verde esmeralda para el feedback visual */
+  flex-shrink: 0;
+  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popIn {
+  0% { 
+    transform: scale(0.6); 
+    opacity: 0; 
+  }
+  100% { 
+    transform: scale(1); 
+    opacity: 1; 
+  }
+}

package/screens/components/CopyText/index.stories.jsx

@@ -0,0 +1,24 @@
+import CopyableText from './index.jsx';
+
+export default {
+  title: 'Components/CopyText',
+  component: CopyableText,
+};
+
+export const Default = {
+  args: {
+    text: 'ABC-12345-XYZ',
+  },
+};
+
+export const Email = {
+  args: {
+    text: 'contacto@empresa.com',
+  },
+};
+
+export const LongCode = {
+  args: {
+    text: 'f47ac10b-58cc-4372-a567-0e02b2c3d479',
+  },
+};

package/screens/components/CountdownBar/constants.js

@@ -0,0 +1,3 @@
+export const TEXTS = {
+  remainingTime: 'Tiempo restante'
+};

package/screens/components/CountdownBar/index.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styles from './index.module.css';
+import { useCountdown, getColorForProgress } from './utils';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+
+export default function CountdownBar({ 
+  active, 
+  duration = 10000, 
+  onComplete,
+  height = '6px',
+  width = '100%',
+  colors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6'], // Del rojo (acabándose) al azul (inicio)
+  expiresAt,
+  totalDuration = 900000,
+  value,
+  increment = false,
+  isOverlay = false,
+  overlayMessage
+}) {
+  const timerState = useCountdown(active && value === undefined, duration, onComplete, expiresAt, totalDuration);
+  
+  let progress = value !== undefined ? value : timerState.progress;
+  if (increment && value === undefined) {
+    progress = 100 - progress;
+  }
+  const remainingSeconds = timerState.remainingSeconds;
+  const remainingTime = remainingSeconds ? remainingSeconds.toFixed(1) : '0.0';
+
+  if (!active) return null;
+
+  const currentColor = getColorForProgress(progress, colors);
+
+  const tooltipText = value !== undefined 
+    ? `${Math.round(progress)}% completado` 
+    : `${remainingTime}s restantes`;
+
+  const barContent = (
+    <div className={styles.wrapper} style={{ width }}>
+      <div 
+        className={styles.container} 
+        style={{ height }}
+        aria-valuemin="0" 
+        aria-valuemax="100" 
+        aria-valuenow={progress} 
+        role="progressbar"
+      >
+        <div 
+          className={styles.bar} 
+          style={{ 
+            width: `${progress}%`,
+            // Crea un sutil gradiente interno que se mezcla de forma suave
+            backgroundImage: `linear-gradient(90deg, ${currentColor}, ${currentColor}dd)`
+          }} 
+        />
+      </div>
+    </div>
+  );
+
+  if (isOverlay) {
+    return (
+      <div className={styles.overlayContainer}>
+        {overlayMessage && (
+          <p className={styles.overlayMessage}>
+            {overlayMessage}
+          </p>
+        )}
+        <div style={{ width: '80%' }}>
+          <ModalTooltip text={tooltipText} style={{ width: '100%', display: 'block' }}>
+            {barContent}
+          </ModalTooltip>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ModalTooltip text={tooltipText} style={{ width, display: 'block' }}>
+      {barContent}
+    </ModalTooltip>
+  );
+}

package/screens/components/CountdownBar/index.module.css

@@ -0,0 +1,45 @@
+.wrapper {
+  margin-top: 8px;
+  cursor: pointer;
+}
+
+.container {
+  width: 100%;
+  background-color: #f1f5f9;
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.bar {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.05s linear, background-color 0.3s ease;
+}
+
+.overlayContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+  border-radius: 4px;
+  padding: 0.75rem;
+  box-sizing: border-box;
+}
+
+.overlayMessage {
+  color: #ff0000;
+  font-size: 0.95rem;
+  font-weight: 700;
+  text-align: center;
+  margin: 0 0 1rem 0;
+  line-height: 1.4;
+}

package/screens/components/CountdownBar/index.stories.jsx

@@ -0,0 +1,43 @@
+import CountdownBar from './index.jsx';
+
+export default {
+  title: 'Components/CountdownBar',
+  component: CountdownBar,
+};
+
+export const Default = {
+  args: {
+    active: true,
+    duration: 10000,
+    onComplete: () => console.log('countdown complete'),
+  },
+};
+
+export const CustomColors = {
+  args: {
+    active: true,
+    duration: 15000,
+    height: '10px',
+    colors: ['#ef4444', '#f97316', '#22c55e'],
+    onComplete: () => console.log('countdown complete'),
+  },
+};
+
+export const StaticValue = {
+  args: {
+    active: true,
+    value: 65,
+    increment: true,
+    height: '8px',
+  },
+};
+
+export const Overlay = {
+  args: {
+    active: true,
+    duration: 8000,
+    isOverlay: true,
+    overlayMessage: 'Guardando cambios, no cierres esta ventana...',
+    onComplete: () => console.log('countdown complete'),
+  },
+};

package/screens/components/CountdownBar/utils.js

@@ -0,0 +1,119 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useCountdown(active, duration, onComplete, expiresAt, totalDuration = 900000) {
+  const [state, setState] = useState({ progress: 100, remainingSeconds: duration / 1000 });
+
+  // Refs to store stable values
+  const expiresAtRef = useRef(expiresAt);
+  const totalDurationRef = useRef(totalDuration);
+  const durationRef = useRef(duration);
+  const onCompleteRef = useRef(onComplete);
+
+  // Keep refs updated with latest prop values
+  useEffect(() => {
+    if (!active) {
+      expiresAtRef.current = null;
+      totalDurationRef.current = null;
+    } else {
+      // Only capture the initial value when it becomes active
+      if (expiresAt && !expiresAtRef.current) {
+        expiresAtRef.current = expiresAt;
+      }
+      if (totalDuration && !totalDurationRef.current) {
+        totalDurationRef.current = totalDuration;
+      }
+    }
+  }, [active, expiresAt, totalDuration]);
+
+  // Keep other refs updated
+  useEffect(() => {
+    durationRef.current = duration;
+    onCompleteRef.current = onComplete;
+  }, [duration, onComplete]);
+
+  useEffect(() => {
+    if (!active) {
+      setState({ progress: 100, remainingSeconds: durationRef.current / 1000 });
+      return;
+    }
+
+    const startTime = Date.now();
+    const interval = 50;
+
+    const timer = setInterval(() => {
+      let remaining;
+      let percentage;
+
+      const targetExpiresAt = expiresAtRef.current;
+      const targetTotalDuration = totalDurationRef.current || 900000;
+
+      if (targetExpiresAt) {
+        const expirationTime = new Date(targetExpiresAt).getTime();
+        remaining = Math.max(0, expirationTime - Date.now());
+        percentage = (remaining / targetTotalDuration) * 100;
+      } else {
+        const elapsed = Date.now() - startTime;
+        remaining = Math.max(0, durationRef.current - elapsed);
+        percentage = (remaining / durationRef.current) * 100;
+      }
+
+      const finalProgress = Math.max(0, Math.min(100, percentage));
+      setState({
+        progress: finalProgress,
+        remainingSeconds: remaining / 1000
+      });
+
+      if (remaining <= 0) {
+        clearInterval(timer);
+        if (onCompleteRef.current) {
+          onCompleteRef.current();
+        }
+      }
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [active]);
+
+  return state;
+}
+
+// Funciones auxiliares para interpolar colores en formato HEX
+function hexToRgb(hex) {
+  const cleanHex = hex.replace('#', '');
+  const bigint = parseInt(cleanHex, 16);
+  return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
+}
+
+function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(x => {
+    const hex = Math.round(x).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }).join('');
+}
+
+function interpolateColor(color1, color2, factor) {
+  const c1 = hexToRgb(color1);
+  const c2 = hexToRgb(color2);
+  const r = c1[0] + factor * (c2[0] - c1[0]);
+  const g = c1[1] + factor * (c2[1] - c1[1]);
+  const b = c1[2] + factor * (c2[2] - c1[2]);
+  return rgbToHex(r, g, b);
+}
+
+export function getColorForProgress(progress, customColors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6']) {
+  // progress va de 100 (inicio) a 0 (fin)
+  // Invertimos el cálculo para que 100% sea el inicio del array y 0% sea el final
+  const p = Math.max(0, Math.min(100, progress)) / 100;
+  
+  if (customColors.length < 2) return customColors[0] || '#3b82f6';
+
+  const scaled = p * (customColors.length - 1);
+  const index = Math.floor(scaled);
+  const factor = scaled - index;
+
+  if (index >= customColors.length - 1) {
+    return customColors[customColors.length - 1];
+  }
+
+  return interpolateColor(customColors[index], customColors[index + 1], factor);
+}

package/screens/components/DateTag/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+import styles from './index.module.css';
+
+export default function DateTag({ date, bgColor, textColor, iconColor, style = {} }) {
+  if (!date) return null;
+
+  let formattedDate = '';
+  try {
+    formattedDate = new Date(date).toLocaleString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  } catch (e) {
+    formattedDate = String(date);
+  }
+
+  const customStyles = {
+    backgroundColor: bgColor || 'var(--tag-bg, #f1f5f9)',
+    color: textColor || 'var(--tag-text, #475569)',
+    ...style
+  };
+
+  return (
+    <div className={styles.tag} style={customStyles}>
+      <Calendar size={14} color={iconColor || textColor || 'var(--tag-text, #475569)'} />
+      <span>{formattedDate}</span>
+    </div>
+  );
+}

package/screens/components/DateTag/index.module.css

@@ -0,0 +1,12 @@
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  width: fit-content;
+  white-space: nowrap;
+}

package/screens/components/DateTag/index.stories.jsx

@@ -0,0 +1,29 @@
+import DateTag from './index.jsx';
+
+export default {
+  title: 'Components/DateTag',
+  component: DateTag,
+};
+
+export const Default = {
+  args: {
+    date: '2026-09-12T10:30:00',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    date: '2026-01-05T08:00:00',
+    bgColor: '#fee2e2',
+    textColor: '#b91c1c',
+  },
+};
+
+export const CustomIconColor = {
+  args: {
+    date: '2026-12-25T00:00:00',
+    bgColor: '#dcfce7',
+    textColor: '#166534',
+    iconColor: '#16a34a',
+  },
+};