@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

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

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,131 @@
+// 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

@@ -0,0 +1,111 @@
+// 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

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

package/src/index.ts

@@ -0,0 +1,51 @@
+import './styles.css';
+
+// ── Sistema de presets de estilos (theme.styles) ─────────────────────────
+export type {
+  LibraryComponentName,
+  PresetStyle,
+  ComponentPresets,
+  LibraryStyles,
+} from './theme/componentStyles';
+export { DEFAULT_PRESET_NAME, resolvePreset } from './components/_shared/resolvePreset';
+import './theme/componentStyles';
+
+// ── Utilidades compartidas ────────────────────────────────────────────────
+export * from './utils';
+
+// ── Pass-through de MUI (punto de entrada único para el consumer) ─────────
+// Regla: el consumer nunca importa de '@mui/material'. Todo viene de acá.
+export * from './mui';
+
+// ── Components ────────────────────────────────────────────────────────────
+export { Button } from './components/Button';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Chip } from './components/Chip';
+export { Column } from './components/Column';
+export type { ColumnProps } from './components/Column';
+export { Avatar } from './components/Avatar';
+export { Stat } from './components/Stat';
+export { Stepper, Step } from './components/Stepper';
+export { Tabs, Tab } from './components/Tabs';
+export { Table } from './components/Table';
+export { StatusMessage } from './components/StatusMessage';
+export type { StatusMessageProps } from './components/StatusMessage';
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal';
+export type { ModalRef, ModalMode, ModalSeverity } from './components/Modal';
+export { Input } from './components/Input';
+export type { InputProps, BaseInputProps } from './components/Input';
+export { Select, Option } from './components/Select';
+export type { SelectProps, SelectOption, OptionProps } from './components/Select';
+export { Autocomplete, AutocompleteSelect } from './components/Autocomplete';
+export type { AutocompleteProps } from './components/Autocomplete';
+export { Switch } from './components/Switch';
+export type { SwitchProps, BaseSwitchProps } from './components/Switch';
+export { RadioGroup } from './components/RadioGroup';
+export type { RadioGroupProps, RadioOption, BaseRadioGroupProps } from './components/RadioGroup';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps, BaseCheckboxProps } from './components/Checkbox';
+export { DatePicker } from './components/DatePicker';
+export type { DatePickerProps } from './components/DatePicker';
+export { DateTimePicker } from './components/DateTimePicker';
+export type { DateTimePickerProps } from './components/DateTimePicker';

package/src/mui.ts

