@gearbox-protocol/permissionless-ui 1.7.5 → 1.9.0

package/dist/esm/components/graph/graph-view.js

@@ -16,10 +16,10 @@ const graphViewVariants = cva(
         ghost: "border-0 shadow-none"
       },
       size: {
-        sm: "h-64",
-        default: "h-96",
-        lg: "h-[32rem]",
-        xl: "h-[48rem]",
+        sm: "h-48 sm:h-64",
+        default: "h-64 sm:h-96",
+        lg: "h-96 sm:h-[32rem]",
+        xl: "h-[32rem] sm:h-[48rem]",
         full: "h-full"
       },
       padding: {
@@ -64,15 +64,15 @@ const GraphView = React.forwardRef(
         children: [
           hasHeader && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start justify-between gap-4 flex-shrink-0", children: [
             (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+              title && /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: description })
             ] }),
             toolbar && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-full", children: toolbar })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "relative flex-1 w-full min-h-0", children: [
             loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-transparent backdrop-blur-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+              /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm text-muted-foreground", children: "Loading..." })
             ] }) }),
             error && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
               /* @__PURE__ */ jsx(
@@ -94,7 +94,7 @@ const GraphView = React.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: error })
+              /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-medium", children: error })
             ] }) }),
             !error && !children && emptyMessage && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsx(
@@ -116,7 +116,7 @@ const GraphView = React.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm", children: emptyMessage })
+              /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm", children: emptyMessage })
             ] }) }),
             !error && children
           ] })

package/dist/esm/components/graph/graph.js

