@agg-build/ui 2.0.0 → 2.1.0

package/dist/pages.mjs

@@ -7,17 +7,17 @@ import {
   USER_PROFILE_TAB_POSITIONS,
   UserProfilePage,
   useHomePageModals
-} from "./chunk-RF2EPYLN.mjs";
-import "./chunk-RWOF44TC.mjs";
+} from "./chunk-Y6PVXAUQ.mjs";
+import "./chunk-R6FBYAY5.mjs";
 import {
   DEPOSIT_MODAL_OPEN_EVENT,
   WITHDRAW_MODAL_OPEN_EVENT,
   requestAggDepositModalOpen,
   requestAggWithdrawModalOpen
-} from "./chunk-R3U6YXSQ.mjs";
-import "./chunk-4CM4F4S6.mjs";
-import "./chunk-HH7L3KLS.mjs";
-import "./chunk-2ZS3BPSF.mjs";
+} from "./chunk-YAEA6EDG.mjs";
+import "./chunk-C5M2OOM3.mjs";
+import "./chunk-YMVD6Q2A.mjs";
+import "./chunk-DXF2LMNN.mjs";
 export {
   DEPOSIT_MODAL_OPEN_EVENT,
   EventMarketPage,

package/dist/primitives.js

@@ -5002,7 +5002,7 @@ var Footer = ({
         "div",
         {
           className: cn(
-            "agg-footer-inner mx-auto flex h-10 w-full max-w-[1360px] px-6 lg:px-10 items-center justify-between",
+            "agg-footer-inner mx-auto flex h-10 w-full max-w-[1440px] px-6 lg:px-10 items-center justify-between",
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
@@ -7403,7 +7403,7 @@ var Header = ({
         "div",
         {
           className: cn(
-            "agg-header-inner mx-auto flex h-auto w-full max-w-[1360px] px-6 lg:px-10 items-center gap-2 md:gap-4 py-5",
+            "agg-header-inner mx-auto flex h-auto w-full max-w-[1440px] px-6 lg:px-10 items-center gap-2 md:gap-4 py-5",
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
@@ -8445,7 +8445,37 @@ StateMessage.displayName = "StateMessage";
 
 // src/primitives/tabs/index.tsx
 var import_hooks34 = require("@agg-build/hooks");
+var import_react14 = require("react");
+
+// src/shared/use-horizontal-scroll-state.ts
 var import_react13 = require("react");
+var useHorizontalScrollState = () => {
+  const containerRef = (0, import_react13.useRef)(null);
+  const [canScrollLeft, setCanScrollLeft] = (0, import_react13.useState)(false);
+  const [canScrollRight, setCanScrollRight] = (0, import_react13.useState)(false);
+  const update = (0, import_react13.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 4);
+    setCanScrollRight(maxScroll - el.scrollLeft > 4);
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    return () => el.removeEventListener("scroll", update);
+  }, [update]);
+  (0, import_react13.useEffect)(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [update]);
+  return { containerRef, canScrollLeft, canScrollRight, update };
+};
 
 // src/primitives/tabs/tabs.constants.ts
 var MOBILE_TABS_MEDIA_QUERY = "(max-width: 736px)";
@@ -8519,8 +8549,8 @@ var Tabs = ({
   const {
     features: { enableAnimations }
   } = (0, import_hooks34.useSdkUiConfig)();
-  const buttonRefs = (0, import_react13.useRef)([]);
-  const dragStateRef = (0, import_react13.useRef)({
+  const buttonRefs = (0, import_react14.useRef)([]);
+  const dragStateRef = (0, import_react14.useRef)({
     isPointerDown: false,
     isDragging: false,
     pointerId: null,
@@ -8528,29 +8558,30 @@ var Tabs = ({
     startClientY: 0,
     startScrollLeft: 0
   });
-  const suppressClickRef = (0, import_react13.useRef)(false);
+  const suppressClickRef = (0, import_react14.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const [isMobileViewport, setIsMobileViewport] = (0, import_react13.useState)(false);
-  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react13.useState)(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react13.useState)({
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react14.useState)(false);
+  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react14.useState)(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react14.useState)({
     transform: "translateX(0px)",
     width: 0,
     opacity: 0
   });
-  const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react13.useState)({
-    showStart: false,
-    showEnd: false
-  });
-  const tabListRef = (0, import_react13.useRef)(null);
+  const {
+    containerRef: tabListRef,
+    canScrollLeft,
+    canScrollRight,
+    update: updateScrollState
+  } = useHorizontalScrollState();
   const isBarVariant = variant === "bar";
-  const resolvedOverflowBehavior = (0, import_react13.useMemo)(() => {
+  const resolvedOverflowBehavior = (0, import_react14.useMemo)(() => {
     if (overflowBehavior) return overflowBehavior;
     if (!isBarVariant) return "scroll";
     return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -8568,28 +8599,12 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const updateScrollAffordances = (0, import_react13.useCallback)(() => {
-    if (!shouldUseOverflowScroll) {
-      setScrollAffordanceState({
-        showStart: false,
-        showEnd: false
-      });
-      return;
-    }
-    const tabListElement = tabListRef.current;
-    if (!tabListElement) return;
-    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
-    setScrollAffordanceState({
-      showStart: tabListElement.scrollLeft > 4,
-      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
-    });
-  }, [shouldUseOverflowScroll]);
-  const renderedItems = (0, import_react13.useMemo)(() => {
+  const renderedItems = (0, import_react14.useMemo)(() => {
     return items.map((item) => __spreadProps(__spreadValues({}, item), {
       disabled: item.disabled || item.isComingSoon
     }));
   }, [items]);
-  const selectItems = (0, import_react13.useMemo)(() => {
+  const selectItems = (0, import_react14.useMemo)(() => {
     return renderedItems.map((item) => ({
       value: item.value,
       label: item.isComingSoon ? `${item.label} (soon)` : item.label,
@@ -8722,7 +8737,7 @@ var Tabs = ({
     event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const updateActiveUnderline = (0, import_react13.useCallback)(() => {
+  const updateActiveUnderline = (0, import_react14.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
         transform: "translateX(0px)",
@@ -8745,42 +8760,39 @@ var Tabs = ({
       opacity: 1
     });
   }, [isBarVariant, renderedItems, value]);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     updateActiveUnderline();
   }, [updateActiveUnderline]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const handleScroll = () => {
       updateActiveUnderline();
-      updateScrollAffordances();
     };
     tabListElement.addEventListener("scroll", handleScroll, { passive: true });
-    updateScrollAffordances();
     return () => {
       tabListElement.removeEventListener("scroll", handleScroll);
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react13.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react14.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
-    updateScrollAffordances();
-  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
-  (0, import_react13.useEffect)(() => {
-    if (isBarVariant && !shouldUseOverflowScroll) return;
+    updateScrollState();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
+  (0, import_react14.useEffect)(() => {
+    if (isBarVariant || !shouldUseOverflowScroll) return;
     if (typeof ResizeObserver === "undefined") return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const resizeObserver = new ResizeObserver(() => {
       updateActiveUnderline();
-      updateScrollAffordances();
     });
     resizeObserver.observe(tabListElement);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react13.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react14.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -8927,7 +8939,7 @@ var Tabs = ({
                 "agg-tab-scroll-start",
                 "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+                canScrollLeft ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -8939,24 +8951,63 @@ var Tabs = ({
                 "agg-tab-scroll-end",
                 "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+                canScrollRight ? "opacity-100" : "opacity-0"
               )
             }
           )
         ] }) : null,
-        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "agg-tab-scroll-end",
-              "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-[120px] overflow-hidden rounded-r-[8px] bg-linear-to-l from-agg-secondary from-[20%] via-agg-secondary/85 to-transparent",
-              getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-              scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "absolute inset-y-0 right-3 inline-flex items-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" }) })
-          }
-        ) : null
+        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsLeft,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-start",
+                "absolute top-0 bottom-0 left-0 z-10 w-20 rounded-l-agg-lg",
+                "inline-flex items-center justify-start pl-2",
+                "bg-linear-to-r from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollLeft ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: -200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsRight,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-end",
+                "absolute top-0 right-0 bottom-0 z-10 w-20 rounded-r-agg-lg",
+                "inline-flex items-center justify-end pr-2",
+                "bg-linear-to-l from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollRight ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: 200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -8965,7 +9016,7 @@ Tabs.displayName = "Tabs";
 
 // src/primitives/toast/index.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var DEFAULT_DURATION_MS = 5e3;
 var EXIT_ANIMATION_MS = 350;
@@ -8981,7 +9032,7 @@ var TONE_ICON_NAME = {
   warning: "warning-filled",
   error: "error-filled"
 };
-var ToastContext = (0, import_react14.createContext)(null);
+var ToastContext = (0, import_react15.createContext)(null);
 function ToastProvider({
   children,
   defaultDurationMs = DEFAULT_DURATION_MS,
@@ -8989,12 +9040,12 @@ function ToastProvider({
   swipeThreshold = 50,
   viewportClassName
 }) {
-  const [toasts, setToasts] = (0, import_react14.useState)([]);
-  const idRef = (0, import_react14.useRef)(0);
-  const dismiss = (0, import_react14.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react15.useState)([]);
+  const idRef = (0, import_react15.useRef)(0);
+  const dismiss = (0, import_react15.useCallback)((id) => {
     setToasts((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const toast = (0, import_react14.useCallback)(
+  const toast = (0, import_react15.useCallback)(
     (message, options) => {
       const id = ++idRef.current;
       setToasts((current) => {
@@ -9039,31 +9090,31 @@ function ToastProvider({
   ] }) });
 }
 function ToastRow({ entry, onOpenChange }) {
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(true);
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(true);
   const hasAutoDismiss = entry.durationMs > 0 && Number.isFinite(entry.durationMs);
   const duration = hasAutoDismiss ? entry.durationMs : Number.POSITIVE_INFINITY;
-  const timeoutRef = (0, import_react14.useRef)(null);
-  const closeTimeoutRef = (0, import_react14.useRef)(null);
-  const remainingMsRef = (0, import_react14.useRef)(duration);
-  const timerStartedAtRef = (0, import_react14.useRef)(null);
-  const onOpenChangeRef = (0, import_react14.useRef)(onOpenChange);
+  const timeoutRef = (0, import_react15.useRef)(null);
+  const closeTimeoutRef = (0, import_react15.useRef)(null);
+  const remainingMsRef = (0, import_react15.useRef)(duration);
+  const timerStartedAtRef = (0, import_react15.useRef)(null);
+  const onOpenChangeRef = (0, import_react15.useRef)(onOpenChange);
   const rootStyle = {
     "--agg-toast-duration": `${duration}ms`
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onOpenChangeRef.current = onOpenChange;
   }, [onOpenChange]);
-  const clearDismissTimer = (0, import_react14.useCallback)(() => {
+  const clearDismissTimer = (0, import_react15.useCallback)(() => {
     if (!timeoutRef.current) return;
     clearTimeout(timeoutRef.current);
     timeoutRef.current = null;
   }, []);
-  const clearCloseTimer = (0, import_react14.useCallback)(() => {
+  const clearCloseTimer = (0, import_react15.useCallback)(() => {
     if (!closeTimeoutRef.current) return;
     clearTimeout(closeTimeoutRef.current);
     closeTimeoutRef.current = null;
   }, []);
-  const handleOpenChange = (0, import_react14.useCallback)(
+  const handleOpenChange = (0, import_react15.useCallback)(
     (open) => {
       if (open) {
         clearCloseTimer();
@@ -9080,7 +9131,7 @@ function ToastRow({ entry, onOpenChange }) {
     },
     [clearCloseTimer, clearDismissTimer]
   );
-  const startDismissTimer = (0, import_react14.useCallback)(() => {
+  const startDismissTimer = (0, import_react15.useCallback)(() => {
     if (!hasAutoDismiss) return;
     clearDismissTimer();
     timerStartedAtRef.current = Date.now();
@@ -9088,18 +9139,18 @@ function ToastRow({ entry, onOpenChange }) {
       handleOpenChange(false);
     }, remainingMsRef.current);
   }, [clearDismissTimer, handleOpenChange, hasAutoDismiss]);
-  const handlePauseDismissTimer = (0, import_react14.useCallback)(() => {
+  const handlePauseDismissTimer = (0, import_react15.useCallback)(() => {
     if (!hasAutoDismiss || timerStartedAtRef.current === null) return;
     const elapsedMs = Date.now() - timerStartedAtRef.current;
     remainingMsRef.current = Math.max(0, remainingMsRef.current - elapsedMs);
     timerStartedAtRef.current = null;
     clearDismissTimer();
   }, [clearDismissTimer, hasAutoDismiss]);
-  const handleResumeDismissTimer = (0, import_react14.useCallback)(() => {
+  const handleResumeDismissTimer = (0, import_react15.useCallback)(() => {
     if (!hasAutoDismiss || timerStartedAtRef.current !== null) return;
     startDismissTimer();
   }, [hasAutoDismiss, startDismissTimer]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     remainingMsRef.current = duration;
     startDismissTimer();
     return () => {
@@ -9171,20 +9222,20 @@ function ToastRow({ entry, onOpenChange }) {
   );
 }
 function useToast() {
-  const ctx = (0, import_react14.useContext)(ToastContext);
+  const ctx = (0, import_react15.useContext)(ToastContext);
   if (!ctx) {
     throw new Error("useToast must be used within a <ToastProvider>");
   }
   return ctx;
 }
 function useOptionalToast() {
-  return (0, import_react14.useContext)(ToastContext);
+  return (0, import_react15.useContext)(ToastContext);
 }
 
 // src/primitives/tooltip/index.tsx
 var import_hooks35 = require("@agg-build/hooks");
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/primitives/tooltip/tooltip.constants.ts
 var tooltipSizeClasses = {
@@ -9232,7 +9283,7 @@ var Tooltip = ({
     general: { rootClassName },
     features: { enableAnimations }
   } = (0, import_hooks35.useSdkUiConfig)();
-  const trigger = (0, import_react15.useMemo)(() => {
+  const trigger = (0, import_react16.useMemo)(() => {
     if (children) return children;
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       "button",

package/dist/primitives.mjs

@@ -98,7 +98,7 @@ import {
   useOptionalToast,
   useToast,
   venueLogoNames
-} from "./chunk-2ZS3BPSF.mjs";
+} from "./chunk-DXF2LMNN.mjs";
 export {
   ActivityChartIcon,
   AggErrorBoundary,