@soyfri/shared-library 4.0.4 → 4.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 FRI
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,281 @@
+# @soyfri/shared-library
+
+Librería de componentes React de FRI, construida sobre **Material UI v7** + TypeScript. Provee componentes UI consistentes y tipados para los frontends del ecosistema (`soporte`, `afiliaciones`, …).
+
+## Instalación
+
+```bash
+npm install @soyfri/shared-library
+```
+
+### Peer dependencies
+
+El consumidor debe tener instaladas (la librería no las empaqueta):
+
+```
+react >=18   react-dom >=18   react-hook-form ^7
+@mui/material ^7   @mui/icons-material ^7   @mui/x-date-pickers ^8   @mui/lab ^7
+@emotion/react ^11   @emotion/styled ^11   dayjs ^1
+```
+
+## Setup
+
+Envuelve la app en el `ThemeProvider` de MUI — los componentes leen el theme del contexto. **No hay CSS que importar:** todo el estilado sale del theme y de `sx`.
+
+### Tematizar los componentes
+
+Se tematizan con la misma API que los de MUI, bajo el prefijo `Fri`:
+
+```ts
+createTheme({
+  components: {
+    FriDataRow: {
+      defaultProps: { labelWidth: 240 },
+      styleOverrides: {
+        root: { '& .fri-DataRow-label': { typography: 'dataLabel' } },
+      },
+      variants: [{ props: { last: true }, style: { marginBottom: 0 } }],
+    },
+  },
+})
+```
+
+Precedencia: estilo de fábrica < `styleOverrides` del theme < `sx` del call-site.
+
+Disponible en `FriAppBar`, `FriCard`, `FriCheckbox`, `FriDataRow`, `FriDatePicker`, `FriDateTimePicker`, `FriDrawer`, `FriEmptyState`, `FriGallery`, `FriInput`, `FriPageHeader`, `FriRadioGroup`, `FriSelect` y `FriSwitch`.
+
+`Autocomplete` se tematiza con `MuiAutocomplete` (el nativo de MUI). El sistema viejo del paquete (`theme.styles` + prop `preset`) está deprecado, pero sigue funcionando.
+
+### Llegar a los nodos internos
+
+`Card`, `DataRow`, `EmptyState` y `PageHeader` aceptan `slotProps`:
+
+```tsx
+<DataRow label="Estado" slotProps={{ label: { variant: 'caption' } }}>Activo</DataRow>
+<Card title="Ventas" slotProps={{ content: { sx: { p: 0 } } }}>…</Card>
+```
+
+`className` y `sx` se suman a los internos en vez de reemplazarlos.
+
+## Dos formas de importar
+
+```tsx
+// 1) Subpath por componente (recomendado — tree-shaking, lo que usan los proyectos)
+import { Button } from '@soyfri/shared-library/components/Button'
+import { Table } from '@soyfri/shared-library/components/Table'
+
+// 2) Barrel raíz
+import { Button, Table, Select } from '@soyfri/shared-library'
+```
+
+> Cada componente se publica como subpath `@soyfri/shared-library/components/<Nombre>`.
+
+---
+
+## Componentes
+
+Uso mínimo de cada componente. Todos aceptan `sx` y son tipados.
+
+### Formularios e inputs
+
+**Button** — `variant` (`text`/`outlined`/`contained`), `color`, `size`, `loading`, `startIcon`/`endIcon`.
+```tsx
+<Button variant="contained" color="primary" onClick={fn}>Guardar</Button>
+```
+
+**Input** — campo de texto. Modo controlado (`value`/`onChange`) o RHF (`name`/`control`).
+```tsx
+<Input label="Nombre" value={v} onChange={setV} />
+<Input label="Correo" type="email" name="email" control={control} />
+```
+
+**InputGroup** — agrupa inputs/botones adyacentes con bordes unificados.
+```tsx
+<InputGroup><Input label="Buscar" value={q} onChange={setQ} /><Button>Ir</Button></InputGroup>
+```
+
+**Select** + **Option** — single, múltiple y filtrable. Modo controlado o RHF.
+```tsx
+<Select label="País" value={v} onChange={setV} options={[{value:'gt',label:'Guatemala'}]} />
+<Select label="Tags" multiple value={vals} onChange={setVals} options={opts} filterable />
+```
+
+**Autocomplete** — búsqueda con `options` (`{value,label,img?}`), `multiple`.
+```tsx
+<Autocomplete label="Usuario" options={opts} value={v} onChange={setV} />
+```
+
+**Checkbox** / **Switch** — `label`, controlado (`checked`/`onChange`) o RHF (`name`/`control`).
+```tsx
+<Checkbox label="Acepto" checked={ok} onChange={setOk} />
+<Switch label="Activo" checked={on} onChange={setOn} />
+```
+
+**RadioGroup** — `options` (`{value,label}`), `row`.
+```tsx
+<RadioGroup label="Tipo" options={[{value:'a',label:'A'},{value:'b',label:'B'}]} value={v} onChange={setV} />
+```
+
+**DatePicker** / **DateTimePicker** — valor `Dayjs`, `minDate`/`maxDate`.
+```tsx
+<DatePicker label="Fecha" value={date} onChange={setDate} />
+```
+
+### Datos y visualización
+
+**Table** + **Column** — paginación interna o externa, render por columna.
+```tsx
+<Table data={rows}>
+  <Column name="Nombre" field="name">{({name}) => <b>{name}</b>}</Column>
+  <Column name="Estado" field="status">{({status}) => <Chip label={status} />}</Column>
+</Table>
+```
+
+**Avatar** — uno (`src`/`alt`/`fallback`) o grupo apilado (`items`).
+```tsx
+<Avatar src={url} alt="Ada" fallback="AL" />
+<Avatar items={[{imageUrl:u1,text:'Ada'},{imageUrl:u2,text:'Bob'}]} displayedAvatars={3} />
+```
+
+**Chip** — `label`, `color`, `variant`, `onDelete`.
+```tsx
+<Chip label="Activo" color="success" size="small" />
+```
+
+**Stat** — KPI con plantillas `simple`/`chip`/`chipList`.
+```tsx
+<Stat simple statDisplay={() => <>Q 1,200</>} />
+```
+
+**Icon** — SVG por `path`/`url` o `children`, con `badge`, `spin`.
+```tsx
+<Icon url="/icons/user.svg" size="md" />
+```
+
+**Gallery** — galería con lightbox; `items` (`{url,type,title}`).
+```tsx
+<Gallery items={[{url:img,type:'image',title:'Doc'}]} />
+```
+
+**Timeline** + **TimelineItem** — línea temporal.
+```tsx
+<Timeline><TimelineItem>Creado</TimelineItem><TimelineItem>Aprobado</TimelineItem></Timeline>
+```
+
+**Stepper** + **Step** — pasos `horizontal`/`vertical`, `currentStep`.
+```tsx
+<Stepper currentStep={1}><Step label="Datos" /><Step label="Pago" /></Stepper>
+```
+
+### Feedback
+
+**Alert** — `severity` (`success`/`info`/`warning`/`error`), `variant`.
+```tsx
+<Alert severity="error">No se pudo guardar</Alert>
+```
+
+**Spinner** — `size`, `color`.
+```tsx
+<Spinner size={16} />
+```
+
+**StatusMessage** — mensaje de estado como `alert` o `modal`.
+```tsx
+<StatusMessage open messageType="success" title="Listo" description="Guardado" close={fn} />
+```
+
+**Tooltip** — `text` envolviendo un hijo.
+```tsx
+<Tooltip text="Editar"><Button>✎</Button></Tooltip>
+```
+
+**Modal** (+ `ModalHeader`/`ModalBody`/`ModalFooter`) — `open`/`onClose`, `actions`, `staticBackdrop`, `maxWidth`.
+```tsx
+<Modal open={open} onClose={close} title="Confirmar" actions={[{text:'OK',onClick:save}]} staticBackdrop />
+```
+
+### Navegación
+
+**Tabs** + **Tab** — paneles por contenido, o modo `nav` (enlaces controlados por ruta).
+```tsx
+<Tabs onChangeValue={setV}>
+  <Tab value={0} label="General">…</Tab>
+  <Tab value={1} label="Historial">…</Tab>
+</Tabs>
+// Modo nav (router): value controlado, sin paneles
+<Tabs nav value={current}>
+  <Tab value="info" label="Info" component={Link} to="info" />
+</Tabs>
+```
+
+**Breadcrumbs** — migas; los hijos son `Link`/`Typography`.
+```tsx
+<Breadcrumbs><Link href="/">Inicio</Link><Typography>Detalle</Typography></Breadcrumbs>
+```
+
+**Drawer** + **DrawerItem** — panel lateral colapsable.
+```tsx
+<Drawer open variant="permanent"><DrawerItem>Inicio</DrawerItem></Drawer>
+```
+
+**AppBar** — barra superior (incluye `AppBarMenuToggle`, `useAppBarContext`).
+
+**MenuButton** — botón que abre un menú de `options`.
+```tsx
+<MenuButton buttonText="Acciones" options={[{label:'Editar',onClick:fn}]} />
+```
+
+**ActionMenu** + **ActionMenuItem** — menú contextual (compound; `trigger` opcional, default ⋮).
+```tsx
+<ActionMenu><ActionMenuItem onClick={edit}>Editar</ActionMenuItem><ActionMenuItem onClick={del}>Eliminar</ActionMenuItem></ActionMenu>
+```
+
+### Layout y contenedores
+
+**Card** — `variant`, `padding`; o composición con `title`/`subheader`/`action` y `contentSx`.
+```tsx
+<Card title="Resumen" action={<Button>Editar</Button>}>…</Card>
+<Card contentSx={{ p: 0 }}><Table data={rows}>…</Table></Card>   // tabla flush
+```
+
+**Divider** — separador `horizontal`/`vertical`.
+```tsx
+<Divider sx={{ my: 2 }} />
+```
+
+**ButtonGroup** — agrupa botones.
+```tsx
+<ButtonGroup><Button>Día</Button><Button>Mes</Button></ButtonGroup>
+```
+
+**Flyout** — panel flotante `open`/`onClose`, `anchor`.
+```tsx
+<Flyout open={open} onClose={close} anchor="right">…</Flyout>
+```
+
+### Hooks
+
+**useClipboard** — copiar al portapapeles con feedback.
+```tsx
+import { useClipboard } from '@soyfri/shared-library/hooks/ClipBoard'
+const { copy, CopyMessage } = useClipboard({ message: 'Copiado', severity: 'success' })
+```
+
+---
+
+## Desarrollo
+
+```bash
+npm install
+npm run dev          # build en watch (tsup)
+npm run storybook    # Storybook en :6006 (documentación interactiva, 260+ stories)
+npm run build        # build de producción (vite + postbuild genera subpaths en dist/)
+```
+
+## Tecnologías
+
+React 18/19 · Material UI v7 · TypeScript 5 · Tailwind CSS 4 · Storybook 9 · Vite/Rollup · Vitest + Playwright.
+
+## Licencia
+
+ISC

