@soyfri/shared-library 2.0.0-beta.13 → 2.0.0-beta.15

package/Tab-BxSxKJsP.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useState } from "react";
+import { Box, Tabs as Tabs$1, Tab as Tab$1 } from "@mui/material";
+import { m as mergeSx } from "./mergeSx-BXoNZjB_.js";
+const TAB_DISPLAY_MAP = {
+  horizontal: { display: "flex", flexDirection: "column" },
+  vertical: { display: "flex", flexDirection: "row" }
+};
+const Tabs = ({
+  children,
+  defaultValue,
+  onChangeValue,
+  centered = true,
+  orientation = "horizontal",
+  scrollButtons = "auto",
+  variant = "standard",
+  indicatorColor = "primary",
+  labelColor = "primary",
+  className,
+  allowScrollButtonsMobile = true,
+  keepMounted = false,
+  sx
+}) => {
+  var _a, _b;
+  const tabs = Children.toArray(children).filter(
+    (child) => {
+      var _a2;
+      return isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Tab";
+    }
+  );
+  const firstValue = (_a = tabs[0]) == null ? void 0 : _a.props.value;
+  const [currentValue, setCurrentValue] = useState(
+    (_b = defaultValue != null ? defaultValue : firstValue) != null ? _b : 0
+  );
+  const handleChange = (_event, newValue) => {
+    setCurrentValue(newValue);
+    onChangeValue == null ? void 0 : onChangeValue(newValue);
+  };
+  const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
+  return /* @__PURE__ */ jsxs(Box, { sx: { display, flexDirection }, children: [
+    /* @__PURE__ */ jsx(
+      Tabs$1,
+      {
+        value: currentValue,
+        onChange: handleChange,
+        centered,
+        indicatorColor,
+        orientation,
+        scrollButtons,
+        variant,
+        className,
+        textColor: labelColor,
+        allowScrollButtonsMobile,
+        sx: mergeSx({}, sx),
+        children: tabs.map((tab, idx) => {
+          const {
+            label,
+            icon,
+            value = idx,
+            disabled,
+            wrapped,
+            iconPosition,
+            className: tabClassName,
+            sx: tabSx
+          } = tab.props;
+          return /* @__PURE__ */ jsx(
+            Tab$1,
+            {
+              label,
+              icon,
+              value,
+              disabled,
+              wrapped,
+              iconPosition,
+              className: tabClassName,
+              sx: tabSx
+            },
+            value
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
+      var _a2;
+      const value = (_a2 = tab.props.value) != null ? _a2 : idx;
+      const isActive = value === currentValue;
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          role: "tabpanel",
+          sx: { display: isActive ? "block" : "none" },
+          "aria-hidden": !isActive,
+          children: tab.props.children
+        },
+        value
+      );
+    }) : tabs.map((tab, idx) => {
+      var _a2;
+      const value = (_a2 = tab.props.value) != null ? _a2 : idx;
+      if (value !== currentValue) return null;
+      return /* @__PURE__ */ jsx(Box, { role: "tabpanel", children: tab.props.children }, value);
+    }) })
+  ] });
+};
+const Tab = (_) => null;
+Tab.displayName = "Tab";
+export {
+  Tabs as T,
+  Tab as a
+};
+//# sourceMappingURL=Tab-BxSxKJsP.js.map

