ivt/dist/alert-dialog/index.mjs

Ivt Components Library

import * as React from 'react';
import { u as useComposedRefs, c as createContextScope } from '../chunks/index-D4jPaBZ2.mjs';
import { c as createDialogScope, R as Root, P as Portal, O as Overlay, b as Trigger, W as WarningProvider, a as Content, T as Title, D as Description, C as Close } from '../chunks/index-CaYwp6E6.mjs';
import { c as composeEventHandlers } from '../chunks/index-Dsw02Eup.mjs';
import { createSlottable } from '@radix-ui/react-slot';
import { jsx, jsxs } from 'react/jsx-runtime';
import { c as cn } from '../chunks/utils-BDcRwQMd.mjs';
import { b as buttonVariants } from '../chunks/button-CZpmCmNo.mjs';
import '../chunks/index-gX0V59dZ.mjs';
import '../chunks/index-C8u7IIcP.mjs';
import '../chunks/index-1toTCGyr.mjs';
import '../chunks/index-4NpeUekv.mjs';
import '../chunks/index-DC-gAYjS.mjs';
import '../chunks/index-z4Hk6sF4.mjs';
import '../chunks/tslib.es6-Q9puKanr.mjs';
import '../chunks/index-BksCjWh6.mjs';
import 'react-dom';
import '../chunks/index-DfeRLazC.mjs';
import '../chunks/bundle-mjs-CXmmFvYo.mjs';
import 'class-variance-authority';

var ROOT_NAME = "AlertDialog";
var [createAlertDialogContext] = createContextScope(ROOT_NAME, [
    createDialogScope
]);
var useDialogScope = createDialogScope();
var AlertDialog$1 = (props)=>{
    const { __scopeAlertDialog, ...alertDialogProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Root, {
        ...dialogScope,
        ...alertDialogProps,
        modal: true
    });
};
AlertDialog$1.displayName = ROOT_NAME;
var TRIGGER_NAME = "AlertDialogTrigger";
var AlertDialogTrigger$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, ...triggerProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Trigger, {
        ...dialogScope,
        ...triggerProps,
        ref: forwardedRef
    });
});
AlertDialogTrigger$1.displayName = TRIGGER_NAME;
var PORTAL_NAME = "AlertDialogPortal";
var AlertDialogPortal$1 = (props)=>{
    const { __scopeAlertDialog, ...portalProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Portal, {
        ...dialogScope,
        ...portalProps
    });
};
AlertDialogPortal$1.displayName = PORTAL_NAME;
var OVERLAY_NAME = "AlertDialogOverlay";
var AlertDialogOverlay$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, ...overlayProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Overlay, {
        ...dialogScope,
        ...overlayProps,
        ref: forwardedRef
    });
});
AlertDialogOverlay$1.displayName = OVERLAY_NAME;
var CONTENT_NAME = "AlertDialogContent";
var [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext(CONTENT_NAME);
var Slottable = createSlottable("AlertDialogContent");
var AlertDialogContent$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, children, ...contentProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    const contentRef = React.useRef(null);
    const composedRefs = useComposedRefs(forwardedRef, contentRef);
    const cancelRef = React.useRef(null);
    return /* @__PURE__ */ jsx(WarningProvider, {
        contentName: CONTENT_NAME,
        titleName: TITLE_NAME,
        docsSlug: "alert-dialog",
        children: /* @__PURE__ */ jsx(AlertDialogContentProvider, {
            scope: __scopeAlertDialog,
            cancelRef,
            children: /* @__PURE__ */ jsxs(Content, {
                role: "alertdialog",
                ...dialogScope,
                ...contentProps,
                ref: composedRefs,
                onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event)=>{
                    event.preventDefault();
                    cancelRef.current?.focus({
                        preventScroll: true
                    });
                }),
                onPointerDownOutside: (event)=>event.preventDefault(),
                onInteractOutside: (event)=>event.preventDefault(),
                children: [
                    /* @__PURE__ */ jsx(Slottable, {
                        children
                    }),
                    /* @__PURE__ */ jsx(DescriptionWarning, {
                        contentRef
                    })
                ]
            })
        })
    });
});
AlertDialogContent$1.displayName = CONTENT_NAME;
var TITLE_NAME = "AlertDialogTitle";
var AlertDialogTitle$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, ...titleProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Title, {
        ...dialogScope,
        ...titleProps,
        ref: forwardedRef
    });
});
AlertDialogTitle$1.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "AlertDialogDescription";
var AlertDialogDescription$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, ...descriptionProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Description, {
        ...dialogScope,
        ...descriptionProps,
        ref: forwardedRef
    });
});
AlertDialogDescription$1.displayName = DESCRIPTION_NAME;
var ACTION_NAME = "AlertDialogAction";
var AlertDialogAction$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, ...actionProps } = props;
    const dialogScope = useDialogScope(__scopeAlertDialog);
    return /* @__PURE__ */ jsx(Close, {
        ...dialogScope,
        ...actionProps,
        ref: forwardedRef
    });
});
AlertDialogAction$1.displayName = ACTION_NAME;
var CANCEL_NAME = "AlertDialogCancel";
var AlertDialogCancel$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAlertDialog, ...cancelProps } = props;
    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
    const dialogScope = useDialogScope(__scopeAlertDialog);
    const ref = useComposedRefs(forwardedRef, cancelRef);
    return /* @__PURE__ */ jsx(Close, {
        ...dialogScope,
        ...cancelProps,
        ref
    });
});
AlertDialogCancel$1.displayName = CANCEL_NAME;
var DescriptionWarning = ({ contentRef })=>{
    const 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 \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.

For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
    React.useEffect(()=>{
        const hasDescription = document.getElementById(contentRef.current?.getAttribute("aria-describedby"));
        if (!hasDescription) console.warn(MESSAGE);
    }, [
        MESSAGE,
        contentRef
    ]);
    return null;
};
var Root2 = AlertDialog$1;
var Trigger2 = AlertDialogTrigger$1;
var Portal2 = AlertDialogPortal$1;
var Overlay2 = AlertDialogOverlay$1;
var Content2 = AlertDialogContent$1;
var Action = AlertDialogAction$1;
var Cancel = AlertDialogCancel$1;
var Title2 = AlertDialogTitle$1;
var Description2 = AlertDialogDescription$1;

