@omit/react-confirm-dialog/dist/index.mjs

A simple confirm dialog for React

import{useState as $,useCallback as C,useMemo as F,useContext as ee,createContext as te,memo as V}from"react";import*as n from"@radix-ui/react-alert-dialog";import{clsx as J}from"clsx";import{twMerge as K}from"tailwind-merge";function l(...e){return K(J(e))}import{cva as Q}from"class-variance-authority";import{Slot as X}from"@radix-ui/react-slot";import{jsx as Z}from"react/jsx-runtime";var Y=Q("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",{variants:{variant:{default:"bg-primary text-primary-foreground [a]:hover:bg-primary/80",outline:"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",ghost:"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",destructive:"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",xs:"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",lg:"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",icon:"size-8","icon-xs":"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg","icon-lg":"size-9"}},defaultVariants:{variant:"default",size:"default"}});function A({className:e,variant:t="default",size:o="default",asChild:i=!1,...s}){return Z(i?X:"button",{"data-slot":"button","data-variant":t,"data-size":o,className:l(Y({variant:t,size:o,className:e})),...s})}import{jsx as r}from"react/jsx-runtime";function b({...e}){return r(n.Root,{"data-slot":"alert-dialog",...e})}function h({...e}){return r(n.Portal,{"data-slot":"alert-dialog-portal",...e})}function P({className:e,...t}){return r(n.Overlay,{"data-slot":"alert-dialog-overlay",className:l("data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",e),...t})}function y({className:e,size:t="default",...o}){return r(n.Content,{"data-slot":"alert-dialog-content","data-size":t,className:l("data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",e),...o})}function O({className:e,...t}){return r("div",{"data-slot":"alert-dialog-header",className:l("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",e),...t})}function R({className:e,...t}){return r("div",{"data-slot":"alert-dialog-footer",className:l("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",e),...t})}function z({className:e,...t}){return r("div",{"data-slot":"alert-dialog-media",className:l("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",e),...t})}function k({className:e,...t}){return r(n.Title,{"data-slot":"alert-dialog-title",className:l("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",e),...t})}function N({className:e,...t}){return r(n.Description,{"data-slot":"alert-dialog-description",className:l("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",e),...t})}function T({className:e,variant:t="default",size:o="default",...i}){return r(A,{variant:t,size:o,asChild:!0,children:r(n.Action,{"data-slot":"alert-dialog-action",className:l(e),...i})})}function w({className:e,variant:t="outline",size:o="default",...i}){return r(A,{variant:t,size:o,asChild:!0,children:r(n.Cancel,{"data-slot":"alert-dialog-cancel",className:l(e),...i})})}import{Fragment as ie,jsx as g,jsxs as f}from"react/jsx-runtime";var W=te(void 0),B={title:"",description:"",confirmText:"Confirm",cancelText:"Cancel",confirmButton:{},cancelButton:{},alertDialogContent:{},alertDialogHeader:{},alertDialogTitle:{},alertDialogMedia:{},alertDialogDescription:{},alertDialogFooter:{}};function oe(e){return e.length===2}var _=V(({config:e,onConfirm:t,onCancel:o,setConfig:i})=>{let{title:s,description:d,cancelButton:u,confirmButton:D,confirmText:m,cancelText:x,icon:v,media:a,contentSlot:c,customActions:p,alertDialogOverlay:S,alertDialogContent:H,alertDialogHeader:L,alertDialogTitle:E,alertDialogMedia:U,alertDialogDescription:j,alertDialogFooter:q}=e,G=()=>p?oe(p)?p(t,o):p({confirm:t,cancel:o,config:e,setConfig:i}):f(ie,{children:[u!==null&&g(w,{onClick:o,...u,children:x}),g(T,{onClick:t,...D,children:m})]}),I=()=>!s&&!v?null:f(k,{...E,children:[v,s]});return f(h,{children:[g(P,{...S}),f(y,{...H,children:[f(O,{...L,children:[a&&g(z,{...U,children:a}),I(),d&&g(N,{...j,children:d}),c]}),g(R,{...q,children:G()})]})]})});_.displayName="ConfirmDialogContent";var M=V(({isOpen:e,onOpenChange:t,config:o,onConfirm:i,onCancel:s,setConfig:d})=>g(b,{open:e,onOpenChange:t,children:g(_,{config:o,onConfirm:i,onCancel:s,setConfig:d})}));M.displayName="ConfirmDialog";var xe=({defaultOptions:e={},children:t})=>{let[o,i]=$({isOpen:!1,config:B,resolver:null}),s=F(()=>({...B,...e}),[e]),d=C(a=>{i(c=>({...c,config:typeof a=="function"?a(c.config):{...c.config,...a}}))},[]),u=C(a=>(i(c=>({isOpen:!0,config:{...s,...a},resolver:c.resolver})),new Promise(c=>{i(p=>({...p,resolver:c}))})),[s]),D=C(()=>{i(a=>(a.resolver&&a.resolver(!0),{...a,isOpen:!1,resolver:null}))},[]),m=C(()=>{i(a=>(a.resolver&&a.resolver(!1),{...a,isOpen:!1,resolver:null}))},[]),x=C(a=>{a||m()},[m]),v=F(()=>({confirm:u,updateConfig:d}),[u,d]);return f(W.Provider,{value:v,children:[t,g(M,{isOpen:o.isOpen,onOpenChange:x,config:o.config,onConfirm:D,onCancel:m,setConfig:d})]})},Ae=()=>{let e=ee(W);if(!e)throw new Error("useConfirm must be used within a ConfirmDialogProvider");let{confirm:t,updateConfig:o}=e,i=t;return i.updateConfig=o,i};export{W as ConfirmContext,xe as ConfirmDialogProvider,Ae as useConfirm};
//# sourceMappingURL=index.mjs.map