package/chunks/ActionMenu-D81Xb35f.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu-D81Xb35f.cjs","sources":["../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useContext,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  type MouseEvent,\n} from 'react';\nimport {\n  IconButton,\n  Menu,\n  MenuItem,\n  ListItemIcon,\n  ListItemText,\n  Tooltip,\n  type MenuItemProps as MuiMenuItemProps,\n} from '@mui/material';\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface ActionMenuProps {\n  /** Items del menú. Normalmente `<ActionMenuItem>` o `<Divider />`. */\n  children: ReactNode;\n  /**\n   * Elemento disparador — cualquier componente clickeable (Button, Chip, IconButton…).\n   * El ActionMenu le inyecta `onClick` automáticamente. Si se omite, se usa un\n   * IconButton de tres puntos por defecto.\n   */\n  trigger?: ReactElement;\n  /** Texto de tooltip sobre el trigger default. Default: \"Acciones\". */\n  triggerTooltip?: string;\n  /** Anchor origin del menu. Default: { vertical: 'bottom', horizontal: 'right' }. */\n  anchorOrigin?: {\n    vertical: 'top' | 'center' | 'bottom';\n    horizontal: 'left' | 'center' | 'right';\n  };\n  /** Transform origin del menu. Default: { vertical: 'top', horizontal: 'right' }. */\n  transformOrigin?: {\n    vertical: 'top' | 'center' | 'bottom';\n    horizontal: 'left' | 'center' | 'right';\n  };\n  /** sx del Menu (Paper interno). */\n  menuSx?: SxProps<Theme>;\n  /** Deshabilita el trigger entero. */\n  disabled?: boolean;\n}\n\ninterface ActionMenuContextValue {\n  close: () => void;\n}\n\nconst ActionMenuContext = createContext<ActionMenuContextValue | null>(null);\n\nexport const ActionMenu: React.FC<ActionMenuProps> = ({\n  children,\n  trigger,\n  triggerTooltip,\n  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },\n  transformOrigin = { vertical: 'top', horizontal: 'right' },\n  menuSx,\n  disabled = false,\n}) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n\n  const handleClose = () => setAnchorEl(null);\n\n  // Abre el menú anclándolo al elemento que recibió el click.\n  const openMenu = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) return;\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  // Si el consumer pasó un trigger (ej. <Button>), le inyectamos onClick.\n  // Si no, usamos el IconButton de tres puntos por defecto.\n  const triggerElement = trigger ? (\n    React.cloneElement(trigger as ReactElement<any>, {\n      onClick: openMenu,\n      disabled,\n    })\n  ) : (\n    <Tooltip title={triggerTooltip} arrow>\n      {/*\n        El <span> no es decorativo: un botón deshabilitado no dispara eventos,\n        así que el Tooltip se queda sin nada que escuchar y MUI avisa por\n        consola. El wrapper le da el elemento que necesita y, de paso, el\n        tooltip sigue apareciendo cuando el menú está deshabilitado — que es\n        justo cuando el usuario quiere saber por qué no puede hacer clic.\n      */}\n      <span>\n        <IconButton\n          size=\"small\"\n          onClick={openMenu}\n          disabled={disabled}\n          aria-label={triggerTooltip}\n        >\n          <MoreVertIcon fontSize=\"small\" />\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n\n  const paperSx = [\n    { minWidth: 180 },\n    ...(Array.isArray(menuSx) ? menuSx : menuSx ? [menuSx] : []),\n  ] as SxProps<Theme>;\n\n  return (\n    <>\n      {triggerElement}\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        slotProps={{ paper: { sx: paperSx } }}\n      >\n        <ActionMenuContext.Provider value={{ close: handleClose }}>\n          {children}\n        </ActionMenuContext.Provider>\n      </Menu>\n    </>\n  );\n};\n\nexport interface ActionMenuItemProps\n  extends Omit<MuiMenuItemProps, 'children' | 'onClick'> {\n  /** Icono opcional a la izquierda. */\n  icon?: ReactNode;\n  /** Texto (o nodo) del item. */\n  children: ReactNode;\n  /** Handler de click. El menú se cierra automáticamente después. */\n  onClick?: (event: MouseEvent<HTMLLIElement>) => void;\n}\n\n/**\n * Item del `ActionMenu`. Se cierra automáticamente al hacer click.\n * Acepta todos los props de `MenuItem` de MUI (disabled, selected, sx, …).\n */\nexport const ActionMenuItem = forwardRef<HTMLLIElement, ActionMenuItemProps>(\n  function ActionMenuItem({ icon, children, onClick, ...rest }, ref) {\n    const ctx = useContext(ActionMenuContext);\n\n    const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n      event.stopPropagation();\n      onClick?.(event);\n      ctx?.close();\n    };\n\n    return (\n      <MenuItem ref={ref} onClick={handleClick} {...rest}>\n        {icon && <ListItemIcon sx={{ minWidth: 32 }}>{icon}</ListItemIcon>}\n        <ListItemText primary={children} />\n      </MenuItem>\n    );\n  },\n);\n\nexport default ActionMenu;\n"],"names":["createContext","useState","jsx","Tooltip","IconButton","jsxs","Fragment","Menu","forwardRef","ActionMenuItem","useContext","MenuItem","ListItemIcon","ListItemText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,oBAAoBA,MAAAA,cAA6C,IAAI;AAEpE,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EACjD,kBAAkB,EAAE,UAAU,OAAO,YAAY,QAAA;AAAA,EACjD;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIC,MAAAA,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAE7B,QAAM,cAAc,MAAM,YAAY,IAAI;AAG1C,QAAM,WAAW,CAAC,UAAmC;AACnD,QAAI,SAAU;AACd,UAAM,gBAAA;AACN,gBAAY,MAAM,aAAa;AAAA,EACjC;AAIA,QAAM,iBAAiB,UACrB,MAAM,aAAa,SAA8B;AAAA,IAC/C,SAAS;AAAA,IACT;AAAA,EAAA,CACD,IAEDC,2BAAAA,IAACC,SAAAA,SAAA,EAAQ,OAAO,gBAAgB,OAAK,MAQnC,UAAAD,2BAAAA,IAAC,QAAA,EACC,UAAAA,2BAAAA;AAAAA,IAACE,SAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAY;AAAA,MAEZ,UAAAF,2BAAAA,IAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAEnC,EAAA,CACF;AAGF,QAAM,UAAU;AAAA,IACd,EAAE,UAAU,IAAA;AAAA,IACZ,GAAI,MAAM,QAAQ,MAAM,IAAI,SAAS,SAAS,CAAC,MAAM,IAAI,CAAA;AAAA,EAAC;AAG5D,SACEG,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACDJ,2BAAAA;AAAAA,MAACK,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,EAAE,OAAO,EAAE,IAAI,UAAQ;AAAA,QAElC,UAAAL,2BAAAA,IAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,OAAO,YAAA,GACzC,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAgBO,MAAM,iBAAiBM,MAAAA;AAAAA,EAC5B,SAASC,gBAAe,IAAsC,KAAK;AAA3C,iBAAE,QAAM,UAAU,YAAlB,IAA8B,iBAA9B,IAA8B,CAA5B,QAAM,YAAU;AACxC,UAAM,MAAMC,MAAAA,WAAW,iBAAiB;AAExC,UAAM,cAAc,CAAC,UAAqC;AACxD,YAAM,gBAAA;AACN,yCAAU;AACV,iCAAK;AAAA,IACP;AAEA,2CACGC,SAAAA,UAAA,+BAAS,KAAU,SAAS,eAAiB,OAA7C,EACE,UAAA;AAAA,MAAA,uCAASC,SAAAA,cAAA,EAAa,IAAI,EAAE,UAAU,GAAA,GAAO,UAAA,MAAK;AAAA,MACnDV,2BAAAA,IAACW,SAAAA,cAAA,EAAa,SAAS,SAAA,CAAU;AAAA,IAAA,IACnC;AAAA,EAEJ;AACF;;;"}

