@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/components/tokens-list-cell/tokens-list-cell.js

@@ -0,0 +1,224 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import * as M from "react";
+import { TokenIcon as z } from "../token-icon/token-icon.js";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as y, Tooltip as T, TooltipTrigger as k, TooltipContent as b } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
+import { cn as v } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import "../accordion/accordion.js";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
+import "../alert-badge/alert-badge.js";
+import "../alert-dialog/alert-dialog.js";
+import "../alert-modal/alert-modal.js";
+import "react-intl";
+import "../arc-loader/arc-loader.js";
+import "../asset-line/asset-line.js";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "../buttons/tab-button/tab-button.js";
+import "wagmi";
+import "../auth/wallet-ui-context.js";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../base-link/base-link.js";
+import "../navigation-context/navigation-context.js";
+import "../button-checkbox/button-checkbox.js";
+import "../card-grid/card-grid.js";
+import "../cards/card/card.js";
+import "../carousel/carousel.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../checkbox-item/checkbox-item.js";
+import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../colored-text/colored-text.js";
+import "../input/input.js";
+import "../with-title/with-title.js";
+import "../smart-number-input/balance-indicator.js";
+import "../smart-number-input/smart-number-input.js";
+import "../points-icon/points-icon.js";
+import "../skeleton/skeleton.js";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../confirm-menu/confirm-menu.js";
+import "../currency-button/currency-button.js";
+import "../description/description.js";
+import "../detailed-apy/detailed-apy.js";
+import "../detailed-page-title/detailed-page-title.js";
+import "../detailed-page-title/detailed-page-title-copy-button.js";
+import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
+import "../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../dialog/dialog-container.js";
+import "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import "../dialog/dialog-footer.js";
+import "../dialog/dialog-header.js";
+import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../label/label.js";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "../edit-input/edit-input.js";
+import "../fadeout-loading/fadeout-loading.js";
+import "../filter/filter-block.js";
+import "../filter/filter-checkbox-item.js";
+import "../filter/filter-chip.js";
+import "../filter/filter-chips.js";
+import "../filter/filter-dropdown-item.js";
+import "../filter/filter-group.js";
+import "../filter/filter-label.js";
+import "../search-line/search-line.js";
+import "../tabs/tabs.js";
+import "../filter/filter-modal-item.js";
+import "../filter/filter-radio-item.js";
+import "../filter/filter-separator.js";
+import "../filter/variants.js";
+import "../graph/formatters.js";
+import "lightweight-charts";
+import "../graph/graph-view.js";
+import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
+import "../horizontal-indicator/horizontal-indicator.js";
+import "../icon-button/icon-button.js";
+import "../layout/col/col.js";
+import "../layout/container/container.js";
+import "../layout/footer/footer.js";
+import "../layout/grid/grid.js";
+import "../layout/header/header.js";
+import "../layout/layout/layout.js";
+import "../page-title/page-title.js";
+import "../layout/social-icons/social-icons.js";
+import "../link/link.js";
+import { getSymbolOrIcon as P } from "../token-symbol/token-symbol.js";
+import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
+import "../loader/loader.js";
+import "../loading/loading.js";
+import "../loading-bar/loading-bar.js";
+import "react-markdown";
+import "remark-gfm";
+import "../navbar/navbar.js";
+import "../navbar/navbar-indicator-context.js";
+import "../app-bar/app-bar.js";
+import "../navitem/navitem.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../progress-bar/progress-bar.js";
+import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
+import "../search-bar/search-bar.js";
+import "../segmented-control/segmented-control.js";
+import "../select/select.js";
+import "../separate-line/separate-line.js";
+import "../separator/separator.js";
+import "../simple-accordion/simple-accordion.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../slider/slider.js";
+import "../slider/slider-context.js";
+import "@radix-ui/react-slider";
+import "../spinner/spinner.js";
+import "../spinner-loader/spinner-loader.js";
+import "../split-list/split-list.js";
+import "../stat-badge/stat-badge.js";
+import "../status-dot/status-dot.js";
+import "../stepper/stepper.js";
+import "../switch/switch.js";
+import "../table/grid-table.js";
+import "../table/table.js";
+import "../table/grid-table-loader.js";
+import "../textarea/textarea.js";
+import "../theme-provider.js";
+import "../time-to-liquidation/time-to-liquidation.js";
+import "../tip-card/tip-card.js";
+import "../toggle/toggle.js";
+import "../typography/typography.js";
+import "../with-filter-button/with-filter-button.js";
+function Mr({
+  balances: a,
+  tokensList: l,
+  maxAssets: p = 3,
+  iconSize: c = 24,
+  options: w,
+  className: C
+}) {
+  const {
+    mode: d = "default",
+    showIconTooltip: x = !0,
+    otherTooltip: I,
+    onOtherClick: u
+  } = w || {}, [j, N, S, g] = M.useMemo(() => {
+    const t = a, i = t.slice(0, p), r = t.slice(p), e = r.map((m) => {
+      const h = typeof m == "string" ? m : m.token;
+      return l[h]?.symbol || "unknown";
+    }).join(", "), n = t.length > p;
+    return [i, r, e, n];
+  }, [a, p, l]), O = (t) => typeof t == "string" ? t : t.token, R = (t, i, r) => d === "cascade" ? {
+    zIndex: r - i,
+    marginRight: t ? 0 : -12
+  } : {
+    marginRight: t ? 0 : 4
+  };
+  return /* @__PURE__ */ s("div", { className: v("relative inline-flex items-center", C), children: [
+    j.map((t, i, r) => {
+      const e = O(t), n = l[e], m = i === r.length - 1 && !g, h = R(m, i, r.length), f = /* @__PURE__ */ o(z, { symbol: P(n), size: c });
+      return /* @__PURE__ */ o("div", { className: "relative", style: h, children: x ? /* @__PURE__ */ o(y, { children: /* @__PURE__ */ s(T, { children: [
+        /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o("span", { className: "cursor-help", children: f }) }),
+        /* @__PURE__ */ o(b, { children: n?.symbol || "Unknown" })
+      ] }) }) : f }, e);
+    }),
+    g && /* @__PURE__ */ o(y, { children: /* @__PURE__ */ s(T, { children: [
+      /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          className: v(
+            "relative inline-flex items-center justify-center rounded-full bg-muted text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors",
+            d === "cascade" && "z-0"
+          ),
+          style: {
+            width: c,
+            height: c,
+            marginLeft: d === "cascade" ? -12 : 4
+          },
+          onClick: u ? (t) => {
+            u(
+              t
+            );
+          } : void 0,
+          children: [
+            "+",
+            N.length
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o(b, { children: I || S })
+    ] }) })
+  ] });
+}
+export {
+  Mr as TokensListCell
+};

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

