@dimasbaguspm/versaur 0.0.17 → 0.0.19

package/dist/js/{bottom-sheet-CHRSxXRE.js → bottom-sheet-BRv-oJL-.js}

@@ -1,15 +1,15 @@
-import { a as d, j as s, c as u } from "./index-C1uJQB34.js";
-import p, { createContext as y, useContext as k, forwardRef as m, useCallback as D, useEffect as v, useId as E, useRef as h } from "react";
-const j = y(null);
-function w() {
-  const t = k(j);
+import { c as d, j as s, a as u } from "./index-DOdDlCoL.js";
+import y, { createContext as E, useContext as D, forwardRef as f, useCallback as M, useEffect as b, useId as z, useRef as w, useState as V } from "react";
+const N = E(null);
+function g() {
+  const t = D(N);
   if (!t)
     throw new Error(
       "Drawer components must be used within a DrawerRoot component"
     );
   return t;
 }
-const N = d(
+const R = d(
   "fixed inset-0 z-50 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md",
   {
     variants: {
@@ -22,7 +22,7 @@ const N = d(
       state: "closed"
     }
   }
-), z = d("fixed z-50 shadow-xl flex flex-col", {
+), S = d("fixed z-50 shadow-xl flex flex-col", {
   variants: {
     position: {
       left: "left-0 top-0 bottom-0 border-r",
@@ -66,7 +66,7 @@ const N = d(
     variant: "default",
     tab: !1
   }
-}), S = d("flex-1 overflow-y-auto px-6 py-4", {
+}), F = d("flex-1 overflow-y-auto px-6 py-4", {
   variants: {
     variant: {
       default: "bg-white",
@@ -76,7 +76,7 @@ const N = d(
   defaultVariants: {
     variant: "default"
   }
-}), M = d("flex-shrink-0 px-6 py-4 border-t", {
+}), I = d("flex-shrink-0 px-6 py-4 border-t", {
   variants: {
     variant: {
       default: "bg-white border-border",
@@ -91,100 +91,100 @@ const N = d(
     variant: "default",
     responsiveFlex: !0
   }
-}), R = p.forwardRef(({ className: t, ...e }, r) => {
-  const { isOpen: n, onClose: o } = w(), a = () => {
+}), T = y.forwardRef(({ className: t, ...e }, n) => {
+  const { isOpen: r, onClose: o } = g(), a = () => {
     o();
   };
   return /* @__PURE__ */ s.jsx(
     "div",
     {
-      ref: r,
+      ref: n,
       onClick: a,
       className: u(
-        N({
-          state: n ? "open" : "closed"
+        R({
+          state: r ? "open" : "closed"
         }),
         t
       ),
       ...e
     }
   );
-}), F = p.forwardRef(
-  ({ children: t, className: e, hasTab: r, ...n }, o) => {
-    const { variant: a } = w();
+}), L = y.forwardRef(
+  ({ children: t, className: e, hasTab: n, ...r }, o) => {
+    const { variant: a } = g();
     return /* @__PURE__ */ s.jsx(
       "div",
       {
         ref: o,
         className: u(
-          C({ variant: a, tab: !!r }),
+          C({ variant: a, tab: !!n }),
           e
         ),
-        ...n,
+        ...r,
         children: t
       }
     );
   }
-), I = m(
-  ({ children: t, className: e, ...r }, n) => /* @__PURE__ */ s.jsx("div", { ref: n, className: u("[&>div]:px-6", e), ...r, children: t })
-), L = p.forwardRef(
-  ({ children: t, className: e, ...r }, n) => {
-    const { variant: o } = w();
+), A = f(
+  ({ children: t, className: e, ...n }, r) => /* @__PURE__ */ s.jsx("div", { ref: r, className: u("[&>div]:px-6", e), ...n, children: t })
+), H = y.forwardRef(
+  ({ children: t, className: e, ...n }, r) => {
+    const { variant: o } = g();
     return /* @__PURE__ */ s.jsx(
       "div",
       {
-        ref: n,
-        className: u(S({ variant: o }), e),
-        ...r,
+        ref: r,
+        className: u(F({ variant: o }), e),
+        ...n,
         children: t
       }
     );
   }
-), H = p.forwardRef(
-  ({ children: t, className: e, responsiveFlex: r = !0, ...n }, o) => {
-    const { variant: a } = w();
+), q = y.forwardRef(
+  ({ children: t, className: e, responsiveFlex: n = !0, ...r }, o) => {
+    const { variant: a } = g();
     return /* @__PURE__ */ s.jsx(
       "div",
       {
         ref: o,
         className: u(
-          M({ variant: a, responsiveFlex: r }),
+          I({ variant: a, responsiveFlex: n }),
           e
         ),
-        ...n,
+        ...r,
         children: t
       }
     );
   }
-), T = ({
+), K = ({
   children: t,
   isOpen: e,
-  onClose: r,
-  position: n = "right",
+  onClose: n,
+  position: r = "right",
   size: o = "md",
   variant: a = "default",
   transitionType: i = "slide",
   className: l,
-  ...b
+  ...x
 }) => {
-  const c = D(() => {
-    r(!1);
-  }, [r]), x = {
+  const c = M(() => {
+    n(!1);
+  }, [n]), v = {
     isOpen: e,
     onClose: c,
-    position: n,
+    position: r,
     size: o,
     variant: a,
     transitionType: i
   };
-  return v(() => {
-    const f = (B) => {
-      B.key === "Escape" && e && c();
+  return b(() => {
+    const m = (p) => {
+      p.key === "Escape" && e && c();
     };
-    return e && (document.addEventListener("keydown", f), document.body.style.overflow = "hidden"), () => {
-      document.removeEventListener("keydown", f), document.body.style.overflow = "unset";
+    return e && (document.addEventListener("keydown", m), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", m), document.body.style.overflow = "unset";
     };
-  }, [e, c]), /* @__PURE__ */ s.jsx(j.Provider, { value: x, children: /* @__PURE__ */ s.jsxs(
+  }, [e, c]), /* @__PURE__ */ s.jsx(N.Provider, { value: v, children: /* @__PURE__ */ s.jsxs(
     "div",
     {
       className: u(
@@ -192,46 +192,46 @@ const N = d(
         e && "pointer-events-auto"
       ),
       children: [
-        /* @__PURE__ */ s.jsx(R, {}),
+        /* @__PURE__ */ s.jsx(T, {}),
         /* @__PURE__ */ s.jsx(
           "div",
           {
             role: e ? "dialog" : void 0,
             "aria-modal": e ? "true" : void 0,
             className: u(
-              z({
-                position: n,
+              S({
+                position: r,
                 size: o,
                 variant: a,
                 transitionType: i
               }),
               i === "slide" ? [
-                !e && n === "left" && "-translate-x-full",
-                !e && n === "right" && "translate-x-full"
+                !e && r === "left" && "-translate-x-full",
+                !e && r === "right" && "translate-x-full"
               ] : [
                 "left-0 right-0 top-0 bottom-0",
                 e ? "opacity-100" : "opacity-0 pointer-events-none"
               ],
               l
             ),
-            ...b,
+            ...x,
             children: e && t
           }
         )
       ]
     }
   ) });
-}, se = Object.assign(T, {
-  Header: F,
-  Tab: I,
-  Body: L,
-  Footer: H
-}), V = y(null), g = () => {
-  const t = k(V);
+}, ye = Object.assign(K, {
+  Header: L,
+  Tab: A,
+  Body: H,
+  Footer: q
+}), B = E(null), k = () => {
+  const t = D(B);
   if (!t)
     throw new Error("useMenuContext must be used within a Menu component");
   return t;
-}, A = d(
+}, _ = d(
   "z-30 min-w-40 bg-background text-black rounded-lg border border-border",
   {
     variants: {
@@ -249,7 +249,7 @@ const N = d(
       size: "md"
     }
   }
-), q = d(
+), $ = d(
   "w-full text-left px-4 rounded-sm cursor-pointer transition-colors duration-150 select-none hover:bg-background-light outline-none border border-transparent focus-visible:border-primary-light disabled:opacity-50 disabled:cursor-not-allowed",
   {
     variants: {
@@ -262,43 +262,43 @@ const N = d(
       size: "md"
     }
   }
-), K = m(
-  ({ children: t, ...e }, r) => {
-    const { open: n, triggerRef: o } = g();
+), P = f(
+  ({ children: t, ...e }, n) => {
+    const { open: r, triggerRef: o } = k();
     return /* @__PURE__ */ s.jsx(
       "span",
       {
         ref: (a) => {
-          o.current = a, typeof r == "function" ? r(a) : r && (r.current = a);
+          o.current = a, typeof n == "function" ? n(a) : n && (n.current = a);
         },
         "aria-haspopup": "menu",
-        "aria-expanded": n,
+        "aria-expanded": r,
         "aria-controls": "menu-content",
         ...e,
         children: t
       }
     );
   }
-), P = m(
-  ({ children: t, className: e, ...r }, n) => {
-    const { open: o, contentRef: a, triggerRef: i, size: l } = g(), b = E();
-    let c = 0, x = 0;
+), U = f(
+  ({ children: t, className: e, ...n }, r) => {
+    const { open: o, contentRef: a, triggerRef: i, size: l } = k(), x = z();
+    let c = 0, v = 0;
     if (i.current) {
-      const f = i.current.getBoundingClientRect();
-      c = f.bottom + window.scrollY + 4, x = f.left + window.scrollX;
+      const m = i.current.getBoundingClientRect();
+      c = m.bottom + window.scrollY + 4, v = m.left + window.scrollX;
     }
     return /* @__PURE__ */ s.jsx(
       "div",
       {
-        ref: (f) => {
-          a.current = f, typeof n == "function" ? n(f) : n && (n.current = f);
+        ref: (m) => {
+          a.current = m, typeof r == "function" ? r(m) : r && (r.current = m);
         },
-        id: `menu-content-${b}`,
+        id: `menu-content-${x}`,
         role: "menu",
         tabIndex: -1,
         "aria-hidden": !o,
         className: u(
-          A({
+          _({
             size: l
           }),
           "absolute z-50 transition-opacity duration-150 ease-out",
@@ -308,16 +308,16 @@ const N = d(
         style: {
           minWidth: i.current?.offsetWidth,
           top: c,
-          left: x
+          left: v
         },
-        ...r,
+        ...n,
         children: o && t
       }
     );
   }
-), W = m(
-  ({ children: t, disabled: e, className: r, ...n }, o) => {
-    const { size: a } = g();
+), W = f(
+  ({ children: t, disabled: e, className: n, ...r }, o) => {
+    const { size: a } = k();
     return /* @__PURE__ */ s.jsx(
       "button",
       {
@@ -327,66 +327,210 @@ const N = d(
         disabled: e,
         "aria-disabled": e,
         className: u(
-          q({
+          $({
             size: a
           }),
-          r
+          n
         ),
-        ...n,
+        ...r,
         children: t
       }
     );
   }
 );
-function _(t, e, r, n) {
-  v(() => {
+function X(t, e, n, r) {
+  b(() => {
     if (!t) return;
     function o(a) {
-      !e.current?.contains(a.target) && !r.current?.contains(a.target) && n();
+      !e.current?.contains(a.target) && !n.current?.contains(a.target) && r();
     }
     return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
-  }, [t, n, e, r]);
+  }, [t, r, e, n]);
 }
-function U(t, e) {
-  v(() => {
+function Y(t, e) {
+  b(() => {
     if (t && e.current) {
-      const r = e.current.querySelectorAll('[role="menuitem"]');
-      r.length && r[0].focus();
+      const n = e.current.querySelectorAll('[role="menuitem"]');
+      n.length && n[0].focus();
     }
   }, [t, e]);
 }
-function X(t, e, r, n) {
-  v(() => {
+function G(t, e, n, r) {
+  b(() => {
     if (!t || !e.current) return;
     const o = e.current;
     function a(i) {
       const l = Array.from(
         o.querySelectorAll('[role="menuitem"]')
-      ), b = document.activeElement, c = l.indexOf(b);
-      i.key === "ArrowDown" ? (i.preventDefault(), l.length && l[(c + 1) % l.length].focus()) : i.key === "ArrowUp" ? (i.preventDefault(), l.length && l[(c - 1 + l.length) % l.length].focus()) : i.key === "Home" ? (i.preventDefault(), l.length && l[0].focus()) : i.key === "End" ? (i.preventDefault(), l.length && l[l.length - 1].focus()) : i.key === "Escape" && (i.preventDefault(), n(), r.current?.focus());
+      ), x = document.activeElement, c = l.indexOf(x);
+      i.key === "ArrowDown" ? (i.preventDefault(), l.length && l[(c + 1) % l.length].focus()) : i.key === "ArrowUp" ? (i.preventDefault(), l.length && l[(c - 1 + l.length) % l.length].focus()) : i.key === "Home" ? (i.preventDefault(), l.length && l[0].focus()) : i.key === "End" ? (i.preventDefault(), l.length && l[l.length - 1].focus()) : i.key === "Escape" && (i.preventDefault(), r(), n.current?.focus());
     }
     return o.addEventListener("keydown", a), () => o.removeEventListener("keydown", a);
-  }, [t, n, e, r]);
+  }, [t, r, e, n]);
 }
-const Y = ({
+const J = ({
   children: t,
   isOpen: e,
-  onOutsideClick: r,
-  size: n = "md"
+  onOutsideClick: n,
+  size: r = "md"
 }) => {
-  const o = h(null), a = h(null);
-  return _(e, a, o, r), U(e, a), X(e, a, o, r), /* @__PURE__ */ s.jsx(
-    V.Provider,
+  const o = w(null), a = w(null);
+  return X(e, a, o, n), Y(e, a), G(e, a, o, n), /* @__PURE__ */ s.jsx(
+    B.Provider,
     {
-      value: { open: e, triggerRef: o, contentRef: a, size: n },
+      value: { open: e, triggerRef: o, contentRef: a, size: r },
       children: t
     }
   );
-}, ie = Object.assign(Y, {
-  Trigger: K,
-  Content: P,
+}, ge = Object.assign(J, {
+  Trigger: P,
+  Content: U,
   Item: W
-}), $ = d(
+}), Q = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      className: u("px-6 pt-6 pb-2 text-lg font-semibold", t),
+      ...e
+    }
+  )
+), Z = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      className: u("px-6 py-4  flex justify-end gap-2", t),
+      ...e
+    }
+  )
+), O = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx("div", { ref: n, className: u("px-6 py-2", t), ...e })
+), ee = f(
+  ({ onOverlayClick: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      role: "presentation",
+      tabIndex: -1,
+      "aria-modal": "true",
+      onClick: t,
+      ...e
+    }
+  )
+), te = d(
+  "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: {
+      placement: {
+        top: "items-start",
+        center: "items-center"
+      }
+    },
+    defaultVariants: {
+      placement: "center"
+    }
+  }
+), ne = d(
+  [
+    "bg-white rounded-lg shadow-xl relative",
+    "flex flex-col",
+    "outline-none",
+    "mx-4",
+    "transition-all duration-200 ease-in-out "
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[20rem] max-w-sm",
+        // 20rem, 320px
+        md: "w-[28rem] max-w-md",
+        // 28rem, 448px
+        lg: "w-[36rem] max-w-lg",
+        // 36rem, 576px
+        "fit-content": "w-fit max-w-full"
+        // Fit content, no max width
+      },
+      placement: {
+        top: "mt-4",
+        center: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      placement: "center"
+    }
+  }
+);
+function re(t, e) {
+  b(() => {
+    if (e && t.current) {
+      const n = t.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      n.length && n[0].focus();
+    }
+  }, [e, t]);
+}
+function oe(t, e) {
+  b(() => {
+    if (!t) return;
+    const n = (r) => {
+      r.key === "Escape" && e();
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [t, e]);
+}
+const ae = 200, se = ({
+  isOpen: t,
+  onOpenChange: e,
+  size: n = "md",
+  placement: r = "center",
+  children: o,
+  disableOverlayClose: a,
+  disableEscClose: i,
+  ...l
+}) => {
+  const x = w(null), c = w(null), [v, m] = V(t), [p, h] = V(!1);
+  return b(() => {
+    if (t)
+      m(!0), h(!1), x.current = document.activeElement;
+    else if (v) {
+      h(!0);
+      const j = setTimeout(() => {
+        m(!1), h(!1), x.current && x.current.focus();
+      }, ae);
+      return () => clearTimeout(j);
+    }
+  }, [t]), oe(t && !i, () => {
+    e && e(!1);
+  }), re(c, t), /* @__PURE__ */ s.jsx(
+    ee,
+    {
+      ref: c,
+      className: `${te({ placement: r })} transition-opacity duration-200 ease-in-out ` + (t && !p ? "opacity-100" : "opacity-0 pointer-events-none"),
+      onOverlayClick: (j) => {
+        j.target === c.current && !a && e && e(!1);
+      },
+      placement: r,
+      children: /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          className: `${ne({ size: n, placement: r })} transition-all duration-200 ease-in-out ` + (t && !p ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+          role: "dialog",
+          ...l,
+          tabIndex: 0,
+          "aria-hidden": !t,
+          children: o
+        }
+      )
+    }
+  );
+}, he = Object.assign(se, {
+  Header: Q,
+  Body: O,
+  Footer: Z
+}), ie = d(
   [
     "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"
@@ -402,7 +546,7 @@ const Y = ({
       open: !1
     }
   }
-), G = d(
+), le = d(
   ["fixed inset-0 z-40 duration-300"],
   {
     variants: {
@@ -415,56 +559,56 @@ const Y = ({
       open: !1
     }
   }
-), J = d("px-4 pt-4 pb-2"), Q = d("px-4 py-2"), Z = d("px-4 pt-2 pb-4"), O = m(function({ className: e, ...r }, n) {
+), de = d("px-4 pt-4 pb-2"), ce = d("px-4 py-2"), ue = d("px-4 pt-2 pb-4"), fe = f(function({ className: e, ...n }, r) {
   return /* @__PURE__ */ s.jsx(
     "h2",
     {
-      ref: n,
+      ref: r,
       className: ["text-lg font-semibold text-foreground", e].filter(Boolean).join(" "),
-      ...r
+      ...n
     }
   );
-}), ee = m(({ className: t, ...e }, r) => /* @__PURE__ */ s.jsx(
+}), me = f(({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
   "div",
   {
-    ref: r,
-    className: J({ className: t }),
+    ref: n,
+    className: de({ className: t }),
     ...e
   }
-)), te = m(
-  ({ className: t, ...e }, r) => /* @__PURE__ */ s.jsx(
+)), xe = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
     "div",
     {
-      ref: r,
-      className: Q({ className: t }),
+      ref: n,
+      className: ce({ className: t }),
       ...e
     }
   )
-), re = m(({ className: t, ...e }, r) => /* @__PURE__ */ s.jsx(
+), be = f(({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
   "div",
   {
-    ref: r,
-    className: Z({ className: t }),
+    ref: n,
+    className: ue({ className: t }),
     ...e
   }
-)), ne = m(
-  ({ isOpen: t, children: e, className: r, onClose: n, ...o }, a) => {
-    v(() => {
-      const l = (b) => {
-        b.key === "Escape" && t && n();
+)), ve = f(
+  ({ isOpen: t, children: e, className: n, onClose: r, ...o }, a) => {
+    b(() => {
+      const l = (x) => {
+        x.key === "Escape" && t && r();
       };
       return t && (document.addEventListener("keydown", l), document.body.style.overflow = "hidden"), () => {
         document.removeEventListener("keydown", l), document.body.style.overflow = "unset";
       };
-    }, [t, n]);
+    }, [t, r]);
     const i = () => {
-      n?.();
+      r?.();
     };
     return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
       /* @__PURE__ */ s.jsx(
         "div",
         {
-          className: G({ open: t }),
+          className: le({ open: t }),
           "aria-hidden": "true",
           onClick: i
         }
@@ -474,10 +618,10 @@ const Y = ({
         {
           ref: a,
           className: u(
-            $({
+            ie({
               open: t
             }),
-            r
+            n
           ),
           role: "dialog",
           "aria-modal": "true",
@@ -488,14 +632,15 @@ const Y = ({
       )
     ] });
   }
-), le = Object.assign(ne, {
-  Header: ee,
-  Title: O,
-  Body: te,
-  Footer: re
+), je = Object.assign(ve, {
+  Header: me,
+  Title: fe,
+  Body: xe,
+  Footer: be
 });
 export {
-  le as B,
-  se as D,
-  ie as M
+  je as B,
+  ye as D,
+  ge as M,
+  he as a
 };