@nex-ui/react/dist/cjs/components/dialog/DialogRoot.cjs

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var DialogContext = require('./DialogContext.cjs');
var useSlotClasses = require('../utils/useSlotClasses.cjs');
var useStyles = require('../utils/useStyles.cjs');
var dialog = require('../../theme/recipes/dialog.cjs');
var useSlot = require('../utils/useSlot.cjs');
var ModalRoot = require('../modal/ModalRoot.cjs');
var ModalBackdrop = require('../modal/ModalBackdrop.cjs');

const slots = [
    'root',
    'backdrop'
];
const DialogRoot = ({ children })=>{
    const props = DialogContext.useDialog();
    const { slotProps, hideBackdrop, classNames, ...remainingProps } = props;
    const slotClasses = useSlotClasses.useSlotClasses({
        name: 'Dialog',
        slots,
        classNames
    });
    const styles = useStyles.useStyles({
        ownerState: props,
        name: 'Dialog',
        recipe: dialog.dialogRootRecipe
    });
    const [DialogRootRoot, getDialogRootRootProps] = useSlot.useSlot({
        elementType: ModalRoot.ModalRoot,
        style: styles.root,
        externalForwardedProps: remainingProps,
        shouldForwardComponent: false,
        classNames: slotClasses.root,
        dataAttrs: {
            hideBackdrop
        }
    });
    const [DialogBackdrop, getDialogBackdropProps] = useSlot.useSlot({
        elementType: ModalBackdrop.ModalBackdrop,
        style: styles.backdrop,
        externalSlotProps: slotProps?.backdrop,
        shouldForwardComponent: false,
        classNames: slotClasses.backdrop
    });
    return /*#__PURE__*/ jsxRuntime.jsxs(DialogRootRoot, {
        ...getDialogRootRootProps(),
        children: [
            !hideBackdrop && /*#__PURE__*/ jsxRuntime.jsx(DialogBackdrop, {
                ...getDialogBackdropProps()
            }),
            children
        ]
    });
};
DialogRoot.displayName = 'DialogRoot';

exports.DialogRoot = DialogRoot;