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

Shared ClubMed React UI components

import { jsxs as a, jsx as s } from "react/jsx-runtime";
import { useTransition as c, config as p, animated as l } from "@react-spring/web";
import { c as b } from "../chunks/index.js";
const k = ({
  children: r,
  onClose: o,
  isVisible: e,
  sweep: t
}) => c(e, {
  from: {
    WebkitBackdropFilter: "blur(0px)",
    backdropFilter: "blur(0px)",
    "--tw-bg-opacity": 0,
    x: t ? "-100%" : "0%"
  },
  enter: {
    WebkitBackdropFilter: "blur(10px)",
    backdropFilter: "blur(10px)",
    "--tw-bg-opacity": 0.8,
    x: "0%"
  },
  leave: {
    WebkitBackdropFilter: "blur(0px)",
    backdropFilter: "blur(0px)",
    "--tw-bg-opacity": 0,
    x: t ? "100%" : "0%"
  },
  config: t ? { tension: 200, friction: 40 } : p.gentle
})(
  (i, n) => n && /* @__PURE__ */ a(
    "div",
    {
      role: "presentation",
      className: "z-1 pointer-events-none fixed inset-0 flex items-center justify-center",
      children: [
        /* @__PURE__ */ s(
          l.button,
          {
            type: "button",
            className: b("-z-1 absolute inset-0 bg-white", {
              "pointer-events-auto": e
            }),
            style: i,
            onClick: o
          }
        ),
        r
      ]
    }
  )
);
export {
  k as Backdrop
};
//# sourceMappingURL=Backdrop.js.map