@dimasbaguspm/versaur 0.0.32 → 0.0.33

package/dist/js/{bottom-sheet-DJgcgmgw.js → bottom-sheet-B3Rt2JC5.js}

@@ -1,33 +1,33 @@
-import { c as u, j as r, a as l } from "./index-DOdDlCoL.js";
-import j, { useState as x, useEffect as y, createContext as S, useContext as T, forwardRef as f, useMemo as M } from "react";
-import { u as C, k as z, i as H } from "./image-rectangle-BS6j3xEC.js";
-import { XIcon as D } from "lucide-react";
+import { c as u, j as n, a as l } from "./index-DOdDlCoL.js";
+import j, { useState as v, useEffect as x, createContext as S, useContext as T, forwardRef as f, useRef as M, useMemo as z } from "react";
+import { XIcon as E } from "lucide-react";
+import { k as H, i as D } from "./image-rectangle-oPc5hFMM.js";
 import "./snackbar-DH8jCh2V.js";
 import I from "react-dom";
 function P() {
   if (typeof window > "u") return !1;
   const e = window.navigator.userAgent, o = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     e
-  ), t = /iPad|Android(?=.*Mobile)|Tablet/i.test(e), a = "ontouchstart" in window || navigator.maxTouchPoints > 0, n = window.innerWidth <= 1024;
-  return o || t || a && n;
+  ), t = /iPad|Android(?=.*Mobile)|Tablet/i.test(e), r = "ontouchstart" in window || navigator.maxTouchPoints > 0, a = window.innerWidth <= 1024;
+  return o || t || r && a;
 }
 function k() {
   return typeof window < "u" && "navigator" in window && "virtualKeyboard" in navigator;
 }