package/chunks/ActionMenu-co4b8doH.mjs

@@ -0,0 +1,106 @@
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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;
+};
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { forwardRef, useState, createContext, useContext } from "react";
+import { Tooltip, IconButton, Menu, MenuItem, ListItemIcon, ListItemText } from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+const ActionMenuContext = createContext(null);
+const ActionMenu = ({
+  children,
+  trigger,
+  triggerTooltip,
+  anchorOrigin = { vertical: "bottom", horizontal: "right" },
+  transformOrigin = { vertical: "top", horizontal: "right" },
+  menuSx,
+  disabled = false
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClose = () => setAnchorEl(null);
+  const openMenu = (event) => {
+    if (disabled) return;
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const triggerElement = trigger ? React__default.cloneElement(trigger, {
+    onClick: openMenu,
+    disabled
+  }) : /* @__PURE__ */ jsx(Tooltip, { title: triggerTooltip, arrow: true, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      onClick: openMenu,
+      disabled,
+      "aria-label": triggerTooltip,
+      children: /* @__PURE__ */ jsx(MoreVertIcon, { fontSize: "small" })
+    }
+  ) }) });
+  const paperSx = [
+    { minWidth: 180 },
+    ...Array.isArray(menuSx) ? menuSx : menuSx ? [menuSx] : []
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerElement,
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: handleClose,
+        anchorOrigin,
+        transformOrigin,
+        slotProps: { paper: { sx: paperSx } },
+        children: /* @__PURE__ */ jsx(ActionMenuContext.Provider, { value: { close: handleClose }, children })
+      }
+    )
+  ] });
+};
+const ActionMenuItem = forwardRef(
+  function ActionMenuItem2(_a, ref) {
+    var _b = _a, { icon, children, onClick } = _b, rest = __objRest(_b, ["icon", "children", "onClick"]);
+    const ctx = useContext(ActionMenuContext);
+    const handleClick = (event) => {
+      event.stopPropagation();
+      onClick == null ? void 0 : onClick(event);
+      ctx == null ? void 0 : ctx.close();
+    };
+    return /* @__PURE__ */ jsxs(MenuItem, __spreadProps(__spreadValues({ ref, onClick: handleClick }, rest), { children: [
+      icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: icon }),
+      /* @__PURE__ */ jsx(ListItemText, { primary: children })
+    ] }));
+  }
+);
+export {
+  ActionMenu as A,
+  ActionMenuItem as a
+};
+//# sourceMappingURL=ActionMenu-co4b8doH.mjs.map

