@soyfri/shared-library 1.5.0-beta.4 → 2.0.0-beta.0

package/dist/components/Modal/Modal.js

@@ -0,0 +1,319 @@
+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 { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default, { forwardRef, useState, useImperativeHandle } from "react";
+import { Box, Stack, Button, Typography, useTheme, useMediaQuery, Modal as Modal$1, Paper } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+const ModalFooter = ({
+  // Renombrado
+  children,
+  showCloseButton = true,
+  closeButtonText = "Cerrar",
+  closeButtonDisabled = false,
+  onClose,
+  actions = []
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { sx: { padding: 2, borderTop: "1px solid #e0e0e0", display: "flex", justifyContent: "flex-end", gap: 1 }, children: [
+    children,
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+      showCloseButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: onClose,
+          disabled: closeButtonDisabled,
+          variant: "outlined",
+          color: "secondary",
+          children: closeButtonText
+        }
+      ),
+      actions.map((action, index) => {
+        const { buttonProps } = action;
+        return /* @__PURE__ */ jsx(
+          Button,
+          __spreadProps(__spreadValues({
+            onClick: action.onClick,
+            disabled: action.disabled,
+            variant: action.variant || "contained",
+            color: action.color || "primary"
+          }, buttonProps), {
+            children: action.text
+          }),
+          index
+        );
+      })
+    ] })
+  ] });
+};
+const ModalHeader = ({ children }) => {
+  return /* @__PURE__ */ jsx(Box, { sx: { padding: 2, borderBottom: "1px solid #e0e0e0", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "h2", children }) });
+};
+const ModalBody = ({ children }) => {
+  return /* @__PURE__ */ jsx(Box, { sx: { padding: 2, overflowY: "auto", flexGrow: 1 }, children });
+};
+const modalStyle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90%",
+  maxHeight: "90vh",
+  display: "flex",
+  flexDirection: "column",
+  outline: "none"
+};
+const severityConfig = {
+  info: {
+    color: "primary",
+    icon: /* @__PURE__ */ jsx(InfoOutlinedIcon, { sx: { fontSize: 48 } }),
+    bg: "primary.light"
+  },
+  warning: {
+    color: "warning",
+    icon: /* @__PURE__ */ jsx(WarningAmberIcon, { sx: { fontSize: 48 } }),
+    bg: "warning.light"
+  },
+  error: {
+    color: "error",
+    icon: /* @__PURE__ */ jsx(ErrorOutlineIcon, { sx: { fontSize: 48 } }),
+    bg: "error.light"
+  },
+  success: {
+    color: "success",
+    icon: /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { sx: { fontSize: 48 } }),
+    bg: "success.light"
+  }
+};
+const Modal = forwardRef(
+  ({
+    mode = "default",
+    open: controlledOpen,
+    onClose: controlledOnClose,
+    title,
+    children,
+    showCloseButton = true,
+    closeButtonText = "Cerrar",
+    closeButtonDisabled = false,
+    actions = [],
+    maxWidth = "sm",
+    hiddenFooter = false,
+    // Props del modo confirm
+    onConfirm,
+    confirmText = "Confirmar",
+    confirmDisabled = false,
+    severity = "info",
+    confirmMessage
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+    useImperativeHandle(ref, () => ({
+      open: () => setInternalOpen(true),
+      close: () => {
+        setInternalOpen(false);
+        controlledOnClose == null ? void 0 : controlledOnClose();
+      }
+    }));
+    const handleCloseInternal = () => {
+      setInternalOpen(false);
+      controlledOnClose == null ? void 0 : controlledOnClose();
+    };
+    const handleConfirm = async () => {
+      if (!onConfirm) {
+        handleCloseInternal();
+        return;
+      }
+      try {
+        const result = onConfirm();
+        if (result instanceof Promise) {
+          setConfirmLoading(true);
+          await result;
+        }
+      } finally {
+        setConfirmLoading(false);
+        handleCloseInternal();
+      }
+    };
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const getWidth = () => {
+      if (isMobile) return "95%";
+      switch (maxWidth) {
+        case "xs":
+          return 300;
+        case "sm":
+          return 500;
+        case "md":
+          return 700;
+        case "lg":
+          return 900;
+        case "xl":
+          return 1100;
+        case false:
+          return "auto";
+        default:
+          return 500;
+      }
+    };
+    if (mode === "confirm") {
+      const config = severityConfig[severity];
+      const message = confirmMessage != null ? confirmMessage : children;
+      return /* @__PURE__ */ jsx(
+        Modal$1,
+        {
+          open: isOpen,
+          onClose: handleCloseInternal,
+          "aria-labelledby": "modal-title",
+          closeAfterTransition: true,
+          children: /* @__PURE__ */ jsxs(Paper, { sx: __spreadProps(__spreadValues({}, modalStyle), { width: getWidth() }), children: [
+            /* @__PURE__ */ jsxs(Stack, { spacing: 2.5, sx: { p: 3, alignItems: "center", textAlign: "center" }, children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    width: 72,
+                    height: 72,
+                    borderRadius: "50%",
+                    backgroundColor: (t) => t.palette[severity === "info" ? "primary" : severity].light,
+                    color: (t) => t.palette[severity === "info" ? "primary" : severity].dark,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    opacity: 0.9
+                  },
+                  children: config.icon
+                }
+              ),
+              title && /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "h2", sx: { fontWeight: 700 }, children: title }),
+              message && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: message })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ModalFooter,
+              {
+                showCloseButton,
+                closeButtonText,
+                closeButtonDisabled: closeButtonDisabled || confirmLoading,
+                onClose: handleCloseInternal,
+                actions: [
+                  {
+                    text: confirmText,
+                    onClick: handleConfirm,
+                    disabled: confirmDisabled || confirmLoading,
+                    variant: "contained",
+                    color: config.color
+                  }
+                ]
+              }
+            )
+          ] })
+        }
+      );
+    }
+    const renderChildren = () => {
+      let header = null;
+      let body = null;
+      let footer = null;
+      React__default.Children.forEach(children, (child) => {
+        if (React__default.isValidElement(child)) {
+          if (child.type === ModalHeader) {
+            header = child;
+          } else if (child.type === ModalBody) {
+            body = child;
+          } else if (child.type === ModalFooter) {
+            const footerChild = child;
+            const _a = footerChild.props, {
+              showCloseButton: childShowCloseButton,
+              closeButtonText: childCloseButtonText,
+              closeButtonDisabled: childCloseButtonDisabled,
+              onClose: childOnClose,
+              actions: childActions
+            } = _a, restOfFooterProps = __objRest(_a, [
+              "showCloseButton",
+              "closeButtonText",
+              "closeButtonDisabled",
+              "onClose",
+              "actions"
+            ]);
+            footer = React__default.cloneElement(footerChild, __spreadValues({
+              showCloseButton,
+              closeButtonText,
+              closeButtonDisabled,
+              onClose: handleCloseInternal,
+              actions
+            }, restOfFooterProps));
+          }
+        }
+      });
+      if (!footer && !hiddenFooter) {
+        footer = /* @__PURE__ */ jsx(
+          ModalFooter,
+          {
+            showCloseButton,
+            closeButtonText,
+            closeButtonDisabled,
+            onClose: handleCloseInternal,
+            actions
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        header || title && /* @__PURE__ */ jsx(ModalHeader, { children: title }),
+        body,
+        footer
+      ] });
+    };
+    return /* @__PURE__ */ jsx(
+      Modal$1,
+      {
+        open: isOpen,
+        onClose: handleCloseInternal,
+        "aria-labelledby": "modal-title",
+        "aria-describedby": "modal-description",
+        closeAfterTransition: true,
+        children: /* @__PURE__ */ jsx(Paper, { sx: __spreadProps(__spreadValues({}, modalStyle), { width: getWidth() }), children: renderChildren() })
+      }
+    );
+  }
+);
+const ModalWithStatics = Modal;
+ModalWithStatics.Header = ModalHeader;
+ModalWithStatics.Body = ModalBody;
+ModalWithStatics.Footer = ModalFooter;
+export {
+  ModalWithStatics as Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/ModalFooter.tsx","../../../src/components/Modal/ModalHeader.tsx","../../../src/components/Modal/ModalBody.tsx","../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Button, Stack } from '@mui/material';\nimport { ButtonProps } from '@mui/material/Button';\n\n// Interfaz para acciones personalizadas (se mantiene aquí)\nexport interface ModalAction {\n  text: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  variant?: ButtonProps['variant'];\n  color?: ButtonProps['color'];\n  /**\n   * Props adicionales que se forwardean al `<Button>` interno. Útil para casos\n   * avanzados como conectar el botón con un `<form id=\"...\">` externo usando\n   * `buttonProps={{ type: 'submit', form: 'my-form-id' }}`.\n   */\n  buttonProps?: Partial<ButtonProps> & { form?: string };\n}\n\nexport interface ModalFooterProps { // Renombrado\n  children?: React.ReactNode;\n  showCloseButton?: boolean;\n  closeButtonText?: string;\n  closeButtonDisabled?: boolean;\n  onClose: () => void;\n  actions?: ModalAction[];\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ // Renombrado\n  children,\n  showCloseButton = true,\n  closeButtonText = \"Cerrar\",\n  closeButtonDisabled = false,\n  onClose,\n  actions = [],\n}) => {\n  return (\n    <Box sx={{ padding: 2, borderTop: '1px solid #e0e0e0', display: 'flex', justifyContent: 'flex-end', gap: 1 }}>\n      {children}\n      <Stack direction=\"row\" spacing={1}>\n        {showCloseButton && (\n          <Button\n            onClick={onClose}\n            disabled={closeButtonDisabled}\n            variant=\"outlined\"\n            color=\"secondary\"\n          >\n            {closeButtonText}\n          </Button>\n        )}\n        {actions.map((action, index) => {\n          const { buttonProps } = action;\n          return (\n            <Button\n              key={index}\n              onClick={action.onClick}\n              disabled={action.disabled}\n              variant={action.variant || 'contained'}\n              color={action.color || 'primary'}\n              {...(buttonProps as any)}\n            >\n              {action.text}\n            </Button>\n          );\n        })}\n      </Stack>\n    </Box>\n  );\n};\n\nexport default ModalFooter;","import React from 'react';\nimport { Box, Typography } from '@mui/material';\n\ninterface ModalHeaderProps { // Renombrado\n  children: React.ReactNode;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => { // Renombrado\n  return (\n    <Box sx={{ padding: 2, borderBottom: '1px solid #e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n      <Typography variant=\"h6\" component=\"h2\">\n        {children}\n      </Typography>\n    </Box>\n  );\n};\n\nexport default ModalHeader;","import React from 'react';\nimport { Box } from '@mui/material';\n\ninterface ModalBodyProps { // Renombrado\n  children: React.ReactNode;\n}\n\nexport const ModalBody: React.FC<ModalBodyProps> = ({ children }) => { // Renombrado\n  return (\n    <Box sx={{ padding: 2, overflowY: 'auto', flexGrow: 1 }}>\n      {children}\n    </Box>\n  );\n};\n\nexport default ModalBody;","import React, {\n  useState,\n  useImperativeHandle,\n  forwardRef,\n  type ReactNode,\n} from 'react';\nimport {\n  Modal as MuiModal,\n  Paper,\n  useTheme,\n  useMediaQuery,\n  Box,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';\n\nimport type { DialogProps } from '@mui/material/Dialog';\nimport { ModalAction, ModalFooter, ModalFooterProps } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\n\n// Define la interfaz para los métodos que el padre puede llamar a través de la ref\nexport interface ModalRef {\n  open: () => void;\n  close: () => void;\n}\n\nexport type ModalMode = 'default' | 'confirm';\nexport type ModalSeverity = 'info' | 'warning' | 'error' | 'success';\n\ninterface ModalProps {\n  /**\n   * Modo del modal.\n   * - `default` (default): modal genérico con slots `Header`/`Body`/`Footer` y\n   *   `actions` custom.\n   * - `confirm`: reemplaza al `ConfirmModal` legacy. Renderiza un layout\n   *   focalizado con icono por severidad, mensaje y botones \"Cancelar\" /\n   *   \"Confirmar\".\n   */\n  mode?: ModalMode;\n\n  // ── Props comunes ────────────────────────────────────────────────────\n  /** Controlado externamente. Omitir si se usa vía ref. */\n  open?: boolean;\n  /** Callback al cerrar. También se dispara al confirmar/cancelar. */\n  onClose?: () => void;\n  title?: string;\n  children?: ReactNode;\n  showCloseButton?: boolean;\n  closeButtonText?: string;\n  closeButtonDisabled?: boolean;\n  actions?: ModalAction[];\n  maxWidth?: DialogProps['maxWidth'];\n  hiddenFooter?: boolean;\n\n  // ── Props del modo confirm ───────────────────────────────────────────\n  /**\n   * Callback de confirmación. Soporta promesa — si devuelve `Promise`, el\n   * botón muestra estado `disabled` mientras resuelve.\n   */\n  onConfirm?: () => void | Promise<void>;\n  /** Texto del botón primario en modo `confirm`. Default: \"Confirmar\". */\n  confirmText?: string;\n  /** Deshabilita el botón de confirmar. */\n  confirmDisabled?: boolean;\n  /**\n   * Severidad visual en modo `confirm`. Controla el icono y el color del\n   * botón de confirmación.\n   * - `info` (default): primary\n   * - `warning`: warning (amarillo)\n   * - `error`: error (rojo) — típico para \"Eliminar\"\n   * - `success`: success (verde) — típico para \"Aprobar\"\n   */\n  severity?: ModalSeverity;\n  /**\n   * Mensaje del confirm. Puede ser string o cualquier ReactNode. Si se omite,\n   * se usa `children`.\n   */\n  confirmMessage?: ReactNode;\n}\n\nconst modalStyle = {\n  position: 'absolute' as const,\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: '90%',\n  maxHeight: '90vh',\n  display: 'flex',\n  flexDirection: 'column' as const,\n  outline: 'none',\n};\n\nconst severityConfig: Record<\n  ModalSeverity,\n  { color: ModalAction['color']; icon: ReactNode; bg: string }\n> = {\n  info: {\n    color: 'primary',\n    icon: <InfoOutlinedIcon sx={{ fontSize: 48 }} />,\n    bg: 'primary.light',\n  },\n  warning: {\n    color: 'warning',\n    icon: <WarningAmberIcon sx={{ fontSize: 48 }} />,\n    bg: 'warning.light',\n  },\n  error: {\n    color: 'error',\n    icon: <ErrorOutlineIcon sx={{ fontSize: 48 }} />,\n    bg: 'error.light',\n  },\n  success: {\n    color: 'success',\n    icon: <CheckCircleOutlineIcon sx={{ fontSize: 48 }} />,\n    bg: 'success.light',\n  },\n};\n\nexport const Modal = forwardRef<ModalRef, ModalProps>(\n  (\n    {\n      mode = 'default',\n      open: controlledOpen,\n      onClose: controlledOnClose,\n      title,\n      children,\n      showCloseButton = true,\n      closeButtonText = 'Cerrar',\n      closeButtonDisabled = false,\n      actions = [],\n      maxWidth = 'sm',\n      hiddenFooter = false,\n\n      // Props del modo confirm\n      onConfirm,\n      confirmText = 'Confirmar',\n      confirmDisabled = false,\n      severity = 'info',\n      confirmMessage,\n    },\n    ref,\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(false);\n    const [confirmLoading, setConfirmLoading] = useState(false);\n\n    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n    useImperativeHandle(ref, () => ({\n      open: () => setInternalOpen(true),\n      close: () => {\n        setInternalOpen(false);\n        controlledOnClose?.();\n      },\n    }));\n\n    const handleCloseInternal = () => {\n      setInternalOpen(false);\n      controlledOnClose?.();\n    };\n\n    const handleConfirm = async () => {\n      if (!onConfirm) {\n        handleCloseInternal();\n        return;\n      }\n      try {\n        const result = onConfirm();\n        if (result instanceof Promise) {\n          setConfirmLoading(true);\n          await result;\n        }\n      } finally {\n        setConfirmLoading(false);\n        handleCloseInternal();\n      }\n    };\n\n    const theme = useTheme();\n    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n\n    const getWidth = () => {\n      if (isMobile) return '95%';\n      switch (maxWidth) {\n        case 'xs':\n          return 300;\n        case 'sm':\n          return 500;\n        case 'md':\n          return 700;\n        case 'lg':\n          return 900;\n        case 'xl':\n          return 1100;\n        case false:\n          return 'auto';\n        default:\n          return 500;\n      }\n    };\n\n    // ── Render modo CONFIRM ─────────────────────────────────────────────\n    if (mode === 'confirm') {\n      const config = severityConfig[severity];\n      const message = confirmMessage ?? children;\n\n      return (\n        <MuiModal\n          open={isOpen}\n          onClose={handleCloseInternal}\n          aria-labelledby=\"modal-title\"\n          closeAfterTransition\n        >\n          <Paper sx={{ ...modalStyle, width: getWidth() }}>\n            <Stack spacing={2.5} sx={{ p: 3, alignItems: 'center', textAlign: 'center' }}>\n              <Box\n                sx={{\n                  width: 72,\n                  height: 72,\n                  borderRadius: '50%',\n                  backgroundColor: (t) =>\n                    t.palette[severity === 'info' ? 'primary' : severity].light,\n                  color: (t) =>\n                    t.palette[severity === 'info' ? 'primary' : severity].dark,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  opacity: 0.9,\n                }}\n              >\n                {config.icon}\n              </Box>\n              {title && (\n                <Typography variant=\"h6\" component=\"h2\" sx={{ fontWeight: 700 }}>\n                  {title}\n                </Typography>\n              )}\n              {message && (\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                  {message}\n                </Typography>\n              )}\n            </Stack>\n            <ModalFooter\n              showCloseButton={showCloseButton}\n              closeButtonText={closeButtonText}\n              closeButtonDisabled={closeButtonDisabled || confirmLoading}\n              onClose={handleCloseInternal}\n              actions={[\n                {\n                  text: confirmText,\n                  onClick: handleConfirm,\n                  disabled: confirmDisabled || confirmLoading,\n                  variant: 'contained',\n                  color: config.color,\n                },\n              ]}\n            />\n          </Paper>\n        </MuiModal>\n      );\n    }\n\n    // ── Render modo DEFAULT (legacy) ────────────────────────────────────\n    const renderChildren = () => {\n      let header: ReactNode | null = null;\n      let body: ReactNode | null = null;\n      let footer: ReactNode | null = null;\n\n      React.Children.forEach(children, (child) => {\n        if (React.isValidElement(child)) {\n          if (child.type === ModalHeader) {\n            header = child;\n          } else if (child.type === ModalBody) {\n            body = child;\n          } else if (child.type === ModalFooter) {\n            const footerChild = child as React.ReactElement<ModalFooterProps>;\n            const {\n              showCloseButton: childShowCloseButton,\n              closeButtonText: childCloseButtonText,\n              closeButtonDisabled: childCloseButtonDisabled,\n              onClose: childOnClose,\n              actions: childActions,\n              ...restOfFooterProps\n            } = footerChild.props;\n\n            footer = React.cloneElement(footerChild, {\n              showCloseButton,\n              closeButtonText,\n              closeButtonDisabled,\n              onClose: handleCloseInternal,\n              actions,\n              ...restOfFooterProps,\n            });\n          }\n        }\n      });\n\n      if (!footer && !hiddenFooter) {\n        footer = (\n          <ModalFooter\n            showCloseButton={showCloseButton}\n            closeButtonText={closeButtonText}\n            closeButtonDisabled={closeButtonDisabled}\n            onClose={handleCloseInternal}\n            actions={actions}\n          />\n        );\n      }\n\n      return (\n        <>\n          {header || (title && <ModalHeader>{title}</ModalHeader>)}\n          {body}\n          {footer}\n        </>\n      );\n    };\n\n    return (\n      <MuiModal\n        open={isOpen}\n        onClose={handleCloseInternal}\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-description\"\n        closeAfterTransition\n      >\n        <Paper sx={{ ...modalStyle, width: getWidth() }}>\n          {renderChildren()}\n        </Paper>\n      </MuiModal>\n    );\n  },\n);\n\n// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = React.ForwardRefExoticComponent<\n  ModalProps & React.RefAttributes<ModalRef>\n> & {\n  Header: typeof ModalHeader;\n  Body: typeof ModalBody;\n  Footer: typeof ModalFooter;\n};\n\nconst ModalWithStatics = Modal as ModalComponent;\n\nModalWithStatics.Header = ModalHeader;\nModalWithStatics.Body = ModalBody;\nModalWithStatics.Footer = ModalFooter;\n\nexport default ModalWithStatics;\n"],"names":["MuiModal","React"],"mappings":"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"}

