@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 m = require('motion/react-m');
var DialogContext = require('./DialogContext.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');
var ModalPanel = require('../modal/ModalPanel.cjs');
var Context = require('../provider/Context.cjs');
var composeClasses = require('../utils/composeClasses.cjs');
var getUtilityClass = require('../utils/getUtilityClass.cjs');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespace(m);

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 } = Context.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.composeClasses(slots, getUtilityClass.getUtilityClass(modalRoot), classes);
    return composedClasses;
};
const DialogRoot = ({ children })=>{
    const ownerState = DialogContext.useDialog();
    const { slotProps, hideBackdrop, open: _, ...remainingProps } = ownerState;
    const classes = useSlotClasses(ownerState);
    const styles = useStyles.useStyles({
        ownerState,
        name: 'Dialog',
        recipe: dialog.dialogRecipe
    });
    const [Root, getRootProps] = useSlot.useSlot({
        ownerState,
        elementType: ModalRoot.ModalRoot,
        style: styles.root,
        externalForwardedProps: remainingProps,
        shouldForwardComponent: false,
        classNames: classes.root
    });
    const [DialogBackdrop, getDialogBackdropProps] = useSlot.useSlot({
        ownerState,
        elementType: ModalBackdrop.ModalBackdrop,
        style: styles.backdrop,
        externalSlotProps: slotProps?.backdrop,
        shouldForwardComponent: false,
        classNames: classes.backdrop
    });
    const [DialogPanel, getDialogPanelProps] = useSlot.useSlot({
        ownerState,
        elementType: ModalPanel.ModalPanel,
        style: styles.panel,
        externalSlotProps: slotProps?.panel,
        shouldForwardComponent: false,
        classNames: classes.panel,
        additionalProps: {
            as: m__namespace.div,
            variants: panelVariants
        }
    });
    return /*#__PURE__*/ jsxRuntime.jsxs(Root, {
        ...getRootProps(),
        children: [
            !hideBackdrop && /*#__PURE__*/ jsxRuntime.jsx(DialogBackdrop, {
                ...getDialogBackdropProps()
            }),
            /*#__PURE__*/ jsxRuntime.jsx(DialogPanel, {
                ...getDialogPanelProps(),
                children: children
            })
        ]
    });
};
DialogRoot.displayName = 'DialogRoot';

exports.DialogRoot = DialogRoot;