@dimasbaguspm/versaur 0.0.25 → 0.0.26

package/dist/js/{bottom-sheet-CCDa5VGo.js → bottom-sheet-CQw_O-4W.js}

@@ -1,7 +1,10 @@
 import { c, j as n, a as d } from "./index-DOdDlCoL.js";
-import y, { useState as b, useEffect as h, createContext as S, useContext as R, forwardRef as w, useRef as C, useCallback as T, useMemo as H } from "react";
-import z from "react-dom";
-function D() {
+import j, { useState as x, useEffect as b, createContext as S, useContext as N, forwardRef as u, useRef as E, useCallback as M, useMemo as z } from "react";
+import { XIcon as D } from "lucide-react";
+import { h as H, f as I } from "./image-rectangle--Sy82Ff9.js";
+import "./snackbar-DH8jCh2V.js";
+import P from "react-dom";
+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
@@ -11,66 +14,66 @@ function D() {
 function k() {
   return typeof window < "u" && "navigator" in window && "virtualKeyboard" in navigator;
 }
-function F() {
-  const [e, o] = b(!1), [t, r] = b(0), [a, s] = b(0), [i, m] = b(!1), [p, x] = b(!1);
-  return h(() => {
-    if (!D()) {
-      m(!1);
+function L() {
+  const [e, o] = x(!1), [t, r] = x(0), [a, s] = x(0), [i, w] = x(!1), [h, p] = x(!1);
+  return b(() => {
+    if (!F()) {
+      w(!1);
       return;
     }
-    m(!0), x(k());
-  }, []), h(() => {
+    w(!0), p(k());
+  }, []), b(() => {
     if (!i || !k())
       return;
-    const u = navigator.virtualKeyboard, l = () => {
-      const { boundingRect: f } = u, v = f?.height || 0, g = f?.width || 0;
-      o(v > 0), r(v), s(g);
+    const f = navigator.virtualKeyboard, l = () => {
+      const { boundingRect: m } = f, g = m?.height || 0, y = m?.width || 0;
+      o(g > 0), r(g), s(y);
     };
-    return l(), u.addEventListener("geometrychange", l), () => {
-      u.removeEventListener(
+    return l(), f.addEventListener("geometrychange", l), () => {
+      f.removeEventListener(
         "geometrychange",
         l
       );
     };
-  }, [i]), h(() => {
+  }, [i]), b(() => {
     if (!i || k())
       return;
-    const u = window.innerHeight;
+    const f = window.innerHeight;
     let l;
-    const f = () => {
+    const m = () => {
       clearTimeout(l), l = setTimeout(() => {
-        const v = window.visualViewport?.height ?? window.innerHeight, g = u - v, V = g > 150;
-        o(V), r(V ? g : 0), s(V ? window.innerWidth : 0);
+        const g = window.visualViewport?.height ?? window.innerHeight, y = f - g, 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", f), () => {
+    return "visualViewport" in window && window.visualViewport ? (window.visualViewport.addEventListener("resize", m), () => {
       clearTimeout(l), window.visualViewport?.removeEventListener(
         "resize",
-        f
+        m
       );
-    }) : (window.addEventListener("resize", f), () => {
-      clearTimeout(l), window.removeEventListener("resize", f);
+    }) : (window.addEventListener("resize", m), () => {
+      clearTimeout(l), window.removeEventListener("resize", m);
     });
-  }, [i]), h(() => {
+  }, [i]), b(() => {
     i || (o(!1), r(0), s(0));
   }, [i]), {
     isOpen: e,
     height: t,
     width: a,
     isSupported: i,
-    usingNativeAPI: p
+    usingNativeAPI: h
   };
 }
-const E = S(null);
-function I() {
-  const e = R(E);
+const R = S(null);
+function A() {
+  const e = N(R);
   if (!e)
     throw new Error(
       "Modal components must be used within a ModalRoot component"
     );
   return e;
 }
-const P = c(
+const K = c(
   "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: {
@@ -83,7 +86,7 @@ const P = c(
       placement: "center"
     }
   }
-), L = c(
+), O = c(
   [
     "absolute z-61 bg-white rounded-lg shadow-xl",
     "flex flex-col",
@@ -117,7 +120,7 @@ const P = c(
       isOpen: !1
     }
   }
-), A = w(
+), W = u(
   ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
     "div",
     {
@@ -126,7 +129,7 @@ const P = c(
       ...o
     }
   )
-), K = w(
+), _ = u(
   ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
     "div",
     {
@@ -135,11 +138,11 @@ const P = c(
       ...o
     }
   )
-), W = w(
+), $ = u(
   ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx("div", { ref: t, className: d("px-6 py-2", e), ...o })
-), O = w(
+), G = u(
   (e, o) => {
-    const { isOpen: t, placement: r, onClose: a } = I();
+    const { isOpen: t, placement: r, onClose: a } = A();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
@@ -149,7 +152,7 @@ const P = c(
         "aria-modal": "true",
         onClick: a,
         className: d(
-          P({ placement: r }),
+          K({ placement: r }),
           t ? "opacity-100" : "opacity-0 pointer-events-none"
         ),
         ...e
@@ -158,10 +161,10 @@ const P = c(
   }
 );
 function B(e, o, t) {
-  const r = C(null);
-  return h(() => {
+  const r = E(null);
+  return b(() => {
     r.current && r.current.focus();
-  }, []), h(() => {
+  }, []), b(() => {
     const a = (s) => {
       s.key === "Escape" && e && r.current && r.current.contains(document.activeElement) && !t && o();
     };
@@ -170,15 +173,15 @@ function B(e, o, t) {
     };
   }, [e, o, t, r]), r;
 }
-const N = ({
+const C = ({
   container: e,
   children: o
 }) => {
   if (typeof window > "u" || typeof document > "u")
     return /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
   const t = e ?? document.body;
-  return t ? z.createPortal(o, t) : /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
-}, _ = ({
+  return t ? P.createPortal(o, t) : /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
+}, U = ({
   isOpen: e,
   onClose: o,
   size: t = "md",
@@ -187,13 +190,13 @@ const N = ({
   container: s,
   ...i
 }) => {
-  const m = {
+  const w = {
     isOpen: e,
     onClose: o,
     size: t,
     placement: r
-  }, p = B(e, o);
-  return /* @__PURE__ */ n.jsx(N, { container: s, children: /* @__PURE__ */ n.jsx(E.Provider, { value: m, children: /* @__PURE__ */ n.jsxs(
+  }, h = B(e, o);
+  return /* @__PURE__ */ n.jsx(C, { container: s, children: /* @__PURE__ */ n.jsx(R.Provider, { value: w, children: /* @__PURE__ */ n.jsxs(
     "div",
     {
       className: d(
@@ -201,12 +204,12 @@ const N = ({
         e && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ n.jsx(O, {}),
+        /* @__PURE__ */ n.jsx(G, {}),
         /* @__PURE__ */ n.jsx(
           "div",
           {
-            ref: p,
-            className: d(L({ size: t, placement: r, isOpen: e })),
+            ref: h,
+            className: d(O({ size: t, placement: r, isOpen: e })),
             role: "dialog",
             tabIndex: -1,
             "aria-hidden": !e,
@@ -217,20 +220,20 @@ const N = ({
       ]
     }
   ) }) });
-}, he = Object.assign(_, {
-  Header: A,
-  Body: W,
-  Footer: K
-}), M = S(null);
-function j() {
-  const e = R(M);
+}, Be = Object.assign(U, {
+  Header: W,
+  Body: $,
+  Footer: _
+}), T = S(null);
+function v() {
+  const e = N(T);
   if (!e)
     throw new Error(
       "Drawer components must be used within a DrawerRoot component"
     );
   return e;
 }
-const $ = c(
+const X = c(
   "fixed inset-0 z-50 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md",
   {
     variants: {
@@ -243,51 +246,57 @@ const $ = c(
       state: "closed"
     }
   }
-), G = c("fixed z-50 shadow-xl flex flex-col", {
-  variants: {
-    position: {
-      left: "left-0 top-0 bottom-0 border-r",
-      right: "right-0 top-0 bottom-0 border-l"
-    },
-    size: {
-      sm: "w-80",
-      md: "w-96",
-      lg: "w-[28rem]",
-      xl: "w-[32rem]",
-      "3/4": "w-[75vw]",
-      full: "w-full"
-    },
-    variant: {
-      default: "bg-white border-border",
-      glass: "bg-white/10 backdrop-blur-lg border-white/20"
+), q = c(
+  "fixed z-50 shadow-xl flex flex-col max-w-full",
+  {
+    variants: {
+      position: {
+        left: "left-0 top-0 bottom-0 border-r",
+        right: "right-0 top-0 bottom-0 border-l"
+      },
+      size: {
+        sm: "w-80",
+        md: "w-96",
+        lg: "w-[28rem]",
+        xl: "w-[32rem]",
+        "3/4": "w-[75vw]",
+        full: "w-full"
+      },
+      variant: {
+        default: "bg-white border-border",
+        glass: "bg-white/10 backdrop-blur-lg border-white/20"
+      },
+      transitionType: {
+        slide: "transition-transform duration-300 ease-in-out",
+        fade: "transition-opacity duration-300 ease-in-out"
+      }
     },
-    transitionType: {
-      slide: "transition-transform duration-300 ease-in-out",
-      fade: "transition-opacity duration-300 ease-in-out"
+    defaultVariants: {
+      position: "right",
+      size: "md",
+      variant: "default",
+      transitionType: "slide"
     }
-  },
-  defaultVariants: {
-    position: "right",
-    size: "md",
-    variant: "default",
-    transitionType: "slide"
   }
-}), U = c("flex-shrink-0 px-6", {
-  variants: {
-    variant: {
-      default: "bg-white",
-      glass: "bg-transparent "
+), J = c(
+  "flex justify-between items-center px-6",
+  {
+    variants: {
+      variant: {
+        default: "bg-white",
+        glass: "bg-transparent "
+      },
+      tab: {
+        true: "pt-4 pb-2",
+        false: "border-b border-border py-4 "
+      }
     },
-    tab: {
-      true: "pt-4 pb-2",
-      false: "border-b border-border py-4 "
+    defaultVariants: {
+      variant: "default",
+      tab: !1
     }
-  },
-  defaultVariants: {
-    variant: "default",
-    tab: !1
   }
-}), q = c("flex-1 overflow-y-auto px-6 py-4", {
+), Q = c("flex-1 overflow-y-auto px-6 py-4", {
   variants: {
     variant: {
       default: "bg-white",
@@ -297,23 +306,18 @@ const $ = c(
   defaultVariants: {
     variant: "default"
   }
-}), J = c("flex-shrink-0 px-6 py-4 border-t", {
+}), Y = c("px-6 py-4 border-t", {
   variants: {
     variant: {
       default: "bg-white border-border",
       glass: "bg-transparent border-white/10"
-    },
-    responsiveFlex: {
-      true: "flex flex-row gap-3 sm:justify-end [&>*]:sm:flex-grow-0 [&>*]:flex-grow",
-      false: "flex gap-2"
     }
   },
   defaultVariants: {
-    variant: "default",
-    responsiveFlex: !0
+    variant: "default"
   }
-}), Q = y.forwardRef(({ className: e, ...o }, t) => {
-  const { isOpen: r, onClose: a } = j(), s = () => {
+}), Z = j.forwardRef(({ className: e, ...o }, t) => {
+  const { isOpen: r, onClose: a } = v(), s = () => {
     a();
   };
   return /* @__PURE__ */ n.jsx(
@@ -322,7 +326,7 @@ const $ = c(
       ref: t,
       onClick: s,
       className: d(
-        $({
+        X({
           state: r ? "open" : "closed"
         }),
         e
@@ -330,15 +334,15 @@ const $ = c(
       ...o
     }
   );
-}), X = y.forwardRef(
+}), ee = j.forwardRef(
   ({ children: e, className: o, hasTab: t, ...r }, a) => {
-    const { variant: s } = j();
+    const { variant: s } = v();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
         ref: a,
         className: d(
-          U({ variant: s, tab: !!t }),
+          J({ variant: s, tab: !!t }),
           o
         ),
         ...r,
@@ -346,38 +350,51 @@ const $ = c(
       }
     );
   }
-), Y = w(
+), te = u((e, o) => /* @__PURE__ */ n.jsx(H, { ...e, ref: o, as: "h3", fontSize: "lg" })), oe = u(({ onClick: e, ...o }, t) => {
+  const { onClose: r } = v(), a = (s) => {
+    r(), e?.(s);
+  };
+  return /* @__PURE__ */ n.jsx(
+    I,
+    {
+      "aria-label": "Close drawer",
+      ...o,
+      onClick: a,
+      variant: "ghost",
+      size: "sm",
+      as: D,
+      ref: t
+    }
+  );
+}), re = u(
   ({ children: e, className: o, ...t }, r) => /* @__PURE__ */ n.jsx("div", { ref: r, className: d("[&>div]:px-6", o), ...t, children: e })
-), Z = y.forwardRef(
+), ne = j.forwardRef(
   ({ children: e, className: o, ...t }, r) => {
-    const { variant: a } = j();
+    const { variant: a } = v();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
         ref: r,
-        className: d(q({ variant: a }), o),
+        className: d(Q({ variant: a }), o),
         ...t,
         children: e
       }
     );
   }
-), ee = y.forwardRef(
-  ({ children: e, className: o, responsiveFlex: t = !0, ...r }, a) => {
-    const { variant: s } = j();
+), ae = j.forwardRef(
+  ({ children: e, className: o, ...t }, r) => {
+    const { variant: a } = v();
     return /* @__PURE__ */ n.jsx(
       "div",
       {
-        ref: a,
-        className: d(
-          J({ variant: s, responsiveFlex: t }),
-          o
-        ),
-        ...r,
+        ref: r,
+        className: d(Y({ variant: a }), o),
+        ...t,
         children: e
       }
     );
   }
-), te = ({
+), se = ({
   container: e,
   children: o,
   isOpen: t,
@@ -385,21 +402,21 @@ const $ = c(
   position: a = "right",
   size: s = "md",
   variant: i = "default",
-  transitionType: m = "slide",
-  className: p,
-  ...x
+  transitionType: w = "slide",
+  className: h,
+  ...p
 }) => {
-  const u = T(() => {
+  const f = M(() => {
     r(!1);
   }, [r]), l = {
     isOpen: t,
-    onClose: u,
+    onClose: f,
     position: a,
     size: s,
     variant: i,
-    transitionType: m
-  }, f = B(t, u);
-  return /* @__PURE__ */ n.jsx(N, { container: e, children: /* @__PURE__ */ n.jsx(M.Provider, { value: l, children: /* @__PURE__ */ n.jsxs(
+    transitionType: w
+  }, m = B(t, f);
+  return /* @__PURE__ */ n.jsx(C, { container: e, children: /* @__PURE__ */ n.jsx(T.Provider, { value: l, children: /* @__PURE__ */ n.jsxs(
     "div",
     {
       className: d(
@@ -407,43 +424,45 @@ const $ = c(
         t && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ n.jsx(Q, {}),
+        /* @__PURE__ */ n.jsx(Z, {}),
         /* @__PURE__ */ n.jsx(
           "div",
           {
-            ref: f,
+            ref: m,
             tabIndex: -1,
             role: t ? "dialog" : void 0,
             "aria-modal": t ? "true" : void 0,
             className: d(
-              G({
+              q({
                 position: a,
                 size: s,
                 variant: i,
-                transitionType: m
+                transitionType: w
               }),
-              m === "slide" ? [
+              w === "slide" ? [
                 !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"
               ],
-              p
+              h
             ),
-            ...x,
+            ...p,
             children: t && o
           }
         )
       ]
     }
   ) }) });
-}, be = Object.assign(te, {
-  Header: X,
-  Tab: Y,
-  Body: Z,
-  Footer: ee
-}), oe = c(
+}, Ce = Object.assign(se, {
+  Header: ee,
+  Title: te,
+  CloseButton: oe,
+  Tab: re,
+  Body: ne,
+  Footer: ae
+}), ie = c(
   [
     "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",
@@ -461,7 +480,7 @@ const $ = c(
       open: !1
     }
   }
-), re = c(
+), de = c(
   ["fixed inset-0 z-40 duration-300"],
   {
     variants: {
@@ -474,10 +493,10 @@ const $ = c(
       open: !1
     }
   }
-), ne = c("px-4 pt-4 pb-2 flex-shrink-0"), ae = c([
+), le = c("px-4 pt-4 pb-2 flex-shrink-0"), ce = c([
   "px-4 py-2 flex-1 overflow-y-auto",
   "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border"
-]), se = c("px-4 pt-2 pb-4 flex-shrink-0"), ie = w(function({ className: o, ...t }, r) {
+]), ue = c("px-4 pt-2 pb-4 flex-shrink-0"), fe = u(function({ className: o, ...t }, r) {
   return /* @__PURE__ */ n.jsx(
     "h2",
     {
@@ -486,64 +505,64 @@ const $ = c(
       ...t
     }
   );
-}), de = w(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+}), me = u(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
   "div",
   {
     ref: t,
-    className: ne({ className: e }),
+    className: le({ className: e }),
     ...o
   }
-)), le = w(
+)), we = u(
   ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
     "div",
     {
       ref: t,
-      className: ae({ className: e }),
+      className: ce({ className: e }),
       ...o
     }
   )
-), ce = w(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+), he = u(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
   "div",
   {
     ref: t,
-    className: se({ className: e }),
+    className: ue({ className: e }),
     ...o
   }
-)), ue = (...e) => (o) => {
+)), pe = (...e) => (o) => {
   e.forEach((t) => {
     typeof t == "function" ? t(o) : t && "current" in t && (t.current = o);
   });
-}, fe = w(
+}, be = u(
   ({ isOpen: e, children: o, className: t, onClose: r, container: a, ...s }, i) => {
-    const m = B(e, r), {
-      isOpen: p,
-      height: x,
-      isSupported: u
-    } = F(), l = H(() => !e || !u || !p ? {} : {
+    const w = B(e, r), {
+      isOpen: h,
+      height: p,
+      isSupported: f
+    } = L(), l = z(() => !e || !f || !h ? {} : {
       // Adjust bottom position to sit above the virtual keyboard
-      bottom: `${x}px`,
+      bottom: `${p}px`,
       // Reduce max height to account for keyboard
-      maxHeight: `calc(90dvh - ${x}px)`,
+      maxHeight: `calc(90dvh - ${p}px)`,
       // Ensure smooth transition
       transition: "bottom 0.2s ease-in-out, max-height 0.2s ease-in-out"
-    }, [e, u, p, x]), f = () => {
+    }, [e, f, h, p]), m = () => {
       r?.();
     };
-    return /* @__PURE__ */ n.jsxs(N, { container: a, children: [
+    return /* @__PURE__ */ n.jsxs(C, { container: a, children: [
       /* @__PURE__ */ n.jsx(
         "div",
         {
-          className: re({ open: e }),
+          className: de({ open: e }),
           "aria-hidden": "true",
-          onClick: f
+          onClick: m
         }
       ),
       /* @__PURE__ */ n.jsx(
         "div",
         {
-          ref: ue(i, m),
+          ref: pe(i, w),
           className: d(
-            oe({
+            ie({
               open: e
             }),
             "flex flex-col",
@@ -560,14 +579,14 @@ const $ = c(
       )
     ] });
   }
-), ve = Object.assign(fe, {
-  Header: de,
-  Title: ie,
-  Body: le,
-  Footer: ce
+), Se = Object.assign(be, {
+  Header: me,
+  Title: fe,
+  Body: we,
+  Footer: he
 });
 export {
-  ve as B,
-  be as D,
-  he as M
+  Se as B,
+  Ce as D,
+  Be as M
 };