package/{components → dist/components}/Modal/ModalFooter.d.ts

@@ -2,10 +2,18 @@ import { default as React } from 'react';
 import { ButtonProps } from '@mui/material/Button';
 export interface ModalAction {
     text: string;
-    onClick: () => void;
+    onClick?: () => void;
     disabled?: boolean;
     variant?: ButtonProps['variant'];
     color?: ButtonProps['color'];
+    /**
+     * Props adicionales que se forwardean al `<Button>` interno. Útil para casos
+     * avanzados como conectar el botón con un `<form id="...">` externo usando
+     * `buttonProps={{ type: 'submit', form: 'my-form-id' }}`.
+     */
+    buttonProps?: Partial<ButtonProps> & {
+        form?: string;
+    };
 }
 export interface ModalFooterProps {
     children?: React.ReactNode;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Modal } from './Modal';
+export type { ModalRef, ModalMode, ModalSeverity } from './Modal';
+export { ModalHeader } from './ModalHeader';
+export { ModalBody } from './ModalBody';
+export { ModalFooter } from './ModalFooter';
+export type { ModalAction, ModalFooterProps } from './ModalFooter';

package/dist/components/PageLoader/PageLoader.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+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;
+};
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+function PageLoader({
+  fullscreen = true,
+  message,
+  logo,
+  size = 48,
+  open = true,
+  backdropColor,
+  sx,
+  className
+}) {
+  const rootSx = [
+    (theme) => __spreadValues({
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 2
+    }, fullscreen ? {
+      position: "fixed",
+      inset: 0,
+      zIndex: theme.zIndex.modal + 10,
+      backgroundColor: backdropColor != null ? backdropColor : theme.palette.background.default
+    } : {
+      width: "100%",
+      minHeight: 160
+    }),
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className, sx: rootSx, role: "status", "aria-live": "polite", children: [
+    logo && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 1 }, children: logo }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size, thickness: 4 }),
+    message && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: message })
+  ] });
+  if (!fullscreen) {
+    return open ? content : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: open, timeout: { enter: 0, exit: 200 }, unmountOnExit: true, children: content });
+}
+exports.PageLoader = PageLoader;
+exports.default = PageLoader;
+//# sourceMappingURL=PageLoader.cjs.map

