@soyfri/shared-library 1.5.0 → 1.6.0-beta.0

package/src/components/Timeline/Timeline.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import MuiTimeline from "@mui/lab/Timeline";
-import { timelineContentClasses } from "@mui/lab/TimelineContent";
-import { timelineItemClasses, TimelineItemProps as MuiTimelineItemProps } from "@mui/lab/TimelineItem";
-import { Box } from "@mui/material";
-
-interface TimelineItemProps extends MuiTimelineItemProps {
-  connectorColor?: string;
-  sx?: object;
-}
-
-interface TimelineProps {
-  children: React.ReactElement<TimelineItemProps>[];
-  position?: "left" | "right" | 'alternate' | 'alternate-reverse' ;
-  sx?: object;
-}
-
-export const Timeline: React.FC<TimelineProps> = ({ children, position = "right", sx }) => {
-  const count = React.Children.count(children);
-
-    const customSx = (position === "left" || position === "right")
-    ? {
-        [`& .${timelineItemClasses.root}:before`]: {
-          flex: 0,
-          padding: 0,
-        },
-        ...sx,
-      }
-    : sx;
-    
-  return (
-    <MuiTimeline position={position}
-      sx={{...customSx}}
-      >
-      {React.Children.map(children, (child, idx) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child, {
-            connectorColor: idx < count - 1
-              ? child.props.connectorColor ?? 'gray.main'
-              : undefined,
-          })
-          : null
-      )}
-    </MuiTimeline>
-
-  );
-};
-
-export default Timeline;

package/src/components/Timeline/TimelineItem.tsx

@@ -1,31 +0,0 @@
-
-import MuiTimelineItem from "@mui/lab/TimelineItem";
-import MuiTimelineSeparator from "@mui/lab/TimelineSeparator";
-import MuiTimelineConnector from "@mui/lab/TimelineConnector";
-import MuiTimelineContent from "@mui/lab/TimelineContent";
-import MuiTimelineDot from "@mui/lab/TimelineDot";
-
-export interface TimelineItemProps {
-  dotColor?: 'primary' | 'secondary' | 'grey' | 'inherit' | 'success' | 'error' | 'info' | 'warning';
-  connectorColor?: 'success' | 'error' | 'info' | 'warning' | 'primary' | 'secondary' | 'grey';
-  children: React.ReactNode;
-}
-
-export const TimelineItem: React.FC<TimelineItemProps> = ({
-  dotColor = 'grey',
-  connectorColor,
-  children
-}) => {
-  const color = connectorColor ? `${connectorColor}.main` : 'secondary.main';
-  return (
-    <MuiTimelineItem>
-      <MuiTimelineSeparator>
-        <MuiTimelineDot color={dotColor} />
-        {connectorColor !== undefined && <MuiTimelineConnector sx={{ bgcolor: color }} />}
-      </MuiTimelineSeparator>
-      <MuiTimelineContent>{children}</MuiTimelineContent>
-    </MuiTimelineItem>
-  );
-};
-
-export default TimelineItem

package/src/components/Timeline/index.ts