@@ -0,0 +1,57 @@
+// -----------------------------------------------------------------------------
+// Pass-through puro de primitivos de MUI.
+//
+// Regla para el consumer: si está en `@soyfri/shared-library`, impórtalo desde
+// acá. NUNCA directamente desde `@mui/material`. Esto nos da un único punto de
+// entrada y facilita un eventual cambio de librería base.
+//
+// Este archivo NO wrappea nada — solo re-exporta. Si se necesita otro
+// primitivo, agregar la línea correspondiente.
+// -----------------------------------------------------------------------------
+
+// ── Layout primitives ────────────────────────────────────────────────────
+export {
+  Box,
+  Stack,
+  Grid,
+  Container,
+  Paper,
+  Divider,
+} from '@mui/material';
+
+// ── Tipografía ────────────────────────────────────────────────────────────
+export { Typography, Link } from '@mui/material';
+
+// ── Listas ────────────────────────────────────────────────────────────────
+export {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+} from '@mui/material';
+
+// ── Feedback / misc ───────────────────────────────────────────────────────
+export {
+  CircularProgress,
+  LinearProgress,
+  Skeleton,
+  Alert,
+  AlertTitle,
+  Snackbar,
+  Backdrop,
+  Fade,
+  Grow,
+  Zoom,
+  Collapse,
+} from '@mui/material';
+
+// ── Hooks y utilidades de tema ───────────────────────────────────────────
+export { useTheme, useMediaQuery, alpha, styled, createTheme, ThemeProvider } from '@mui/material';
+
+// ── Tipos más usados ──────────────────────────────────────────────────────
+export type { SxProps, Theme } from '@mui/material/styles';
+
+// ── Date pickers: time view renderers ─────────────────────────────────────
+export { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';

package/src/styles.css

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

package/src/theme/componentStyles.ts

@@ -0,0 +1,50 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+/**
+ * Lista de componentes del paquete que soportan presets registrables en el
+ * theme. Si en el futuro se agrega otro componente al sistema, se extiende
+ * esta union.
+ */
+export type LibraryComponentName =
+  | 'Input'
+  | 'Select'
+  | 'Autocomplete'
+  | 'DatePicker'
+  | 'DateTimePicker'
+  | 'Drawer'
+  | 'AppBar'
+  | 'Card'
+  | 'RadioGroup'
+  | 'Switch'
+  | 'Checkbox'
+  | 'Gallery';
+
+/**
+ * Un estilo de preset. Puede ser un objeto sx directo o una función del theme
+ * para acceder a palette/typography/etc.
+ */
+export type PresetStyle = SxProps<Theme> | ((theme: Theme) => SxProps<Theme>);
+
+/**
+ * Map de presets disponibles para un componente. Las keys son nombres libres
+ * elegidos por el consumidor (p.ej. `reddit`, `compact-filled`). El paquete
+ * no registra ninguna entrada: `preset="default"` significa "usar el estilo
+ * built-in de fábrica" y no requiere registro.
+ */
+export type ComponentPresets = Record<string, PresetStyle>;
+
+/**
+ * Shape del namespace `theme.styles` — un map de componentes del paquete a
+ * sus presets registrados.
+ */
+export type LibraryStyles = Partial<Record<LibraryComponentName, ComponentPresets>>;
+
+// ── Module augmentation de MUI ───────────────────────────────────────────
+declare module '@mui/material/styles' {
+  interface Theme {
+    styles: LibraryStyles;
+  }
+  interface ThemeOptions {
+    styles?: LibraryStyles;
+  }
+}

package/src/theme/tokens.ts

@@ -0,0 +1,43 @@
+/**
+ * Design tokens compartidos por los componentes de formulario
+ * (Input, Select, Autocomplete, DatePicker, DateTimePicker).
+ *
+ * Centralizar estos valores garantiza que:
+ * - el espaciado, la tipografía y las animaciones del label sean idénticos
+ *   en todos los campos;
+ * - un cambio visual global (p.ej. cambiar el transform del shrink) se haga
+ *   en un único archivo.
+ */
+
+// ── Spacing ──────────────────────────────────────────────────────────────
+/** Margen superior que deja el aire para el label flotante "outside". */
+export const LABEL_MARGIN_TOP = '14px';
+
+/** Padding vertical interno del input (TextField/Select/Picker sections). */
+export const FIELD_INPUT_PADDING_Y = '8.5px';
+
+// ── Label animation ──────────────────────────────────────────────────────
+/** Transform que aplica el label cuando sube arriba del input (shrink). */
+export const LABEL_SHRINK_TRANSFORM = 'translate(4px, -22px) scale(0.85)';
+
+/** Origen del transform para el shrink. */
+export const LABEL_TRANSFORM_ORIGIN = 'top left';
+
+/** Transición del label (color + transform + max-width). */
+export const LABEL_TRANSITION =
+  'color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +
+  'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +
+  'max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';
+
+// ── Label colors (theme-aware) ───────────────────────────────────────────
+/** Color del label en reposo. */
+export const LABEL_COLOR_REST = 'text.secondary';
+
+/** Color del label cuando el campo tiene valor (shrink). */
+export const LABEL_COLOR_FILLED = 'text.primary';
+
+/** Color del label cuando el campo está focused. */
+export const LABEL_COLOR_FOCUSED = 'primary.main';
+
+/** Peso del label cuando sube (filled/focused). */
+export const LABEL_FONT_WEIGHT_FILLED = 500;

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { scrollToTop } from './scrollToTop';
+export type { ScrollToTopOptions } from './scrollToTop';

package/src/utils/scrollToTop.ts

@@ -0,0 +1,36 @@
+export interface ScrollToTopOptions {
+  /** Comportamiento del scroll. Default: `'smooth'`. */
+  behavior?: ScrollBehavior;
+  /**
+   * Elemento target del scroll. Default: `window`. Útil cuando el contenedor
+   * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).
+   */
+  target?: Window | HTMLElement;
+  /** Offset desde el top. Default: `0`. */
+  top?: number;
+}
+
+/**
+ * Hace scroll al tope (por default con animación suave). Safe en SSR — si
+ * `window` no existe, es un no-op.
+ *
+ * Llamar tras mutaciones / cambios de filtros / apertura de modales para
+ * asegurar que el usuario vea el mensaje de confirmación en la parte
+ * superior de la página.
+ *
+ * ```ts
+ * import { scrollToTop } from '@soyfri/shared-library';
+ *
+ * scrollToTop();                                  // window, smooth
+ * scrollToTop({ behavior: 'auto' });              // window, instantáneo
+ * scrollToTop({ target: myScrollableRef.current }); // container custom
+ * ```
+ */
+export function scrollToTop({
+  behavior = 'smooth',
+  target = typeof window !== 'undefined' ? window : undefined,
+  top = 0,
+}: ScrollToTopOptions = {}): void {
+  if (!target) return;
+  target.scrollTo({ top, left: 0, behavior });
+}

package/storybook-static/assets/AccountCircle-BDZFsbTw.js

@@ -0,0 +1 @@
+import{j as c}from"./jsx-runtime-D_zvdyIk.js";import{c as o}from"./createSvgIcon-D_Gca4vA.js";const r=o(c.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20"}));export{r as A};