package/dist/components/PageLoader/PageLoader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.cjs","sources":["../../../src/components/PageLoader/PageLoader.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport { Box, CircularProgress, Typography, Fade } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface PageLoaderProps {\n  /**\n   * Si es true, muestra el loader ocupando toda la ventana (fixed, 100vh/vw)\n   * con backdrop. Default: true.\n   */\n  fullscreen?: boolean;\n  /** Texto bajo el spinner. */\n  message?: ReactNode;\n  /** Logo/imagen opcional arriba del spinner. */\n  logo?: ReactNode;\n  /** Tamaño del spinner en px. Default: 48. */\n  size?: number;\n  /**\n   * Control explícito. Si es undefined, el loader se muestra apenas se monta.\n   * Útil para fades.\n   */\n  open?: boolean;\n  /** Color del backdrop (solo fullscreen). Default: usa theme.palette.background.default. */\n  backdropColor?: string;\n  /** sx del root. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Loader full-page o inline. Reemplaza el `LayoutSplashScreen` de Metronic.\n *\n * ```tsx\n * // Splash de arranque\n * <PageLoader logo={<img src={logo} />} message=\"Cargando...\" />\n *\n * // Loader local dentro de una card\n * <PageLoader fullscreen={false} size={32} />\n * ```\n */\nexport function PageLoader({\n  fullscreen = true,\n  message,\n  logo,\n  size = 48,\n  open = true,\n  backdropColor,\n  sx,\n  className,\n}: PageLoaderProps) {\n  const rootSx: SxProps<Theme> = [\n    (theme) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 2,\n      ...(fullscreen\n        ? {\n            position: 'fixed',\n            inset: 0,\n            zIndex: theme.zIndex.modal + 10,\n            backgroundColor:\n              backdropColor ?? theme.palette.background.default,\n          }\n        : {\n            width: '100%',\n            minHeight: 160,\n          }),\n    }),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const content = (\n    <Box className={className} sx={rootSx} role=\"status\" aria-live=\"polite\">\n      {logo && <Box sx={{ mb: 1 }}>{logo}</Box>}\n      <CircularProgress size={size} thickness={4} />\n      {message && (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {message}\n        </Typography>\n      )}\n    </Box>\n  );\n\n  if (!fullscreen) {\n    return open ? content : null;\n  }\n\n  return (\n    <Fade in={open} timeout={{ enter: 0, exit: 200 }} unmountOnExit>\n      {content}\n    </Fade>\n  );\n}\n\nexport default PageLoader;\n"],"names":["Box","jsx","CircularProgress","Typography","Fade"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuCO,SAAS,WAAW;AAAA,EACzB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,SAAyB;AAAA,IAC7B,CAAC,UAAW;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK;AAAA,OACD,aACA;AAAA,MACE,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ,MAAM,OAAO,QAAQ;AAAA,MAC7B,iBACE,wCAAiB,MAAM,QAAQ,WAAW;AAAA,IAAA,IAE9C;AAAA,MACE,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,IAGnB,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,QAAM,0CACHA,SAAAA,KAAA,EAAI,WAAsB,IAAI,QAAQ,MAAK,UAAS,aAAU,UAC5D,UAAA;AAAA,IAAA,uCAASA,SAAAA,KAAA,EAAI,IAAI,EAAE,IAAI,EAAA,GAAM,UAAA,MAAK;AAAA,IACnCC,2BAAAA,IAACC,SAAAA,kBAAA,EAAiB,MAAY,WAAW,EAAA,CAAG;AAAA,IAC3C,WACCD,2BAAAA,IAACE,SAAAA,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,QAAA,CACH;AAAA,EAAA,GAEJ;AAGF,MAAI,CAAC,YAAY;AACf,WAAO,OAAO,UAAU;AAAA,EAC1B;AAEA,SACEF,2BAAAA,IAACG,SAAAA,MAAA,EAAK,IAAI,MAAM,SAAS,EAAE,OAAO,GAAG,MAAM,IAAA,GAAO,eAAa,MAC5D,UAAA,SACH;AAEJ;;;"}

package/dist/components/PageLoader/PageLoader.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface PageLoaderProps {
+    /**
+     * Si es true, muestra el loader ocupando toda la ventana (fixed, 100vh/vw)
+     * con backdrop. Default: true.
+     */
+    fullscreen?: boolean;
+    /** Texto bajo el spinner. */
+    message?: ReactNode;
+    /** Logo/imagen opcional arriba del spinner. */
+    logo?: ReactNode;
+    /** Tamaño del spinner en px. Default: 48. */
+    size?: number;
+    /**
+     * Control explícito. Si es undefined, el loader se muestra apenas se monta.
+     * Útil para fades.
+     */
+    open?: boolean;
+    /** Color del backdrop (solo fullscreen). Default: usa theme.palette.background.default. */
+    backdropColor?: string;
+    /** sx del root. */
+    sx?: SxProps<Theme>;
+    className?: string;
+}
+/**
+ * Loader full-page o inline. Reemplaza el `LayoutSplashScreen` de Metronic.
+ *
+ * ```tsx
+ * // Splash de arranque
+ * <PageLoader logo={<img src={logo} />} message="Cargando..." />
+ *
+ * // Loader local dentro de una card
+ * <PageLoader fullscreen={false} size={32} />
+ * ```
+ */
+export declare function PageLoader({ fullscreen, message, logo, size, open, backdropColor, sx, className, }: PageLoaderProps): import("react/jsx-runtime").JSX.Element | null;
+export default PageLoader;

package/dist/components/PageLoader/PageLoader.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Fade, Box, CircularProgress, Typography } from "@mui/material";
+function PageLoader({
+  fullscreen = true,
+  message,
+  logo,
+  size = 48,
+  open = true,
+  backdropColor,
+  sx,
+  className
+}) {
+  const rootSx = [
+    (theme) => __spreadValues({
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 2
+    }, fullscreen ? {
+      position: "fixed",
+      inset: 0,
+      zIndex: theme.zIndex.modal + 10,
+      backgroundColor: backdropColor != null ? backdropColor : theme.palette.background.default
+    } : {
+      width: "100%",
+      minHeight: 160
+    }),
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const content = /* @__PURE__ */ jsxs(Box, { className, sx: rootSx, role: "status", "aria-live": "polite", children: [
+    logo && /* @__PURE__ */ jsx(Box, { sx: { mb: 1 }, children: logo }),
+    /* @__PURE__ */ jsx(CircularProgress, { size, thickness: 4 }),
+    message && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: message })
+  ] });
+  if (!fullscreen) {
+    return open ? content : null;
+  }
+  return /* @__PURE__ */ jsx(Fade, { in: open, timeout: { enter: 0, exit: 200 }, unmountOnExit: true, children: content });
+}
+export {
+  PageLoader,
+  PageLoader as default
+};
+//# sourceMappingURL=PageLoader.js.map