-function E() {
-  const [e, o] = x(!1), [t, a] = x(0), [n, s] = x(0), [i, w] = x(!1), [b, p] = x(!1);
-  return y(() => {
+function F() {
+  const [e, o] = v(!1), [t, r] = v(0), [a, s] = v(0), [i, w] = v(!1), [b, h] = v(!1);
+  return x(() => {
     if (!P()) {
       w(!1);
       return;
     }
-    w(!0), p(k());
-  }, []), y(() => {
+    w(!0), h(k());
+  }, []), x(() => {
     if (!i || !k())
       return;
     const d = navigator.virtualKeyboard, c = () => {
-      const { boundingRect: m } = d, h = m?.height || 0, g = m?.width || 0;
-      o(h > 0), a(h), s(g);
+      const { boundingRect: m } = d, p = m?.height || 0, y = m?.width || 0;
+      o(p > 0), r(p), s(y);
     };
     return c(), d.addEventListener("geometrychange", c), () => {
       d.removeEventListener(
@@ -35,15 +35,15 @@ function E() {
         c
       );
     };
-  }, [i]), y(() => {
+  }, [i]), x(() => {
     if (!i || k())
       return;
     const d = window.innerHeight;
     let c;
     const m = () => {
       clearTimeout(c), c = setTimeout(() => {
-        const h = window.visualViewport?.height ?? window.innerHeight, g = d - h, V = g > 150;
-        o(V), a(V ? g : 0), s(V ? window.innerWidth : 0);
+        const p = window.visualViewport?.height ?? window.innerHeight, y = d - p, V = y > 150;
+        o(V), r(V ? y : 0), s(V ? window.innerWidth : 0);
       }, 100);
     };
     return "visualViewport" in window && window.visualViewport ? (window.visualViewport.addEventListener("resize", m), () => {
@@ -54,18 +54,18 @@ function E() {
     }) : (window.addEventListener("resize", m), () => {
       clearTimeout(c), window.removeEventListener("resize", m);
     });
-  }, [i]), y(() => {
-    i || (o(!1), a(0), s(0));
+  }, [i]), x(() => {
+    i || (o(!1), r(0), s(0));
   }, [i]), {
     isOpen: e,
     height: t,
-    width: n,
+    width: a,
     isSupported: i,
     usingNativeAPI: b
   };
 }
 const N = S(null);
-function F() {
+function L() {
   const e = T(N);
   if (!e)
     throw new Error(
@@ -73,7 +73,7 @@ function F() {
     );
   return e;
 }
-const O = u(
+const A = u(
   "fixed inset-0 z-60 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md flex items-center justify-center transition-opacity duration-200 ease-in-out",
   {
     variants: {
@@ -86,7 +86,7 @@ const O = u(
       placement: "center"
     }
   }
-), A = u(
+), O = u(
   [
     "absolute z-61 bg-white rounded-lg shadow-xl",
     "flex flex-col",
@@ -120,8 +120,8 @@ const O = u(
       isOpen: !1
     }
   }
-), L = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
+), W = f(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
@@ -129,8 +129,8 @@ const O = u(
       ...o
     }
   )
-), W = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
+), K = f(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
@@ -138,14 +138,14 @@ const O = u(
       ...o
     }
   )
-), K = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx("div", { ref: t, className: l("px-6 py-2", e), ...o })
 ), _ = f(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx("div", { ref: t, className: l("px-6 py-2", e), ...o })
+), $ = f(
   (e, o) => {
-    const { isOpen: t, placement: a, onClose: n, disableOverlayClickToClose: s } = F(), i = () => {
-      s || n();
+    const { isOpen: t, placement: r, onClose: a, disableOverlayClickToClose: s } = L(), i = () => {
+      s || a();
     };
-    return /* @__PURE__ */ r.jsx(
+    return /* @__PURE__ */ n.jsx(
       "div",
       {
         ref: o,
@@ -154,41 +154,55 @@ const O = u(
         "aria-modal": "true",
         onClick: i,
         className: l(
-          O({ placement: a }),
+          A({ placement: r }),
           t ? "opacity-100" : "opacity-0 pointer-events-none"
         ),
         ...e
       }
     );
   }
-), B = ({
+);
+function B(e, o, t) {
+  const r = M(null);
+  return x(() => {
+    r.current && r.current.focus();
+  }, []), x(() => {
+    const a = (s) => {
+      s.key === "Escape" && e && r.current && r.current.contains(document.activeElement) && !t && o();
+    };
+    return e && (document.addEventListener("keydown", a), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", a), document.body.style.overflow = "unset";
+    };
+  }, [e, o, t, r]), r;
+}
+const C = ({
   container: e,
   children: o
 }) => {
   if (typeof window > "u" || typeof document > "u")
-    return /* @__PURE__ */ r.jsx(r.Fragment, { children: o });
+    return /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
   const t = e ?? document.body;
-  return t ? I.createPortal(o, t) : /* @__PURE__ */ r.jsx(r.Fragment, { children: o });
-}, $ = ({
+  return t ? I.createPortal(o, t) : /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
+}, G = ({
   isOpen: e,
   onClose: o,
   size: t = "md",
-  placement: a = "center",
-  disableOverlayClickToClose: n = !1,
+  placement: r = "center",
+  disableOverlayClickToClose: a = !1,
   disableEscapeKeyDown: s = !1,
   children: i,
   container: w,
   ...b
 }) => {
-  const p = {
+  const h = {
     isOpen: e,
     onClose: o,
     size: t,
-    placement: a,
-    disableOverlayClickToClose: n,
+    placement: r,
+    disableOverlayClickToClose: a,
     disableEscapeKeyDown: s
-  }, d = C(e, o, s);
-  return /* @__PURE__ */ r.jsx(B, { container: w, children: /* @__PURE__ */ r.jsx(N.Provider, { value: p, children: /* @__PURE__ */ r.jsxs(
+  }, d = B(e, o, s);
+  return /* @__PURE__ */ n.jsx(C, { container: w, children: /* @__PURE__ */ n.jsx(N.Provider, { value: h, children: /* @__PURE__ */ n.jsxs(
     "div",
     {
       className: l(
@@ -196,12 +210,12 @@ const O = u(
         e && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ r.jsx(_, {}),
-        /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ n.jsx($, {}),
+        /* @__PURE__ */ n.jsx(
           "div",
           {
             ref: d,
-            className: l(A({ size: t, placement: a, isOpen: e })),
+            className: l(O({ size: t, placement: r, isOpen: e })),
             role: "dialog",
             tabIndex: -1,
             "aria-hidden": !e,
@@ -212,12 +226,12 @@ const O = u(
       ]
     }
   ) }) });
-}, Ve = Object.assign($, {
-  Header: L,
-  Body: K,
-  Footer: W
+}, ke = Object.assign(G, {
+  Header: W,
+  Body: _,
+  Footer: K
 }), R = S(null);
-function v() {
+function g() {
   const e = T(R);
   if (!e)
     throw new Error(
@@ -225,7 +239,7 @@ function v() {
     );
   return e;
 }
-const G = u(
+const U = u(
   "fixed inset-0 z-50 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md",
   {
     variants: {
@@ -238,7 +252,7 @@ const G = u(
       state: "closed"
     }
   }
-), U = u(
+), X = u(
   "fixed z-50 shadow-xl flex flex-col max-w-full",
   {
     variants: {
@@ -270,7 +284,7 @@ const G = u(
       transitionType: "slide"
     }
   }
-), X = u(
+), q = u(
   "flex justify-between items-center px-6",
   {
     variants: {
@@ -288,7 +302,7 @@ const G = u(
       tab: !1
     }
   }
-), q = u("flex-1 overflow-y-auto px-6 py-4", {
+), J = u("flex-1 overflow-y-auto px-6 py-4", {
   variants: {
     variant: {
       default: "bg-white",
@@ -298,7 +312,7 @@ const G = u(
   defaultVariants: {
     variant: "default"
   }
-}), J = u("px-6 py-4 border-t", {
+}), Q = u("px-6 py-4 border-t", {
   variants: {
     variant: {
       default: "bg-white border-border",
@@ -308,79 +322,79 @@ const G = u(
   defaultVariants: {
     variant: "default"
   }
-}), Q = j.forwardRef(({ className: e, ...o }, t) => {
-  const { isOpen: a, disableOverlayClickToClose: n, onClose: s } = v(), i = () => {
-    n || s();
+}), Y = j.forwardRef(({ className: e, ...o }, t) => {
+  const { isOpen: r, disableOverlayClickToClose: a, onClose: s } = g(), i = () => {
+    a || s();
   };
-  return /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
       onClick: i,
       className: l(
-        G({
-          state: a ? "open" : "closed"
+        U({
+          state: r ? "open" : "closed"
         }),
         e
       ),
       ...o
     }
   );
-}), Y = j.forwardRef(
-  ({ children: e, className: o, hasTab: t, ...a }, n) => {
-    const { variant: s } = v();
-    return /* @__PURE__ */ r.jsx(
+}), Z = j.forwardRef(
+  ({ children: e, className: o, hasTab: t, ...r }, a) => {
+    const { variant: s } = g();
+    return /* @__PURE__ */ n.jsx(
       "div",
       {
-        ref: n,
+        ref: a,
         className: l(
-          X({ variant: s, tab: !!t }),
+          q({ variant: s, tab: !!t }),
           o
         ),
-        ...a,
+        ...r,
         children: e
       }
     );
   }
-), Z = f((e, o) => /* @__PURE__ */ r.jsx(z, { ...e, ref: o, as: "h3", fontSize: "lg" })), ee = f(({ onClick: e, ...o }, t) => {
-  const { onClose: a } = v(), n = (s) => {
-    a(), e?.(s);
+), ee = f((e, o) => /* @__PURE__ */ n.jsx(H, { ...e, ref: o, as: "h3", fontSize: "lg" })), te = f(({ onClick: e, ...o }, t) => {
+  const { onClose: r } = g(), a = (s) => {
+    r(), e?.(s);
   };
-  return /* @__PURE__ */ r.jsx(
-    H,
+  return /* @__PURE__ */ n.jsx(
+    D,
     {
       "aria-label": "Close drawer",
       ...o,
-      onClick: n,
+      onClick: a,
       variant: "ghost",
       size: "sm",
-      as: D,
+      as: E,
       ref: t
     }
   );
-}), te = f(
-  ({ children: e, className: o, ...t }, a) => /* @__PURE__ */ r.jsx("div", { ref: a, className: l("[&>div]:px-6", o), ...t, children: e })
-), oe = j.forwardRef(
-  ({ children: e, className: o, ...t }, a) => {
-    const { variant: n } = v();
-    return /* @__PURE__ */ r.jsx(
+}), oe = f(
+  ({ children: e, className: o, ...t }, r) => /* @__PURE__ */ n.jsx("div", { ref: r, className: l("[&>div]:px-6", o), ...t, children: e })
+), re = j.forwardRef(
+  ({ children: e, className: o, ...t }, r) => {
+    const { variant: a } = g();
+    return /* @__PURE__ */ n.jsx(
       "div",
       {
-        ref: a,
-        className: l(q({ variant: n }), o),
+        ref: r,
+        className: l(J({ variant: a }), o),
         ...t,
         children: e
       }
     );
   }
-), re = j.forwardRef(
-  ({ children: e, className: o, ...t }, a) => {
-    const { variant: n } = v();
-    return /* @__PURE__ */ r.jsx(
+), ne = j.forwardRef(
+  ({ children: e, className: o, ...t }, r) => {
+    const { variant: a } = g();
+    return /* @__PURE__ */ n.jsx(
       "div",
       {
-        ref: a,
-        className: l(J({ variant: n }), o),
+        ref: r,
+        className: l(Q({ variant: a }), o),
         ...t,
         children: e
       }
@@ -390,27 +404,27 @@ const G = u(
   container: e,
   children: o,
   isOpen: t,
-  onClose: a,
-  position: n = "right",
+  onClose: r,
+  position: a = "right",
   size: s = "md",
   variant: i = "default",
   transitionType: w = "slide",
   disableOverlayClickToClose: b = !1,
-  disableEscapeKeyDown: p = !1,
+  disableEscapeKeyDown: h = !1,
   className: d,
   ...c
 }) => {
   const m = {
     isOpen: t,
-    onClose: a,
-    position: n,
+    onClose: r,
+    position: a,
     size: s,
     variant: i,
     transitionType: w,
     disableOverlayClickToClose: b,
-    disableEscapeKeyDown: p
-  }, h = C(t, a, p);
-  return /* @__PURE__ */ r.jsx(B, { container: e, children: /* @__PURE__ */ r.jsx(R.Provider, { value: m, children: /* @__PURE__ */ r.jsxs(
+    disableEscapeKeyDown: h
+  }, p = B(t, r, h);
+  return /* @__PURE__ */ n.jsx(C, { container: e, children: /* @__PURE__ */ n.jsx(R.Provider, { value: m, children: /* @__PURE__ */ n.jsxs(
     "div",
     {
       className: l(
@@ -418,24 +432,24 @@ const G = u(
         t && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ r.jsx(Q, {}),
-        /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ n.jsx(Y, {}),
+        /* @__PURE__ */ n.jsx(
           "div",
           {
-            ref: h,
+            ref: p,
             tabIndex: -1,
             role: t ? "dialog" : void 0,
             "aria-modal": t ? "true" : void 0,
             className: l(
-              U({
-                position: n,
+              X({
+                position: a,
                 size: s,
                 variant: i,
                 transitionType: w
               }),
               w === "slide" ? [
-                !t && n === "left" && "-translate-x-full",
-                !t && n === "right" && "translate-x-full"
+                !t && a === "left" && "-translate-x-full",
+                !t && a === "right" && "translate-x-full"
               ] : [
                 "left-0 right-0 top-0 bottom-0",
                 t ? "opacity-100" : "opacity-0 pointer-events-none"
@@ -449,14 +463,14 @@ const G = u(
       ]
     }
   ) }) });
-}, ke = Object.assign(ae, {
-  Header: Y,
-  Title: Z,
-  CloseButton: ee,
-  Tab: te,
-  Body: oe,
-  Footer: re
-}), ne = u(
+}, Be = Object.assign(ae, {
+  Header: Z,
+  Title: ee,
+  CloseButton: te,
+  Tab: oe,
+  Body: re,
+  Footer: ne
+}), se = u(
   [
     "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",
@@ -474,7 +488,7 @@ const G = u(
       open: !1
     }
   }
-), se = u(
+), ie = u(
   ["fixed inset-0 z-40 duration-300"],
   {
     variants: {
@@ -487,42 +501,42 @@ const G = u(
       open: !1
     }
   }
-), ie = u("px-4 pt-4 pb-2 flex-shrink-0"), le = u([
+), le = u("px-4 pt-4 pb-2 flex-shrink-0"), de = u([
   "px-4 py-2 flex-1 overflow-y-auto",
   "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border"
-]), de = u("px-4 pt-2 pb-4 flex-shrink-0"), ce = f(function({ className: o, ...t }, a) {
-  return /* @__PURE__ */ r.jsx(
+]), ce = u("px-4 pt-2 pb-4 flex-shrink-0"), ue = f(function({ className: o, ...t }, r) {
+  return /* @__PURE__ */ n.jsx(
     "h2",
     {
-      ref: a,
+      ref: r,
       className: ["text-lg font-semibold text-foreground", o].filter(Boolean).join(" "),
       ...t
     }
   );
-}), ue = f(({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
+}), fe = f(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
   "div",
   {
     ref: t,
-    className: ie({ className: e }),
+    className: le({ className: e }),
     ...o
   }
-)), fe = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
+)), me = f(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
-      className: le({ className: e }),
+      className: de({ className: e }),
       ...o
     }
   )
-), me = f(({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
+), we = f(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
   "div",
   {
     ref: t,
-    className: de({ className: e }),
+    className: ce({ className: e }),
     ...o
   }
-)), we = (...e) => (o) => {
+)), he = (...e) => (o) => {
   e.forEach((t) => {
     typeof t == "function" ? t(o) : t && "current" in t && (t.current = o);
   });
@@ -531,40 +545,40 @@ const G = u(
     isOpen: e,
     children: o,
     className: t,
-    onClose: a,
-    container: n,
+    onClose: r,
+    container: a,
     disableOverlayClickToClose: s = !1,
     ...i
   }, w) => {
-    const b = C(e, a), {
-      isOpen: p,
+    const b = B(e, r), {
+      isOpen: h,
       height: d,
       isSupported: c
-    } = E(), m = M(() => !e || !c || !p ? {} : {
+    } = F(), m = z(() => !e || !c || !h ? {} : {
       // 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"
-    }, [e, c, p, d]), h = () => {
-      s || a?.();
+    }, [e, c, h, d]), p = () => {
+      s || r?.();
     };
-    return /* @__PURE__ */ r.jsxs(B, { container: n, children: [
-      /* @__PURE__ */ r.jsx(
+    return /* @__PURE__ */ n.jsxs(C, { container: a, children: [
+      /* @__PURE__ */ n.jsx(
         "div",
         {
-          className: se({ open: e }),
+          className: ie({ open: e }),
           "aria-hidden": "true",
-          onClick: h
+          onClick: p
         }
       ),
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ n.jsx(
         "div",
         {
-          ref: we(w, b),
+          ref: he(w, b),
           className: l(
-            ne({
+            se({
               open: e
             }),
             "flex flex-col",
@@ -582,13 +596,13 @@ const G = u(
     ] });
   }
 ), Ce = Object.assign(pe, {
-  Header: ue,
-  Title: ce,
-  Body: fe,
-  Footer: me
+  Header: fe,
+  Title: ue,
+  Body: me,
+  Footer: we
 });
 export {
   Ce as B,
-  ke as D,
-  Ve as M
+  Be as D,
+  ke as M
 };

package/dist/js/{bottom-sheet-input-lRqhqp7I.js → bottom-sheet-input-DRcyjeGh.js}

@@ -1,9 +1,9 @@
 import { c as w, j as e, a as m } from "./index-DOdDlCoL.js";
 import x, { createContext as N, useContext as S, useId as E, forwardRef as j, useRef as D, useState as O, useEffect as Q, useMemo as F } from "react";
-import { I as C } from "./image-rectangle-BS6j3xEC.js";
+import { I as C } from "./image-rectangle-oPc5hFMM.js";
 import { Calendar as U, SearchIcon as X, Clock as Y, Banknote as Z, MailIcon as ee, Check as P } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
-import { M as R, D as M, B as V } from "./bottom-sheet-DJgcgmgw.js";
+import { M as R, D as M, B as V } from "./bottom-sheet-B3Rt2JC5.js";
 const re = w("space-y-2", {
   variants: {
     direction: {

package/dist/js/forms/index.js

@@ -1,4 +1,4 @@
-import { B as a, C as n, b as p, a as u, D as s, k as I, E as i, M as l, P as S, R as c, d as r, c as g, S as h, e as o, j as m, i as M, h as b, f as k, T as x, g as C } from "../bottom-sheet-input-lRqhqp7I.js";
+import { B as a, C as n, b as p, a as u, D as s, k as I, E as i, M as l, P as S, R as c, d as r, c as g, S as h, e as o, j as m, i as M, h as b, f as k, T as x, g as C } from "../bottom-sheet-input-DRcyjeGh.js";
 export {
   a as BottomSheetInput,
   n as CheckboxInput,

package/dist/js/{image-rectangle-BS6j3xEC.js → image-rectangle-oPc5hFMM.js}

@@ -322,11 +322,11 @@ const alertVariants = cva(
     ellipsis: n = !1,
     fontSize: l,
     fontWeight: c,
-    className: g,
-    children: d,
-    ...u
-  }, f) => {
-    const x = [
+    className: u,
+    children: g,
+    ...d
+  }, m) => {
+    const w = [
       "h1",
       "h2",
       "h3",
@@ -336,11 +336,11 @@ const alertVariants = cva(
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", m = l ? `text-${l}` : "", h = c ? `font-${c}` : "";
+    ].includes(e) ? e : "span", p = l ? `text-${l}` : "", v = c ? `font-${c}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
-        ref: f,
+        ref: m,
         className: cn(
           textVariants({
             color: t,
@@ -351,14 +351,14 @@ const alertVariants = cva(
             clamp: a,
             ellipsis: n,
             // @ts-expect-error - `as` is not a valid variant
-            as: x
+            as: w
           }),
-          m,
-          h,
-          g
+          p,
+          v,
+          u
         ),
-        ...u,
-        children: d
+        ...d,
+        children: g
       }
     );
   }
@@ -707,7 +707,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     children: n,
     ...l
   }, c) => {
-    const u = !(n != null && n !== "") && !!(i || o);
+    const d = !(n != null && n !== "") && !!(i || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -718,12 +718,12 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
             color: r,
             shape: t,
             size: s,
-            iconOnly: u
+            iconOnly: d
           }),
           a
         ),
         ...l,
-        children: u ? (
+        children: d ? (
           // Icon-only mode: display only the icon
           i || o
         ) : (
@@ -851,7 +851,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     );
   }
 ), menuVariants = cva(
-  "absolute z-70 min-w-40 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform",
+  "absolute z-70 min-w-40 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform shadow-lg",
   {
     variants: {
       size: {
@@ -859,8 +859,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         md: "py-2 px-1"
       },
       open: {
-        true: "opacity-100 translate-y-1",
-        false: "opacity-0 pointer-events-none translate-y-3"
+        true: "opacity-100 scale-100",
+        false: "opacity-0 pointer-events-none scale-95"
       }
     },
     defaultVariants: {
@@ -878,18 +878,74 @@ function useMenuOutsideClick(e, t, r, s) {
     return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
   }, [e, s, t, r]);
 }
-function useEscapeClose(e, t, r) {
-  const s = useRef(null);
-  return useEffect(() => {
-    s.current && s.current.focus();
-  }, []), useEffect(() => {
-    const i = (o) => {
-      o.key === "Escape" && e && s.current && s.current.contains(document.activeElement) && !r && t();
-    };
-    return e && (document.addEventListener("keydown", i), document.body.style.overflow = "hidden"), () => {
-      document.removeEventListener("keydown", i), document.body.style.overflow = "unset";
+function useMenuEscapeClose(e, t) {
+  useEffect(() => {
+    if (!e) return;
+    const r = (s) => {
+      s.key === "Escape" && t();
     };
-  }, [e, t, r, s]), s;
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [e, t]);
+}
+function useMenuPosition(e, t, r, s = "bottom-start", i) {
+  const [o, a] = useState({});
+  return useEffect(() => {
+    if (!e || !t.current || !r.current) {
+      a({});
+      return;
+    }
+    const n = t.current, l = r.current, c = i || document.documentElement, u = n.getBoundingClientRect(), g = c.getBoundingClientRect(), d = l.style.visibility, m = l.style.position;
+    l.style.visibility = "hidden", l.style.position = "absolute";
+    const h = l.getBoundingClientRect();
+    l.style.visibility = d, l.style.position = m;
+    const w = g.bottom - u.bottom - 8, p = u.top - g.top - 8, v = g.right - u.left - 8, y = u.right - g.left - 8;
+    let b = s;
+    s === "auto" && (w >= h.height && v >= h.width ? b = "bottom-start" : w >= h.height && y >= h.width ? b = "bottom-end" : p >= h.height && v >= h.width ? b = "top-start" : p >= h.height && y >= h.width ? b = "top-end" : b = w >= p ? "bottom-start" : "top-start");
+    const f = {};
+    switch (b) {
+      case "bottom-start":
+        f.top = u.height + 4, f.left = 0;
+        break;
+      case "bottom-end":
+        f.top = u.height + 4, f.right = 0;
+        break;
+      case "top-start":
+        f.bottom = u.height + 4, f.left = 0;
+        break;
+      case "top-end":
+        f.bottom = u.height + 4, f.right = 0;
+        break;
+    }
+    if (i) {
+      const R = {
+        top: b.startsWith("bottom") ? u.bottom + 4 : u.top - h.height - 4,
+        left: b.endsWith("start") ? u.left : u.right - h.width,
+        width: h.width,
+        height: h.height
+      };
+      if (R.left < g.left + 8) {
+        const x = g.left + 8 - R.left;
+        b.endsWith("start") ? f.left = (f.left || 0) + x : f.right = (f.right || 0) - x;
+      } else if (R.left + R.width > g.right - 8) {
+        const x = R.left + R.width - (g.right - 8);
+        b.endsWith("start") ? f.left = (f.left || 0) - x : f.right = (f.right || 0) + x;
+      }
+      if (b.startsWith("bottom")) {
+        const x = Math.max(
+          50,
+          g.bottom - u.bottom - 16
+        );
+        h.height > x && (f.maxHeight = x);
+      } else {
+        const x = Math.max(
+          50,
+          u.top - g.top - 16
+        );
+        h.height > x && (f.maxHeight = x);
+      }
+    }
+    a(f);
+  }, [e, s, i, t, r]), o;
 }
 const MenuContent = forwardRef(
   ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
@@ -908,23 +964,38 @@ const MenuContent = forwardRef(
   onOutsideClick: t,
   size: r = "md",
   content: s,
-  children: i
+  children: i,
+  placement: o = "bottom-start",
+  container: a
 }) => {
-  const o = useRef(null), a = useRef(null), n = useId();
-  return useMenuOutsideClick(e, a, o, t), useEscapeClose(e, t), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
+  const n = useRef(null), l = useRef(null), c = useId();
+  useMenuOutsideClick(e, l, n, t), useMenuEscapeClose(e, t);
+  const u = useMenuPosition(
+    e,
+    n,
+    l,
+    o,
+    a
+  ), g = {
+    ...u,
+    overflowY: u.maxHeight ? "auto" : void 0,
+    overflowX: u.maxWidth ? "auto" : void 0
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
     cloneElement(i, {
       // @ts-expect-error: ref is valid for button or forwardRef components
-      ref: o,
+      ref: n,
       "aria-haspopup": "menu",
       "aria-expanded": e,
-      "aria-controls": n
+      "aria-controls": c
     }),
     e && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        id: n,
-        ref: a,
+        id: c,
+        ref: l,
         className: cn(menuVariants({ size: r, open: e })),
+        style: g,
         role: "menu",
         "aria-hidden": !e,
         children: s
@@ -1105,7 +1176,7 @@ const buttonIconVariants = cva(
   (e, t) => {
     const {
       as: r = EllipsisVerticalIcon,
-      content: s,
+      children: s,
       onOpenChange: i,
       onClick: o,
       ...a
@@ -1115,8 +1186,8 @@ const buttonIconVariants = cva(
     }, [n, i]);
     const c = () => {
       l(!1);
-    }, g = (d) => {
-      l((u) => !u), o?.(d);
+    }, u = (g) => {
+      l((d) => !d), o?.(g);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
@@ -1125,7 +1196,7 @@ const buttonIconVariants = cva(
         onOutsideClick: c,
         size: "md",
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: s }),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: g, ...a })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: u, ...a })
       }
     );
   }
@@ -1202,18 +1273,18 @@ function useFloatingPosition(e, t = "1rem") {
   const r = useRef(null), [s, i] = useState({}), [o, a] = useState("fixed bottom-4 right-4"), n = useCallback(() => {
     const c = r.current;
     if (!c) return;
-    const d = c.getBoundingClientRect().height > window.innerHeight;
-    let u = {}, f = "";
-    d ? (u = {
+    const g = c.getBoundingClientRect().height > window.innerHeight;
+    let d = {}, m = "";
+    g ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
       transform: `translateY(${c.scrollTop}px)`
-    }, f = `fixed bottom-4 ${e}-4`) : (u = {
+    }, m = `fixed bottom-4 ${e}-4`) : (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, f = `fixed bottom-4 ${e}-4`), i(u), a(f);
+    }, m = `fixed bottom-4 ${e}-4`), i(d), a(m);
   }, [e, t]);
   return useEffect(() => {
     n();
@@ -1239,12 +1310,12 @@ const ButtonFloat = forwardRef(
     offset: o = "1rem",
     ...a
   }, n) {
-    const [l, c, g] = useFloatingPosition(
+    const [l, c, u] = useFloatingPosition(
       i,
       o
-    ), [d, u] = useState(!1);
+    ), [g, d] = useState(!1);
     return useEffect(() => {
-      u(!0);
+      d(!0);
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: l, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
@@ -1252,8 +1323,8 @@ const ButtonFloat = forwardRef(
         type: a.type || "button",
         className: cn(
           buttonFloatVariants({ variant: r, size: s }),
-          g,
-          d && "animate-fab-in",
+          u,
+          g && "animate-fab-in",
           t
         ),
         style: c,
@@ -1404,7 +1475,7 @@ const BUTTONS = [
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((g, d) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: g.map((u) => u === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((u, g) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: u.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -1418,14 +1489,14 @@ const BUTTONS = [
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             CalculatorButton,
             {
-              variant: u === "=" ? "action" : u === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(u) ? "operator" : "default",
-              onClick: () => l(u),
+              variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
+              onClick: () => l(d),
               disabled: r,
-              "aria-label": u,
-              children: u
+              "aria-label": d,
+              children: d
             },
-            u
-          )) }, d)) })
+            d
+          )) }, g)) })
         ]
       }
     );
@@ -1481,17 +1552,17 @@ const cardVariants = cva(
     bordered: n = !1,
     className: l,
     ...c
-  }, g) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, u) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
-      ref: g,
+      ref: u,
       className: cn(cardVariants({ size: e, shape: t, bordered: n }), l),
       ...c,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "lg", fontWeight: "semibold", children: s }),
+            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: s }),
             i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: i })
           ] }),
           (o || a) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
@@ -1995,35 +2066,35 @@ const BaseImage = forwardRef(
     position: n = "cover",
     size: l = "auto",
     shape: c,
-    className: g,
-    ...d
-  }, u) => {
-    const { loaded: f, errored: b, handleLoad: x, handleError: m } = useImage({
+    className: u,
+    ...g
+  }, d) => {
+    const { loaded: m, errored: h, handleLoad: w, handleError: p } = useImage({
       src: e
-    }), h = typeof i == "number" ? i : Number(i), v = typeof o == "number" ? o : Number(o);
-    return !f && !b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    }), v = typeof i == "number" ? i : Number(i), y = typeof o == "number" ? o : Number(o);
+    return !m && !h ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
         shape: c,
-        width: h,
-        height: v
+        width: v,
+        height: y
       }
-    ) : b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : h ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
         shape: c,
         alt: t,
-        width: h,
-        height: v
+        width: v,
+        height: y
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: u,
+        ref: d,
         src: e,
         alt: t,
-        width: h,
-        height: v,
+        width: v,
+        height: y,
         loading: a,
         className: cn(
           imageVariants({
@@ -2031,15 +2102,15 @@ const BaseImage = forwardRef(
             size: l,
             shape: c
           }),
-          g
+          u
         ),
-        onLoad: (w) => {
-          x(), r?.(w);
+        onLoad: (b) => {
+          w(), r?.(b);
         },
-        onError: (w) => {
-          m(), s?.(w);
+        onError: (b) => {
+          p(), s?.(b);
         },
-        ...d
+        ...g
       }
     );
   }
@@ -2068,6 +2139,5 @@ export {
   ImageCircle as m,
   ImageSquare as n,
   ImageRectangle as o,
-  BaseImage as p,
-  useEscapeClose as u
+  BaseImage as p
 };

package/dist/js/index.js

@@ -1,11 +1,11 @@
 import { L as e, P as s, S as r } from "./skeleton-BNZyaRjo.js";
-import { A as n, a as p, B as u, b as i, F as l, e as I, P as c, c as S, d as m, S as B, T as g } from "./top-bar-DJNgsR7X.js";
-import { B as b, C as T, b as x, a as h, D as f, k as C, E as P, M, P as k, R as A, d as F, c as D, S as L, e as R, j as w, i as G, h as j, f as v, T as y, g as E } from "./bottom-sheet-input-lRqhqp7I.js";
-import { B as q, D as H, M as z } from "./bottom-sheet-DJgcgmgw.js";
-import { A as K, a as O, b as Q, c as U, d as V, B as W, p as X, e as Y, f as Z, h as _, i as $, g as aa, C as ta, j as ea, F as sa, I as ra, m as oa, o as na, n as pa, M as ua, N as ia, T as la, k as Ia, l as ca } from "./image-rectangle-BS6j3xEC.js";
-import { T as ma } from "./tooltip-J7r2xoUk.js";
+import { A as n, a as p, B as u, b as i, F as l, e as I, P as c, c as S, d as m, S as B, T as g } from "./top-bar-Bg-zMaFY.js";
+import { B as b, C as T, b as x, a as h, D as f, k as C, E as P, M, P as k, R as A, d as F, c as D, S as L, e as R, j as w, i as G, h as j, f as v, T as y, g as E } from "./bottom-sheet-input-DRcyjeGh.js";
+import { B as q, D as H, M as z } from "./bottom-sheet-B3Rt2JC5.js";
+import { A as K, a as O, b as Q, c as U, d as V, B as W, p as X, e as Y, f as Z, h as _, i as $, g as aa, C as ta, j as ea, F as sa, I as ra, m as oa, o as na, n as pa, M as ua, N as ia, T as la, k as Ia, l as ca } from "./image-rectangle-oPc5hFMM.js";
+import { T as ma } from "./tooltip-DNKTNCQm.js";
 import { S as ga } from "./snackbar-DH8jCh2V.js";
-import { B as ba, T as Ta } from "./tabs-80jJFJ7W.js";
+import { B as ba, T as Ta } from "./tabs-CKLbsCWq.js";
 import { S as ha, u as fa } from "./use-snackbars-B0MaRlg1.js";
 export {
   K as Alert,

package/dist/js/layouts/index.js

@@ -1,4 +1,4 @@
-import { A as r, a as e, B as s, b as t, F as p, e as B, P as u, c as d, d as g, S as P, T as i } from "../top-bar-DJNgsR7X.js";
+import { A as r, a as e, B as s, b as t, F as p, e as B, P as u, c as d, d as g, S as P, T as i } from "../top-bar-Bg-zMaFY.js";
 export {
   r as AppBar,
   e as BadgeGroup,

package/dist/js/navigation/index.js

@@ -1,4 +1,4 @@
-import { B as s, T as b } from "../tabs-80jJFJ7W.js";
+import { B as s, T as b } from "../tabs-CKLbsCWq.js";
 export {
   s as Breadcrumbs,
   b as Tabs

package/dist/js/overlays/index.js

@@ -1,6 +1,6 @@
-import { B as a, D as e, M as t } from "../bottom-sheet-DJgcgmgw.js";
-import { M as m } from "../image-rectangle-BS6j3xEC.js";
-import { T as M } from "../tooltip-J7r2xoUk.js";
+import { B as a, D as e, M as t } from "../bottom-sheet-B3Rt2JC5.js";
+import { M as m } from "../image-rectangle-oPc5hFMM.js";
+import { T as M } from "../tooltip-DNKTNCQm.js";
 export {
   a as BottomSheet,
   e as Drawer,

package/dist/js/primitive/index.js

@@ -1,4 +1,4 @@
-import { A as t, a as e, b as o, c as r, d as n, B as l, p as u, e as c, f as i, h as B, i as I, g, C as m, j as A, F as b, I as C, m as d, o as p, n as T, N as f, T as h, k as x, l as F } from "../image-rectangle-BS6j3xEC.js";
+import { A as t, a as e, b as o, c as r, d as n, B as l, p as u, e as c, f as i, h as B, i as I, g, C as m, j as A, F as b, I as C, m as d, o as p, n as T, N as f, T as h, k as x, l as F } from "../image-rectangle-oPc5hFMM.js";
 import { S as k } from "../snackbar-DH8jCh2V.js";
 export {
   t as Alert,

package/dist/js/{tabs-80jJFJ7W.js → tabs-CKLbsCWq.js}

@@ -1,6 +1,6 @@
 import { c as d, j as s, a as u } from "./index-DOdDlCoL.js";
 import { forwardRef as f, createContext as x, useContext as g, useState as p, useLayoutEffect as y, useRef as h } from "react";
-import { I as w } from "./image-rectangle-BS6j3xEC.js";
+import { I as w } from "./image-rectangle-oPc5hFMM.js";
 import "./snackbar-DH8jCh2V.js";
 import { ChevronRight as T } from "lucide-react";
 const j = d(

package/dist/js/{tooltip-J7r2xoUk.js → tooltip-DNKTNCQm.js}

@@ -1,6 +1,6 @@
 import { c as v, j as c, a as w } from "./index-DOdDlCoL.js";
 import { useRef as m, useState as d, useEffect as h, useId as T, cloneElement as j } from "react";
-import { k as y } from "./image-rectangle-BS6j3xEC.js";
+import { k as y } from "./image-rectangle-oPc5hFMM.js";
 function P(e = "auto") {
   const n = m(null), [a, t] = d("bottom");
   return h(() => {

package/dist/js/{top-bar-DJNgsR7X.js → top-bar-Bg-zMaFY.js}

@@ -1,7 +1,7 @@
 import { c as i, j as s, a as l } from "./index-DOdDlCoL.js";
 import * as b from "react";
 import { forwardRef as o } from "react";
-import { k as u } from "./image-rectangle-BS6j3xEC.js";
+import { k as u } from "./image-rectangle-oPc5hFMM.js";
 import "./snackbar-DH8jCh2V.js";
 const j = i(
   "w-full flex flex-wrap items-center pt-3 mb-3 gap-2 bg-white [&>[data-versaur-appbar-bottom]]:basis-full [&>[data-versaur-appbar-bottom]]:w-full [&:has([data-versaur-appbar-bottom])>[data-versaur-appbar-leading]]:pl-4 [&:has([data-versaur-appbar-bottom])>[data-versaur-appbar-trailing]]:pr-4 [&:not(:has([data-versaur-appbar-bottom]))]:px-4",

package/dist/types/overlays/menu/types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type MenuSize = 'sm' | 'md';
+export type MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'auto';
 /**
  * Props for Menu
  */
@@ -14,6 +15,10 @@ export interface MenuProps {
     content: ReactNode;
     /** Trigger element */
     children: ReactNode;
+    /** Preferred placement of the menu relative to trigger */
+    placement?: MenuPlacement;
+    /** Container element to respect boundaries (defaults to viewport) */
+    container?: HTMLElement | null;
 }
 /**
  * Props for MenuContent

package/dist/types/overlays/menu/use-menu.d.ts

@@ -1 +1,16 @@
+import { MenuPlacement } from './types';
 export declare function useMenuOutsideClick(isOpen: boolean, contentRef: React.RefObject<HTMLDivElement | null>, triggerRef: React.RefObject<HTMLButtonElement | null>, onOutsideClick: () => void): void;
+/**
+ * Menu-specific escape close hook that doesn't disable body scrolling
+ */
+export declare function useMenuEscapeClose(isOpen: boolean, onClose: () => void): void;
+interface MenuPosition {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+}
+export declare function useMenuPosition(isOpen: boolean, triggerRef: React.RefObject<HTMLElement | null>, contentRef: React.RefObject<HTMLDivElement | null>, placement?: MenuPlacement, container?: HTMLElement | null): MenuPosition;
+export {};

package/dist/types/primitive/button-menu-icon/types.d.ts

@@ -9,5 +9,5 @@ export interface ButtonMenuIconProps extends Omit<ButtonIconProps, 'content'>, P
     /**
      * The content to be displayed inside the menu.
      */
-    content: ReactNode;
+    children: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",