@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.61

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

@@ -1,195 +1,189 @@
-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 { 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 { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { useMemo as I, useCallback as we, useRef as N } from "react";
+import { toast as ve } from "sonner";
+import { SectionHeading as pe } from "../base/section-heading/section-heading.js";
+import { useIsMobile as xe } from "../../hooks/use-media-query.js";
+import { cn as Se } 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 he } from "../graph/graph.js";
+import { GraphViewWithData as ge } from "../graph/graph-view.js";
+import { DEFAULT_SERIES_COLORS as k } from "../graph/graph-vocabulary.js";
+import { getSeriesColorPalette as ye } from "../graph/series-palette.js";
+import { Select as Ae, SelectTrigger as Ie, SelectValue as Ne, SelectContent as Ce, SelectItem as Me } from "../select/select.js";
+import { GraphDropdown as Re } from "./graph-dropdown.js";
+const Ee = {
+  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"
+}, X = ({
+  direction: r,
+  size: t = 16
+}) => {
+  const l = r === "expand" ? "Expand fullscreen" : "Exit fullscreen";
+  return /* @__PURE__ */ h(
+    "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: Ee[r] })
+      ]
+    }
+  );
+}, Te = {
   timeScale: { borderVisible: !1 },
   rightPriceScale: { borderVisible: !1 },
   leftPriceScale: { borderVisible: !1 }
-}, X = "ui-kit:tradingview-series-colors:";
-function j(e) {
+}, Q = "ui-kit:tradingview-series-colors:";
+function L(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(Q + 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 < k.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function Re(e, r) {
+function Oe(r, t) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        X + e,
-        JSON.stringify(Object.fromEntries(r))
+        Q + 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 = L(r);
+  for (const [o, p] of t)
+    l.set(o, p);
+  Oe(r, l);
 }
-function Ze({
-  data: e,
-  yMeasureUnit: r,
-  height: c = 306,
+function Pe({
+  data: r,
+  yMeasureUnit: t,
+  height: l = 306,
   defaultGraph: o,
-  onGraphSelected: v,
+  onGraphSelected: p,
   graphs: f,
-  isMultipleSelect: q,
-  range: Q,
-  rangeList: S,
-  setRange: Y,
-  onGraphExpanded: N,
-  isGraphExpanded: Z,
-  onUnselectSeries: L,
-  graphsWithNoData: D,
+  isMultipleSelect: Y,
+  range: Z,
+  rangeList: g,
+  setRange: P,
+  onGraphExpanded: C,
+  isGraphExpanded: D,
+  onUnselectSeries: j,
+  legendMarkers: V,
+  graphsWithNoData: U,
   loadingGraphs: M,
-  isLoading: V,
-  noDataMessage: _ = "No data available for this graph",
-  currentValueDecimals: P,
-  containerClassName: U,
-  useSharedPriceScale: K,
-  showCurrentValue: G,
-  yScaleMin: ee,
-  yScaleMinMultiple: te,
+  isLoading: _,
+  noDataMessage: z = "No data available for this graph",
+  currentValueDecimals: K,
+  containerClassName: G,
+  useSharedPriceScale: ee,
+  showCurrentValue: te,
+  yScaleMin: re,
+  yScaleMinMultiple: oe,
   seriesColorPersistenceKey: d,
-  title: re,
-  trailing: k,
-  ...oe
+  title: ne,
+  trailing: R,
+  ...le
 }) {
-  const g = I(() => Array.isArray(e) ? e : e ? [e] : [], [e]), ne = I(() => Array.isArray(e) && e.length > 1, [e]), z = he(), le = fe(
+  const x = I(() => Array.isArray(r) ? r : r ? [r] : [], [r]), ie = I(() => Array.isArray(r) && r.length > 1, [r]), F = xe(), se = we(
     (u, y) => {
-      be.error(_);
+      ve.error(z);
     },
-    [_]
-  ), 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);
+    [z]
+  ), ce = I(() => {
+    if (t)
+      return Array.isArray(t) ? t[0] : t;
+  }, [t]), ue = !!(p && f && o), s = N(/* @__PURE__ */ new Map()), b = N(0), H = N(!1);
+  if (f && f.length > 0 && !H.current) {
+    H.current = !0;
+    const u = d ? L(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 S = u.get(m) ?? e;
+      s.current.set(m, S), b.current = Math.max(b.current, S + 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 = L(d);
+      for (const [m, v] of e)
+        s.current.has(m) || (s.current.set(m, v), b.current = Math.max(
           b.current,
-          h + 1
+          v + 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 = x.map((e, m) => {
+      const v = e?.title || `Series ${m + 1}`, S = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, T = x.length === 1 ? S != null ? String(S) : "single" : e?.id || v;
+      if (!s.current.has(T)) {
+        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 < k.length; a++) {
+          const A = (b.current + a) % k.length;
+          if (!i.has(A)) {
+            c = A;
             break;
           }
         }
-        i.current.set(R, s), b.current = s + 1;
+        s.current.set(T, 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 fe = s.current.get(T) ?? 0, O = ye(fe), be = [...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;
+      }, []), $ = 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: be,
+        label: v,
+        ...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
+        ...$ != null ? {
+          lineColor: $,
+          ...e?.topColor != null && {
+            topColor: e.topColor
           },
-          ...t?.bottomColor != null && {
-            bottomColor: t.bottomColor
+          ...e?.bottomColor != null && {
+            bottomColor: e.bottomColor
           }
         } : {
           color: O.line,
@@ -198,97 +192,98 @@ function Ze({
         }
       };
     });
-    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,
+  }, [x, o, t, d]), B = _ !== void 0 ? _ : M !== void 0 ? M.size > 0 : ie && x.length > 0 ? x.some((u) => !u) : !r, J = N(w);
+  w.length > 0 && (J.current = w);
+  const W = w.length > 0 ? w : B ? J.current : w, E = ne, de = !F && C ? !0 : g.length > 0 || ue || E != null || R != null, me = p && f && o ? /* @__PURE__ */ n(
+    Re,
     {
-      onSelected: v,
+      onSelected: p,
       items: f,
       defaultItem: o,
-      multiple: q,
-      graphsWithNoData: D,
+      multiple: Y,
+      graphsWithNoData: U,
       loadingGraphs: M,
-      onNoDataSelected: le
+      onNoDataSelected: se
     }
-  ) : 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: [
+  ) : E != null ? /* @__PURE__ */ n(pe, { className: "min-w-0 truncate", children: E }) : null, ae = de && /* @__PURE__ */ h("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: me }),
+    /* @__PURE__ */ h("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__ */ h(Ae, { value: Z, onValueChange: P, children: [
         /* @__PURE__ */ n(
-          ye,
+          Ie,
           {
             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(Ne, {})
           }
         ),
-        /* @__PURE__ */ n(Ie, { align: "end", children: S.map((u) => /* @__PURE__ */ n(Ce, { value: u.value, children: u.label }, u.value)) })
+        /* @__PURE__ */ n(Ce, { align: "end", children: g.map((u) => /* @__PURE__ */ n(Me, { value: u.value, children: u.label }, u.value)) })
       ] }) : null,
-      !z && N && /* @__PURE__ */ n(
+      !F && 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: D ? /* @__PURE__ */ n(X, { direction: "exit", size: 16 }) : /* @__PURE__ */ n(X, { direction: "expand", size: 16 })
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: pe(
+      className: Se(
         "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
-        U
+        G
       ),
       children: [
-        de,
+        ae,
         /* @__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,
+              ge,
               {
-                ...oe,
+                ...le,
                 series: w,
-                loading: H,
-                size: c ? "full" : "default",
+                loading: B,
+                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: j,
+                yMeasureUnit: ce,
+                currentValueDecimals: K,
+                useSharedPriceScale: ee,
+                showCurrentValue: te,
+                yScaleMin: re,
+                yScaleMinMultiple: oe,
                 hideDefaultTooltip: !0,
-                optionsOverrides: Ee
+                optionsOverrides: Te
               }
             )
           }
         ),
-        W.length > 0 ? /* @__PURE__ */ n(
-          ge,
+        W.length > 0 || (V?.length ?? 0) > 0 ? /* @__PURE__ */ n(
+          he,
           {
             series: W,
-            onUnselect: L,
+            markers: V,
+            onUnselect: j,
             inline: !0
           }
         ) : null
@@ -297,5 +292,5 @@ function Ze({
   );
 }
 export {
-  Ze as TradingView
+  Pe 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
 };