@soyfri/shared-library 2.0.0-beta8 → 2.0.0

package/Button-C17mExpd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button-C17mExpd.cjs","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps } from \"@mui/material/Button\";\nimport React from \"react\";\n\ntype PickButtonProps = Pick<ButtonProps, \"href\" | \"children\" | \"onClick\" | \"color\" | \"disabled\" | \"className\" | \"endIcon\" | \"startIcon\" | \"loading\" | \"loadingIndicator\" | \"variant\" | \"size\" | \"loadingPosition\" | \"type\" | \"sx\">;\n\nexport interface MyButtonProps extends PickButtonProps {\n  children?: React.ReactNode;\n  variant?: \"text\" | \"outlined\" | \"contained\";\n  disabled?: boolean;\n  endIcon?: React.ReactNode;\n  startIcon?: React.ReactNode;\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  loading?: boolean;\n  loadingIndicator?: React.ReactNode;\n  loadingPosition?: \"start\" | \"end\" | \"center\";\n  color?: \"primary\" | \"success\" | \"error\" | \"info\" | \"warning\"; //change for tailwind  class colors\n  href?: string;\n  \"data-testid\"?: string;\n  type?: \"button\" | \"submit\" ;\n}\n\nexport const Button: React.FC<MyButtonProps> = ({\n  children,\n  variant,\n  disabled,\n  startIcon,\n  endIcon,\n  size,\n  className,\n  onClick,\n  loading,\n  loadingPosition,\n  loadingIndicator,\n  color,\n  href,\n  \"data-testid\": dataTestId,\n  type,\n  sx\n}) => {\n  return (\n    <MuiButton\n      disabled={disabled}\n      variant={variant}\n      startIcon={startIcon}\n      endIcon={endIcon}\n      size={size}\n      className={className}\n      onClick={onClick}\n      loading={loading}\n      loadingPosition={loadingPosition}\n      loadingIndicator={loadingIndicator}\n      sx={{ textTransform: \"none\", ...sx }}\n      disableRipple={true}\n      disableElevation={true}\n      color={color}\n      data-testid={dataTestId}\n      href={href}\n      type={type}\n    >\n      {children}\n    </MuiButton>);\n};\n\nexport default Button;"],"names":["jsx","MuiButton"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBO,MAAM,SAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,iBAAE,eAAe,UAAW;AAAA,MAChC,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAEP;;"}
+{"version":3,"file":"Button-C17mExpd.cjs","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { Button as MuiButton } from \"@mui/material\";\nimport type { SxProps, Theme } from \"@mui/material/styles\";\nimport React from \"react\";\n\nexport interface ButtonProps {\n  children?: React.ReactNode;\n  variant?: \"text\" | \"outlined\" | \"contained\";\n  disabled?: boolean;\n  endIcon?: React.ReactNode;\n  startIcon?: React.ReactNode;\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  loading?: boolean;\n  loadingIndicator?: React.ReactNode;\n  loadingPosition?: \"start\" | \"end\" | \"center\";\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"success\" | \"error\" | \"info\" | \"warning\";\n  href?: string;\n  \"data-testid\"?: string;\n  type?: \"button\" | \"submit\";\n  sx?: SxProps<Theme>;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  children,\n  variant,\n  disabled,\n  startIcon,\n  endIcon,\n  size,\n  className,\n  onClick,\n  loading,\n  loadingPosition,\n  loadingIndicator,\n  color,\n  href,\n  \"data-testid\": dataTestId,\n  type,\n  sx\n}) => {\n  return (\n    <MuiButton\n      disabled={disabled}\n      variant={variant}\n      startIcon={startIcon}\n      endIcon={endIcon}\n      size={size}\n      className={className}\n      onClick={onClick}\n      loading={loading}\n      loadingPosition={loadingPosition}\n      loadingIndicator={loadingIndicator}\n      sx={{ textTransform: \"none\", ...sx }}\n      disableRipple={true}\n      disableElevation={true}\n      color={color}\n      data-testid={dataTestId}\n      href={href}\n      type={type}\n    >\n      {children}\n    </MuiButton>);\n};\n\nexport default Button;"],"names":["jsx","MuiButton"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,iBAAE,eAAe,UAAW;AAAA,MAChC,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAEP;;"}

package/Button-UkkP-bNw.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button-UkkP-bNw.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps } from \"@mui/material/Button\";\nimport React from \"react\";\n\ntype PickButtonProps = Pick<ButtonProps, \"href\" | \"children\" | \"onClick\" | \"color\" | \"disabled\" | \"className\" | \"endIcon\" | \"startIcon\" | \"loading\" | \"loadingIndicator\" | \"variant\" | \"size\" | \"loadingPosition\" | \"type\" | \"sx\">;\n\nexport interface MyButtonProps extends PickButtonProps {\n  children?: React.ReactNode;\n  variant?: \"text\" | \"outlined\" | \"contained\";\n  disabled?: boolean;\n  endIcon?: React.ReactNode;\n  startIcon?: React.ReactNode;\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  loading?: boolean;\n  loadingIndicator?: React.ReactNode;\n  loadingPosition?: \"start\" | \"end\" | \"center\";\n  color?: \"primary\" | \"success\" | \"error\" | \"info\" | \"warning\"; //change for tailwind  class colors\n  href?: string;\n  \"data-testid\"?: string;\n  type?: \"button\" | \"submit\" ;\n}\n\nexport const Button: React.FC<MyButtonProps> = ({\n  children,\n  variant,\n  disabled,\n  startIcon,\n  endIcon,\n  size,\n  className,\n  onClick,\n  loading,\n  loadingPosition,\n  loadingIndicator,\n  color,\n  href,\n  \"data-testid\": dataTestId,\n  type,\n  sx\n}) => {\n  return (\n    <MuiButton\n      disabled={disabled}\n      variant={variant}\n      startIcon={startIcon}\n      endIcon={endIcon}\n      size={size}\n      className={className}\n      onClick={onClick}\n      loading={loading}\n      loadingPosition={loadingPosition}\n      loadingIndicator={loadingIndicator}\n      sx={{ textTransform: \"none\", ...sx }}\n      disableRipple={true}\n      disableElevation={true}\n      color={color}\n      data-testid={dataTestId}\n      href={href}\n      type={type}\n    >\n      {children}\n    </MuiButton>);\n};\n\nexport default Button;"],"names":["MuiButton"],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,MAAM,SAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,iBAAE,eAAe,UAAW;AAAA,MAChC,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAEP;"}
+{"version":3,"file":"Button-UkkP-bNw.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { Button as MuiButton } from \"@mui/material\";\nimport type { SxProps, Theme } from \"@mui/material/styles\";\nimport React from \"react\";\n\nexport interface ButtonProps {\n  children?: React.ReactNode;\n  variant?: \"text\" | \"outlined\" | \"contained\";\n  disabled?: boolean;\n  endIcon?: React.ReactNode;\n  startIcon?: React.ReactNode;\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  loading?: boolean;\n  loadingIndicator?: React.ReactNode;\n  loadingPosition?: \"start\" | \"end\" | \"center\";\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"success\" | \"error\" | \"info\" | \"warning\";\n  href?: string;\n  \"data-testid\"?: string;\n  type?: \"button\" | \"submit\";\n  sx?: SxProps<Theme>;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  children,\n  variant,\n  disabled,\n  startIcon,\n  endIcon,\n  size,\n  className,\n  onClick,\n  loading,\n  loadingPosition,\n  loadingIndicator,\n  color,\n  href,\n  \"data-testid\": dataTestId,\n  type,\n  sx\n}) => {\n  return (\n    <MuiButton\n      disabled={disabled}\n      variant={variant}\n      startIcon={startIcon}\n      endIcon={endIcon}\n      size={size}\n      className={className}\n      onClick={onClick}\n      loading={loading}\n      loadingPosition={loadingPosition}\n      loadingIndicator={loadingIndicator}\n      sx={{ textTransform: \"none\", ...sx }}\n      disableRipple={true}\n      disableElevation={true}\n      color={color}\n      data-testid={dataTestId}\n      href={href}\n      type={type}\n    >\n      {children}\n    </MuiButton>);\n};\n\nexport default Button;"],"names":["MuiButton"],"mappings":";;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI,iBAAE,eAAe,UAAW;AAAA,MAChC,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAEP;"}

