@gearbox-protocol/ui-kit 3.6.0-next.3 → 3.7.0-next.1

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

@@ -2,8 +2,8 @@ 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 { SpinnerLoader as I } from "../spinner-loader/spinner-loader.js";
+import { cn as y } from "../../utils/cn.js";
 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",
@@ -35,41 +35,41 @@ const q = A(
       padding: "default"
     }
   }
-), y = B.forwardRef(
+), R = B.forwardRef(
   ({
     className: n,
     variant: t,
     size: l,
     padding: m,
-    title: r,
-    description: s,
-    toolbar: a,
+    title: a,
+    description: r,
+    toolbar: s,
     loading: i = !1,
     emptyMessage: d,
     error: c,
     children: f,
     ...p
   }, x) => {
-    const u = r || s || a;
+    const u = a || r || s;
     return /* @__PURE__ */ o(
       "div",
       {
         ref: x,
-        className: j(
+        className: y(
           "flex flex-col",
           q({ variant: t, size: l, padding: m, className: n })
         ),
         ...p,
         children: [
           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 })
+            (a || r) && /* @__PURE__ */ o("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 })
             ] }),
-            a && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: a })
+            s && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: s })
           ] }),
           /* @__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 }) }) }),
+            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, width: 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",
@@ -117,7 +117,7 @@ const q = A(
             /* @__PURE__ */ e(
               "div",
               {
-                className: j(
+                className: y(
                   "w-full h-full transition-[filter] duration-300 delay-300",
                   i && "blur-sm pointer-events-none"
                 ),
@@ -130,15 +130,15 @@ const q = A(
     );
   }
 );
-y.displayName = "GraphView";
+R.displayName = "GraphView";
 function X({
   series: n,
   data: t,
   lineColor: l,
   color: m,
-  topColor: r,
-  bottomColor: s,
-  graphId: a,
+  topColor: a,
+  bottomColor: r,
+  graphId: s,
   onUnselectSeries: i,
   loading: d,
   title: c,
@@ -146,8 +146,8 @@ function X({
   toolbar: p,
   emptyMessage: x = "No data available",
   error: u,
-  containerClassName: R,
-  variant: V,
+  containerClassName: V,
+  variant: W,
   size: z,
   padding: G,
   yMeasureUnit: g,
@@ -158,7 +158,7 @@ function X({
     if (n && n.length > 0)
       return n;
     if (t && t.length > 0) {
-      const W = l ?? m;
+      const j = l ?? m;
       return [
         {
           data: t.map((v) => ({
@@ -167,21 +167,21 @@ function X({
           })),
           label: "Value",
           yMeasureUnit: g,
-          ...W && { lineColor: W },
-          ...r && { topColor: r },
-          ...s && { bottomColor: s }
+          ...j && { lineColor: j },
+          ...a && { topColor: a },
+          ...r && { bottomColor: r }
         }
       ];
     }
     return [];
-  }, [n, t, g, l, m, r, s]), H = !d && h.length === 0, b = N(h);
+  }, [n, t, g, l, m, a, r]), S = !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;
+  const k = d && h.length === 0 ? b.current : h, H = k.length > 0;
   return /* @__PURE__ */ e(
-    y,
+    R,
     {
-      className: R,
-      variant: V,
+      className: V,
+      variant: W,
       size: z,
       padding: G,
       title: c,
@@ -189,8 +189,8 @@ function X({
       toolbar: p,
       loading: d,
       error: u,
-      emptyMessage: H ? x : void 0,
-      children: S && !u && /* @__PURE__ */ e(
+      emptyMessage: S ? x : void 0,
+      children: H && !u && /* @__PURE__ */ e(
         O,
         {
           series: k,
@@ -204,21 +204,21 @@ function X({
   );
 }
 function Y(n = 0) {
-  const t = N(null), l = N(null), [m, r] = M(null);
+  const t = N(null), l = N(null), [m, a] = M(null);
   return E(() => {
-    const s = () => {
+    const r = () => {
       if (t.current && l.current) {
         const d = l.current.clientWidth, c = t.current.clientWidth;
-        r(d - c - n);
+        a(d - c - n);
       }
-    }, a = l.current, i = a ? new ResizeObserver(s) : null;
-    return a && i?.observe(a), () => {
-      a && i?.unobserve(a);
+    }, s = l.current, i = s ? new ResizeObserver(r) : null;
+    return s && i?.observe(s), () => {
+      s && i?.unobserve(s);
     };
   }, [n]), { graphWidth: m, parentRef: l, asideRef: t };
 }
 export {
-  y as GraphView,
+  R as GraphView,
   X as GraphViewWithData,
   q as graphViewVariants,
   Y as useGraphAside