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

Shared ClubMed React UI components

import { jsx as h, jsxs as X } from "react/jsx-runtime";
import { useState as v, useRef as j, useCallback as w, useEffect as G } from "react";
import { c as D } from "../chunks/clsx.js";
import { Portal as z } from "./Portal.js";
const R = 0, I = 1, T = 2, m = 3, p = 4, A = 5, P = 6, B = [
  "preEnter",
  "entering",
  "entered",
  "preExit",
  "exiting",
  "exited",
  "unmounted"
], U = (t) => ({
  _s: t,
  status: B[t],
  isEnter: t < m,
  isMounted: t !== P,
  isResolved: t === T || t > p
}), y = (t) => t ? P : A, O = (t, e) => {
  switch (t) {
    case I:
    case R:
      return T;
    case p:
    case m:
      return y(e);
  }
}, q = (t) => typeof t == "object" ? [t.enter, t.exit] : [t, t], _ = (...t) => setTimeout(...t), F = (t, e) => _(() => {
  isNaN(document.body.offsetTop) || t(e + 1);
}, 0), M = (t, e, a, s, i) => {
  clearTimeout(s.current);
  const n = U(t);
  e(n), a.current = n, i && i({ current: n });
}, H = ({ enter: t = !0, exit: e = !0, preEnter: a, preExit: s, timeout: i, initialEntered: n, mountOnEnter: b, unmountOnExit: u, onStateChange: o } = {}) => {
  const [r, f] = v(() => U(n ? T : y(b))), c = j(r), d = j(0), [x, S] = q(i), E = w(() => {
    const l = O(c.current._s, u);
    l && M(l, f, c, d, o);
  }, [o, u]);
  return [
    r,
    w((l) => {
      const N = (k) => {
        switch (M(k, f, c, d, o), k) {
          case I:
            x >= 0 && (d.current = _(E, x));
            break;
          case p:
            S >= 0 && (d.current = _(E, S));
            break;
          case R:
          case m:
            d.current = F(N, k);
            break;
        }
      }, g = c.current.isEnter;
      typeof l != "boolean" && (l = !g), l ? !g && N(t ? a ? R : I : T) : g && N(e ? s ? m : p : y(u));
    }, [
      E,
      o,
      t,
      e,
      a,
      s,
      x,
      S,
      u
    ]),
    E
  ];
}, W = ({
  children: t,
  className: e = "flex justify-center",
  onClose: a,
  isVisible: s,
  target: i = "backdrop",
  sweep: n = !1,
  ...b
}) => {
  const [u, o] = H({
    timeout: { enter: 0, exit: 500 },
    mountOnEnter: !0,
    unmountOnExit: !0,
    preEnter: !0
  }), { status: r, isMounted: f } = u;
  G(() => {
    o(s);
  }, [s, o]);
  const c = r === "preEnter" || r === "exiting";
  return /* @__PURE__ */ h(z, { target: i, children: f && /* @__PURE__ */ X(
    "div",
    {
      ...b,
      role: "presentation",
      className: D(e, "fixed inset-0 isolate items-center"),
      children: [
        /* @__PURE__ */ h(
          "button",
          {
            "aria-hidden": "true",
            className: D("absolute inset-0 -z-1 transition-all duration-500", {
              "bg-white/80 backdrop-blur": !c,
              "bg-white/0 backdrop-blur-none": c,
              "-translate-x-full": n && (r === "preEnter" || r === "entering"),
              "translate-x-full": n && r === "exiting"
            }),
            onClick: a,
            type: "button"
          }
        ),
        t
      ]
    }
  ) });
};
export {
  W as Backdrop
};
//# sourceMappingURL=Backdrop.js.map