package/README.md

@@ -1,28 +1,32 @@
 # @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.
+Librería central de componentes React del ecosistema FRI, construida sobre **Material-UI v7 + Emotion + utilidades de Tailwind**. Es un **paquete npm publicado** (no una app): se distribuye como ESM + CJS + `.d.ts`. Consumido hoy por `affiliations-web`.
 
 ## 📋 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](#-características)
+- [Instalación](#-instalación)
+- [Uso](#-uso)
+- [Componentes Disponibles](#-componentes-disponibles)
+- [Sistema de presets](#-sistema-de-presets)
+- [Desarrollo](#-desarrollo)
+- [Scripts Disponibles](#-scripts-disponibles)
+- [Storybook](#-storybook)
+- [Testing](#-testing)
+- [Tecnologías](#-tecnologías)
+- [Estructura del Proyecto](#-estructura-del-proyecto)
+- [Publicación](#-publicación)
 
 ## ✨ 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
+- 🎨 **Componentes tipados**: todo en TypeScript (modo `strict`).
+- 🧩 **Multi-entry**: cada componente y hook es su propio entry point, importable por subpath.
+- 📚 **Documentación con Storybook**: cada componente tiene sus historias interactivas.
+- 🎯 **Material-UI v7**: base de diseño accesible y consistente; las primitivas de MUI se re-exportan desde la propia librería (`mui.ts`).
+- 🌈 **Tailwind CSS**: utilidades disponibles con `preflight: false` para coexistir con MUI.
+- 📝 **Formularios**: soporte nativo para `react-hook-form` (modo RHF) además de modo controlado.
+- 🎚️ **Sistema de presets**: estilos registrables vía `theme.styles`.
+- 📦 **Build con Vite**: genera ESM (`.js`) + CommonJS (`.cjs`) + tipos (`.d.ts`), con los peers externalizados.
 
 ## 📦 Instalación
 
@@ -30,214 +34,242 @@ Una librería de componentes React reutilizables construida con Material-UI, Typ
 npm install @soyfri/shared-library
 ```
 
+Los peer dependencies los provee el consumidor (no se bundlean): `react`, `react-dom`, `@mui/material`, `@mui/icons-material`, `@mui/x-date-pickers`, `@emotion/react`, `@emotion/styled`, `react-hook-form`, `dayjs` y Tailwind/postcss.
+
 ## 🚀 Uso
 
+> **Importante:** los componentes de la librería se importan **por subpath** (`@soyfri/shared-library/components/<Nombre>`). El barrel raíz `@soyfri/shared-library` **no** exporta los componentes propios — desde ahí solo salen las primitivas de MUI (`Box`, `Stack`, `ThemeProvider`, …), las utilidades y el sistema de presets.
+
 ```tsx
-import { Button, Table, Select } from '@soyfri/shared-library';
-import '@soyfri/shared-library/dist/styles.css';
+// ✅ Componentes: siempre por subpath
+import { Button } from '@soyfri/shared-library/components/Button';
+import { Input } from '@soyfri/shared-library/components/Input';
+import { Table } from '@soyfri/shared-library/components/Table';
+
+// ✅ Primitivas de MUI, utils y presets: desde el root
+import { Box, ThemeProvider } from '@soyfri/shared-library';
+
+// ✅ Hooks: por subpath
+import { useClipBoard } from '@soyfri/shared-library/hooks/ClipBoard';
 
 function App() {
   return (
-    <div>
+    <Box>
       <Button variant="contained" color="primary">
         Mi Botón
       </Button>
-    </div>
+    </Box>
   );
 }
 ```
 
+No es necesario importar un CSS manualmente: los estilos de cada componente se inyectan automáticamente en su propio bundle (`vite-plugin-lib-inject-css`).
+
 ## 🧩 Componentes Disponibles
 
-### Button
-Componente de botón personalizable basado en Material-UI con soporte para iconos, diferentes tamaños y estados.
+Todos disponibles vía `@soyfri/shared-library/components/<Nombre>`:
 
-**Características:**
-- Variantes: `text`, `outlined`, `contained`
-- Tamaños: `small`, `medium`, `large`
-- Soporte para iconos de inicio y fin
-- Estados de carga
-- Completamente tipado
+| Categoría | Componentes |
+|---|---|
+| **Acciones** | `Button`, `MenuButton`, `ActionMenu` |
+| **Formularios** | `Input`, `InputGroup`, `Select`, `Autocomplete`, `Checkbox`, `RadioGroup`, `Switch`, `DatePicker`, `DateTimePicker`, `DateRangePicker` |
+| **Datos** | `Table`, `Column`, `Stat`, `Timeline` |
+| **Layout / navegación** | `AppBar`, `Drawer`, `Tabs`, `Stepper`, `Card` |
+| **Overlay** | `Modal`, `Flyout`, `Tooltip` |
+| **Feedback** | `StatusMessage` |
+| **Visuales** | `Avatar`, `Icon`, `Chip`, `Gallery` |
 
-### Table
-Componente de tabla flexible con paginación interna y externa, ordenamiento y renderizado personalizado de columnas.
+Hooks disponibles vía `@soyfri/shared-library/hooks/<Nombre>`: `ClipBoard`.
 
-**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
+### Algunos destacados
 
-### Select
-Componente select avanzado con soporte para selección múltiple, filtros, agrupación y renderizado personalizado.
+**Button** — variantes (`text` / `outlined` / `contained`), tamaños (`small` / `medium` / `large`), `startIcon` / `endIcon`, estado `loading` (con `loadingIndicator` y `loadingPosition`), colores del theme y `sx`.
 
-**Características:**
-- Selección simple y múltiple
-- Filtrado de opciones
-- Agrupación de opciones
-- Renderizado personalizado con avatars
-- Placeholder configurable
+**Input** — campo de texto que admite **dos modos mutuamente excluyentes**: RHF (`name` + `control` + `validation`, envuelto en `<Controller>`) y controlado (`value` + `onChange`). Soporta `labelPosition` (`outside` / `floating`), `borderRadius`, `readOnly`, tipos especializados y `preset`.
 
-### Avatar
-Componente para mostrar avatares de usuarios con soporte para imágenes y texto.
+**Select** — selección simple y múltiple, opciones con grupos, render personalizado de opciones (`RenderOptionItem`), tamaños y label flotante.
 
-### Icon
-Wrapper para iconos de Material-UI con propiedades consistentes.
+**Table** — genérico (`<T>`), con paginación interna o externa controlada, selección de filas, exportación a CSV/Excel y columnas personalizadas vía el componente `Column`.
 
-### Stat
-Componente para mostrar estadísticas con diferentes plantillas de visualización.
+> Para ver props, estados y ejemplos en vivo de cada componente, usa Storybook (`npm run storybook`).
 
-**Características:**
-- Plantilla simple
-- Plantilla con chip
-- Plantilla con lista de chips
-- Colores personalizables
+## 🎚️ Sistema de presets
 
-### Column
-Componente auxiliar para definir columnas en el componente Table.
+Los componentes resuelven estilos registrables desde el theme de MUI (`theme.styles`). El consumidor registra un preset por nombre y lo aplica con la prop `preset="<nombre>"`; `preset="default"` (o ausente) usa solo el estilo built-in. El paquete no envía presets propios. Tipos y API (`resolvePreset`, `DEFAULT_PRESET_NAME`, `LibraryComponentName`, …) se exportan desde el root.
 
 ## 🛠️ Desarrollo
 
 ### Prerrequisitos
 
-- Node.js (versión 18 o superior)
-- npm o yarn
+- Node.js 20+ (CI usa Node v23.6.1 para el build y 20.x para publicar)
+- npm
 
-### Configuración del entorno de desarrollo
+### Configuración del entorno
 
-1. Clona el repositorio:
 ```bash
 git clone <repository-url>
-cd shared-library
-```
-
-2. Instala las dependencias:
-```bash
+cd shared-library-web
 npm install
+npm run storybook   # forma principal de desarrollar/previsualizar un componente
 ```
 
-3. Inicia el entorno de desarrollo:
+### Probar la librería en un proyecto local (`npm link`)
+
+> **Clave:** el mapa `exports` con los subpaths (`/components/<Nombre>`) **solo existe en `dist/package.json`** — lo genera `npm run dist`. El `package.json` de la raíz **no** lo tiene. Por eso el `npm link` (igual que el `publish`) se hace **desde `dist/`**, no desde la raíz; si linkeas la raíz, los imports por subpath no resuelven.
+
 ```bash
-npm run dev
-```
+# 1) En la librería: build + generar el dist/package.json con el mapa exports
+npm run build && npm run dist
 
-## 📜 Scripts Disponibles
+# 2) Registrar el paquete DESDE dist/
+cd dist
+npm link            # registra @soyfri/shared-library apuntando a dist/
 
-- `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
+# 3) En el proyecto consumidor (p.ej. affiliations-web)
+npm link @soyfri/shared-library
+```
 
-## 📚 Storybook
+Para iterar en vivo deja corriendo `npm run dev` (tsup en watch): reescribe los archivos de `dist/` en cada cambio y el symlink se mantiene. Vuelve a correr `npm run dist` solo si **agregas o quitas** componentes/hooks (para regenerar el mapa `exports`). No corras `npm run clean` mientras el link esté activo: borra `dist/` y rompe el enlace.
 
-La librería incluye Storybook para documentación interactiva y desarrollo de componentes.
+> ⚠️ **React duplicado:** como `react`/`react-dom` son peers externalizados, con `npm link` puedes terminar con dos copias de React (errores de hooks). Si pasa, apunta el bundler del consumidor a su propio React (alias/dedupe de `react` y `react-dom` a `node_modules` del consumidor).
 
-### Iniciar Storybook
+Para deshacer el link: `npm unlink @soyfri/shared-library` en el consumidor y `npm rm --global @soyfri/shared-library` (o `npm unlink` dentro de `dist/`).
 
-```bash
-npm run storybook
-```
+## 📜 Scripts Disponibles
 
-Esto abrirá Storybook en `http://localhost:6006` donde podrás:
+- `npm run build` — build canónico con **Vite** (`vite build --mode lib`) → genera `dist/` (ESM `.js` + CJS `.cjs` + `.d.ts` + sourcemaps).
+- `npm run dist` — `node build.js` → escribe `dist/package.json` con el mapa `exports` granular y copia el README. Se ejecuta **después** de `build`.
+- `npm run dev` — `tsup --watch`, rebuild incremental para desarrollo local.
+- `npm run storybook` — servidor de Storybook en `:6006`.
+- `npm run build-storybook` — build estático de Storybook.
+- `npm run build:css` / `watch:css` — compila el CSS de Tailwind por separado (`src/styles.css` → `dist/styles.css`).
+- `npm run rm` — `node cleanDirectories.js`, elimina carpetas con prefijo `_` de `dist` antes de publicar.
+- `npm run clean` — `rimraf dist`.
 
-- Ver todos los componentes disponibles
-- Interactuar con las propiedades de cada componente
-- Ver ejemplos de uso
-- Acceder a la documentación detallada
+> El pipeline completo de publicación es `build` → `dist` (igual que en CI). No hay runner de tests independiente: `npm test` es un stub.
 
-### Construir Storybook
+## 📚 Storybook
+
+Storybook (v9) es la forma principal de desarrollar, documentar y probar componentes.
 
 ```bash
-npm run build-storybook
+npm run storybook        # http://localhost:6006
+npm run build-storybook  # build estático
 ```
 
 ## 🧪 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
+**Las historias son los tests.** Vitest ejecuta las historias de Storybook en un navegador real (Playwright, chromium headless) vía `@storybook/addon-vitest`; configuración en `vitest.config.ts` y `.storybook/`. Las historias usan aserciones de `storybook/test` (`expect`, `within`). **Chromatic** hace visual-regression sobre el Storybook publicado.
 
 ## 🔧 Tecnologías
 
-### Dependencias Principales
+### 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
+- **React 19** — librería de UI
+- **Material-UI v7** (`@mui/material`, `@mui/icons-material`, `@mui/lab`) — sistema de diseño
+- **MUI X v8** (`@mui/x-date-pickers`, `@mui/x-date-pickers-pro`) — date/time pickers
+- **react-hook-form 7** — formularios
+- **dayjs** — fechas
+- **Tailwind CSS 4** — utilidades de estilo
+- **TypeScript 5.8** (`strict`) — tipado estático
 
-### Herramientas de Desarrollo
+### 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
+- **Vite** (`--mode lib`) — bundler canónico de la librería
+- **tsup** — build incremental en watch (dev)
+- **Storybook 9** — documentación y desarrollo
+- **Vitest + Playwright** — testing de historias
+- **Chromatic** — visual-regression
+- **Prettier** — formateo
 
 ## 📁 Estructura del Proyecto
 
 ```
-shared-library/
-├── .storybook/          # Configuración de Storybook
+shared-library-web/
+├── .storybook/           # Configuración de Storybook (main.ts, preview.ts, vitest.setup.ts)
 ├── 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
+│   ├── components/       # Componentes (un folder PascalCase por componente)
+│   │   └── _shared/      # Helpers internos (mergeSx, resolvePreset, …)
+│   ├── hooks/            # Hooks (ClipBoard)
+│   ├── theme/            # tokens.ts + componentStyles.ts (sistema de presets)
+│   ├── utils/            # Utilidades (scrollToTop)
+│   ├── mui.ts            # Pass-through de primitivas MUI
+│   ├── index.ts          # Barrel raíz (mui + utils + presets; NO componentes)
+│   └── styles.css        # Estilos globales / Tailwind
+├── dist/                 # Artefactos del build (generados)
+├── build.js              # Genera dist/package.json con el mapa `exports`
+├── vite.config.js        # Build canónico de la librería
+├── tsup.config.js        # Build watch (dev)
+├── vitest.config.ts
+└── package.json
 ```
 
-### Estructura de Componentes
-
-Cada componente sigue una estructura consistente:
+### Anatomía de un componente
 
 ```
 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)
+├── ComponentName.tsx          # Implementación (export const + export default)
+├── index.ts                   # Barrel: componente + tipos
+├── ComponentName.stories.tsx  # Historias de Storybook
+├── ComponentName.sx.ts        # Builders de sx (opcional)
+├── ComponentName.helpers.ts   # Helpers (opcional)
+├── ComponentName.definition.ts# Strings de código para los docs (opcional)
+├── _parts/                    # Subcomponentes internos (opcional)
+└── _hooks/                    # Hooks internos (opcional)
 ```
 
-## 🤝 Contribución
+> Solo los folders cuyo nombre empieza con **mayúscula** se convierten en entry points públicos. Los folders en minúscula o con prefijo `_` (`_shared`, `_parts`, `_hooks`) son internos.
 
-Para contribuir al proyecto:
+## 🚢 Publicación
 
-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
+La publicación a npm es automática vía GitHub Actions (`.github/workflows/publish.yml`) al hacer **push a `main`**: `install` → `rm` → `build` → `dist` → `npm publish --access public` **desde la carpeta `dist/`** → notificación a Discord.
 
-## 📄 Licencia
+> El publish **siempre sale de `dist/`**, no de la raíz: es `dist/package.json` (generado por `npm run dist`) el que tiene el mapa `exports`, ya sin `scripts` ni `devDependencies`. El paquete que se sube a npm es el contenido de `dist/`, no el del repo.
 
-ISC License
+**El versionado es manual:** sube el `version` en `package.json` antes de mergear a `main`, o npm rechazará re-publicar una versión existente.
+
+### Publicar manualmente
+
+Reproduce localmente lo que hace el CI, publicando desde `dist/`:
+
+```bash
+# 1) sube el "version" en package.json (raíz)
+npm run rm            # limpia carpetas _ de dist (si existe)
+npm run build         # Vite → dist/ (ESM + CJS + .d.ts)
+npm run dist          # genera dist/package.json con el mapa exports
+cd dist
+npm publish --access public
+```
+
+### Publicar una versión beta
+
+Las betas usan un `version` con sufijo `-beta.N` (p.ej. `1.6.0-beta.1`). Dos caminos:
+
+**A) Vía CI (como se hace hoy):** sube el `version` a `x.y.z-beta.N` y mergea a `main`; el pipeline la publica.
+⚠️ El workflow publica con el dist-tag **`latest`** por defecto (no usa `--tag`), así que la beta quedará marcada como `latest` en npm. Si no quieres eso, usa el camino manual.
+
+**B) Manual con dist-tag `beta`** (no toca `latest`):
 
----
+```bash
+# version = x.y.z-beta.N en package.json (raíz)
+npm run build && npm run dist
+cd dist
+npm publish --access public --tag beta
+```
+
+Los consumidores la instalan con:
 
-**Versión actual:** 1.0.1
+```bash
+npm install @soyfri/shared-library@beta          # última beta
+npm install @soyfri/shared-library@1.6.0-beta.1  # una beta exacta
+```
 
-Para más información y ejemplos detallados, consulta la documentación en Storybook ejecutando `npm run storybook`.
-        
+## 🤝 Contribución
+
+1. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`).
+2. Desarrolla y documenta el componente en Storybook.
+3. Commitea tus cambios y abre un Pull Request.
+
+## 📄 Licencia
+
+ISC License

package/components/ActionMenu/ActionMenu.cjs

@@ -1,5 +1,7 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,49 +17,60 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const MoreVertIcon = require("@mui/icons-material/MoreVert");
-function ActionMenu({
-  items,
+const ActionMenuContext = React.createContext(null);
+const ActionMenu = ({
+  children,
   trigger,
-  triggerTooltip = "Acciones",
+  triggerTooltip,
   anchorOrigin = { vertical: "bottom", horizontal: "right" },
   transformOrigin = { vertical: "top", horizontal: "right" },
   menuSx,
-  disabled = false,
-  className
-}) {
+  disabled = false
+}) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
-  const handleOpen = (event) => {
+  const handleClose = () => setAnchorEl(null);
+  const openMenu = (event) => {
     if (disabled) return;
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = () => setAnchorEl(null);
-  const handleItemClick = (event, item) => {
-    var _a;
-    event.stopPropagation();
-    (_a = item.onClick) == null ? void 0 : _a.call(item, event);
-    handleClose();
-  };
-  const triggerElement = trigger ? React.isValidElement(trigger) ? React.cloneElement(trigger, {
-    onClick: handleOpen,
+  const triggerElement = trigger ? React.cloneElement(trigger, {
+    onClick: openMenu,
     disabled
-  }) : /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: handleOpen, children: trigger }) : /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: triggerTooltip, arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+  }) : /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: triggerTooltip, arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     material.IconButton,
     {
       size: "small",
-      onClick: handleOpen,
+      onClick: openMenu,
       disabled,
       "aria-label": triggerTooltip,
       children: /* @__PURE__ */ jsxRuntime.jsx(MoreVertIcon, { fontSize: "small" })
     }
-  ) }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className, children: [
+  ) });
+  const paperSx = [
+    { minWidth: 180 },
+    ...Array.isArray(menuSx) ? menuSx : menuSx ? [menuSx] : []
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     triggerElement,
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Menu,
@@ -67,41 +80,28 @@ function ActionMenu({
         onClose: handleClose,
         anchorOrigin,
         transformOrigin,
-        slotProps: { paper: { sx: __spreadValues({ minWidth: 180 }, menuSx) } },
-        children: items.map((item, idx) => {
-          var _a;
-          const key = (_a = item.key) != null ? _a : `${String(item.label)}-${idx}`;
-          const node = /* @__PURE__ */ jsxRuntime.jsxs(
-            material.MenuItem,
-            {
-              disabled: item.disabled,
-              onClick: (event) => handleItemClick(event, item),
-              sx: (theme) => ({
-                color: item.danger ? theme.palette.error.main : "inherit",
-                "& .MuiListItemIcon-root": {
-                  color: item.danger ? theme.palette.error.main : "inherit",
-                  minWidth: 32
-                }
-              }),
-              children: [
-                item.icon && /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: item.icon }),
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { primary: item.label })
-              ]
-            },
-            key
-          );
-          if (item.dividerBefore && idx > 0) {
-            return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
-              node
-            ] }, `${key}-frag`);
-          }
-          return node;
-        })
+        slotProps: { paper: { sx: paperSx } },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ActionMenuContext.Provider, { value: { close: handleClose }, children })
       }
     )
   ] });
-}
+};
+const ActionMenuItem = React.forwardRef(
+  function ActionMenuItem2(_a, ref) {
+    var _b = _a, { icon, children, onClick } = _b, rest = __objRest(_b, ["icon", "children", "onClick"]);
+    const ctx = React.useContext(ActionMenuContext);
+    const handleClick = (event) => {
+      event.stopPropagation();
+      onClick == null ? void 0 : onClick(event);
+      ctx == null ? void 0 : ctx.close();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, __spreadProps(__spreadValues({ ref, onClick: handleClick }, rest), { children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { sx: { minWidth: 32 }, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { primary: children })
+    ] }));
+  }
+);
 exports.ActionMenu = ActionMenu;
+exports.ActionMenuItem = ActionMenuItem;
 exports.default = ActionMenu;
 //# sourceMappingURL=ActionMenu.cjs.map