@pfct/purple 1.5.0 → 1.6.0

package/dist/components/ui/drawer.es.js

@@ -1,8 +1,8 @@
-import { j as z } from "../../chunks/jsx-runtime.Drh4NO5G.js";
-import { O as he, a as ge, b as ve, C as ye, T as be, D as Se, R as Te, P as Re } from "../../chunks/index.FP3Zwkau.js";
+import { j as z } from "../../chunks/jsx-runtime.C63F304d.js";
+import { O as he, a as ge, C as ve, D as ye, T as be, b as Se, R as Te, P as Re } from "../../chunks/index.9yN3bH7k.js";
 import * as De from "react";
 import r, { useMemo as Ee, useLayoutEffect as xe, useEffect as Oe } from "react";
-import { cn as at } from "../../lib/utils.es.js";
+import { cn as ot } from "../../lib/utils.es.js";
 function Ce(t) {
   if (typeof document > "u") return;
   let n = document.head || document.getElementsByTagName("head")[0], e = document.createElement("style");
@@ -55,7 +55,7 @@ const Vt = r.createContext({
   noBodyStyles: !1,
   container: null,
   autoFocus: !1
-}), ft = () => {
+}), mt = () => {
   const t = r.useContext(Vt);
   if (!t)
     throw new Error("useDrawerContext must be used within a Drawer.Root");
@@ -116,13 +116,13 @@ const _e = /* @__PURE__ */ new Set([
   "submit",
   "reset"
 ]);
-let ht = 0, Et;
+let gt = 0, Et;
 function He(t = {}) {
   let { isDisabled: n } = t;
   Ne(() => {
     if (!n)
-      return ht++, ht === 1 && Yt() && (Et = Le()), () => {
-        ht--, ht === 0 && (Et == null || Et());
+      return gt++, gt === 1 && Yt() && (Et = Le()), () => {
+        gt--, gt === 0 && Et?.();
       };
   }, [
     n
@@ -156,16 +156,16 @@ function Le() {
     window.scrollTo(0, 0);
   }, p = window.pageXOffset, T = window.pageYOffset, D = jt(ke(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`));
   window.scrollTo(0, 0);
-  let h = jt(ct(document, "touchstart", e, {
+  let h = jt(dt(document, "touchstart", e, {
     passive: !1,
     capture: !0
-  }), ct(document, "touchmove", o, {
+  }), dt(document, "touchmove", o, {
     passive: !1,
     capture: !0
-  }), ct(document, "touchend", i, {
+  }), dt(document, "touchend", i, {
     passive: !1,
     capture: !0
-  }), ct(document, "focus", a, !0), ct(window, "scroll", v));
+  }), dt(document, "focus", a, !0), dt(window, "scroll", v));
   return () => {
     D(), h(), window.scrollTo(p, T);
   };
@@ -176,7 +176,7 @@ function ke(t, n, e) {
     t.style[n] = o;
   };
 }
-function ct(t, n, e, o) {
+function dt(t, n, e, o) {
   return t.addEventListener(n, e, o), () => {
     t.removeEventListener(n, e, o);
   };
@@ -234,7 +234,7 @@ const C = (t) => {
       return t;
   }
 };
-function gt(t, n) {
+function vt(t, n) {
   if (!t)
     return null;
   const e = window.getComputedStyle(t), o = (
@@ -269,7 +269,7 @@ const x = {
     0,
     1
   ]
-}, Gt = 0.4, ze = 0.25, Ve = 100, Jt = 8, vt = 16, $t = 26, Ot = "vaul-dragging";
+}, Gt = 0.4, ze = 0.25, Ve = 100, Jt = 8, et = 16, $t = 26, Ot = "vaul-dragging";
 function Qt(t) {
   const n = r.useRef(t);
   return r.useEffect(() => {
@@ -311,7 +311,7 @@ function Zt({ prop: t, defaultProp: n, onChange: e = () => {
 function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e, drawerRef: o, overlayRef: i, fadeFromIndex: a, onSnapPointChange: v, direction: p = "bottom", container: T, snapToSequentialPoint: D }) {
   const [h, f] = Zt({
     prop: t,
-    defaultProp: e == null ? void 0 : e[0],
+    defaultProp: e?.[0],
     onChange: n
   }), [m, B] = r.useState(typeof window < "u" ? {
     innerWidth: window.innerWidth,
@@ -326,12 +326,12 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
     }
     return window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
   }, []);
-  const L = r.useMemo(() => h === (e == null ? void 0 : e[e.length - 1]) || null, [
+  const L = r.useMemo(() => h === e?.[e.length - 1] || null, [
     e,
     h
   ]), E = r.useMemo(() => {
     var u;
-    return (u = e == null ? void 0 : e.findIndex((b) => b === h)) != null ? u : null;
+    return (u = e?.findIndex((b) => b === h)) != null ? u : null;
   }, [
     e,
     h
@@ -347,7 +347,7 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
       height: 0
     };
     var b;
-    return (b = e == null ? void 0 : e.map((y) => {
+    return (b = e?.map((y) => {
       const N = typeof y == "string";
       let P = 0;
       if (N && (P = parseInt(y, 10)), C(p)) {
@@ -361,12 +361,12 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
     e,
     m,
     T
-  ]), M = r.useMemo(() => E !== null ? w == null ? void 0 : w[E] : null, [
+  ]), M = r.useMemo(() => E !== null ? w?.[E] : null, [
     w,
     E
   ]), A = r.useCallback((u) => {
     var b;
-    const y = (b = w == null ? void 0 : w.findIndex((N) => N === u)) != null ? b : null;
+    const y = (b = w?.findIndex((N) => N === u)) != null ? b : null;
     v(y), $(o.current, {
       transition: `transform ${x.DURATION}s cubic-bezier(${x.EASE.join(",")})`,
       transform: C(p) ? `translate3d(0, ${u}px, 0)` : `translate3d(${u}px, 0, 0)`
@@ -376,7 +376,7 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
     }) : $(i.current, {
       transition: `opacity ${x.DURATION}s cubic-bezier(${x.EASE.join(",")})`,
       opacity: "1"
-    }), f(e == null ? void 0 : e[Math.max(y, 0)]);
+    }), f(e?.[Math.max(y, 0)]);
   }, [
     o.current,
     e,
@@ -388,7 +388,7 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
   r.useEffect(() => {
     if (h || t) {
       var u;
-      const b = (u = e == null ? void 0 : e.findIndex((y) => y === t || y === h)) != null ? u : -1;
+      const b = (u = e?.findIndex((y) => y === t || y === h)) != null ? u : -1;
       w && b !== -1 && typeof w[b] == "number" && A(w[b]);
     }
   }, [
@@ -411,7 +411,7 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
       A(w[e.length - 1]);
       return;
     }
-    const _ = w == null ? void 0 : w.reduce((I, X) => typeof I != "number" || typeof X != "number" ? I : Math.abs(X - P) < Math.abs(I - P) ? X : I), W = C(p) ? window.innerHeight : window.innerWidth;
+    const _ = w?.reduce((I, X) => typeof I != "number" || typeof X != "number" ? I : Math.abs(X - P) < Math.abs(I - P) ? X : I), W = C(p) ? window.innerHeight : window.innerWidth;
     if (y > Gt && Math.abs(u) < W * 0.4) {
       const I = F ? 1 : -1;
       if (I > 0 && L && e) {
@@ -456,7 +456,7 @@ function qe({ activeSnapPointProp: t, setActiveSnapPointProp: n, snapPoints: e,
 const Xe = () => () => {
 };
 function Ke() {
-  const { direction: t, isOpen: n, shouldScaleBackground: e, setBackgroundColorOnScale: o, noBodyStyles: i } = ft(), a = r.useRef(null), v = Ee(() => document.body.style.backgroundColor, []);
+  const { direction: t, isOpen: n, shouldScaleBackground: e, setBackgroundColorOnScale: o, noBodyStyles: i } = mt(), a = r.useRef(null), v = Ee(() => document.body.style.backgroundColor, []);
   function p() {
     return (window.innerWidth - $t) / window.innerWidth;
   }
@@ -494,11 +494,11 @@ function Ke() {
     v
   ]);
 }
-let dt = null;
+let ft = null;
 function Ge({ isOpen: t, modal: n, nested: e, hasBeenOpened: o, preventScrollRestoration: i, noBodyStyles: a }) {
   const [v, p] = r.useState(() => typeof window < "u" ? window.location.href : ""), T = r.useRef(0), D = r.useCallback(() => {
-    if (Ft() && dt === null && t && !a) {
-      dt = {
+    if (Ft() && ft === null && t && !a) {
+      ft = {
         position: document.body.style.position,
         top: document.body.style.top,
         left: document.body.style.left,
@@ -519,15 +519,15 @@ function Ge({ isOpen: t, modal: n, nested: e, hasBeenOpened: o, preventScrollRes
   }, [
     t
   ]), h = r.useCallback(() => {
-    if (Ft() && dt !== null && !a) {
+    if (Ft() && ft !== null && !a) {
       const f = -parseInt(document.body.style.top, 10), m = -parseInt(document.body.style.left, 10);
-      Object.assign(document.body.style, dt), window.requestAnimationFrame(() => {
+      Object.assign(document.body.style, ft), window.requestAnimationFrame(() => {
         if (i && v !== window.location.href) {
           p(window.location.href);
           return;
         }
         window.scrollTo(m, f);
-      }), dt = null;
+      }), ft = null;
     }
   }, [
     v
@@ -569,21 +569,21 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
     defaultProp: Y,
     prop: t,
     onChange: (l) => {
-      n == null || n(l), !l && !M && se(), setTimeout(() => {
-        N == null || N(l);
+      n?.(l), !l && !M && se(), setTimeout(() => {
+        N?.(l);
       }, x.DURATION * 1e3), l && !U && typeof window < "u" && window.requestAnimationFrame(() => {
         document.body.style.pointerEvents = "auto";
       }), l || (document.body.style.pointerEvents = "auto");
     }
-  }), [I, X] = r.useState(!1), [K, ot] = r.useState(!1), [ne, Mt] = r.useState(!1), et = r.useRef(null), mt = r.useRef(null), yt = r.useRef(null), bt = r.useRef(null), it = r.useRef(null), lt = r.useRef(!1), St = r.useRef(null), Tt = r.useRef(0), nt = r.useRef(!1), Pt = r.useRef(!Y), It = r.useRef(0), d = r.useRef(null), Nt = r.useRef(((s = d.current) == null ? void 0 : s.getBoundingClientRect().height) || 0), _t = r.useRef(((F = d.current) == null ? void 0 : F.getBoundingClientRect().width) || 0), Rt = r.useRef(0), re = r.useCallback((l) => {
-    a && l === st.length - 1 && (mt.current = /* @__PURE__ */ new Date());
-  }, []), { activeSnapPoint: ae, activeSnapPointIndex: rt, setActiveSnapPoint: Ht, onRelease: oe, snapPointsOffset: st, onDrag: ie, shouldFade: Lt, getPercentageDragged: le } = qe({
+  }), [I, X] = r.useState(!1), [K, it] = r.useState(!1), [ne, Mt] = r.useState(!1), nt = r.useRef(null), wt = r.useRef(null), yt = r.useRef(null), bt = r.useRef(null), lt = r.useRef(null), st = r.useRef(!1), St = r.useRef(null), Tt = r.useRef(0), rt = r.useRef(!1), Pt = r.useRef(!Y), It = r.useRef(0), d = r.useRef(null), Nt = r.useRef(((s = d.current) == null ? void 0 : s.getBoundingClientRect().height) || 0), _t = r.useRef(((F = d.current) == null ? void 0 : F.getBoundingClientRect().width) || 0), Rt = r.useRef(0), re = r.useCallback((l) => {
+    a && l === ut.length - 1 && (wt.current = /* @__PURE__ */ new Date());
+  }, []), { activeSnapPoint: ae, activeSnapPointIndex: at, setActiveSnapPoint: Ht, onRelease: oe, snapPointsOffset: ut, onDrag: ie, shouldFade: Lt, getPercentageDragged: le } = qe({
     snapPoints: a,
     activeSnapPointProp: B,
     setActiveSnapPointProp: L,
     drawerRef: d,
     fadeFromIndex: m,
-    overlayRef: et,
+    overlayRef: nt,
     onSnapPointChange: re,
     direction: c,
     container: P,
@@ -600,35 +600,35 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
     preventScrollRestoration: b,
     noBodyStyles: A
   });
-  function wt() {
+  function pt() {
     return (window.innerWidth - $t) / window.innerWidth;
   }
   function ue(l) {
     var S, R;
-    !h && !a || d.current && !d.current.contains(l.target) || (Nt.current = ((S = d.current) == null ? void 0 : S.getBoundingClientRect().height) || 0, _t.current = ((R = d.current) == null ? void 0 : R.getBoundingClientRect().width) || 0, ot(!0), yt.current = /* @__PURE__ */ new Date(), Yt() && window.addEventListener("touchend", () => lt.current = !1, {
+    !h && !a || d.current && !d.current.contains(l.target) || (Nt.current = ((S = d.current) == null ? void 0 : S.getBoundingClientRect().height) || 0, _t.current = ((R = d.current) == null ? void 0 : R.getBoundingClientRect().width) || 0, it(!0), yt.current = /* @__PURE__ */ new Date(), Yt() && window.addEventListener("touchend", () => st.current = !1, {
       once: !0
     }), l.target.setPointerCapture(l.pointerId), Tt.current = C(c) ? l.pageY : l.pageX);
   }
   function kt(l, S) {
     var R;
     let g = l;
-    const O = (R = window.getSelection()) == null ? void 0 : R.toString(), k = d.current ? gt(d.current, c) : null, H = /* @__PURE__ */ new Date();
+    const O = (R = window.getSelection()) == null ? void 0 : R.toString(), k = d.current ? vt(d.current, c) : null, H = /* @__PURE__ */ new Date();
     if (g.tagName === "SELECT" || g.hasAttribute("data-vaul-no-drag") || g.closest("[data-vaul-no-drag]"))
       return !1;
     if (c === "right" || c === "left")
       return !0;
-    if (mt.current && H.getTime() - mt.current.getTime() < 500)
+    if (wt.current && H.getTime() - wt.current.getTime() < 500)
       return !1;
     if (k !== null && (c === "bottom" ? k > 0 : k < 0))
       return !0;
     if (O && O.length > 0)
       return !1;
-    if (it.current && H.getTime() - it.current.getTime() < D && k === 0 || S)
-      return it.current = H, !1;
+    if (lt.current && H.getTime() - lt.current.getTime() < D && k === 0 || S)
+      return lt.current = H, !1;
     for (; g; ) {
       if (g.scrollHeight > g.clientHeight) {
         if (g.scrollTop !== 0)
-          return it.current = /* @__PURE__ */ new Date(), !1;
+          return lt.current = /* @__PURE__ */ new Date(), !1;
         if (g.getAttribute("role") === "dialog")
           return !0;
       }
@@ -639,32 +639,32 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
   function ce(l) {
     if (d.current && K) {
       const S = c === "bottom" || c === "right" ? 1 : -1, R = (Tt.current - (C(c) ? l.pageY : l.pageX)) * S, g = R > 0, O = a && !h && !g;
-      if (O && rt === 0) return;
+      if (O && at === 0) return;
       const k = Math.abs(R), H = document.querySelector("[data-vaul-drawer-wrapper]"), G = c === "bottom" || c === "top" ? Nt.current : _t.current;
       let V = k / G;
       const tt = le(k, g);
-      if (tt !== null && (V = tt), O && V >= 1 || !lt.current && !kt(l.target, g)) return;
-      if (d.current.classList.add(Ot), lt.current = !0, $(d.current, {
+      if (tt !== null && (V = tt), O && V >= 1 || !st.current && !kt(l.target, g)) return;
+      if (d.current.classList.add(Ot), st.current = !0, $(d.current, {
         transition: "none"
-      }), $(et.current, {
+      }), $(nt.current, {
         transition: "none"
       }), a && ie({
         draggedDistance: R
       }), g && !a) {
-        const q = je(R), pt = Math.min(q * -1, 0) * S;
+        const q = je(R), ht = Math.min(q * -1, 0) * S;
         $(d.current, {
-          transform: C(c) ? `translate3d(0, ${pt}px, 0)` : `translate3d(${pt}px, 0, 0)`
+          transform: C(c) ? `translate3d(0, ${ht}px, 0)` : `translate3d(${ht}px, 0, 0)`
         });
         return;
       }
       const J = 1 - V;
-      if ((Lt || m && rt === m - 1) && (o == null || o(l, V), $(et.current, {
+      if ((Lt || m && at === m - 1) && (o?.(l, V), $(nt.current, {
         opacity: `${J}`,
         transition: "none"
-      }, !0)), H && et.current && v) {
-        const q = Math.min(wt() + V * (1 - wt()), 1), pt = 8 - V * 8, Ut = Math.max(0, 14 - V * 14);
+      }, !0)), H && nt.current && v) {
+        const q = Math.min(pt() + V * (1 - pt()), 1), ht = 8 - V * 8, Ut = Math.max(0, 14 - V * 14);
         $(H, {
-          borderRadius: `${pt}px`,
+          borderRadius: `${ht}px`,
           transform: C(c) ? `scale(${q}) translate3d(0, ${Ut}px, 0)` : `scale(${q}) translate3d(${Ut}px, 0, 0)`,
           transition: "none"
         }, !0);
@@ -686,23 +686,23 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
     function S() {
       if (!d.current || !y) return;
       const R = document.activeElement;
-      if (Ct(R) || nt.current) {
+      if (Ct(R) || rt.current) {
         var g;
         const O = ((g = window.visualViewport) == null ? void 0 : g.height) || 0, k = window.innerHeight;
         let H = k - O;
         const G = d.current.getBoundingClientRect().height || 0, V = G > k * 0.8;
         Rt.current || (Rt.current = G);
         const tt = d.current.getBoundingClientRect().top;
-        if (Math.abs(It.current - H) > 60 && (nt.current = !nt.current), a && a.length > 0 && st && rt) {
-          const J = st[rt] || 0;
+        if (Math.abs(It.current - H) > 60 && (rt.current = !rt.current), a && a.length > 0 && ut && at) {
+          const J = ut[at] || 0;
           H += J;
         }
-        if (It.current = H, G > O || nt.current) {
+        if (It.current = H, G > O || rt.current) {
           const J = d.current.getBoundingClientRect().height;
           let q = J;
           J > O && (q = O - (V ? tt : $t)), E ? d.current.style.height = `${J - Math.max(H, 0)}px` : d.current.style.height = `${Math.max(q, O - tt)}px`;
         } else $e() || (d.current.style.height = `${Rt.current}px`);
-        a && a.length > 0 && !nt.current ? d.current.style.bottom = "0px" : d.current.style.bottom = `${Math.max(H, 0)}px`;
+        a && a.length > 0 && !rt.current ? d.current.style.bottom = "0px" : d.current.style.bottom = `${Math.max(H, 0)}px`;
       }
     }
     return (l = window.visualViewport) == null || l.addEventListener("resize", S), () => {
@@ -710,32 +710,32 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
       return (R = window.visualViewport) == null ? void 0 : R.removeEventListener("resize", S);
     };
   }, [
-    rt,
+    at,
     a,
-    st
+    ut
   ]);
-  function ut(l) {
-    de(), w == null || w(), l || W(!1), setTimeout(() => {
+  function ct(l) {
+    de(), w?.(), l || W(!1), setTimeout(() => {
       a && Ht(a[0]);
     }, x.DURATION * 1e3);
   }
   function Bt() {
     if (!d.current) return;
-    const l = document.querySelector("[data-vaul-drawer-wrapper]"), S = gt(d.current, c);
+    const l = document.querySelector("[data-vaul-drawer-wrapper]"), S = vt(d.current, c);
     $(d.current, {
       transform: "translate3d(0, 0, 0)",
       transition: `transform ${x.DURATION}s cubic-bezier(${x.EASE.join(",")})`
-    }), $(et.current, {
+    }), $(nt.current, {
       transition: `opacity ${x.DURATION}s cubic-bezier(${x.EASE.join(",")})`,
       opacity: "1"
     }), v && S && S > 0 && _ && $(l, {
       borderRadius: `${Jt}px`,
       overflow: "hidden",
       ...C(c) ? {
-        transform: `scale(${wt()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+        transform: `scale(${pt()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
         transformOrigin: "top"
       } : {
-        transform: `scale(${wt()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+        transform: `scale(${pt()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
         transformOrigin: "left"
       },
       transitionProperty: "transform, border-radius",
@@ -744,12 +744,12 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
     }, !0);
   }
   function de() {
-    !K || !d.current || (d.current.classList.remove(Ot), lt.current = !1, ot(!1), bt.current = /* @__PURE__ */ new Date());
+    !K || !d.current || (d.current.classList.remove(Ot), st.current = !1, it(!1), bt.current = /* @__PURE__ */ new Date());
   }
   function fe(l) {
     if (!K || !d.current) return;
-    d.current.classList.remove(Ot), lt.current = !1, ot(!1), bt.current = /* @__PURE__ */ new Date();
-    const S = gt(d.current, c);
+    d.current.classList.remove(Ot), st.current = !1, it(!1), bt.current = /* @__PURE__ */ new Date();
+    const S = vt(d.current, c);
     if (!l || !kt(l.target, !1) || !S || Number.isNaN(S) || yt.current === null) return;
     const R = bt.current.getTime() - yt.current.getTime(), g = Tt.current - (C(c) ? l.pageY : l.pageX), O = Math.abs(g) / R;
     if (O > 0.05 && (Mt(!0), setTimeout(() => {
@@ -757,18 +757,18 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
     }, 200)), a) {
       oe({
         draggedDistance: g * (c === "bottom" || c === "right" ? 1 : -1),
-        closeDrawer: ut,
+        closeDrawer: ct,
         velocity: O,
         dismissible: h
-      }), i == null || i(l, !0);
+      }), i?.(l, !0);
       return;
     }
     if (c === "bottom" || c === "right" ? g > 0 : g < 0) {
-      Bt(), i == null || i(l, !0);
+      Bt(), i?.(l, !0);
       return;
     }
     if (O > Gt) {
-      ut(), i == null || i(l, !1);
+      ct(), i?.(l, !1);
       return;
     }
     var k;
@@ -776,25 +776,25 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
     var G;
     const V = Math.min((G = d.current.getBoundingClientRect().width) != null ? G : 0, window.innerWidth), tt = c === "left" || c === "right";
     if (Math.abs(S) >= (tt ? V : H) * T) {
-      ut(), i == null || i(l, !1);
+      ct(), i?.(l, !1);
       return;
     }
-    i == null || i(l, !0), Bt();
+    i?.(l, !0), Bt();
   }
   r.useEffect(() => (_ && ($(document.documentElement, {
     scrollBehavior: "auto"
-  }), mt.current = /* @__PURE__ */ new Date()), () => {
+  }), wt.current = /* @__PURE__ */ new Date()), () => {
     Fe(document.documentElement, "scrollBehavior");
   }), [
     _
   ]);
   function me(l) {
-    const S = l ? (window.innerWidth - vt) / window.innerWidth : 1, R = l ? -16 : 0;
+    const S = l ? (window.innerWidth - et) / window.innerWidth : 1, R = l ? -et : 0;
     St.current && window.clearTimeout(St.current), $(d.current, {
       transition: `transform ${x.DURATION}s cubic-bezier(${x.EASE.join(",")})`,
       transform: C(c) ? `scale(${S}) translate3d(0, ${R}px, 0)` : `scale(${S}) translate3d(${R}px, 0, 0)`
     }), !l && d.current && (St.current = setTimeout(() => {
-      const g = gt(d.current, c);
+      const g = vt(d.current, c);
       $(d.current, {
         transition: "none",
         transform: C(c) ? `translate3d(0, ${g}px, 0)` : `translate3d(${g}px, 0, 0)`
@@ -803,14 +803,14 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
   }
   function we(l, S) {
     if (S < 0) return;
-    const R = (window.innerWidth - vt) / window.innerWidth, g = R + S * (1 - R), O = -16 + S * vt;
+    const R = (window.innerWidth - et) / window.innerWidth, g = R + S * (1 - R), O = -et + S * et;
     $(d.current, {
       transform: C(c) ? `scale(${g}) translate3d(0, ${O}px, 0)` : `scale(${g}) translate3d(${O}px, 0, 0)`,
       transition: "none"
     });
   }
   function pe(l, S) {
-    const R = C(c) ? window.innerHeight : window.innerWidth, g = S ? (R - vt) / R : 1, O = S ? -16 : 0;
+    const R = C(c) ? window.innerHeight : window.innerWidth, g = S ? (R - et) / R : 1, O = S ? -et : 0;
     S && $(d.current, {
       transition: `transform ${x.DURATION}s cubic-bezier(${x.EASE.join(",")})`,
       transform: C(c) ? `scale(${g}) translate3d(0, ${O}px, 0)` : `scale(${g}) translate3d(${O}px, 0, 0)`
@@ -825,7 +825,7 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
   ]), /* @__PURE__ */ r.createElement(Te, {
     defaultOpen: Y,
     onOpenChange: (l) => {
-      !h && !l || (l ? X(!0) : ut(!0), W(l));
+      !h && !l || (l ? X(!0) : ct(!0), W(l));
     },
     open: _
   }, /* @__PURE__ */ r.createElement(Vt.Provider, {
@@ -834,7 +834,7 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
       snapPoints: a,
       setActiveSnapPoint: Ht,
       drawerRef: d,
-      overlayRef: et,
+      overlayRef: nt,
       onOpenChange: n,
       onPress: ue,
       onRelease: fe,
@@ -845,14 +845,14 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
       isOpen: _,
       isDragging: K,
       shouldFade: Lt,
-      closeDrawer: ut,
+      closeDrawer: ct,
       onNestedDrag: we,
       onNestedOpenChange: me,
       onNestedRelease: pe,
-      keyboardIsOpen: nt,
+      keyboardIsOpen: rt,
       modal: U,
-      snapPointsOffset: st,
-      activeSnapPointIndex: rt,
+      snapPointsOffset: ut,
+      activeSnapPointIndex: at,
       direction: c,
       shouldScaleBackground: v,
       setBackgroundColorOnScale: p,
@@ -863,7 +863,7 @@ function Je({ open: t, onOpenChange: n, children: e, onDrag: o, onRelease: i, sn
   }, e));
 }
 const te = /* @__PURE__ */ r.forwardRef(function({ ...t }, n) {
-  const { overlayRef: e, snapPoints: o, onRelease: i, shouldFade: a, isOpen: v, modal: p, shouldAnimate: T } = ft(), D = Xt(n, e), h = o && o.length > 0;
+  const { overlayRef: e, snapPoints: o, onRelease: i, shouldFade: a, isOpen: v, modal: p, shouldAnimate: T } = mt(), D = Xt(n, e), h = o && o.length > 0;
   if (!p)
     return null;
   const f = r.useCallback((m) => i(m), [
@@ -875,13 +875,13 @@ const te = /* @__PURE__ */ r.forwardRef(function({ ...t }, n) {
     "data-vaul-overlay": "",
     "data-vaul-snap-points": v && h ? "true" : "false",
     "data-vaul-snap-points-overlay": v && a ? "true" : "false",
-    "data-vaul-animate": T != null && T.current ? "true" : "false",
+    "data-vaul-animate": T?.current ? "true" : "false",
     ...t
   });
 });
 te.displayName = "Drawer.Overlay";
 const ee = /* @__PURE__ */ r.forwardRef(function({ onPointerDownOutside: t, style: n, onOpenAutoFocus: e, ...o }, i) {
-  const { drawerRef: a, onPress: v, onRelease: p, onDrag: T, keyboardIsOpen: D, snapPointsOffset: h, activeSnapPointIndex: f, modal: m, isOpen: B, direction: L, snapPoints: E, container: U, handleOnly: w, shouldAnimate: M, autoFocus: A } = ft(), [c, Y] = r.useState(!1), Z = Xt(i, a), u = r.useRef(null), b = r.useRef(null), y = r.useRef(!1), N = E && E.length > 0;
+  const { drawerRef: a, onPress: v, onRelease: p, onDrag: T, keyboardIsOpen: D, snapPointsOffset: h, activeSnapPointIndex: f, modal: m, isOpen: B, direction: L, snapPoints: E, container: U, handleOnly: w, shouldAnimate: M, autoFocus: A } = mt(), [c, Y] = r.useState(!1), Z = Xt(i, a), u = r.useRef(null), b = r.useRef(null), y = r.useRef(!1), N = E && E.length > 0;
   Ke();
   const P = (s, F, _ = 0) => {
     if (y.current) return !0;
@@ -910,7 +910,7 @@ const ee = /* @__PURE__ */ r.forwardRef(function({ onPointerDownOutside: t, styl
     "data-vaul-delayed-snap-points": c ? "true" : "false",
     "data-vaul-snap-points": B && N ? "true" : "false",
     "data-vaul-custom-container": U ? "true" : "false",
-    "data-vaul-animate": M != null && M.current ? "true" : "false",
+    "data-vaul-animate": M?.current ? "true" : "false",
     ...o,
     ref: Z,
     style: h && h.length > 0 ? {
@@ -924,10 +924,10 @@ const ee = /* @__PURE__ */ r.forwardRef(function({ onPointerDownOutside: t, styl
       }, v(s));
     },
     onOpenAutoFocus: (s) => {
-      e == null || e(s), A || s.preventDefault();
+      e?.(s), A || s.preventDefault();
     },
     onPointerDownOutside: (s) => {
-      if (t == null || t(s), !m || s.defaultPrevented) {
+      if (t?.(s), !m || s.defaultPrevented) {
         s.preventDefault();
         return;
       }
@@ -960,7 +960,7 @@ const ee = /* @__PURE__ */ r.forwardRef(function({ onPointerDownOutside: t, styl
 });
 ee.displayName = "Drawer.Content";
 const Qe = 250, Ze = 120, tn = /* @__PURE__ */ r.forwardRef(function({ preventCycle: t = !1, children: n, ...e }, o) {
-  const { closeDrawer: i, isDragging: a, snapPoints: v, activeSnapPoint: p, setActiveSnapPoint: T, dismissible: D, handleOnly: h, isOpen: f, onPress: m, onDrag: B } = ft(), L = r.useRef(null), E = r.useRef(!1);
+  const { closeDrawer: i, isDragging: a, snapPoints: v, activeSnapPoint: p, setActiveSnapPoint: T, dismissible: D, handleOnly: h, isOpen: f, onPress: m, onDrag: B } = mt(), L = r.useRef(null), E = r.useRef(!1);
   function U() {
     if (E.current) {
       A();
@@ -1018,7 +1018,7 @@ const Qe = 250, Ze = 120, tn = /* @__PURE__ */ r.forwardRef(function({ preventCy
 });
 tn.displayName = "Drawer.Handle";
 function en(t) {
-  const n = ft(), { container: e = n.container, ...o } = t;
+  const n = mt(), { container: e = n.container, ...o } = t;
   return /* @__PURE__ */ r.createElement(Re, {
     container: e,
     ...o
@@ -1028,11 +1028,11 @@ const Q = {
   Root: Je,
   Content: ee,
   Overlay: te,
-  Trigger: ve,
+  Trigger: Se,
   Portal: en,
-  Close: ye,
+  Close: ve,
   Title: be,
-  Description: Se
+  Description: ye
 };
 function un({ ...t }) {
   return /* @__PURE__ */ z.jsx(Q.Root, { "data-slot": "drawer", ...t });
@@ -1050,11 +1050,11 @@ function rn({ className: t, ...n }) {
   return /* @__PURE__ */ z.jsx(
     Q.Overlay,
     {
-      "data-slot": "drawer-overlay",
-      className: at(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1000 bg-black/50",
+      className: ot(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-1000 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
         t
       ),
+      "data-slot": "drawer-overlay",
       ...n
     }
   );
@@ -1065,8 +1065,7 @@ function fn({ className: t, children: n, ...e }) {
     /* @__PURE__ */ z.jsx(
       Q.Content,
       {
-        "data-slot": "drawer-content",
-        className: at(
+        className: ot(
           "group/drawer-content fixed z-1000 flex h-auto flex-col bg-white",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-0",
@@ -1074,6 +1073,7 @@ function fn({ className: t, children: n, ...e }) {
           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
           t
         ),
+        "data-slot": "drawer-content",
         ...e,
         children: n
       }
@@ -1081,17 +1081,17 @@ function fn({ className: t, children: n, ...e }) {
   ] });
 }
 function mn({ className: t, ...n }) {
-  return /* @__PURE__ */ z.jsx("div", { "data-slot": "drawer-header", className: at("flex flex-col gap-2 p-5", t), ...n });
+  return /* @__PURE__ */ z.jsx("div", { className: ot("flex flex-col gap-2 p-5", t), "data-slot": "drawer-header", ...n });
 }
 function wn({ className: t, ...n }) {
-  return /* @__PURE__ */ z.jsx("div", { "data-slot": "drawer-footer", className: at("mt-auto flex flex-col gap-2 p-5", t), ...n });
+  return /* @__PURE__ */ z.jsx("div", { className: ot("mt-auto flex flex-col gap-2 p-5", t), "data-slot": "drawer-footer", ...n });
 }
 function pn({ className: t, ...n }) {
   return /* @__PURE__ */ z.jsx(
     Q.Title,
     {
+      className: ot("font-semibold text-foreground", t),
       "data-slot": "drawer-title",
-      className: at("text-foreground font-semibold", t),
       ...n
     }
   );
@@ -1100,8 +1100,8 @@ function hn({ className: t, ...n }) {
   return /* @__PURE__ */ z.jsx(
     Q.Description,
     {
+      className: ot("text-muted-foreground text-sm", t),
       "data-slot": "drawer-description",
-      className: at("text-muted-foreground text-sm", t),
       ...n
     }
   );