@@ -1,2 +0,0 @@
-export { default as Timeline } from './Timeline';
-export { default as TimelineItem } from './TimelineItem';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Tooltip from './Tooltip'; // Asegúrate que la ruta sea correcta
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
-
-// --- Metadatos de la Historia ---
-// Define la configuración global de tu componente en Storybook
-const meta: Meta<typeof Tooltip> = {
-  // Título que aparecerá en el sidebar de Storybook
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  // Parámetros para configurar el comportamiento en la documentación
-  parameters: {
-    layout: 'centered', // Centra el componente en el lienzo
-  },
-  // Documentación de los argumentos (props)
-  
-  tags: ["autodocs"]
-};
-
-export default meta;
-
-// Define el tipo de tu historia para inferir los argumentos (props)
-type Story = StoryObj<typeof Tooltip>;
-
-// --- Definición de Historias ---
-
-const textoLargo = "Este es un texto de Tooltip muy largo para demostrar cómo el 'maxWidth' limita la longitud de la línea y obliga al texto a saltar a la siguiente línea, mejorando la legibilidad en tooltips largos.";
-
-
-/**
- * Historia 1: Tooltip Básico
- * Muestra el Tooltip sobre un botón sin especificar un ancho máximo.
- */
-export const TooltipBasico: Story = {
-  args: {
-    text: 'Información corta y concisa.',
-    children: <Button variant="contained">Pasa el ratón aquí</Button>,
-  },
-};
-
-/**
- * Historia 2: Tooltip con Ancho Máximo Específico
- * Muestra un texto largo y aplica un ancho máximo para forzar el salto de línea.
- */
-export const TooltipConAnchoMaximo: Story = {
-  args: {
-    text: textoLargo,
-    maxWidth: 200, // Aplicamos el ancho máximo
-    children: <Button variant="outlined">Tooltip con Ancho Máximo (200px)</Button>,
-  },
-};
-
-/**
- * Historia 3: Tooltip Aplicado a un Campo de Texto (TextField)
- * Demuestra que el componente funciona con cualquier elemento.
- */
-export const AplicadoAElementoDeFormulario: Story = {
-  args: {
-    text: 'Introduce tu nombre completo y validado.',
-    maxWidth: 300,
-    children: <TextField label="Nombre" variant="standard" />,
-  },
-};
-
-/**
- * Historia 4: Ejemplo en un Contenedor con Estilos
- * Muestra el uso de la propiedad 'sx' opcional en el contenedor.
- */
-export const ContenedorEstilizado: Story = {
-    args: {
-        text: 'Este texto se muestra al pasar el ratón sobre el span estilizado.',
-        maxWidth: 250,
-        sx: { // Estilos aplicados al Box que envuelve el children
-            border: '2px dashed #007bff',
-            padding: '8px',
-            borderRadius: '4px',
-            backgroundColor: '#e6f7ff',
-        },
-        children: <span>Contenedor Estilizado (Hover aquí)</span>,
-    }
-}
-
-
-/**
- * Historia 5: Variantes Múltiples
- * Utiliza el 'render' para mostrar varios ejemplos a la vez.
- */
-export const VariantesMultiples: Story = {
-    // Necesitamos un Stack para organizar los elementos
-    render: (args) => (
-        <Stack spacing={4} alignItems="flex-start" sx={{ padding: '20px' }}>
-            <Tooltip {...args} text="Tooltip #1: Básico" maxWidth={150}>
-                <Button variant="contained" color="primary">Botón A</Button>
-            </Tooltip>
-
-            <Tooltip {...args} text="Tooltip #2: Un poco más de info" maxWidth={180}>
-                <Button variant="contained" color="secondary">Botón B</Button>
-            </Tooltip>
-
-            <Tooltip {...args} text={textoLargo} maxWidth={280}>
-                <Button variant="text">Texto Largo</Button>
-            </Tooltip>
-        </Stack>
-    ),
-    // Eliminamos el layout centered para esta historia
-    parameters: {
-        layout: 'padded', 
-    },
-    // Dejamos el 'args' de 'text' vacío ya que se sobrescribe en el render
-    args: {
-        text: '', 
-        children: undefined, 
-    }
-};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import MuiTooltip from '@mui/material/Tooltip'; 
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import { SxProps, Theme } from '@mui/material';
-
-/**
- * Propiedades del componente Tooltip.
- * @param {string} text - El texto a mostrar dentro del Tooltip.
- * @param {number} [maxWidth] - El ancho máximo opcional del Tooltip en píxeles.
- * @param {React.ReactNode} children - El elemento al que se le aplicará el Tooltip.
- * @param {SxProps<Theme>} [sx] - Estilos opcionales para el Box contenedor.
- */
-interface TooltipProps {
-  text: string;
-  maxWidth?: number;
-  children: React.ReactNode;
-  sx?: SxProps<Theme>;
-}
-
-/**
- * Componente Tooltip reutilizable.
- * Muestra un texto al pasar el ratón sobre su elemento hijo, 
- * permitiendo un ancho máximo configurable.
- * * @param {TooltipProps} props - Propiedades del Tooltip.
- */
-const Tooltip: React.FC<TooltipProps> = ({ text, maxWidth, children, sx }) => {
-  
-  const tooltipContentStyle: SxProps<Theme> = {
-    
-    ...(maxWidth && { maxWidth: maxWidth }), 
-    padding: '4px 8px', 
-    textAlign: 'center',
-    
-  };
-
-  return (
-    
-    <MuiTooltip
-      title={
-        
-        <Typography variant="caption" component="span" sx={tooltipContentStyle}>
-          {text}
-        </Typography>
-      }
-      
-      placement="top" 
-      arrow 
-    >
-      
-      <Box component="span" sx={{ display: 'inline-block', ...sx }}>
-        {children}
-      </Box>
-    </MuiTooltip>
-  );
-};
-
-export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -1 +0,0 @@
-export { default as Tooltip } from './Tooltip';

