@dimasbaguspm/versaur 0.0.35 → 0.0.37

package/dist/js/{bottom-sheet-BYq9Nf57.js → bottom-sheet-CJfhhYkA.js}

@@ -1,32 +1,32 @@
-import { c as u, j as n, a as l } from "./index-DOdDlCoL.js";
-import j, { useState as x, useEffect as v, createContext as S, useContext as T, forwardRef as f, useRef as z, useMemo as E } from "react";
-import { O as B, m as M, j as H } from "./image-rectangle-BPmnlpnT.js";
-import { XIcon as I } from "lucide-react";
+import { c as f, j as r, a as l } from "./index-DOdDlCoL.js";
+import j, { useState as p, useEffect as x, createContext as V, useContext as B, forwardRef as u, useRef as z, useMemo as M } from "react";
+import { O as S, n as P, k as N, H as D } from "./image-rectangle-DIGAUCV8.js";
+import { XIcon as R } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
-function D() {
+function F() {
   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), r = "ontouchstart" in window || navigator.maxTouchPoints > 0, a = window.innerWidth <= 1024;
-  return o || t || r && a;
+  ), t = /iPad|Android(?=.*Mobile)|Tablet/i.test(e), n = "ontouchstart" in window || navigator.maxTouchPoints > 0, a = window.innerWidth <= 1024;
+  return o || t || n && a;
 }
