@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

package/storybook-static/assets/Modal.stories-DIWzm4qR.js

@@ -0,0 +1,468 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as s,R as U}from"./iframe-BAJnc_4n.js";import{u as oe}from"./formField.sx-DMCmZIAa.js";import{f as p}from"./index-B1tlhOpe.js";import{c as ue}from"./createSvgIcon-D_Gca4vA.js";import{E as pe,W as fe}from"./ErrorOutline-D9gM7ART.js";import{C as ye}from"./CheckCircleOutline-CEj5mDsl.js";import{B as d}from"./Box-BnhEcfFm.js";import{S as q}from"./Stack-D01OUIXi.js";import{B as m}from"./Button-DBpqmVB_.js";import{T as i}from"./Typography-BgntX2Ep.js";import{u as be}from"./useTheme-BmOJK7ra.js";import{u as xe}from"./index-CIeucmOB.js";import{M as K}from"./Modal-3okp9H2i.js";import{P as Z}from"./Paper-SwQBhqI7.js";import{I as z}from"./Input-CjX0t4h-.js";import{u as ge}from"./ClipBoard-DvLBdNHe.js";import"./preload-helper-PPVm8Dsz.js";import"./DefaultPropsProvider-BGoQxtDa.js";import"./extendSxProp-CEpa30hT.js";import"./useThemeProps-DYtxXiUU.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./useId-b4fZxjOL.js";import"./ButtonBase-qyaMEhe4.js";import"./useTimeout-DNjRaOWc.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./useForkRef-0ANIrxcF.js";import"./isFocusVisible-B8k4qzLc.js";import"./CircularProgress-DC7ZNWwl.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./useSlot-b6pXgp5_.js";import"./Portal-Cj8XF9Lf.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./getReactElementRef-BQ3ANZdy.js";import"./Fade-Ll96CvH8.js";import"./resolvePreset-CN2aOJJr.js";import"./TextField-22T-xHBm.js";import"./Select-DJh2biEb.js";import"./Menu-ClzfjLc3.js";import"./useSlotProps-C0uMfuBt.js";import"./debounce-Be36O1Ab.js";import"./Grow-8y4FglGK.js";import"./mergeSlotProps-B0UBKBMe.js";import"./useControlled-DsVh1a5j.js";import"./isMuiElement-CTZSFcY5.js";import"./Snackbar-BtVeKTw6.js";import"./Alert-3zvTPc0p.js";import"./Close-Cy8nELYU.js";import"./IconButton-9OYSTH58.js";const he=ue(e.jsx("path",{d:"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"})),T=({children:n,showCloseButton:o=!0,closeButtonText:a="Cerrar",closeButtonDisabled:l=!1,onClose:c,actions:u=[]})=>e.jsxs(d,{sx:{padding:2,borderTop:"1px solid #e0e0e0",display:"flex",justifyContent:"flex-end",gap:1},children:[n,e.jsxs(q,{direction:"row",spacing:1,children:[o&&e.jsx(m,{onClick:c,disabled:l,variant:"outlined",color:"secondary",children:a}),u.map((t,f)=>{const{buttonProps:y}=t;return e.jsx(m,{onClick:t.onClick,disabled:t.disabled,variant:t.variant||"contained",color:t.color||"primary",...y,children:t.text},f)})]})]});T.__docgenInfo={description:"",methods:[],displayName:"ModalFooter",props:{children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},showCloseButton:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},closeButtonText:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Cerrar"',computed:!1}},closeButtonDisabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},onClose:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},actions:{required:!1,tsType:{name:"Array",elements:[{name:"ModalAction"}],raw:"ModalAction[]"},description:"",defaultValue:{value:"[]",computed:!1}}}};const H=({children:n})=>e.jsx(d,{sx:{padding:2,borderBottom:"1px solid #e0e0e0",display:"flex",alignItems:"center",justifyContent:"space-between"},children:e.jsx(i,{variant:"h6",component:"h2",children:n})});H.__docgenInfo={description:"",methods:[],displayName:"ModalHeader",props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}};const _=({children:n})=>e.jsx(d,{sx:{padding:2,overflowY:"auto",flexGrow:1},children:n});_.__docgenInfo={description:"",methods:[],displayName:"ModalBody",props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}};const ee={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"90%",maxHeight:"90vh",display:"flex",flexDirection:"column",outline:"none"},Ce={info:{color:"primary",icon:e.jsx(he,{sx:{fontSize:48}}),bg:"primary.light"},warning:{color:"warning",icon:e.jsx(fe,{sx:{fontSize:48}}),bg:"warning.light"},error:{color:"error",icon:e.jsx(pe,{sx:{fontSize:48}}),bg:"error.light"},success:{color:"success",icon:e.jsx(ye,{sx:{fontSize:48}}),bg:"success.light"}},ne=s.forwardRef(({mode:n="default",open:o,onClose:a,title:l,children:c,showCloseButton:u=!0,closeButtonText:t="Cerrar",closeButtonDisabled:f=!1,actions:y=[],maxWidth:C="sm",hiddenFooter:S=!1,onConfirm:v,confirmText:N="Confirmar",confirmDisabled:re=!1,severity:B="info",confirmMessage:ae},te)=>{const[se,G]=s.useState(!1),[X,$]=s.useState(!1),J=o!==void 0?o:se;s.useImperativeHandle(te,()=>({open:()=>G(!0),close:()=>{G(!1),a?.()}}));const g=()=>{G(!1),a?.()},ie=async()=>{if(!v){g();return}try{const b=v();b instanceof Promise&&($(!0),await b)}finally{$(!1),g()}},le=be(),de=xe(le.breakpoints.down("sm")),Q=()=>{if(de)return"95%";switch(C){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}};if(n==="confirm"){const b=Ce[B],j=ae??c;return e.jsx(K,{open:J,onClose:g,"aria-labelledby":"modal-title",closeAfterTransition:!0,children:e.jsxs(Z,{sx:{...ee,width:Q()},children:[e.jsxs(q,{spacing:2.5,sx:{p:3,alignItems:"center",textAlign:"center"},children:[e.jsx(d,{sx:{width:72,height:72,borderRadius:"50%",backgroundColor:x=>x.palette[B==="info"?"primary":B].light,color:x=>x.palette[B==="info"?"primary":B].dark,display:"flex",alignItems:"center",justifyContent:"center",opacity:.9},children:b.icon}),l&&e.jsx(i,{variant:"h6",component:"h2",sx:{fontWeight:700},children:l}),j&&e.jsx(i,{variant:"body2",color:"text.secondary",children:j})]}),e.jsx(T,{showCloseButton:u,closeButtonText:t,closeButtonDisabled:f||X,onClose:g,actions:[{text:N,onClick:ie,disabled:re||X,variant:"contained",color:b.color}]})]})})}const ce=()=>{let b=null,j=null,x=null;return U.Children.forEach(c,h=>{if(U.isValidElement(h)){if(h.type===H)b=h;else if(h.type===_)j=h;else if(h.type===T){const Y=h,{showCloseButton:ve,closeButtonText:Me,closeButtonDisabled:Se,onClose:Be,actions:je,...me}=Y.props;x=U.cloneElement(Y,{showCloseButton:u,closeButtonText:t,closeButtonDisabled:f,onClose:g,actions:y,...me})}}}),!x&&!S&&(x=e.jsx(T,{showCloseButton:u,closeButtonText:t,closeButtonDisabled:f,onClose:g,actions:y})),e.jsxs(e.Fragment,{children:[b||l&&e.jsx(H,{children:l}),j,x]})};return e.jsx(K,{open:J,onClose:g,"aria-labelledby":"modal-title","aria-describedby":"modal-description",closeAfterTransition:!0,children:e.jsx(Z,{sx:{...ee,width:Q()},children:ce()})})}),r=ne;r.Header=H;r.Body=_;r.Footer=T;ne.__docgenInfo={description:"",methods:[{name:"open",docblock:null,modifiers:[],params:[],returns:null},{name:"close",docblock:null,modifiers:[],params:[],returns:null}],displayName:"Modal",props:{mode:{required:!1,tsType:{name:"union",raw:"'default' | 'confirm'",elements:[{name:"literal",value:"'default'"},{name:"literal",value:"'confirm'"}]},description:'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".',defaultValue:{value:"'default'",computed:!1}},open:{required:!1,tsType:{name:"boolean"},description:"Controlado externamente. Omitir si se usa vía ref."},onClose:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback al cerrar. También se dispara al confirmar/cancelar."},title:{required:!1,tsType:{name:"string"},description:""},children:{required:!1,tsType:{name:"ReactNode"},description:""},showCloseButton:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},closeButtonText:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Cerrar'",computed:!1}},closeButtonDisabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},actions:{required:!1,tsType:{name:"Array",elements:[{name:"ModalAction"}],raw:"ModalAction[]"},description:"",defaultValue:{value:"[]",computed:!1}},maxWidth:{required:!1,tsType:{name:"DialogProps['maxWidth']",raw:"DialogProps['maxWidth']"},description:"",defaultValue:{value:"'sm'",computed:!1}},hiddenFooter:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},onConfirm:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void | Promise<void>",signature:{arguments:[],return:{name:"union",raw:"void | Promise<void>",elements:[{name:"void"},{name:"Promise",elements:[{name:"void"}],raw:"Promise<void>"}]}}},description:"Callback de confirmación. Soporta promesa — si devuelve `Promise`, el\nbotón muestra estado `disabled` mientras resuelve."},confirmText:{required:!1,tsType:{name:"string"},description:'Texto del botón primario en modo `confirm`. Default: "Confirmar".',defaultValue:{value:"'Confirmar'",computed:!1}},confirmDisabled:{required:!1,tsType:{name:"boolean"},description:"Deshabilita el botón de confirmar.",defaultValue:{value:"false",computed:!1}},severity:{required:!1,tsType:{name:"union",raw:"'info' | 'warning' | 'error' | 'success'",elements:[{name:"literal",value:"'info'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'error'"},{name:"literal",value:"'success'"}]},description:'Severidad visual en modo `confirm`. Controla el icono y el color del\nbotó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"',defaultValue:{value:"'info'",computed:!1}},confirmMessage:{required:!1,tsType:{name:"ReactNode"},description:"Mensaje del confirm. Puede ser string o cualquier ReactNode. Si se omite,\nse usa `children`."}}};const Bo={title:"Components/Modal",component:r,tags:["autodocs"],argTypes:{open:{control:"boolean",description:"Controla si el modal está abierto o cerrado (uso controlado). Opcional si se usa el control imperativo con `ref`."},onClose:{action:"onClose clickeado",description:"Función a ejecutar cuando el modal solicita cerrarse (ej. clic fuera o botón de cerrar). Opcional si se usa el control imperativo con `ref`."},title:{control:"text",description:"Título opcional para el encabezado del modal. Se usará si no se proporciona `Modal.Header` explícitamente."},children:{control:"object",description:"Contenido del modal, típicamente `Modal.Header`, `Modal.Body` y `Modal.Footer`."},showCloseButton:{control:"boolean",description:'Controla la visibilidad del botón "Cerrar" por defecto en el `Modal.Footer`.'},closeButtonText:{control:"text",description:'Texto personalizado para el botón "Cerrar".'},closeButtonDisabled:{control:"boolean",description:'Deshabilita el botón "Cerrar".'},actions:{control:"object",description:"Un arreglo de objetos `ModalAction` para botones de acción personalizados en el `Modal.Footer`."},maxWidth:{control:"select",options:["xs","sm","md","lg","xl",!1],description:"Tamaño máximo del modal (propiedad de Material-UI `Dialog`)."}},parameters:{docs:{description:{component:"Un componente de modal reutilizable de Material-UI con una estructura de componente compuesto (`Modal.Header`, `Modal.Body`, `Modal.Footer`). Puede ser controlado por una prop `open` o de forma imperativa a través de `ref` (`open()` y `close()` métodos). Permite definir acciones personalizadas y controlar la visibilidad y el estado de los botones por defecto."}}}},M={args:{open:!0,onClose:p(),title:"Modal de Ejemplo (Controlado por Estado)",children:e.jsxs(r.Body,{children:[e.jsx(i,{children:"Este es el contenido principal del modal."}),e.jsx(i,{sx:{mt:2},children:"Puedes colocar cualquier elemento React aquí."})]}),showCloseButton:!0,closeButtonText:"Cerrar",actions:[{text:"Guardar",onClick:p(()=>console.log("some some")),variant:"contained"},{text:"Aceptar",onClick:p(),color:"success"}]},parameters:{docs:{description:{story:"Muestra un modal básico con un título y botones de acción, controlado por una prop `open` en el componente padre."}}}},E={render:n=>{const o=s.useRef(null),a=()=>{o.current?.open()},l=()=>{alert("Acción confirmada desde el modal imperativo!"),o.current?.close()};return e.jsxs(d,{children:[e.jsx(m,{onClick:a,variant:"contained",children:"Abrir Modal Imperativo"}),e.jsx(r,{ref:o,onClose:p(()=>console.log("Modal cerrado imperativamente")),title:"Modal Controlado Imperativamente",showCloseButton:!0,closeButtonText:"Cerrar",actions:[{text:"Aceptar",onClick:l,variant:"contained"}],maxWidth:"sm",...n,children:e.jsxs(r.Body,{children:[e.jsx(i,{children:"Este modal se abre y cierra llamando a métodos de la `ref`."}),e.jsx(i,{sx:{mt:2},children:"No hay un `useState` para `open` en este componente padre."})]})})]})},args:{open:void 0,onClose:void 0},parameters:{docs:{description:{story:"Demuestra cómo controlar el modal de forma imperativa usando `useRef` y los métodos `open()` y `close()` expuestos por el modal, sin necesidad de gestionar un estado `open` en el componente padre."}}}},k={args:{open:!0,onClose:p(),maxWidth:"md",children:e.jsxs(e.Fragment,{children:[e.jsx(r.Header,{children:e.jsx(i,{variant:"h6",children:"Detalles del Artículo"})}),e.jsx(r.Body,{children:e.jsxs(d,{sx:{p:2,border:"1px dashed grey",borderRadius:1},children:[e.jsx(i,{children:"Aquí va un formulario complejo o información detallada."}),e.jsx(i,{sx:{mt:1},children:"El cuerpo puede crecer y tener scroll si es necesario."}),e.jsx(m,{onClick:p(),sx:{mt:2},children:"Acción en el cuerpo"})]})}),e.jsx(r.Footer,{showCloseButton:!1,onClose:p(),actions:[{text:"Cancelar",onClick:p(),variant:"outlined",color:"error"},{text:"Confirmar Envío",onClick:p(),variant:"contained",color:"primary"}],children:e.jsx(i,{variant:"caption",sx:{mr:2},children:"Requiere confirmación."})})]})},parameters:{docs:{description:{story:"Demuestra el uso completo de la estructura de componente compuesto (`Modal.Header`, `Modal.Body`, `Modal.Footer`) con contenido variado y control de botones."}}}},O={args:{...M.args,title:"Modal sin botón de cerrar",showCloseButton:!1,actions:[{text:"Entendido",onClick:p(),variant:"contained"}]},parameters:{docs:{description:{story:'Un modal que no muestra el botón "Cerrar" por defecto, forzando al usuario a usar las acciones personalizadas.'}}}},w={args:{...M.args,title:"Modal con botón de cerrar deshabilitado",closeButtonDisabled:!0,actions:[{text:"Habilitar",onClick:p(),variant:"contained"}]},parameters:{docs:{description:{story:'Muestra un modal donde el botón "Cerrar" por defecto está deshabilitado.'}}}},A={render:n=>{const[o,a]=s.useState(!1),[l,c]=s.useState(!1),{ref:u,CopyMessage:t}=ge();return e.jsxs(d,{sx:{display:"flex",gap:2},children:[e.jsx(m,{onClick:()=>a(!0),variant:"outlined",children:"Abrir XS"}),e.jsx(m,{onClick:()=>c(!0),variant:"outlined",children:"Abrir LG"}),e.jsx(r,{...n,open:o,onClose:()=>a(!1),title:"Modal XS",maxWidth:"xs",children:e.jsx(r.Body,{children:e.jsx(i,{children:"Este es un modal de tamaño extra pequeño."})})}),e.jsx(r,{...n,open:l,onClose:()=>c(!1),title:"Modal LG",maxWidth:"lg",children:e.jsxs(r.Body,{children:[e.jsx(i,{ref:u,children:"Este es un modal de tamaño grande."}),e.jsx(t,{})]})})]})},args:{open:!1,onClose:p()},parameters:{docs:{description:{story:"Demuestra cómo el modal se ajusta a diferentes tamaños (`maxWidth`) definidos por las propiedades de Material-UI."}}}},R={args:{open:!0,onClose:p(),title:"Modal con Contenido Largo",maxWidth:"sm",children:e.jsx(r.Body,{children:Array.from({length:30},(n,o)=>e.jsxs(i,{sx:{mb:1},children:["Este es un párrafo de contenido largo para probar el scroll del modal. Línea ",o+1,". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]},o))})},parameters:{docs:{description:{story:"Muestra un modal con un cuerpo que contiene mucho texto, demostrando la funcionalidad de scroll automático."}}}},F={render:()=>{const[n,o]=s.useState(!1),[a,l]=s.useState(null),{control:c,handleSubmit:u,reset:t,formState:{isSubmitting:f}}=oe({defaultValues:{name:"",email:""}}),y=async S=>{await new Promise(v=>setTimeout(v,500)),l(S),o(!1),t()},C=()=>{o(!1),t()};return e.jsxs(d,{children:[e.jsx(m,{variant:"contained",onClick:()=>o(!0),children:"Abrir form en Modal"}),a&&e.jsxs(i,{sx:{mt:2},color:"success.main",children:["Enviado: ",JSON.stringify(a)]}),e.jsx(r,{open:n,onClose:C,title:"Crear usuario",maxWidth:"sm",hiddenFooter:!0,children:e.jsx(r.Body,{children:e.jsx(d,{component:"form",onSubmit:u(y),noValidate:!0,paddingTop:2,children:e.jsxs(q,{spacing:3,children:[e.jsx(z,{name:"name",control:c,label:"Nombre",validation:{required:"El nombre es requerido",minLength:{value:2,message:"Mínimo 2 caracteres"}}}),e.jsx(z,{name:"email",control:c,label:"Email",type:"email",validation:{required:"El email es requerido",pattern:{value:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,message:"Email inválido"}}}),e.jsxs(q,{direction:"row",spacing:1,justifyContent:"flex-end",sx:{pt:1},children:[e.jsx(m,{type:"button",variant:"text",onClick:C,disabled:f,children:"Cancelar"}),e.jsx(m,{type:"submit",variant:"contained",disabled:f,children:f?"Guardando...":"Guardar"})]})]})})})})]})},parameters:{docs:{description:{story:["**Modal + React Hook Form con botones a nivel del Body (recomendado).**","","Cuando usás RHF dentro de un modal, los botones de submit/cancel deben","vivir dentro del mismo `<form>` que los inputs. Si ponés los botones","en `Modal.Footer`, quedan en un subárbol hermano al Body y el submit","no dispara porque el `<form>` no los envuelve.","","La solución es:","1. Usar `hiddenFooter` en el Modal para ocultar el footer por defecto.","2. Meter el `<form>`, los inputs y los botones todos dentro de `Modal.Body`.",'3. El botón de submit usa `type="submit"`, que dispara el `onSubmit` del form.'].join(`
+`)}}}},I={render:()=>{const[n,o]=s.useState(!1);return e.jsxs(d,{children:[e.jsx(m,{variant:"contained",onClick:()=>o(!0),children:"Abrir confirm (info)"}),e.jsx(r,{mode:"confirm",open:n,onClose:()=>o(!1),title:"¿Deseas continuar?",confirmMessage:"Esta acción guardará los cambios realizados en el formulario.",confirmText:"Sí, continuar",closeButtonText:"Cancelar",onConfirm:()=>console.log("confirmed")})]})},parameters:{docs:{description:{story:"Confirm de severidad `info` (default). Layout centrado con icono circular, título, mensaje y botones Cancelar / Confirmar."}}}},D={render:()=>{const[n,o]=s.useState(!1);return e.jsxs(d,{children:[e.jsx(m,{variant:"outlined",color:"error",onClick:()=>o(!0),children:"Eliminar afiliación"}),e.jsx(r,{mode:"confirm",severity:"error",open:n,onClose:()=>o(!1),title:"Eliminar afiliación",confirmMessage:"Esta acción no se puede deshacer. ¿Confirmas que deseas eliminar la afiliación #12458?",confirmText:"Sí, eliminar",closeButtonText:"Cancelar",onConfirm:()=>console.log("deleted")})]})},parameters:{docs:{description:{story:"Confirm de severidad `error` — icono rojo y botón primario rojo. Patrón típico para operaciones destructivas."}}}},P={render:()=>{const[n,o]=s.useState(!1);return e.jsxs(d,{children:[e.jsx(m,{variant:"contained",color:"warning",onClick:()=>o(!0),children:"Salir sin guardar"}),e.jsx(r,{mode:"confirm",severity:"warning",open:n,onClose:()=>o(!1),title:"Tienes cambios sin guardar",confirmMessage:"Si sales ahora perderás los cambios realizados. ¿Deseas salir igualmente?",confirmText:"Salir sin guardar",closeButtonText:"Seguir editando",onConfirm:()=>console.log("discarded")})]})}},L={render:()=>{const[n,o]=s.useState(!1);return e.jsxs(d,{children:[e.jsx(m,{variant:"contained",color:"success",onClick:()=>o(!0),children:"Aprobar solicitud"}),e.jsx(r,{mode:"confirm",severity:"success",open:n,onClose:()=>o(!1),title:"Aprobar solicitud",confirmMessage:"Al aprobar, el cliente recibirá una notificación y se activará su afiliación.",confirmText:"Aprobar",closeButtonText:"Cancelar",onConfirm:()=>console.log("approved")})]})}},V={render:()=>{const[n,o]=s.useState(!1),[a,l]=s.useState(null),c=()=>new Promise(u=>{setTimeout(()=>{l("Ejecutado después de 1.5s"),u()},1500)});return e.jsxs(d,{children:[e.jsx(m,{variant:"contained",onClick:()=>o(!0),children:"Confirmar con request async"}),a&&e.jsx(i,{sx:{mt:2},color:"success.main",children:a}),e.jsx(r,{mode:"confirm",open:n,onClose:()=>o(!1),title:"Procesar afiliación",confirmMessage:"Esto enviará la solicitud al backend y puede tardar unos segundos.",confirmText:"Procesar",onConfirm:c})]})},parameters:{docs:{description:{story:"El `onConfirm` puede devolver una `Promise`. Mientras resuelve, los botones quedan deshabilitados para evitar clicks dobles. Al resolver, el modal cierra automáticamente."}}}},W={render:()=>{const[n,o]=s.useState(!1),[a,l]=s.useState(null),{control:c,handleSubmit:u,reset:t,formState:{isSubmitting:f}}=oe({defaultValues:{name:"",email:""}}),y="user-form-footer",C=async v=>{await new Promise(N=>setTimeout(N,500)),l(v),o(!1),t()},S=()=>{o(!1),t()};return e.jsxs(d,{children:[e.jsx(m,{variant:"contained",onClick:()=>o(!0),children:"Abrir form (footer con formId)"}),a&&e.jsxs(i,{sx:{mt:2},color:"success.main",children:["Enviado: ",JSON.stringify(a)]}),e.jsx(r,{open:n,onClose:S,title:"Crear usuario (footer)",maxWidth:"sm",actions:[{text:f?"Guardando...":"Guardar",buttonProps:{type:"submit",form:y,variant:"contained",disabled:f}}],closeButtonText:"Cancelar",children:e.jsx(r.Body,{children:e.jsx(d,{component:"form",id:y,onSubmit:u(C),noValidate:!0,paddingTop:2,children:e.jsxs(q,{spacing:3,children:[e.jsx(z,{name:"name",control:c,label:"Nombre",validation:{required:"El nombre es requerido"}}),e.jsx(z,{name:"email",control:c,label:"Email",type:"email",validation:{required:"El email es requerido",pattern:{value:/^[^\s@]+@[^\s@]+\.[^\s@]+$/,message:"Email inválido"}}})]})})})})]})},parameters:{docs:{description:{story:['**Alternativa avanzada: botones en el footer usando `form="formId"`.**',"","Si necesitás mantener el layout clásico (Header / Body / Footer) con los","botones en el footer, la forma correcta es asignarle un `id` al `<form>`",'y al botón de submit le pasás `form="mismoId"`. HTML5 nativo conecta',"el botón con el form aunque no sean hermanos en el DOM.","","```tsx",'<form id="user-form" onSubmit={handleSubmit(onSubmit)}>...</form>','<button type="submit" form="user-form">Guardar</button>',"```","","Es la alternativa cuando querés reutilizar `Modal.Footer` con sus `actions`","en lugar de construir los botones a mano dentro del body."].join(`
+`)}}}};M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  args: {
+    open: true,
+    onClose: fn(),
+    title: 'Modal de Ejemplo (Controlado por Estado)',
+    children: <Modal.Body>
+                <Typography>Este es el contenido principal del modal.</Typography>
+                <Typography sx={{
+        mt: 2
+      }}>Puedes colocar cualquier elemento React aquí.</Typography>
+            </Modal.Body>,
+    showCloseButton: true,
+    closeButtonText: 'Cerrar',
+    actions: [{
+      text: 'Guardar',
+      onClick: fn(() => console.log("some some")),
+      variant: 'contained'
+    }, {
+      text: 'Aceptar',
+      onClick: fn(),
+      color: 'success'
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra un modal básico con un título y botones de acción, controlado por una prop \`open\` en el componente padre.'
+      }
+    }
+  }
+}`,...M.parameters?.docs?.source}}};E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const modalRef = useRef<ModalRef>(null);
+    const handleOpen = () => {
+      modalRef.current?.open();
+    };
+    const handleConfirm = () => {
+      alert('Acción confirmada desde el modal imperativo!');
+      modalRef.current?.close();
+    };
+    return <Box>
+                <Button onClick={handleOpen} variant="contained">
+                    Abrir Modal Imperativo
+                </Button>
+
+                <Modal ref={modalRef} // Asigna la ref al modal
+      // No se pasa la prop \`open\` aquí, el modal gestiona su estado interno
+      onClose={fn(() => console.log('Modal cerrado imperativamente'))} // El padre aún puede escuchar el cierre
+      title="Modal Controlado Imperativamente" showCloseButton={true} closeButtonText="Cerrar" actions={[{
+        text: 'Aceptar',
+        onClick: handleConfirm,
+        variant: 'contained'
+      }]} maxWidth="sm" {...args} // Pasa otras props del story
+      >
+                    <Modal.Body>
+                        <Typography>Este modal se abre y cierra llamando a métodos de la \`ref\`.</Typography>
+                        <Typography sx={{
+            mt: 2
+          }}>No hay un \`useState\` para \`open\` en este componente padre.</Typography>
+                    </Modal.Body>
+                </Modal>
+            </Box>;
+  },
+  args: {
+    // Las props 'open' y 'onClose' se omiten o se gestionan internamente en el render
+    open: undefined,
+    // Asegúrate de que \`open\` no se pase para activar el control interno
+    onClose: undefined // \`onClose\` se gestiona en el render
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demuestra cómo controlar el modal de forma imperativa usando \`useRef\` y los métodos \`open()\` y \`close()\` expuestos por el modal, sin necesidad de gestionar un estado \`open\` en el componente padre.'
+      }
+    }
+  }
+}`,...E.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  args: {
+    open: true,
+    onClose: fn(),
+    maxWidth: 'md',
+    children: <>
+                <Modal.Header>
+                    <Typography variant="h6">Detalles del Artículo</Typography>
+                </Modal.Header>
+                <Modal.Body>
+                    <Box sx={{
+          p: 2,
+          border: '1px dashed grey',
+          borderRadius: 1
+        }}>
+                        <Typography>Aquí va un formulario complejo o información detallada.</Typography>
+                        <Typography sx={{
+            mt: 1
+          }}>El cuerpo puede crecer y tener scroll si es necesario.</Typography>
+                        <Button onClick={fn()} sx={{
+            mt: 2
+          }}>Acción en el cuerpo</Button>
+                    </Box>
+                </Modal.Body>
+                <Modal.Footer showCloseButton={false} onClose={fn()} // Added onClose property
+      actions={[{
+        text: 'Cancelar',
+        onClick: fn(),
+        variant: 'outlined',
+        color: 'error'
+      }, {
+        text: 'Confirmar Envío',
+        onClick: fn(),
+        variant: 'contained',
+        color: 'primary'
+      }]}>
+                    <Typography variant="caption" sx={{
+          mr: 2
+        }}>
+                        Requiere confirmación.
+                    </Typography>
+                </Modal.Footer>
+            </>
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demuestra el uso completo de la estructura de componente compuesto (\`Modal.Header\`, \`Modal.Body\`, \`Modal.Footer\`) con contenido variado y control de botones.'
+      }
+    }
+  }
+}`,...k.parameters?.docs?.source}}};O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Default.args,
+    title: 'Modal sin botón de cerrar',
+    showCloseButton: false,
+    actions: [{
+      text: 'Entendido',
+      onClick: fn(),
+      variant: 'contained'
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Un modal que no muestra el botón "Cerrar" por defecto, forzando al usuario a usar las acciones personalizadas.'
+      }
+    }
+  }
+}`,...O.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Default.args,
+    title: 'Modal con botón de cerrar deshabilitado',
+    closeButtonDisabled: true,
+    actions: [{
+      text: 'Habilitar',
+      onClick: fn(),
+      variant: 'contained'
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra un modal donde el botón "Cerrar" por defecto está deshabilitado.'
+      }
+    }
+  }
+}`,...w.parameters?.docs?.source}}};A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+  render: (args: any) => {
+    const [openXs, setOpenXs] = useState(false);
+    const [openLg, setOpenLg] = useState(false);
+    const {
+      ref,
+      CopyMessage
+    } = useClipboard();
+    return <Box sx={{
+      display: 'flex',
+      gap: 2
+    }}>
+                <Button onClick={() => setOpenXs(true)} variant="outlined">Abrir XS</Button>
+                <Button onClick={() => setOpenLg(true)} variant="outlined">Abrir LG</Button>
+
+                <Modal {...args} open={openXs} onClose={() => setOpenXs(false)} title="Modal XS" maxWidth="xs">
+                    <Modal.Body><Typography>Este es un modal de tamaño extra pequeño.</Typography></Modal.Body>
+                </Modal>
+
+                <Modal {...args} open={openLg} onClose={() => setOpenLg(false)} title="Modal LG" maxWidth="lg">
+                    <Modal.Body>
+                        <Typography ref={ref}>Este es un modal de tamaño grande.</Typography>
+                        <CopyMessage />
+                    </Modal.Body>
+                </Modal>
+            </Box>;
+  },
+  args: {
+    open: false,
+    onClose: fn()
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demuestra cómo el modal se ajusta a diferentes tamaños (\`maxWidth\`) definidos por las propiedades de Material-UI.'
+      }
+    }
+  }
+}`,...A.parameters?.docs?.source}}};R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  args: {
+    open: true,
+    onClose: fn(),
+    title: 'Modal con Contenido Largo',
+    maxWidth: 'sm',
+    children: <Modal.Body>
+                {Array.from({
+        length: 30
+      }, (_, i) => <Typography key={i} sx={{
+        mb: 1
+      }}>
+                        Este es un párrafo de contenido largo para probar el scroll del modal. Línea {i + 1}.
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </Typography>)}
+            </Modal.Body>
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra un modal con un cuerpo que contiene mucho texto, demostrando la funcionalidad de scroll automático.'
+      }
+    }
+  }
+}`,...R.parameters?.docs?.source}}};F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [submitted, setSubmitted] = useState<UserFormValues | null>(null);
+    const {
+      control,
+      handleSubmit,
+      reset,
+      formState: {
+        isSubmitting
+      }
+    } = useForm<UserFormValues>({
+      defaultValues: {
+        name: '',
+        email: ''
+      }
+    });
+    const onSubmit = async (data: UserFormValues) => {
+      await new Promise(r => setTimeout(r, 500));
+      setSubmitted(data);
+      setOpen(false);
+      reset();
+    };
+    const handleClose = () => {
+      setOpen(false);
+      reset();
+    };
+    return <Box>
+                <Button variant="contained" onClick={() => setOpen(true)}>
+                    Abrir form en Modal
+                </Button>
+                {submitted && <Typography sx={{
+        mt: 2
+      }} color="success.main">
+                        Enviado: {JSON.stringify(submitted)}
+                    </Typography>}
+
+                <Modal open={open} onClose={handleClose} title="Crear usuario" maxWidth="sm" hiddenFooter // 👈 ocultamos el footer por defecto
+      >
+                    <Modal.Body>
+                        {/* El form envuelve TODO: inputs + botones.
+                            Los botones están dentro del body, NO en un footer. */}
+                        <Box component="form" onSubmit={handleSubmit(onSubmit)} noValidate paddingTop={2}>
+                            <Stack spacing={3}>
+                                <Input name="name" control={control} label="Nombre" validation={{
+                required: 'El nombre es requerido',
+                minLength: {
+                  value: 2,
+                  message: 'Mínimo 2 caracteres'
+                }
+              }} />
+                                <Input name="email" control={control} label="Email" type="email" validation={{
+                required: 'El email es requerido',
+                pattern: {
+                  value: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
+                  message: 'Email inválido'
+                }
+              }} />
+
+                                {/* Botones DENTRO del form, a nivel del body. */}
+                                <Stack direction="row" spacing={1} justifyContent="flex-end" sx={{
+                pt: 1
+              }}>
+                                    <Button type="button" variant="text" onClick={handleClose} disabled={isSubmitting}>
+                                        Cancelar
+                                    </Button>
+                                    <Button type="submit" variant="contained" disabled={isSubmitting}>
+                                        {isSubmitting ? 'Guardando...' : 'Guardar'}
+                                    </Button>
+                                </Stack>
+                            </Stack>
+                        </Box>
+                    </Modal.Body>
+                </Modal>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: ['**Modal + React Hook Form con botones a nivel del Body (recomendado).**', '', 'Cuando usás RHF dentro de un modal, los botones de submit/cancel deben', 'vivir dentro del mismo \`<form>\` que los inputs. Si ponés los botones', 'en \`Modal.Footer\`, quedan en un subárbol hermano al Body y el submit', 'no dispara porque el \`<form>\` no los envuelve.', '', 'La solución es:', '1. Usar \`hiddenFooter\` en el Modal para ocultar el footer por defecto.', '2. Meter el \`<form>\`, los inputs y los botones todos dentro de \`Modal.Body\`.', '3. El botón de submit usa \`type="submit"\`, que dispara el \`onSubmit\` del form.'].join('\\n')
+      }
+    }
+  }
+}`,...F.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <Box>
+                <Button variant="contained" onClick={() => setOpen(true)}>
+                    Abrir confirm (info)
+                </Button>
+                <Modal mode="confirm" open={open} onClose={() => setOpen(false)} title="¿Deseas continuar?" confirmMessage="Esta acción guardará los cambios realizados en el formulario." confirmText="Sí, continuar" closeButtonText="Cancelar" onConfirm={() => console.log('confirmed')} />
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Confirm de severidad \`info\` (default). Layout centrado con icono circular, título, mensaje y botones Cancelar / Confirmar.'
+      }
+    }
+  }
+}`,...I.parameters?.docs?.source}}};D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <Box>
+                <Button variant="outlined" color="error" onClick={() => setOpen(true)}>
+                    Eliminar afiliación
+                </Button>
+                <Modal mode="confirm" severity="error" open={open} onClose={() => setOpen(false)} title="Eliminar afiliación" confirmMessage="Esta acción no se puede deshacer. ¿Confirmas que deseas eliminar la afiliación #12458?" confirmText="Sí, eliminar" closeButtonText="Cancelar" onConfirm={() => console.log('deleted')} />
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Confirm de severidad \`error\` — icono rojo y botón primario rojo. Patrón típico para operaciones destructivas.'
+      }
+    }
+  }
+}`,...D.parameters?.docs?.source}}};P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <Box>
+                <Button variant="contained" color="warning" onClick={() => setOpen(true)}>
+                    Salir sin guardar
+                </Button>
+                <Modal mode="confirm" severity="warning" open={open} onClose={() => setOpen(false)} title="Tienes cambios sin guardar" confirmMessage="Si sales ahora perderás los cambios realizados. ¿Deseas salir igualmente?" confirmText="Salir sin guardar" closeButtonText="Seguir editando" onConfirm={() => console.log('discarded')} />
+            </Box>;
+  }
+}`,...P.parameters?.docs?.source}}};L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return <Box>
+                <Button variant="contained" color="success" onClick={() => setOpen(true)}>
+                    Aprobar solicitud
+                </Button>
+                <Modal mode="confirm" severity="success" open={open} onClose={() => setOpen(false)} title="Aprobar solicitud" confirmMessage="Al aprobar, el cliente recibirá una notificación y se activará su afiliación." confirmText="Aprobar" closeButtonText="Cancelar" onConfirm={() => console.log('approved')} />
+            </Box>;
+  }
+}`,...L.parameters?.docs?.source}}};V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [result, setResult] = useState<string | null>(null);
+    const simulateRequest = () => new Promise<void>(resolve => {
+      setTimeout(() => {
+        setResult('Ejecutado después de 1.5s');
+        resolve();
+      }, 1500);
+    });
+    return <Box>
+                <Button variant="contained" onClick={() => setOpen(true)}>
+                    Confirmar con request async
+                </Button>
+                {result && <Typography sx={{
+        mt: 2
+      }} color="success.main">
+                        {result}
+                    </Typography>}
+                <Modal mode="confirm" open={open} onClose={() => setOpen(false)} title="Procesar afiliación" confirmMessage="Esto enviará la solicitud al backend y puede tardar unos segundos." confirmText="Procesar" onConfirm={simulateRequest} />
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'El \`onConfirm\` puede devolver una \`Promise\`. Mientras resuelve, los botones quedan deshabilitados para evitar clicks dobles. Al resolver, el modal cierra automáticamente.'
+      }
+    }
+  }
+}`,...V.parameters?.docs?.source}}};W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [submitted, setSubmitted] = useState<UserFormValues | null>(null);
+    const {
+      control,
+      handleSubmit,
+      reset,
+      formState: {
+        isSubmitting
+      }
+    } = useForm<UserFormValues>({
+      defaultValues: {
+        name: '',
+        email: ''
+      }
+    });
+    const FORM_ID = 'user-form-footer';
+    const onSubmit = async (data: UserFormValues) => {
+      await new Promise(r => setTimeout(r, 500));
+      setSubmitted(data);
+      setOpen(false);
+      reset();
+    };
+    const handleClose = () => {
+      setOpen(false);
+      reset();
+    };
+    return <Box>
+                <Button variant="contained" onClick={() => setOpen(true)}>
+                    Abrir form (footer con formId)
+                </Button>
+                {submitted && <Typography sx={{
+        mt: 2
+      }} color="success.main">
+                        Enviado: {JSON.stringify(submitted)}
+                    </Typography>}
+
+                <Modal open={open} onClose={handleClose} title="Crear usuario (footer)" maxWidth="sm" actions={[{
+        text: isSubmitting ? 'Guardando...' : 'Guardar',
+        // 👇 clave: el botón referencia al form por id.
+        buttonProps: {
+          type: 'submit',
+          form: FORM_ID,
+          variant: 'contained',
+          disabled: isSubmitting
+        }
+      }]} closeButtonText="Cancelar">
+                    <Modal.Body>
+                        <Box component="form" id={FORM_ID} onSubmit={handleSubmit(onSubmit)} noValidate paddingTop={2}>
+                            <Stack spacing={3}>
+                                <Input name="name" control={control} label="Nombre" validation={{
+                required: 'El nombre es requerido'
+              }} />
+                                <Input name="email" control={control} label="Email" type="email" validation={{
+                required: 'El email es requerido',
+                pattern: {
+                  value: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
+                  message: 'Email inválido'
+                }
+              }} />
+                            </Stack>
+                        </Box>
+                    </Modal.Body>
+                </Modal>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: ['**Alternativa avanzada: botones en el footer usando \`form="formId"\`.**', '', 'Si necesitás mantener el layout clásico (Header / Body / Footer) con los', 'botones en el footer, la forma correcta es asignarle un \`id\` al \`<form>\`', 'y al botón de submit le pasás \`form="mismoId"\`. HTML5 nativo conecta', 'el botón con el form aunque no sean hermanos en el DOM.', '', '\`\`\`tsx', '<form id="user-form" onSubmit={handleSubmit(onSubmit)}>...</form>', '<button type="submit" form="user-form">Guardar</button>', '\`\`\`', '', 'Es la alternativa cuando querés reutilizar \`Modal.Footer\` con sus \`actions\`', 'en lugar de construir los botones a mano dentro del body.'].join('\\n')
+      }
+    }
+  }
+}`,...W.parameters?.docs?.source}}};const jo=["Default","ImperativeControl","CompleteStructure","NoDefaultCloseButton","DisabledCloseButton","Sizing","LongContent","RHFInsideBody","ConfirmInfo","ConfirmDelete","ConfirmWarning","ConfirmSuccess","ConfirmAsync","RHFWithFooterFormId"];export{k as CompleteStructure,V as ConfirmAsync,D as ConfirmDelete,I as ConfirmInfo,L as ConfirmSuccess,P as ConfirmWarning,M as Default,w as DisabledCloseButton,E as ImperativeControl,R as LongContent,O as NoDefaultCloseButton,F as RHFInsideBody,W as RHFWithFooterFormId,A as Sizing,jo as __namedExportsOrder,Bo as default};

package/storybook-static/assets/MoreVert-BoIVG4gh.js

@@ -0,0 +1 @@
+import{j as o}from"./jsx-runtime-D_zvdyIk.js";import{c as s}from"./createSvgIcon-D_Gca4vA.js";const c=s(o.jsx("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"}));export{c as M};

package/storybook-static/assets/Notifications-DY_A-Sho.js

@@ -0,0 +1 @@
+import{j as o}from"./jsx-runtime-D_zvdyIk.js";import{c}from"./createSvgIcon-D_Gca4vA.js";const r=c(o.jsx("path",{d:"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2m6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1z"}));export{r as N};