@soyfri/shared-library 1.2.2 → 1.3.1

package/cjs/components/Modal/Modal.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.cjs"),t=require("../../_virtual/jsx-runtime.cjs"),o=require("react"),s=require("@mui/material"),r=require("./ModalFooter.cjs"),l=require("./ModalHeader.cjs"),n=require("./ModalBody.cjs");const a={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"90%",maxHeight:"90vh",display:"flex",flexDirection:"column",outline:"none"},i=o.forwardRef((({open:i,onClose:u,title:d,children:c,showCloseButton:x=!0,closeButtonText:p="Cerrar",closeButtonDisabled:m=!1,actions:j=[],maxWidth:h="sm"},B)=>{const[b,f]=o.useState(!1),M=void 0!==i?i:b;o.useImperativeHandle(B,(()=>({open:()=>f(!0),close:()=>{f(!1),null==u||u()}})));const C=()=>{f(!1),null==u||u()},y=s.useTheme(),w=s.useMediaQuery(y.breakpoints.down("sm"));return t.jsxRuntimeExports.jsx(s.Modal,{open:M,onClose:C,"aria-labelledby":"modal-title","aria-describedby":"modal-description",closeAfterTransition:!0,children:t.jsxRuntimeExports.jsx(s.Paper,{sx:Object.assign(Object.assign({},a),{width:(()=>{if(w)return"95%";switch(h){case"xs":return 300;case"sm":return 500;case"md":return 700;case"lg":return 900;case"xl":return 1100;case!1:return"auto";default:return 500}})()}),children:(()=>{let s=null,a=null,i=null;return o.Children.forEach(c,(t=>{if(o.isValidElement(t))if(t.type===l.ModalHeader)s=t;else if(t.type===n.ModalBody)a=t;else if(t.type===r.ModalFooter){const s=t,r=s.props,{showCloseButton:l,closeButtonText:n,closeButtonDisabled:a,onClose:u,actions:d}=r,c=e.__rest(r,["showCloseButton","closeButtonText","closeButtonDisabled","onClose","actions"]);i=o.cloneElement(s,Object.assign({showCloseButton:x,closeButtonText:p,closeButtonDisabled:m,onClose:C,actions:j},c))}})),i||(i=t.jsxRuntimeExports.jsx(r.ModalFooter,{showCloseButton:x,closeButtonText:p,closeButtonDisabled:m,onClose:C,actions:j})),t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[s||d&&t.jsxRuntimeExports.jsx(l.ModalHeader,{children:d}),a,i]})})()})})})),u=i;u.Header=l.ModalHeader,u.Body=n.ModalBody,u.Footer=r.ModalFooter,exports.Modal=i,exports.default=u;
+//# sourceMappingURL=Modal.cjs.map

package/cjs/components/Modal/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/Modal/ModalBody.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),r=require("@mui/material");const t=({children:t})=>e.jsxRuntimeExports.jsx(r.Box,{sx:{padding:2,overflowY:"auto",flexGrow:1},children:t});exports.ModalBody=t,exports.default=t;
+//# sourceMappingURL=ModalBody.cjs.map

package/cjs/components/Modal/ModalBody.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/Modal/ModalFooter.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("@mui/material");const o=({children:o,showCloseButton:r=!0,closeButtonText:s="Cerrar",closeButtonDisabled:i=!1,onClose:n,actions:l=[]})=>e.jsxRuntimeExports.jsxs(t.Box,{sx:{padding:2,borderTop:"1px solid #e0e0e0",display:"flex",justifyContent:"flex-end",gap:1},children:[o,e.jsxRuntimeExports.jsxs(t.Stack,{direction:"row",spacing:1,children:[r&&e.jsxRuntimeExports.jsx(t.Button,{onClick:n,disabled:i,variant:"outlined",color:"secondary",children:s}),l.map(((o,r)=>e.jsxRuntimeExports.jsx(t.Button,{onClick:o.onClick,disabled:o.disabled,variant:o.variant||"contained",color:o.color||"primary",children:o.text},r)))]})]});exports.ModalFooter=o,exports.default=o;
+//# sourceMappingURL=ModalFooter.cjs.map

