@syscore/ui-library 1.17.0 → 1.19.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";
@@ -2442,30 +2442,30 @@ function DialogOverlay({
 }
 function DialogContent({
   className,
+  innerClassName,
+  closeClassName,
   children,
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsx(DialogOverlay, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsx(DialogOverlay, { className: "overflow-y-auto", children: /* @__PURE__ */ jsx(
     SheetPrimitive.Content,
     {
       "data-slot": "dialog-content",
       className: cn("dialog-content", className),
       ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "dialog-content-inner", children }),
-        showCloseButton && /* @__PURE__ */ jsxs(
-          SheetPrimitive.Close,
-          {
-            "data-slot": "dialog-close",
-            className: "dialog-close",
-            children: [
-              /* @__PURE__ */ jsx(UtilityClose, {}),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "dialog-content-wrapper", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("dialog-content-inner", innerClassName), children }),
+        showCloseButton && /* @__PURE__ */ jsx("div", { className: "dialog-close", children: /* @__PURE__ */ jsxs(SheetPrimitive.Close, { "data-slot": "dialog-close", children: [
+          /* @__PURE__ */ jsx(
+            UtilityClose,
+            {
+              className: cn("dialog-close-icon", closeClassName)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] }) })
+      ] })
     }
   ) }) });
 }
@@ -5762,9 +5762,7 @@ const UtilityClassification = ({
     }
   );
 };
-const UtilityCompare = ({
-  className
-}) => {
+function UtilityCompare({ className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -5787,7 +5785,7 @@ const UtilityCompare = ({
               {
                 d: "M10.6002 5.79905C10.6002 8.44949 8.45114 10.5981 5.80011 10.5981C3.14908 10.5981 1 8.44949 1 5.79905C1 3.14861 3.14908 1 5.80011 1C8.45114 1 10.6002 3.14861 10.6002 5.79905Z",
                 fill: "#E0FBF5",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5797,7 +5795,7 @@ const UtilityCompare = ({
               "path",
               {
                 d: "M5.80078 16.998L5.80078 24.9965C5.80078 25.845 6.13793 26.6588 6.73806 27.2587C7.33819 27.8587 8.15214 28.1958 9.00086 28.1958L20.2011 28.1958",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5807,7 +5805,7 @@ const UtilityCompare = ({
               "path",
               {
                 d: "M10.6002 21.7971L5.80011 16.998L1 21.7971",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5818,7 +5816,7 @@ const UtilityCompare = ({
               {
                 d: "M29.8001 28.2014C29.8001 30.8518 27.651 33.0004 24.9999 33.0004C22.3489 33.0004 20.1998 30.8518 20.1998 28.2014C20.1998 25.551 22.3489 23.4023 24.9999 23.4023C27.651 23.4023 29.8001 25.5509 29.8001 28.2014Z",
                 fill: "#EFF5FB",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5828,7 +5826,7 @@ const UtilityCompare = ({
               "path",
               {
                 d: "M25.0002 16.9946V8.99624C25.0002 8.14771 24.663 7.33394 24.0629 6.73395C23.4628 6.13395 22.6488 5.79687 21.8001 5.79687L10.5999 5.79688",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5838,7 +5836,7 @@ const UtilityCompare = ({
               "path",
               {
                 d: "M20.1998 12.2012L24.9999 17.0002L29.8001 12.2012",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5849,7 +5847,7 @@ const UtilityCompare = ({
       )
     }
   );
-};
+}
 const UtilityDrag = ({ className }) => {
   return /* @__PURE__ */ jsx(
     "div",
@@ -6657,47 +6655,56 @@ function UtilityTargetActive({ className, ...props }) {
   ] });
 }
 function UtilityText({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "16",
-      height: "14",
-      viewBox: "0 0 16 14",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M8.75 12.75H0.75",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            "stroke-linejoin": "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M10.75 0.75H0.75",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14.75 6.75H0.75",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "14",
+          viewBox: "0 0 16 14",
+          fill: "none",
+          className: cn("text-inherit w-full h-full"),
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M8.75 12.75H0.75",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M10.75 0.75H0.75",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M14.75 6.75H0.75",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -6717,7 +6724,7 @@ function UtilityRevisionsHide({ className }) {
           height: "15",
           viewBox: "0 0 17 15",
           fill: "none",
-          className: cn("text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: [
             /* @__PURE__ */ jsx(
               "path",
@@ -6882,7 +6889,7 @@ function UtilityFeedback({ className }) {
           height: "28",
           viewBox: "0 0 30 28",
           fill: "none",
-          className: cn("text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: /* @__PURE__ */ jsx(
             "path",
             {
@@ -6915,7 +6922,7 @@ function UtilityRevisionsShow({ className }) {
           height: "26",
           viewBox: "0 0 30 26",
           fill: "none",
-          className: cn("text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: [
             /* @__PURE__ */ jsx(
               "path",
@@ -6928,20 +6935,20 @@ function UtilityRevisionsShow({ className }) {
               "path",
               {
                 d: "M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006",
-                stroke: "#282A31",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
                 d: "M28.9999 13.0008L22.2211 19.9013C21.6702 20.451 20.9295 20.7589 20.158 20.7589C19.3865 20.7589 18.6458 20.451 18.0949 19.9013L10.4319 12.1008C9.89184 11.5399 9.58936 10.7859 9.58936 10.0006C9.58936 9.21531 9.89184 8.4613 10.4319 7.90048L17.2107 1",
-                stroke: "#282A31",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             )
           ]
@@ -12410,10 +12417,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,67 +12436,94 @@ 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(Fragment, { children: [
@@ -12506,12 +12537,13 @@ const MobileNavPanel = ({ className, children }) => {
         style: { height: heightMV },
         children: [
           /* @__PURE__ */ jsx(
-            motion.div,
+            "div",
             {
               className: "mobile-nav-handle",
-              onPanStart: handlePanStart,
-              onPan: handlePan,
-              onPanEnd: handlePanEnd,
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
               children: /* @__PURE__ */ jsx("div", { className: "mobile-nav-handle-bar" })
             }
           ),
@@ -12540,11 +12572,15 @@ const MobileNavTrigger = ({
     }
   };
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
+      variant: "clear",
+      size: "icon",
+      type: "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.17.0",
+  "version": "1.19.0",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",