@gearbox-protocol/permissionless-ui 1.26.0 → 1.26.2

package/dist/cjs/components/graph/graph-view.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("class-variance-authority"),o=require("react"),V=require("../../utils/cn.cjs"),D=require("./graph.cjs");function L(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(s,a,i.get?i:{enumerable:!0,get:()=>t[a]})}}return s.default=t,Object.freeze(s)}const A=L(o),k=q.cva("relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",{variants:{variant:{default:"shadow",elevated:"shadow-lg",outlined:"border-2",ghost:"border-0 shadow-none"},size:{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:{none:"p-0",sm:"p-2",default:"p-4 sm:p-6",lg:"p-6"}},defaultVariants:{variant:"default",size:"default",padding:"default"}}),j=A.forwardRef(({className:t,variant:s,size:a,padding:i,title:n,description:r,toolbar:l,loading:c=!1,emptyMessage:d,error:u,children:f,...p},v)=>{const m=n||r||l;return e.jsxs("div",{ref:v,className:V.cn("flex flex-col",k({variant:s,size:a,padding:i,className:t})),...p,children:[m&&e.jsxs("div",{className:"mb-4 flex items-start justify-between gap-4 shrink-0",children:[(n||r)&&e.jsxs("div",{className:"flex-1",children:[n&&e.jsx("h3",{className:"text-base sm:text-lg font-semibold leading-none tracking-tight",children:n}),r&&e.jsx("p",{className:"mt-1 text-xs sm:text-sm text-muted-foreground",children:r})]}),l&&e.jsx("div",{className:"shrink-0 w-full",children:l})]}),e.jsxs("div",{className:"relative flex-1 w-full min-h-0",children:[c&&e.jsx("div",{className:"absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in",children:e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"}),e.jsx("span",{className:"text-xs sm:text-sm text-muted-foreground",children:"Loading..."})]})}),u&&e.jsx("div",{className:"flex h-full items-center justify-center",children:e.jsxs("div",{className:"flex flex-col items-center gap-2 text-destructive",children:[e.jsx("svg",{className:"h-12 w-12",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})}),e.jsx("span",{className:"text-xs sm:text-sm font-medium",children:u})]})}),!u&&!f&&d&&e.jsx("div",{className:"flex h-full items-center justify-center",children:e.jsxs("div",{className:"flex flex-col items-center gap-2 text-muted-foreground",children:[e.jsx("svg",{className:"h-12 w-12",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"})}),e.jsx("span",{className:"text-xs sm:text-sm",children:d})]})}),e.jsx("div",{className:V.cn("w-full h-full transition-[filter] duration-300 delay-300",c&&"blur-sm pointer-events-none"),children:!u&&f})]})]})});j.displayName="GraphView";function H({series:t,data:s,lineColor:a,color:i,topColor:n,bottomColor:r,graphId:l,onUnselectSeries:c,loading:d,title:u,description:f,toolbar:p,emptyMessage:v="No data available",error:m,containerClassName:R,variant:G,size:W,padding:S,yMeasureUnit:g,showCurrentValue:b,...O}){const h=o.useMemo(()=>{if(t&&t.length>0)return t;if(s&&s.length>0){const y=a??i;return[{data:s.map(x=>({time:typeof x.time=="number"?x.time:Number(x.time),value:x.value})),label:"Value",yMeasureUnit:g,...y&&{lineColor:y},...n&&{topColor:n},...r&&{bottomColor:r}}]}return[]},[t,s,g,a,i,n,r]),z=!d&&h.length===0,N=o.useRef(h);h.length>0&&(N.current=h);const w=d&&h.length===0?N.current:h,_=w.length>0;return e.jsx(j,{className:R,variant:G,size:W,padding:S,title:u,description:f,toolbar:p,loading:d,error:m,emptyMessage:z?v:void 0,children:_&&!m&&e.jsx(D.Graph,{series:w,yMeasureUnit:g,...c?{onUnselectSeries:c}:{},...b!==void 0?{showCurrentValue:b}:{},...O})})}function M(t=0){const s=o.useRef(null),a=o.useRef(null),[i,n]=o.useState(null);return o.useEffect(()=>{const r=()=>{if(s.current&&a.current){const d=a.current.clientWidth,u=s.current.clientWidth;n(d-u-t)}},l=a.current,c=l?new ResizeObserver(r):null;return l&&c?.observe(l),()=>{l&&c?.unobserve(l)}},[t]),{graphWidth:i,parentRef:a,asideRef:s}}exports.GraphView=j;exports.GraphViewWithData=H;exports.graphViewVariants=k;exports.useGraphAside=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("class-variance-authority"),o=require("react"),q=require("../arc-loader/arc-loader.cjs"),k=require("../../utils/cn.cjs"),A=require("./graph.cjs");function D(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(s,a,l.get?l:{enumerable:!0,get:()=>t[a]})}}return s.default=t,Object.freeze(s)}const H=D(o),V=O.cva("relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",{variants:{variant:{default:"shadow",elevated:"shadow-lg",outlined:"border-2",ghost:"border-0 shadow-none"},size:{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:{none:"p-0",sm:"p-2",default:"p-4 sm:p-6",lg:"p-6"}},defaultVariants:{variant:"default",size:"default",padding:"default"}}),j=H.forwardRef(({className:t,variant:s,size:a,padding:l,title:r,description:n,toolbar:i,loading:c=!1,emptyMessage:d,error:u,children:f,...p},v)=>{const m=r||n||i;return e.jsxs("div",{ref:v,className:k.cn("flex flex-col",V({variant:s,size:a,padding:l,className:t})),...p,children:[m&&e.jsxs("div",{className:"mb-4 flex items-start justify-between gap-4 shrink-0",children:[(r||n)&&e.jsxs("div",{className:"flex-1",children:[r&&e.jsx("h3",{className:"text-base sm:text-lg font-semibold leading-none tracking-tight",children:r}),n&&e.jsx("p",{className:"mt-1 text-xs sm:text-sm text-muted-foreground",children:n})]}),i&&e.jsx("div",{className:"shrink-0 w-full",children:i})]}),e.jsxs("div",{className:"relative flex-1 w-full min-h-0",children:[c&&e.jsx("div",{className:"absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in",children:e.jsx("div",{className:"flex flex-col items-center gap-2",children:e.jsx(q.ArcLoader,{size:32,strokeWidth:3})})}),u&&e.jsx("div",{className:"flex h-full items-center justify-center",children:e.jsxs("div",{className:"flex flex-col items-center gap-2 text-destructive",children:[e.jsx("svg",{className:"h-12 w-12",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})}),e.jsx("span",{className:"text-xs sm:text-sm font-medium",children:u})]})}),!u&&!f&&d&&e.jsx("div",{className:"flex h-full items-center justify-center",children:e.jsxs("div",{className:"flex flex-col items-center gap-2 text-muted-foreground",children:[e.jsx("svg",{className:"h-12 w-12",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"})}),e.jsx("span",{className:"text-xs sm:text-sm",children:d})]})}),e.jsx("div",{className:k.cn("w-full h-full transition-[filter] duration-300 delay-300",c&&"blur-sm pointer-events-none"),children:!u&&f})]})]})});j.displayName="GraphView";function M({series:t,data:s,lineColor:a,color:l,topColor:r,bottomColor:n,graphId:i,onUnselectSeries:c,loading:d,title:u,description:f,toolbar:p,emptyMessage:v="No data available",error:m,containerClassName:R,variant:W,size:G,padding:S,yMeasureUnit:g,showCurrentValue:b,..._}){const h=o.useMemo(()=>{if(t&&t.length>0)return t;if(s&&s.length>0){const y=a??l;return[{data:s.map(x=>({time:typeof x.time=="number"?x.time:Number(x.time),value:x.value})),label:"Value",yMeasureUnit:g,...y&&{lineColor:y},...r&&{topColor:r},...n&&{bottomColor:n}}]}return[]},[t,s,g,a,l,r,n]),z=!d&&h.length===0,N=o.useRef(h);h.length>0&&(N.current=h);const w=d&&h.length===0?N.current:h,L=w.length>0;return e.jsx(j,{className:R,variant:W,size:G,padding:S,title:u,description:f,toolbar:p,loading:d,error:m,emptyMessage:z?v:void 0,children:L&&!m&&e.jsx(A.Graph,{series:w,yMeasureUnit:g,...c?{onUnselectSeries:c}:{},...b!==void 0?{showCurrentValue:b}:{},..._})})}function P(t=0){const s=o.useRef(null),a=o.useRef(null),[l,r]=o.useState(null);return o.useEffect(()=>{const n=()=>{if(s.current&&a.current){const d=a.current.clientWidth,u=s.current.clientWidth;r(d-u-t)}},i=a.current,c=i?new ResizeObserver(n):null;return i&&c?.observe(i),()=>{i&&c?.unobserve(i)}},[t]),{graphWidth:l,parentRef:a,asideRef:s}}exports.GraphView=j;exports.GraphViewWithData=M;exports.graphViewVariants=V;exports.useGraphAside=P;

package/dist/cjs/components/stat-badge/stat-badge.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("class-variance-authority"),y=require("react"),f=require("../status-triangle/status-triangle.cjs"),T=require("../tooltip/simple-tooltip.cjs");require("../tooltip/tooltip.cjs");require("@gearbox-protocol/sdk");const l=require("../../utils/cn.cjs");require("sonner");require("luxon");require("../../utils/z-index.cjs");function w(a){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(s,e,i.get?i:{enumerable:!0,get:()=>a[e]})}}return s.default=a,Object.freeze(s)}const x=w(y),p=d.cva("w-full h-full rounded-lg border transition-colors",{variants:{variant:{filled:"bg-card border-border",outlined:"bg-transparent border-border",elevated:"bg-card border-border shadow-md",primary:"bg-primary/10 border-primary/20"},size:{sm:"p-4",md:"p-5",default:"p-6"}},defaultVariants:{variant:"filled",size:"default"}}),v=d.cva("font-medium text-muted-foreground",{variants:{size:{sm:"text-xs leading-[0.8125rem]",md:"text-xs leading-[0.9rem]",default:"text-sm leading-[1.0625rem]"}},defaultVariants:{size:"default"}}),b=d.cva("font-medium text-foreground flex",{variants:{size:{sm:"text-sm leading-[1.0625rem]",md:"text-base leading-[1.25rem]",default:"text-xl leading-[1.5625rem]"}},defaultVariants:{size:"default"}}),j=x.forwardRef(({className:a,variant:s,size:e,title:i,titleInfo:n,value:o,valueDescription:c,delta:t,...S},N)=>{const V=()=>{if(n?.text!=null)return n.text;if(t!=null){if(!(t&&t.value!==void 0&&t.value!==0))return null;const g=t.value<0,u=t.value>0,m=r.jsxs("div",{className:l.cn("inline-flex items-center gap-1 text-xs font-medium",g&&"text-destructive",u&&"text-success"),children:[u&&(t.positiveIcon||r.jsx(f.StatusTriangle,{size:4})),g&&(t.negativeIcon||r.jsx(f.StatusTriangle,{size:4,isNegative:!0})),t.label&&r.jsx("span",{children:t.label})]});return t.tooltip!=null?r.jsx(T.SimpleTooltip,{title:r.jsx("div",{className:"cursor-help",children:m}),children:t.tooltip}):m}return null},q=e==="sm"?"mb-2.5":e==="md"?"mb-2":"mb-3";return r.jsxs("div",{ref:N,className:l.cn(p({variant:s,size:e}),a),...S,children:[r.jsxs("div",{className:l.cn("flex items-center",q),children:[r.jsx("div",{className:l.cn(v({size:e}),"flex-1 flex items-center gap-1"),children:i}),V()]}),r.jsxs("div",{className:l.cn(b({size:e})),children:[o,c&&r.jsx("span",{className:"text-muted-foreground text-sm ml-1",children:c})]})]})});j.displayName="StatBadge";const h=d.cva("grid w-full",{variants:{cols:{1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",4:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",5:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",6:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"},gap:{sm:"gap-2",default:"gap-4",lg:"gap-6",xl:"gap-8"}},defaultVariants:{cols:4,gap:"default"}}),B=x.forwardRef(({className:a,cols:s,gap:e,children:i,...n},o)=>r.jsx("div",{ref:o,className:l.cn(h({cols:s,gap:e}),a),...n,children:i}));B.displayName="StatBadgeGrid";exports.StatBadge=j;exports.StatBadgeGrid=B;exports.statBadgeContentVariants=b;exports.statBadgeGridVariants=h;exports.statBadgeTitleVariants=v;exports.statBadgeVariants=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("class-variance-authority"),y=require("react"),p=require("../status-triangle/status-triangle.cjs"),T=require("../tooltip/simple-tooltip.cjs");require("../tooltip/tooltip.cjs");require("@gearbox-protocol/sdk");const i=require("../../utils/cn.cjs");require("sonner");require("luxon");require("../../utils/z-index.cjs");function w(r){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(a,t,l.get?l:{enumerable:!0,get:()=>r[t]})}}return a.default=r,Object.freeze(a)}const v=w(y),b=n.cva("w-full h-full rounded-lg border transition-colors",{variants:{variant:{filled:"bg-card border-border",outlined:"bg-transparent border-border",elevated:"bg-card border-border shadow-md",primary:"bg-primary/10 border-primary/20"},size:{sm:"p-4",md:"p-5",default:"p-6"}},defaultVariants:{variant:"filled",size:"default"}}),j=n.cva("font-medium text-muted-foreground",{variants:{size:{sm:"text-xs leading-[0.8125rem]",md:"text-xs leading-[0.9rem]",default:"text-sm leading-[1.0625rem]"}},defaultVariants:{size:"default"}}),h=n.cva("font-medium text-foreground flex",{variants:{size:{sm:"text-sm leading-[1.0625rem]",md:"text-base leading-[1.25rem]",default:"text-xl leading-[1.5625rem]"}},defaultVariants:{size:"default"}}),B=v.forwardRef(({className:r,variant:a,size:t,title:l,titleInfo:d,value:c,valueDescription:o,delta:e,...g},u)=>{const V=()=>{if(d?.text!=null)return d.text;if(e!=null){if(!(e&&e.value!==void 0&&e.value!==0))return null;const m=e.value<0,f=e.value>0,x=s.jsxs("div",{className:i.cn("inline-flex items-center gap-1 text-xs font-medium",m&&"text-destructive",f&&"text-success"),children:[f&&(e.positiveIcon||s.jsx(p.StatusTriangle,{size:4})),m&&(e.negativeIcon||s.jsx(p.StatusTriangle,{size:4,isNegative:!0})),e.label&&s.jsx("span",{children:e.label})]});return e.tooltip!=null?s.jsx(T.SimpleTooltip,{title:s.jsx("div",{className:"cursor-help",children:x}),children:e.tooltip}):x}return null},q=t==="sm"?"mb-2.5":t==="md"?"mb-2":"mb-3";return s.jsxs("div",{ref:u,className:i.cn(b({variant:a,size:t}),r),...g,children:[s.jsxs("div",{className:i.cn("flex items-center",q),children:[s.jsx("div",{className:i.cn(j({size:t}),"flex-1 flex items-center gap-1"),children:l}),V()]}),s.jsxs("div",{className:i.cn(h({size:t})),children:[c,o&&s.jsx("span",{className:"text-muted-foreground text-sm ml-1",children:o})]})]})});B.displayName="StatBadge";const S=n.cva("grid w-full",{variants:{cols:{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6"},colsSm:{1:"sm:grid-cols-1",2:"sm:grid-cols-2",3:"sm:grid-cols-3",4:"sm:grid-cols-4",5:"sm:grid-cols-5",6:"sm:grid-cols-6"},colsMd:{1:"md:grid-cols-1",2:"md:grid-cols-2",3:"md:grid-cols-3",4:"md:grid-cols-4",5:"md:grid-cols-5",6:"md:grid-cols-6"},colsLg:{1:"lg:grid-cols-1",2:"lg:grid-cols-2",3:"lg:grid-cols-3",4:"lg:grid-cols-4",5:"lg:grid-cols-5",6:"lg:grid-cols-6"},colsXl:{1:"xl:grid-cols-1",2:"xl:grid-cols-2",3:"xl:grid-cols-3",4:"xl:grid-cols-4",5:"xl:grid-cols-5",6:"xl:grid-cols-6"},gap:{sm:"gap-2",default:"gap-4",lg:"gap-6",xl:"gap-8"}},defaultVariants:{cols:1,colsMd:2,colsLg:3,colsXl:4,gap:"default"}}),N=v.forwardRef(({className:r,cols:a,colsSm:t,colsMd:l,colsLg:d,colsXl:c,gap:o,children:e,...g},u)=>s.jsx("div",{ref:u,className:i.cn(S({cols:a,colsSm:t,colsMd:l,colsLg:d,colsXl:c,gap:o}),r),...g,children:e}));N.displayName="StatBadgeGrid";exports.StatBadge=B;exports.StatBadgeGrid=N;exports.statBadgeContentVariants=h;exports.statBadgeGridVariants=S;exports.statBadgeTitleVariants=j;exports.statBadgeVariants=b;

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

@@ -1,10 +1,11 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { cva as A } from "class-variance-authority";
 import * as B from "react";
 import { useMemo as D, useRef as N, useState as M, useEffect as E } from "react";
+import { ArcLoader as I } from "../arc-loader/arc-loader.js";
 import { cn as j } from "../../utils/cn.js";
-import { Graph as I } from "./graph.js";
-const O = A(
+import { Graph as O } from "./graph.js";
+const q = A(
   "relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",
   {
     variants: {
@@ -34,45 +35,42 @@ const O = A(
       padding: "default"
     }
   }
-), R = B.forwardRef(
+), y = B.forwardRef(
   ({
     className: n,
     variant: t,
     size: l,
-    padding: o,
-    title: a,
-    description: r,
-    toolbar: s,
+    padding: m,
+    title: r,
+    description: s,
+    toolbar: a,
     loading: i = !1,
     emptyMessage: d,
     error: c,
     children: f,
-    ...x
-  }, p) => {
-    const u = a || r || s;
-    return /* @__PURE__ */ m(
+    ...p
+  }, x) => {
+    const u = r || s || a;
+    return /* @__PURE__ */ o(
       "div",
       {
-        ref: p,
+        ref: x,
         className: j(
           "flex flex-col",
-          O({ variant: t, size: l, padding: o, className: n })
+          q({ variant: t, size: l, padding: m, className: n })
         ),
-        ...x,
+        ...p,
         children: [
-          u && /* @__PURE__ */ m("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
-            (a || r) && /* @__PURE__ */ m("div", { className: "flex-1", children: [
-              a && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: a }),
-              r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: r })
+          u && /* @__PURE__ */ o("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
+            (r || s) && /* @__PURE__ */ o("div", { className: "flex-1", children: [
+              r && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: r }),
+              s && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: s })
             ] }),
-            s && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: s })
+            a && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: a })
           ] }),
-          /* @__PURE__ */ m("div", { className: "relative flex-1 w-full min-h-0", children: [
-            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2", children: [
-              /* @__PURE__ */ e("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
-              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm text-muted-foreground", children: "Loading..." })
-            ] }) }),
-            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
+          /* @__PURE__ */ o("div", { className: "relative flex-1 w-full min-h-0", children: [
+            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(I, { size: 32, strokeWidth: 3 }) }) }),
+            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
               /* @__PURE__ */ e(
                 "svg",
                 {
@@ -94,7 +92,7 @@ const O = A(
               ),
               /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm font-medium", children: c })
             ] }) }),
-            !c && !f && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+            !c && !f && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ e(
                 "svg",
                 {
@@ -132,35 +130,35 @@ const O = A(
     );
   }
 );
-R.displayName = "GraphView";
-function Q({
+y.displayName = "GraphView";
+function X({
   series: n,
   data: t,
   lineColor: l,
-  color: o,
-  topColor: a,
-  bottomColor: r,
-  graphId: s,
+  color: m,
+  topColor: r,
+  bottomColor: s,
+  graphId: a,
   onUnselectSeries: i,
   loading: d,
   title: c,
   description: f,
-  toolbar: x,
-  emptyMessage: p = "No data available",
+  toolbar: p,
+  emptyMessage: x = "No data available",
   error: u,
-  containerClassName: V,
-  variant: W,
-  size: G,
-  padding: z,
+  containerClassName: R,
+  variant: V,
+  size: z,
+  padding: G,
   yMeasureUnit: g,
-  showCurrentValue: b,
+  showCurrentValue: w,
   ...L
 }) {
   const h = D(() => {
     if (n && n.length > 0)
       return n;
     if (t && t.length > 0) {
-      const y = l ?? o;
+      const W = l ?? m;
       return [
         {
           data: t.map((v) => ({
@@ -169,59 +167,59 @@ function Q({
           })),
           label: "Value",
           yMeasureUnit: g,
-          ...y && { lineColor: y },
-          ...a && { topColor: a },
-          ...r && { bottomColor: r }
+          ...W && { lineColor: W },
+          ...r && { topColor: r },
+          ...s && { bottomColor: s }
         }
       ];
     }
     return [];
-  }, [n, t, g, l, o, a, r]), H = !d && h.length === 0, w = N(h);
-  h.length > 0 && (w.current = h);
-  const k = d && h.length === 0 ? w.current : h, S = k.length > 0;
+  }, [n, t, g, l, m, r, s]), H = !d && h.length === 0, b = N(h);
+  h.length > 0 && (b.current = h);
+  const k = d && h.length === 0 ? b.current : h, S = k.length > 0;
   return /* @__PURE__ */ e(
-    R,
+    y,
     {
-      className: V,
-      variant: W,
-      size: G,
-      padding: z,
+      className: R,
+      variant: V,
+      size: z,
+      padding: G,
       title: c,
       description: f,
-      toolbar: x,
+      toolbar: p,
       loading: d,
       error: u,
-      emptyMessage: H ? p : void 0,
+      emptyMessage: H ? x : void 0,
       children: S && !u && /* @__PURE__ */ e(
-        I,
+        O,
         {
           series: k,
           yMeasureUnit: g,
           ...i ? { onUnselectSeries: i } : {},
-          ...b !== void 0 ? { showCurrentValue: b } : {},
+          ...w !== void 0 ? { showCurrentValue: w } : {},
           ...L
         }
       )
     }
   );
 }
-function T(n = 0) {
-  const t = N(null), l = N(null), [o, a] = M(null);
+function Y(n = 0) {
+  const t = N(null), l = N(null), [m, r] = M(null);
   return E(() => {
-    const r = () => {
+    const s = () => {
       if (t.current && l.current) {
         const d = l.current.clientWidth, c = t.current.clientWidth;
-        a(d - c - n);
+        r(d - c - n);
       }
-    }, s = l.current, i = s ? new ResizeObserver(r) : null;
-    return s && i?.observe(s), () => {
-      s && i?.unobserve(s);
+    }, a = l.current, i = a ? new ResizeObserver(s) : null;
+    return a && i?.observe(a), () => {
+      a && i?.unobserve(a);
     };
-  }, [n]), { graphWidth: o, parentRef: l, asideRef: t };
+  }, [n]), { graphWidth: m, parentRef: l, asideRef: t };
 }
 export {
-  R as GraphView,
-  Q as GraphViewWithData,
-  O as graphViewVariants,
-  T as useGraphAside
+  y as GraphView,
+  X as GraphViewWithData,
+  q as graphViewVariants,
+  Y as useGraphAside
 };

package/dist/esm/components/stat-badge/stat-badge.js

@@ -1,15 +1,15 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { cva as l } from "class-variance-authority";
-import * as x from "react";
-import { StatusTriangle as p } from "../status-triangle/status-triangle.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cva as d } from "class-variance-authority";
+import * as b from "react";
+import { StatusTriangle as v } from "../status-triangle/status-triangle.js";
 import { SimpleTooltip as B } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import "@gearbox-protocol/sdk";
-import { cn as a } from "../../utils/cn.js";
+import { cn as l } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-const V = l(
+const S = d(
   "w-full h-full rounded-lg border transition-colors",
   {
     variants: {
@@ -30,7 +30,7 @@ const V = l(
       size: "default"
     }
   }
-), w = l("font-medium text-muted-foreground", {
+), V = d("font-medium text-muted-foreground", {
   variants: {
     size: {
       sm: "text-xs leading-[0.8125rem]",
@@ -41,7 +41,7 @@ const V = l(
   defaultVariants: {
     size: "default"
   }
-}), S = l("font-medium text-foreground flex", {
+}), w = d("font-medium text-foreground flex", {
   variants: {
     size: {
       sm: "text-sm leading-[1.0625rem]",
@@ -52,70 +52,70 @@ const V = l(
   defaultVariants: {
     size: "default"
   }
-}), y = x.forwardRef(
+}), y = b.forwardRef(
   ({
-    className: d,
-    variant: o,
-    size: r,
-    title: n,
-    titleInfo: i,
-    value: m,
-    valueDescription: c,
-    delta: e,
-    ...v
-  }, b) => {
+    className: o,
+    variant: c,
+    size: t,
+    title: m,
+    titleInfo: s,
+    value: n,
+    valueDescription: i,
+    delta: r,
+    ...g
+  }, u) => {
     const h = () => {
-      if (i?.text != null) return i.text;
-      if (e != null) {
-        if (!(e && e.value !== void 0 && e.value !== 0)) return null;
-        const g = e.value < 0, u = e.value > 0, f = /* @__PURE__ */ s(
+      if (s?.text != null) return s.text;
+      if (r != null) {
+        if (!(r && r.value !== void 0 && r.value !== 0)) return null;
+        const f = r.value < 0, p = r.value > 0, x = /* @__PURE__ */ a(
           "div",
           {
-            className: a(
+            className: l(
               "inline-flex items-center gap-1 text-xs font-medium",
-              g && "text-destructive",
-              u && "text-success"
+              f && "text-destructive",
+              p && "text-success"
             ),
             children: [
-              u && (e.positiveIcon || /* @__PURE__ */ t(p, { size: 4 })),
-              g && (e.negativeIcon || /* @__PURE__ */ t(p, { size: 4, isNegative: !0 })),
-              e.label && /* @__PURE__ */ t("span", { children: e.label })
+              p && (r.positiveIcon || /* @__PURE__ */ e(v, { size: 4 })),
+              f && (r.negativeIcon || /* @__PURE__ */ e(v, { size: 4, isNegative: !0 })),
+              r.label && /* @__PURE__ */ e("span", { children: r.label })
             ]
           }
         );
-        return e.tooltip != null ? /* @__PURE__ */ t(
+        return r.tooltip != null ? /* @__PURE__ */ e(
           B,
           {
-            title: /* @__PURE__ */ t("div", { className: "cursor-help", children: f }),
-            children: e.tooltip
+            title: /* @__PURE__ */ e("div", { className: "cursor-help", children: x }),
+            children: r.tooltip
           }
-        ) : f;
+        ) : x;
       }
       return null;
-    }, N = r === "sm" ? "mb-2.5" : r === "md" ? "mb-2" : "mb-3";
-    return /* @__PURE__ */ s(
+    }, N = t === "sm" ? "mb-2.5" : t === "md" ? "mb-2" : "mb-3";
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: b,
-        className: a(V({ variant: o, size: r }), d),
-        ...v,
+        ref: u,
+        className: l(S({ variant: c, size: t }), o),
+        ...g,
         children: [
-          /* @__PURE__ */ s("div", { className: a("flex items-center", N), children: [
-            /* @__PURE__ */ t(
+          /* @__PURE__ */ a("div", { className: l("flex items-center", N), children: [
+            /* @__PURE__ */ e(
               "div",
               {
-                className: a(
-                  w({ size: r }),
+                className: l(
+                  V({ size: t }),
                   "flex-1 flex items-center gap-1"
                 ),
-                children: n
+                children: m
               }
             ),
             h()
           ] }),
-          /* @__PURE__ */ s("div", { className: a(S({ size: r })), children: [
-            m,
-            c && /* @__PURE__ */ t("span", { className: "text-muted-foreground text-sm ml-1", children: c })
+          /* @__PURE__ */ a("div", { className: l(w({ size: t })), children: [
+            n,
+            i && /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm ml-1", children: i })
           ] })
         ]
       }
@@ -123,15 +123,47 @@ const V = l(
   }
 );
 y.displayName = "StatBadge";
-const z = l("grid w-full", {
+const z = d("grid w-full", {
   variants: {
     cols: {
       1: "grid-cols-1",
-      2: "grid-cols-1 md:grid-cols-2",
-      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-      5: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-      6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6"
+    },
+    colsSm: {
+      1: "sm:grid-cols-1",
+      2: "sm:grid-cols-2",
+      3: "sm:grid-cols-3",
+      4: "sm:grid-cols-4",
+      5: "sm:grid-cols-5",
+      6: "sm:grid-cols-6"
+    },
+    colsMd: {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-4",
+      5: "md:grid-cols-5",
+      6: "md:grid-cols-6"
+    },
+    colsLg: {
+      1: "lg:grid-cols-1",
+      2: "lg:grid-cols-2",
+      3: "lg:grid-cols-3",
+      4: "lg:grid-cols-4",
+      5: "lg:grid-cols-5",
+      6: "lg:grid-cols-6"
+    },
+    colsXl: {
+      1: "xl:grid-cols-1",
+      2: "xl:grid-cols-2",
+      3: "xl:grid-cols-3",
+      4: "xl:grid-cols-4",
+      5: "xl:grid-cols-5",
+      6: "xl:grid-cols-6"
     },
     gap: {
       sm: "gap-2",
@@ -141,24 +173,42 @@ const z = l("grid w-full", {
     }
   },
   defaultVariants: {
-    cols: 4,
+    cols: 1,
+    colsMd: 2,
+    colsLg: 3,
+    colsXl: 4,
     gap: "default"
   }
-}), G = x.forwardRef(({ className: d, cols: o, gap: r, children: n, ...i }, m) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: m,
-    className: a(z({ cols: o, gap: r }), d),
-    ...i,
-    children: n
-  }
-));
+}), G = b.forwardRef(
+  ({
+    className: o,
+    cols: c,
+    colsSm: t,
+    colsMd: m,
+    colsLg: s,
+    colsXl: n,
+    gap: i,
+    children: r,
+    ...g
+  }, u) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: u,
+      className: l(
+        z({ cols: c, colsSm: t, colsMd: m, colsLg: s, colsXl: n, gap: i }),
+        o
+      ),
+      ...g,
+      children: r
+    }
+  )
+);
 G.displayName = "StatBadgeGrid";
 export {
   y as StatBadge,
   G as StatBadgeGrid,
-  S as statBadgeContentVariants,
+  w as statBadgeContentVariants,
   z as statBadgeGridVariants,
-  w as statBadgeTitleVariants,
-  V as statBadgeVariants
+  V as statBadgeTitleVariants,
+  S as statBadgeVariants
 };

package/dist/types/components/stat-badge/stat-badge.d.ts

@@ -136,6 +136,10 @@ export interface StatBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement
 export declare const StatBadge: React.ForwardRefExoticComponent<StatBadgeProps & React.RefAttributes<HTMLDivElement>>;
 declare const statBadgeGridVariants: (props?: ({
     cols?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    colsSm?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    colsMd?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    colsLg?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    colsXl?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
     gap?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface StatBadgeGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statBadgeGridVariants> {
@@ -143,6 +147,10 @@ export interface StatBadgeGridProps extends React.HTMLAttributes<HTMLDivElement>
      * Number of columns in the grid (responsive breakpoints applied automatically)
      */
     cols?: 1 | 2 | 3 | 4 | 5 | 6;
+    colsSm?: 1 | 2 | 3 | 4 | 5 | 6;
+    colsMd?: 1 | 2 | 3 | 4 | 5 | 6;
+    colsLg?: 1 | 2 | 3 | 4 | 5 | 6;
+    colsXl?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * Gap size between grid items
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",