@soyfri/shared-library 2.0.0-beta.4 → 2.0.0-beta.6

package/Dockerfile

@@ -1,37 +0,0 @@
-# Use a specific Node.js version for the build environment.
-FROM node:20-alpine AS builder
-
-# Set the working directory in the container.
-WORKDIR /usr/src/app
-
-# Copy package.json and package-lock.json to leverage Docker's layer caching.
-# This step is cached and only re-runs if package*.json files change.
-COPY package*.json ./
-
-# Install project dependencies.
-RUN npm install
-
-# Copy the rest of your application's source code.
-COPY . .
-
-# Run the build script to create the distribution files.
-RUN npm run build --if-present
-
-RUN npm run dist --if-present
-
-# --- Final Stage: Create a lightweight image with only the build artifacts ---
-# Use a minimal base image. 'scratch' is the smallest, 'alpine' is also a good choice.
-FROM scratch
-
-# Set the working directory to the root of your library.
-WORKDIR /usr/src/app
-
-# Copy the built files from the 'builder' stage.
-COPY --from=builder /usr/src/app/dist ./dist
-
-# The final image contains only the 'dist' directory.
-# There is no need for EXPOSE or CMD as this is a component library, not a runnable application.
-
-# You can add a LABEL to describe the image if needed.
-LABEL maintainer="Your Name"
-LABEL version="1.0"

package/Readme.md