package/cjs/components/Modal/ModalFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/Modal/ModalHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("@mui/material");const r=({children:r})=>e.jsxRuntimeExports.jsx(t.Box,{sx:{padding:2,borderBottom:"1px solid #e0e0e0",display:"flex",alignItems:"center",justifyContent:"space-between"},children:e.jsxRuntimeExports.jsx(t.Typography,{variant:"h6",component:"h2",children:r})});exports.ModalHeader=r,exports.default=r;
+//# sourceMappingURL=ModalHeader.cjs.map

package/cjs/components/Modal/ModalHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/Modal.cjs

@@ -0,0 +1,2 @@
+"use strict";var a=require("./Modal/Modal.cjs");exports.Modal=a.default;
+//# sourceMappingURL=Modal.cjs.map

package/cjs/components/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Modal/index.ts

@@ -0,0 +1 @@
+export * from '../../esm/components/Modal';

package/esm/components/Modal/Modal.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogProps } from '@mui/material/Dialog';
+import { ModalAction, ModalFooter } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import { ModalBody } from './ModalBody';
+export interface ModalRef {
+    open: () => void;
+    close: () => void;
+}
+interface ModalProps {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    closeButtonText?: string;
+    closeButtonDisabled?: boolean;
+    actions?: ModalAction[];
+    maxWidth?: DialogProps['maxWidth'];
+}
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>>;
+type ModalComponent = React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>> & {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+};
+declare const ModalWithStatics: ModalComponent;
+export default ModalWithStatics;

package/esm/components/Modal/Modal.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../_virtual/_tslib.js";import{j as o}from"../../_virtual/jsx-runtime.js";import t,{forwardRef as s,useState as l,useImperativeHandle as n}from"react";import{useTheme as r,useMediaQuery as i,Modal as a,Paper as c}from"@mui/material";import{ModalFooter as u}from"./ModalFooter.js";import{ModalHeader as d}from"./ModalHeader.js";import{ModalBody as m}from"./ModalBody.js";const p={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"90%",maxHeight:"90vh",display:"flex",flexDirection:"column",outline:"none"},f=s((({open:s,onClose:f,title:x,children:h,showCloseButton:B=!0,closeButtonText:b="Cerrar",closeButtonDisabled:j=!1,actions:C=[],maxWidth:w="sm"},y)=>{const[g,D]=l(!1),T=void 0!==s?s:g;n(y,(()=>({open:()=>D(!0),close:()=>{D(!1),null==f||f()}})));const v=()=>{D(!1),null==f||f()},M=r(),E=i(M.breakpoints.down("sm"));return o.jsx(a,{open:T,onClose:v,"aria-labelledby":"modal-title","aria-describedby":"modal-description",closeAfterTransition:!0,children:o.jsx(c,{sx:Object.assign(Object.assign({},p),{width:(()=>{if(E)return"95%";switch(w){case"xs":return 300;case"sm":return 500;case"md":return 700;case"lg":return 900;case"xl":return 1100;case!1:return"auto";default:return 500}})()}),children:(()=>{let s=null,l=null,n=null;return t.Children.forEach(h,(o=>{if(t.isValidElement(o))if(o.type===d)s=o;else if(o.type===m)l=o;else if(o.type===u){const s=o,l=s.props,{showCloseButton:r,closeButtonText:i,closeButtonDisabled:a,onClose:c,actions:u}=l,d=e(l,["showCloseButton","closeButtonText","closeButtonDisabled","onClose","actions"]);n=t.cloneElement(s,Object.assign({showCloseButton:B,closeButtonText:b,closeButtonDisabled:j,onClose:v,actions:C},d))}})),n||(n=o.jsx(u,{showCloseButton:B,closeButtonText:b,closeButtonDisabled:j,onClose:v,actions:C})),o.jsxs(o.Fragment,{children:[s||x&&o.jsx(d,{children:x}),l,n]})})()})})})),x=f;x.Header=d,x.Body=m,x.Footer=u;export{f as Modal,x as default};
+//# sourceMappingURL=Modal.js.map

