@nex-ui/react/dist/esm/components/dialog/DialogRoot.mjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import * as m from 'motion/react-m';
import { useDialog } from './DialogContext.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { dialogRecipe } from '../../theme/recipes/dialog.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { ModalRoot } from '../modal/ModalRoot.mjs';
import { ModalBackdrop } from '../modal/ModalBackdrop.mjs';
import { ModalPanel } from '../modal/ModalPanel.mjs';
import { useNexUI } from '../provider/Context.mjs';
import { composeClasses } from '../utils/composeClasses.mjs';
import { getUtilityClass } from '../utils/getUtilityClass.mjs';

const panelVariants = {
    visible: {
        opacity: 1,
        transform: 'scale(1)',
        transition: {
            ease: 'easeInOut',
            duration: 0.2
        }
    },
    hidden: {
        opacity: 0,
        transform: 'scale(1.04)',
        transition: {
            ease: 'easeInOut',
            duration: 0.2
        }
    }
};
const useSlotClasses = (ownerState)=>{
    const { prefix } = useNexUI();
    const modalRoot = `${prefix}-dialog`;
    const { classes, open, scroll, placement, maxWidth, fullScreen } = ownerState;
    const slots = {
        root: [
            'root',
            `placement-${placement}`,
            `scroll-${scroll}`,
            open && 'open',
            `max-width-${maxWidth}`,
            fullScreen && 'full-screen'
        ],
        backdrop: [
            'backdrop'
        ],
        panel: [
            'panel'
        ]
    };
    const composedClasses = composeClasses(slots, getUtilityClass(modalRoot), classes);
    return composedClasses;
};
const DialogRoot = ({ children })=>{
    const ownerState = useDialog();
    const { slotProps, hideBackdrop, open: _, ...remainingProps } = ownerState;
    const classes = useSlotClasses(ownerState);
    const styles = useStyles({
        ownerState,
        name: 'Dialog',
        recipe: dialogRecipe
    });
    const [Root, getRootProps] = useSlot({
        ownerState,
        elementType: ModalRoot,
        style: styles.root,
        externalForwardedProps: remainingProps,
        shouldForwardComponent: false,
        classNames: classes.root
    });
    const [DialogBackdrop, getDialogBackdropProps] = useSlot({
        ownerState,
        elementType: ModalBackdrop,
        style: styles.backdrop,
        externalSlotProps: slotProps?.backdrop,
        shouldForwardComponent: false,
        classNames: classes.backdrop
    });
    const [DialogPanel, getDialogPanelProps] = useSlot({
        ownerState,
        elementType: ModalPanel,
        style: styles.panel,
        externalSlotProps: slotProps?.panel,
        shouldForwardComponent: false,
        classNames: classes.panel,
        additionalProps: {
            as: m.div,
            variants: panelVariants
        }
    });
    return /*#__PURE__*/ jsxs(Root, {
        ...getRootProps(),
        children: [
            !hideBackdrop && /*#__PURE__*/ jsx(DialogBackdrop, {
                ...getDialogBackdropProps()
            }),
            /*#__PURE__*/ jsx(DialogPanel, {
                ...getDialogPanelProps(),
                children: children
            })
        ]
    });
};
DialogRoot.displayName = 'DialogRoot';

export { DialogRoot };