@syscore/ui-library 1.17.0 → 1.19.0

package/client/components/icons/UtilityCompare.tsx

@@ -1,13 +1,6 @@
-import React from "react";
 import { cn } from "../../lib/utils";
 
-interface UtilityCompareProps {
-  className?: string;
-}
-
-export const UtilityCompare: React.FC<UtilityCompareProps> = ({
-  className,
-}) => {
+export function UtilityCompare({ className }: { className?: string }) {
   return (
     <div
       className={cn(
@@ -26,21 +19,21 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
         <path
           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"
         />
         <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"
         />
         <path
           d="M10.6002 21.7971L5.80011 16.998L1 21.7971"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -48,21 +41,21 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
         <path
           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"
         />
         <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"
         />
         <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"
@@ -70,4 +63,4 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
       </svg>
     </div>
   );
-};
+}

package/client/components/icons/UtilityFeedback.tsx

@@ -14,7 +14,7 @@ export function UtilityFeedback({ className }: { className?: string }) {
         height="28"
         viewBox="0 0 30 28"
         fill="none"
-        className={cn("text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
           d="M29 20.162C29 20.888 28.705 21.5843 28.1799 22.0977C27.6548 22.611 26.9426 22.8995 26.2 22.8995H7.7592C7.01665 22.8996 6.30458 23.1881 5.7796 23.7015L2.6968 26.7154C2.55779 26.8513 2.38068 26.9438 2.18788 26.9813C1.99508 27.0188 1.79524 26.9996 1.61363 26.926C1.43202 26.8525 1.27678 26.728 1.16756 26.5682C1.05834 26.4084 1.00003 26.2205 1 26.0283V3.73743C1 3.01142 1.295 2.31514 1.8201 1.80178C2.3452 1.28841 3.05739 1 3.8 1H26.2C26.9426 1 27.6548 1.28841 28.1799 1.80178C28.705 2.31514 29 3.01142 29 3.73743V20.162Z"

package/client/components/icons/UtilityRevisionsHide.tsx

@@ -14,7 +14,7 @@ export function UtilityRevisionsHide({ className }: { className?: string }) {
         height="15"
         viewBox="0 0 17 15"
         fill="none"
-        className={cn("text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
           d="M5.48682 6.27734L0.75 11.0142V13.3826H7.85523L10.2236 11.0142"

package/client/components/icons/UtilityRevisionsShow.tsx

@@ -14,7 +14,7 @@ export function UtilityRevisionsShow({ className }: { className?: string }) {
         height="26"
         viewBox="0 0 30 26"
         fill="none"
-        className={cn("text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
           d="M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006"
@@ -22,17 +22,17 @@ export function UtilityRevisionsShow({ className }: { className?: string }) {
         />
         <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"
         />
         <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"
         />
       </svg>
     </div>

package/client/components/icons/UtilityText.tsx

@@ -1,34 +1,43 @@
+import { cn } from "@/lib/utils";
+
 export function UtilityText({ className }: { className?: string }) {
   return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="14"
-      viewBox="0 0 16 14"
-      fill="none"
+    <div
+      className={cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className,
+      )}
     >
-      <path
-        d="M8.75 12.75H0.75"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M10.75 0.75H0.75"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M14.75 6.75H0.75"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
+      <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")}
+      >
+        <path
+          d="M8.75 12.75H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10.75 0.75H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.75 6.75H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
   );
 }

package/client/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "@/lib/utils";
 import { UtilityClose } from "../icons/UtilityClose";
 
+
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -46,30 +47,39 @@ function DialogOverlay({
 
 function DialogContent({
   className,
+  innerClassName,
+  closeClassName,
   children,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  innerClassName?: string;
+  closeClassName?: string;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay>
+      <DialogOverlay className="overflow-y-auto">
         <DialogPrimitive.Content
           data-slot="dialog-content"
           className={cn("dialog-content", className)}
           {...props}
         >
-          <div className="dialog-content-inner">{children}</div>
-          {showCloseButton && (
-            <DialogPrimitive.Close
-              data-slot="dialog-close"
-              className="dialog-close"
-            >
-              <UtilityClose />
-              <span className="sr-only">Close</span>
-            </DialogPrimitive.Close>
-          )}
+          <div className="dialog-content-wrapper">
+            <div className={cn("dialog-content-inner", innerClassName)}>
+              {children}
+            </div>
+            {showCloseButton && (
+              <div className="dialog-close">
+                <DialogPrimitive.Close data-slot="dialog-close">
+                  <UtilityClose
+                    className={cn("dialog-close-icon", closeClassName)}
+                  />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              </div>
+            )}
+          </div>
         </DialogPrimitive.Content>
       </DialogOverlay>
     </DialogPortal>

package/client/components/ui/mobile-nav.tsx

@@ -4,12 +4,14 @@ import {
   useCallback,
   useMemo,
   useEffect,
+  useLayoutEffect,
   ReactNode,
   createContext,
   useContext,
 } from "react";
-import { motion, useMotionValue, animate, type PanInfo } from "motion/react";
+import { motion, useMotionValue, animate } from "motion/react";
 import { cn } from "@/lib/utils";
+import { Button } from "./button";
 
 interface MobileNavContextValue {
   activeKey: string | null;
@@ -99,10 +101,8 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   const heightMV = useMotionValue(0);
   const stopAnimation = useRef<(() => void) | null>(null);
 
-  // Track which state the panel is in: "closed" | "initial" | "full"
+  // Panel state: "closed" | "initial" | "full"
   const stateRef = useRef<"closed" | "initial" | "full">("closed");
-
-  // Cache the initial content height so returning from full → initial is consistent
   const cachedInitialHeight = useRef(0);
 
   const getNavBarHeight = () => {
@@ -111,15 +111,12 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   };
 
   const getAvailableHeight = () => {
-    const parent = panelRef.current?.parentElement;
-    const container = parent?.clientHeight ?? window.innerHeight;
-    return container - getNavBarHeight();
+    return window.innerHeight - getNavBarHeight();
   };
 
   const measureContentHeight = () => {
     const content = contentRef.current;
     if (!content) return 0;
-    // Measure the first child to get true content height without triggering reflow
     const child = content.firstElementChild as HTMLElement | null;
     const raw = (child?.offsetHeight ?? content.scrollHeight) + 40; // +40 for handle area
     const max = getAvailableHeight() * 0.7;
@@ -136,78 +133,111 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
   };
 
   // Animate open/close
-  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]);
 
-  // Re-measure when content changes (e.g. switching tabs)
-  useEffect(() => {
+  // Re-measure when switching tabs while panel is already open
+  useLayoutEffect(() => {
     if (!open) return;
-    let cancelled = false;
-    // Double rAF ensures new children have rendered before measuring
-    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 h = measureContentHeight();
+    cachedInitialHeight.current = h;
+    if (stateRef.current !== "full") {
+      stateRef.current = "initial";
+      springTo(h);
+    }
   }, [activeKey]);
 
-  // Track drag direction via ref for reliable gesture detection
-  const dragDirection = useRef<"up" | "down" | null>(null);
-
-  const handlePanStart = () => {
-    dragDirection.current = null;
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, close]);
+
+  // --- Pointer-based drag (bypasses motion's gesture detection) ---
+  const isDragging = useRef(false);
+  const lastY = useRef(0);
+  const dragStartY = useRef(0);
+  const dragStartTime = useRef(0);
+  const dragMaxHeight = useRef(0);
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    stopAnimation.current?.();
+    isDragging.current = true;
+    lastY.current = e.clientY;
+    dragStartY.current = e.clientY;
+    dragStartTime.current = Date.now();
+    dragMaxHeight.current = getAvailableHeight();
   };
 
-  const handlePan = (_: unknown, info: PanInfo) => {
-    // Continuously track the latest direction during drag
-    dragDirection.current = info.offset.y < 0 ? "up" : "down";
+  const handlePointerMove = (e: React.PointerEvent) => {
+    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;
+  const handlePointerUp = (e: React.PointerEvent) => {
+    if (!isDragging.current) return;
+    isDragging.current = false;
 
-    if (dir === "up") {
-      if (stateRef.current === "initial") {
-        stateRef.current = "full";
-        springTo(getAvailableHeight());
-      }
-    } else {
-      // dir === "down"
+    const currentHeight = heightMV.get();
+    const initial = cachedInitialHeight.current;
+    const full = dragMaxHeight.current;
+
+    // Calculate velocity (px/s) — positive = downward
+    const elapsed = Date.now() - dragStartTime.current;
+    const totalDy = e.clientY - dragStartY.current;
+    const velocity = elapsed > 0 ? (totalDy / elapsed) * 1000 : 0;
+
+    const VELOCITY_THRESHOLD = 500;
+
+    if (velocity > VELOCITY_THRESHOLD) {
+      // Fast downward flick
       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) {
+      // Fast upward flick
+      stateRef.current = "full";
+      springTo(full);
+    } else {
+      // Slow drag — snap to nearest
+      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);
+      }
     }
   };
 
@@ -222,14 +252,15 @@ const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
         data-closed={!open || undefined}
         style={{ height: heightMV }}
       >
-        <motion.div
+        <div
           className="mobile-nav-handle"
-          onPanStart={handlePanStart}
-          onPan={handlePan}
-          onPanEnd={handlePanEnd}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
         >
           <div className="mobile-nav-handle-bar" />
-        </motion.div>
+        </div>
 
         <div ref={contentRef} className="mobile-nav-content">
           {activeKey ? children(activeKey) : null}
@@ -265,15 +296,19 @@ const MobileNavTrigger = ({
   };
 
   return (
-    <button
+    <Button
+      variant="clear"
+      size="icon"
+      type="button"
       onClick={handleClick}
       disabled={disabled}
       data-active={activeKey === value || undefined}
+      aria-expanded={activeKey === value && open}
       className={cn("mobile-nav-trigger group", className)}
       aria-label={label}
     >
       {children}
-    </button>
+    </Button>
   );
 };