-function k() {
+function C() {
   return typeof window < "u" && "navigator" in window && "virtualKeyboard" in navigator;
 }
-function P() {
-  const [e, o] = x(!1), [t, r] = x(0), [a, s] = x(0), [i, w] = x(!1), [p, h] = x(!1);
-  return v(() => {
-    if (!D()) {
-      w(!1);
+function L() {
+  const [e, o] = p(!1), [t, n] = p(0), [a, s] = p(0), [i, h] = p(!1), [b, w] = p(!1);
+  return x(() => {
+    if (!F()) {
+      h(!1);
       return;
     }
-    w(!0), h(k());
-  }, []), v(() => {
-    if (!i || !k())
+    h(!0), w(C());
+  }, []), x(() => {
+    if (!i || !C())
       return;
     const d = navigator.virtualKeyboard, c = () => {
-      const { boundingRect: m } = d, b = m?.height || 0, y = m?.width || 0;
-      o(b > 0), r(b), s(y);
+      const { boundingRect: m } = d, v = m?.height || 0, y = m?.width || 0;
+      o(v > 0), n(v), s(y);
     };
     return c(), d.addEventListener("geometrychange", c), () => {
       d.removeEventListener(
@@ -34,15 +34,15 @@ function P() {
         c
       );
     };
-  }, [i]), v(() => {
-    if (!i || k())
+  }, [i]), x(() => {
+    if (!i || C())
       return;
     const d = window.innerHeight;
     let c;
     const m = () => {
       clearTimeout(c), c = setTimeout(() => {
-        const b = window.visualViewport?.height ?? window.innerHeight, y = d - b, V = y > 150;
-        o(V), r(V ? y : 0), s(V ? window.innerWidth : 0);
+        const v = window.visualViewport?.height ?? window.innerHeight, y = d - v, k = y > 150;
+        o(k), n(k ? y : 0), s(k ? window.innerWidth : 0);
       }, 100);
     };
     return "visualViewport" in window && window.visualViewport ? (window.visualViewport.addEventListener("resize", m), () => {
@@ -53,26 +53,26 @@ function P() {
     }) : (window.addEventListener("resize", m), () => {
       clearTimeout(c), window.removeEventListener("resize", m);
     });
-  }, [i]), v(() => {
-    i || (o(!1), r(0), s(0));
+  }, [i]), x(() => {
+    i || (o(!1), n(0), s(0));
   }, [i]), {
     isOpen: e,
     height: t,
     width: a,
     isSupported: i,
-    usingNativeAPI: p
+    usingNativeAPI: b
   };
 }
-const N = S(null);
-function F() {
-  const e = T(N);
+const E = V(null);
+function A() {
+  const e = B(E);
   if (!e)
     throw new Error(
       "Modal components must be used within a ModalRoot component"
     );
   return e;
 }
-const L = u(
+const O = f(
   "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: {
@@ -85,7 +85,7 @@ const L = u(
       placement: "center"
     }
   }
-), A = u(
+), W = f(
   [
     "absolute z-61 bg-white rounded-lg shadow-xl",
     "flex flex-col",
@@ -119,8 +119,8 @@ const L = u(
       isOpen: !1
     }
   }
-), O = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+), K = u(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
     "div",
     {
       ref: t,
@@ -128,8 +128,8 @@ const L = u(
       ...o
     }
   )
-), W = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+), _ = u(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
     "div",
     {
       ref: t,
@@ -137,14 +137,14 @@ const L = u(
       ...o
     }
   )
-), K = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx("div", { ref: t, className: l("px-6 py-2", e), ...o })
-), _ = f(
+), $ = u(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx("div", { ref: t, className: l("px-6 py-2", e), ...o })
+), G = u(
   (e, o) => {
-    const { isOpen: t, placement: r, onClose: a, disableOverlayClickToClose: s } = F(), i = () => {
+    const { isOpen: t, placement: n, onClose: a, disableOverlayClickToClose: s } = A(), i = () => {
       s || a();
     };
-    return /* @__PURE__ */ n.jsx(
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
         ref: o,
@@ -153,7 +153,7 @@ const L = u(
         "aria-modal": "true",
         onClick: i,
         className: l(
-          L({ placement: r }),
+          O({ placement: n }),
           t ? "opacity-100" : "opacity-0 pointer-events-none"
         ),
         ...e
@@ -161,39 +161,39 @@ const L = u(
     );
   }
 );
-function C(e, o, t) {
-  const r = z(null);
-  return v(() => {
-    r.current && r.current.focus();
-  }, []), v(() => {
+function T(e, o, t) {
+  const n = z(null);
+  return x(() => {
+    n.current && n.current.focus();
+  }, []), x(() => {
     const a = (s) => {
-      s.key === "Escape" && e && r.current && r.current.contains(document.activeElement) && !t && o();
+      s.key === "Escape" && e && n.current && n.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;
+  }, [e, o, t, n]), n;
 }
-const $ = ({
+const U = ({
   isOpen: e,
   onClose: o,
   size: t = "md",
-  placement: r = "center",
+  placement: n = "center",
   disableOverlayClickToClose: a = !1,
   disableEscapeKeyDown: s = !1,
   children: i,
-  container: w,
-  ...p
+  container: h,
+  ...b
 }) => {
-  const h = {
+  const w = {
     isOpen: e,
     onClose: o,
     size: t,
-    placement: r,
+    placement: n,
     disableOverlayClickToClose: a,
     disableEscapeKeyDown: s
-  }, d = C(e, o, s);
-  return /* @__PURE__ */ n.jsx(B, { container: w, children: /* @__PURE__ */ n.jsx(N.Provider, { value: h, children: /* @__PURE__ */ n.jsxs(
+  }, d = T(e, o, s);
+  return /* @__PURE__ */ r.jsx(S, { container: h, children: /* @__PURE__ */ r.jsx(E.Provider, { value: w, children: /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: l(
@@ -201,36 +201,36 @@ const $ = ({
         e && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ n.jsx(_, {}),
-        /* @__PURE__ */ n.jsx(
+        /* @__PURE__ */ r.jsx(G, {}),
+        /* @__PURE__ */ r.jsx(
           "div",
           {
             ref: d,
-            className: l(A({ size: t, placement: r, isOpen: e })),
+            className: l(W({ size: t, placement: n, isOpen: e })),
             role: "dialog",
             tabIndex: -1,
             "aria-hidden": !e,
-            ...p,
+            ...b,
             children: i
           }
         )
       ]
     }
   ) }) });
-}, je = Object.assign($, {
-  Header: O,
-  Body: K,
-  Footer: W
-}), R = S(null);
+}, Se = Object.assign(U, {
+  Header: K,
+  Body: $,
+  Footer: _
+}), H = V(null);
 function g() {
-  const e = T(R);
+  const e = B(H);
   if (!e)
     throw new Error(
       "Drawer components must be used within a DrawerRoot component"
     );
   return e;
 }
-const G = u(
+const X = f(
   "fixed inset-0 z-50 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md",
   {
     variants: {
@@ -243,7 +243,7 @@ const G = u(
       state: "closed"
     }
   }
-), U = u(
+), q = f(
   "fixed z-50 shadow-xl flex flex-col max-w-full",
   {
     variants: {
@@ -275,7 +275,7 @@ const G = u(
       transitionType: "slide"
     }
   }
-), X = u(
+), J = f(
   "flex justify-between items-center px-6",
   {
     variants: {
@@ -293,7 +293,7 @@ const G = u(
       tab: !1
     }
   }
-), q = u("flex-1 overflow-y-auto px-6 py-4", {
+), Q = f("flex-1 overflow-y-auto px-6 py-4", {
   variants: {
     variant: {
       default: "bg-white",
@@ -303,7 +303,7 @@ const G = u(
   defaultVariants: {
     variant: "default"
   }
-}), J = u("px-6 py-4 border-t", {
+}), Y = f("px-6 py-4 border-t", {
   variants: {
     variant: {
       default: "bg-white border-border",
@@ -313,109 +313,109 @@ const G = u(
   defaultVariants: {
     variant: "default"
   }
-}), Q = j.forwardRef(({ className: e, ...o }, t) => {
-  const { isOpen: r, disableOverlayClickToClose: a, onClose: s } = g(), i = () => {
+}), Z = j.forwardRef(({ className: e, ...o }, t) => {
+  const { isOpen: n, disableOverlayClickToClose: a, onClose: s } = g(), i = () => {
     a || s();
   };
-  return /* @__PURE__ */ n.jsx(
+  return /* @__PURE__ */ r.jsx(
     "div",
     {
       ref: t,
       onClick: i,
       className: l(
-        G({
-          state: r ? "open" : "closed"
+        X({
+          state: n ? "open" : "closed"
         }),
         e
       ),
       ...o
     }
   );
-}), Y = j.forwardRef(
-  ({ children: e, className: o, hasTab: t, ...r }, a) => {
+}), ee = j.forwardRef(
+  ({ children: e, className: o, hasTab: t, ...n }, a) => {
     const { variant: s } = g();
-    return /* @__PURE__ */ n.jsx(
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
         ref: a,
         className: l(
-          X({ variant: s, tab: !!t }),
+          J({ variant: s, tab: !!t }),
           o
         ),
-        ...r,
+        ...n,
         children: e
       }
     );
   }
-), Z = f((e, o) => /* @__PURE__ */ n.jsx(M, { ...e, ref: o, as: "h3", fontSize: "lg" })), ee = f(({ onClick: e, ...o }, t) => {
-  const { onClose: r } = g(), a = (s) => {
-    r(), e?.(s);
+), te = u((e, o) => /* @__PURE__ */ r.jsx(P, { ...e, ref: o, as: "h3", fontSize: "lg" })), oe = u(({ onClick: e, ...o }, t) => {
+  const { onClose: n } = g(), a = (s) => {
+    n(), e?.(s);
   };
-  return /* @__PURE__ */ n.jsx(
-    H,
+  return /* @__PURE__ */ r.jsx(
+    N,
     {
       "aria-label": "Close drawer",
       ...o,
       onClick: a,
       variant: "ghost",
       size: "sm",
-      as: I,
+      as: R,
       ref: t
     }
   );
-}), te = f(
-  ({ children: e, className: o, ...t }, r) => /* @__PURE__ */ n.jsx("div", { ref: r, className: l("[&>div]:px-6", o), ...t, children: e })
-), oe = j.forwardRef(
-  ({ children: e, className: o, ...t }, r) => {
+}), ne = u(
+  ({ children: e, className: o, ...t }, n) => /* @__PURE__ */ r.jsx("div", { ref: n, className: l("[&>div]:px-6", o), ...t, children: e })
+), re = j.forwardRef(
+  ({ children: e, className: o, ...t }, n) => {
     const { variant: a } = g();
-    return /* @__PURE__ */ n.jsx(
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
-        ref: r,
-        className: l(q({ variant: a }), o),
+        ref: n,
+        className: l(Q({ variant: a }), o),
         ...t,
         children: e
       }
     );
   }
-), re = j.forwardRef(
-  ({ children: e, className: o, ...t }, r) => {
+), ae = j.forwardRef(
+  ({ children: e, className: o, ...t }, n) => {
     const { variant: a } = g();
-    return /* @__PURE__ */ n.jsx(
+    return /* @__PURE__ */ r.jsx(
       "div",
       {
-        ref: r,
-        className: l(J({ variant: a }), o),
+        ref: n,
+        className: l(Y({ variant: a }), o),
         ...t,
         children: e
       }
     );
   }
-), ne = ({
+), se = ({
   container: e,
   children: o,
   isOpen: t,
-  onClose: r,
+  onClose: n,
   position: a = "right",
   size: s = "md",
   variant: i = "default",
-  transitionType: w = "slide",
-  disableOverlayClickToClose: p = !1,
-  disableEscapeKeyDown: h = !1,
+  transitionType: h = "slide",
+  disableOverlayClickToClose: b = !1,
+  disableEscapeKeyDown: w = !1,
   className: d,
   ...c
 }) => {
   const m = {
     isOpen: t,
-    onClose: r,
+    onClose: n,
     position: a,
     size: s,
     variant: i,
-    transitionType: w,
-    disableOverlayClickToClose: p,
-    disableEscapeKeyDown: h
-  }, b = C(t, r, h);
-  return /* @__PURE__ */ n.jsx(B, { container: e, children: /* @__PURE__ */ n.jsx(R.Provider, { value: m, children: /* @__PURE__ */ n.jsxs(
+    transitionType: h,
+    disableOverlayClickToClose: b,
+    disableEscapeKeyDown: w
+  }, v = T(t, n, w);
+  return /* @__PURE__ */ r.jsx(S, { container: e, children: /* @__PURE__ */ r.jsx(H.Provider, { value: m, children: /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: l(
@@ -423,22 +423,22 @@ const G = u(
         t && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ n.jsx(Q, {}),
-        /* @__PURE__ */ n.jsx(
+        /* @__PURE__ */ r.jsx(Z, {}),
+        /* @__PURE__ */ r.jsx(
           "div",
           {
-            ref: b,
+            ref: v,
             tabIndex: -1,
             role: t ? "dialog" : void 0,
             "aria-modal": t ? "true" : void 0,
             className: l(
-              U({
+              q({
                 position: a,
                 size: s,
                 variant: i,
-                transitionType: w
+                transitionType: h
               }),
-              w === "slide" ? [
+              h === "slide" ? [
                 !t && a === "left" && "-translate-x-full",
                 !t && a === "right" && "translate-x-full"
               ] : [
@@ -454,14 +454,14 @@ const G = u(
       ]
     }
   ) }) });
-}, Ve = Object.assign(ne, {
-  Header: Y,
-  Title: Z,
-  CloseButton: ee,
-  Tab: te,
-  Body: oe,
-  Footer: re
-}), ae = u(
+}, Te = Object.assign(se, {
+  Header: ee,
+  Title: te,
+  CloseButton: oe,
+  Tab: ne,
+  Body: re,
+  Footer: ae
+}), ie = f(
   [
     "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",
@@ -479,7 +479,7 @@ const G = u(
       open: !1
     }
   }
-), se = u(
+), le = f(
   ["fixed inset-0 z-40 duration-300"],
   {
     variants: {
@@ -492,84 +492,99 @@ const G = u(
       open: !1
     }
   }
-), ie = u("px-4 pt-4 pb-2 flex-shrink-0"), le = u([
-  "px-4 py-2 flex-1 overflow-y-auto",
+), de = f(
+  "p-4 pb-2 flex justify-between w-full"
+), ce = f([
+  "p-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 }, r) {
-  return /* @__PURE__ */ n.jsx(
-    "h2",
+]), ue = f("p-4 pt-2 flex-shrink-0"), I = V(null), fe = I.Provider, me = () => {
+  const e = B(I);
+  if (!e)
+    throw new Error("useBottomSheet must be used within a BottomSheetProvider");
+  return e;
+}, he = u(function(o, t) {
+  return /* @__PURE__ */ r.jsx(D, { level: 3, ref: t, ...o });
+}), we = u(function(o, t) {
+  const { onClose: n } = me(), a = (s) => {
+    n(), o?.onClick?.(s);
+  };
+  return /* @__PURE__ */ r.jsx(
+    N,
     {
-      ref: r,
-      className: ["text-lg font-semibold text-foreground", o].filter(Boolean).join(" "),
-      ...t
+      ref: t,
+      variant: "ghost",
+      "aria-label": "Close",
+      as: R,
+      ...o,
+      onClick: a
     }
   );
-}), ue = f(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+}), ve = u(({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
   "div",
   {
     ref: t,
-    className: ie({ className: e }),
+    className: de({ className: e }),
     ...o
   }
-)), fe = f(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+)), be = u(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
     "div",
     {
       ref: t,
-      className: le({ className: e }),
+      className: ce({ className: e }),
       ...o
     }
   )
-), me = f(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+), xe = u(({ className: e, ...o }, t) => /* @__PURE__ */ r.jsx(
   "div",
   {
     ref: t,
-    className: de({ className: e }),
+    className: ue({ className: e }),
     ...o
   }
-)), we = (...e) => (o) => {
+)), pe = (...e) => (o) => {
   e.forEach((t) => {
     typeof t == "function" ? t(o) : t && "current" in t && (t.current = o);
   });
-}, he = f(
+}, ge = u(
   ({
     isOpen: e,
     children: o,
     className: t,
-    onClose: r,
+    onClose: n,
     container: a,
     disableOverlayClickToClose: s = !1,
     ...i
-  }, w) => {
-    const p = C(e, r), {
-      isOpen: h,
+  }, h) => {
+    const b = T(e, n), {
+      isOpen: w,
       height: d,
       isSupported: c
-    } = P(), m = E(() => !e || !c || !h ? {} : {
+    } = L(), m = M(() => !e || !c || !w ? {} : {
       // 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, h, d]), b = () => {
-      s || r?.();
+    }, [e, c, w, d]), v = () => {
+      s || n?.();
     };
-    return /* @__PURE__ */ n.jsxs(B, { container: a, children: [
-      /* @__PURE__ */ n.jsx(
+    return /* @__PURE__ */ r.jsx(S, { container: a, children: /* @__PURE__ */ r.jsxs(fe, { value: { onClose: n }, children: [
+      /* @__PURE__ */ r.jsx(
         "div",
         {
-          className: se({ open: e }),
+          className: le({ open: e }),
           "aria-hidden": "true",
-          onClick: b
+          onClick: v
         }
       ),
-      /* @__PURE__ */ n.jsx(
+      /* @__PURE__ */ r.jsx(
         "div",
         {
-          ref: we(w, p),
+          ref: pe(h, b),
           className: l(
-            ae({
+            ie({
               open: e
             }),
             "flex flex-col",
@@ -584,16 +599,17 @@ const G = u(
           children: o
         }
       )
-    ] });
+    ] }) });
   }
-), ke = Object.assign(he, {
-  Header: ue,
-  Title: ce,
-  Body: fe,
-  Footer: me
+), Ne = Object.assign(ge, {
+  Header: ve,
+  Title: he,
+  CloseIcon: we,
+  Body: be,
+  Footer: xe
 });
 export {
-  ke as B,
-  Ve as D,
-  je as M
+  Ne as B,
+  Te as D,
+  Se as M
 };