welcome-ui/dist/ECBEZ4YM-o09xUuV6.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { a as Be, c as Se, b as je, d as qe } from "./Z32PU2LQ-DMjfxuT9.js";
import { P as xe, b as Le, a as Ee } from "./JMU4N4M5-DnfyqGdJ.js";
import { b as Ve, c as ie, i as Z, aa as ye, u as X, k as ne, h as oe, f as ce, a as se, l as Me, m as re, Q as ve, a4 as j, T as Xe, q as Ae, A as _e, t as ue, o as ze, B as Ie, X as Ye, x as A, y as Ue } from "./U6HHPQDW-CzxyP5H7.js";
import { B as Ge, N as We, L as Je, A as Qe, O as Ze, g as Ke, C as et, a as tt } from "./floating-ui.dom.browser.min-Bza9K_UR.js";
import { useRef as q, useState as ae, useEffect as H, useContext as nt, createContext as ot, useCallback as Ce } from "react";
import { jsx as Q } from "react/jsx-runtime";
import { d as rt, m as ut, o as it, t as ct, c as Oe, a as J, u as He } from "./Q5W46E73-5xQblshY.js";
var _ = Ve(
  [Le],
  [xe]
);
_.useContext;
_.useScopedContext;
var le = _.useProviderContext, Dt = _.ContextProvider, st = _.ScopedContextProvider;
function te(t) {
  return [t.clientX, t.clientY];
}
function he(t, e) {
  const [n, o] = t;
  let r = !1;
  const c = e.length;
  for (let u = c, i = 0, a = u - 1; i < u; a = i++) {
    const [s, g] = e[i], [w, d] = e[a], [, S] = e[a === 0 ? u - 1 : a - 1] || [0, 0], m = (g - d) * (n - s) - (s - w) * (o - g);
    if (d < g) {
      if (o >= d && o < g) {
        if (m === 0) return !0;
        m > 0 && (o === d ? o > S && (r = !r) : r = !r);
      }
    } else if (g < d) {
      if (o > g && o <= d) {
        if (m === 0) return !0;
        m < 0 && (o === d ? o < S && (r = !r) : r = !r);
      }
    } else if (o === g && (n >= w && n <= s || n >= s && n <= w))
      return !0;
  }
  return r;
}
function at(t, e) {
  const { top: n, right: o, bottom: r, left: c } = e, [u, i] = t, a = u < c ? "left" : u > o ? "right" : null, s = i < n ? "top" : i > r ? "bottom" : null;
  return [a, s];
}
function pe(t, e) {
  const n = t.getBoundingClientRect(), { top: o, right: r, bottom: c, left: u } = n, [i, a] = at(e, n), s = [e];
  return i ? (a !== "top" && s.push([i === "left" ? u : r, o]), s.push([i === "left" ? r : u, o]), s.push([i === "left" ? r : u, c]), a !== "bottom" && s.push([i === "left" ? u : r, c])) : a === "top" ? (s.push([u, o]), s.push([u, c]), s.push([r, c]), s.push([r, o])) : (s.push([u, c]), s.push([u, o]), s.push([r, o]), s.push([r, c])), s;
}
var lt = "div";
function ge(t = 0, e = 0, n = 0, o = 0) {
  if (typeof DOMRect == "function")
    return new DOMRect(t, e, n, o);
  const r = {
    x: t,
    y: e,
    width: n,
    height: o,
    top: e,
    right: t + n,
    bottom: e + o,
    left: t
  };
  return { ...r, toJSON: () => r };
}
function ft(t) {
  if (!t) return ge();
  const { x: e, y: n, width: o, height: r } = t;
  return ge(e, n, o, r);
}
function dt(t, e) {
  return {
    contextElement: t || void 0,
    getBoundingClientRect: () => {
      const o = t, r = e == null ? void 0 : e(o);
      return r || !o ? ft(r) : o.getBoundingClientRect();
    }
  };
}
function mt(t) {
  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(t);
}
function Pe(t) {
  const e = window.devicePixelRatio || 1;
  return Math.round(t * e) / e;
}
function vt(t, e) {
  return Je(({ placement: n }) => {
    var o;
    const r = ((t == null ? void 0 : t.clientHeight) || 0) / 2, c = typeof e.gutter == "number" ? e.gutter + r : (o = e.gutter) != null ? o : r;
    return {
      crossAxis: !!n.split("-")[1] ? void 0 : e.shift,
      mainAxis: c,
      alignmentAxis: e.shift
    };
  });
}
function ht(t) {
  if (t.flip === !1) return;
  const e = typeof t.flip == "string" ? t.flip.split(" ") : void 0;
  return Z(
    !e || e.every(mt),
    process.env.NODE_ENV !== "production" && "`flip` expects a spaced-delimited list of placements"
  ), Qe({
    padding: t.overflowPadding,
    fallbackPlacements: e
  });
}
function pt(t) {
  if (!(!t.slide && !t.overlap))
    return Ze({
      mainAxis: t.slide,
      crossAxis: t.overlap,
      padding: t.overflowPadding,
      limiter: tt()
    });
}
function gt(t) {
  return et({
    padding: t.overflowPadding,
    apply({ elements: e, availableWidth: n, availableHeight: o, rects: r }) {
      const c = e.floating, u = Math.round(r.reference.width);
      n = Math.floor(n), o = Math.floor(o), c.style.setProperty(
        "--popover-anchor-width",
        `${u}px`
      ), c.style.setProperty(
        "--popover-available-width",
        `${n}px`
      ), c.style.setProperty(
        "--popover-available-height",
        `${o}px`
      ), t.sameWidth && (c.style.width = `${u}px`), t.fitViewport && (c.style.maxWidth = `${n}px`, c.style.maxHeight = `${o}px`);
    }
  });
}
function Pt(t, e) {
  if (t)
    return Ke({
      element: t,
      padding: e.arrowPadding
    });
}
var be = ie(
  function({
    store: e,
    modal: n = !1,
    portal: o = !!n,
    preserveTabOrder: r = !0,
    autoFocusOnShow: c = !0,
    wrapperProps: u,
    fixed: i = !1,
    flip: a = !0,
    shift: s = 0,
    slide: g = !0,
    overlap: w = !1,
    sameWidth: d = !1,
    fitViewport: S = !1,
    gutter: m,
    arrowPadding: f = 4,
    overflowPadding: P = 8,
    getAnchorRect: F,
    updatePosition: C,
    ...v
  }) {
    const T = Ee();
    e = e || T, Z(
      e,
      process.env.NODE_ENV !== "production" && "Popover must receive a `store` prop or be wrapped in a PopoverProvider component."
    );
    const b = e.useState("arrowElement"), x = e.useState("anchorElement"), K = e.useState("disclosureElement"), h = e.useState("popoverElement"), R = e.useState("contentElement"), z = e.useState("placement"), l = e.useState("mounted"), E = e.useState("rendered"), p = q(null), [y, O] = ae(!1), { portalRef: ee, domReady: $ } = ye(o, v.portalRef), D = X(F), N = X(C), L = !!C;
    ne(() => {
      if (!(h != null && h.isConnected)) return;
      h.style.setProperty(
        "--popover-overflow-padding",
        `${P}px`
      );
      const M = dt(x, D), V = async () => {
        if (!l) return;
        b || (p.current = p.current || document.createElement("div"));
        const k = b || p.current, De = [
          vt(k, { gutter: m, shift: s }),
          ht({ flip: a, overflowPadding: P }),
          pt({ slide: g, overlap: w, overflowPadding: P }),
          Pt(k, { arrowPadding: f }),
          gt({
            sameWidth: d,
            fitViewport: S,
            overflowPadding: P
          })
        ], B = await We(M, h, {
          placement: z,
          strategy: i ? "fixed" : "absolute",
          middleware: De
        });
        e == null || e.setState("currentPlacement", B.placement), O(!0);
        const Ne = Pe(B.x), ke = Pe(B.y);
        if (Object.assign(h.style, {
          top: "0",
          left: "0",
          transform: `translate3d(${Ne}px,${ke}px,0)`
        }), k && B.middlewareData.arrow) {
          const { x: Y, y: U } = B.middlewareData.arrow, fe = B.placement.split("-")[0], G = k.clientWidth / 2, W = k.clientHeight / 2, de = Y != null ? Y + G : -G, me = U != null ? U + W : -W;
          h.style.setProperty(
            "--popover-transform-origin",
            {
              top: `${de}px calc(100% + ${W}px)`,
              bottom: `${de}px ${-W}px`,
              left: `calc(100% + ${G}px) ${me}px`,
              right: `${-G}px ${me}px`
            }[fe]
          ), Object.assign(k.style, {
            left: Y != null ? `${Y}px` : "",
            top: U != null ? `${U}px` : "",
            [fe]: "100%"
          });
        }
      }, $e = Ge(M, h, async () => {
        L ? (await N({ updatePosition: V }), O(!0)) : await V();
      }, {
        // JSDOM doesn't support ResizeObserver
        elementResize: typeof ResizeObserver == "function"
      });
      return () => {
        O(!1), $e();
      };
    }, [
      e,
      E,
      h,
      b,
      x,
      h,
      z,
      l,
      $,
      i,
      a,
      s,
      g,
      w,
      d,
      S,
      m,
      f,
      P,
      D,
      L,
      N
    ]), ne(() => {
      if (!l || !$ || !(h != null && h.isConnected) || !(R != null && R.isConnected)) return;
      const M = () => {
        h.style.zIndex = getComputedStyle(R).zIndex;
      };
      M();
      let V = requestAnimationFrame(() => {
        V = requestAnimationFrame(M);
      });
      return () => cancelAnimationFrame(V);
    }, [l, $, h, R]);
    const I = i ? "fixed" : "absolute";
    return v = oe(
      v,
      (M) => /* @__PURE__ */ Q(
        "div",
        {
          ...u,
          style: {
            // https://floating-ui.com/docs/computeposition#initial-layout
            position: I,
            top: 0,
            left: 0,
            width: "max-content",
            ...u == null ? void 0 : u.style
          },
          ref: e == null ? void 0 : e.setPopoverElement,
          children: M
        }
      ),
      [e, I, u]
    ), v = oe(
      v,
      (M) => /* @__PURE__ */ Q(xe, { value: e, children: M }),
      [e]
    ), v = {
      // data-placing is not part of the public API. We're setting this here so
      // we can wait for the popover to be positioned before other components
      // move focus into it. For example, this attribute is observed by the
      // Combobox component with the autoSelect behavior.
      "data-placing": !y || void 0,
      ...v,
      style: {
        position: "relative",
        ...v.style
      }
    }, v = Be({
      store: e,
      modal: n,
      portal: o,
      preserveTabOrder: r,
      preserveTabOrderAnchor: K || x,
      autoFocusOnShow: y && c,
      ...v,
      portalRef: ee
    }), v;
  }
), Nt = Se(
  ce(function(e) {
    const n = be(e);
    return se(lt, n);
  }),
  Ee
), wt = "div";
function Re(t, e, n, o) {
  return ze(e) ? !0 : t ? !!(ue(e, t) || n && ue(n, t) || o != null && o.some((r) => Re(t, r, n))) : !1;
}
function St({
  store: t,
  ...e
}) {
  const [n, o] = ae(!1), r = t.useState("mounted");
  H(() => {
    r || o(!1);
  }, [r]);
  const c = e.onFocus, u = X((a) => {
    c == null || c(a), !a.defaultPrevented && o(!0);
  }), i = q(null);
  return H(() => rt(t, ["anchorElement"], (a) => {
    i.current = a.anchorElement;
  }), []), e = {
    autoFocusOnHide: n,
    finalFocus: i,
    ...e,
    onFocus: u
  }, e;
}
var we = ot(null), xt = ie(
  function({
    store: e,
    modal: n = !1,
    portal: o = !!n,
    hideOnEscape: r = !0,
    hideOnHoverOutside: c = !0,
    disablePointerEventsOnApproach: u = !!c,
    ...i
  }) {
    const a = le();
    e = e || a, Z(
      e,
      process.env.NODE_ENV !== "production" && "Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component."
    );
    const s = q(null), [g, w] = ae([]), d = q(0), S = q(null), { portalRef: m, domReady: f } = ye(o, i.portalRef), P = Me(), F = !!c, C = re(c), v = !!u, T = re(
      u
    ), b = e.useState("open"), x = e.useState("mounted");
    H(() => {
      if (!f || !x || !F && !v) return;
      const l = s.current;
      return l ? ve(
        j("mousemove", (p) => {
          if (!e || !P()) return;
          const { anchorElement: y, hideTimeout: O, timeout: ee } = e.getState(), $ = S.current, [D] = p.composedPath(), N = y;
          if (Re(D, l, N, g)) {
            S.current = D && N && ue(N, D) ? te(p) : null, window.clearTimeout(d.current), d.current = 0;
            return;
          }
          if (!d.current) {
            if ($) {
              const L = te(p), I = pe(l, $);
              if (he(L, I)) {
                if (S.current = L, !T(p)) return;
                p.preventDefault(), p.stopPropagation();
                return;
              }
            }
            C(p) && (d.current = window.setTimeout(() => {
              d.current = 0, e == null || e.hide();
            }, O ?? ee));
          }
        }, !0),
        () => clearTimeout(d.current)
      ) : void 0;
    }, [
      e,
      P,
      f,
      x,
      F,
      v,
      g,
      T,
      C
    ]), H(() => {
      if (!f || !x || !v) return;
      const l = (E) => {
        const p = s.current;
        if (!p) return;
        const y = S.current;
        if (!y) return;
        const O = pe(p, y);
        if (he(te(E), O)) {
          if (!T(E)) return;
          E.preventDefault(), E.stopPropagation();
        }
      };
      return ve(
        // Note: we may need to add pointer events here in the future.
        j("mouseenter", l, !0),
        j("mouseover", l, !0),
        j("mouseout", l, !0),
        j("mouseleave", l, !0)
      );
    }, [f, x, v, T]), H(() => {
      f && (b || e == null || e.setAutoFocusOnShow(!1));
    }, [e, f, b]);
    const K = Xe(b);
    H(() => {
      if (f)
        return () => {
          K.current || e == null || e.setAutoFocusOnShow(!1);
        };
    }, [e, f]);
    const h = nt(we);
    ne(() => {
      if (n || !o || !x || !f) return;
      const l = s.current;
      if (l)
        return h == null ? void 0 : h(l);
    }, [n, o, x, f]);
    const R = Ce(
      (l) => {
        w((p) => [...p, l]);
        const E = h == null ? void 0 : h(l);
        return () => {
          w(
            (p) => p.filter((y) => y !== l)
          ), E == null || E();
        };
      },
      [h]
    );
    i = oe(
      i,
      (l) => /* @__PURE__ */ Q(st, { value: e, children: /* @__PURE__ */ Q(we.Provider, { value: R, children: l }) }),
      [e, R]
    ), i = {
      ...i,
      ref: Ae(s, i.ref)
    }, i = St({ store: e, ...i });
    const z = e.useState(
      (l) => n || l.autoFocusOnShow
    );
    return i = be({
      store: e,
      modal: n,
      portal: o,
      autoFocusOnShow: z,
      ...i,
      portalRef: m,
      hideOnEscape(l) {
        return _e(r, l) ? !1 : (requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            e == null || e.hide();
          });
        }), !0);
      }
    }), i;
  }
), kt = Se(
  ce(function(e) {
    const n = xt(e);
    return se(wt, n);
  }),
  le
), Et = "a", yt = ie(
  function({ store: e, showOnHover: n = !0, ...o }) {
    const r = le();
    e = e || r, Z(
      e,
      process.env.NODE_ENV !== "production" && "HovercardAnchor must receive a `store` prop or be wrapped in a HovercardProvider component."
    );
    const c = Ie(o), u = q(0);
    H(() => () => window.clearTimeout(u.current), []), H(() => j("mouseleave", (f) => {
      if (!e) return;
      const { anchorElement: P } = e.getState();
      P && f.target === P && (window.clearTimeout(u.current), u.current = 0);
    }, !0), [e]);
    const i = o.onMouseMove, a = re(n), s = Me(), g = X((m) => {
      if (i == null || i(m), c || !e || m.defaultPrevented || u.current || !s() || !a(m)) return;
      const f = m.currentTarget;
      e.setAnchorElement(f), e.setDisclosureElement(f);
      const { showTimeout: P, timeout: F } = e.getState(), C = () => {
        u.current = 0, s() && (e == null || e.setAnchorElement(f), e == null || e.show(), queueMicrotask(() => {
          e == null || e.setDisclosureElement(f);
        }));
      }, v = P ?? F;
      v === 0 ? C() : u.current = window.setTimeout(C, v);
    }), w = o.onClick, d = X((m) => {
      w == null || w(m), e && (window.clearTimeout(u.current), u.current = 0);
    }), S = Ce(
      (m) => {
        if (!e) return;
        const { anchorElement: f } = e.getState();
        f != null && f.isConnected || e.setAnchorElement(m);
      },
      [e]
    );
    return o = {
      ...o,
      ref: Ae(S, o.ref),
      onMouseMove: g,
      onClick: d
    }, o = Ye(o), o;
  }
), Bt = ce(function(e) {
  const n = yt(e);
  return se(Et, n);
});
function Fe({
  popover: t,
  ...e
} = {}) {
  const n = ut(
    e.store,
    it(t, [
      "arrowElement",
      "anchorElement",
      "contentElement",
      "popoverElement",
      "disclosureElement"
    ])
  );
  ct(e, n);
  const o = n == null ? void 0 : n.getState(), r = je({ ...e, store: n }), c = A(
    e.placement,
    o == null ? void 0 : o.placement,
    "bottom"
  ), u = {
    ...r.getState(),
    placement: c,
    currentPlacement: c,
    anchorElement: A(o == null ? void 0 : o.anchorElement, null),
    popoverElement: A(o == null ? void 0 : o.popoverElement, null),
    arrowElement: A(o == null ? void 0 : o.arrowElement, null),
    rendered: Symbol("rendered")
  }, i = Oe(u, r, n);
  return {
    ...r,
    ...i,
    setAnchorElement: (a) => i.setState("anchorElement", a),
    setPopoverElement: (a) => i.setState("popoverElement", a),
    setArrowElement: (a) => i.setState("arrowElement", a),
    render: () => i.setState("rendered", Symbol("rendered"))
  };
}
function Te(t, e, n) {
  return Ue(e, [n.popover]), J(t, n, "placement"), qe(t, e, n);
}
function jt(t = {}) {
  const [e, n] = He(Fe, t);
  return Te(e, n, t);
}
function Mt(t = {}) {
  var e;
  const n = (e = t.store) == null ? void 0 : e.getState(), o = Fe({
    ...t,
    placement: A(
      t.placement,
      n == null ? void 0 : n.placement,
      "bottom"
    )
  }), r = A(t.timeout, n == null ? void 0 : n.timeout, 500), c = {
    ...o.getState(),
    timeout: r,
    showTimeout: A(t.showTimeout, n == null ? void 0 : n.showTimeout),
    hideTimeout: A(t.hideTimeout, n == null ? void 0 : n.hideTimeout),
    autoFocusOnShow: A(n == null ? void 0 : n.autoFocusOnShow, !1)
  }, u = Oe(c, o, t.store);
  return {
    ...o,
    ...u,
    setAutoFocusOnShow: (i) => u.setState("autoFocusOnShow", i)
  };
}
function At(t, e, n) {
  return J(t, n, "timeout"), J(t, n, "showTimeout"), J(t, n, "hideTimeout"), Te(t, e, n);
}
function qt(t = {}) {
  const [e, n] = He(Mt, t);
  return At(e, n, t);
}
export {
  st as H,
  Nt as P,
  Dt as a,
  yt as b,
  Mt as c,
  At as d,
  Bt as e,
  kt as f,
  jt as g,
  qt as h,
  xt as u
};