@konstructio/ui 0.1.4 → 0.1.6

package/dist/components/Sheet/Sheet.js

@@ -1,166 +1,351 @@
 "use client";
-import { a as K, o as V, r as J, s as Q, t as U } from "../../dist-DWopnVS-.js";
-import { t as s } from "../../utils-DnIJruo0.js";
-import { shouldDismissSheet as W } from "./utils/index.js";
-import { useCallback as X, useRef as g, useState as b } from "react";
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { AnimatePresence as A, motion as d, useDragControls as Y, useReducedMotion as Z } from "motion/react";
-var T = {
+import { a as lt, o as ut, r as dt, s as ft, t as ht } from "../../dist-DWopnVS-.js";
+import { t as mt } from "../../chevron-left-B1zWfqll.js";
+import { t as m } from "../../utils-DnIJruo0.js";
+import { SheetStep as pt } from "./components/SheetStep/SheetStep.js";
+import { resolveSheetGesture as gt, shouldSwipeBack as vt } from "./utils/index.js";
+import { useCallback as yt, useEffect as bt, useLayoutEffect as xt, useRef as r, useState as p } from "react";
+import { Fragment as Ce, jsx as a, jsxs as b } from "react/jsx-runtime";
+import { AnimatePresence as ue, animate as u, motion as v, useMotionValue as f, useReducedMotion as kt } from "motion/react";
+var Pe = {
   duration: 0.2,
   ease: "easeOut"
-}, k = {
-  duration: 0.6,
-  ease: [
-    0.4,
-    0,
-    0.2,
-    1
-  ]
-}, u = "100%", w = 0.05, ee = {
-  bounceStiffness: 500,
-  bounceDamping: 40
-}, te = {
-  bounceStiffness: 1e4,
-  bounceDamping: 1e3
-}, ae = {
-  enter: (n) => ({
+}, Me = {
+  type: "spring",
+  stiffness: 380,
+  damping: 38
+}, j = { duration: 0 }, Rt = 0.05, Te = (i) => typeof i == "number" ? i : i.direction, wt = {
+  enter: (i) => ({
     opacity: 0,
-    x: n > 0 ? u : `-${u}`
+    x: Te(i) > 0 ? w : -w
   }),
   center: {
     opacity: 1,
     x: 0
   },
-  exit: (n) => ({
+  exit: (i) => typeof i == "object" && i.instant ? {
     opacity: 0,
-    x: n > 0 ? `-${u}` : u
-  })
-}, ne = ({ isOpen: n, onClose: v, title: C, hideTitle: E = !1, leading: I, position: a = "bottom", step: r = 0, className: P, bodyClassName: O, headerClassName: _, titleClassName: H, theme: F, children: M }) => {
-  const o = Z(), x = Y(), m = g(null), c = g(null), l = g(null), [z, f] = b("auto"), [G, y] = b(!1), [h, j] = b({
-    step: r,
-    direction: 1
-  });
-  h.step !== r && j({
-    step: r,
-    direction: r > h.step ? 1 : -1
+    transition: j
+  } : {
+    opacity: 0,
+    x: Te(i) > 0 ? -w : w
+  }
+}, de = "text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-metal-400", w = 24, Ht = "96px", St = {
+  duration: 0.45,
+  ease: "easeOut"
+}, Ot = (i) => i instanceof Element && i.closest("[data-sheet-grip]") !== null, Nt = ({ isOpen: i, onClose: fe, onBack: W, title: H, hideTitle: De = !1, leading: Xe, position: o = "bottom", expandable: N = !1, step: c = 0, className: _e, bodyClassName: Le, headerClassName: Fe, titleClassName: q, theme: Ge, children: K }) => {
+  const h = kt(), A = r(null), he = r(null), E = r(null), B = r(null), [ze, I] = p("auto"), [Ve, me] = p(!1), [s, $] = p(!1), [je, pe] = p(!1), ge = r(0), C = r(null), J = r(!1), Q = r(!1), P = r(null), S = f(0), d = f("auto"), U = r({
+    step: c,
+    title: H,
+    children: K
+  }), M = r(null), Y = r(!1), ve = r(null), x = r(0), T = r(0), [g, Z] = p(null), [ee, O] = p("idle"), [te, ye] = p(!1), [We, qe] = p(0), ne = r(!1), D = f(0), X = f(0), _ = f(0), L = f(1), F = f(0), G = f(0), z = f(1), ae = f("0px"), re = r(!1), ie = r(null), be = r(0);
+  U.current.step !== c && (M.current = U.current), U.current = {
+    step: c,
+    title: H,
+    children: K
+  }, s && (!i || !N) && ($(!1), d.set("auto"));
+  const [se, Ke] = p({
+    step: c,
+    direction: 1,
+    animated: !0
   });
-  const { direction: S } = h, R = a === "bottom" ? "100%" : "-100%", L = o ? {
+  if (se.step !== c) {
+    const e = !Y.current;
+    Ke({
+      step: c,
+      direction: c > se.step ? 1 : -1,
+      animated: e
+    }), Y.current = !1, ie.current = e && !h && !s ? be.current : null;
+  }
+  const { direction: V, animated: k } = se, ce = o === "bottom" ? 1 : -1, l = h ? j : Me, xe = () => {
+    D.set(0), X.set(0), _.set(0), L.set(1), F.set(0), G.set(0), z.set(1);
+  };
+  bt(() => {
+    Z(null), O("idle"), xe(), s || d.set("auto");
+  }, [c]), xt(() => {
+    x.current = ve.current?.getBoundingClientRect().height ?? 0, g && !s && x.current > T.current && Re(), g && ne.current && (ne.current = !1, O("settling"), Ee(1), qe((e) => e + 1));
+  }, [g]);
+  const ke = o === "bottom" ? "100%" : "-100%", $e = h ? {
     initial: !1,
     animate: { y: 0 }
   } : {
-    initial: { y: R },
+    initial: { y: ke },
     animate: { y: 0 },
-    exit: { y: R }
-  }, $ = a === "bottom" ? {
-    top: w,
-    bottom: 1
-  } : {
-    top: 1,
-    bottom: w
-  }, D = (t) => {
-    t.pointerType === "mouse" && t.button !== 0 || x.start(t);
-  }, q = (t, i) => {
-    W({
-      offset: i.offset.y,
-      velocity: i.velocity.y,
-      panelHeight: m.current?.offsetHeight ?? 0,
-      position: a
-    }) && v();
-  }, N = /* @__PURE__ */ e("div", {
+    exit: { y: ke }
+  }, Re = () => {
+    ae.set(Ht), re.current = !1, ye(!0);
+  }, we = N && !s, Je = (e) => {
+    const t = e.pointerType !== "mouse" || e.button === 0, n = Ot(e.target);
+    J.current = t && (n || we), Q.current = t && !n, P.current = null;
+  }, He = (e) => (P.current === null && (P.current = Math.abs(e.offset.x) > Math.abs(e.offset.y) ? "x" : "y"), P.current), Qe = (e, t) => {
+    if (!J.current || He(t) === "x") return;
+    J.current = !1;
+    const n = A.current?.offsetHeight ?? 0;
+    C.current = {
+      startHeight: n,
+      restHeight: s ? ge.current : n,
+      maxHeight: window.visualViewport?.height ?? window.innerHeight
+    }, d.set(n), pe(!0);
+  }, Ue = (e, t) => {
+    const n = C.current;
+    if (!n) return;
+    const R = t.offset.y * ce;
+    if (!N) {
+      S.set(R >= 0 ? t.offset.y : t.offset.y * Rt);
+      return;
+    }
+    const y = n.startHeight - R;
+    if (y >= n.restHeight) {
+      d.set(Math.min(y, n.maxHeight)), S.set(0);
+      return;
+    }
+    d.set(n.restHeight), S.set((n.restHeight - y) * ce);
+  }, oe = (e, t, n) => {
+    if (u(S, 0, l), t) {
+      u(d, e.maxHeight, {
+        ...l,
+        velocity: n
+      });
+      return;
+    }
+    u(d, e.restHeight, {
+      ...l,
+      velocity: n,
+      onComplete: () => d.set("auto")
+    });
+  }, Ye = (e, t) => {
+    const n = C.current;
+    if (!n) return;
+    C.current = null, pe(!1);
+    const R = gt({
+      offset: t.offset.y,
+      velocity: t.velocity.y,
+      panelHeight: n.startHeight,
+      position: o,
+      expandable: N,
+      isExpanded: s,
+      restHeight: n.restHeight
+    }), y = -t.velocity.y * ce;
+    R === "dismiss" ? (d.set("auto"), fe()) : R === "expand" ? (ge.current = n.restHeight, $(!0), oe(n, !0, y)) : R === "collapse" ? ($(!1), oe(n, !1, y)) : oe(n, s, y);
+  }, Se = !!W && c > 0, le = () => A.current?.offsetWidth || 1, Oe = () => x.current > 0 && !s, Ze = (e) => Q.current && He(e) === "x", Ne = (e) => {
+    const t = M.current, n = t !== null && t.step > 0;
+    return {
+      previewX: -0.3 * le() * (1 - e),
+      previewOpacity: e,
+      titleOutX: w * e,
+      titleOutOpacity: 1 - e,
+      titleInX: (n ? 0 : -36) * e - w * (1 - e),
+      titleInOpacity: e,
+      chevronOpacity: n ? 1 : 1 - e
+    };
+  }, Ae = (e) => {
+    const t = Ne(e);
+    if (D.set(t.previewX), X.set(t.previewOpacity), _.set(t.titleOutX), L.set(t.titleOutOpacity), F.set(t.titleInX), G.set(t.titleInOpacity), z.set(t.chevronOpacity), Oe()) {
+      const n = T.current;
+      I(n + (x.current - n) * e);
+    }
+  }, Ee = (e) => {
+    const t = Ne(e);
+    u(D, t.previewX, l), u(X, t.previewOpacity, l), u(_, t.titleOutX, l), u(L, t.titleOutOpacity, l), u(F, t.titleInX, l), u(G, t.titleInOpacity, l), u(z, t.chevronOpacity, l), Oe() && I(e === 1 ? x.current : T.current);
+  }, Be = () => {
+    Q.current = !1, T.current = he.current?.getBoundingClientRect().height ?? 0, x.current = 0, Ae(0), Z(M.current), O("dragging");
+  }, et = (e) => {
+    Ae(Math.min(e / le(), 1));
+  }, tt = (e) => {
+    const t = vt({
+      offset: e.offset.x,
+      velocity: e.velocity.x,
+      panelWidth: le()
+    });
+    return O("settling"), Ee(t ? 1 : 0), t ? "back" : "stay";
+  }, nt = (e) => {
+    const t = ie.current;
+    ie.current = null, t !== null && e > t && Re();
+  }, at = () => {
+    if (ee !== "idle" || !M.current) {
+      W?.();
+      return;
+    }
+    ne.current = !0, Be();
+  }, rt = () => {
+    Y.current = !0, W?.();
+  }, it = () => {
+    Z(null), O("idle"), xe();
+  }, st = () => {
+    !te || ee === "dragging" || re.current || (re.current = !0, u(ae, "0px", {
+      ...h ? j : St,
+      onComplete: () => ye(!1)
+    }));
+  }, ct = h || !Ve || ee === "dragging" ? j : Me, Ie = /* @__PURE__ */ a("div", {
     "aria-hidden": "true",
     "data-sheet-handle": "",
-    className: s("flex shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing", a === "bottom" ? "pb-2" : "pt-2"),
-    onPointerDown: D,
-    children: /* @__PURE__ */ e("div", { className: "h-1 w-10 rounded-full bg-slate-300 dark:bg-metal-600" })
-  }), B = X((t) => {
-    if (c.current?.disconnect(), c.current = null, l.current !== null && (cancelAnimationFrame(l.current), l.current = null), !t) {
-      y(!1), f("auto");
+    "data-sheet-grip": "",
+    "data-active": je || void 0,
+    className: m("group flex shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing", o === "bottom" ? "pb-2" : "pt-2"),
+    children: /* @__PURE__ */ a("div", { className: m("h-1 w-10 rounded-full transition-colors duration-150", "bg-slate-300 dark:bg-metal-600", "group-data-[active]:bg-slate-400 dark:group-data-[active]:bg-metal-400") })
+  }), ot = yt((e) => {
+    if (he.current = e, E.current?.disconnect(), E.current = null, B.current !== null && (cancelAnimationFrame(B.current), B.current = null), !e) {
+      me(!1), I("auto");
       return;
     }
-    f(t.getBoundingClientRect().height), typeof ResizeObserver < "u" && (c.current = new ResizeObserver(([i]) => {
-      i && f(i.contentRect.height);
-    }), c.current.observe(t)), l.current = requestAnimationFrame(() => {
-      y(!0);
+    const t = (n) => {
+      be.current = n, I(n);
+    };
+    t(e.getBoundingClientRect().height), typeof ResizeObserver < "u" && (E.current = new ResizeObserver(([n]) => {
+      n && t(n.contentRect.height);
+    }), E.current.observe(e)), B.current = requestAnimationFrame(() => {
+      me(!0);
     });
   }, []);
-  return /* @__PURE__ */ e(U, {
-    open: n,
-    onOpenChange: (t) => !t && v(),
-    children: /* @__PURE__ */ e(A, { children: n && /* @__PURE__ */ e(V, {
+  return /* @__PURE__ */ a(ht, {
+    open: i,
+    onOpenChange: (e) => !e && fe(),
+    children: /* @__PURE__ */ a(ue, { children: i && /* @__PURE__ */ a(ut, {
       forceMount: !0,
-      children: /* @__PURE__ */ p("div", {
-        "data-theme": F,
+      children: /* @__PURE__ */ b("div", {
+        "data-theme": Ge,
         className: "contents",
-        children: [/* @__PURE__ */ e(K, {
+        children: [/* @__PURE__ */ a(lt, {
           asChild: !0,
           forceMount: !0,
-          children: /* @__PURE__ */ e(d.div, {
-            className: "fixed inset-0 z-50 bg-black/55",
+          children: /* @__PURE__ */ a(v.div, {
+            className: "fixed inset-0 z-70 bg-black/55",
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             exit: { opacity: 0 },
-            transition: T
+            transition: Pe
           })
-        }), /* @__PURE__ */ e(J, {
+        }), /* @__PURE__ */ a(dt, {
           asChild: !0,
           forceMount: !0,
-          onOpenAutoFocus: (t) => {
-            t.preventDefault(), m.current?.focus();
+          onOpenAutoFocus: (e) => {
+            e.preventDefault(), A.current?.focus();
           },
-          children: /* @__PURE__ */ p(d.div, {
-            ref: m,
+          children: /* @__PURE__ */ b(v.div, {
+            ref: A,
             tabIndex: -1,
-            className: s("konstruct-sheet fixed inset-x-0 z-50 flex max-h-[calc(100dvh-4rem)] flex-col", "bg-white text-slate-800 shadow-xl outline-none", "dark:bg-metal-800 dark:text-metal-50", a === "bottom" ? "bottom-0 rounded-t-lg pt-2 pb-[calc(1rem+env(safe-area-inset-bottom))]" : "top-0 rounded-b-lg pb-2 pt-[calc(1rem+env(safe-area-inset-top))]", P),
-            "data-position": a,
-            "data-step": r,
-            transition: T,
-            drag: "y",
-            dragListener: !1,
-            dragControls: x,
-            dragConstraints: {
-              top: 0,
-              bottom: 0
+            className: m("konstruct-sheet fixed inset-x-0 z-70 flex flex-col", "bg-white text-slate-800 shadow-xl outline-none", "dark:bg-metal-800 dark:text-metal-50", o === "bottom" ? "bottom-0 pb-[calc(1rem+env(safe-area-inset-bottom))]" : "top-0 pt-[calc(1rem+env(safe-area-inset-top))]", s ? "max-h-dvh" : "max-h-[calc(100dvh-4rem)]", o === "bottom" ? "rounded-t-lg" : "rounded-b-lg", o === "bottom" && (s ? "pt-[calc(0.5rem+env(safe-area-inset-top))]" : "pt-2"), o === "top" && (s ? "pb-[calc(0.5rem+env(safe-area-inset-bottom))]" : "pb-2"), _e),
+            "data-position": o,
+            "data-step": c,
+            "data-expanded": s || void 0,
+            style: {
+              y: S,
+              height: d
             },
-            dragElastic: $,
-            dragMomentum: !1,
-            dragTransition: o ? te : ee,
-            onDragEnd: q,
-            ...L,
+            transition: Pe,
+            onPointerDownCapture: Je,
+            onPanStart: Qe,
+            onPan: Ue,
+            onPanEnd: Ye,
+            ...$e,
             children: [
-              a === "bottom" && N,
-              /* @__PURE__ */ p("div", {
-                className: s("flex min-h-9 shrink-0 touch-none items-center gap-2 px-6 pb-2", _, E && "sr-only"),
-                onPointerDown: D,
-                children: [I, /* @__PURE__ */ e(Q, {
-                  className: s("text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-metal-400", H),
-                  children: C
+              o === "bottom" && Ie,
+              /* @__PURE__ */ b("div", {
+                className: m("flex min-h-9 shrink-0 touch-none items-center gap-2 px-6 pb-2", Fe, De && "sr-only"),
+                "data-sheet-grip": "",
+                children: [/* @__PURE__ */ a(ft, {
+                  className: "sr-only",
+                  children: H
+                }), /* @__PURE__ */ a(ue, {
+                  mode: "popLayout",
+                  initial: !1,
+                  custom: {
+                    direction: V,
+                    instant: !k
+                  },
+                  children: /* @__PURE__ */ a(v.div, {
+                    custom: V,
+                    className: "flex min-h-9 items-center gap-2",
+                    variants: !h && k ? wt : void 0,
+                    initial: !h && k ? "enter" : !1,
+                    animate: "center",
+                    exit: !h && k ? "exit" : void 0,
+                    transition: l,
+                    children: Se ? /* @__PURE__ */ a(Ce, { children: /* @__PURE__ */ b("button", {
+                      type: "button",
+                      "data-sheet-back": "",
+                      onClick: at,
+                      className: m("-my-1 -ml-2 flex h-9 items-center gap-2 rounded pr-2 outline-none", "focus-visible:ring-1 focus-visible:ring-aurora-500", "pointer-coarse:active:bg-slate-100 dark:pointer-coarse:active:bg-metal-700"),
+                      children: [/* @__PURE__ */ a(v.span, {
+                        className: "flex size-9 shrink-0 items-center justify-center text-slate-800 dark:text-metal-50",
+                        style: { opacity: z },
+                        children: /* @__PURE__ */ a(mt, {
+                          "aria-hidden": "true",
+                          className: "size-5"
+                        })
+                      }), /* @__PURE__ */ b("span", {
+                        className: "relative flex items-center",
+                        children: [/* @__PURE__ */ a(v.span, {
+                          className: m(de, q),
+                          style: {
+                            x: _,
+                            opacity: L
+                          },
+                          children: H
+                        }), g && /* @__PURE__ */ a(v.span, {
+                          "aria-hidden": "true",
+                          "data-sheet-preview-title": "",
+                          className: m("absolute left-0 whitespace-nowrap", de, q),
+                          style: {
+                            x: F,
+                            opacity: G
+                          },
+                          children: g.title
+                        })]
+                      })]
+                    }) }) : /* @__PURE__ */ b(Ce, { children: [Xe, /* @__PURE__ */ a("span", {
+                      "aria-hidden": "true",
+                      className: m(de, q),
+                      children: H
+                    })] })
+                  }, c)
                 })]
               }),
-              /* @__PURE__ */ e(d.div, {
-                className: s("flex min-h-0 flex-col overflow-y-auto overflow-x-hidden", O),
-                animate: { height: z },
-                transition: o || !G ? { duration: 0 } : k,
-                children: /* @__PURE__ */ e("div", {
-                  ref: B,
+              /* @__PURE__ */ a(v.div, {
+                className: m("flex min-h-0 flex-col overflow-x-hidden", g || te ? "overflow-y-hidden" : "overflow-y-auto", we && "touch-none", te && "[mask-image:linear-gradient(to_bottom,black_calc(100%-var(--sheet-reveal)),transparent)]", s && "flex-1", Le),
+                style: { "--sheet-reveal": ae },
+                animate: { height: s ? "auto" : ze },
+                transition: ct,
+                onAnimationComplete: st,
+                children: /* @__PURE__ */ b("div", {
+                  ref: ot,
                   className: "relative",
-                  children: /* @__PURE__ */ e(A, {
+                  children: [g && /* @__PURE__ */ a(v.div, {
+                    ref: ve,
+                    "aria-hidden": "true",
+                    "data-sheet-preview": "",
+                    className: "pointer-events-none absolute inset-x-0 top-0 flex w-full flex-col",
+                    style: {
+                      x: D,
+                      opacity: X
+                    },
+                    children: g.children
+                  }), /* @__PURE__ */ a(ue, {
                     mode: "popLayout",
                     initial: !1,
-                    custom: S,
-                    children: /* @__PURE__ */ e(d.div, {
-                      custom: S,
-                      className: "flex w-full flex-col",
-                      variants: o ? void 0 : ae,
-                      initial: o ? !1 : "enter",
-                      animate: "center",
-                      exit: o ? void 0 : "exit",
-                      transition: k,
-                      children: M
-                    }, r)
-                  })
+                    custom: {
+                      direction: V,
+                      instant: !k
+                    },
+                    children: /* @__PURE__ */ a(pt, {
+                      step: c,
+                      direction: V,
+                      animated: !h && k,
+                      canSwipeBack: Se,
+                      onMount: nt,
+                      commitSignal: We,
+                      isArmed: Ze,
+                      onBackStart: Be,
+                      onBackMove: et,
+                      onBackEnd: tt,
+                      onBackCommit: rt,
+                      onBackCancel: it,
+                      children: K
+                    }, c)
+                  })]
                 })
               }),
-              a === "top" && N
+              o === "top" && Ie
             ]
           })
         })]
@@ -168,7 +353,7 @@ var T = {
     }) })
   });
 };
-ne.displayName = "KonstructSheet";
+Nt.displayName = "KonstructSheet";
 export {
-  ne as Sheet
+  Nt as Sheet
 };

package/dist/components/Sheet/components/SheetStep/SheetStep.js

@@ -0,0 +1,94 @@
+"use client";
+import { t as C } from "../../../../utils-DnIJruo0.js";
+import { useEffect as O, useLayoutEffect as L, useRef as c } from "react";
+import { jsx as j } from "react/jsx-runtime";
+import { animate as y, motion as G, useMotionValue as M } from "motion/react";
+var h = "100%", u = {
+  type: "spring",
+  stiffness: 380,
+  damping: 38
+}, E = { duration: 0 }, V = 0.05, l = (t) => typeof t == "number" ? t : t.direction, P = "-30%", W = {
+  enter: (t) => l(t) > 0 ? {
+    x: h,
+    opacity: 1,
+    zIndex: 1
+  } : {
+    x: P,
+    opacity: 1,
+    zIndex: 0
+  },
+  center: (t) => ({
+    x: 0,
+    opacity: 1,
+    zIndex: l(t) > 0 ? 1 : 0
+  }),
+  exit: (t) => typeof t == "object" && t.instant ? {
+    opacity: 0,
+    transition: E
+  } : l(t) > 0 ? {
+    x: P,
+    opacity: 1,
+    zIndex: 0
+  } : {
+    x: h,
+    opacity: 1,
+    zIndex: 1
+  }
+}, D = ({ step: t, direction: R, animated: s, canSwipeBack: r, onMount: I, commitSignal: f, isArmed: S, onBackStart: m, onBackMove: A, onBackEnd: T, onBackCommit: g, onBackCancel: N, children: _ }) => {
+  const n = M(0), a = c(null), o = c(!1), d = c(f);
+  L(() => {
+    I(a.current?.getBoundingClientRect().height ?? 0);
+  }, []);
+  const x = () => {
+    const i = n.get();
+    if (typeof i == "string") {
+      const e = a.current?.offsetWidth ?? 0;
+      n.set(parseFloat(i) / 100 * e || 0);
+    }
+  }, p = () => {
+    n.stop(), x(), y(n, a.current?.offsetWidth ?? 0, {
+      ...u,
+      onComplete: g
+    });
+  };
+  O(() => {
+    d.current !== f && (d.current = f, p());
+  }, [f]);
+  const b = (i, e) => {
+    o.current = r && S(e), o.current && (n.stop(), x(), m());
+  }, z = (i, e) => {
+    if (!o.current) return;
+    const v = e.offset.x >= 0 ? e.offset.x : e.offset.x * V;
+    n.set(v), A(Math.max(v, 0));
+  }, F = (i, e) => {
+    if (o.current) {
+      if (o.current = !1, T(e) === "back") {
+        p();
+        return;
+      }
+      y(n, 0, {
+        ...u,
+        onComplete: N
+      });
+    }
+  };
+  return /* @__PURE__ */ j(G.div, {
+    ref: a,
+    custom: R,
+    className: C("relative flex w-full flex-col bg-white dark:bg-metal-800", r && "touch-pan-y"),
+    style: { x: n },
+    variants: s ? W : void 0,
+    initial: s ? "enter" : !1,
+    animate: "center",
+    exit: s ? "exit" : void 0,
+    transition: s ? u : E,
+    onPanStart: r ? b : void 0,
+    onPan: r ? z : void 0,
+    onPanEnd: r ? F : void 0,
+    children: _
+  }, t);
+};
+D.displayName = "KonstructSheetStep";
+export {
+  D as SheetStep
+};

package/dist/components/Sheet/components/index.js

@@ -0,0 +1,4 @@
+import { SheetStep as t } from "./SheetStep/SheetStep.js";
+export {
+  t as SheetStep
+};

package/dist/components/Sheet/utils/index.js

@@ -1,10 +1,37 @@
-var I = 0.25, i = 500;
-function c({ offset: e, velocity: n, panelHeight: o, position: S }) {
-  const s = S === "bottom" ? 1 : -1, t = e * s, r = n * s;
-  return t <= 0 ? !1 : t > o * 0.25 || r > 500;
+var c = 0.25, f = 500;
+function r({ offset: n, velocity: e, position: t }) {
+  const s = t === "bottom" ? 1 : -1;
+  return {
+    distance: n * s,
+    speed: e * s
+  };
+}
+function i(n, e, t) {
+  return n > t * 0.25 || e > 500;
+}
+function u(n) {
+  const { distance: e, speed: t } = r(n);
+  return e <= 0 ? !1 : i(e, t, n.panelHeight);
+}
+function d(n) {
+  const { distance: e, speed: t } = r(n);
+  return e >= 0 ? !1 : i(-e, -t, n.panelHeight);
+}
+function l({ offset: n, velocity: e, panelWidth: t }) {
+  return n <= 0 ? !1 : i(n, e, t);
+}
+function p({ expandable: n, isExpanded: e, restHeight: t = 0, ...s }) {
+  if (n && !e && d(s)) return "expand";
+  if (!u(s)) return "rest";
+  if (!e) return "dismiss";
+  const { distance: o } = r(s), a = o - (s.panelHeight - t) > t * c;
+  return t > 0 && a ? "dismiss" : "collapse";
 }
 export {
-  I as DISMISS_DISTANCE_RATIO,
-  i as DISMISS_VELOCITY,
-  c as shouldDismissSheet
+  c as DISMISS_DISTANCE_RATIO,
+  f as DISMISS_VELOCITY,
+  p as resolveSheetGesture,
+  u as shouldDismissSheet,
+  d as shouldExpandSheet,
+  l as shouldSwipeBack
 };

package/dist/lib/components/Button/Button.types.d.ts

@@ -19,6 +19,8 @@ export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'di
     asChild?: boolean;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /** Sink the button while pressed on touch screens (default: true) */
+    pressEffect?: boolean;
     /** Theme override for this component */
     theme?: Theme;
 }

package/dist/lib/components/Button/Button.variants.d.ts

@@ -1,4 +1,5 @@
 export declare const buttonVariants: (props?: ({
+    pressEffect?: boolean | null | undefined;
     variant?: "link" | "danger" | "primary" | "secondary" | "tertiary" | null | undefined;
     shape?: "circle" | "pill" | null | undefined;
     version?: "default" | "alternate" | null | undefined;