@playbooks/ui/dist/slides.es.js

An interface library for Playbooks.

import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { F as Fade } from "./fade.es-DSuuKNg3.js";
import "./wrappers.es-CZI3goQs.js";
import { u as useKeyDown } from "./keyboard.es-jSLAvGP_.js";
import { AccentBtn } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { H4 } from "./fonts.es.js";
import { Div } from "./html.es.js";
const SlideWrapper = ({
  name = "SlideWrapper",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.slideWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    children,
    /* @__PURE__ */ jsx(SlideBackdrop, { open, onClose })
  ] });
};
const SlideBackdrop = ({
  name = "SlideBackdrop",
  open,
  onClose,
  tailwind,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.slideBackdrop({ open });
  const computed = { ...base, ...props, tailwind, name };
  return /* @__PURE__ */ jsx(Div, { onClick: onClose, ...computed });
};
const Slide = ({
  name = "Slide",
  open,
  placement = "left",
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const [show, setShow] = useState(false);
  const context = useUI();
  const base = context?.theme?.slide({ open: show, placement });
  const computed = { ...base, ...props, tailwind, className, name };
  const nodeRef = useRef(null);
  useEffect(() => {
    const el = document.querySelector("body");
    open ? el.classList?.add("overflow-hidden") : el.classList?.remove("overflow-hidden");
  }, [open]);
  useKeyDown(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);
  if (typeof window === "undefined") return null;
  return createPortal(
    /* @__PURE__ */ jsx(Fade, { ref: nodeRef, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ jsx(SlideWrapper, { open: show, onClose, children: /* @__PURE__ */ jsx(Div, { ref: nodeRef, ...computed, children }) }) }),
    document?.body
  );
};
const SlideHeader = ({
  name = "SlideHeader",
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.slideHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    children,
    /* @__PURE__ */ jsx(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 context = useUI();
  const base = context?.theme?.slideTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(H4, { ...computed, children });
};
const SlideBody = ({ name = "SlideBody", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.slideBody();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const SlideFooter = ({
  name = "SlideFooter",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.slideFooter();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Slide,
  SlideBackdrop,
  SlideBody,
  SlideFooter,
  SlideHeader,
  SlideTitle,
  SlideWrapper
};