@@ -1,243 +0,0 @@
-# @soyfri/shared-library
-
-Una librería de componentes React reutilizables construida con Material-UI, TypeScript y Tailwind CSS, diseñada para proporcionar componentes UI consistentes y bien documentados.
-
-## 📋 Tabla de Contenidos
-
-- [Características](#características)
-- [Instalación](#instalación)
-- [Uso](#uso)
-- [Componentes Disponibles](#componentes-disponibles)
-- [Desarrollo](#desarrollo)
-- [Scripts Disponibles](#scripts-disponibles)
-- [Storybook](#storybook)
-- [Testing](#testing)
-- [Tecnologías](#tecnologías)
-- [Estructura del Proyecto](#estructura-del-proyecto)
-
-## ✨ Características
-
-- 🎨 **Componentes tipados**: Todos los componentes están construidos con TypeScript para mayor seguridad de tipos
-- 📚 **Documentación con Storybook**: Cada componente incluye historias interactivas y documentación
-- 🎯 **Material-UI**: Basado en Material-UI para un diseño consistente y accesible
-- 🌈 **Tailwind CSS**: Integración con Tailwind para estilos utilitarios
-- 🧪 **Testing**: Configurado con Vitest y Playwright para testing de componentes
-- 📦 **Build optimizado**: Configuración con Rollup para generar builds ESM y CommonJS
-
-## 📦 Instalación
-
-```bash
-npm install @soyfri/shared-library
-```
-
-## 🚀 Uso
-
-```tsx
-import { Button, Table, Select } from '@soyfri/shared-library';
-import '@soyfri/shared-library/dist/styles.css';
-
-function App() {
-  return (
-    <div>
-      <Button variant="contained" color="primary">
-        Mi Botón
-      </Button>
-    </div>
-  );
-}
-```
-
-## 🧩 Componentes Disponibles
-
-### Button
-Componente de botón personalizable basado en Material-UI con soporte para iconos, diferentes tamaños y estados.
-
-**Características:**
-- Variantes: `text`, `outlined`, `contained`
-- Tamaños: `small`, `medium`, `large`
-- Soporte para iconos de inicio y fin
-- Estados de carga
-- Completamente tipado
-
-### Table
-Componente de tabla flexible con paginación interna y externa, ordenamiento y renderizado personalizado de columnas.
-
-**Características:**
-- Paginación interna automática
-- Paginación externa controlada
-- Columnas personalizables con renderizado custom
-- Soporte para componentes complejos en celdas
-- Completamente tipado con generics
-
-### Select
-Componente select avanzado con soporte para selección múltiple, filtros, agrupación y renderizado personalizado.
-
-**Características:**
-- Selección simple y múltiple
-- Filtrado de opciones
-- Agrupación de opciones
-- Renderizado personalizado con avatars
-- Placeholder configurable
-
-### Avatar
-Componente para mostrar avatares de usuarios con soporte para imágenes y texto.
-
-### Icon
-Wrapper para iconos de Material-UI con propiedades consistentes.
-
-### Stat
-Componente para mostrar estadísticas con diferentes plantillas de visualización.
-
-**Características:**
-- Plantilla simple
-- Plantilla con chip
-- Plantilla con lista de chips
-- Colores personalizables
-
-### Column
-Componente auxiliar para definir columnas en el componente Table.
-
-## 🛠️ Desarrollo
-
-### Prerrequisitos
-
-- Node.js (versión 18 o superior)
-- npm o yarn
-
-### Configuración del entorno de desarrollo
-
-1. Clona el repositorio:
-```bash
-git clone <repository-url>
-cd shared-library
-```
-
-2. Instala las dependencias:
-```bash
-npm install
-```
-
-3. Inicia el entorno de desarrollo:
-```bash
-npm run dev
-```
-
-## 📜 Scripts Disponibles
-
-- `npm run build` - Construye la librería para producción
-- `npm run dev` - Inicia el modo de desarrollo con watch
-- `npm run build:css` - Construye los estilos CSS
-- `npm run watch:css` - Observa cambios en los estilos CSS
-- `npm run clean` - Limpia la carpeta dist
-- `npm run prepare` - Limpia y construye la librería
-- `npm run storybook` - Inicia Storybook en modo desarrollo
-- `npm run build-storybook` - Construye Storybook para producción
-- `npm run dist` - Ejecuta el script de distribución personalizado
-
-## 📚 Storybook
-
-La librería incluye Storybook para documentación interactiva y desarrollo de componentes.
-
-### Iniciar Storybook
-
-```bash
-npm run storybook
-```
-
-Esto abrirá Storybook en `http://localhost:6006` donde podrás:
-
-- Ver todos los componentes disponibles
-- Interactuar con las propiedades de cada componente
-- Ver ejemplos de uso
-- Acceder a la documentación detallada
-
-### Construir Storybook
-
-```bash
-npm run build-storybook
-```
-
-## 🧪 Testing
-
-La librería está configurada con Vitest y Playwright para testing de componentes.
-
-### Configuración de Testing
-
-- **Vitest**: Para unit tests y testing de componentes
-- **Playwright**: Para testing de browser
-- **Storybook Test Addon**: Para testing de historias de Storybook
-
-## 🔧 Tecnologías
-
-### Dependencias Principales
-
-- **React 19.1.0**: Librería de UI
-- **Material-UI 7.1.0**: Sistema de diseño y componentes
-- **TypeScript 5.8.3**: Tipado estático
-- **Tailwind CSS 4.1.7**: Framework de CSS utilitario
-
-### Herramientas de Desarrollo
-
-- **Storybook 9.0.8**: Documentación y desarrollo de componentes
-- **Rollup**: Bundler para la construcción de la librería
-- **Vitest**: Framework de testing
-- **Playwright**: Testing de browser
-- **Prettier**: Formateo de código
-
-## 📁 Estructura del Proyecto
-
-```
-shared-library/
-├── .storybook/          # Configuración de Storybook
-├── src/
-│   ├── components/      # Componentes de la librería
-│   │   ├── Avatar/
-│   │   ├── Button/
-│   │   ├── Column/
-│   │   ├── Icon/
-│   │   ├── Select/
-│   │   ├── Stat/
-│   │   └── Table/
-│   ├── index.ts         # Punto de entrada principal
-│   └── styles.css       # Estilos globales
-├── dist/                # Archivos construidos
-├── package.json
-├── tsconfig.json
-├── tailwind.config.js
-├── rollup.config.cjs
-└── vitest.config.ts
-```
-
-### Estructura de Componentes
-
-Cada componente sigue una estructura consistente:
-
-```
-ComponentName/
-├── ComponentName.tsx        # Implementación del componente
-├── ComponentName.stories.tsx # Historias de Storybook
-├── ComponentName.definition.ts # Definiciones de código (opcional)
-├── index.ts                 # Exportaciones
-└── types.ts                 # Tipos específicos (opcional)
-```
-
-## 🤝 Contribución
-
-Para contribuir al proyecto:
-
-1. Fork el repositorio
-2. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`)
-3. Commit tus cambios (`git commit -am 'Agrega nueva funcionalidad'`)
-4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
-5. Crea un Pull Request
-
-## 📄 Licencia
-
-ISC License
-
----
-
-**Versión actual:** 1.0.1
-
-Para más información y ejemplos detallados, consulta la documentación en Storybook ejecutando `npm run storybook`.
-        

package/build.js

@@ -1,102 +0,0 @@
-import { readFileSync, existsSync, mkdirSync, writeFileSync, copyFileSync } from 'fs';
-import { join, basename } from 'path';
-import { sync } from 'glob';
-
-const projectRoot = process.cwd();
-const srcComponentsDir = join(projectRoot, 'src', 'components');
-const srcHooksDir = join(projectRoot, 'src', 'hooks');
-const distDir = join(projectRoot, 'dist');
-const distComponentsDir = join(distDir, 'components');
-const distHooksDir = join(distDir, 'hooks');
-const originalPackageJsonPath = join(projectRoot, 'package.json');
-const distPackageJsonPath = join(distDir, 'package.json');
-const readmePath = join(projectRoot, 'README.md');
-
-// Leer el package.json original
-const originalPackageJson = JSON.parse(readFileSync(originalPackageJsonPath, 'utf8'));
-
-// Inicializar el nuevo objeto exports
-let newExports = {
-  ".": {
-    "import": "./index.js",
-    "require": "./index.cjs",
-    "types": "./index.d.ts"
-  },
-  "./package.json": "./package.json"
-};
-
-// Función para procesar directorios de forma condicional y crear entradas en exports
-const processDirectories = (sourceDir, distDir, exportPrefix) => {
-  if (!existsSync(sourceDir)) {
-    console.log(`Directorio no encontrado: ${sourceDir}. Saltando.`);
-    return;
-  }
-  
-  if (!existsSync(distDir)) {
-    mkdirSync(distDir, { recursive: true });
-  }
-
-  const componentDirs = sync(`${sourceDir}/*/`);
-  
-  console.log(`Buscando módulos en: ${sourceDir}`);
-  
-  componentDirs.forEach(componentDirPath => {
-    const componentName = basename(componentDirPath);
-    
-    // Verificar si el nombre de la carpeta tiene la inicial en mayúscula
-    if (!/^[A-Z]/.test(componentName)) {
-      console.log(`  - Saltando '${componentName}' porque su carpeta no empieza con mayúscula.`);
-      return; // Saltar este componente
-    }
-
-    console.log(`  - Módulo encontrado: ${componentName}`);
-    
-    // Crear carpeta en dist
-    const distModuleFolder = join(distDir, componentName);
-    if (!existsSync(distModuleFolder)) {
-      mkdirSync(distModuleFolder, { recursive: true });
-    }
-
-    // Agregar entrada al objeto exports
-    const exportPath = `./${exportPrefix}/${componentName}`;
-    newExports[exportPath] = {
-      "import": `./${exportPrefix}/${componentName}/${componentName}.js`,
-      "require": `./${exportPrefix}/${componentName}/${componentName}.cjs`,
-      "types": `./${exportPrefix}/${componentName}/${componentName}.d.ts`
-    };
-  });
-};
-
-// Procesar componentes
-processDirectories(srcComponentsDir, distComponentsDir, 'components');
-
-// Procesar hooks
-processDirectories(srcHooksDir, distHooksDir, 'hooks');
-
-// Crear una copia del package.json original para dist
-const distPackageJson = { ...originalPackageJson };
-distPackageJson.exports = newExports;
-
-// Eliminar propiedades innecesarias
-delete distPackageJson.scripts;
-delete distPackageJson.devDependencies;
-delete distPackageJson.private;
-
-// Asegurarse de que el directorio 'dist' exista
-if (!existsSync(distDir)) {
-  mkdirSync(distDir, { recursive: true });
-}
-
-// Copiar README.md a la carpeta dist
-if (existsSync(readmePath)) {
-  copyFileSync(readmePath, join(distDir, 'README.md'));
-  console.log('Copiando README.md a la carpeta dist.');
-} else {
-  console.log('No se encontró README.md en la raíz del proyecto. Saltando.');
-}
-
-// Escribir el nuevo package.json en dist/
-writeFileSync(distPackageJsonPath, JSON.stringify(distPackageJson, null, 2), 'utf8');
-
-console.log(`\n'package.json' generado exitosamente en: ${distPackageJsonPath}`);
-console.log('Contenido de la propiedad "exports":', JSON.stringify(newExports, null, 2));

package/chromatic.config.json

@@ -1,5 +0,0 @@
-{
-  "onlyChanged": true,
-  "projectId": "Project:6836406d3794ebfc4012fb25",
-  "zip": true
-}

package/cleanDirectories.js

@@ -1,40 +0,0 @@
-import { promises as fs } from 'fs';
-import { join } from 'path';
-
-// Define the folders to be cleaned (sub-folders will be deleted)
-const foldersToClean = ['components', 'hooks'];
-const srcPath = join(process.cwd(), 'src');
-
-const deleteLowercaseFolders = async () => {
-  console.log('Iniciando el proceso de eliminación de carpetas...');
-  
-  for (const parentFolder of foldersToClean) {
-    const parentPath = join(srcPath, parentFolder);
-
-    if (!await fs.stat(parentPath).catch(() => false)) {
-      console.log(`Directorio padre no encontrado: ${parentPath}. Saltando.`);
-      continue;
-    }
-
-    try {
-      // Leer el contenido del directorio padre y obtener información de los archivos
-      const entries = await fs.readdir(parentPath, { withFileTypes: true });
-
-      for (const entry of entries) {
-        // Check if the entry is a directory and its name starts with a lowercase letter.
-        if (entry.isDirectory() && /^[a-z]/.test(entry.name)) {
-          const folderPath = join(parentPath, entry.name);
-          await fs.rm(folderPath, { recursive: true, force: true });
-          console.log(`- Carpeta eliminada: ${folderPath}`);
-        }
-      }
-    } catch (error) {
-      console.error(`Error al procesar el directorio ${parentPath}:`, error);
-    }
-  }
-
-  console.log('Proceso de limpieza completado.');
-};
-
-// Execute the main function
-deleteLowercaseFolders();

package/dist/components/Drawer/Drawer.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/DrawerContext.ts","../../../src/components/Drawer/Drawer.sx.ts","../../../src/components/Drawer/Drawer.tsx","../../../src/components/Drawer/DrawerItem.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Context interno del Drawer. Permite que los sub-componentes (DrawerItem,\n * DrawerSection, etc.) reaccionen al estado `collapsed` sin necesidad de\n * recibirlo por props explícitas.\n */\nexport interface DrawerContextValue {\n  /** Si el drawer está en modo mini (solo iconos). */\n  collapsed: boolean;\n  /** Ancho actual del drawer (útil para sub-componentes que necesiten layout). */\n  width: number;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue | null>(null);\n\n/**\n * Hook para leer el estado del drawer desde cualquier sub-componente. Si se\n * llama fuera de un `<Drawer>`, devuelve valores por defecto (collapsed=false)\n * para que los items renderizados sueltos no exploten.\n */\nexport function useDrawerContext(): DrawerContextValue {\n  const ctx = useContext(DrawerContext);\n  if (ctx) return ctx;\n  return { collapsed: false, width: 260 };\n}\n","import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildDrawerSxArgs {\n  /** Ancho actual del drawer (expanded o collapsed). */\n  width: number;\n  /** Duración de la transición de ancho en ms. */\n  transitionDuration?: number;\n}\n\n/**\n * sx aplicado al root del MuiDrawer. Controla el ancho animado y el paper\n * interno. Los estilos visuales del paper (background, border) se dejan en\n * manos del theme / preset.\n */\nexport function buildDrawerSx({\n  width,\n  transitionDuration = 200,\n}: BuildDrawerSxArgs): SxProps<Theme> {\n  return {\n    width,\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    boxSizing: 'border-box',\n    transition: (theme) =>\n      theme.transitions.create('width', {\n        easing: theme.transitions.easing.sharp,\n        duration: transitionDuration,\n      }),\n    '& .MuiDrawer-paper': {\n      width,\n      boxSizing: 'border-box',\n      overflowX: 'hidden',\n      transition: (theme) =>\n        theme.transitions.create('width', {\n          easing: theme.transitions.easing.sharp,\n          duration: transitionDuration,\n        }),\n    },\n  };\n}\n\nexport interface BuildDrawerItemSxArgs {\n  collapsed: boolean;\n  active?: boolean;\n  danger?: boolean;\n}\n\n/**\n * sx para un item del drawer. Centra el icono cuando está colapsado y\n * tiñe el fondo cuando el item está activo.\n */\nexport function buildDrawerItemSx({\n  collapsed,\n  active,\n  danger,\n}: BuildDrawerItemSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    minHeight: 44,\n    px: collapsed ? 1 : 2,\n    py: 1,\n    mx: 1,\n    my: 0.25,\n    borderRadius: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: collapsed ? 'center' : 'flex-start',\n    gap: collapsed ? 0 : 1.5,\n    cursor: 'pointer',\n    color: danger\n      ? theme.palette.error.main\n      : active\n        ? theme.palette.primary.main\n        : theme.palette.text.primary,\n    backgroundColor: active\n      ? theme.palette.action.selected\n      : 'transparent',\n    transition: theme.transitions.create(\n      ['background-color', 'color', 'padding'],\n      { duration: 150 },\n    ),\n    '&:hover': {\n      backgroundColor: danger\n        ? theme.palette.error.light + '22'\n        : theme.palette.action.hover,\n    },\n    '& .drawer-item__icon': {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 24,\n    },\n    '& .drawer-item__label': {\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      opacity: collapsed ? 0 : 1,\n      width: collapsed ? 0 : 'auto',\n      transition: theme.transitions.create(['opacity', 'width'], {\n        duration: collapsed ? 100 : 200,\n      }),\n    },\n  });\n}\n","import React, { useMemo, type ReactNode } from 'react';\nimport {\n  Drawer as MuiDrawer,\n  IconButton,\n  Box,\n  type DrawerProps as MuiDrawerProps,\n} from '@mui/material';\nimport {\n  useTheme,\n  type SxProps,\n  type Theme,\n} from '@mui/material/styles';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\nimport { DrawerContext } from './DrawerContext';\nimport { buildDrawerSx } from './Drawer.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos públicos ──────────────────────────────────────────────────────\nexport type DrawerVariant = 'permanent' | 'persistent' | 'temporary';\nexport type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface DrawerProps {\n  /** Contenido del drawer (típicamente `<DrawerItem>`s). */\n  children?: ReactNode;\n  /**\n   * Variante del drawer:\n   * - `permanent` (default): siempre visible en desktop, soporta collapsed (mini).\n   * - `persistent`: se oculta/muestra, empuja el contenido principal.\n   * - `temporary`: flotante con backdrop (típico móvil).\n   */\n  variant?: DrawerVariant;\n  /** Lado del viewport. Default: `'left'`. */\n  anchor?: DrawerAnchor;\n  /**\n   * Estado mini (solo iconos). Solo se aplica con `variant=\"permanent\"` o\n   * `\"persistent\"`. Si no se provee, el drawer está siempre expandido.\n   */\n  collapsed?: boolean;\n  /** Callback del botón de toggle (chevron). */\n  onToggleCollapse?: () => void;\n  /** Estado abierto/cerrado (aplica a `temporary` y `persistent`). */\n  open?: boolean;\n  /** Callback de cierre (backdrop o ESC en temporary). */\n  onClose?: MuiDrawerProps['onClose'];\n  /** Ancho en estado expandido. Default: 260. */\n  expandedWidth?: number;\n  /** Ancho en estado colapsado (solo iconos). Default: 72. */\n  collapsedWidth?: number;\n  /** Muestra el botón chevron para toggle collapsed. Default: true si `onToggleCollapse` está definido. */\n  showCollapseButton?: boolean;\n  /** Contenido del header (por encima de los items). Típicamente logo/brand. */\n  header?: ReactNode;\n  /** Contenido del footer (por debajo de los items). Típicamente user profile. */\n  footer?: ReactNode;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.Drawer`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   */\n  preset?: string;\n  /** sx aplicado al Drawer (root). Se mergea después del preset. */\n  sx?: SxProps<Theme>;\n  /** sx aplicado al Paper interno. */\n  paperSx?: SxProps<Theme>;\n  className?: string;\n}\n\nexport function Drawer({\n  children,\n  variant = 'permanent',\n  anchor = 'left',\n  collapsed = false,\n  onToggleCollapse,\n  open,\n  onClose,\n  expandedWidth = 260,\n  collapsedWidth = 72,\n  showCollapseButton,\n  header,\n  footer,\n  preset,\n  sx,\n  paperSx,\n  className,\n}: DrawerProps) {\n  const theme = useTheme();\n  const presetSx = resolvePreset('Drawer', preset, theme);\n\n  // El mini-variant solo tiene sentido en permanent / persistent.\n  const supportsCollapsed = variant !== 'temporary';\n  const effectiveWidth =\n    supportsCollapsed && collapsed ? collapsedWidth : expandedWidth;\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: supportsCollapsed && collapsed,\n      width: effectiveWidth,\n    }),\n    [supportsCollapsed, collapsed, effectiveWidth],\n  );\n\n  const rootSx: SxProps<Theme> = [\n    buildDrawerSx({ width: effectiveWidth }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const shouldShowToggle =\n    showCollapseButton ?? (supportsCollapsed && !!onToggleCollapse);\n\n  const openProp =\n    variant === 'permanent'\n      ? true\n      : open !== undefined\n        ? open\n        : false;\n\n  return (\n    <DrawerContext.Provider value={contextValue}>\n      <MuiDrawer\n        variant={variant}\n        anchor={anchor}\n        open={openProp}\n        onClose={onClose}\n        className={className}\n        sx={rootSx}\n        PaperProps={{\n          sx: paperSx,\n        }}\n      >\n        {header && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'space-between',\n              px: contextValue.collapsed ? 1 : 2,\n              py: 1.5,\n              minHeight: 64,\n              flexShrink: 0,\n            }}\n          >\n            {!contextValue.collapsed && (\n              <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>\n            )}\n            {shouldShowToggle && (\n              <IconButton\n                size=\"small\"\n                onClick={onToggleCollapse}\n                aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}\n              >\n                {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n              </IconButton>\n            )}\n          </Box>\n        )}\n\n        {!header && shouldShowToggle && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'flex-end',\n              px: 1,\n              py: 1,\n            }}\n          >\n            <IconButton\n              size=\"small\"\n              onClick={onToggleCollapse}\n              aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}\n            >\n              {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n            </IconButton>\n          </Box>\n        )}\n\n        <Box\n          component=\"nav\"\n          sx={{\n            flex: 1,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n            py: 1,\n          }}\n        >\n          {children}\n        </Box>\n\n        {footer && (\n          <Box\n            sx={{\n              flexShrink: 0,\n              borderTop: (t) => `1px solid ${t.palette.divider}`,\n              p: contextValue.collapsed ? 1 : 1.5,\n              display: 'flex',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'flex-start',\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </MuiDrawer>\n    </DrawerContext.Provider>\n  );\n}\n\nexport default Drawer;\n","import React, { type ReactNode, type MouseEvent } from 'react';\nimport { Box, Tooltip, Typography } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { useDrawerContext } from './DrawerContext';\nimport { buildDrawerItemSx } from './Drawer.sx';\n\nexport interface DrawerItemProps {\n  /** Icono del item. Se muestra siempre (expanded y collapsed). */\n  icon?: ReactNode;\n  /** Texto del item. Se oculta cuando el drawer está colapsado (muestra tooltip). */\n  label: ReactNode;\n  /** Handler de click. */\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void;\n  /** Marca el item como activo (destaca color y fondo). */\n  active?: boolean;\n  /** Marca el item como \"destructivo\" (p.ej. cerrar sesión): color error. */\n  danger?: boolean;\n  /** Deshabilita click + bajo opacidad. */\n  disabled?: boolean;\n  /** Contenido adicional a la derecha del label (badge, count, chevron). */\n  endAdornment?: ReactNode;\n  /** sx override del consumer, se mergea al final. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Item de un Drawer de shared-library. Lee el estado `collapsed` del\n * DrawerContext para adaptar layout y mostrar tooltip en modo mini.\n *\n * Uso típico:\n * ```tsx\n * <Drawer collapsed={collapsed} onToggleCollapse={toggle}>\n *   <DrawerItem icon={<HomeIcon />} label=\"Inicio\" active />\n *   <DrawerItem icon={<UserIcon />} label=\"Perfil\" />\n * </Drawer>\n * ```\n */\nexport function DrawerItem({\n  icon,\n  label,\n  onClick,\n  active = false,\n  danger = false,\n  disabled = false,\n  endAdornment,\n  sx,\n  className,\n}: DrawerItemProps) {\n  const { collapsed } = useDrawerContext();\n\n  const baseSx = buildDrawerItemSx({ collapsed, active, danger });\n\n  const mergedSx: SxProps<Theme> = [\n    baseSx,\n    disabled && { pointerEvents: 'none', opacity: 0.5 },\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ].filter(Boolean) as SxProps<Theme>;\n\n  const content = (\n    <Box\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n        }\n      }}\n      className={className}\n      sx={mergedSx}\n    >\n      {icon !== undefined && (\n        <Box className=\"drawer-item__icon\" component=\"span\">\n          {icon}\n        </Box>\n      )}\n      <Typography\n        component=\"span\"\n        variant=\"body2\"\n        className=\"drawer-item__label\"\n        sx={{ fontWeight: active ? 600 : 400 }}\n      >\n        {label}\n      </Typography>\n      {!collapsed && endAdornment && (\n        <Box component=\"span\" sx={{ flexShrink: 0, ml: 'auto' }}>\n          {endAdornment}\n        </Box>\n      )}\n    </Box>\n  );\n\n  // Cuando está colapsado, envolvemos en tooltip para revelar el label al hover.\n  if (collapsed && typeof label === 'string') {\n    return (\n      <Tooltip title={label} placement=\"right\" arrow>\n        {content}\n      </Tooltip>\n    );\n  }\n\n  return content;\n}\n\nexport default DrawerItem;\n"],"names":["createContext","useContext","useTheme","resolvePreset","useMemo","jsx","jsxs","MuiDrawer","Box","IconButton","Typography","Tooltip"],"mappings":"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"}

package/dist/components/Drawer/Drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/DrawerContext.ts","../../../src/components/Drawer/Drawer.sx.ts","../../../src/components/Drawer/Drawer.tsx","../../../src/components/Drawer/DrawerItem.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Context interno del Drawer. Permite que los sub-componentes (DrawerItem,\n * DrawerSection, etc.) reaccionen al estado `collapsed` sin necesidad de\n * recibirlo por props explícitas.\n */\nexport interface DrawerContextValue {\n  /** Si el drawer está en modo mini (solo iconos). */\n  collapsed: boolean;\n  /** Ancho actual del drawer (útil para sub-componentes que necesiten layout). */\n  width: number;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue | null>(null);\n\n/**\n * Hook para leer el estado del drawer desde cualquier sub-componente. Si se\n * llama fuera de un `<Drawer>`, devuelve valores por defecto (collapsed=false)\n * para que los items renderizados sueltos no exploten.\n */\nexport function useDrawerContext(): DrawerContextValue {\n  const ctx = useContext(DrawerContext);\n  if (ctx) return ctx;\n  return { collapsed: false, width: 260 };\n}\n","import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildDrawerSxArgs {\n  /** Ancho actual del drawer (expanded o collapsed). */\n  width: number;\n  /** Duración de la transición de ancho en ms. */\n  transitionDuration?: number;\n}\n\n/**\n * sx aplicado al root del MuiDrawer. Controla el ancho animado y el paper\n * interno. Los estilos visuales del paper (background, border) se dejan en\n * manos del theme / preset.\n */\nexport function buildDrawerSx({\n  width,\n  transitionDuration = 200,\n}: BuildDrawerSxArgs): SxProps<Theme> {\n  return {\n    width,\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    boxSizing: 'border-box',\n    transition: (theme) =>\n      theme.transitions.create('width', {\n        easing: theme.transitions.easing.sharp,\n        duration: transitionDuration,\n      }),\n    '& .MuiDrawer-paper': {\n      width,\n      boxSizing: 'border-box',\n      overflowX: 'hidden',\n      transition: (theme) =>\n        theme.transitions.create('width', {\n          easing: theme.transitions.easing.sharp,\n          duration: transitionDuration,\n        }),\n    },\n  };\n}\n\nexport interface BuildDrawerItemSxArgs {\n  collapsed: boolean;\n  active?: boolean;\n  danger?: boolean;\n}\n\n/**\n * sx para un item del drawer. Centra el icono cuando está colapsado y\n * tiñe el fondo cuando el item está activo.\n */\nexport function buildDrawerItemSx({\n  collapsed,\n  active,\n  danger,\n}: BuildDrawerItemSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    minHeight: 44,\n    px: collapsed ? 1 : 2,\n    py: 1,\n    mx: 1,\n    my: 0.25,\n    borderRadius: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: collapsed ? 'center' : 'flex-start',\n    gap: collapsed ? 0 : 1.5,\n    cursor: 'pointer',\n    color: danger\n      ? theme.palette.error.main\n      : active\n        ? theme.palette.primary.main\n        : theme.palette.text.primary,\n    backgroundColor: active\n      ? theme.palette.action.selected\n      : 'transparent',\n    transition: theme.transitions.create(\n      ['background-color', 'color', 'padding'],\n      { duration: 150 },\n    ),\n    '&:hover': {\n      backgroundColor: danger\n        ? theme.palette.error.light + '22'\n        : theme.palette.action.hover,\n    },\n    '& .drawer-item__icon': {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 24,\n    },\n    '& .drawer-item__label': {\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      opacity: collapsed ? 0 : 1,\n      width: collapsed ? 0 : 'auto',\n      transition: theme.transitions.create(['opacity', 'width'], {\n        duration: collapsed ? 100 : 200,\n      }),\n    },\n  });\n}\n","import React, { useMemo, type ReactNode } from 'react';\nimport {\n  Drawer as MuiDrawer,\n  IconButton,\n  Box,\n  type DrawerProps as MuiDrawerProps,\n} from '@mui/material';\nimport {\n  useTheme,\n  type SxProps,\n  type Theme,\n} from '@mui/material/styles';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\nimport { DrawerContext } from './DrawerContext';\nimport { buildDrawerSx } from './Drawer.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos públicos ──────────────────────────────────────────────────────\nexport type DrawerVariant = 'permanent' | 'persistent' | 'temporary';\nexport type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface DrawerProps {\n  /** Contenido del drawer (típicamente `<DrawerItem>`s). */\n  children?: ReactNode;\n  /**\n   * Variante del drawer:\n   * - `permanent` (default): siempre visible en desktop, soporta collapsed (mini).\n   * - `persistent`: se oculta/muestra, empuja el contenido principal.\n   * - `temporary`: flotante con backdrop (típico móvil).\n   */\n  variant?: DrawerVariant;\n  /** Lado del viewport. Default: `'left'`. */\n  anchor?: DrawerAnchor;\n  /**\n   * Estado mini (solo iconos). Solo se aplica con `variant=\"permanent\"` o\n   * `\"persistent\"`. Si no se provee, el drawer está siempre expandido.\n   */\n  collapsed?: boolean;\n  /** Callback del botón de toggle (chevron). */\n  onToggleCollapse?: () => void;\n  /** Estado abierto/cerrado (aplica a `temporary` y `persistent`). */\n  open?: boolean;\n  /** Callback de cierre (backdrop o ESC en temporary). */\n  onClose?: MuiDrawerProps['onClose'];\n  /** Ancho en estado expandido. Default: 260. */\n  expandedWidth?: number;\n  /** Ancho en estado colapsado (solo iconos). Default: 72. */\n  collapsedWidth?: number;\n  /** Muestra el botón chevron para toggle collapsed. Default: true si `onToggleCollapse` está definido. */\n  showCollapseButton?: boolean;\n  /** Contenido del header (por encima de los items). Típicamente logo/brand. */\n  header?: ReactNode;\n  /** Contenido del footer (por debajo de los items). Típicamente user profile. */\n  footer?: ReactNode;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.Drawer`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   */\n  preset?: string;\n  /** sx aplicado al Drawer (root). Se mergea después del preset. */\n  sx?: SxProps<Theme>;\n  /** sx aplicado al Paper interno. */\n  paperSx?: SxProps<Theme>;\n  className?: string;\n}\n\nexport function Drawer({\n  children,\n  variant = 'permanent',\n  anchor = 'left',\n  collapsed = false,\n  onToggleCollapse,\n  open,\n  onClose,\n  expandedWidth = 260,\n  collapsedWidth = 72,\n  showCollapseButton,\n  header,\n  footer,\n  preset,\n  sx,\n  paperSx,\n  className,\n}: DrawerProps) {\n  const theme = useTheme();\n  const presetSx = resolvePreset('Drawer', preset, theme);\n\n  // El mini-variant solo tiene sentido en permanent / persistent.\n  const supportsCollapsed = variant !== 'temporary';\n  const effectiveWidth =\n    supportsCollapsed && collapsed ? collapsedWidth : expandedWidth;\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: supportsCollapsed && collapsed,\n      width: effectiveWidth,\n    }),\n    [supportsCollapsed, collapsed, effectiveWidth],\n  );\n\n  const rootSx: SxProps<Theme> = [\n    buildDrawerSx({ width: effectiveWidth }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const shouldShowToggle =\n    showCollapseButton ?? (supportsCollapsed && !!onToggleCollapse);\n\n  const openProp =\n    variant === 'permanent'\n      ? true\n      : open !== undefined\n        ? open\n        : false;\n\n  return (\n    <DrawerContext.Provider value={contextValue}>\n      <MuiDrawer\n        variant={variant}\n        anchor={anchor}\n        open={openProp}\n        onClose={onClose}\n        className={className}\n        sx={rootSx}\n        PaperProps={{\n          sx: paperSx,\n        }}\n      >\n        {header && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'space-between',\n              px: contextValue.collapsed ? 1 : 2,\n              py: 1.5,\n              minHeight: 64,\n              flexShrink: 0,\n            }}\n          >\n            {!contextValue.collapsed && (\n              <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>\n            )}\n            {shouldShowToggle && (\n              <IconButton\n                size=\"small\"\n                onClick={onToggleCollapse}\n                aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}\n              >\n                {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n              </IconButton>\n            )}\n          </Box>\n        )}\n\n        {!header && shouldShowToggle && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'flex-end',\n              px: 1,\n              py: 1,\n            }}\n          >\n            <IconButton\n              size=\"small\"\n              onClick={onToggleCollapse}\n              aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}\n            >\n              {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n            </IconButton>\n          </Box>\n        )}\n\n        <Box\n          component=\"nav\"\n          sx={{\n            flex: 1,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n            py: 1,\n          }}\n        >\n          {children}\n        </Box>\n\n        {footer && (\n          <Box\n            sx={{\n              flexShrink: 0,\n              borderTop: (t) => `1px solid ${t.palette.divider}`,\n              p: contextValue.collapsed ? 1 : 1.5,\n              display: 'flex',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'flex-start',\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </MuiDrawer>\n    </DrawerContext.Provider>\n  );\n}\n\nexport default Drawer;\n","import React, { type ReactNode, type MouseEvent } from 'react';\nimport { Box, Tooltip, Typography } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { useDrawerContext } from './DrawerContext';\nimport { buildDrawerItemSx } from './Drawer.sx';\n\nexport interface DrawerItemProps {\n  /** Icono del item. Se muestra siempre (expanded y collapsed). */\n  icon?: ReactNode;\n  /** Texto del item. Se oculta cuando el drawer está colapsado (muestra tooltip). */\n  label: ReactNode;\n  /** Handler de click. */\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void;\n  /** Marca el item como activo (destaca color y fondo). */\n  active?: boolean;\n  /** Marca el item como \"destructivo\" (p.ej. cerrar sesión): color error. */\n  danger?: boolean;\n  /** Deshabilita click + bajo opacidad. */\n  disabled?: boolean;\n  /** Contenido adicional a la derecha del label (badge, count, chevron). */\n  endAdornment?: ReactNode;\n  /** sx override del consumer, se mergea al final. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Item de un Drawer de shared-library. Lee el estado `collapsed` del\n * DrawerContext para adaptar layout y mostrar tooltip en modo mini.\n *\n * Uso típico:\n * ```tsx\n * <Drawer collapsed={collapsed} onToggleCollapse={toggle}>\n *   <DrawerItem icon={<HomeIcon />} label=\"Inicio\" active />\n *   <DrawerItem icon={<UserIcon />} label=\"Perfil\" />\n * </Drawer>\n * ```\n */\nexport function DrawerItem({\n  icon,\n  label,\n  onClick,\n  active = false,\n  danger = false,\n  disabled = false,\n  endAdornment,\n  sx,\n  className,\n}: DrawerItemProps) {\n  const { collapsed } = useDrawerContext();\n\n  const baseSx = buildDrawerItemSx({ collapsed, active, danger });\n\n  const mergedSx: SxProps<Theme> = [\n    baseSx,\n    disabled && { pointerEvents: 'none', opacity: 0.5 },\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ].filter(Boolean) as SxProps<Theme>;\n\n  const content = (\n    <Box\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n        }\n      }}\n      className={className}\n      sx={mergedSx}\n    >\n      {icon !== undefined && (\n        <Box className=\"drawer-item__icon\" component=\"span\">\n          {icon}\n        </Box>\n      )}\n      <Typography\n        component=\"span\"\n        variant=\"body2\"\n        className=\"drawer-item__label\"\n        sx={{ fontWeight: active ? 600 : 400 }}\n      >\n        {label}\n      </Typography>\n      {!collapsed && endAdornment && (\n        <Box component=\"span\" sx={{ flexShrink: 0, ml: 'auto' }}>\n          {endAdornment}\n        </Box>\n      )}\n    </Box>\n  );\n\n  // Cuando está colapsado, envolvemos en tooltip para revelar el label al hover.\n  if (collapsed && typeof label === 'string') {\n    return (\n      <Tooltip title={label} placement=\"right\" arrow>\n        {content}\n      </Tooltip>\n    );\n  }\n\n  return content;\n}\n\nexport default DrawerItem;\n"],"names":["MuiDrawer"],"mappings":"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"}