@@ -566,7 +566,7 @@ function GraphLegend({
               style: { backgroundColor: lineColor }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: s.label }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: s.label }),
           onUnselect && /* @__PURE__ */ jsx(
             "button",
             {
@@ -575,7 +575,7 @@ function GraphLegend({
                 e.stopPropagation();
                 onUnselect(s.label);
               },
-              className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors",
+              className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
               "aria-label": `Remove ${s.label}`,
               children: /* @__PURE__ */ jsxs(
                 "svg",

package/dist/esm/components/label/label.js

@@ -7,7 +7,7 @@ import 'sonner';
 import '@gearbox-protocol/sdk';
 
 const labelVariants = cva(
-  "flex font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "flex leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
   {
     variants: {
       size: {

package/dist/esm/components/layout/app-logo/app-logo.js

@@ -10,8 +10,8 @@ function AppLogo({
     "div",
     {
       className: cn(
-        "text-foreground flex items-center gap-2",
-        size === "default" ? "text-xl" : "text-md"
+        "text-foreground flex items-center gap-1 sm:gap-2",
+        size === "default" ? "text-base sm:text-lg md:text-xl" : "text-sm sm:text-base md:text-md"
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -21,10 +21,14 @@ function AppLogo({
             alt: "Gearbox Protocol",
             width: size === "default" ? 120 : 100,
             height: size === "default" ? 24 : 20,
-            loading: "eager"
+            loading: "eager",
+            className: cn(
+              "h-auto",
+              size === "default" ? "w-20 sm:w-24 md:w-[120px]" : "w-16 sm:w-20 md:w-[100px]"
+            )
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: appName })
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: appName })
       ]
     }
   );

package/dist/esm/components/layout/footer/footer.js

@@ -108,7 +108,7 @@ function GearboxFooter({
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 items-top py-6 w-full px-4 max-w-[1440px]", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
-          /* @__PURE__ */ jsx(AppLogo, { appName, size: "small" }),
+          /* @__PURE__ */ jsx(AppLogo, { appName }),
           /* @__PURE__ */ jsx(LegalDisclaimer, { hrefs: legalReferences })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [

package/dist/esm/components/layout/grid/grid.js

@@ -125,6 +125,9 @@ const GAP_Y_CLASSES = {
 };
 const getGridColsClass = (cols, breakpoint) => {
   if (!cols) return "";
+  if (typeof cols === "string") {
+    return "";
+  }
   if (typeof cols === "number") {
     if (breakpoint === "sm") return GRID_COLS_SM_CLASSES[cols] || "";
     if (breakpoint === "md") return GRID_COLS_MD_CLASSES[cols] || "";
@@ -155,7 +158,10 @@ const Grid = React__default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const customStyle = typeof cols === "string" ? { ...style, gridTemplateColumns: cols } : style;
+    const customStyle = typeof cols === "string" ? {
+      ...style,
+      gridTemplateColumns: cols === "auto" ? "repeat(auto-fit, minmax(0, auto))" : cols
+    } : style;
     return /* @__PURE__ */ jsx(
       "div",
       {

package/dist/esm/components/layout/header/header.js

@@ -43,19 +43,19 @@ const Header = React__default.forwardRef(
             "div",
             {
               className: cn(
-                "w-full h-full flex items-stretch justify-between mx-auto px-4 max-w-[1440px]",
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 sm:px-6 lg:px-8 max-w-[1440px]",
                 containerClassName
               ),
               children: [
                 logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo }),
                 navigation && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center", children: navigation }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
                   actions && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
-                  (navigation || mobileMenuContent) && /* @__PURE__ */ jsx(
+                  (navigation || mobileMenuContent || actions) && /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
-                      className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-accent hover:text-accent-foreground focus:outline-none",
+                      className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-secondary hover:text-accent-foreground focus:outline-none cursor-pointer",
                       onClick: () => setMobileMenuOpen(!mobileMenuOpen),
                       "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
                       children: mobileMenuOpen ? /* @__PURE__ */ jsx(X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(Menu, { className: "h-6 w-6" })
@@ -65,13 +65,22 @@ const Header = React__default.forwardRef(
               ]
             }
           ),
-          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsx(
+          mobileMenuOpen && (navigation || mobileMenuContent || actions) && /* @__PURE__ */ jsx(
             MobileMenuContext.Provider,
             {
               value: { closeMobileMenu: () => setMobileMenuOpen(false) },
-              children: /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+              children: /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 sm:px-6 py-4 space-y-2", children: [
                 mobileMenuContent || navigation,
-                actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+                actions && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col gap-2",
+                      (mobileMenuContent || navigation) && "pt-4 border-t border-border mt-4"
+                    ),
+                    children: actions
+                  }
+                )
               ] }) })
             }
           )

package/dist/esm/components/layout/page-layout/page-layout.js

@@ -25,8 +25,8 @@ function PageLayout({
       icon,
       /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", children: title }),
-          actionButton
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold max-w-64 md:max-w-128 truncate", children: title }),
+          actionButton && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actionButton })
         ] }),
         description
       ] })

package/dist/esm/components/liquidation/liquidation-assets-table/liquidation-assets-table.js

@@ -3,8 +3,9 @@ import { AssetUtils, PRICE_DECIMALS } from '@gearbox-protocol/sdk';
 import { useMemo } from 'react';
 import { TokenSymbol } from '../../token-symbol/token-symbol.js';
 import { FormattedMessageTyped } from '../../typed-intl/index.js';
+import { useIsMobile } from '../../../hooks/use-media-query.js';
+import { cn } from '../../../utils/cn.js';
 
-const lineHeight = 51;
 function LiquidationModellingAssetsTable({
   tokensList,
   graphParams,
@@ -16,16 +17,21 @@ function LiquidationModellingAssetsTable({
   const fixedBalancesRecord = useMemo(() => {
     return AssetUtils.constructAssetRecord(fixedBalances);
   }, [fixedBalances]);
+  const isMobile = useIsMobile();
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "grid w-full px-4 gap-2 items-center h-[30px] relative after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border",
+        className: cn(
+          "grid w-full px-3 sm:px-4 gap-1 sm:gap-2 items-center",
+          "h-7 sm:h-8 md:h-[30px]",
+          "relative after:absolute after:bottom-0 after:left-2 sm:after:left-3 after:right-2 sm:after:right-3 after:h-px after:border-b after:border-border"
+        ),
         style: { gridTemplateColumns: "1fr 1fr 1fr" },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "text-left text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
-          /* @__PURE__ */ jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
-          /* @__PURE__ */ jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
+          /* @__PURE__ */ jsx("div", { className: "text-left text-xs sm:text-sm font-medium text-muted-foreground truncate", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-xs sm:text-sm font-medium text-muted-foreground truncate", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-xs sm:text-sm font-medium text-muted-foreground truncate", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
         ]
       }
     ),
@@ -34,26 +40,30 @@ function LiquidationModellingAssetsTable({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: `grid w-full px-4 gap-2 items-center relative ${isLast ? "" : "after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border"}`,
+          className: cn(
+            "grid w-full px-3 sm:px-4 gap-1 sm:gap-2 items-center relative",
+            "h-12 sm:h-14 md:h-[51px]",
+            !isLast && "after:absolute after:bottom-0 after:left-2 sm:after:left-3 after:right-2 sm:after:right-3 after:h-px after:border-b after:border-border"
+          ),
           style: {
-            gridTemplateColumns: "1fr 1fr 1fr",
-            height: `${lineHeight}px`
+            gridTemplateColumns: "1fr 1fr 1fr"
           },
           children: [
-            /* @__PURE__ */ jsx("div", { className: "text-left", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "text-left min-w-0", children: /* @__PURE__ */ jsx(
               TokenSymbol,
               {
-                size: 24,
+                size: isMobile ? 18 : 24,
                 token: tokensList[c.token],
                 showSymbol: true,
-                maxLength: 8
+                maxLength: 6,
+                className: "gap-1.5 sm:gap-2"
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-right text-xs sm:text-sm md:text-base truncate", children: [
               "$",
               formatPrice(prices[c.token])
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-right", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-right min-w-0", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm text-muted-foreground truncate", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base text-muted-foreground truncate", children: [
               "$",
               formatPrice(editedPrices[c.token] || prices[c.token])
             ] }) })

package/dist/esm/components/loader-guard/loader-guard.js

@@ -17,12 +17,16 @@ function LoaderGuard({
   children,
   loader
 }) {
-  const defaultLoader = /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })
+  const defaultLoader = /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 mb-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 sm:h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 sm:h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 sm:h-4 w-3/4" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4 md:flex-row flex-col w-full", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-48 sm:h-64 md:h-72 md:w-2/3 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
   ] }) });
   const showGuard = show;

package/dist/esm/components/navbar/navbar.js

@@ -37,7 +37,10 @@ const NavbarContent = ({ containerClassName, children }) => {
     {
       ref: indicatorContext?.containerRef,
       className: cn(
-        "flex items-center gap-2 flex-1 justify-center overflow-x-auto h-full relative",
+        "flex items-center gap-2 flex-1 h-full relative overflow-x-auto overflow-y-hidden",
+        "md:justify-center md:overflow-x-visible",
+        "px-1 pb-1 md:px-0 md:pb-0",
+        "navbar-scrollbar",
         containerClassName
       ),
       children: [
@@ -85,7 +88,7 @@ const NavbarNav = React.forwardRef(({ className, children, ...props }, ref) => /
   "div",
   {
     ref,
-    className: cn("flex items-center gap-1", className),
+    className: cn("flex items-center gap-1 min-w-max", className),
     ...props,
     children
   }

package/dist/esm/components/navitem/navitem.js

@@ -12,12 +12,12 @@ const navitemVariants = cva(
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
-        active: "text-foreground bg-secondary",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
-        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline",
-        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-accent data-[active=true]:text-foreground",
-        tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none"
+        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-transparent md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
+        active: "text-foreground bg-transparent md:bg-secondary active:bg-transparent focus:bg-transparent md:active:bg-secondary md:focus:bg-secondary",
+        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-transparent md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
+        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline active:bg-transparent focus:bg-transparent",
+        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-transparent md:data-[active=true]:bg-accent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-accent",
+        tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none active:bg-transparent focus:bg-transparent"
       },
       size: {
         sm: "h-8 px-3 text-xs",

package/dist/esm/components/page-title/page-title.js

@@ -56,7 +56,7 @@ const PageTitle = React.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: cn(pageTitleRootVariants({ spacing })), children: [
       backButton && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: backButton }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col md:flex-row md:items-center gap-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
           icon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: icon }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
@@ -70,7 +70,7 @@ const PageTitle = React.forwardRef(
             subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] })
         ] }),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions })
+        actions && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-center gap-2 md:ml-auto", children: actions })
       ] })
     ] }) });
   }

package/dist/esm/components/tab-control/tab-control.js

@@ -82,7 +82,8 @@ function TabControl({
       {
         ref: wrapRef,
         className: cn(
-          "relative bottom-[-1px] flex items-stretch gap-3",
+          "relative bottom-[-1px] flex items-stretch gap-3 overflow-x-auto overflow-y-hidden w-full",
+          "navbar-scrollbar",
           showBorder && "border-b border-border"
         ),
         children: tabs.map((t, index, arr) => {
@@ -98,9 +99,9 @@ function TabControl({
               onClick: t.disabled ? void 0 : handleTabSelect(t.id, index),
               disabled: t.disabled,
               className: cn(
-                "flex items-center bg-transparent border-none",
+                "flex items-center bg-transparent border-none shrink-0",
                 tabItemWrapPadding || "pb-3.5",
-                variant === "equal" ? "flex-1 justify-center" : !isLast && "mr-10 sm:mr-8",
+                variant === "equal" ? "flex-1 justify-center min-w-0" : !isLast && "mr-10 sm:mr-8",
                 s || t.disabled ? "cursor-default" : "cursor-pointer",
                 !t.disabled && "hover:text-foreground"
               ),

package/dist/esm/components/tabs/tabs.js

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6",
+      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6 overflow-x-auto overflow-y-hidden navbar-scrollbar min-w-max",
       className
     ),
     ...props
@@ -23,7 +23,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer shrink-0",
       className
     ),
     ...props

package/dist/esm/components/theme-toggle/theme-toggle.js

@@ -8,7 +8,7 @@ function ThemeToggle() {
     {
       type: "button",
       onClick: () => setTheme(actualTheme === "dark" ? "light" : "dark"),
-      className: "rounded-md p-2 hover:bg-accent cursor-pointer",
+      className: "rounded-md p-2 hover:bg-secondary cursor-pointer",
       "aria-label": "Toggle theme",
       children: actualTheme === "dark" ? /* @__PURE__ */ jsxs(
         "svg",

package/dist/esm/components/token-icon/token-icon.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Image } from '../image/image.js';
+import { cn } from '../../utils/cn.js';
 
 function TokenIcon({
   symbol,
@@ -57,7 +58,7 @@ function TokenIcon({
                 alt: "",
                 width: size,
                 height: size,
-                className,
+                className: cn("w-full h-full object-contain block", className),
                 onError: () => setSrc(defaultSrc),
                 onLoad: () => setIsLoading(false)
               }

package/dist/esm/components/token-symbol/token-symbol.js

@@ -36,12 +36,12 @@ function TokenSymbol({
       {
         symbol,
         size,
-        className: "rounded-full border-0"
+        className: "rounded-full border-0 shrink-0 self-center"
       }
     ),
-    showSymbol && tokenTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "font-medium", children: tokenTitle }),
-      comment && /* @__PURE__ */ jsxs("div", { className: "text-md text-muted-foreground", children: [
+    showSymbol && tokenTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 self-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs sm:text-sm md:text-base font-medium truncate whitespace-pre-wrap leading-tight", children: tokenTitle }),
+      comment && /* @__PURE__ */ jsxs("div", { className: "text-md text-muted-foreground leading-tight", children: [
         "(",
         comment,
         ")"

package/dist/esm/components/trading-view/graph-dropdown.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Check } from 'lucide-react';
+import { Check, Loader2 } from 'lucide-react';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../select/select.js';
 
@@ -7,7 +7,10 @@ function GraphDropdown({
   items,
   defaultItem,
   onSelected,
-  multiple = false
+  multiple = false,
+  graphsWithNoData,
+  loadingGraphs,
+  onNoDataSelected
 }) {
   const getInitialValue = () => {
     if (multiple) {
@@ -59,6 +62,15 @@ function GraphDropdown({
     (newValue) => {
       const item = items.find((i) => String(i.value) === newValue);
       if (!item) return;
+      if (loadingGraphs?.has(item.value)) {
+        return;
+      }
+      if (graphsWithNoData?.has(item.value)) {
+        if (onNoDataSelected) {
+          onNoDataSelected(item.value, item.label);
+        }
+        return;
+      }
       if (multiple) {
         isSelectingRef.current = true;
         setSelectedItems((prev) => {
@@ -79,7 +91,14 @@ function GraphDropdown({
         onSelected(item.value);
       }
     },
-    [multiple, onSelected, items]
+    [
+      multiple,
+      onSelected,
+      items,
+      graphsWithNoData,
+      loadingGraphs,
+      onNoDataSelected
+    ]
   );
   const title = useMemo(() => {
     if (!multiple) {
@@ -132,16 +151,20 @@ function GraphDropdown({
           ),
           items.map((item, index) => {
             const isChecked = multiple && selectedItems.has(item.value);
+            const isLoading = loadingGraphs?.has(item.value);
+            const isDisabled = isLoading;
             return /* @__PURE__ */ jsx(
               SelectItem,
               {
                 value: String(item.value),
+                disabled: isDisabled,
                 onSelect: (e) => {
                   if (multiple) {
                     e.preventDefault();
                   }
                   handleValueChange(String(item.value));
                 },
+                className: isDisabled ? "opacity-50 cursor-not-allowed" : "",
                 children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   multiple && /* @__PURE__ */ jsx(
                     "span",
@@ -150,7 +173,8 @@ function GraphDropdown({
                       children: isChecked && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
                     }
                   ),
-                  item.label
+                  item.label,
+                  isLoading && /* @__PURE__ */ jsx(Loader2, { className: "ml-1 h-4 w-4 animate-spin text-muted-foreground" })
                 ] })
               },
               `graph-item-${index}-${String(item.value)}`

package/dist/esm/components/trading-view/trading-view.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useRef } from 'react';
+import { useMemo, useCallback, useRef } from 'react';
+import { toast } from 'sonner';
 import { useIsMobile } from '../../hooks/use-media-query.js';
 import { RangeButtons } from '../buttons/range-buttons/range-buttons.js';
 import { DEFAULT_SERIES_COLORS } from '../graph/graph.js';
@@ -55,7 +56,10 @@ function TradingView({
   setRange,
   onGraphExpanded,
   isGraphExpanded,
-  onUnselectSeries
+  onUnselectSeries,
+  graphsWithNoData,
+  loadingGraphs,
+  noDataMessage = "No data available for this graph"
 }) {
   const dataArray = useMemo(() => {
     return Array.isArray(data) ? data : data ? [data] : [];
@@ -64,6 +68,12 @@ function TradingView({
     return Array.isArray(data) && data.length > 1;
   }, [data]);
   const isMobile = useIsMobile();
+  const handleNoDataSelected = useCallback(
+    (_graphValue, _graphLabel) => {
+      toast.error(noDataMessage);
+    },
+    [noDataMessage]
+  );
   const yMeasureUnitSingle = useMemo(() => {
     if (!yMeasureUnit) return void 0;
     return Array.isArray(yMeasureUnit) ? yMeasureUnit[0] : yMeasureUnit;
@@ -75,7 +85,10 @@ function TradingView({
         onSelected: onGraphSelected,
         items: graphs,
         defaultItem: defaultGraph,
-        multiple: isMultipleSelect
+        multiple: isMultipleSelect,
+        graphsWithNoData,
+        loadingGraphs,
+        onNoDataSelected: handleNoDataSelected
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [

package/dist/esm/components/with-filter-button/with-filter-button.js

@@ -23,12 +23,12 @@ const WithFilterButton = React.forwardRef(
       {
         ref,
         className: cn(
-          "w-full flex items-center justify-between gap-4",
+          "w-full flex items-start md:items-center justify-between gap-4 flex-col md:flex-row",
           className
         ),
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-row-reverse md:flex-row", children: [
             onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "default", onClick: onClearAll, children: "Clear all" }),
             /* @__PURE__ */ jsx(
               FilterButton,

package/dist/esm/configs/tailwind-preset.js

@@ -1,3 +1,4 @@
+import tailwindScrollbar from '../_virtual/index.js';
 import tailwindAnimate from 'tailwindcss-animate';
 
 const preset = {
@@ -120,7 +121,7 @@ const preset = {
       }
     }
   },
-  plugins: [tailwindAnimate]
+  plugins: [tailwindAnimate, tailwindScrollbar({ nocompatible: true })]
 };
 
 export { preset as default, preset };