@loke/ui/dist/components/alert-dialog/index.mjs

import{composeEventHandlers}from"@loke/ui/compose-events";import{useComposedRefs}from"@loke/ui/compose-refs";import{createContextScope}from"@loke/ui/context";import*as DialogPrimitive from"@loke/ui/dialog";import{createDialogScope}from"@loke/ui/dialog";import{createSlottable}from"@loke/ui/slot";import{forwardRef,useEffect,useRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";var ROOT_NAME="AlertDialog",[createAlertDialogContext,createAlertDialogScope]=createContextScope(ROOT_NAME,[createDialogScope]),useDialogScope=createDialogScope(),AlertDialog=(props)=>{let{__scopeAlertDialog,...alertDialogProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Root,{...dialogScope,...alertDialogProps,modal:!0})};AlertDialog.displayName=ROOT_NAME;var TRIGGER_NAME="AlertDialogTrigger",AlertDialogTrigger=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...triggerProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Trigger,{...dialogScope,...triggerProps,ref:forwardedRef})});AlertDialogTrigger.displayName=TRIGGER_NAME;var PORTAL_NAME="AlertDialogPortal",AlertDialogPortal=(props)=>{let{__scopeAlertDialog,...portalProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Portal,{...dialogScope,...portalProps})};AlertDialogPortal.displayName=PORTAL_NAME;var OVERLAY_NAME="AlertDialogOverlay",AlertDialogOverlay=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...overlayProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Overlay,{...dialogScope,...overlayProps,ref:forwardedRef})});AlertDialogOverlay.displayName=OVERLAY_NAME;var CONTENT_NAME="AlertDialogContent",[AlertDialogContentProvider,useAlertDialogContentContext]=createAlertDialogContext(CONTENT_NAME),Slottable=createSlottable("AlertDialogContent"),AlertDialogContent=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,children,...contentProps}=props,dialogScope=useDialogScope(__scopeAlertDialog),contentRef=useRef(null),composedRefs=useComposedRefs(forwardedRef,contentRef),cancelRef=useRef(null);return jsx(DialogPrimitive.WarningProvider,{contentName:CONTENT_NAME,docsSlug:"alert-dialog",titleName:TITLE_NAME,children:jsx(AlertDialogContentProvider,{cancelRef,scope:__scopeAlertDialog,children:jsxs(DialogPrimitive.Content,{role:"alertdialog",...dialogScope,...contentProps,onInteractOutside:(event)=>event.preventDefault(),onOpenAutoFocus:composeEventHandlers(contentProps.onOpenAutoFocus,(event)=>{event.preventDefault(),cancelRef.current?.focus({preventScroll:!0})}),onPointerDownOutside:(event)=>event.preventDefault(),ref:composedRefs,children:[jsx(Slottable,{children}),process.env.NODE_ENV==="development"&&jsx(DescriptionWarning,{contentRef})]})})})});AlertDialogContent.displayName=CONTENT_NAME;var TITLE_NAME="AlertDialogTitle",AlertDialogTitle=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...titleProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Title,{...dialogScope,...titleProps,ref:forwardedRef})});AlertDialogTitle.displayName=TITLE_NAME;var DESCRIPTION_NAME="AlertDialogDescription",AlertDialogDescription=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...descriptionProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Description,{...dialogScope,...descriptionProps,ref:forwardedRef})});AlertDialogDescription.displayName=DESCRIPTION_NAME;var ACTION_NAME="AlertDialogAction",AlertDialogAction=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...actionProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx(DialogPrimitive.Close,{...dialogScope,...actionProps,ref:forwardedRef})});AlertDialogAction.displayName=ACTION_NAME;var CANCEL_NAME="AlertDialogCancel",AlertDialogCancel=forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...cancelProps}=props,{cancelRef}=useAlertDialogContentContext(CANCEL_NAME,__scopeAlertDialog),dialogScope=useDialogScope(__scopeAlertDialog),ref=useComposedRefs(forwardedRef,cancelRef);return jsx(DialogPrimitive.Close,{...dialogScope,...cancelProps,ref})});AlertDialogCancel.displayName=CANCEL_NAME;var DescriptionWarning=({contentRef})=>{let MESSAGE=`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.

You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.

Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@loke/ui/visually-hidden\` primitive as a wrapper around your description component.

For more information, see https://design.loke.global/docs/components/alert-dialog`;return useEffect(()=>{if(!document.getElementById(contentRef.current?.getAttribute("aria-describedby")??""))console.warn(MESSAGE)},[MESSAGE,contentRef]),null},Root2=AlertDialog,Trigger2=AlertDialogTrigger,Portal2=AlertDialogPortal,Overlay2=AlertDialogOverlay,Content2=AlertDialogContent,Action=AlertDialogAction,Cancel=AlertDialogCancel,Title2=AlertDialogTitle,Description2=AlertDialogDescription;export{createAlertDialogScope,Trigger2 as Trigger,Title2 as Title,Root2 as Root,Portal2 as Portal,Overlay2 as Overlay,Description2 as Description,Content2 as Content,Cancel,AlertDialogTrigger,AlertDialogTitle,AlertDialogPortal,AlertDialogOverlay,AlertDialogDescription,AlertDialogContent,AlertDialogCancel,AlertDialogAction,AlertDialog,Action};