package/Tab-BxSxKJsP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab-BxSxKJsP.js","sources":["../src/components/Tabs/_tabUtils.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/Tab.tsx"],"sourcesContent":["export const TAB_DISPLAY_MAP: Record<\"horizontal\" | \"vertical\", { display: string, flexDirection: string }> = {\n  horizontal: { display: \"flex\", flexDirection: \"column\" },\n  vertical: { display: \"flex\", flexDirection: \"row\" }\n};","import {\n  Children,\n  isValidElement,\n  useState,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n  type SyntheticEvent,\n} from 'react';\nimport {\n  Tabs as MuiTabs,\n  Tab as MuiTab,\n  Box,\n  type TabsProps as MuiTabsProps,\n} from '@mui/material';\n\nimport { TabProps } from './Tab';\nimport { TAB_DISPLAY_MAP } from './_tabUtils';\nimport { mergeSx } from '../_shared/mergeSx';\n\ntype PickTabsProps = Pick<\n  MuiTabsProps,\n  | 'centered'\n  | 'indicatorColor'\n  | 'orientation'\n  | 'scrollButtons'\n  | 'variant'\n  | 'className'\n  | 'sx'\n  | 'visibleScrollbar'\n  | 'allowScrollButtonsMobile'\n>;\n\nexport interface TabsProps extends PickTabsProps {\n  /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */\n  children: ReactNode;\n  /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */\n  defaultValue?: number | string;\n  /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */\n  onChangeValue?: (newValue: number | string) => void;\n  labelColor?: 'primary' | 'secondary' | 'inherit';\n  /**\n   * Cómo se manejan los paneles al cambiar de tab:\n   * - `false` (default): **unmount** — solo se renderiza el panel activo; los\n   *   demás se desmontan. El state interno de los hijos se pierde al navegar.\n   *   Menor uso de memoria.\n   * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los\n   *   no activos con `display: none`. El state se preserva (inputs, scroll,\n   *   timers, subscripciones) al navegar entre tabs.\n   */\n  keepMounted?: boolean;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  children,\n  defaultValue,\n  onChangeValue,\n  centered = true,\n  orientation = 'horizontal',\n  scrollButtons = 'auto',\n  variant = 'standard',\n  indicatorColor = 'primary',\n  labelColor = 'primary',\n  className,\n  allowScrollButtonsMobile = true,\n  keepMounted = false,\n  sx,\n}) => {\n  // Filtra a solo <Tab> children — acepta arrays, single child, fragments,\n  // y descarta cualquier otra cosa (strings, null, condicionales falsy).\n  const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(\n    (child): child is ReactElement<TabProps> =>\n      isValidElement(child) &&\n      (child.type as { displayName?: string })?.displayName === 'Tab',\n  );\n\n  const firstValue = tabs[0]?.props.value;\n  const [currentValue, setCurrentValue] = useState<string | number>(\n    defaultValue ?? firstValue ?? 0,\n  );\n\n  const handleChange = (_event: SyntheticEvent, newValue: number | string) => {\n    setCurrentValue(newValue);\n    onChangeValue?.(newValue);\n  };\n\n  const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];\n\n  return (\n    <Box sx={{ display, flexDirection }}>\n      <MuiTabs\n        value={currentValue}\n        onChange={handleChange}\n        centered={centered}\n        indicatorColor={indicatorColor}\n        orientation={orientation}\n        scrollButtons={scrollButtons}\n        variant={variant}\n        className={className}\n        textColor={labelColor}\n        allowScrollButtonsMobile={allowScrollButtonsMobile}\n        sx={mergeSx({}, sx)}\n      >\n        {tabs.map((tab, idx) => {\n          const {\n            label,\n            icon,\n            value = idx,\n            disabled,\n            wrapped,\n            iconPosition,\n            className: tabClassName,\n            sx: tabSx,\n          } = tab.props;\n          return (\n            <MuiTab\n              key={value}\n              label={label}\n              icon={icon}\n              value={value}\n              disabled={disabled}\n              wrapped={wrapped}\n              iconPosition={iconPosition}\n              className={tabClassName}\n              sx={tabSx}\n            />\n          );\n        })}\n      </MuiTabs>\n\n      <Box m={2} sx={{ width: '100%' }}>\n        {keepMounted\n          ? tabs.map((tab, idx) => {\n            const value = tab.props.value ?? idx;\n            const isActive = value === currentValue;\n            return (\n              <Box\n                key={value}\n                role=\"tabpanel\"\n                // `display: none` mantiene el nodo en el DOM — state de los\n                // hijos (inputs, useState, etc.) no se pierde al navegar.\n                sx={{ display: isActive ? 'block' : 'none' }}\n                aria-hidden={!isActive}\n              >\n                {tab.props.children}\n              </Box>\n            );\n          })\n          : tabs.map((tab, idx) => {\n            const value = tab.props.value ?? idx;\n            if (value !== currentValue) return null;\n            return (\n              <Box key={value} role=\"tabpanel\">\n                {tab.props.children}\n              </Box>\n            );\n          })}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { TabProps as MuiTabProps } from \"@mui/material\";\n\ntype PickMuiTabProps = Pick<\n  MuiTabProps,\n  \"label\" | \"icon\" | \"disabled\" | \"sx\" | \"value\" | \"wrapped\" | \"iconPosition\" | \"className\" | \"disabled\"| 'disableRipple'\n>;\n\nexport interface TabProps extends PickMuiTabProps {\n  value?: number;\n  onChange?: () => void;\n  children?: React.ReactNode;\n}\n\nexport const Tab = (_: TabProps): null => null;\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"],"names":["_a","MuiTabs","MuiTab"],"mappings":";;;;AAAO,MAAM,kBAAiG;AAAA,EAC5G,YAAY,EAAE,SAAS,QAAQ,eAAe,SAAA;AAAA,EAC9C,UAAU,EAAE,SAAS,QAAQ,eAAe,MAAA;AAC9C;ACkDO,MAAM,OAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd;AACF,MAAM;;AAGJ,QAAM,OAAiC,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAChE,CAAC,UAAA;;AACC,4BAAe,KAAK,OACnBA,MAAA,MAAM,SAAN,gBAAAA,IAAyC,iBAAgB;AAAA;AAAA,EAAA;AAG9D,QAAM,cAAa,UAAK,CAAC,MAAN,mBAAS,MAAM;AAClC,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACtC,2CAAgB,eAAhB,YAA8B;AAAA,EAAA;AAGhC,QAAM,eAAe,CAAC,QAAwB,aAA8B;AAC1E,oBAAgB,QAAQ;AACxB,mDAAgB;AAAA,EAClB;AAEA,QAAM,EAAE,SAAS,kBAAkB,gBAAgB,WAAW;AAE9D,8BACG,KAAA,EAAI,IAAI,EAAE,SAAS,iBAClB,UAAA;AAAA,IAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,IAAI,QAAQ,CAAA,GAAI,EAAE;AAAA,QAEjB,UAAA,KAAK,IAAI,CAAC,KAAK,QAAQ;AACtB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,IAAI;AAAA,UAAA,IACF,IAAI;AACR,iBACE;AAAA,YAACC;AAAAA,YAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,IAAI;AAAA,YAAA;AAAA,YARC;AAAA,UAAA;AAAA,QAWX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,oBAAC,KAAA,EAAI,GAAG,GAAG,IAAI,EAAE,OAAO,OAAA,GACrB,UAAA,cACG,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACvB,YAAM,SAAQF,MAAA,IAAI,MAAM,UAAV,OAAAA,MAAmB;AACjC,YAAM,WAAW,UAAU;AAC3B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UAGL,IAAI,EAAE,SAAS,WAAW,UAAU,OAAA;AAAA,UACpC,eAAa,CAAC;AAAA,UAEb,cAAI,MAAM;AAAA,QAAA;AAAA,QAPN;AAAA,MAAA;AAAA,IAUX,CAAC,IACC,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACvB,YAAM,SAAQA,MAAA,IAAI,MAAM,UAAV,OAAAA,MAAmB;AACjC,UAAI,UAAU,aAAc,QAAO;AACnC,iCACG,KAAA,EAAgB,MAAK,YACnB,UAAA,IAAI,MAAM,YADH,KAEV;AAAA,IAEJ,CAAC,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;AClJO,MAAM,MAAM,CAAC,MAAsB;AAE1C,IAAI,cAAc;"}

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

