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

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'
"use strict";var ge=Object.create;var k=Object.defineProperty,ue=Object.defineProperties,De=Object.getOwnPropertyDescriptor,ve=Object.getOwnPropertyDescriptors,Ce=Object.getOwnPropertyNames,A=Object.getOwnPropertySymbols,xe=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty,ee=Object.prototype.propertyIsEnumerable;var $=(e,o,t)=>o in e?k(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,n=(e,o)=>{for(var t in o||(o={}))G.call(o,t)&&$(e,t,o[t]);if(A)for(var t of A(o))ee.call(o,t)&&$(e,t,o[t]);return e},D=(e,o)=>ue(e,ve(o));var s=(e,o)=>{var t={};for(var a in e)G.call(e,a)&&o.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&A)for(var a of A(e))o.indexOf(a)<0&&ee.call(e,a)&&(t[a]=e[a]);return t};var he=(e,o)=>{for(var t in o)k(e,t,{get:o[t],enumerable:!0})},oe=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of Ce(o))!G.call(e,i)&&i!==t&&k(e,i,{get:()=>o[i],enumerable:!(a=De(o,i))||a.enumerable});return e};var W=(e,o,t)=>(t=e!=null?ge(xe(e)):{},oe(o||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e)),ye=e=>oe(k({},"__esModule",{value:!0}),e);var T=(e,o,t)=>new Promise((a,i)=>{var c=p=>{try{m(t.next(p))}catch(v){i(v)}},g=p=>{try{m(t.throw(p))}catch(v){i(v)}},m=p=>p.done?a(p.value):Promise.resolve(p.value).then(c,g);m((t=t.apply(e,o)).next())});var be={};he(be,{ConfirmDialog:()=>Z,ConfirmProvider:()=>pe,Dialog:()=>S,DialogClose:()=>ne,DialogContent:()=>L,DialogDescription:()=>w,DialogFooter:()=>M,DialogHeader:()=>B,DialogOverlay:()=>z,DialogPortal:()=>J,DialogTitle:()=>E,DialogTrigger:()=>ae,useConfirm:()=>de,useConfirmation:()=>j});module.exports=ye(be);var b=W(require("react"));var R=require("react");var O=W(require("react")),r=W(require("@radix-ui/react-dialog"));var te=require("clsx"),ie=require("tailwind-merge");function y(...e){return(0,ie.twMerge)((0,te.clsx)(e))}var I=require("react/jsx-runtime");function F(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return(0,I.jsxs)("svg",D(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:[(0,I.jsx)("path",{d:"M18 6 6 18"}),(0,I.jsx)("path",{d:"m6 6 12 12"})]}))}var d=require("react/jsx-runtime"),S=r.Root,ae=r.Trigger,J=r.Portal,ne=r.Close,z=O.forwardRef((a,t)=>{var i=a,{className:e}=i,o=s(i,["className"]);return(0,d.jsx)(r.Overlay,n({ref:t,className:y("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))});z.displayName=r.Overlay.displayName;var L=O.forwardRef((i,a)=>{var c=i,{className:e,children:o}=c,t=s(c,["className","children"]);return(0,d.jsxs)(J,{children:[(0,d.jsx)(z,{}),(0,d.jsxs)(r.Content,D(n({ref:a,className:y("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,(0,d.jsxs)(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:[(0,d.jsx)(F,{className:"h-4 w-4"}),(0,d.jsx)("span",{className:"sr-only",children:"Close"})]})]}))]})});L.displayName=r.Content.displayName;var B=t=>{var a=t,{className:e}=a,o=s(a,["className"]);return(0,d.jsx)("div",n({className:y("flex flex-col space-y-1.5 text-center sm:text-left",e)},o))};B.displayName="DialogHeader";var M=t=>{var a=t,{className:e}=a,o=s(a,["className"]);return(0,d.jsx)("div",n({className:y("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e)},o))};M.displayName="DialogFooter";var E=O.forwardRef((a,t)=>{var i=a,{className:e}=i,o=s(i,["className"]);return(0,d.jsx)(r.Title,n({ref:t,className:y("text-lg font-semibold leading-none tracking-tight",e)},o))});E.displayName=r.Title.displayName;var w=O.forwardRef((a,t)=>{var i=a,{className:e}=i,o=s(i,["className"]);return(0,d.jsx)(r.Description,n({ref:t,className:y("text-sm text-muted-foreground",e)},o))});w.displayName=r.Description.displayName;var re=W(require("react")),se=require("class-variance-authority");var K=require("react/jsx-runtime");function U(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return(0,K.jsx)("svg",D(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:(0,K.jsx)("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})}))}var f=require("react/jsx-runtime"),Pe=(0,se.cva)("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"}}),X=re.forwardRef((u,P)=>{var C=u,{className:e,variant:o,size:t,startIcon:a,endIcon:i,loading:c=!1,loadingText:g="Loading...",children:m,disabled:p}=C,v=s(C,["className","variant","size","startIcon","endIcon","loading","loadingText","children","disabled"]);let h=p||c;return(0,f.jsx)("button",D(n({className:y(Pe({variant:o,size:t,className:e})),ref:P,disabled:h,"aria-busy":c},v),{children:c?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(U,{className:"mr-2 h-4 w-4 animate-spin","aria-hidden":"true"}),(0,f.jsx)("span",{children:g})]}):(0,f.jsxs)(f.Fragment,{children:[a&&(0,f.jsx)("span",{className:"mr-2","aria-hidden":"true",children:a}),(0,f.jsx)("span",{children:m}),i&&(0,f.jsx)("span",{className:"ml-2","aria-hidden":"true",children:i})]})}))});X.displayName="Button";var N=require("react/jsx-runtime");function le(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return(0,N.jsxs)("svg",D(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:[(0,N.jsx)("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"}),(0,N.jsx)("path",{d:"M12 9v4"}),(0,N.jsx)("path",{d:"M12 17h.01"})]}))}var Q=require("react/jsx-runtime");function ce(a){var i=a,{size:e=24,className:o}=i,t=s(i,["size","className"]);return(0,Q.jsx)("svg",D(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:(0,Q.jsx)("polyline",{points:"20 6 9 17 4 12"})}))}var l=require("react/jsx-runtime");function Z({open:e,onOpenChange:o,onConfirm:t,onCancel:a,title:i="Confirm Action",description:c,confirmText:g="Confirm",cancelText:m="Cancel",icon:p,variant:v="default"}){let[P,u]=(0,R.useState)(!1),[C,h]=(0,R.useState)(),[V,q]=(0,R.useState)();(0,R.useEffect)(()=>{e||(u(!1),h(void 0),q(void 0))},[e]);let fe=()=>T(this,null,function*(){u(!0),h(void 0),q(void 0);try{yield t(),q("Operation completed successfully"),setTimeout(()=>o(!1),1500)}catch(_){h(_ instanceof Error?_.message:"An error occurred")}finally{u(!1)}});return(0,l.jsx)(S,{open:e,onOpenChange:o,children:(0,l.jsxs)(L,{className:"bg-white",children:[(0,l.jsxs)(B,{children:[(0,l.jsx)("div",{className:"mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100",children:P?(0,l.jsx)(U,{className:"animate-spin text-blue-600","aria-hidden":"true"}):C?(0,l.jsx)(F,{className:"text-red-600","aria-hidden":"true"}):V?(0,l.jsx)(ce,{className:"text-green-600","aria-hidden":"true"}):p||(0,l.jsx)(le,{className:"text-yellow-600","aria-hidden":"true"})}),(0,l.jsx)(E,{className:"text-center",children:i}),c&&!C&&!V&&(0,l.jsx)(w,{className:"text-center",children:c}),C&&(0,l.jsx)(w,{className:"text-center text-red-600",children:C}),V&&(0,l.jsx)(w,{className:"text-center text-green-600",children:V})]}),(0,l.jsxs)(M,{className:"sm:justify-center",children:[(0,l.jsx)(X,{variant:"outline",onClick:a,disabled:P,children:m}),(0,l.jsx)(X,{variant:v,onClick:fe,loading:P,loadingText:"Loading...",disabled:P,children:g})]})]})})}var x=require("react");var Y={title:"",description:"",confirmText:"Confirm",cancelText:"Cancel",variant:"default"};function j(){let[e,o]=(0,x.useState)(!1),[t,a]=(0,x.useState)(Y),[i,c]=(0,x.useState)(),g=(0,x.useCallback)(u=>{a(C=>n(n({},C),u))},[]),m=(0,x.useCallback)(()=>{a(Y),c(void 0)},[]),p=(0,x.useCallback)((u={})=>(o(!0),a(n(n({},Y),u)),new Promise(C=>{c(()=>h=>T(this,null,function*(){h&&u.onConfirm?yield u.onConfirm():!h&&u.onCancel&&u.onCancel(),C(h),o(!1),m()}))})),[m]),v=(0,x.useCallback)(()=>T(this,null,function*(){i&&(yield i(!0))}),[i]),P=(0,x.useCallback)(()=>{i&&i(!1),m()},[i,m]);return{isOpen:e,options:t,confirm:p,updateDialog:g,handleConfirm:v,handleCancel:P}}var H=require("react/jsx-runtime"),me=(0,b.createContext)(void 0);function pe({children:e}){let{isOpen:o,options:t,confirm:a,updateDialog:i,handleConfirm:c,handleCancel:g}=j(),m=(0,b.useCallback)(()=>{g()},[g]),p=b.default.useMemo(()=>({confirm:a,updateDialog:i,closeDialog:m}),[a,i,m]);return(0,H.jsxs)(me.Provider,{value:p,children:[e,(0,H.jsx)("div",{id:"react-confirm-dialog-portal",children:(0,H.jsx)(Z,n({open:o,onOpenChange:v=>!v&&g(),onConfirm:c,onCancel:g},t))})]})}function de(){let e=(0,b.useContext)(me);if(!e)throw new Error("useConfirm must be used within a ConfirmProvider");return e}0&&(module.exports={ConfirmDialog,ConfirmProvider,Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogOverlay,DialogPortal,DialogTitle,DialogTrigger,useConfirm,useConfirmation});