package/esm/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;
+export declare const ImperativeControl: Story;
+export declare const CompleteStructure: Story;
+export declare const NoDefaultCloseButton: Story;
+export declare const DisabledCloseButton: Story;
+export declare const Sizing: Story;
+export declare const LongContent: Story;

package/esm/components/Modal/ModalBody.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ModalBodyProps {
+    children: React.ReactNode;
+}
+export declare const ModalBody: React.FC<ModalBodyProps>;
+export default ModalBody;

package/esm/components/Modal/ModalBody.js

@@ -0,0 +1,2 @@
+import{j as r}from"../../_virtual/jsx-runtime.js";import{Box as o}from"@mui/material";const i=({children:i})=>r.jsx(o,{sx:{padding:2,overflowY:"auto",flexGrow:1},children:i});export{i as ModalBody,i as default};
+//# sourceMappingURL=ModalBody.js.map

package/esm/components/Modal/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/Modal/ModalFooter.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+export interface ModalAction {
+    text: string;
+    onClick: () => void;
+    disabled?: boolean;
+    variant?: ButtonProps['variant'];
+    color?: ButtonProps['color'];
+}
+export interface ModalFooterProps {
+    children?: React.ReactNode;
+    showCloseButton?: boolean;
+    closeButtonText?: string;
+    closeButtonDisabled?: boolean;
+    onClose: () => void;
+    actions?: ModalAction[];
+}
+export declare const ModalFooter: React.FC<ModalFooterProps>;
+export default ModalFooter;

package/esm/components/Modal/ModalFooter.js

@@ -0,0 +1,2 @@
+import{j as o}from"../../_virtual/jsx-runtime.js";import{Box as e,Stack as i,Button as r}from"@mui/material";const n=({children:n,showCloseButton:l=!0,closeButtonText:s="Cerrar",closeButtonDisabled:t=!1,onClose:a,actions:d=[]})=>o.jsxs(e,{sx:{padding:2,borderTop:"1px solid #e0e0e0",display:"flex",justifyContent:"flex-end",gap:1},children:[n,o.jsxs(i,{direction:"row",spacing:1,children:[l&&o.jsx(r,{onClick:a,disabled:t,variant:"outlined",color:"secondary",children:s}),d.map(((e,i)=>o.jsx(r,{onClick:e.onClick,disabled:e.disabled,variant:e.variant||"contained",color:e.color||"primary",children:e.text},i)))]})]});export{n as ModalFooter,n as default};
+//# sourceMappingURL=ModalFooter.js.map

package/esm/components/Modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/Modal/ModalHeader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ModalHeaderProps {
+    children: React.ReactNode;
+}
+export declare const ModalHeader: React.FC<ModalHeaderProps>;
+export default ModalHeader;

package/esm/components/Modal/ModalHeader.js

@@ -0,0 +1,2 @@
+import{j as e}from"../../_virtual/jsx-runtime.js";import{Box as t,Typography as i}from"@mui/material";const r=({children:r})=>e.jsx(t,{sx:{padding:2,borderBottom:"1px solid #e0e0e0",display:"flex",alignItems:"center",justifyContent:"space-between"},children:e.jsx(i,{variant:"h6",component:"h2",children:r})});export{r as ModalHeader,r as default};
+//# sourceMappingURL=ModalHeader.js.map

package/esm/components/Modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

package/esm/components/Modal.js

@@ -0,0 +1,2 @@
+export{default as Modal}from"./Modal/Modal.js";
+//# sourceMappingURL=Modal.js.map

package/esm/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -60,6 +60,11 @@
       "require": "./cjs/components/Select.cjs",
       "types": "./esm/components/Select/Select.d.ts"
     },
+    "./components/Modal": {
+      "import": "./esm/components/Modal.js",
+      "require": "./cjs/components/Modal.cjs",
+      "types": "./esm/components/Modal/Modal.d.ts"
+    },
     "./components/MenuButton": {
       "import": "./esm/components/MenuButton.js",
       "require": "./cjs/components/MenuButton.cjs",