package/components/ActionMenu/ActionMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.cjs","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, { useState, type ReactNode, type MouseEvent } from 'react';\nimport {\n  IconButton,\n  Menu,\n  MenuItem,\n  ListItemIcon,\n  ListItemText,\n  Divider,\n  Tooltip,\n} from '@mui/material';\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface ActionMenuItem {\n  /** Key única para React. Si no se provee, se usa el label. */\n  key?: string;\n  /** Texto del item. */\n  label: ReactNode;\n  /** Icono opcional a la izquierda. */\n  icon?: ReactNode;\n  /** Handler de click. Recibe el evento del MenuItem. */\n  onClick?: (event: MouseEvent<HTMLLIElement>) => void;\n  /** Deshabilita el item. */\n  disabled?: boolean;\n  /** Marca el item como destructivo (pinta color error). */\n  danger?: boolean;\n  /** Inserta un `<Divider />` ANTES de este item. */\n  dividerBefore?: boolean;\n}\n\nexport interface ActionMenuProps {\n  /** Lista de items del menú. */\n  items: ActionMenuItem[];\n  /**\n   * Elemento trigger. Si no se provee, se renderiza un IconButton con icono\n   * de tres puntos (MoreVertIcon) — el patrón típico de celda de tabla.\n   */\n  trigger?: ReactNode;\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  className?: string;\n}\n\n/**\n * Menú de acciones compacto, pensado para celdas de tabla y cabeceras.\n * Reemplaza los patrones `<Dropdown>` de react-bootstrap.\n *\n * ```tsx\n * <ActionMenu\n *   items={[\n *     { label: 'Editar', icon: <EditIcon />, onClick: handleEdit },\n *     { label: 'Duplicar', icon: <CopyIcon />, onClick: handleDup },\n *     { label: 'Eliminar', icon: <TrashIcon />, onClick: handleDel, danger: true, dividerBefore: true },\n *   ]}\n * />\n * ```\n */\nexport function ActionMenu({\n  items,\n  trigger,\n  triggerTooltip = 'Acciones',\n  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },\n  transformOrigin = { vertical: 'top', horizontal: 'right' },\n  menuSx,\n  disabled = false,\n  className,\n}: ActionMenuProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n\n  const handleOpen = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) return;\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => setAnchorEl(null);\n\n  const handleItemClick = (\n    event: MouseEvent<HTMLLIElement>,\n    item: ActionMenuItem,\n  ) => {\n    event.stopPropagation();\n    item.onClick?.(event);\n    handleClose();\n  };\n\n  const triggerElement = trigger ? (\n    React.isValidElement(trigger) ? (\n      React.cloneElement(trigger as React.ReactElement<any>, {\n        onClick: handleOpen,\n        disabled,\n      })\n    ) : (\n      <span onClick={handleOpen}>{trigger}</span>\n    )\n  ) : (\n    <Tooltip title={triggerTooltip} arrow>\n      <span>\n        <IconButton\n          size=\"small\"\n          onClick={handleOpen}\n          disabled={disabled}\n          aria-label={triggerTooltip}\n        >\n          <MoreVertIcon fontSize=\"small\" />\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n\n  return (\n    <span className={className}>\n      {triggerElement}\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        slotProps={{ paper: { sx: { minWidth: 180, ...(menuSx as any) } } }}\n      >\n        {items.map((item, idx) => {\n          const key = item.key ?? `${String(item.label)}-${idx}`;\n          const node = (\n            <MenuItem\n              key={key}\n              disabled={item.disabled}\n              onClick={(event) => handleItemClick(event, item)}\n              sx={(theme) => ({\n                color: item.danger ? theme.palette.error.main : 'inherit',\n                '& .MuiListItemIcon-root': {\n                  color: item.danger\n                    ? theme.palette.error.main\n                    : 'inherit',\n                  minWidth: 32,\n                },\n              })}\n            >\n              {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}\n              <ListItemText primary={item.label} />\n            </MenuItem>\n          );\n\n          if (item.dividerBefore && idx > 0) {\n            return (\n              <React.Fragment key={`${key}-frag`}>\n                <Divider />\n                {node}\n              </React.Fragment>\n            );\n          }\n          return node;\n        })}\n      </Menu>\n    </span>\n  );\n}\n\nexport default ActionMenu;\n"],"names":["useState","jsx","Tooltip","IconButton","jsxs","Menu","MenuItem","ListItemIcon","ListItemText","Divider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,eAAe,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EACjD,kBAAkB,EAAE,UAAU,OAAO,YAAY,QAAA;AAAA,EACjD;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAAoB;AAClB,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAE7B,QAAM,aAAa,CAAC,UAAmC;AACrD,QAAI,SAAU;AACd,UAAM,gBAAA;AACN,gBAAY,MAAM,aAAa;AAAA,EACjC;AAEA,QAAM,cAAc,MAAM,YAAY,IAAI;AAE1C,QAAM,kBAAkB,CACtB,OACA,SACG;;AACH,UAAM,gBAAA;AACN,eAAK,YAAL,8BAAe;AACf,gBAAA;AAAA,EACF;AAEA,QAAM,iBAAiB,UACrB,MAAM,eAAe,OAAO,IAC1B,MAAM,aAAa,SAAoC;AAAA,IACrD,SAAS;AAAA,IACT;AAAA,EAAA,CACD,IAEDC,2BAAAA,IAAC,QAAA,EAAK,SAAS,YAAa,UAAA,QAAA,CAAQ,IAGtCA,2BAAAA,IAACC,SAAAA,WAAQ,OAAO,gBAAgB,OAAK,MACnC,yCAAC,QAAA,EACC,UAAAD,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,SACEG,gCAAC,UAAK,WACH,UAAA;AAAA,IAAA;AAAA,IACDH,2BAAAA;AAAAA,MAACI,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,EAAE,OAAO,EAAE,IAAI,iBAAE,UAAU,OAAS,UAAiB;AAAA,QAE/D,UAAA,MAAM,IAAI,CAAC,MAAM,QAAQ;;AACxB,gBAAM,OAAM,UAAK,QAAL,YAAY,GAAG,OAAO,KAAK,KAAK,CAAC,IAAI,GAAG;AACpD,gBAAM,OACJD,2BAAAA;AAAAA,YAACE,SAAAA;AAAAA,YAAA;AAAA,cAEC,UAAU,KAAK;AAAA,cACf,SAAS,CAAC,UAAU,gBAAgB,OAAO,IAAI;AAAA,cAC/C,IAAI,CAAC,WAAW;AAAA,gBACd,OAAO,KAAK,SAAS,MAAM,QAAQ,MAAM,OAAO;AAAA,gBAChD,2BAA2B;AAAA,kBACzB,OAAO,KAAK,SACR,MAAM,QAAQ,MAAM,OACpB;AAAA,kBACJ,UAAU;AAAA,gBAAA;AAAA,cACZ;AAAA,cAGD,UAAA;AAAA,gBAAA,KAAK,QAAQL,+BAACM,SAAAA,cAAA,EAAc,UAAA,KAAK,MAAK;AAAA,gBACvCN,2BAAAA,IAACO,SAAAA,cAAA,EAAa,SAAS,KAAK,MAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAd9B;AAAA,UAAA;AAkBT,cAAI,KAAK,iBAAiB,MAAM,GAAG;AACjC,mBACEJ,gCAAC,MAAM,UAAN,EACC,UAAA;AAAA,cAAAH,2BAAAA,IAACQ,SAAAA,SAAA,EAAQ;AAAA,cACR;AAAA,YAAA,EAAA,GAFkB,GAAG,GAAG,OAG3B;AAAA,UAEJ;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;;"}
+{"version":3,"file":"ActionMenu.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      <IconButton\n        size=\"small\"\n        onClick={openMenu}\n        disabled={disabled}\n        aria-label={triggerTooltip}\n      >\n        <MoreVertIcon fontSize=\"small\" />\n      </IconButton>\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,WAAQ,OAAO,gBAAgB,OAAK,MACnC,UAAAD,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;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/components/ActionMenu/ActionMenu.d.ts

@@ -1,29 +1,15 @@
-import { ReactNode, MouseEvent } from 'react';
+import { default as React, ReactElement, ReactNode, MouseEvent } from 'react';
+import { MenuItemProps as MuiMenuItemProps } from '@mui/material';
 import { SxProps, Theme } from '@mui/material/styles';
-export interface ActionMenuItem {
-    /** Key única para React. Si no se provee, se usa el label. */
-    key?: string;
-    /** Texto del item. */
-    label: ReactNode;
-    /** Icono opcional a la izquierda. */
-    icon?: ReactNode;
-    /** Handler de click. Recibe el evento del MenuItem. */
-    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
-    /** Deshabilita el item. */
-    disabled?: boolean;
-    /** Marca el item como destructivo (pinta color error). */
-    danger?: boolean;
-    /** Inserta un `<Divider />` ANTES de este item. */
-    dividerBefore?: boolean;
-}
 export interface ActionMenuProps {
-    /** Lista de items del menú. */
-    items: ActionMenuItem[];
+    /** Items del menú. Normalmente `<ActionMenuItem>` o `<Divider />`. */
+    children: ReactNode;
     /**
-     * Elemento trigger. Si no se provee, se renderiza un IconButton con icono
-     * de tres puntos (MoreVertIcon) — el patrón típico de celda de tabla.
+     * Elemento disparador — cualquier componente clickeable (Button, Chip, IconButton…).
+     * El ActionMenu le inyecta `onClick` automáticamente. Si se omite, se usa un
+     * IconButton de tres puntos por defecto.
      */
-    trigger?: ReactNode;
+    trigger?: ReactElement;
     /** Texto de tooltip sobre el trigger default. Default: "Acciones". */
     triggerTooltip?: string;
     /** Anchor origin del menu. Default: { vertical: 'bottom', horizontal: 'right' }. */
@@ -40,21 +26,19 @@ export interface ActionMenuProps {
     menuSx?: SxProps<Theme>;
     /** Deshabilita el trigger entero. */
     disabled?: boolean;
-    className?: string;
+}
+export declare const ActionMenu: React.FC<ActionMenuProps>;
+export interface ActionMenuItemProps extends Omit<MuiMenuItemProps, 'children' | 'onClick'> {
+    /** Icono opcional a la izquierda. */
+    icon?: ReactNode;
+    /** Texto (o nodo) del item. */
+    children: ReactNode;
+    /** Handler de click. El menú se cierra automáticamente después. */
+    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
 }
 /**
- * Menú de acciones compacto, pensado para celdas de tabla y cabeceras.
- * Reemplaza los patrones `<Dropdown>` de react-bootstrap.
- *
- * ```tsx
- * <ActionMenu
- *   items={[
- *     { label: 'Editar', icon: <EditIcon />, onClick: handleEdit },
- *     { label: 'Duplicar', icon: <CopyIcon />, onClick: handleDup },
- *     { label: 'Eliminar', icon: <TrashIcon />, onClick: handleDel, danger: true, dividerBefore: true },
- *   ]}
- * />
- * ```
+ * Item del `ActionMenu`. Se cierra automáticamente al hacer click.
+ * Acepta todos los props de `MenuItem` de MUI (disabled, selected, sx, …).
  */
-export declare function ActionMenu({ items, trigger, triggerTooltip, anchorOrigin, transformOrigin, menuSx, disabled, className, }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare const ActionMenuItem: React.ForwardRefExoticComponent<Omit<ActionMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export default ActionMenu;

package/components/ActionMenu/ActionMenu.js

@@ -1,4 +1,6 @@
 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;
@@ -14,48 +16,59 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useState } from "react";
-import { Tooltip, IconButton, Menu, MenuItem, ListItemIcon, ListItemText, Divider } from "@mui/material";
+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 { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default, { createContext, forwardRef, useContext, useState } from "react";
+import { MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton, Menu } from "@mui/material";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-function ActionMenu({
-  items,
+const ActionMenuContext = 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] = 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__default.isValidElement(trigger) ? React__default.cloneElement(trigger, {
-    onClick: handleOpen,
+  const triggerElement = trigger ? React__default.cloneElement(trigger, {
+    onClick: openMenu,
     disabled
-  }) : /* @__PURE__ */ jsx("span", { onClick: handleOpen, children: trigger }) : /* @__PURE__ */ jsx(Tooltip, { title: triggerTooltip, arrow: true, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+  }) : /* @__PURE__ */ jsx(Tooltip, { title: triggerTooltip, arrow: true, children: /* @__PURE__ */ jsx(
     IconButton,
     {
       size: "small",
-      onClick: handleOpen,
+      onClick: openMenu,
       disabled,
       "aria-label": triggerTooltip,
       children: /* @__PURE__ */ jsx(MoreVertIcon, { fontSize: "small" })
     }
-  ) }) });
-  return /* @__PURE__ */ jsxs("span", { className, children: [
+  ) });
+  const paperSx = [
+    { minWidth: 180 },
+    ...Array.isArray(menuSx) ? menuSx : menuSx ? [menuSx] : []
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     triggerElement,
     /* @__PURE__ */ jsx(
       Menu,
@@ -65,43 +78,30 @@ 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__ */ jsxs(
-            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__ */ jsx(ListItemIcon, { children: item.icon }),
-                /* @__PURE__ */ jsx(ListItemText, { primary: item.label })
-              ]
-            },
-            key
-          );
-          if (item.dividerBefore && idx > 0) {
-            return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-              /* @__PURE__ */ jsx(Divider, {}),
-              node
-            ] }, `${key}-frag`);
-          }
-          return node;
-        })
+        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,
+  ActionMenuItem,
   ActionMenu as default
 };
 //# sourceMappingURL=ActionMenu.js.map

