@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

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

@@ -1,294 +1,293 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { useMemo as I, useCallback as fe, useRef as C } from "react";
-import { toast as be } from "sonner";
-import { SectionHeading as we } from "../base/section-heading/section-heading.js";
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useMemo as I, useCallback as pe, useRef as N } from "react";
+import { toast as ve } from "sonner";
+import { SectionHeading as Se } from "../base/section-heading/section-heading.js";
 import { useIsMobile as he } from "../../hooks/use-media-query.js";
-import "@gearbox-protocol/sdk";
-import { cn as pe } from "../../utils/cn.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { cn as xe } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { DEFAULT_SERIES_COLORS as T, getSeriesColorPalette as ve, GraphLegend as ge } from "../graph/graph.js";
-import { GraphViewWithData as xe } from "../graph/graph-view.js";
-import { Select as Se, SelectTrigger as ye, SelectValue as Ae, SelectContent as Ie, SelectItem as Ce } from "../select/select.js";
-import { GraphDropdown as Ne } from "./graph-dropdown.js";
-const Me = ({ size: e = 16 }) => /* @__PURE__ */ p(
-  "svg",
-  {
-    width: e,
-    height: e,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-label": "Expand fullscreen",
-    children: [
-      /* @__PURE__ */ n("title", { children: "Expand fullscreen" }),
-      /* @__PURE__ */ n("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
-    ]
-  }
-), ke = ({ size: e = 16 }) => /* @__PURE__ */ p(
-  "svg",
-  {
-    width: e,
-    height: e,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-label": "Exit fullscreen",
-    children: [
-      /* @__PURE__ */ n("title", { children: "Exit fullscreen" }),
-      /* @__PURE__ */ n("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
-    ]
-  }
-), Ee = {
+import { GraphLegend as ge } from "../graph/graph.js";
+import { GraphViewWithData as ye } from "../graph/graph-view.js";
+import { DEFAULT_SERIES_COLORS as j } from "../graph/graph-vocabulary.js";
+import { getSeriesColorPalette as Ae } from "../graph/series-palette.js";
+import { Select as Ie, SelectTrigger as Ne, SelectValue as Ce, SelectContent as Me, SelectItem as Re } from "../select/select.js";
+import { GraphDropdown as Te } from "./graph-dropdown.js";
+import { PriceScaleTitles as Ee } from "./price-scale-titles.js";
+const Oe = {
+  expand: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3",
+  exit: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"
+}, q = ({
+  direction: r,
+  size: t = 16
+}) => {
+  const l = r === "expand" ? "Expand fullscreen" : "Exit fullscreen";
+  return /* @__PURE__ */ x(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-label": l,
+      children: [
+        /* @__PURE__ */ n("title", { children: l }),
+        /* @__PURE__ */ n("path", { d: Oe[r] })
+      ]
+    }
+  );
+}, ke = {
   timeScale: { borderVisible: !1 },
   rightPriceScale: { borderVisible: !1 },
   leftPriceScale: { borderVisible: !1 }
-}, X = "ui-kit:tradingview-series-colors:";
-function j(e) {
+}, Z = "ui-kit:tradingview-series-colors:";
+function V(r) {
   if (typeof window > "u" || !window.localStorage)
     return /* @__PURE__ */ new Map();
   try {
-    const r = window.localStorage.getItem(X + e);
-    if (!r) return /* @__PURE__ */ new Map();
-    const c = JSON.parse(r);
-    return c == null || typeof c != "object" ? /* @__PURE__ */ new Map() : new Map(
-      Object.entries(c).filter(
-        ([, o]) => typeof o == "number" && o >= 0 && o < T.length
+    const t = window.localStorage.getItem(Z + r);
+    if (!t) return /* @__PURE__ */ new Map();
+    const l = JSON.parse(t);
+    return l == null || typeof l != "object" ? /* @__PURE__ */ new Map() : new Map(
+      Object.entries(l).filter(
+        ([, o]) => typeof o == "number" && o >= 0 && o < j.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function Re(e, r) {
+function Le(r, t) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        X + e,
-        JSON.stringify(Object.fromEntries(r))
+        Z + r,
+        JSON.stringify(Object.fromEntries(t))
       );
     } catch {
     }
 }
-function $(e, r) {
-  if (r.size === 0) return;
-  const c = j(e);
-  for (const [o, v] of r)
-    c.set(o, v);
-  Re(e, c);
+function Q(r, t) {
+  if (t.size === 0) return;
+  const l = V(r);
+  for (const [o, v] of t)
+    l.set(o, v);
+  Le(r, l);
 }
-function Ze({
-  data: e,
-  yMeasureUnit: r,
-  height: c = 306,
+function Ke({
+  data: r,
+  yMeasureUnit: t,
+  height: l = 306,
   defaultGraph: o,
   onGraphSelected: v,
   graphs: f,
-  isMultipleSelect: q,
-  range: Q,
-  rangeList: S,
-  setRange: Y,
-  onGraphExpanded: N,
-  isGraphExpanded: Z,
-  onUnselectSeries: L,
-  graphsWithNoData: D,
+  isMultipleSelect: P,
+  range: Y,
+  rangeList: g,
+  setRange: D,
+  onGraphExpanded: C,
+  isGraphExpanded: U,
+  onUnselectSeries: _,
+  legendMarkers: z,
+  graphsWithNoData: K,
   loadingGraphs: M,
-  isLoading: V,
-  noDataMessage: _ = "No data available for this graph",
-  currentValueDecimals: P,
-  containerClassName: U,
-  useSharedPriceScale: K,
-  showCurrentValue: G,
-  yScaleMin: ee,
-  yScaleMinMultiple: te,
+  isLoading: F,
+  noDataMessage: H = "No data available for this graph",
+  currentValueDecimals: G,
+  containerClassName: ee,
+  useSharedPriceScale: te,
+  dualYAxis: B,
+  showCurrentValue: re,
+  yScaleMin: oe,
+  yScaleMinMultiple: ne,
   seriesColorPersistenceKey: d,
-  title: re,
-  trailing: k,
-  ...oe
+  title: le,
+  trailing: R,
+  ...ie
 }) {
-  const g = I(() => Array.isArray(e) ? e : e ? [e] : [], [e]), ne = I(() => Array.isArray(e) && e.length > 1, [e]), z = he(), le = fe(
+  const S = I(() => Array.isArray(r) ? r : r ? [r] : [], [r]), se = I(() => Array.isArray(r) && r.length > 1, [r]), T = he(), ce = pe(
     (u, y) => {
-      be.error(_);
+      ve.error(H);
     },
-    [_]
-  ), ie = I(() => {
-    if (r)
-      return Array.isArray(r) ? r[0] : r;
-  }, [r]), se = !!(v && f && o), i = C(/* @__PURE__ */ new Map()), b = C(0), F = C(!1);
-  if (f && f.length > 0 && !F.current) {
-    F.current = !0;
-    const u = d ? j(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
-    i.current.set(y, 0), b.current = 1;
-    for (let t = 1; t < f.length; t++) {
-      const a = String(f[t].value);
-      if (i.current.has(a)) continue;
-      const x = u.get(a) ?? t;
-      i.current.set(a, x), b.current = Math.max(b.current, x + 1);
+    [H]
+  ), ue = I(() => {
+    if (t)
+      return Array.isArray(t) ? t[0] : t;
+  }, [t]), de = !!(v && f && o), s = N(/* @__PURE__ */ new Map()), b = N(0), J = N(!1);
+  if (f && f.length > 0 && !J.current) {
+    J.current = !0;
+    const u = d ? V(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
+    s.current.set(y, 0), b.current = 1;
+    for (let e = 1; e < f.length; e++) {
+      const m = String(f[e].value);
+      if (s.current.has(m)) continue;
+      const h = u.get(m) ?? e;
+      s.current.set(m, h), b.current = Math.max(b.current, h + 1);
     }
-    d && $(
+    d && Q(
       d,
-      i.current
+      s.current
     );
   }
   const w = I(() => {
-    const u = Array.isArray(r) ? r : void 0;
+    const u = Array.isArray(t) ? t : void 0;
     if (d) {
-      const t = j(d);
-      for (const [a, h] of t)
-        i.current.has(a) || (i.current.set(a, h), b.current = Math.max(
+      const e = V(d);
+      for (const [m, p] of e)
+        s.current.has(m) || (s.current.set(m, p), b.current = Math.max(
           b.current,
-          h + 1
+          p + 1
         ));
     }
-    const y = g.map((t, a) => {
-      const h = t?.title || `Series ${a + 1}`, x = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, R = g.length === 1 ? x != null ? String(x) : "single" : t?.id || h;
-      if (!i.current.has(R)) {
-        const l = new Set(
-          Array.from(i.current.values())
+    const y = S.map((e, m) => {
+      const p = e?.title || `Series ${m + 1}`, h = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, k = S.length === 1 ? h != null ? String(h) : "single" : e?.id || p;
+      if (!s.current.has(k)) {
+        const i = new Set(
+          Array.from(s.current.values())
         );
-        let s = b.current;
-        for (let m = 0; m < T.length; m++) {
-          const A = (b.current + m) % T.length;
-          if (!l.has(A)) {
-            s = A;
+        let c = b.current;
+        for (let a = 0; a < j.length; a++) {
+          const A = (b.current + a) % j.length;
+          if (!i.has(A)) {
+            c = A;
             break;
           }
         }
-        i.current.set(R, s), b.current = s + 1;
+        s.current.set(k, c), b.current = c + 1;
       }
-      const ae = i.current.get(R) ?? 0, O = ve(ae), me = [...t?.data || []].sort((l, s) => {
-        const m = typeof l.time == "number" ? l.time : Number(l.time), A = typeof s.time == "number" ? s.time : Number(s.time);
-        return m - A;
-      }).reduce((l, s) => {
-        const m = s.time;
-        return l.length === 0 || l[l.length - 1].time !== m ? l.push({ time: m, value: s.value }) : l[l.length - 1] = { time: m, value: s.value }, l;
-      }, []), J = t?.lineColor ?? t?.color ?? void 0;
+      const be = s.current.get(k) ?? 0, L = Ae(be), we = [...e?.data || []].sort((i, c) => {
+        const a = typeof i.time == "number" ? i.time : Number(i.time), A = typeof c.time == "number" ? c.time : Number(c.time);
+        return a - A;
+      }).reduce((i, c) => {
+        const a = c.time;
+        return i.length === 0 || i[i.length - 1].time !== a ? i.push({ time: a, value: c.value }) : i[i.length - 1] = { time: a, value: c.value }, i;
+      }, []), X = e?.lineColor ?? e?.color ?? void 0;
       return {
-        data: me,
-        label: h,
-        yMeasureUnit: u?.[a] ?? (Array.isArray(r) ? void 0 : r),
-        ...t?.priceScaleId != null && {
-          priceScaleId: t.priceScaleId
+        data: we,
+        label: p,
+        ...e?.id != null && { id: e.id },
+        yMeasureUnit: u?.[m] ?? (Array.isArray(t) ? void 0 : t),
+        ...e?.priceScaleId != null && {
+          priceScaleId: e.priceScaleId
         },
-        ...t?.seriesType != null && {
-          seriesType: t.seriesType
+        ...e?.seriesType != null && {
+          seriesType: e.seriesType
         },
-        ...t?.lineStyle != null && {
-          lineStyle: t.lineStyle
+        ...e?.lineStyle != null && {
+          lineStyle: e.lineStyle
         },
-        ...J != null ? {
-          lineColor: J,
-          ...t?.topColor != null && {
-            topColor: t.topColor
+        ...X != null ? {
+          lineColor: X,
+          ...e?.topColor != null && {
+            topColor: e.topColor
           },
-          ...t?.bottomColor != null && {
-            bottomColor: t.bottomColor
+          ...e?.bottomColor != null && {
+            bottomColor: e.bottomColor
           }
         } : {
-          color: O.line,
-          topColor: O.top,
-          bottomColor: O.bottom
+          color: L.line,
+          topColor: L.top,
+          bottomColor: L.bottom
         }
       };
     });
-    return d && i.current.size > 0 && $(
+    return d && s.current.size > 0 && Q(
       d,
-      i.current
+      s.current
     ), y;
-  }, [g, o, r, d]), H = V !== void 0 ? V : M !== void 0 ? M.size > 0 : ne && g.length > 0 ? g.some((u) => !u) : !e, B = C(w);
-  w.length > 0 && (B.current = w);
-  const W = w.length > 0 ? w : H ? B.current : w, E = re, ce = !z && N ? !0 : S.length > 0 || se || E != null || k != null, ue = v && f && o ? /* @__PURE__ */ n(
-    Ne,
+  }, [S, o, t, d]), W = F !== void 0 ? F : M !== void 0 ? M.size > 0 : se && S.length > 0 ? S.some((u) => !u) : !r, $ = N(w);
+  w.length > 0 && ($.current = w);
+  const E = w.length > 0 ? w : W ? $.current : w, O = le, me = !T && C ? !0 : g.length > 0 || de || O != null || R != null, ae = v && f && o ? /* @__PURE__ */ n(
+    Te,
     {
       onSelected: v,
       items: f,
       defaultItem: o,
-      multiple: q,
-      graphsWithNoData: D,
+      multiple: P,
+      graphsWithNoData: K,
       loadingGraphs: M,
-      onNoDataSelected: le
+      onNoDataSelected: ce
     }
-  ) : E != null ? /* @__PURE__ */ n(we, { className: "min-w-0 truncate", children: E }) : null, de = ce && /* @__PURE__ */ p("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
-    /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: ue }),
-    /* @__PURE__ */ p("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
-      k,
-      k != null && S.length > 0 ? /* @__PURE__ */ n("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
-      S.length > 0 ? /* @__PURE__ */ p(Se, { value: Q, onValueChange: Y, children: [
+  ) : O != null ? /* @__PURE__ */ n(Se, { className: "min-w-0 truncate", children: O }) : null, fe = me && /* @__PURE__ */ x("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: ae }),
+    /* @__PURE__ */ x("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
+      R,
+      R != null && g.length > 0 ? /* @__PURE__ */ n("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
+      g.length > 0 ? /* @__PURE__ */ x(Ie, { value: Y, onValueChange: D, children: [
         /* @__PURE__ */ n(
-          ye,
+          Ne,
           {
             size: "sm",
             className: "h-8 w-auto min-w-[4.5rem] gap-1.5 border-border bg-muted shadow-none",
-            children: /* @__PURE__ */ n(Ae, {})
+            children: /* @__PURE__ */ n(Ce, {})
           }
         ),
-        /* @__PURE__ */ n(Ie, { align: "end", children: S.map((u) => /* @__PURE__ */ n(Ce, { value: u.value, children: u.label }, u.value)) })
+        /* @__PURE__ */ n(Me, { align: "end", children: g.map((u) => /* @__PURE__ */ n(Re, { value: u.value, children: u.label }, u.value)) })
       ] }) : null,
-      !z && N && /* @__PURE__ */ n(
+      !T && C && /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           className: "flex min-h-[26px] min-w-[44px] cursor-pointer items-center justify-center rounded-md border border-muted bg-muted px-2.5 py-1.5 text-center text-xs font-medium leading-[14px] text-muted-foreground transition-colors hover:border-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          onClick: N,
-          children: Z ? /* @__PURE__ */ n(ke, { size: 16 }) : /* @__PURE__ */ n(Me, { size: 16 })
+          onClick: C,
+          children: U ? /* @__PURE__ */ n(q, { direction: "exit", size: 16 }) : /* @__PURE__ */ n(q, { direction: "expand", size: 16 })
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: pe(
+      className: xe(
         "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
-        U
+        ee
       ),
       children: [
-        de,
+        fe,
+        B && !T ? /* @__PURE__ */ n(Ee, { series: E }) : null,
         /* @__PURE__ */ n(
           "div",
           {
             style: {
               width: "100%",
-              height: c ? `${c}px` : void 0
+              height: l ? `${l}px` : void 0
             },
             className: "w-full",
             children: /* @__PURE__ */ n(
-              xe,
+              ye,
               {
-                ...oe,
+                ...ie,
                 series: w,
-                loading: H,
-                size: c ? "full" : "default",
+                loading: W,
+                size: l ? "full" : "default",
                 padding: "none",
                 variant: "ghost",
                 className: "rounded-md border border-border bg-card",
                 containerClassName: "h-full overflow-hidden rounded-none border-0 bg-transparent shadow-none",
                 showLegend: !1,
-                onUnselectSeries: L,
-                yMeasureUnit: ie,
-                currentValueDecimals: P,
-                useSharedPriceScale: K,
-                showCurrentValue: G,
-                yScaleMin: ee,
-                yScaleMinMultiple: te,
+                onUnselectSeries: _,
+                yMeasureUnit: ue,
+                currentValueDecimals: G,
+                useSharedPriceScale: te,
+                dualYAxis: B,
+                showCurrentValue: re,
+                yScaleMin: oe,
+                yScaleMinMultiple: ne,
                 hideDefaultTooltip: !0,
-                optionsOverrides: Ee
+                optionsOverrides: ke
               }
             )
           }
         ),
-        W.length > 0 ? /* @__PURE__ */ n(
+        E.length > 0 || (z?.length ?? 0) > 0 ? /* @__PURE__ */ n(
           ge,
           {
-            series: W,
-            onUnselect: L,
+            series: E,
+            markers: z,
+            onUnselect: _,
             inline: !0
           }
         ) : null
@@ -297,5 +296,5 @@ function Ze({
   );
 }
 export {
-  Ze as TradingView
+  Ke as TradingView
 };

package/dist/esm/components/truncated-text/index.js

@@ -0,0 +1,4 @@
+import { TruncatedText as t } from "./truncated-text.js";
+export {
+  t as TruncatedText
+};

package/dist/esm/components/truncated-text/truncated-text.js

@@ -0,0 +1,29 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as s, useCallback as l } from "react";
+import { cn as u } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+function h({
+  text: r,
+  className: n,
+  "data-testid": c
+}) {
+  const o = s(null), e = l(() => {
+    const t = o.current;
+    t && (t.title = t.scrollWidth > t.clientWidth ? r : "");
+  }, [r]);
+  return /* @__PURE__ */ i(
+    "p",
+    {
+      ref: o,
+      "data-testid": c,
+      className: u("truncate", n),
+      onMouseEnter: e,
+      onFocus: e,
+      children: r
+    }
+  );
+}
+export {
+  h as TruncatedText
+};

package/dist/esm/components/typography/index.js

@@ -1,5 +1,4 @@
-import { Typography as a, typographyVariants as o } from "./typography.js";
+import { Typography as r } from "./typography.js";
 export {
-  a as Typography,
-  o as typographyVariants
+  r as Typography
 };

package/dist/esm/components/typography/typography.js

@@ -1,13 +1,10 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cva as x } from "class-variance-authority";
-import * as p from "react";
-import "@gearbox-protocol/sdk";
-import { cn as c } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import * as c from "react";
+import { cn as g } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const g = x("", {
+const p = x("", {
   variants: {
     variant: {
       inherit: "",
@@ -76,7 +73,7 @@ const g = x("", {
   caption: "span",
   overline: "span",
   inherit: "span"
-}, u = p.forwardRef(
+}, u = c.forwardRef(
   ({
     className: e,
     variant: t = "inherit",
@@ -87,14 +84,14 @@ const g = x("", {
     truncate: a,
     as: l,
     ...h
-  }, m) => {
-    const d = l || f[t || "body"];
+  }, d) => {
+    const m = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      d,
+      m,
       {
-        ref: m,
-        className: c(
-          g({
+        ref: d,
+        className: g(
+          p({
             variant: t,
             color: i,
             weight: r,
@@ -111,6 +108,5 @@ const g = x("", {
 );
 u.displayName = "Typography";
 export {
-  u as Typography,
-  g as typographyVariants
+  u as Typography
 };

package/dist/esm/components/vertical-indicator/index.js

@@ -1,5 +1,4 @@
-import { VerticalIndicator as t, verticalIndicatorVariants as i } from "./vertical-indicator.js";
+import { VerticalIndicator as t } from "./vertical-indicator.js";
 export {
-  t as VerticalIndicator,
-  i as verticalIndicatorVariants
+  t as VerticalIndicator
 };