@playbooks/ui/dist/modals.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const React = require("react");
const html = require("./toast-context-kVz4KXNu.cjs");
const index = require("./index-2i4wB-Hv.cjs");
const ModalWrapper = ({
  name = "ModalWrapper",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsxs(html.Div, { ...computed, children: [
    children,
    /* @__PURE__ */ require$$0.jsx(ModalBackdrop, { open, onClose, tailwind: tailwind == null ? void 0 : tailwind.backdrop })
  ] });
};
const ModalBackdrop = ({
  name = "ModalBackdrop",
  open,
  onClose,
  tailwind,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalBackdrop({ open });
  const computed = { ...base, ...props, tailwind, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { onClick: onClose, ...computed });
};
const Modal = ({ name = "Modal", open, onClose, tailwind, className, children, ...props }) => {
  const [show, setShow] = React.useState(false);
  const { theme } = html.useInterface();
  const base = theme.modal({ open: show });
  const computed = { ...base, ...props, tailwind, className, name };
  const { ref, createPortal, toggleScroll } = html.useInterface();
  const nodeRef = React.useRef(null);
  React.useEffect(() => {
    toggleScroll(open);
  }, [open]);
  index.useKeyPress(onKeyDown, [open]);
  function onKeyDown(e) {
    if (!open) return;
    if (e.target.dataset.name === "FormInput") return;
    if (e.keyCode === 27 && typeof onClose === "function") onClose();
  }
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  return (ref == null ? void 0 : ref.current) ? createPortal(
    /* @__PURE__ */ require$$0.jsx(html.fadeExports.Fade, { ref: nodeRef, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ require$$0.jsx(ModalWrapper, { open: show, onClose, tailwind: tailwind == null ? void 0 : tailwind.wrapper, children: /* @__PURE__ */ require$$0.jsx(html.Div, { ref: nodeRef, ...computed, children }) }) }),
    ref == null ? void 0 : ref.current
  ) : null;
};
const ModalHeader = ({
  name = "ModalHeader",
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsxs(html.Div, { ...computed, children: [
    /* @__PURE__ */ require$$0.jsx(html.Span, { children }),
    onClose && /* @__PURE__ */ require$$0.jsx(html.AccentBtn, { alt: "close", size: "icon", icon: "xmark", fontSize: "text-xl", onClick: onClose })
  ] });
};
const ModalTitle = ({
  name = "ModalTitle",
  size = "h4",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Font, { size, ...computed, children });
};
const ModalSubtitle = ({
  name = "ModalSubtitle",
  size = "p",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Font, { size, ...computed, children });
};
const ModalBody = ({
  name = "ModalBody",
  size,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalBody({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const ModalFooter = ({
  name = "ModalFooter",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.modalFooter();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
exports.Modal = Modal;
exports.ModalBackdrop = ModalBackdrop;
exports.ModalBody = ModalBody;
exports.ModalFooter = ModalFooter;
exports.ModalHeader = ModalHeader;
exports.ModalSubtitle = ModalSubtitle;
exports.ModalTitle = ModalTitle;
exports.ModalWrapper = ModalWrapper;