react-dialog-confirm
Version:
A modern, accessible React modal component library with multiple variants, animations, and enhanced features. Perfect for alerts, confirmations, and custom dialogs.
2 lines (1 loc) • 13.7 kB
JavaScript
"use strict";var a=require("react"),o=require("react/jsx-runtime");const e=a=>{switch(a){case"success":return o.jsxs("svg",{viewBox:"0 0 512 512",width:56,height:56,xmlns:"http://www.w3.org/2000/svg",children:[o.jsx("path",{d:"M256 6.998c-137.533 0-249 111.467-249 249 0 137.534 111.467 249 249 249s249-111.467 249-249c0-137.534-111.467-249-249-249zm0 478.08c-126.309 0-229.08-102.771-229.08-229.081 0-126.31 102.771-229.08 229.08-229.08 126.31 0 229.08 102.771 229.08 229.08 0 126.31-102.77 229.081-229.08 229.081z",fill:"#22c55e",className:"fill-425661"}),o.jsx("path",{fill:"#22c55e",d:"M384.235 158.192 216.919 325.518l-89.057-89.037-14.142 14.143 103.199 103.179L398.28 172.334z",className:"fill-425661"})]});case"warning":return o.jsxs("svg",{viewBox:"0 0 64 64",xmlns:"http://www.w3.org/2000/svg",width:56,height:56,enableBackground:"new 0 0 64 64",children:[o.jsx("path",{d:"M-196-222.1c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9 23.9 10.7 23.9 23.9-10.7 23.9-23.9 23.9zm0-45.2c-11.7 0-21.3 9.6-21.3 21.3s9.6 21.3 21.3 21.3 21.3-9.6 21.3-21.3-9.6-21.3-21.3-21.3z",transform:"translate(228 278)",fill:"#eab308",className:"fill-134563"}),o.jsx("path",{d:"M-197.4-236.1h2.8v2.8h-2.8zM-195.2-238.9h-1.6l-.6-11.3v-8.5h2.8v8.5l-.6 11.3",transform:"translate(228 278)",fill:"#eab308",className:"fill-134563"})]});case"error":return o.jsx("svg",{viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg",width:56,height:56,children:o.jsxs("g",{"data-name":"1",children:[o.jsx("path",{d:"M257 461.46c-114 0-206.73-92.74-206.73-206.73S143 48 257 48s206.73 92.74 206.73 206.73S371 461.46 257 461.46ZM257 78c-97.45 0-176.73 79.28-176.73 176.73S159.55 431.46 257 431.46s176.73-79.28 176.73-176.73S354.45 78 257 78Z",fill:"#ef4444",className:"fill-000000"}),o.jsx("path",{d:"M342.92 358a15 15 0 0 1-10.61-4.39L160.47 181.76a15 15 0 1 1 21.21-21.21L353.53 332.4a15 15 0 0 1-10.61 25.6Z",fill:"#ef4444",className:"fill-000000"}),o.jsx("path",{d:"M171.07 358a15 15 0 0 1-10.6-25.6l171.84-171.85a15 15 0 0 1 21.22 21.21L181.68 353.61a15 15 0 0 1-10.61 4.39Z",fill:"#ef4444",className:"fill-000000"})]})});case"info":return o.jsxs("svg",{viewBox:"0 0 50 50",xmlns:"http://www.w3.org/2000/svg",width:56,height:56,children:[o.jsx("circle",{cx:"25",cy:"25",fill:"none",r:"24",stroke:"#0ea5df",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",className:"stroke-000000"}),o.jsx("path",{fill:"none",d:"M0 0h50v50H0z"}),o.jsx("path",{d:"M23.779 16.241c-.216 0-.357-.144-.357-.359v-2.618c0-.215.142-.359.357-.359h2.439c.215 0 .359.144.359.359v2.618c0 .215-.145.359-.359.359h-2.439zm.073 21.052c-.215 0-.358-.143-.358-.358V20.473c0-.215.144-.359.358-.359h2.295c.216 0 .359.144.359.359v16.462c0 .216-.144.358-.359.358h-2.295z",fill:"#0ea5df",className:"fill-000000"})]});default:return null}},r=({close:a,disabled:e=!1})=>o.jsx("button",{className:"remover",onClick:a,disabled:e,"aria-label":"Close dialog",type:"button",children:o.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"icon icon-tabler icon-tabler-x",width:20,height:20,viewBox:"0 0 24 24",strokeWidth:"2.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",children:[o.jsx("path",{stroke:"none",d:"M0 0h24v24H0z"}),o.jsx("line",{x1:18,y1:6,x2:6,y2:18}),o.jsx("line",{x1:6,y1:6,x2:18,y2:18})]})});!function(a,o){void 0===o&&(o={});var e=o.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=a:i.appendChild(document.createTextNode(a))}}(":root{--black:#000;--white:#fff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--success-500:#10b981;--success-600:#059669;--warning-500:#f59e0b;--warning-600:#d97706;--error-500:#ef4444;--error-600:#dc2626;--info-500:#06b6d4;--info-600:#0891b2;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-normal:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1)}.dialog--container{align-items:center;bottom:0;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;justify-content:center;left:0;overflow-y:auto;padding:1rem;position:fixed;right:0;top:0;z-index:50}.dialog--container.dialog--sm .dialog--panel{max-width:24rem;width:100%}.dialog--container.dialog--sm .dialog--card{padding:1.25rem}.dialog--container.dialog--sm .dialog--card--title{font-size:1.125rem}.dialog--container.dialog--sm .dialog--card--description{font-size:.8125rem}.dialog--container.dialog--md .dialog--panel{max-width:28rem;width:100%}.dialog--container.dialog--md .dialog--card{padding:1.5rem}.dialog--container.dialog--lg .dialog--panel{max-width:32rem;width:100%}.dialog--container.dialog--lg .dialog--card{padding:2rem}.dialog--container.dialog--lg .dialog--card--title{font-size:1.5rem}.dialog--container.dialog--lg .dialog--card--description{font-size:1rem}.dialog--container.dialog--xl .dialog--panel{max-width:36rem;width:100%}.dialog--container.dialog--xl .dialog--card{padding:2.5rem}.dialog--container.dialog--xl .dialog--card--title{font-size:1.75rem}.dialog--container.dialog--xl .dialog--card--description{font-size:1.125rem}.dialog--container.dialog--full .dialog--panel{max-height:90vh;max-width:90vw;width:100%}.dialog--container.dialog--full .dialog--card{padding:3rem}.dialog--container.dialog--full .dialog--card--title{font-size:2rem}.dialog--container.dialog--full .dialog--card--description{font-size:1.25rem}.dialog--center .dialog--layout{align-items:center;justify-content:center}.dialog--top .dialog--layout{align-items:flex-start;padding-top:2rem}.dialog--bottom .dialog--layout{align-items:flex-end;padding-bottom:2rem}.dialog--left .dialog--layout{justify-content:flex-start;padding-left:2rem}.dialog--right .dialog--layout{justify-content:flex-end;padding-right:2rem}.dialog--blur .dialog--overlay{backdrop-filter:blur(4px);background-color:rgba(0,0,0,.3)}.dialog--transparent .dialog--overlay{background-color:transparent}.dialog--solid .dialog--overlay{background-color:rgba(0,0,0,.5)}.dialog--layout{align-items:center;display:flex;justify-content:center;min-height:100vh;position:relative;width:100%}.dialog--overlay{background-color:rgba(0,0,0,.5);bottom:0;left:0;position:fixed;right:0;top:0;transition:opacity var(--transition-normal)}.dialog--panel{animation:modalEnter .3s cubic-bezier(.16,1,.3,1) forwards;background-color:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-width:28rem;opacity:0;overflow:hidden;position:relative;transform:scale(.95);width:100%;z-index:10}.dialog--container:not(.dialog--out) .dialog--panel{opacity:1;transform:scale(1)}.dialog--container.dialog--out .dialog--panel{animation:modalExit .3s cubic-bezier(.16,1,.3,1) forwards}.dialog--card{background-color:var(--white);border-radius:var(--radius-xl);padding:1.5rem;position:relative}.remover{align-items:center;background-color:var(--gray-100);border-radius:var(--radius-md);color:var(--gray-600);cursor:pointer;display:flex;height:2rem;justify-content:center;position:absolute;right:1rem;top:1rem;transition:all var(--transition-fast);width:2rem;z-index:20}.remover:hover{background-color:var(--gray-200);color:var(--gray-800);transform:scale(1.05)}.remover:disabled{cursor:not-allowed;opacity:.5}.remover svg{height:1.25rem;width:1.25rem}.dialog--card--icon{display:flex;justify-content:center;margin-bottom:1.5rem;width:100%}.dialog--card--icon svg{height:3rem;width:3rem}.dialog--card--title{color:var(--gray-900);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;line-height:1.75rem;margin-bottom:.75rem;text-align:center}.dialog--card--description{color:var(--gray-600);font-size:.875rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem;text-align:center}.dialog--card--button-container{align-items:center;display:flex;gap:.75rem;justify-content:center;position:relative;width:100%}.dialog--button{align-items:center;border:none;border-radius:var(--radius-lg);color:var(--white);cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-width:5rem;padding:.75rem 1.5rem;transition:all var(--transition-fast)}.dialog--button:focus{outline:2px solid var(--primary-500);outline-offset:2px}.dialog--button:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.dialog--button-confirm{background-color:var(--primary-600);color:var(--white)}.dialog--button-confirm:hover:not(:disabled){background-color:var(--primary-700);box-shadow:var(--shadow-md);transform:translateY(-1px)}.dialog--button-confirm:active:not(:disabled){transform:translateY(0)}.dialog--button-cancel{background-color:var(--gray-100);color:var(--gray-700)}.dialog--button-cancel:hover:not(:disabled){background-color:var(--gray-200);color:var(--gray-800);transform:translateY(-1px)}.dialog--button-cancel:active:not(:disabled){transform:translateY(0)}.dialog--loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:30}.dialog--spinner{animation:spin 1s linear infinite;border-top:2px solid var(--gray-200);border:2px solid var(--gray-200);border-radius:50%;border-top-color:var(--primary-600);height:1.5rem;width:1.5rem}.dialog--out .dialog--panel{animation:modalExit var(--transition-slow) cubic-bezier(.16,1,.3,1) forwards}.dialog--out .dialog--overlay{opacity:0}@keyframes modalEnter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes modalExit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:640px){.dialog--container{padding:.5rem}.dialog--card{padding:1rem}.dialog--card--title{font-size:1.125rem}.dialog--card--button-container{flex-direction:column;gap:.5rem}.dialog--button{justify-content:center;width:100%}.dialog--full .dialog--panel{max-height:95vh;max-width:95vw}}@media (prefers-color-scheme:dark){.dialog--card{background-color:var(--gray-800)}.dialog--card,.dialog--card--title{color:var(--gray-100)}.dialog--card--description{color:var(--gray-300)}.dialog--button-cancel{background-color:var(--gray-700);color:var(--gray-200)}.dialog--button-cancel:hover:not(:disabled){background-color:var(--gray-600);color:var(--gray-100)}.remover{background-color:var(--gray-700);color:var(--gray-300)}.remover:hover{background-color:var(--gray-600);color:var(--gray-100)}}.dialog--panel:focus{outline:none}@media (prefers-reduced-motion:reduce){.dialog--button,.dialog--overlay,.dialog--panel,.remover{animation:none;transition:none}}");const i=a.createContext({});function t(){return a.useContext(i)}exports.DialogModal=({children:i,icon:l,title:n,titleStyle:d,description:s,descriptionStyle:c,confirm:g,confirmStyle:m,onConfirm:p,hasCancel:u,cancel:f,onCancel:h,size:x="md",position:b="center",backdrop:v="blur",backdropOpacity:y=.5,closeOnBackdropClick:w=!0,closeOnEscape:k=!0,showCloseButton:j=!0,loading:z=!1,disabled:N=!1,customHeader:C,customFooter:M,className:S,style:E})=>{const{isModalOpen:B,closeModal:L}=t(),[O,T]=a.useState(!1),$=a.useCallback(()=>{N||z||T(!0)},[N,z]),H=a.useCallback(a=>{!w||N||z||a.target===a.currentTarget&&$()},[w,N,z,$]),Y=a.useCallback(a=>{!k||N||z||"Escape"===a.key&&$()},[k,N,z,$]);a.useEffect(()=>{if(k)return document.addEventListener("keydown",Y),()=>{document.removeEventListener("keydown",Y)}},[Y,k]),O&&setTimeout(()=>{L()},300);const Z=a.useCallback(async()=>{if(!N&&!z)if(p)try{await p()}catch(a){console.error("Modal confirm error:",a)}else $()},[p,N,z,$]),F=a.useCallback(()=>{N||z||(h?h():$())},[h,N,z,$]);return B?o.jsx("div",{className:`dialog--container dialog--${x} dialog--${b} dialog--${v}${O?" dialog--out":""}${S?` ${S}`:""}`,style:E,onClick:H,role:"dialog","aria-modal":"true",children:o.jsxs("div",{className:"dialog--layout",children:[o.jsx("div",{className:"dialog--overlay",style:{opacity:y}}),o.jsx("div",{className:"dialog--panel",children:o.jsxs("div",{className:"dialog--card",children:[C||o.jsxs(o.Fragment,{children:[j&&o.jsx(r,{close:$,disabled:N||z}),l&&o.jsx("div",{className:"dialog--card--icon",children:e(l)}),n&&o.jsx("div",{className:"dialog--card--title",style:d,children:n}),s&&o.jsx("div",{className:"dialog--card--description",style:c,children:s})]}),i,M||o.jsxs("div",{className:"dialog--card--button-container",style:m,children:[z&&o.jsx("div",{className:"dialog--loading",children:o.jsx("div",{className:"dialog--spinner"})}),o.jsx("button",{className:"dialog--button dialog--button-confirm",onClick:Z,disabled:N||z,children:z?"Loading...":g||"OK"}),u&&o.jsx("button",{className:"dialog--button dialog--button-cancel",onClick:F,disabled:N||z,children:f||"Cancel"})]})]})})]})}):null},exports.DialogProvider=function({children:e}){const[r,t]=a.useState(!1),[l,n]=a.useState(null),d={isModalOpen:r,openModal:a=>{n(a),t(!0)},closeModal:()=>{t(!1),setTimeout(()=>{n(null)},300)},modalContent:l};return o.jsxs(i.Provider,{value:d,children:[e,l]})},exports.ModalContext=i,exports.useModal=t;