@playbooks/ui/dist/slides.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 SlideWrapper = ({
  name = "SlideWrapper",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.slideWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsxs(html.Div, { ...computed, children: [
    children,
    /* @__PURE__ */ require$$0.jsx(SlideBackdrop, { open, onClose })
  ] });
};
const SlideBackdrop = ({
  name = "SlideBackdrop",
  open,
  onClose,
  tailwind,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.slideBackdrop({ open });
  const computed = { ...base, ...props, tailwind, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { onClick: onClose, ...computed });
};
const Slide = ({
  name = "Slide",
  open,
  placement = "left",
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const [show, setShow] = React.useState(false);
  const { theme } = html.useInterface();
  const base = theme.slide({ open: show, placement });
  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(SlideWrapper, { open: show, onClose, children: /* @__PURE__ */ require$$0.jsx(html.Div, { ref: nodeRef, ...computed, children }) }) }),
    ref == null ? void 0 : ref.current
  ) : null;
};
const SlideHeader = ({
  name = "SlideHeader",
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.slideHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsxs(html.Div, { ...computed, children: [
    children,
    /* @__PURE__ */ require$$0.jsx(html.AccentBtn, { alt: "close", size: "icon", icon: "xmark", color: "text-gray-500 dark:text-gray-200", onClick: onClose })
  ] });
};
const SlideTitle = ({ name = "SlideTitle", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.slideTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.H4, { ...computed, children });
};
const SlideBody = ({ name = "SlideBody", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.slideBody();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const SlideFooter = ({
  name = "SlideFooter",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.slideFooter();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
exports.Slide = Slide;
exports.SlideBackdrop = SlideBackdrop;
exports.SlideBody = SlideBody;
exports.SlideFooter = SlideFooter;
exports.SlideHeader = SlideHeader;
exports.SlideTitle = SlideTitle;
exports.SlideWrapper = SlideWrapper;