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

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { useUI } from "./context.es.js";
import { H5, Small, P } from "./fonts.es.js";
import { Div, Span } from "./html.es.js";
import { Oval } from "./spinners.es.js";
const ModalLoader = ({
  name = "ModalLoader",
  title = "Processing Order",
  message = "Give us a second...",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.modalLoader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children: /* @__PURE__ */ jsxs(Span, { children: [
    /* @__PURE__ */ jsx(Oval, { size: "w-14 h-14", className: "stroke-gray-600 dark:stroke-gray-300 mb-4" }),
    /* @__PURE__ */ jsxs(Div, { spacing: "space-y-1", className: "text-center", children: [
      title && /* @__PURE__ */ jsx(H5, { tailwind: { fontWeight: "font-bold" }, children: title }),
      message && /* @__PURE__ */ jsx(Small, { children: message }),
      children
    ] })
  ] }) });
};
const PageLoader = ({
  name = "PageLoader",
  title = "Hang Tight",
  message = "Loading dashboard...",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.pageLoader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children: /* @__PURE__ */ jsxs(Span, { display: "flex-start", space: "space-x-8", children: [
    /* @__PURE__ */ jsx(Oval, { size: "w-12 h-12", className: "stroke-gray-600 dark:stroke-gray-300" }),
    /* @__PURE__ */ jsxs(Div, { align: "text-left", children: [
      title && /* @__PURE__ */ jsx(H5, { tailwind: { fontWeight: "font-bold" }, children: title }),
      message && /* @__PURE__ */ jsx(P, { children: message }),
      children
    ] })
  ] }) });
};
const SectionLoader = ({
  name = "SectionLoader",
  title = "Loading",
  message = "Give us a second...",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionLoader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    /* @__PURE__ */ jsx(Oval, { size: "w-12 h-12", className: "stroke-gray-600 dark:stroke-gray-300" }),
    /* @__PURE__ */ jsxs(Div, { className: "text-left", children: [
      title && /* @__PURE__ */ jsx(H5, { tailwind: { fontWeight: "font-bold" }, children: title }),
      message && /* @__PURE__ */ jsx(Small, { children: message }),
      children
    ] })
  ] });
};
export {
  ModalLoader,
  PageLoader,
  SectionLoader
};