@playbooks/ui/dist/menus.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 links = require("./links.cjs");
const Menu = ({ name = "Menu", open, onClose, tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.menu();
  const computed = { ...base, ...props, tailwind, className, name };
  const ref = React.useRef(null);
  index.useKeyPress(onKeyDown, [open]);
  index.useMouseUp(onMouseUp, [open]);
  function onKeyDown(e) {
    if (!open) return;
    if (e.target.dataset.name === "FormInput") return;
    if (e.keyCode === 27) onClose();
  }
  function onMouseUp(e) {
    var _a;
    if (!open) return;
    if ((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.contains(e.target)) return;
    onClose();
  }
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ref, ...computed, children });
};
const MenuWrapper = ({
  name = "MenuWrapper",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.menuWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsxs(html.Div, { ...computed, children: [
    children,
    /* @__PURE__ */ require$$0.jsx(MenuBackdrop, { open, onClose, tailwind: tailwind == null ? void 0 : tailwind.backdrop })
  ] });
};
const MenuBackdrop = ({
  name = "MenuBackdrop",
  open,
  onClose,
  tailwind,
  className,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.menuBackdrop({ open });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { onClick: onClose, ...computed });
};
const MenuMenu = ({
  name = "MenuMenu",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const [show, setShow] = React.useState(false);
  const { theme } = html.useInterface();
  const base = theme.menuMenu({ open: show });
  const computed = { ...base, ...props, tailwind, className, name };
  const ref = React.useRef(null);
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  return /* @__PURE__ */ require$$0.jsx(html.fadeExports.Fade, { ref, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ require$$0.jsx(MenuWrapper, { open: show, onClose, tailwind: tailwind == null ? void 0 : tailwind.wrapper, children: /* @__PURE__ */ require$$0.jsx(html.Div, { ref, "aria-orientation": "vertical", "aria-labelledby": "menu-button", tabIndex: -1, ...computed, children }) }) });
};
const MenuBlock = ({ name = "MenuBlock", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.menuBlock();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const MenuTitle = ({ name = "MenuTitle", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.menuTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.H6, { ...computed, children });
};
const MenuSubtitle = ({
  name = "MenuSubtitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.menuSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.P, { ...computed, children });
};
const MenuList = ({ name = "MenuList", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.menuList();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Ul, { ...computed, children });
};
const MenuItem = ({ name = "MenuItem", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.menuItem();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Li, { ...computed, children });
};
const MenuBtn = ({
  name = "MenuBtn",
  active,
  onClick,
  taskRunning,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.menuBtn();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ require$$0.jsx(html.AccentBtn, { active, taskRunning, onClick, ...computed });
};
const MenuLink = ({
  name = "MenuLink",
  href = "",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.menuLink();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ require$$0.jsx(links.AccentLink, { href, ...computed });
};
exports.Menu = Menu;
exports.MenuBackdrop = MenuBackdrop;
exports.MenuBlock = MenuBlock;
exports.MenuBtn = MenuBtn;
exports.MenuItem = MenuItem;
exports.MenuLink = MenuLink;
exports.MenuList = MenuList;
exports.MenuMenu = MenuMenu;
exports.MenuSubtitle = MenuSubtitle;
exports.MenuTitle = MenuTitle;
exports.MenuWrapper = MenuWrapper;