@@ -0,0 +1,9 @@
+import { SimpleTooltip as i } from "./simple-tooltip.js";
+import { Tooltip as r, TooltipContent as e, TooltipProvider as l, TooltipTrigger as T } from "./tooltip.js";
+export {
+  i as SimpleTooltip,
+  r as Tooltip,
+  e as TooltipContent,
+  l as TooltipProvider,
+  T as TooltipTrigger
+};

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -0,0 +1,157 @@
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-tooltip";
+import * as e from "react";
+import "@gearbox-protocol/sdk";
+import { cn as k } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import { Z_INDEX as J } from "../../utils/z-index.js";
+const L = e.createContext({ lockParent: () => {
+}, unlockParent: () => {
+} }), I = e.createContext(!1), A = 7, Q = 12;
+function U({
+  children: H,
+  title: d,
+  placement: K = "top",
+  trigger: n = "hover",
+  triangle: S = !0,
+  delayShow: h = 5,
+  maxWidth: W = "200px",
+  minWidth: _,
+  type: j = "tooltip",
+  open: C,
+  onOpenChange: P,
+  className: z,
+  triggerClassName: v,
+  useTitleAsTrigger: B = !1
+}) {
+  const [M, G] = e.useState(!1), [x, y] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = C !== void 0, s = p ? C : M, o = e.useCallback(
+    (t) => {
+      p ? P?.(t) : G(t);
+    },
+    [p, P]
+  ), c = e.useContext(L), V = e.useMemo(
+    () => ({
+      lockParent: () => y(!0),
+      unlockParent: () => y(!1)
+    }),
+    []
+  ), R = e.useRef(!1);
+  R.current = x;
+  const l = e.useRef(
+    null
+  ), u = e.useCallback(() => {
+    l.current !== null && (clearTimeout(l.current), l.current = null);
+  }, []), X = e.useCallback(
+    (t) => {
+      if (n !== "click") {
+        if (t) {
+          u(), o(!0), c.lockParent();
+          return;
+        }
+        l.current = setTimeout(() => {
+          l.current = null, !R.current && (o(!1), c.unlockParent());
+        }, 100);
+      }
+    },
+    [n, o, c, u]
+  );
+  e.useEffect(() => u, [u]);
+  const Z = e.useCallback(
+    (t) => {
+      n === "click" && (t.stopPropagation(), o(!s));
+    },
+    [n, s, o]
+  ), g = e.useCallback(
+    (t) => {
+      n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!s));
+    },
+    [n, s, o]
+  );
+  e.useEffect(() => {
+    if (n !== "click" || !s) return;
+    const t = (m) => {
+      const O = m.target;
+      f.current && !f.current.contains(O) && i.current && !i.current.contains(O) && o(!1);
+    }, E = (m) => {
+      m.key === "Escape" && o(!1);
+    };
+    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", E), () => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", E);
+    };
+  }, [n, s, o]);
+  const T = e.useRef(c.unlockParent);
+  T.current = c.unlockParent, e.useEffect(() => () => T.current(), []);
+  const b = j === "modal-tooltip", w = S && !b, q = k(
+    J.TOOLTIP,
+    "pointer-events-auto",
+    "animate-in fade-in-0 zoom-in-75 duration-150",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",
+    b ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
+    z
+  ), F = e.useContext(I), D = /* @__PURE__ */ N(
+    a.Root,
+    {
+      open: s || x,
+      onOpenChange: X,
+      delayDuration: n === "click" ? 0 : h,
+      children: [
+        /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
+          "button",
+          {
+            ref: i,
+            type: "button",
+            onClick: Z,
+            onKeyDown: g,
+            className: k(
+              "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
+              v
+            ),
+            children: d
+          }
+        ) : /* @__PURE__ */ r(
+          "span",
+          {
+            ref: i,
+            className: k("inline-flex", v),
+            children: d
+          }
+        ) }),
+        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ N(
+          a.Content,
+          {
+            ref: f,
+            side: K,
+            sideOffset: w ? A - 4 : 8,
+            className: q,
+            style: { maxWidth: W, minWidth: _ },
+            children: [
+              /* @__PURE__ */ r(L.Provider, { value: V, children: H }),
+              w && /* @__PURE__ */ r(
+                a.Arrow,
+                {
+                  width: Q,
+                  height: A,
+                  className: "fill-black/85"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+  return F ? D : /* @__PURE__ */ r(I.Provider, { value: !0, children: /* @__PURE__ */ r(
+    a.Provider,
+    {
+      delayDuration: n === "click" ? 0 : h,
+      skipDelayDuration: 300,
+      children: D
+    }
+  ) });
+}
+U.displayName = "SimpleTooltip";
+export {
+  U as SimpleTooltip
+};

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-tooltip";
+import * as a from "react";
+import "@gearbox-protocol/sdk";
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import { Z_INDEX as s } from "../../utils/z-index.js";
+const v = o.Provider, x = o.Root, h = o.Trigger, p = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+  o.Content,
+  {
+    ref: d,
+    sideOffset: r,
+    className: m(
+      s.TOOLTIP,
+      "overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      e
+    ),
+    ...i
+  }
+) }));
+p.displayName = o.Content.displayName;
+export {
+  x as Tooltip,
+  p as TooltipContent,
+  v as TooltipProvider,
+  h as TooltipTrigger
+};

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

