@syscore/ui-library 1.15.4 → 1.16.0

package/client/components/icons/UtilityCompare.tsx

@@ -12,58 +12,60 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
     <div
       className={cn(
         "size-4 flex items-center justify-center text-gray-500",
-        className
+        className,
       )}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="15"
-        height="16"
-        viewBox="0 0 15 16"
+        width="31"
+        height="34"
+        viewBox="0 0 31 34"
         fill="none"
-        className={cn("size-[14px] text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
-          d="M4.95001 2.85001C4.95001 4.00981 4.0098 4.95001 2.85 4.95001C1.6902 4.95001 0.75 4.00981 0.75 2.85001C0.75 1.6902 1.6902 0.75 2.85 0.75C4.0098 0.75 4.95001 1.6902 4.95001 2.85001Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          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-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
         <path
-          d="M2.84961 7.75002L2.84961 11.25C2.84961 11.6213 2.99711 11.9774 3.25966 12.24C3.52221 12.5025 3.87831 12.65 4.24961 12.65L9.14962 12.65"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          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-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
         <path
-          d="M4.95001 9.85002L2.85 7.75002L0.75 9.85002"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          d="M10.6002 21.7971L5.80011 16.998L1 21.7971"
+          stroke="#282A31"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
         <path
-          d="M13.3504 12.65C13.3504 13.8098 12.4102 14.75 11.2504 14.75C10.0906 14.75 9.15039 13.8098 9.15039 12.65C9.15039 11.4902 10.0906 10.55 11.2504 10.55C12.4102 10.55 13.3504 11.4902 13.3504 12.65Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          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-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
         <path
-          d="M11.2492 7.74993L11.2492 4.24992C11.2492 3.87861 11.1017 3.52252 10.8392 3.25997C10.5766 2.99741 10.2205 2.84991 9.84923 2.84991L4.94922 2.84991"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          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-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
         <path
-          d="M9.15039 5.6501L11.2504 7.75011L13.3504 5.6501"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          d="M20.1998 12.2012L24.9999 17.0002L29.8001 12.2012"
+          stroke="#282A31"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
     </div>

package/client/components/icons/UtilityFeedback.tsx

@@ -0,0 +1,30 @@
+import { cn } from "../../lib/utils";
+
+export function UtilityFeedback({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className,
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="28"
+        viewBox="0 0 30 28"
+        fill="none"
+        className={cn("text-inherit")}
+      >
+        <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"
+          fill="#D6F4FB"
+          stroke="#71747D"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  );
+}

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("size-[14px] text-inherit")}
+        className={cn("text-inherit")}
       >
         <path
           d="M5.48682 6.27734L0.75 11.0142V13.3826H7.85523L10.2236 11.0142"

package/client/components/icons/UtilityRevisionsShow.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../../lib/utils";
+
+export function UtilityRevisionsShow({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className,
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="30"
+        height="26"
+        viewBox="0 0 30 26"
+        fill="none"
+        className={cn("text-inherit")}
+      >
+        <path
+          d="M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006"
+          fill="#F6EFD0"
+        />
+        <path
+          d="M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006"
+          stroke="#282A31"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="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"
+        />
+      </svg>
+    </div>
+  );
+}

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

@@ -0,0 +1,278 @@
+import {
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  ReactNode,
+  createContext,
+  useContext,
+} from "react";
+import { motion, useMotionValue, animate, type PanInfo } from "motion/react";
+import { cn } from "@/lib/utils";
+
+interface MobileNavContextValue {
+  activeKey: string | null;
+  open: boolean;
+  toggle: (key: string) => void;
+  close: () => void;
+}
+
+interface MobileNavProps {
+  className?: string;
+  children: ReactNode;
+}
+
+interface MobileNavPanelProps {
+  className?: string;
+  children: (activeKey: string) => ReactNode;
+}
+
+interface MobileNavBarProps {
+  className?: string;
+  children: ReactNode;
+}
+
+interface MobileNavTriggerProps {
+  value: string;
+  children: React.ReactNode;
+  label: string;
+  /** If provided, fires this action instead of toggling the panel */
+  onAction?: () => void;
+  className?: string;
+}
+
+const SPRING_CONFIG = { stiffness: 300, damping: 30 };
+
+const MobileNavContext = createContext<MobileNavContextValue | null>(null);
+
+const useMobileNav = () => {
+  const ctx = useContext(MobileNavContext);
+  if (!ctx)
+    throw new Error(
+      "MobileNav compound components must be used within <MobileNav>",
+    );
+  return ctx;
+};
+
+const MobileNav = ({ className, children }: MobileNavProps) => {
+  const [activeKey, setActiveKey] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const toggle = useCallback(
+    (key: string) => {
+      if (activeKey === key && open) {
+        setOpen(false);
+        setActiveKey(null);
+      } else {
+        setActiveKey(key);
+        setOpen(true);
+      }
+    },
+    [activeKey, open],
+  );
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setActiveKey(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({ activeKey, open, toggle, close }),
+    [activeKey, open, toggle, close],
+  );
+
+  return (
+    <MobileNavContext.Provider value={value}>
+      <div className={cn("mobile-nav", className)}>{children}</div>
+    </MobileNavContext.Provider>
+  );
+};
+
+const MobileNavPanel = ({ className, children }: MobileNavPanelProps) => {
+  const { activeKey, open, close } = useMobileNav();
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const heightMV = useMotionValue(0);
+  const stopAnimation = useRef<(() => void) | null>(null);
+
+  // Track which state the panel is in: "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 = () => {
+    const nav = panelRef.current?.nextElementSibling as HTMLElement | null;
+    return nav?.offsetHeight ?? 0;
+  };
+
+  const getAvailableHeight = () => {
+    const parent = panelRef.current?.parentElement;
+    const container = parent?.clientHeight ?? window.innerHeight;
+    return container - 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;
+    return Math.min(raw, max);
+  };
+
+  const springTo = (target: number) => {
+    stopAnimation.current?.();
+    const controls = animate(heightMV, target, {
+      type: "spring",
+      ...SPRING_CONFIG,
+    });
+    stopAnimation.current = () => controls.stop();
+  };
+
+  // Animate open/close
+  useEffect(() => {
+    let cancelled = false;
+    if (open) {
+      stateRef.current = "initial";
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        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(() => {
+    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;
+    };
+  }, [activeKey]);
+
+  // Track drag direction via ref for reliable gesture detection
+  const dragDirection = useRef<"up" | "down" | null>(null);
+
+  const handlePanStart = () => {
+    dragDirection.current = null;
+  };
+
+  const handlePan = (_: unknown, info: PanInfo) => {
+    // Continuously track the latest direction during drag
+    dragDirection.current = info.offset.y < 0 ? "up" : "down";
+  };
+
+  const handlePanEnd = () => {
+    const dir = dragDirection.current;
+    if (!dir) return;
+
+    if (dir === "up") {
+      if (stateRef.current === "initial") {
+        stateRef.current = "full";
+        springTo(getAvailableHeight());
+      }
+    } else {
+      // dir === "down"
+      if (stateRef.current === "full") {
+        stateRef.current = "initial";
+        springTo(cachedInitialHeight.current);
+      } else if (stateRef.current === "initial") {
+        stateRef.current = "closed";
+        springTo(0);
+        close();
+      }
+    }
+  };
+
+  return (
+    <motion.div
+      ref={panelRef}
+      className={cn("mobile-nav-panel", className)}
+      data-closed={!open || undefined}
+      style={{ height: heightMV }}
+    >
+      <motion.div
+        className="mobile-nav-handle"
+        onPanStart={handlePanStart}
+        onPan={handlePan}
+        onPanEnd={handlePanEnd}
+      >
+        <div className="mobile-nav-handle-bar" />
+      </motion.div>
+
+      <div ref={contentRef} className="mobile-nav-content">
+        {activeKey ? children(activeKey) : null}
+      </div>
+    </motion.div>
+  );
+};
+
+const MobileNavBar = ({ className, children }: MobileNavBarProps) => (
+  <nav className={cn("mobile-nav-bar", className)}>
+    <div className="mobile-nav-bar-inner">{children}</div>
+  </nav>
+);
+
+const MobileNavTrigger = ({
+  value,
+  children,
+  label,
+  onAction,
+  className,
+}: MobileNavTriggerProps) => {
+  const { activeKey, open, toggle, close } = useMobileNav();
+
+  const handleClick = () => {
+    if (onAction) {
+      if (open) close();
+      onAction();
+    } else {
+      toggle(value);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      data-active={activeKey === value || undefined}
+      className={cn("mobile-nav-trigger group", className)}
+      aria-label={label}
+    >
+      {children}
+    </button>
+  );
+};
+
+export { MobileNav, MobileNavPanel, MobileNavBar, MobileNavTrigger };
+export type {
+  MobileNavProps,
+  MobileNavPanelProps,
+  MobileNavBarProps,
+  MobileNavTriggerProps,
+};

package/client/global.css

@@ -3786,7 +3786,7 @@ body {
   position: fixed;
   inset: 0;
   z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.08);
 }
 
 .drawer-content {
@@ -3798,9 +3798,10 @@ body {
   margin-top: 6rem;
   display: flex;
   height: auto;
+  max-height: 70vh;
   flex-direction: column;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
   border: 1px solid hsl(var(--border));
   background-color: hsl(var(--background));
 }
@@ -3809,10 +3810,10 @@ body {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
-  height: 0.5rem;
-  width: 6.25rem;
+  height: 4px;
+  width: 52px;
   border-radius: 9999px;
-  background-color: hsl(var(--muted));
+  background-color: var(--color-gray-300);
 }
 
 .drawer-header {
@@ -3849,6 +3850,89 @@ body {
   color: hsl(var(--muted-foreground));
 }
 
+/* MobileNav Styles */
+.mobile-nav {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-nav-panel {
+  background-color: white;
+  border-radius: 32px 32px 0 0;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.mobile-nav-panel[data-closed] {
+  border-top: 0;
+}
+
+.mobile-nav-handle {
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  cursor: grab;
+  touch-action: none;
+}
+
+.mobile-nav-handle:active {
+  cursor: grabbing;
+}
+
+.mobile-nav-handle-bar {
+  height: 4px;
+  width: 52px;
+  border-radius: 9999px;
+  background-color: var(--color-gray-300);
+}
+
+.mobile-nav-content {
+  overflow-y: auto;
+  height: calc(100% - 40px);
+}
+
+.mobile-nav-bar {
+  border-top: 1px solid var(--color-gray-100);
+  background-color: var(--color-gray-50);
+  flex-shrink: 0;
+  min-height: 136px;
+}
+
+.mobile-nav-bar-inner {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  max-width: 28rem;
+  align-items: center;
+  justify-content: space-around;
+  padding-top: 0.5rem;
+  padding-bottom: 2rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.mobile-nav-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  cursor: pointer;
+  transition: color 150ms;
+  color: var(--color-gray-400);
+}
+
+.mobile-nav-trigger:hover {
+  color: var(--color-gray-600);
+}
+
+.mobile-nav-trigger[data-active] {
+  color: var(--color-gray-900);
+}
+
 /* Pagination Styles */
 .pagination {
   margin-left: auto;