@soyfri/shared-library 1.3.13 → 1.3.15

package/components/Modal/Modal.cjs

@@ -98,7 +98,8 @@ const Modal = React.forwardRef(({
   closeButtonText = "Cerrar",
   closeButtonDisabled = false,
   actions = [],
-  maxWidth = "sm"
+  maxWidth = "sm",
+  hiddenFooter = false
 }, ref) => {
   const [internalOpen, setInternalOpen] = React.useState(false);
   const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
@@ -170,7 +171,7 @@ const Modal = React.forwardRef(({
         }
       }
     });
-    if (!footer) {
+    if (!footer && !hiddenFooter) {
       footer = /* @__PURE__ */ jsxRuntime.jsx(
         ModalFooter,
         {

package/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","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\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          <Button\n            key={index}\n            onClick={action.onClick}\n            disabled={action.disabled}\n            variant={action.variant || 'contained'}\n            color={action.color || 'primary'}\n          >\n            {action.text}\n          </Button>\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, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef\nimport { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';\n\nimport { 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\ninterface ModalProps {\n  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente\n  open?: boolean;\n  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente\n  title?: string;\n  children: React.ReactNode;\n  showCloseButton?: boolean;\n  closeButtonText?: string;\n  closeButtonDisabled?: boolean;\n  actions?: ModalAction[];\n  maxWidth?: DialogProps['maxWidth'];\n}\n\nconst modalStyle = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: '90%',\n  maxHeight: '90vh',\n  display: 'flex',\n  flexDirection: 'column',\n  outline: 'none',\n};\n\n// Envuelve el componente en forwardRef\nexport const Modal = forwardRef<ModalRef, ModalProps>(({\n  open: controlledOpen, // Renombra la prop 'open' si se pasa externamente\n  onClose: controlledOnClose, // Renombra la prop 'onClose' si se pasa externamente\n  title,\n  children,\n  showCloseButton = true,\n  closeButtonText = \"Cerrar\",\n  closeButtonDisabled = false,\n  actions = [],\n  maxWidth = 'sm',\n}, ref) => { // Recibe la ref\n  // Estado interno para gestionar la visibilidad si no es controlado externamente\n  const [internalOpen, setInternalOpen] = useState(false);\n\n  // Determina si el modal está abierto, priorizando la prop externa\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  // Expone métodos 'open' y 'close' a través de la ref\n  useImperativeHandle(ref, () => ({\n    open: () => setInternalOpen(true),\n    close: () => {\n      setInternalOpen(false);\n      controlledOnClose?.(); // Llama al onClose externo si existe\n    },\n  }));\n\n  const handleCloseInternal = () => {\n    setInternalOpen(false);\n    controlledOnClose?.(); // Llama al onClose externo si existe\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': return 300;\n      case 'sm': return 500;\n      case 'md': return 700;\n      case 'lg': return 900;\n      case 'xl': return 1100;\n      case false: return 'auto';\n      default: return 500;\n    }\n  };\n\n  const renderChildren = () => {\n    let header: React.ReactNode | null = null;\n    let body: React.ReactNode | null = null;\n    let footer: React.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, // Usa la función de cierre interna\n            actions,\n            ...restOfFooterProps,\n          });\n        }\n      }\n    });\n\n    if (!footer) {\n      footer = (\n        <ModalFooter\n          showCloseButton={showCloseButton}\n          closeButtonText={closeButtonText}\n          closeButtonDisabled={closeButtonDisabled}\n          onClose={handleCloseInternal} // Usa la función de cierre interna\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} // Usa el estado de visibilidad determinado\n      onClose={handleCloseInternal} // Usa la función de cierre interna\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// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {\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;"],"names":["jsxs","Box","Stack","jsx","Button","Typography","forwardRef","useState","useImperativeHandle","useTheme","useMediaQuery","Fragment","MuiModal","Paper"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","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\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          <Button\n            key={index}\n            onClick={action.onClick}\n            disabled={action.disabled}\n            variant={action.variant || 'contained'}\n            color={action.color || 'primary'}\n          >\n            {action.text}\n          </Button>\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, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef\nimport { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';\n\nimport { 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\ninterface ModalProps {\n  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente\n  open?: boolean;\n  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente\n  title?: string;\n  children: React.ReactNode;\n  showCloseButton?: boolean;\n  closeButtonText?: string;\n  closeButtonDisabled?: boolean;\n  actions?: ModalAction[];\n  maxWidth?: DialogProps['maxWidth'];\n  hiddenFooter?: boolean\n}\n\nconst modalStyle = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: '90%',\n  maxHeight: '90vh',\n  display: 'flex',\n  flexDirection: 'column',\n  outline: 'none',\n};\n\n// Envuelve el componente en forwardRef\nexport const Modal = forwardRef<ModalRef, ModalProps>(({\n  open: controlledOpen, // Renombra la prop 'open' si se pasa externamente\n  onClose: controlledOnClose, // Renombra la prop 'onClose' si se pasa externamente\n  title,\n  children,\n  showCloseButton = true,\n  closeButtonText = \"Cerrar\",\n  closeButtonDisabled = false,\n  actions = [],\n  maxWidth = 'sm',\n  hiddenFooter = false,\n}, ref) => { // Recibe la ref\n  // Estado interno para gestionar la visibilidad si no es controlado externamente\n  const [internalOpen, setInternalOpen] = useState(false);\n\n  // Determina si el modal está abierto, priorizando la prop externa\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  // Expone métodos 'open' y 'close' a través de la ref\n  useImperativeHandle(ref, () => ({\n    open: () => setInternalOpen(true),\n    close: () => {\n      setInternalOpen(false);\n      controlledOnClose?.(); // Llama al onClose externo si existe\n    },\n  }));\n\n  const handleCloseInternal = () => {\n    setInternalOpen(false);\n    controlledOnClose?.(); // Llama al onClose externo si existe\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': return 300;\n      case 'sm': return 500;\n      case 'md': return 700;\n      case 'lg': return 900;\n      case 'xl': return 1100;\n      case false: return 'auto';\n      default: return 500;\n    }\n  };\n\n  const renderChildren = () => {\n    let header: React.ReactNode | null = null;\n    let body: React.ReactNode | null = null;\n    let footer: React.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, // Usa la función de cierre interna\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} // Usa la función de cierre interna\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} // Usa el estado de visibilidad determinado\n      onClose={handleCloseInternal} // Usa la función de cierre interna\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// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {\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;"],"names":["jsxs","Box","Stack","jsx","Button","Typography","forwardRef","useState","useImperativeHandle","useTheme","useMediaQuery","Fragment","MuiModal","Paper"],"mappings":"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"}

package/components/Modal/Modal.d.ts

@@ -17,6 +17,7 @@ interface ModalProps {
     closeButtonDisabled?: boolean;
     actions?: ModalAction[];
     maxWidth?: DialogProps['maxWidth'];
+    hiddenFooter?: boolean;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>>;
 type ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {

package/components/Modal/Modal.js

@@ -96,7 +96,8 @@ const Modal = forwardRef(({
   closeButtonText = "Cerrar",
   closeButtonDisabled = false,
   actions = [],
-  maxWidth = "sm"
+  maxWidth = "sm",
+  hiddenFooter = false
 }, ref) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
@@ -168,7 +169,7 @@ const Modal = forwardRef(({
         }
       }
     });
-    if (!footer) {
+    if (!footer && !hiddenFooter) {
       footer = /* @__PURE__ */ jsx(
         ModalFooter,
         {

package/components/Modal/Modal.js.map

@@ -1 +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\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          <Button\n            key={index}\n            onClick={action.onClick}\n            disabled={action.disabled}\n            variant={action.variant || 'contained'}\n            color={action.color || 'primary'}\n          >\n            {action.text}\n          </Button>\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, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef\nimport { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';\n\nimport { 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\ninterface ModalProps {\n  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente\n  open?: boolean;\n  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente\n  title?: string;\n  children: React.ReactNode;\n  showCloseButton?: boolean;\n  closeButtonText?: string;\n  closeButtonDisabled?: boolean;\n  actions?: ModalAction[];\n  maxWidth?: DialogProps['maxWidth'];\n}\n\nconst modalStyle = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: '90%',\n  maxHeight: '90vh',\n  display: 'flex',\n  flexDirection: 'column',\n  outline: 'none',\n};\n\n// Envuelve el componente en forwardRef\nexport const Modal = forwardRef<ModalRef, ModalProps>(({\n  open: controlledOpen, // Renombra la prop 'open' si se pasa externamente\n  onClose: controlledOnClose, // Renombra la prop 'onClose' si se pasa externamente\n  title,\n  children,\n  showCloseButton = true,\n  closeButtonText = \"Cerrar\",\n  closeButtonDisabled = false,\n  actions = [],\n  maxWidth = 'sm',\n}, ref) => { // Recibe la ref\n  // Estado interno para gestionar la visibilidad si no es controlado externamente\n  const [internalOpen, setInternalOpen] = useState(false);\n\n  // Determina si el modal está abierto, priorizando la prop externa\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  // Expone métodos 'open' y 'close' a través de la ref\n  useImperativeHandle(ref, () => ({\n    open: () => setInternalOpen(true),\n    close: () => {\n      setInternalOpen(false);\n      controlledOnClose?.(); // Llama al onClose externo si existe\n    },\n  }));\n\n  const handleCloseInternal = () => {\n    setInternalOpen(false);\n    controlledOnClose?.(); // Llama al onClose externo si existe\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': return 300;\n      case 'sm': return 500;\n      case 'md': return 700;\n      case 'lg': return 900;\n      case 'xl': return 1100;\n      case false: return 'auto';\n      default: return 500;\n    }\n  };\n\n  const renderChildren = () => {\n    let header: React.ReactNode | null = null;\n    let body: React.ReactNode | null = null;\n    let footer: React.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, // Usa la función de cierre interna\n            actions,\n            ...restOfFooterProps,\n          });\n        }\n      }\n    });\n\n    if (!footer) {\n      footer = (\n        <ModalFooter\n          showCloseButton={showCloseButton}\n          closeButtonText={closeButtonText}\n          closeButtonDisabled={closeButtonDisabled}\n          onClose={handleCloseInternal} // Usa la función de cierre interna\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} // Usa el estado de visibilidad determinado\n      onClose={handleCloseInternal} // Usa la función de cierre interna\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// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {\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;"],"names":["React","MuiModal"],"mappings":"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"}
+{"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\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          <Button\n            key={index}\n            onClick={action.onClick}\n            disabled={action.disabled}\n            variant={action.variant || 'contained'}\n            color={action.color || 'primary'}\n          >\n            {action.text}\n          </Button>\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, { useState, useImperativeHandle, forwardRef } from 'react'; // 👈 Importa useImperativeHandle y forwardRef\nimport { Modal as MuiModal, Box, Paper, useTheme, useMediaQuery } from '@mui/material';\n\nimport { 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\ninterface ModalProps {\n  // La prop 'open' ahora es opcional si se usa con ref, pero aún puede ser controlada externamente\n  open?: boolean;\n  onClose?: () => void; // 'onClose' ahora es opcional ya que el modal puede cerrarse internamente\n  title?: string;\n  children: React.ReactNode;\n  showCloseButton?: boolean;\n  closeButtonText?: string;\n  closeButtonDisabled?: boolean;\n  actions?: ModalAction[];\n  maxWidth?: DialogProps['maxWidth'];\n  hiddenFooter?: boolean\n}\n\nconst modalStyle = {\n  position: 'absolute' as 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  width: '90%',\n  maxHeight: '90vh',\n  display: 'flex',\n  flexDirection: 'column',\n  outline: 'none',\n};\n\n// Envuelve el componente en forwardRef\nexport const Modal = forwardRef<ModalRef, ModalProps>(({\n  open: controlledOpen, // Renombra la prop 'open' si se pasa externamente\n  onClose: controlledOnClose, // Renombra la prop 'onClose' si se pasa externamente\n  title,\n  children,\n  showCloseButton = true,\n  closeButtonText = \"Cerrar\",\n  closeButtonDisabled = false,\n  actions = [],\n  maxWidth = 'sm',\n  hiddenFooter = false,\n}, ref) => { // Recibe la ref\n  // Estado interno para gestionar la visibilidad si no es controlado externamente\n  const [internalOpen, setInternalOpen] = useState(false);\n\n  // Determina si el modal está abierto, priorizando la prop externa\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  // Expone métodos 'open' y 'close' a través de la ref\n  useImperativeHandle(ref, () => ({\n    open: () => setInternalOpen(true),\n    close: () => {\n      setInternalOpen(false);\n      controlledOnClose?.(); // Llama al onClose externo si existe\n    },\n  }));\n\n  const handleCloseInternal = () => {\n    setInternalOpen(false);\n    controlledOnClose?.(); // Llama al onClose externo si existe\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': return 300;\n      case 'sm': return 500;\n      case 'md': return 700;\n      case 'lg': return 900;\n      case 'xl': return 1100;\n      case false: return 'auto';\n      default: return 500;\n    }\n  };\n\n  const renderChildren = () => {\n    let header: React.ReactNode | null = null;\n    let body: React.ReactNode | null = null;\n    let footer: React.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, // Usa la función de cierre interna\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} // Usa la función de cierre interna\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} // Usa el estado de visibilidad determinado\n      onClose={handleCloseInternal} // Usa la función de cierre interna\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// Define los sub-componentes como propiedades estáticas con tipos explícitos\ntype ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {\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;"],"names":["React","MuiModal"],"mappings":"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"}

package/components/StatusMessage/StatusMessage.cjs

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const iconsMaterial = require("@mui/icons-material");
+const StatusMessage = ({
+  title,
+  description,
+  messageType = "success",
+  displayType = "alert",
+  close,
+  open = true
+}) => {
+  const getAlertVariant = () => {
+    switch (messageType) {
+      case "success":
+        return "success";
+      case "danger":
+        return "error";
+      case "warning":
+        return "warning";
+      default:
+        return "info";
+    }
+  };
+  const getIcon = () => {
+    switch (messageType) {
+      case "success":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
+      case "danger":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
+      case "warning":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
+      default:
+        return null;
+    }
+  };
+  const alertVariant = getAlertVariant();
+  if (!description) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
+    {
+      open,
+      onClose: close,
+      "aria-labelledby": "message-dialog-title",
+      maxWidth: "md",
+      PaperProps: {
+        sx: {
+          borderRadius: "16px",
+          p: 2
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: getIcon() }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", color: "text.secondary", children: description })
+        ] }),
+        close && /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Alert,
+    {
+      severity: alertVariant,
+      sx: { mb: 2, mt: 2 },
+      onClose: close,
+      action: close && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { mt: 1 }, children: description })
+      ]
+    }
+  ) });
+};
+exports.StatusMessage = StatusMessage;
+//# sourceMappingURL=StatusMessage.cjs.map

package/components/StatusMessage/StatusMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage.cjs","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button\n} from '@mui/material';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n  title: string | undefined;\n  description?: string;\n  messageType?: 'success' | 'danger' | 'warning';\n  displayType?: 'alert' | 'modal';\n  close?: () => void;\n  // Propiedad para controlar la visibilidad del modal desde el padre\n  open?: boolean;\n}\n\nconst StatusMessage = ({\n  title,\n  description,\n  messageType = 'success',\n  displayType = 'alert',\n  close,\n  open = true,\n}: StatusMessageProps) => {\n\n  const getAlertVariant = () => {\n    switch (messageType) {\n      case 'success':\n        return 'success';\n      case 'danger':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'info'; // Fallback\n    }\n  };\n\n  const getIcon = () => {\n    switch (messageType) {\n      case 'success':\n        return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n      case 'danger':\n        return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n      case 'warning':\n        return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n      default:\n        return null;\n    }\n  };\n\n  const alertVariant = getAlertVariant();\n\n  if (!description) {\n    return null;\n  }\n\n  return (\n    <>\n      {displayType === 'modal' ? (\n        <Dialog\n          open={open}\n          onClose={close}\n          aria-labelledby=\"message-dialog-title\"\n          maxWidth=\"md\"\n          PaperProps={{\n            sx: {\n              borderRadius: '16px',\n              p: 2,\n            },\n          }}\n        >\n          <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n            <Box sx={{ mb: 2 }}>\n              {getIcon()}\n            </Box>\n            <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n              {title || ''}\n            </Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">\n              {description}\n            </Typography>\n          </DialogContent>\n          {close && (\n            <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n              <Button onClick={close} variant=\"contained\" color={alertVariant}>\n                Aceptar\n              </Button>\n            </DialogActions>\n          )}\n        </Dialog>\n      ) : (\n        <Alert\n          severity={alertVariant}\n          sx={{ mb: 2, mt: 2 }}\n          onClose={close}\n          action={\n            close && (\n              <Button onClick={close} size=\"small\" color=\"inherit\">\n                Cerrar\n              </Button>\n            )\n          }\n        >\n          <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" sx={{ mt: 1 }}>\n            {description}\n          </Typography>\n        </Alert>\n      )}\n    </>\n  );\n};\n\nexport default StatusMessage;\n"],"names":["jsx","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","Fragment","jsxs","Dialog","DialogContent","Box","Typography","DialogActions","Button","Alert"],"mappings":";;;;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAOA,2BAAAA,IAACC,oCAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAOD,2BAAAA,IAACE,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAOF,2BAAAA,IAACG,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACEH,2BAAAA,IAAAI,WAAAA,UAAA,EACG,0BAAgB,UACfC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,KAACE,SAAAA,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAAP,+BAACQ,SAAAA,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACAR,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,yCACCA,SAAAA,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACCT,2BAAAA,IAACU,SAAAA,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAAV,+BAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJN,2BAAAA;AAAAA,IAACO,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACEZ,2BAAAA,IAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAAX,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACAT,2BAAAA,IAACS,SAAAA,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;;"}

package/components/StatusMessage/StatusMessage.d.ts

@@ -0,0 +1,44 @@
+/**
+ * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia
+ * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.
+ *
+ * El componente puede mostrar alertas con estilos específicos o un modal personalizable
+ * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional
+ * para cerrar el mensaje.
+ *
+ * @param {StatusMessageProps} props - Las propiedades del componente.
+ * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.
+ * @param {string} [props.description] - Descripción o contenido detallado del mensaje.
+ * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.
+ * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.
+ * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.
+ * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.
+ *
+ * @example
+ * // Ejemplo de uso como una alerta:
+ * <StatusMessage
+ * title="Operación Exitosa"
+ * description="La operación se ha completado correctamente."
+ * messageType="success"
+ * displayType="alert"
+ * />
+ *
+ * // Ejemplo de uso como un modal:
+ * <StatusMessage
+ * title="Advertencia"
+ * description="Se ha producido un error inesperado."
+ * messageType="danger"
+ * displayType="modal"
+ * close={() => console.log('Modal cerrado')}
+ * />
+ */
+export interface StatusMessageProps {
+    title: string | undefined;
+    description?: string;
+    messageType?: 'success' | 'danger' | 'warning';
+    displayType?: 'alert' | 'modal';
+    close?: () => void;
+    open?: boolean;
+}
+declare const StatusMessage: ({ title, description, messageType, displayType, close, open, }: StatusMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusMessage;

package/components/StatusMessage/StatusMessage.js

@@ -0,0 +1,79 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert } from "@mui/material";
+import { WarningAmber, ErrorOutline, CheckCircleOutline } from "@mui/icons-material";
+const StatusMessage = ({
+  title,
+  description,
+  messageType = "success",
+  displayType = "alert",
+  close,
+  open = true
+}) => {
+  const getAlertVariant = () => {
+    switch (messageType) {
+      case "success":
+        return "success";
+      case "danger":
+        return "error";
+      case "warning":
+        return "warning";
+      default:
+        return "info";
+    }
+  };
+  const getIcon = () => {
+    switch (messageType) {
+      case "success":
+        return /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
+      case "danger":
+        return /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
+      case "warning":
+        return /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
+      default:
+        return null;
+    }
+  };
+  const alertVariant = getAlertVariant();
+  if (!description) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: close,
+      "aria-labelledby": "message-dialog-title",
+      maxWidth: "md",
+      PaperProps: {
+        sx: {
+          borderRadius: "16px",
+          p: 2
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: getIcon() }),
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: description })
+        ] }),
+        close && /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Alert,
+    {
+      severity: alertVariant,
+      sx: { mb: 2, mt: 2 },
+      onClose: close,
+      action: close && /* @__PURE__ */ jsx(Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: description })
+      ]
+    }
+  ) });
+};
+export {
+  StatusMessage
+};
+//# sourceMappingURL=StatusMessage.js.map

