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

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useRef } from "react";
import { F as Fade } from "./fade.es-DSuuKNg3.js";
import { AccentBtn } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { H6, P } from "./fonts.es.js";
import { Div, Span } from "./html.es.js";
import { FadIcon } from "./icons.es.js";
const ToastWrapper = ({
  name = "ToastWrapper",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.toastWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const Toast = ({
  name = "Toast",
  open,
  setOpen,
  direction = "bottom",
  onRemove,
  tailwind,
  className,
  children,
  ...props
}) => {
  const [show, setShow] = useState(false);
  const context = useUI();
  const base = context?.theme?.toast({ open: show, direction });
  const computed = { ...base, ...props, tailwind, className };
  const ref = useRef(null);
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  return /* @__PURE__ */ jsx(Fade, { ref, show: open, timeout: 200, onEnter, onExit, onExited: onRemove, children: /* @__PURE__ */ jsx(Div, { ref, ...computed, children }) });
};
const ToastHeader = ({
  name = "ToastHeader",
  onRemove,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.toastHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    /* @__PURE__ */ jsx(Span, { display: "flex-start", space: "space-x-2", children }),
    /* @__PURE__ */ jsx(AccentBtn, { size: "xs", icon: "xmark", alt: "close", color: "text-gray-600 dark:text-gray-100", onClick: onRemove })
  ] });
};
const ToastIcon = ({
  name = "ToastIcon",
  icon = "question-circle",
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.toastIcon();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children: /* @__PURE__ */ jsx(FadIcon, { icon }) });
};
const ToastTitle = ({ name = "ToastTitle", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.toastTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(H6, { ...computed, children });
};
const ToastBody = ({ name = "ToastBody", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.toastBody();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const ToastText = ({ name = "ToastText", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.toastText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
export {
  Toast,
  ToastBody,
  ToastHeader,
  ToastIcon,
  ToastText,
  ToastTitle,
  ToastWrapper
};