package/chunks/ActionMenu-co4b8doH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu-co4b8doH.mjs","sources":["../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useContext,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  type MouseEvent,\n} from 'react';\nimport {\n  IconButton,\n  Menu,\n  MenuItem,\n  ListItemIcon,\n  ListItemText,\n  Tooltip,\n  type MenuItemProps as MuiMenuItemProps,\n} from '@mui/material';\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface ActionMenuProps {\n  /** Items del menú. Normalmente `<ActionMenuItem>` o `<Divider />`. */\n  children: ReactNode;\n  /**\n   * Elemento disparador — cualquier componente clickeable (Button, Chip, IconButton…).\n   * El ActionMenu le inyecta `onClick` automáticamente. Si se omite, se usa un\n   * IconButton de tres puntos por defecto.\n   */\n  trigger?: ReactElement;\n  /** Texto de tooltip sobre el trigger default. Default: \"Acciones\". */\n  triggerTooltip?: string;\n  /** Anchor origin del menu. Default: { vertical: 'bottom', horizontal: 'right' }. */\n  anchorOrigin?: {\n    vertical: 'top' | 'center' | 'bottom';\n    horizontal: 'left' | 'center' | 'right';\n  };\n  /** Transform origin del menu. Default: { vertical: 'top', horizontal: 'right' }. */\n  transformOrigin?: {\n    vertical: 'top' | 'center' | 'bottom';\n    horizontal: 'left' | 'center' | 'right';\n  };\n  /** sx del Menu (Paper interno). */\n  menuSx?: SxProps<Theme>;\n  /** Deshabilita el trigger entero. */\n  disabled?: boolean;\n}\n\ninterface ActionMenuContextValue {\n  close: () => void;\n}\n\nconst ActionMenuContext = createContext<ActionMenuContextValue | null>(null);\n\nexport const ActionMenu: React.FC<ActionMenuProps> = ({\n  children,\n  trigger,\n  triggerTooltip,\n  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },\n  transformOrigin = { vertical: 'top', horizontal: 'right' },\n  menuSx,\n  disabled = false,\n}) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n\n  const handleClose = () => setAnchorEl(null);\n\n  // Abre el menú anclándolo al elemento que recibió el click.\n  const openMenu = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) return;\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  // Si el consumer pasó un trigger (ej. <Button>), le inyectamos onClick.\n  // Si no, usamos el IconButton de tres puntos por defecto.\n  const triggerElement = trigger ? (\n    React.cloneElement(trigger as ReactElement<any>, {\n      onClick: openMenu,\n      disabled,\n    })\n  ) : (\n    <Tooltip title={triggerTooltip} arrow>\n      {/*\n        El <span> no es decorativo: un botón deshabilitado no dispara eventos,\n        así que el Tooltip se queda sin nada que escuchar y MUI avisa por\n        consola. El wrapper le da el elemento que necesita y, de paso, el\n        tooltip sigue apareciendo cuando el menú está deshabilitado — que es\n        justo cuando el usuario quiere saber por qué no puede hacer clic.\n      */}\n      <span>\n        <IconButton\n          size=\"small\"\n          onClick={openMenu}\n          disabled={disabled}\n          aria-label={triggerTooltip}\n        >\n          <MoreVertIcon fontSize=\"small\" />\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n\n  const paperSx = [\n    { minWidth: 180 },\n    ...(Array.isArray(menuSx) ? menuSx : menuSx ? [menuSx] : []),\n  ] as SxProps<Theme>;\n\n  return (\n    <>\n      {triggerElement}\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        slotProps={{ paper: { sx: paperSx } }}\n      >\n        <ActionMenuContext.Provider value={{ close: handleClose }}>\n          {children}\n        </ActionMenuContext.Provider>\n      </Menu>\n    </>\n  );\n};\n\nexport interface ActionMenuItemProps\n  extends Omit<MuiMenuItemProps, 'children' | 'onClick'> {\n  /** Icono opcional a la izquierda. */\n  icon?: ReactNode;\n  /** Texto (o nodo) del item. */\n  children: ReactNode;\n  /** Handler de click. El menú se cierra automáticamente después. */\n  onClick?: (event: MouseEvent<HTMLLIElement>) => void;\n}\n\n/**\n * Item del `ActionMenu`. Se cierra automáticamente al hacer click.\n * Acepta todos los props de `MenuItem` de MUI (disabled, selected, sx, …).\n */\nexport const ActionMenuItem = forwardRef<HTMLLIElement, ActionMenuItemProps>(\n  function ActionMenuItem({ icon, children, onClick, ...rest }, ref) {\n    const ctx = useContext(ActionMenuContext);\n\n    const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n      event.stopPropagation();\n      onClick?.(event);\n      ctx?.close();\n    };\n\n    return (\n      <MenuItem ref={ref} onClick={handleClick} {...rest}>\n        {icon && <ListItemIcon sx={{ minWidth: 32 }}>{icon}</ListItemIcon>}\n        <ListItemText primary={children} />\n      </MenuItem>\n    );\n  },\n);\n\nexport default ActionMenu;\n"],"names":["React","ActionMenuItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,oBAAoB,cAA6C,IAAI;AAEpE,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EACjD,kBAAkB,EAAE,UAAU,OAAO,YAAY,QAAA;AAAA,EACjD;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAE7B,QAAM,cAAc,MAAM,YAAY,IAAI;AAG1C,QAAM,WAAW,CAAC,UAAmC;AACnD,QAAI,SAAU;AACd,UAAM,gBAAA;AACN,gBAAY,MAAM,aAAa;AAAA,EACjC;AAIA,QAAM,iBAAiB,UACrBA,eAAM,aAAa,SAA8B;AAAA,IAC/C,SAAS;AAAA,IACT;AAAA,EAAA,CACD,IAED,oBAAC,SAAA,EAAQ,OAAO,gBAAgB,OAAK,MAQnC,UAAA,oBAAC,QAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAY;AAAA,MAEZ,UAAA,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAEnC,EAAA,CACF;AAGF,QAAM,UAAU;AAAA,IACd,EAAE,UAAU,IAAA;AAAA,IACZ,GAAI,MAAM,QAAQ,MAAM,IAAI,SAAS,SAAS,CAAC,MAAM,IAAI,CAAA;AAAA,EAAC;AAG5D,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,EAAE,OAAO,EAAE,IAAI,UAAQ;AAAA,QAElC,UAAA,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,OAAO,YAAA,GACzC,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAgBO,MAAM,iBAAiB;AAAA,EAC5B,SAASC,gBAAe,IAAsC,KAAK;AAA3C,iBAAE,QAAM,UAAU,YAAlB,IAA8B,iBAA9B,IAA8B,CAA5B,QAAM,YAAU;AACxC,UAAM,MAAM,WAAW,iBAAiB;AAExC,UAAM,cAAc,CAAC,UAAqC;AACxD,YAAM,gBAAA;AACN,yCAAU;AACV,iCAAK;AAAA,IACP;AAEA,gCACG,UAAA,+BAAS,KAAU,SAAS,eAAiB,OAA7C,EACE,UAAA;AAAA,MAAA,4BAAS,cAAA,EAAa,IAAI,EAAE,UAAU,GAAA,GAAO,UAAA,MAAK;AAAA,MACnD,oBAAC,cAAA,EAAa,SAAS,SAAA,CAAU;AAAA,IAAA,IACnC;AAAA,EAEJ;AACF;"}