package/src/hooks/ClipBoard/ClipBoard.stories.tsx

@@ -1,168 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { Box, Button, Typography } from '@mui/material';
-
-// Importa el componente de demostración unificado
-import ClipboardUnifiedDemo from './ClipboardUnifiedDemo'; 
-
-// Importa las definiciones de las historias
-
-import useClipboard from './ClipBoard';
-
-// Componente Wrapper (Mantenido para la tipificación)
-const ClipboardDemoWrapper: React.FC = () => <ClipboardUnifiedDemo {...(meta.args as any)} />; 
-
-// =============================================================================
-// Definición de las meta-propiedades para Storybook
-// =============================================================================
-const meta: Meta<typeof ClipboardUnifiedDemo> = {
-  title: 'Hooks/useClipboard (Unificado Ref & Función)',
-  component: ClipboardUnifiedDemo,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: 'Hook unificado que soporta la **copia por Referencia (`ref`)** para un solo elemento y la **copia por Función (`copy(text)`)** para iteraciones (tablas, listas), proporcionando feedback visual con un Snackbar de Material UI.',
-      },
-    },
-  },
-  // Argumentos de control para el MODO FUNCIÓN
-  argTypes: {
-    message: { control: 'text', description: 'Mensaje de éxito para el MODO FUNCIÓN.' },
-    severity: { control: 'select', options: ['success', 'info', 'warning', 'error'], description: 'Gravedad del Alert para el MODO FUNCIÓN.' },
-    duration: { control: { type: 'number', min: 0, max: 5000, step: 500 }, description: 'Duración del Snackbar.' },
-    vertical: { control: 'select', options: ['top', 'bottom'], description: 'Posición vertical.' },
-    horizontal: { control: 'select', options: ['left', 'center', 'right'], description: 'Posición horizontal.' },
-  },
-  args: {
-    message: '¡Dato copiado con la función!',
-    severity: 'success',
-    duration: 2000,
-    vertical: 'bottom',
-    horizontal: 'center',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ClipboardUnifiedDemo>;
-
-// =============================================================================
-// Historias
-// =============================================================================
-
-export const DemoUnificada: Story = {
-  name: 'A. Demostración Completa',
-  args: {
-    message: 'Dato copiado con éxito (Función)',
-    severity: 'success',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Muestra ambos modos de uso (`ref` y `copy`) simultáneamente. El feedback del modo `ref` tiene color amarillo (warning) por defecto para diferenciarlo del modo `copy`."
-      },
-      // source: { code: MultipleFunctionElementsDefinition.trim() }
-    }
-  }
-};
-
-// --------------------------------------------------
-
-export const UsoBasicoPorRef: Story = {
-    name: 'B. Modo Ref: Uso Básico',
-    render: () => {
-        const { ref, CopyMessage } = useClipboard(); // Sin opciones, usa valores por defecto
-        return (
-            <Box>
-                <Typography ref={ref} sx={{ p: 2, border: '1px solid #ccc', cursor: 'pointer' }}>
-                    Texto para copiar por ref (click aquí).
-                </Typography>
-                <CopyMessage />
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Demuestra el modo **Referencia**, donde el hook adjunta un listener de clic al elemento y copia su `innerText`."
-            },
-            // source: { code: BasicRefUsageDefinition.trim() }
-        }
-    }
-};
-
-// --------------------------------------------------
-
-// Datos simulados para la demostración del modo función
-const mockData = [
-    { id: 1, content: 'Dato 1' },
-    { id: 2, content: 'Dato 2' },
-    { id: 3, content: 'Dato 3' },
-];
-
-export const UsoPorFuncionEnIteracion: Story = {
-    name: 'C. Modo Función: Uso en Iteración',
-    render: () => {
-        const { copy, CopyMessage } = useClipboard({
-            message: 'Contenido de la fila copiado.',
-            severity: 'info',
-            position: { vertical: 'top', horizontal: 'right' }
-        });
-        
-        return (
-            <Box>
-                <Typography variant="h6">Copiar datos individuales:</Typography>
-                {mockData.map(item => (
-                    <Button 
-                        key={item.id}
-                        variant="outlined" 
-                        onClick={() => copy(item.content)} 
-                        sx={{ mr: 2 }}
-                    >
-                        Copiar: {item.content}
-                    </Button>
-                ))}
-                <CopyMessage />
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Demuestra el modo **Función**, donde se llama a `copy(text)` dentro de un bucle, permitiendo controlar exactamente qué texto se copia."
-            },
-            // source: { code: FunctionModeUsageDefinition.trim() }
-        }
-    }
-};
-
-// --------------------------------------------------
-
-export const CustomConfiguracionRef: Story = {
-    name: 'D. Modo Ref: Con Configuración Custom',
-    render: () => {
-        const { ref, CopyMessage } = useClipboard({
-            message: 'Copia OK en la parte superior.',
-            severity: 'success',
-            duration: 1800,
-            position: { vertical: 'top', horizontal: 'left' }
-        });
-        return (
-            <Box>
-                <Typography ref={ref} sx={{ p: 2, border: '1px solid #0a0', backgroundColor: '#eef', cursor: 'pointer' }}>
-                    Clic. Snackbar aparecerá arriba a la izquierda.
-                </Typography>
-                <CopyMessage />
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Muestra cómo aplicar opciones personalizadas de Snackbar al modo **Referencia**."
-            },
-            // source: { code: CustomRefUsageDefinition.trim() }
-        }
-    }
-};