package/dist/components/PageLoader/PageLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.js","sources":["../../../src/components/PageLoader/PageLoader.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport { Box, CircularProgress, Typography, Fade } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface PageLoaderProps {\n  /**\n   * Si es true, muestra el loader ocupando toda la ventana (fixed, 100vh/vw)\n   * con backdrop. Default: true.\n   */\n  fullscreen?: boolean;\n  /** Texto bajo el spinner. */\n  message?: ReactNode;\n  /** Logo/imagen opcional arriba del spinner. */\n  logo?: ReactNode;\n  /** Tamaño del spinner en px. Default: 48. */\n  size?: number;\n  /**\n   * Control explícito. Si es undefined, el loader se muestra apenas se monta.\n   * Útil para fades.\n   */\n  open?: boolean;\n  /** Color del backdrop (solo fullscreen). Default: usa theme.palette.background.default. */\n  backdropColor?: string;\n  /** sx del root. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Loader full-page o inline. Reemplaza el `LayoutSplashScreen` de Metronic.\n *\n * ```tsx\n * // Splash de arranque\n * <PageLoader logo={<img src={logo} />} message=\"Cargando...\" />\n *\n * // Loader local dentro de una card\n * <PageLoader fullscreen={false} size={32} />\n * ```\n */\nexport function PageLoader({\n  fullscreen = true,\n  message,\n  logo,\n  size = 48,\n  open = true,\n  backdropColor,\n  sx,\n  className,\n}: PageLoaderProps) {\n  const rootSx: SxProps<Theme> = [\n    (theme) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 2,\n      ...(fullscreen\n        ? {\n            position: 'fixed',\n            inset: 0,\n            zIndex: theme.zIndex.modal + 10,\n            backgroundColor:\n              backdropColor ?? theme.palette.background.default,\n          }\n        : {\n            width: '100%',\n            minHeight: 160,\n          }),\n    }),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const content = (\n    <Box className={className} sx={rootSx} role=\"status\" aria-live=\"polite\">\n      {logo && <Box sx={{ mb: 1 }}>{logo}</Box>}\n      <CircularProgress size={size} thickness={4} />\n      {message && (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {message}\n        </Typography>\n      )}\n    </Box>\n  );\n\n  if (!fullscreen) {\n    return open ? content : null;\n  }\n\n  return (\n    <Fade in={open} timeout={{ enter: 0, exit: 200 }} unmountOnExit>\n      {content}\n    </Fade>\n  );\n}\n\nexport default PageLoader;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuCO,SAAS,WAAW;AAAA,EACzB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,SAAyB;AAAA,IAC7B,CAAC,UAAW;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK;AAAA,OACD,aACA;AAAA,MACE,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ,MAAM,OAAO,QAAQ;AAAA,MAC7B,iBACE,wCAAiB,MAAM,QAAQ,WAAW;AAAA,IAAA,IAE9C;AAAA,MACE,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,IAGnB,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,QAAM,+BACH,KAAA,EAAI,WAAsB,IAAI,QAAQ,MAAK,UAAS,aAAU,UAC5D,UAAA;AAAA,IAAA,4BAAS,KAAA,EAAI,IAAI,EAAE,IAAI,EAAA,GAAM,UAAA,MAAK;AAAA,IACnC,oBAAC,kBAAA,EAAiB,MAAY,WAAW,EAAA,CAAG;AAAA,IAC3C,WACC,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,QAAA,CACH;AAAA,EAAA,GAEJ;AAGF,MAAI,CAAC,YAAY;AACf,WAAO,OAAO,UAAU;AAAA,EAC1B;AAEA,SACE,oBAAC,MAAA,EAAK,IAAI,MAAM,SAAS,EAAE,OAAO,GAAG,MAAM,IAAA,GAAO,eAAa,MAC5D,UAAA,SACH;AAEJ;"}

package/dist/components/PageLoader/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLoader, default } from './PageLoader';
+export type { PageLoaderProps } from './PageLoader';