package/components/StatusMessage/StatusMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button\n} from '@mui/material';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n  title: string | undefined;\n  description?: string;\n  messageType?: 'success' | 'danger' | 'warning';\n  displayType?: 'alert' | 'modal';\n  close?: () => void;\n  // Propiedad para controlar la visibilidad del modal desde el padre\n  open?: boolean;\n}\n\nconst StatusMessage = ({\n  title,\n  description,\n  messageType = 'success',\n  displayType = 'alert',\n  close,\n  open = true,\n}: StatusMessageProps) => {\n\n  const getAlertVariant = () => {\n    switch (messageType) {\n      case 'success':\n        return 'success';\n      case 'danger':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'info'; // Fallback\n    }\n  };\n\n  const getIcon = () => {\n    switch (messageType) {\n      case 'success':\n        return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n      case 'danger':\n        return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n      case 'warning':\n        return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n      default:\n        return null;\n    }\n  };\n\n  const alertVariant = getAlertVariant();\n\n  if (!description) {\n    return null;\n  }\n\n  return (\n    <>\n      {displayType === 'modal' ? (\n        <Dialog\n          open={open}\n          onClose={close}\n          aria-labelledby=\"message-dialog-title\"\n          maxWidth=\"md\"\n          PaperProps={{\n            sx: {\n              borderRadius: '16px',\n              p: 2,\n            },\n          }}\n        >\n          <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n            <Box sx={{ mb: 2 }}>\n              {getIcon()}\n            </Box>\n            <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n              {title || ''}\n            </Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">\n              {description}\n            </Typography>\n          </DialogContent>\n          {close && (\n            <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n              <Button onClick={close} variant=\"contained\" color={alertVariant}>\n                Aceptar\n              </Button>\n            </DialogActions>\n          )}\n        </Dialog>\n      ) : (\n        <Alert\n          severity={alertVariant}\n          sx={{ mb: 2, mt: 2 }}\n          onClose={close}\n          action={\n            close && (\n              <Button onClick={close} size=\"small\" color=\"inherit\">\n                Cerrar\n              </Button>\n            )\n          }\n        >\n          <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" sx={{ mt: 1 }}>\n            {description}\n          </Typography>\n        </Alert>\n      )}\n    </>\n  );\n};\n\nexport default StatusMessage;\n"],"names":["CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":";;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO,oBAACA,sBAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAA,UAAA,EACG,0BAAgB,UACf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAA,oBAAC,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,8BACC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACC,oBAAC,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAA,oBAAC,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACE,oBAAC,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/components/StatusMessage/index.d.ts

@@ -0,0 +1 @@
+export { default as StatusMessage } from './StatusMessage';

package/components/StatusMessage.d.ts

@@ -0,0 +1,2 @@
+export * from './StatusMessage/index'
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -58,6 +58,11 @@
       "require": "./components/Stepper/Stepper.cjs",
       "types": "./components/Stepper/Stepper.d.ts"
     },
+    "./components/StatusMessage": {
+      "import": "./components/StatusMessage/StatusMessage.js",
+      "require": "./components/StatusMessage/StatusMessage.cjs",
+      "types": "./components/StatusMessage/StatusMessage.d.ts"
+    },
     "./components/Stat": {
       "import": "./components/Stat/Stat.js",
       "require": "./components/Stat/Stat.cjs",