package/src/hooks/ClipBoard/ClipBoard.tsx

@@ -1,131 +0,0 @@
-// useClipboard.tsx (Versión Unificada)
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { Snackbar, Alert } from '@mui/material';
-import { AlertProps } from '@mui/material/Alert';
-
-// Tipo para las opciones del Snackbar
-interface SnackbarOptions {
-  message?: string;
-  duration?: number;
-  severity?: AlertProps['severity'];
-  position?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right' };
-}
-
-/**
- * Hook 'useClipboard'.
- * Proporciona funcionalidad de copiado de texto y feedback visual (Snackbar).
- * Permite dos modos de uso:
- * 1. Uso por Referencia (ref): Se adjunta a un elemento, copia su innerText al hacer clic.
- * 2. Uso por Función (copy): Recibe el texto a copiar directamente como argumento.
- *
- * @param options Opciones de configuración para el Snackbar de feedback.
- * @returns Un objeto que contiene:
- * - 'ref': Una React Ref para adjuntar a un elemento (Modo Ref).
- * - 'copy': Una función (text: string) => void para copiar texto (Modo Función).
- * - 'CopyMessage': El componente Snackbar para renderizar el feedback.
- */
-export function useClipboard(options?: SnackbarOptions) {
-  // --- Elementos de Copiado por Referencia ---
-  const elementRef = useRef<HTMLElement>(null);
-
-  // --- Estados y Opciones del Snackbar ---
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState(options?.message || '¡Copiado al portapapeles!');
-  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertProps['severity']>(options?.severity || 'success');
-  const [snackbarPosition, setSnackbarPosition] = useState<import('@mui/material').SnackbarOrigin>(options?.position || { vertical: 'bottom', horizontal: 'center' });
-  const [snackbarDuration, setSnackbarDuration] = useState(options?.duration ?? 3000);
-
-  // Función para cerrar el Snackbar
-  const handleSnackbarClose = useCallback((event?: React.SyntheticEvent | Event, reason?: string) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    setSnackbarOpen(false);
-  }, []);
-
-  /**
-   * FUNCIÓN PRINCIPAL DE COPIADO.
-   * Se usa internamente para 'ref' y se expone para 'copy(text)'.
-   * @param text El texto exacto a copiar.
-   */
-  const executeCopy = useCallback((text: string) => {
-    try {
-      if (navigator.clipboard && window.isSecureContext) {
-        // 1. API moderna
-        navigator.clipboard.writeText(text);
-      } else {
-        // 2. Fallback usando textarea
-        const textarea = document.createElement('textarea');
-        textarea.value = text;
-        document.body.appendChild(textarea);
-        textarea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textarea);
-      }
-      
-      // Mostrar éxito
-      setSnackbarMessage(options?.message || '¡Copiado al portapapeles!');
-      setSnackbarSeverity(options?.severity || 'success');
-      setSnackbarPosition(options?.position || { vertical: 'bottom', horizontal: 'center' });
-      setSnackbarDuration(options?.duration ?? 3000);
-      setSnackbarOpen(true);
-
-    } catch (err) {
-      // Mostrar error
-      console.error('Error al copiar al portapapeles:', err);
-      setSnackbarMessage('Error al copiar.');
-      setSnackbarSeverity('error');
-      setSnackbarPosition(options?.position || { vertical: 'bottom', horizontal: 'center' });
-      setSnackbarDuration(options?.duration ?? 3000);
-      setSnackbarOpen(true);
-    }
-  }, [options]); 
-
-  // --- Lógica del Modo Ref ---
-  const copyFromRef = useCallback(() => {
-    if (elementRef.current) {
-        const textToCopy = elementRef.current.innerText || '';
-        executeCopy(textToCopy);
-    }
-  }, [executeCopy]);
-
-  // Adjunta un event listener de clic al elemento referenciado (Modo Ref)
-  useEffect(() => {
-    const currentElement = elementRef.current;
-    if (currentElement) {
-      currentElement.style.cursor = 'pointer';
-      // Adjuntamos la función que copia el texto del ref
-      currentElement.addEventListener('click', copyFromRef);
-    }
-
-    return () => {
-      if (currentElement) {
-        currentElement.removeEventListener('click', copyFromRef);
-      }
-    };
-  }, [copyFromRef]);
-
-
-  // Componente Snackbar encapsulado. Solo se renderiza si duration es > 0.
-  const CopyMessage = () => {
-    if (snackbarDuration <= 0) return null; // No renderizar si la duración es 0
-
-    return (
-      <Snackbar
-        open={snackbarOpen}
-        autoHideDuration={snackbarDuration}
-        onClose={handleSnackbarClose}
-        anchorOrigin={snackbarPosition}
-      >
-        <Alert onClose={handleSnackbarClose} severity={snackbarSeverity} sx={{ width: '100%' }}>
-          {snackbarMessage}
-        </Alert>
-      </Snackbar>
-    );
-  };
-
-  // Retorna ambas funcionalidades para que el usuario elija
-  return { ref: elementRef, copy: executeCopy, CopyMessage };
-}
-
-export default useClipboard;

