@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
58 lines (55 loc) • 1.79 kB
JavaScript
"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useDialog } from './DialogContext.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { dialogRootRecipe } from '../../theme/recipes/dialog.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { ModalRoot } from '../modal/ModalRoot.mjs';
import { ModalBackdrop } from '../modal/ModalBackdrop.mjs';
const slots = [
'root',
'backdrop'
];
const DialogRoot = ({ children })=>{
const props = useDialog();
const { slotProps, hideBackdrop, classNames, ...remainingProps } = props;
const slotClasses = useSlotClasses({
name: 'Dialog',
slots,
classNames
});
const styles = useStyles({
ownerState: props,
name: 'Dialog',
recipe: dialogRootRecipe
});
const [DialogRootRoot, getDialogRootRootProps] = useSlot({
elementType: ModalRoot,
style: styles.root,
externalForwardedProps: remainingProps,
shouldForwardComponent: false,
classNames: slotClasses.root,
dataAttrs: {
hideBackdrop
}
});
const [DialogBackdrop, getDialogBackdropProps] = useSlot({
elementType: ModalBackdrop,
style: styles.backdrop,
externalSlotProps: slotProps?.backdrop,
shouldForwardComponent: false,
classNames: slotClasses.backdrop
});
return /*#__PURE__*/ jsxs(DialogRootRoot, {
...getDialogRootRootProps(),
children: [
!hideBackdrop && /*#__PURE__*/ jsx(DialogBackdrop, {
...getDialogBackdropProps()
}),
children
]
});
};
DialogRoot.displayName = 'DialogRoot';
export { DialogRoot };