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

Shared ClubMed React UI components

import { jsx as r, jsxs as u } from "react/jsx-runtime";
import { useRef as x } from "react";
import { twMerge as l } from "./helpers/twMerge.js";
import { Backdrop as v } from "./Backdrop.js";
import { Button as g } from "./buttons/Button.js";
import { c as w } from "../chunks/clsx.js";
import { useSlots as N } from "./hooks/useSlots.js";
const y = ({ closeLabel: t, onClose: e }) => /* @__PURE__ */ r(
  g,
  {
    color: "black",
    variant: "circle",
    icon: "CrossDefault",
    className: "mx-auto",
    "aria-label": t,
    onClick: e
  }
), R = ({
  title: t,
  children: e,
  closeLabel: s,
  onClose: n,
  isVisible: o,
  className: p = "sm:w-360",
  bodyClassName: d,
  Footer: a = y
}) => {
  const { children: f, popinFooter: c } = N(e, ["popinFooter"]), m = x(o), h = m.current, i = !o && h;
  return m.current = o, /* @__PURE__ */ r(v, { isVisible: o, onClose: n, children: /* @__PURE__ */ r(
    "div",
    {
      className: l(
        w(
          "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]",
          {
            "animate-zoomIn": o,
            "animate-zoomOut": !o && i,
            "opacity-0 scale-90": !o && !i
          }
        ),
        p
      ),
      children: /* @__PURE__ */ u(
        "div",
        {
          className: l("text-center max-h-[90vh] flex flex-col p-40 gap-40", d),
          children: [
            t && /* @__PURE__ */ r("div", { className: "text-h5 mt-0 -mb-20 text-start font-serif", children: t }),
            /* @__PURE__ */ r("div", { className: "text-start overflow-auto", children: f }),
            !c?.length && a && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(a, { closeLabel: s, onClose: n }) }),
            c
          ]
        }
      )
    }
  ) });
};
export {
  R as Popin
};
//# sourceMappingURL=Popin.js.map