function AlertDialog({ ...props }) {
    return /*#__PURE__*/ React.createElement(Root2, {
        "data-slot": "alert-dialog",
        ...props
    });
}
function AlertDialogTrigger({ ...props }) {
    return /*#__PURE__*/ React.createElement(Trigger2, {
        "data-slot": "alert-dialog-trigger",
        ...props
    });
}
function AlertDialogPortal({ ...props }) {
    return /*#__PURE__*/ React.createElement(Portal2, {
        "data-slot": "alert-dialog-portal",
        ...props
    });
}
function AlertDialogOverlay({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Overlay2, {
        "data-slot": "alert-dialog-overlay",
        className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
        ...props
    });
}
function AlertDialogContent({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(AlertDialogPortal, null, /*#__PURE__*/ React.createElement(AlertDialogOverlay, null), /*#__PURE__*/ React.createElement(Content2, {
        "data-slot": "alert-dialog-content",
        className: cn("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
        ...props
    }));
}
function AlertDialogHeader({ className, ...props }) {
    return /*#__PURE__*/ React.createElement("div", {
        "data-slot": "alert-dialog-header",
        className: cn("flex flex-col gap-2 text-center sm:text-left", className),
        ...props
    });
}
function AlertDialogFooter({ className, ...props }) {
    return /*#__PURE__*/ React.createElement("div", {
        "data-slot": "alert-dialog-footer",
        className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
        ...props
    });
}
function AlertDialogTitle({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Title2, {
        "data-slot": "alert-dialog-title",
        className: cn("text-lg font-semibold", className),
        ...props
    });
}
function AlertDialogDescription({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Description2, {
        "data-slot": "alert-dialog-description",
        className: cn("text-muted-foreground text-sm", className),
        ...props
    });
}
function AlertDialogAction({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Action, {
        className: cn(buttonVariants(), className),
        ...props
    });
}
function AlertDialogCancel({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Cancel, {
        className: cn(buttonVariants({
            variant: "outline"
        }), className),
        ...props
    });
}

export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
//# sourceMappingURL=index.mjs.map