package/chunks/Alert-6Wiwby6L.mjs

@@ -0,0 +1,53 @@
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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;
+};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Alert as Alert$1 } from "@mui/material";
+const Alert = forwardRef(function Alert2(_a, ref) {
+  var _b = _a, { severity = "info", variant = "standard", children, onClose, icon } = _b, rest = __objRest(_b, ["severity", "variant", "children", "onClose", "icon"]);
+  return /* @__PURE__ */ jsx(
+    Alert$1,
+    __spreadProps(__spreadValues({
+      ref,
+      severity,
+      variant,
+      onClose,
+      icon
+    }, rest), {
+      children
+    })
+  );
+});
+export {
+  Alert as A
+};
+//# sourceMappingURL=Alert-6Wiwby6L.mjs.map

package/chunks/Alert-6Wiwby6L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert-6Wiwby6L.mjs","sources":["../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport { Alert as MuiAlert, type AlertProps as MuiAlertProps } from '@mui/material';\n\nexport type AlertSeverity = 'error' | 'warning' | 'info' | 'success';\nexport type AlertVariant = 'standard' | 'filled' | 'outlined';\n\nexport interface AlertProps\n  extends Omit<MuiAlertProps, 'severity' | 'variant' | 'onClose' | 'icon'> {\n  /** Color + icono. Default: `info`. */\n  severity?: AlertSeverity;\n  /** Estilo visual. Default: `standard`. */\n  variant?: AlertVariant;\n  /** Contenido del alert (texto o JSX arbitrario). */\n  children?: ReactNode;\n  /** Si se provee, muestra la X de cerrar y la invoca al click. */\n  onClose?: () => void;\n  /** Icono custom, o `false` para ocultarlo. */\n  icon?: ReactNode | false;\n}\n\n/**\n * Aviso inline flexible (banner). Wrapper fino sobre MUI `Alert` — para\n * mensajes contextuales con contenido arbitrario y las 4 severidades\n * (error/warning/info/success).\n *\n * Distinto de `StatusMessage`, que es feedback opinado de formularios\n * (title+description, success/danger/warning, modo alert o modal).\n */\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { severity = 'info', variant = 'standard', children, onClose, icon, ...rest },\n  ref,\n) {\n  return (\n    <MuiAlert\n      ref={ref}\n      severity={severity}\n      variant={variant}\n      onClose={onClose}\n      icon={icon}\n      {...rest}\n    >\n      {children}\n    </MuiAlert>\n  );\n});\n\nexport default Alert;\n"],"names":["Alert","MuiAlert"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,QAAQ,WAAuC,SAASA,OACnE,IACA,KACA;AAFA,eAAE,aAAW,QAAQ,UAAU,YAAY,UAAU,SAAS,SAA9D,IAAuE,iBAAvE,IAAuE,CAArE,YAAmB,WAAsB,YAAU,WAAS;AAG9D,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQE;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/chunks/Alert-CLBHE4sH.cjs