package/src/hooks/ClipBoard/ClipboardUnifiedDemo.tsx

@@ -1,111 +0,0 @@
-// ClipboardUnifiedDemo.tsx
-import React from 'react';
-import { Button, Table, TableBody, TableCell, TableRow, Paper, Stack, Typography, Box, TableContainer, TableHead } from '@mui/material';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { useClipboard } from './ClipBoard'; 
-
-// Datos de ejemplo para la tabla (Modo Función)
-const mockData = [
-  { id: 1, content: 'dato-A-456' },
-  { id: 2, content: 'dato-B-789' },
-];
-
-/**
- * Componente Wrapper para demostrar ambos modos de uso del hook useClipboard unificado.
- * @param {object} args - Propiedades del Snackbar que se pasan al hook.
- */
-interface ClipboardDemoProps {
-  message: string;
-  severity: 'success' | 'info' | 'warning' | 'error';
-  duration: number;
-  vertical: 'top' | 'bottom';
-  horizontal: 'left' | 'center' | 'right';
-}
-
-const ClipboardUnifiedDemo: React.FC<ClipboardDemoProps> = ({ message, severity, duration, vertical, horizontal }) => {
-  const options = {
-    message,
-    severity,
-    duration,
-    position: { vertical, horizontal } as const // 'as const' para tipado correcto
-  };
-  
-  // 1. Llamada al hook para el MODO FUNCIÓN (se usará 'copy' y 'CopyMessage')
-  const { copy, CopyMessage } = useClipboard(options);
-  
-  // 2. Llamada al hook para el MODO REF (se usará 'ref' y 'CopyMessageRef')
-  // Nota: Creamos una segunda instancia con opciones distintas para diferenciar el feedback
-  const { ref: refModeRef, CopyMessage: CopyMessageRef } = useClipboard({
-    ...options, 
-    message: options.message + ' (MODO REF)', 
-    severity: 'warning' // Diferenciamos el color
-  });
-  
-  return (
-    <Stack spacing={4} sx={{ width: '100%', minWidth: 500, p: 3 }}>
-        <Typography variant="h5">Hook Unificado: Ref vs. Función</Typography>
-        
-        {/* ========================================= */}
-        {/* A. MODO REF (Copia el innerText por clic) */}
-        {/* ========================================= */}
-        <Box>
-            <Typography variant="h6">1. MODO REF (Copia un solo elemento por clic)</Typography>
-            <Paper 
-                sx={{
-                    p: 2, mt: 1,
-                    border: '1px solid #ccc',
-                    borderRadius: '8px',
-                    backgroundColor: '#eef',
-                    cursor: 'pointer',
-                    '&:hover': { backgroundColor: '#dde' },
-                }}
-            >
-                {/* Adjuntamos la ref. El hook maneja el evento de clic */}
-                <Typography ref={refModeRef} variant="body1" sx={{ userSelect: 'none' }}>
-                    Texto para copiar con **REF**: Esta línea contiene el texto completo.
-                </Typography>
-                <ContentCopyIcon sx={{ fontSize: 16, ml: 1, verticalAlign: 'middle', color: 'text.secondary' }} />
-            </Paper>
-            <CopyMessageRef /> {/* Su propio Snackbar */}
-        </Box>
-        
-        {/* ========================================= */}
-        {/* B. MODO FUNCIÓN (Copia en Iteración) */}
-        {/* ========================================= */}
-        <Box>
-            <Typography variant="h6">2. MODO FUNCIÓN (Copia múltiples elementos en tabla)</Typography>
-            <TableContainer component={Paper}>
-                <Table size="small">
-                    <TableHead>
-                        <TableRow><TableCell>ID</TableCell><TableCell>Contenido</TableCell><TableCell>Acción</TableCell></TableRow>
-                    </TableHead>
-                    <TableBody>
-                        {/* Iteración: Se usa la función 'copy' */}
-                        {mockData.map((item) => (
-                            <TableRow key={item.id}>
-                                <TableCell>{item.id}</TableCell>
-                                <TableCell>{item.content}</TableCell>
-                                <TableCell>
-                                    <Button 
-                                        variant="contained" 
-                                        size="small"
-                                        // Llamada a copy() con el texto específico de la fila
-                                        onClick={() => copy(item.content)}
-                                    >
-                                        Copiar {item.id}
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-        </Box>
-
-        {/* El Snackbar del modo FUNCIÓN se renderiza una sola vez */}
-        <CopyMessage /> 
-    </Stack>
-  );
-};
-
-export default ClipboardUnifiedDemo;

package/src/hooks/ClipBoard/index.ts

@@ -1 +0,0 @@
-export { default as useClipboard } from './ClipBoard';

package/src/index.ts

@@ -1 +0,0 @@
-import './styles.css';

package/src/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;