@@ -0,0 +1,158 @@
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import { IconPending as j } from "@gearbox-protocol/static";
+import { useState as x, useRef as D, useEffect as F, useCallback as C, useMemo as _ } from "react";
+import { Checkbox as R } from "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import { Select as B, SelectTrigger as E, SelectValue as L, SelectContent as M, SelectItem as k } from "../select/select.js";
+function X({
+  items: l,
+  defaultItem: r,
+  onSelected: g,
+  multiple: s = !1,
+  graphsWithNoData: p,
+  loadingGraphs: v,
+  onNoDataSelected: f
+}) {
+  const N = () => {
+    if (s) {
+      const n = Array.isArray(r) ? r : [r];
+      return n.length === 0 ? "" : String(n[0].value);
+    }
+    const e = Array.isArray(r) ? r[0] : r;
+    return String(e?.value || "");
+  }, V = () => {
+    if (s) {
+      const n = Array.isArray(r) ? r : [r];
+      return new Set(n.map((a) => a.value));
+    }
+    const e = Array.isArray(r) ? r[0] : r;
+    return new Set([e?.value].filter(Boolean));
+  }, [t, w] = x(V), [o, S] = x(N()), [O, z] = x(!1), y = D(!1);
+  F(() => {
+    if (s) {
+      const e = Array.isArray(r) ? r : [r], n = new Set(e.map((a) => a.value));
+      w(n), e.length > 0 && S(String(e[0].value));
+    } else {
+      const e = Array.isArray(r) ? r[0] : r;
+      e?.value && S(String(e.value));
+    }
+  }, [r, s]);
+  const P = C(
+    (e) => {
+      if (!e && s && y.current) {
+        y.current = !1;
+        return;
+      }
+      z(e);
+    },
+    [s]
+  ), u = C(
+    (e) => {
+      const n = l.find((a) => String(a.value) === e);
+      if (n && !v?.has(n.value)) {
+        if (p?.has(n.value) && !(s && t.has(n.value))) {
+          f && f(n.value, n.label);
+          return;
+        }
+        s ? (y.current = !0, w((a) => {
+          const c = new Set(a);
+          if (c.has(n.value)) {
+            if (c.size <= 1)
+              return a;
+            c.delete(n.value);
+          } else
+            c.add(n.value);
+          return g(Array.from(c)), c;
+        })) : (S(e), g(n.value));
+      }
+    },
+    [
+      s,
+      g,
+      l,
+      p,
+      v,
+      f,
+      t
+    ]
+  ), A = _(() => {
+    if (!s) {
+      const a = l.find((h) => String(h.value) === o), c = Array.isArray(r) ? r[0] : r;
+      return a || c;
+    }
+    const e = Array.from(t).map((a) => l.find((c) => c.value === a)).filter((a) => !!a);
+    return e.length === 0 ? (Array.isArray(r) ? r : [r])[0] : e.length === 1 ? e[0] : {
+      value: e[0].value,
+      label: `${e.length} selected`
+    };
+  }, [s, r, l, t, o]), $ = _(() => s ? "__multiple_placeholder__" : o, [s, o]);
+  return !l.length || l.length === 1 && !s ? /* @__PURE__ */ i("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ i("div", { className: "text-xl leading-6", children: A.label }) }) : /* @__PURE__ */ b(
+    B,
+    {
+      value: $,
+      onValueChange: u,
+      open: O,
+      onOpenChange: P,
+      children: [
+        /* @__PURE__ */ i(E, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ i(L, { children: A.label }) }),
+        /* @__PURE__ */ b(M, { className: "min-w-[16rem]", children: [
+          s && /* @__PURE__ */ i(
+            k,
+            {
+              value: "__multiple_placeholder__",
+              className: "hidden",
+              disabled: !0,
+              children: A.label
+            }
+          ),
+          l.map((e, n) => {
+            const a = s && t.has(e.value), c = v?.has(e.value), h = c;
+            return /* @__PURE__ */ i(
+              k,
+              {
+                value: String(e.value),
+                disabled: h,
+                onSelect: (d) => {
+                  s && d.preventDefault(), u(String(e.value));
+                },
+                className: h ? "opacity-50 cursor-not-allowed" : "",
+                children: /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+                  s && /* @__PURE__ */ i(
+                    "span",
+                    {
+                      className: "shrink-0 inline-flex",
+                      onPointerDownCapture: (d) => {
+                        d.stopPropagation(), d.preventDefault(), u(String(e.value));
+                      },
+                      children: /* @__PURE__ */ i(
+                        R,
+                        {
+                          checked: a,
+                          onCheckedChange: () => u(String(e.value)),
+                          "aria-hidden": !0,
+                          tabIndex: -1
+                        }
+                      )
+                    }
+                  ),
+                  e.label,
+                  c && /* @__PURE__ */ i(
+                    j,
+                    {
+                      size: 16,
+                      className: "ml-1 size-4 animate-spin text-muted-foreground"
+                    }
+                  )
+                ] })
+              },
+              `graph-item-${n}-${String(e.value)}`
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  X as GraphDropdown
+};

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

@@ -0,0 +1,6 @@
+import { GraphDropdown as p } from "./graph-dropdown.js";
+import { TradingView as a } from "./trading-view.js";
+export {
+  p as GraphDropdown,
+  a as TradingView
+};