@razmisoft/react-confirm/dist/index.mjs

A beautiful, flexible, and fully-featured confirmation dialog component for React applications. Built with TypeScript, Tailwind CSS, and Radix UI for maximum flexibility and accessibility.

'use client'
var le=Object.defineProperty,ce=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var k=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable;var G=(e,o,t)=>o in e?le(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,n=(e,o)=>{for(var t in o||(o={}))J.call(o,t)&&G(e,t,o[t]);if(k)for(var t of k(o))K.call(o,t)&&G(e,t,o[t]);return e},f=(e,o)=>ce(e,me(o));var s=(e,o)=>{var t={};for(var a in e)J.call(e,a)&&o.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&k)for(var a of k(e))o.indexOf(a)<0&&K.call(e,a)&&(t[a]=e[a]);return t};var b=(e,o,t)=>new Promise((a,i)=>{var l=m=>{try{c(t.next(m))}catch(u){i(u)}},p=m=>{try{c(t.throw(m))}catch(u){i(u)}},c=m=>m.done?a(m.value):Promise.resolve(m.value).then(l,p);c((t=t.apply(e,o)).next())});import he,{createContext as ye,useCallback as Pe,useContext as be}from"react";import{useEffect as xe,useState as S}from"react";import*as w from"react";import*as r from"@radix-ui/react-dialog";import{clsx as pe}from"clsx";import{twMerge as de}from"tailwind-merge";function C(...e){return de(pe(e))}import{jsx as Q,jsxs as fe}from"react/jsx-runtime";function T(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return fe("svg",f(n({xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o},t),{children:[Q("path",{d:"M18 6 6 18"}),Q("path",{d:"m6 6 12 12"})]}))}import{jsx as h,jsxs as V}from"react/jsx-runtime";var A=r.Root,ge=r.Trigger,Y=r.Portal,ue=r.Close,W=w.forwardRef((a,t)=>{var i=a,{className:e}=i,o=s(i,["className"]);return h(r.Overlay,n({ref:t,className:C("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e)},o))});W.displayName=r.Overlay.displayName;var I=w.forwardRef((i,a)=>{var l=i,{className:e,children:o}=l,t=s(l,["className","children"]);return V(Y,{children:[h(W,{}),V(r.Content,f(n({ref:a,className:C("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",e)},t),{children:[o,V(r.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",children:[h(T,{className:"h-4 w-4"}),h("span",{className:"sr-only",children:"Close"})]})]}))]})});I.displayName=r.Content.displayName;var O=t=>{var a=t,{className:e}=a,o=s(a,["className"]);return h("div",n({className:C("flex flex-col space-y-1.5 text-center sm:text-left",e)},o))};O.displayName="DialogHeader";var L=t=>{var a=t,{className:e}=a,o=s(a,["className"]);return h("div",n({className:C("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e)},o))};L.displayName="DialogFooter";var B=w.forwardRef((a,t)=>{var i=a,{className:e}=i,o=s(i,["className"]);return h(r.Title,n({ref:t,className:C("text-lg font-semibold leading-none tracking-tight",e)},o))});B.displayName=r.Title.displayName;var y=w.forwardRef((a,t)=>{var i=a,{className:e}=i,o=s(i,["className"]);return h(r.Description,n({ref:t,className:C("text-sm text-muted-foreground",e)},o))});y.displayName=r.Description.displayName;import*as oe from"react";import{cva as De}from"class-variance-authority";import{jsx as _}from"react/jsx-runtime";function M(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return _("svg",f(n({xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o},t),{children:_("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})}))}import{Fragment as $,jsx as P,jsxs as ee}from"react/jsx-runtime";var ve=De("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-slate-900 text-slate-50 hover:bg-slate-900/90",destructive:"bg-red-500 text-slate-50 hover:bg-red-500/90",outline:"border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900",secondary:"bg-slate-100 text-slate-900 hover:bg-slate-100/80",ghost:"hover:bg-slate-100 hover:text-slate-900",link:"text-slate-900 underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),E=oe.forwardRef((d,x)=>{var D=d,{className:e,variant:o,size:t,startIcon:a,endIcon:i,loading:l=!1,loadingText:p="Loading...",children:c,disabled:m}=D,u=s(D,["className","variant","size","startIcon","endIcon","loading","loadingText","children","disabled"]);let v=m||l;return P("button",f(n({className:C(ve({variant:o,size:t,className:e})),ref:x,disabled:v,"aria-busy":l},u),{children:l?ee($,{children:[P(M,{className:"mr-2 h-4 w-4 animate-spin","aria-hidden":"true"}),P("span",{children:p})]}):ee($,{children:[a&&P("span",{className:"mr-2","aria-hidden":"true",children:a}),P("span",{children:c}),i&&P("span",{className:"ml-2","aria-hidden":"true",children:i})]})}))});E.displayName="Button";import{jsx as F,jsxs as Ce}from"react/jsx-runtime";function te(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return Ce("svg",f(n({xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o},t),{children:[F("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"}),F("path",{d:"M12 9v4"}),F("path",{d:"M12 17h.01"})]}))}import{jsx as ie}from"react/jsx-runtime";function ae(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return ie("svg",f(n({xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o},t),{children:ie("polyline",{points:"20 6 9 17 4 12"})}))}import{jsx as g,jsxs as z}from"react/jsx-runtime";function U({open:e,onOpenChange:o,onConfirm:t,onCancel:a,title:i="Confirm Action",description:l,confirmText:p="Confirm",cancelText:c="Cancel",icon:m,variant:u="default"}){let[x,d]=S(!1),[D,v]=S(),[R,H]=S();xe(()=>{e||(d(!1),v(void 0),H(void 0))},[e]);let se=()=>b(this,null,function*(){d(!0),v(void 0),H(void 0);try{yield t(),H("Operation completed successfully"),setTimeout(()=>o(!1),1500)}catch(q){v(q instanceof Error?q.message:"An error occurred")}finally{d(!1)}});return g(A,{open:e,onOpenChange:o,children:z(I,{className:"bg-white",children:[z(O,{children:[g("div",{className:"mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100",children:x?g(M,{className:"animate-spin text-blue-600","aria-hidden":"true"}):D?g(T,{className:"text-red-600","aria-hidden":"true"}):R?g(ae,{className:"text-green-600","aria-hidden":"true"}):m||g(te,{className:"text-yellow-600","aria-hidden":"true"})}),g(B,{className:"text-center",children:i}),l&&!D&&!R&&g(y,{className:"text-center",children:l}),D&&g(y,{className:"text-center text-red-600",children:D}),R&&g(y,{className:"text-center text-green-600",children:R})]}),z(L,{className:"sm:justify-center",children:[g(E,{variant:"outline",onClick:a,disabled:x,children:c}),g(E,{variant:u,onClick:se,loading:x,loadingText:"Loading...",disabled:x,children:p})]})]})})}import{useCallback as N,useState as X}from"react";var Z={title:"",description:"",confirmText:"Confirm",cancelText:"Cancel",variant:"default"};function j(){let[e,o]=X(!1),[t,a]=X(Z),[i,l]=X(),p=N(d=>{a(D=>n(n({},D),d))},[]),c=N(()=>{a(Z),l(void 0)},[]),m=N((d={})=>(o(!0),a(n(n({},Z),d)),new Promise(D=>{l(()=>v=>b(this,null,function*(){v&&d.onConfirm?yield d.onConfirm():!v&&d.onCancel&&d.onCancel(),D(v),o(!1),c()}))})),[c]),u=N(()=>b(this,null,function*(){i&&(yield i(!0))}),[i]),x=N(()=>{i&&i(!1),c()},[i,c]);return{isOpen:e,options:t,confirm:m,updateDialog:p,handleConfirm:u,handleCancel:x}}import{jsx as ne,jsxs as Re}from"react/jsx-runtime";var re=ye(void 0);function we({children:e}){let{isOpen:o,options:t,confirm:a,updateDialog:i,handleConfirm:l,handleCancel:p}=j(),c=Pe(()=>{p()},[p]),m=he.useMemo(()=>({confirm:a,updateDialog:i,closeDialog:c}),[a,i,c]);return Re(re.Provider,{value:m,children:[e,ne("div",{id:"react-confirm-dialog-portal",children:ne(U,n({open:o,onOpenChange:u=>!u&&p(),onConfirm:l,onCancel:p},t))})]})}function Ne(){let e=be(re);if(!e)throw new Error("useConfirm must be used within a ConfirmProvider");return e}export{U as ConfirmDialog,we as ConfirmProvider,A as Dialog,ue as DialogClose,I as DialogContent,y as DialogDescription,L as DialogFooter,O as DialogHeader,W as DialogOverlay,Y as DialogPortal,B as DialogTitle,ge as DialogTrigger,Ne as useConfirm,j as useConfirmation};