@dimasbaguspm/versaur 0.0.60 → 0.0.62

package/dist/js/tooltip-BGJUYNL0.js

@@ -0,0 +1,625 @@
+import { j as r } from "./jsx-runtime-C5mzlN2N.js";
+import T, { useState as k, useEffect as v, createContext as V, useContext as I, forwardRef as w, useRef as B, useMemo as E, useId as S, cloneElement as X } from "react";
+import { c as b, a as g } from "./index-BDtz_hQY.js";
+import { XIcon as R } from "lucide-react";
+import { H, l as P, v as Z, p as q } from "./image-rectangle-BwT5taeR.js";
+import "./snackbar-CTq4MLir.js";
+import J from "react-dom";
+function Q() {
+  if (typeof window > "u") return !1;
+  const t = window.navigator.userAgent, e = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    t
+  ), o = /iPad|Android(?=.*Mobile)|Tablet/i.test(t), n = "ontouchstart" in window || navigator.maxTouchPoints > 0, a = window.innerWidth <= 1024;
+  return e || o || n && a;
+}
+function C() {
+  return typeof window < "u" && "navigator" in window && "virtualKeyboard" in navigator;
+}
+function Y() {
+  const [t, e] = k(!1), [o, n] = k(0), [a, s] = k(0), [l, c] = k(!1), [m, f] = k(!1);
+  return v(() => {
+    if (!Q()) {
+      c(!1);
+      return;
+    }
+    c(!0), f(C());
+  }, []), v(() => {
+    if (!l || !C())
+      return;
+    const d = navigator.virtualKeyboard, i = () => {
+      const { boundingRect: u } = d, p = u?.height || 0, h = u?.width || 0;
+      e(p > 0), n(p), s(h);
+    };
+    return i(), d.addEventListener("geometrychange", i), () => {
+      d.removeEventListener(
+        "geometrychange",
+        i
+      );
+    };
+  }, [l]), v(() => {
+    if (!l || C())
+      return;
+    const d = window.innerHeight;
+    let i;
+    const u = () => {
+      clearTimeout(i), i = setTimeout(() => {
+        const p = window.visualViewport?.height ?? window.innerHeight, h = d - p, j = h > 150;
+        e(j), n(j ? h : 0), s(j ? window.innerWidth : 0);
+      }, 100);
+    };
+    return "visualViewport" in window && window.visualViewport ? (window.visualViewport.addEventListener("resize", u), () => {
+      clearTimeout(i), window.visualViewport?.removeEventListener(
+        "resize",
+        u
+      );
+    }) : (window.addEventListener("resize", u), () => {
+      clearTimeout(i), window.removeEventListener("resize", u);
+    });
+  }, [l]), v(() => {
+    l || (e(!1), n(0), s(0));
+  }, [l]), {
+    isOpen: t,
+    height: o,
+    width: a,
+    isSupported: l,
+    usingNativeAPI: m
+  };
+}
+const M = V(null);
+function N() {
+  const t = I(M);
+  if (!t)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return t;
+}
+const O = b(
+  "fixed z-50 inset-y-0 m-0 border-0 p-0 bg-white shadow-xl flex flex-col max-w-full h-full max-h-screen outline-none overflow-hidden transition-[transform,opacity] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[transform,opacity] [transform:translateZ(0)] data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none data-[state=closed]:select-none [&::backdrop]:bg-foreground/30 [&::backdrop]:backdrop-blur-md [&::backdrop]:transition-opacity [&::backdrop]:duration-250 [&::backdrop]:ease-[cubic-bezier(0.22,1,0.36,1)]",
+  {
+    variants: {
+      position: {
+        left: "left-0 right-auto top-0 bottom-0 border-r border-border data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full",
+        right: "right-0 left-auto top-0 bottom-0 border-l border-border data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full"
+      },
+      size: {
+        sm: "w-80",
+        md: "w-96",
+        lg: "w-[28rem]",
+        xl: "w-[32rem]",
+        "3/4": "w-[75vw]",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      position: "right",
+      size: "md"
+    }
+  }
+), tt = b(
+  "flex justify-between items-center px-6 bg-white",
+  {
+    variants: {
+      tab: {
+        true: "pt-4 pb-2",
+        false: "border-b border-border py-4"
+      }
+    },
+    defaultVariants: {
+      tab: !1
+    }
+  }
+), et = b(
+  "flex-1 overflow-y-auto px-6 py-4 bg-white"
+), ot = b(
+  "px-6 py-4 border-t border-border bg-white"
+), z = T.forwardRef(
+  ({ children: t, className: e, hasTab: o, ...n }, a) => /* @__PURE__ */ r.jsx(
+    "header",
+    {
+      ref: a,
+      className: g(
+        tt({ tab: !!o }),
+        e
+      ),
+      ...n,
+      children: t
+    }
+  )
+);
+z.displayName = "DrawerHeader";
+const F = w(
+  (t, e) => {
+    const { titleId: o } = N();
+    return /* @__PURE__ */ r.jsx(H, { ...t, ref: e, as: "h5", id: o });
+  }
+);
+F.displayName = "DrawerTitle";
+const L = w(({ onClick: t, ...e }, o) => {
+  const { onClose: n } = N(), a = (s) => {
+    n(), t?.(s);
+  };
+  return /* @__PURE__ */ r.jsx(
+    P,
+    {
+      "aria-label": "Close drawer",
+      ...e,
+      onClick: a,
+      variant: "ghost",
+      size: "sm",
+      as: R,
+      ref: o
+    }
+  );
+});
+L.displayName = "DrawerCloseButton";
+const A = w(
+  ({ children: t, className: e, ...o }, n) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: n,
+      className: g("[&>nav>div>ul]:px-6", e),
+      ...o,
+      children: t
+    }
+  )
+);
+A.displayName = "DrawerTab";
+const W = T.forwardRef(
+  ({ children: t, className: e, ...o }, n) => {
+    const { descriptionId: a } = N();
+    return /* @__PURE__ */ r.jsx(
+      "main",
+      {
+        ref: n,
+        id: a,
+        className: g(et(), e),
+        ...o,
+        children: t
+      }
+    );
+  }
+);
+W.displayName = "DrawerBody";
+const K = T.forwardRef(
+  ({ children: t, className: e, ...o }, n) => /* @__PURE__ */ r.jsx(
+    "footer",
+    {
+      ref: n,
+      className: g(ot(), e),
+      ...o,
+      children: t
+    }
+  )
+);
+K.displayName = "DrawerFooter";
+const D = ({
+  container: t,
+  children: e
+}) => {
+  if (typeof window > "u" || typeof document > "u")
+    return /* @__PURE__ */ r.jsx(r.Fragment, { children: e });
+  const o = t ?? document.body;
+  return o ? J.createPortal(e, o) : /* @__PURE__ */ r.jsx(r.Fragment, { children: e });
+}, _ = (t) => {
+  v(() => {
+    if (!t) return;
+    const e = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = e;
+    };
+  }, [t]);
+}, $ = ({ isOpen: t }) => {
+  const e = B(null), o = E(() => t ? "open" : "closed", [t]);
+  return v(() => {
+    const n = e.current;
+    n && (t && !n.open ? n.showModal() : !t && n.open && n.close());
+  }, [t]), {
+    dialogRef: e,
+    dataState: o
+  };
+}, nt = ({
+  container: t,
+  children: e,
+  isOpen: o,
+  onClose: n,
+  position: a = "right",
+  size: s = "md",
+  disableOverlayClickToClose: l = !1,
+  disableEscapeKeyDown: c = !1,
+  className: m,
+  ...f
+}) => {
+  const d = S(), i = S(), { dialogRef: u, dataState: p } = $({ isOpen: o });
+  _(o);
+  const h = () => {
+    const y = u.current;
+    y?.open && y.close(), n();
+  }, x = (y) => {
+    y.preventDefault(), !c && h();
+  }, j = (y) => {
+    y.target === y.currentTarget && (l || h());
+  }, U = {
+    isOpen: o,
+    onClose: h,
+    position: a,
+    size: s,
+    disableOverlayClickToClose: l,
+    disableEscapeKeyDown: c,
+    titleId: d,
+    descriptionId: i
+  };
+  return /* @__PURE__ */ r.jsx(D, { container: t, children: /* @__PURE__ */ r.jsx(M.Provider, { value: U, children: /* @__PURE__ */ r.jsx(
+    "dialog",
+    {
+      ref: u,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": d,
+      "aria-describedby": i,
+      "aria-hidden": !o,
+      "data-state": p,
+      onCancel: x,
+      onClick: j,
+      className: g(
+        O({
+          position: a,
+          size: s
+        }),
+        m
+      ),
+      ...f,
+      children: o && e
+    }
+  ) }) });
+}, Rt = Object.assign(nt, {
+  Header: z,
+  Title: F,
+  CloseButton: L,
+  Tab: A,
+  Body: W,
+  Footer: K
+}), rt = V(null), at = w(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: o,
+      className: g("px-6 pt-6 pb-2 text-lg font-semibold", t),
+      ...e
+    }
+  )
+), st = w(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: o,
+      className: g("px-6 py-4  flex justify-end gap-2", t),
+      ...e
+    }
+  )
+), it = w(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ r.jsx("div", { ref: o, className: g("px-6 py-2", t), ...e })
+), lt = b(
+  [
+    "fixed z-61 bg-white rounded-lg shadow-xl",
+    "flex flex-col",
+    "outline-none",
+    "transition-all duration-200 ease-in-out",
+    "data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none data-[state=closed]:select-none",
+    "[&::backdrop]:bg-foreground/30 [&::backdrop]:backdrop-blur-md [&::backdrop]:transition-opacity [&::backdrop]:duration-250 [&::backdrop]:ease-[cubic-bezier(0.22,1,0.36,1)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[20rem] max-w-[90%]",
+        // 20rem, 320px
+        md: "w-[28rem] max-w-[90%]",
+        // 28rem, 448px
+        lg: "w-[36rem] max-w-[90%]",
+        // 36rem, 576px
+        "fit-content": "w-fit max-w-[90%]"
+        // Fit content, no max width
+      },
+      placement: {
+        top: "top-8 left-1/2 -translate-x-1/2",
+        center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+      },
+      isOpen: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-95 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      placement: "center",
+      isOpen: !1
+    }
+  }
+), dt = ({
+  isOpen: t,
+  onClose: e,
+  size: o = "md",
+  placement: n = "center",
+  disableOverlayClickToClose: a = !1,
+  disableEscapeKeyDown: s = !1,
+  children: l,
+  container: c,
+  ...m
+}) => {
+  const { dialogRef: f, dataState: d } = $({ isOpen: t });
+  _(t);
+  const i = () => {
+    const x = f.current;
+    x?.open && x.close(), e();
+  }, u = (x) => {
+    x.preventDefault(), !s && i();
+  }, p = (x) => {
+    x.target === x.currentTarget && (a || i());
+  }, h = {
+    isOpen: t,
+    onClose: i,
+    size: o,
+    placement: n,
+    disableOverlayClickToClose: a,
+    disableEscapeKeyDown: s
+  };
+  return /* @__PURE__ */ r.jsx(D, { container: c, children: /* @__PURE__ */ r.jsx(rt.Provider, { value: h, children: /* @__PURE__ */ r.jsx(
+    "dialog",
+    {
+      ref: f,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-hidden": !t,
+      "data-state": d,
+      onCancel: u,
+      onClick: p,
+      className: g(
+        lt({ size: o, placement: n, isOpen: t }),
+        m.className
+      ),
+      ...m,
+      children: t && l
+    }
+  ) }) });
+}, Ht = Object.assign(dt, {
+  Header: at,
+  Body: it,
+  Footer: st
+}), ct = b(
+  [
+    "fixed left-0 bottom-0 z-40 w-full max-h-[90dvh] bg-background rounded-t-xl shadow-lg border-t border-border rounded-lg",
+    "transition-transform duration-300 ease-in-out will-change-transform",
+    "overflow-hidden"
+    // Ensure content doesn't overflow when keyboard adjusts height
+  ],
+  {
+    variants: {
+      open: {
+        true: "translate-y-0",
+        false: "translate-y-full"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), ut = b(
+  ["fixed inset-0 z-40 duration-300"],
+  {
+    variants: {
+      open: {
+        true: "backdrop-blur-md bg-foreground/30",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), ft = b(
+  "p-4 pb-2 flex justify-between w-full"
+), mt = b([
+  "p-4 py-2 flex-1 overflow-y-auto",
+  "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border"
+]), pt = b("p-4 pt-2 flex-shrink-0"), G = V(null), ht = G.Provider, wt = () => {
+  const t = I(G);
+  if (!t)
+    throw new Error("useBottomSheet must be used within a BottomSheetProvider");
+  return t;
+}, bt = w(function(e, o) {
+  return /* @__PURE__ */ r.jsx(H, { as: "h5", ref: o, ...e });
+}), gt = w(function(e, o) {
+  const { onClose: n } = wt(), a = (s) => {
+    n(), e?.onClick?.(s);
+  };
+  return /* @__PURE__ */ r.jsx(
+    P,
+    {
+      ref: o,
+      variant: "ghost",
+      "aria-label": "Close",
+      as: R,
+      ...e,
+      onClick: a
+    }
+  );
+}), xt = w(({ className: t, ...e }, o) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    ref: o,
+    className: ft({ className: t }),
+    ...e
+  }
+)), vt = w(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: o,
+      className: mt({ className: t }),
+      ...e
+    }
+  )
+), yt = w(({ className: t, ...e }, o) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    ref: o,
+    className: pt({ className: t }),
+    ...e
+  }
+));
+function kt(t, e, o) {
+  const n = B(null);
+  return v(() => {
+    n.current && n.current.focus();
+  }, []), v(() => {
+    const a = (s) => {
+      s.key === "Escape" && t && n.current && n.current.contains(document.activeElement) && !o && e();
+    };
+    return t && (document.addEventListener("keydown", a), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", a), document.body.style.overflow = "unset";
+    };
+  }, [t, e, o, n]), n;
+}
+const jt = w(
+  ({
+    isOpen: t,
+    children: e,
+    className: o,
+    onClose: n,
+    container: a,
+    disableOverlayClickToClose: s = !1,
+    ...l
+  }, c) => {
+    const m = kt(t, n), {
+      isOpen: f,
+      height: d,
+      isSupported: i
+    } = Y(), u = E(() => !t || !i || !f ? {} : {
+      // Adjust bottom position to sit above the virtual keyboard
+      bottom: `${d}px`,
+      // Reduce max height to account for keyboard
+      maxHeight: `calc(90dvh - ${d}px)`,
+      // Ensure smooth transition
+      transition: "bottom 0.2s ease-in-out, max-height 0.2s ease-in-out"
+    }, [t, i, f, d]), p = () => {
+      s || n?.();
+    };
+    return /* @__PURE__ */ r.jsx(D, { container: a, children: /* @__PURE__ */ r.jsxs(ht, { value: { onClose: n }, children: [
+      /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: ut({ open: t }),
+          "aria-hidden": "true",
+          onClick: p
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          ref: Z(c, m),
+          className: g(
+            ct({
+              open: t
+            }),
+            "flex flex-col",
+            // Add flex layout for proper header/body/footer arrangement
+            o
+          ),
+          style: u,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          ...l,
+          children: e
+        }
+      )
+    ] }) });
+  }
+), Pt = Object.assign(jt, {
+  Header: xt,
+  Title: bt,
+  CloseIcon: gt,
+  Body: vt,
+  Footer: yt
+});
+function Bt(t = "auto") {
+  const e = B(null), [o, n] = k("bottom");
+  return v(() => {
+    if (!open || t !== "auto" || !e.current) {
+      n(t === "auto" ? "bottom" : t);
+      return;
+    }
+    const a = e.current.getBoundingClientRect(), s = window.innerWidth, l = window.innerHeight, c = {
+      top: a.top,
+      bottom: l - a.bottom,
+      left: a.left,
+      right: s - a.right
+    };
+    c.bottom > 64 ? n("bottom") : c.top > 64 ? n("top") : c.right > 128 ? n("right") : n("left");
+  }, [t, e]), { position: o, ref: e };
+}
+const Ct = b(
+  "absolute z-50 px-2 py-1 rounded bg-neutral pointer-events-auto transition-opacity duration-150 min-w-[max-content] max-w-sm whitespace-pre-line",
+  {
+    variants: {
+      position: {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+        left: "right-full top-1/2 -translate-y-1/2 mr-2",
+        right: "left-full top-1/2 -translate-y-1/2 ml-2",
+        auto: "top-full left-1/2 -translate-x-1/2 mt-2"
+      }
+    },
+    defaultVariants: {
+      position: "auto"
+    }
+  }
+), Mt = ({
+  children: t,
+  content: e,
+  position: o = "auto",
+  popoverClassName: n,
+  delay: a,
+  ...s
+}) => {
+  const l = S(), [c, m] = k(!1), f = B(null), d = () => {
+    a ? f.current = setTimeout(() => m(!0), a) : m(!0);
+  }, i = () => {
+    f.current && clearTimeout(f.current), m(!1);
+  };
+  v(() => () => {
+    f.current && clearTimeout(f.current);
+  }, []);
+  const u = {
+    tabIndex: 0,
+    "aria-describedby": l,
+    onMouseEnter: d,
+    onFocus: d,
+    onMouseLeave: i,
+    onBlur: i,
+    ...s
+  }, { ref: p, position: h } = Bt(o);
+  return /* @__PURE__ */ r.jsxs("div", { className: "relative w-fit", ref: p, children: [
+    X(t, u),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        id: l,
+        className: g(
+          Ct({ position: h }),
+          n,
+          !c && "opacity-0 pointer-events-none"
+        ),
+        role: "tooltip",
+        "aria-hidden": !c,
+        children: /* @__PURE__ */ r.jsx(q, { as: "small", fontWeight: "normal", color: "black", children: e })
+      }
+    )
+  ] });
+};
+export {
+  Pt as B,
+  Rt as D,
+  Ht as M,
+  Mt as T
+};