package/components/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, { useState, type ReactNode, type MouseEvent } from 'react';\nimport {\n  IconButton,\n  Menu,\n  MenuItem,\n  ListItemIcon,\n  ListItemText,\n  Divider,\n  Tooltip,\n} from '@mui/material';\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface ActionMenuItem {\n  /** Key única para React. Si no se provee, se usa el label. */\n  key?: string;\n  /** Texto del item. */\n  label: ReactNode;\n  /** Icono opcional a la izquierda. */\n  icon?: ReactNode;\n  /** Handler de click. Recibe el evento del MenuItem. */\n  onClick?: (event: MouseEvent<HTMLLIElement>) => void;\n  /** Deshabilita el item. */\n  disabled?: boolean;\n  /** Marca el item como destructivo (pinta color error). */\n  danger?: boolean;\n  /** Inserta un `<Divider />` ANTES de este item. */\n  dividerBefore?: boolean;\n}\n\nexport interface ActionMenuProps {\n  /** Lista de items del menú. */\n  items: ActionMenuItem[];\n  /**\n   * Elemento trigger. Si no se provee, se renderiza un IconButton con icono\n   * de tres puntos (MoreVertIcon) — el patrón típico de celda de tabla.\n   */\n  trigger?: ReactNode;\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  className?: string;\n}\n\n/**\n * Menú de acciones compacto, pensado para celdas de tabla y cabeceras.\n * Reemplaza los patrones `<Dropdown>` de react-bootstrap.\n *\n * ```tsx\n * <ActionMenu\n *   items={[\n *     { label: 'Editar', icon: <EditIcon />, onClick: handleEdit },\n *     { label: 'Duplicar', icon: <CopyIcon />, onClick: handleDup },\n *     { label: 'Eliminar', icon: <TrashIcon />, onClick: handleDel, danger: true, dividerBefore: true },\n *   ]}\n * />\n * ```\n */\nexport function ActionMenu({\n  items,\n  trigger,\n  triggerTooltip = 'Acciones',\n  anchorOrigin = { vertical: 'bottom', horizontal: 'right' },\n  transformOrigin = { vertical: 'top', horizontal: 'right' },\n  menuSx,\n  disabled = false,\n  className,\n}: ActionMenuProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n\n  const handleOpen = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) return;\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => setAnchorEl(null);\n\n  const handleItemClick = (\n    event: MouseEvent<HTMLLIElement>,\n    item: ActionMenuItem,\n  ) => {\n    event.stopPropagation();\n    item.onClick?.(event);\n    handleClose();\n  };\n\n  const triggerElement = trigger ? (\n    React.isValidElement(trigger) ? (\n      React.cloneElement(trigger as React.ReactElement<any>, {\n        onClick: handleOpen,\n        disabled,\n      })\n    ) : (\n      <span onClick={handleOpen}>{trigger}</span>\n    )\n  ) : (\n    <Tooltip title={triggerTooltip} arrow>\n      <span>\n        <IconButton\n          size=\"small\"\n          onClick={handleOpen}\n          disabled={disabled}\n          aria-label={triggerTooltip}\n        >\n          <MoreVertIcon fontSize=\"small\" />\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n\n  return (\n    <span className={className}>\n      {triggerElement}\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        slotProps={{ paper: { sx: { minWidth: 180, ...(menuSx as any) } } }}\n      >\n        {items.map((item, idx) => {\n          const key = item.key ?? `${String(item.label)}-${idx}`;\n          const node = (\n            <MenuItem\n              key={key}\n              disabled={item.disabled}\n              onClick={(event) => handleItemClick(event, item)}\n              sx={(theme) => ({\n                color: item.danger ? theme.palette.error.main : 'inherit',\n                '& .MuiListItemIcon-root': {\n                  color: item.danger\n                    ? theme.palette.error.main\n                    : 'inherit',\n                  minWidth: 32,\n                },\n              })}\n            >\n              {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}\n              <ListItemText primary={item.label} />\n            </MenuItem>\n          );\n\n          if (item.dividerBefore && idx > 0) {\n            return (\n              <React.Fragment key={`${key}-frag`}>\n                <Divider />\n                {node}\n              </React.Fragment>\n            );\n          }\n          return node;\n        })}\n      </Menu>\n    </span>\n  );\n}\n\nexport default ActionMenu;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,eAAe,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EACjD,kBAAkB,EAAE,UAAU,OAAO,YAAY,QAAA;AAAA,EACjD;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAAoB;AAClB,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAE7B,QAAM,aAAa,CAAC,UAAmC;AACrD,QAAI,SAAU;AACd,UAAM,gBAAA;AACN,gBAAY,MAAM,aAAa;AAAA,EACjC;AAEA,QAAM,cAAc,MAAM,YAAY,IAAI;AAE1C,QAAM,kBAAkB,CACtB,OACA,SACG;;AACH,UAAM,gBAAA;AACN,eAAK,YAAL,8BAAe;AACf,gBAAA;AAAA,EACF;AAEA,QAAM,iBAAiB,UACrBA,eAAM,eAAe,OAAO,IAC1BA,eAAM,aAAa,SAAoC;AAAA,IACrD,SAAS;AAAA,IACT;AAAA,EAAA,CACD,IAED,oBAAC,QAAA,EAAK,SAAS,YAAa,UAAA,QAAA,CAAQ,IAGtC,oBAAC,WAAQ,OAAO,gBAAgB,OAAK,MACnC,8BAAC,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,SACE,qBAAC,UAAK,WACH,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,iBAAE,UAAU,OAAS,UAAiB;AAAA,QAE/D,UAAA,MAAM,IAAI,CAAC,MAAM,QAAQ;;AACxB,gBAAM,OAAM,UAAK,QAAL,YAAY,GAAG,OAAO,KAAK,KAAK,CAAC,IAAI,GAAG;AACpD,gBAAM,OACJ;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,UAAU,KAAK;AAAA,cACf,SAAS,CAAC,UAAU,gBAAgB,OAAO,IAAI;AAAA,cAC/C,IAAI,CAAC,WAAW;AAAA,gBACd,OAAO,KAAK,SAAS,MAAM,QAAQ,MAAM,OAAO;AAAA,gBAChD,2BAA2B;AAAA,kBACzB,OAAO,KAAK,SACR,MAAM,QAAQ,MAAM,OACpB;AAAA,kBACJ,UAAU;AAAA,gBAAA;AAAA,cACZ;AAAA,cAGD,UAAA;AAAA,gBAAA,KAAK,QAAQ,oBAAC,cAAA,EAAc,UAAA,KAAK,MAAK;AAAA,gBACvC,oBAAC,cAAA,EAAa,SAAS,KAAK,MAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAd9B;AAAA,UAAA;AAkBT,cAAI,KAAK,iBAAiB,MAAM,GAAG;AACjC,mBACE,qBAACA,eAAM,UAAN,EACC,UAAA;AAAA,cAAA,oBAAC,SAAA,EAAQ;AAAA,cACR;AAAA,YAAA,EAAA,GAFkB,GAAG,GAAG,OAG3B;AAAA,UAEJ;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"ActionMenu.js","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      <IconButton\n        size=\"small\"\n        onClick={openMenu}\n        disabled={disabled}\n        aria-label={triggerTooltip}\n      >\n        <MoreVertIcon fontSize=\"small\" />\n      </IconButton>\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,WAAQ,OAAO,gBAAgB,OAAK,MACnC,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;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/components/ActionMenu/index.d.ts

@@ -1,2 +1,2 @@
-export { ActionMenu, default } from './ActionMenu';
-export type { ActionMenuProps, ActionMenuItem } from './ActionMenu';
+export { ActionMenu, ActionMenuItem, default } from './ActionMenu';
+export type { ActionMenuProps, ActionMenuItemProps } from './ActionMenu';