@agg-build/ui 2.4.2 → 2.4.5

package/dist/pages.mjs

@@ -8,17 +8,17 @@ import {
   UserProfilePage,
   buildAggTxExplorerHref,
   useHomePageModals
-} from "./chunk-EOCHFD2U.mjs";
-import "./chunk-MDO3NMXP.mjs";
+} from "./chunk-CXSIXL7M.mjs";
+import "./chunk-I4X5UNCT.mjs";
 import {
   DEPOSIT_MODAL_OPEN_EVENT,
   WITHDRAW_MODAL_OPEN_EVENT,
   requestAggDepositModalOpen,
   requestAggWithdrawModalOpen
-} from "./chunk-3FLLEJFM.mjs";
-import "./chunk-G5Y45GIA.mjs";
-import "./chunk-G5BXCT5Y.mjs";
-import "./chunk-2ET5CXOU.mjs";
+} from "./chunk-GWRFSQQK.mjs";
+import "./chunk-UH3DUTMG.mjs";
+import "./chunk-JVRTJQPZ.mjs";
+import "./chunk-PTNFXXOV.mjs";
 export {
   DEPOSIT_MODAL_OPEN_EVENT,
   EventMarketPage,

package/dist/primitives.js

@@ -1605,6 +1605,12 @@ var iconSizeClasses = {
   medium: "h-6 w-6",
   large: "h-8 w-8"
 };
+var iconSizePixels = {
+  xs: 12,
+  small: 16,
+  medium: 24,
+  large: 32
+};
 
 // src/primitives/search/search-empty-icon.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -3206,6 +3212,8 @@ var Icon = (_a) => {
     __spreadValues({
       color,
       className: cn("group/agg-icon", resolvedClassName),
+      width: iconSizePixels[size],
+      height: iconSizePixels[size],
       style: resolvedStyle
     }, props)
   );
@@ -5424,7 +5432,7 @@ EventListSkeletonView.displayName = "EventListSkeletonView";
 var import_hooks13 = require("@agg-build/hooks");
 
 // src/events/item-details/event-list-item-details.constants.ts
-var detailsBaseCardClassName = "w-full gap-6 p-5 md:gap-8";
+var detailsBaseCardClassName = "w-full gap-6 p-4 md:p-5 md:gap-8";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
 var import_jsx_runtime101 = require("react/jsx-runtime");
@@ -5727,17 +5735,10 @@ var SettlementSkeletonView = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-5 w-[240px] max-w-[60%] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
             /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
@@ -8639,14 +8640,23 @@ var import_react14 = require("react");
 var import_react13 = require("react");
 var useHorizontalScrollState = () => {
   const containerRef = (0, import_react13.useRef)(null);
+  const [hasOverflow, setHasOverflow] = (0, import_react13.useState)(false);
+  const [isAtStart, setIsAtStart] = (0, import_react13.useState)(true);
+  const [isAtEnd, setIsAtEnd] = (0, import_react13.useState)(true);
   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);
+    const epsilon = 2;
+    const nextHasOverflow = el.scrollWidth > el.clientWidth + epsilon;
+    const nextIsAtStart = el.scrollLeft <= epsilon;
+    const nextIsAtEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - epsilon;
+    setHasOverflow(nextHasOverflow);
+    setIsAtStart(nextIsAtStart);
+    setIsAtEnd(nextIsAtEnd);
+    setCanScrollLeft(nextHasOverflow && !nextIsAtStart);
+    setCanScrollRight(nextHasOverflow && !nextIsAtEnd);
   }, []);
   (0, import_react13.useEffect)(() => {
     const el = containerRef.current;
@@ -8662,7 +8672,15 @@ var useHorizontalScrollState = () => {
     ro.observe(el);
     return () => ro.disconnect();
   }, [update]);
-  return { containerRef, canScrollLeft, canScrollRight, update };
+  return {
+    containerRef,
+    hasOverflow,
+    isAtStart,
+    isAtEnd,
+    canScrollLeft,
+    canScrollRight,
+    update
+  };
 };
 
 // src/primitives/tabs/tabs.constants.ts
@@ -8757,6 +8775,9 @@ var Tabs = ({
   });
   const {
     containerRef: tabListRef,
+    hasOverflow,
+    isAtStart,
+    isAtEnd,
     canScrollLeft,
     canScrollRight,
     update: updateScrollState
@@ -8845,7 +8866,7 @@ var Tabs = ({
       "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       getMotionClassName(enableAnimations, "scroll-smooth")
     ) : "overflow-x-auto",
-    isBarVariant ? "items-start rounded-agg-lg border border-agg-separator p-1.5" : "h-15 border-b border-agg-separator -mb-[1px]",
+    isBarVariant ? "items-start rounded-agg-lg border border-agg-separator p-1.5" : "h-14 md:h-15 border-b border-agg-separator -mb-[1px]",
     shouldUseOverflowScroll && "select-none",
     shouldUseOverflowScroll && !isBarVariant && "snap-x snap-mandatory",
     shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
@@ -9003,7 +9024,10 @@ var Tabs = ({
       left: Math.max(0, nextScrollLeft),
       behavior: getScrollBehavior(enableAnimations)
     });
-  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
+    requestAnimationFrame(() => {
+      updateScrollState();
+    });
+  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
   if (shouldUseOverflowSelect) {
     return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: cn("group/agg-tabs w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       Select,
@@ -9042,6 +9066,13 @@ var Tabs = ({
             onPointerUp: handleEndTabListDrag,
             onWheel: handleTabListWheel,
             children: [
+              shouldUseOverflowScroll && !isBarVariant && hasOverflow ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "agg-tab-scroll-start-spacer h-full w-4 shrink-0 snap-start"
+                }
+              ) : null,
               renderedItems.map((item, index) => {
                 var _a;
                 const isActive = item.value === value;
@@ -9076,6 +9107,7 @@ var Tabs = ({
                         isDisabled: !!item.disabled,
                         size
                       }),
+                      !isBarVariant && (size === "s" ? "px-3 md:px-4" : "h-14 px-3 md:h-15 md:px-4"),
                       shouldUseOverflowScroll && !isBarVariant && "snap-start",
                       classNames == null ? void 0 : classNames.tabTrigger
                     ),
@@ -9125,9 +9157,9 @@ var Tabs = ({
               "aria-hidden": true,
               className: cn(
                 "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",
+                "pointer-events-none absolute inset-y-0 left-0 z-10 w-6 md:w-[60px] bg-linear-to-r from-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                canScrollLeft ? "opacity-100" : "opacity-0"
+                hasOverflow && canScrollLeft && !isAtStart ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -9137,9 +9169,9 @@ var Tabs = ({
               "aria-hidden": true,
               className: cn(
                 "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",
+                "pointer-events-none absolute inset-y-0 right-0 z-10 w-6 md:w-[60px] bg-linear-to-l from-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                canScrollRight ? "opacity-100" : "opacity-0"
+                hasOverflow && canScrollRight && !isAtEnd ? "opacity-100" : "opacity-0"
               )
             }
           )

package/dist/primitives.mjs

@@ -99,7 +99,7 @@ import {
   useOptionalToast,
   useToast,
   venueLogoNames
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-PTNFXXOV.mjs";
 export {
   ActivityChartIcon,
   AggErrorBoundary,