package/dist/components/PageLoader.d.ts

@@ -0,0 +1,6 @@
+export * from './PageLoader/index'
+export {}
+import _default from './PageLoader/index'
+export default _default
+export * from './PageLoader/index'
+export {}

package/dist/components/ScrollTopButton/ScrollTopButton.cjs

@@ -0,0 +1,79 @@
+"use strict";
+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 KeyboardArrowUpIcon = require("@mui/icons-material/KeyboardArrowUp");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+function scrollToTop({
+  behavior = "smooth",
+  target = typeof window !== "undefined" ? window : void 0,
+  top = 0
+} = {}) {
+  if (!target) return;
+  target.scrollTo({ top, left: 0, behavior });
+}
+const positionSx = {
+  "bottom-right": { position: "fixed", bottom: 24, right: 24 },
+  "bottom-left": { position: "fixed", bottom: 24, left: 24 },
+  "bottom-center": {
+    position: "fixed",
+    bottom: 24,
+    left: "50%",
+    transform: "translateX(-50%)"
+  }
+};
+function ScrollTopButton({
+  threshold = 300,
+  position = "bottom-right",
+  scrollTarget,
+  size = "medium",
+  color = "default",
+  icon,
+  ariaLabel = "Subir al inicio",
+  preset,
+  sx,
+  className
+}) {
+  const theme = material.useTheme();
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
+    const target = scrollTarget != null ? scrollTarget : typeof window !== "undefined" ? window : null;
+    if (!target) return;
+    const readScrollTop = () => target === window ? window.scrollY || document.documentElement.scrollTop : target.scrollTop;
+    const handleScroll = () => {
+      setVisible(readScrollTop() > threshold);
+    };
+    handleScroll();
+    target.addEventListener("scroll", handleScroll, { passive: true });
+    return () => target.removeEventListener("scroll", handleScroll);
+  }, [threshold, scrollTarget]);
+  const handleClick = () => {
+    scrollToTop({
+      target: scrollTarget != null ? scrollTarget : typeof window !== "undefined" ? window : void 0
+    });
+  };
+  const presetSx = resolvePreset.resolvePreset("ScrollTopButton", preset, theme);
+  const mergedSx = [
+    positionSx[position],
+    { zIndex: theme.zIndex.speedDial },
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Zoom, { in: visible, unmountOnExit: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.Fab,
+    {
+      size,
+      color,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      className,
+      sx: mergedSx,
+      children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowUpIcon, {})
+    }
+  ) });
+}
+exports.ScrollTopButton = ScrollTopButton;
+exports.default = ScrollTopButton;
+exports.scrollToTop = scrollToTop;
+//# sourceMappingURL=ScrollTopButton.cjs.map