@syscore/ui-library 1.16.0 → 1.18.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, useEffect, useCallback, useRef, createContext, useMemo, useContext } from "react";
+import React__default, { useState, useEffect, useCallback, useRef, createContext, useMemo, useLayoutEffect, useContext } from "react";
 import { motion, AnimatePresence, useMotionValue, animate } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -12410,10 +12410,7 @@ const MobileNavPanel = ({ className, children }) => {
     return (nav == null ? void 0 : nav.offsetHeight) ?? 0;
   };
   const getAvailableHeight = () => {
-    var _a;
-    const parent = (_a = panelRef.current) == null ? void 0 : _a.parentElement;
-    const container = (parent == null ? void 0 : parent.clientHeight) ?? window.innerHeight;
-    return container - getNavBarHeight();
+    return window.innerHeight - getNavBarHeight();
   };
   const measureContentHeight = () => {
     const content = contentRef.current;
@@ -12432,91 +12429,122 @@ const MobileNavPanel = ({ className, children }) => {
     });
     stopAnimation.current = () => controls.stop();
   };
-  useEffect(() => {
-    let cancelled = false;
+  useLayoutEffect(() => {
     if (open) {
       stateRef.current = "initial";
-      requestAnimationFrame(() => {
-        if (cancelled) return;
-        const h = measureContentHeight();
-        cachedInitialHeight.current = h;
-        springTo(h);
-      });
+      const h = measureContentHeight();
+      cachedInitialHeight.current = h;
+      springTo(h);
     } else {
       stateRef.current = "closed";
       cachedInitialHeight.current = 0;
       springTo(0);
     }
-    return () => {
-      cancelled = true;
-    };
   }, [open]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const h = measureContentHeight();
+    cachedInitialHeight.current = h;
+    if (stateRef.current !== "full") {
+      stateRef.current = "initial";
+      springTo(h);
+    }
+  }, [activeKey]);
   useEffect(() => {
     if (!open) return;
-    let cancelled = false;
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        if (cancelled) return;
-        const h = measureContentHeight();
-        cachedInitialHeight.current = h;
-        if (stateRef.current === "initial" || stateRef.current === "closed") {
-          stateRef.current = "initial";
-          springTo(h);
-        }
-      });
-    });
-    return () => {
-      cancelled = true;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") close();
     };
-  }, [activeKey]);
-  const dragDirection = useRef(null);
-  const handlePanStart = () => {
-    dragDirection.current = null;
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, close]);
+  const isDragging = useRef(false);
+  const lastY = useRef(0);
+  const dragStartY = useRef(0);
+  const dragStartTime = useRef(0);
+  const dragMaxHeight = useRef(0);
+  const handlePointerDown = (e) => {
+    var _a;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    (_a = stopAnimation.current) == null ? void 0 : _a.call(stopAnimation);
+    isDragging.current = true;
+    lastY.current = e.clientY;
+    dragStartY.current = e.clientY;
+    dragStartTime.current = Date.now();
+    dragMaxHeight.current = getAvailableHeight();
   };
-  const handlePan = (_, info) => {
-    dragDirection.current = info.offset.y < 0 ? "up" : "down";
+  const handlePointerMove = (e) => {
+    if (!isDragging.current) return;
+    const dy = e.clientY - lastY.current;
+    lastY.current = e.clientY;
+    const current = heightMV.get();
+    const next = Math.max(0, current - dy);
+    heightMV.set(Math.min(next, dragMaxHeight.current));
   };
-  const handlePanEnd = () => {
-    const dir = dragDirection.current;
-    if (!dir) return;
-    if (dir === "up") {
-      if (stateRef.current === "initial") {
-        stateRef.current = "full";
-        springTo(getAvailableHeight());
-      }
-    } else {
+  const handlePointerUp = (e) => {
+    if (!isDragging.current) return;
+    isDragging.current = false;
+    const currentHeight = heightMV.get();
+    const initial = cachedInitialHeight.current;
+    const full = dragMaxHeight.current;
+    const elapsed = Date.now() - dragStartTime.current;
+    const totalDy = e.clientY - dragStartY.current;
+    const velocity = elapsed > 0 ? totalDy / elapsed * 1e3 : 0;
+    const VELOCITY_THRESHOLD = 500;
+    if (velocity > VELOCITY_THRESHOLD) {
       if (stateRef.current === "full") {
         stateRef.current = "initial";
-        springTo(cachedInitialHeight.current);
-      } else if (stateRef.current === "initial") {
+        springTo(initial);
+      } else {
         stateRef.current = "closed";
         springTo(0);
         close();
       }
+    } else if (velocity < -VELOCITY_THRESHOLD) {
+      stateRef.current = "full";
+      springTo(full);
+    } else {
+      const midInitial = initial / 2;
+      const midFull = (initial + full) / 2;
+      if (currentHeight < midInitial) {
+        stateRef.current = "closed";
+        springTo(0);
+        close();
+      } else if (currentHeight < midFull) {
+        stateRef.current = "initial";
+        springTo(initial);
+      } else {
+        stateRef.current = "full";
+        springTo(full);
+      }
     }
   };
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      ref: panelRef,
-      className: cn("mobile-nav-panel", className),
-      "data-closed": !open || void 0,
-      style: { height: heightMV },
-      children: [
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "mobile-nav-handle",
-            onPanStart: handlePanStart,
-            onPan: handlePan,
-            onPanEnd: handlePanEnd,
-            children: /* @__PURE__ */ jsx("div", { className: "mobile-nav-handle-bar" })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mobile-nav-content", children: activeKey ? children(activeKey) : null })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    open && /* @__PURE__ */ jsx("div", { className: "mobile-nav-overlay", onClick: close, "aria-hidden": true }),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: panelRef,
+        className: cn("mobile-nav-panel", className),
+        "data-closed": !open || void 0,
+        style: { height: heightMV },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mobile-nav-handle",
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              children: /* @__PURE__ */ jsx("div", { className: "mobile-nav-handle-bar" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mobile-nav-content", children: activeKey ? children(activeKey) : null })
+        ]
+      }
+    )
+  ] });
 };
 const MobileNavBar = ({ className, children }) => /* @__PURE__ */ jsx("nav", { className: cn("mobile-nav-bar", className), children: /* @__PURE__ */ jsx("div", { className: "mobile-nav-bar-inner", children }) });
 const MobileNavTrigger = ({
@@ -12524,6 +12552,7 @@ const MobileNavTrigger = ({
   children,
   label,
   onAction,
+  disabled,
   className
 }) => {
   const { activeKey, open, toggle, close } = useMobileNav();
@@ -12539,7 +12568,9 @@ const MobileNavTrigger = ({
     "button",
     {
       onClick: handleClick,
+      disabled,
       "data-active": activeKey === value || void 0,
+      "aria-expanded": activeKey === value && open,
       className: cn("mobile-nav-trigger group", className),
       "aria-label": label,
       children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",