@@ -0,0 +1,52 @@
+"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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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;
+};
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const Alert = React.forwardRef(function Alert2(_a, ref) {
+  var _b = _a, { severity = "info", variant = "standard", children, onClose, icon } = _b, rest = __objRest(_b, ["severity", "variant", "children", "onClose", "icon"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Alert,
+    __spreadProps(__spreadValues({
+      ref,
+      severity,
+      variant,
+      onClose,
+      icon
+    }, rest), {
+      children
+    })
+  );
+});
+exports.Alert = Alert;
+//# sourceMappingURL=Alert-CLBHE4sH.cjs.map

package/chunks/Alert-CLBHE4sH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert-CLBHE4sH.cjs","sources":["../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport { Alert as MuiAlert, type AlertProps as MuiAlertProps } from '@mui/material';\n\nexport type AlertSeverity = 'error' | 'warning' | 'info' | 'success';\nexport type AlertVariant = 'standard' | 'filled' | 'outlined';\n\nexport interface AlertProps\n  extends Omit<MuiAlertProps, 'severity' | 'variant' | 'onClose' | 'icon'> {\n  /** Color + icono. Default: `info`. */\n  severity?: AlertSeverity;\n  /** Estilo visual. Default: `standard`. */\n  variant?: AlertVariant;\n  /** Contenido del alert (texto o JSX arbitrario). */\n  children?: ReactNode;\n  /** Si se provee, muestra la X de cerrar y la invoca al click. */\n  onClose?: () => void;\n  /** Icono custom, o `false` para ocultarlo. */\n  icon?: ReactNode | false;\n}\n\n/**\n * Aviso inline flexible (banner). Wrapper fino sobre MUI `Alert` — para\n * mensajes contextuales con contenido arbitrario y las 4 severidades\n * (error/warning/info/success).\n *\n * Distinto de `StatusMessage`, que es feedback opinado de formularios\n * (title+description, success/danger/warning, modo alert o modal).\n */\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { severity = 'info', variant = 'standard', children, onClose, icon, ...rest },\n  ref,\n) {\n  return (\n    <MuiAlert\n      ref={ref}\n      severity={severity}\n      variant={variant}\n      onClose={onClose}\n      icon={icon}\n      {...rest}\n    >\n      {children}\n    </MuiAlert>\n  );\n});\n\nexport default Alert;\n"],"names":["forwardRef","Alert","jsx","MuiAlert"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,QAAQA,MAAAA,WAAuC,SAASC,OACnE,IACA,KACA;AAFA,eAAE,aAAW,QAAQ,UAAU,YAAY,UAAU,SAAS,SAA9D,IAAuE,iBAAvE,IAAuE,CAArE,YAAmB,WAAsB,YAAU,WAAS;AAG9D,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQE;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;"}