@clubmed/trident-ui/molecules/Popin.js

Shared ClubMed React UI components

import { jsx as t, jsxs as d } from "react/jsx-runtime";
import { useTransition as f, config as p, animated as x } from "@react-spring/web";
import { Backdrop as h } from "./Backdrop.js";
import { Button as u } from "./Buttons/Button.js";
import { c as v } from "../chunks/index.js";
const b = ({ closeLabel: e, onClose: o }) => /* @__PURE__ */ t(
  u,
  {
    theme: "black",
    variant: "icon",
    icon: "CrossDefault",
    className: "mx-auto",
    label: e,
    onClick: o
  }
), j = ({
  title: e,
  children: o,
  closeLabel: c,
  onClose: a,
  isVisible: r,
  className: i = "sm:w-360",
  Footer: n = b
}) => {
  const s = f(r, {
    from: { scale: 0.3, opacity: 0.3 },
    enter: { scale: 1, opacity: 1 },
    leave: { scale: 0, opacity: 0 },
    config: r ? { tension: 120, friction: 20 } : p.gentle
  });
  return /* @__PURE__ */ t(h, { isVisible: r, onClose: a, children: s(
    (m, l) => l && /* @__PURE__ */ t(
      x.div,
      {
        className: v(
          "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white",
          i
        ),
        style: m,
        children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
          e && /* @__PURE__ */ t("div", { className: "mt-12 text-h5 text-start font-serif", children: e }),
          /* @__PURE__ */ t("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: o }),
          n && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { closeLabel: c, onClose: a }) })
        ] })
      }
    )
  ) });
};
export {
  j as Popin
};
//# sourceMappingURL=Popin.js.map