@teamsparta/stack-custom-modal/dist/chunk-SUQAZHFG.mjs

stack custom modal

"use client";

import {
  CustomModalOverlay
} from "./chunk-4V4O6MUU.mjs";
import {
  useCustomModal
} from "./chunk-VHPHVMAP.mjs";
import {
  contentCss,
  contentVariants,
  contentWrapperCss,
  modalSizeVariants
} from "./chunk-IEPAP3BO.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/compounds/CustomModalContent.tsx
import * as Dialog from "@radix-ui/react-dialog";
import { StackThemeProvider } from "@teamsparta/stack-core";
import { AnimatePresence, motion } from "motion/react";
import { forwardRef } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var CustomModalContent = forwardRef(
  (_a, ref) => {
    var _b = _a, {
      children,
      onInteractOutside,
      style: styleFromProps,
      asChild = true,
      overlay = /* @__PURE__ */ jsx(CustomModalOverlay, { forceMount: true })
    } = _b, restProps = __objRest(_b, [
      "children",
      "onInteractOutside",
      "style",
      "asChild",
      "overlay"
    ]);
    const {
      open,
      closeOnInteractOutside: closeOnInteractOutsideFromContext,
      size,
      theme
    } = useCustomModal("CustomModalContent");
    const style = __spreadValues(__spreadValues({}, modalSizeVariants[size]), styleFromProps);
    const hasOverlay = overlay !== null;
    const closeOnInteractOutside = hasOverlay ? closeOnInteractOutsideFromContext : false;
    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsxs(StackThemeProvider, { theme, children: [
      overlay,
      /* @__PURE__ */ jsx(
        Dialog.Content,
        __spreadProps(__spreadValues({
          ref,
          asChild,
          style,
          onInteractOutside: closeOnInteractOutside ? onInteractOutside : (e) => {
            e.preventDefault();
            onInteractOutside == null ? void 0 : onInteractOutside(e);
          }
        }, restProps), {
          children: /* @__PURE__ */ jsx("div", { css: contentWrapperCss, children: /* @__PURE__ */ jsx(
            motion.div,
            {
              css: contentCss,
              variants: contentVariants,
              initial: "initial",
              animate: "animate",
              exit: "exit",
              children
            }
          ) })
        })
      )
    ] }) }) });
  }
);
CustomModalContent.displayName = "CustomModalContent";

export {
  CustomModalContent
};