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

package/dist/esm/components/graph/plugins/vertical-line.js

@@ -0,0 +1,89 @@
+var l = Object.defineProperty, a = (s, t, i) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i, e = (s, t, i) => (a(s, typeof t != "symbol" ? `${t}` : t, i), i);
+function _(s) {
+  return Math.floor(s * 0.5);
+}
+function c(s, t, i = 1, r) {
+  const o = Math.round(t * s), n = Math.round(i * t), h = _(n);
+  return { position: o - h, length: n };
+}
+class u {
+  constructor(t, i) {
+    e(this, "_x", null), e(this, "_options"), this._x = t, this._options = i;
+  }
+  draw(t) {
+    t.useBitmapCoordinateSpace((i) => {
+      if (this._x === null) return;
+      const r = i.context, o = c(this._x, i.horizontalPixelRatio, this._options.width);
+      r.fillStyle = this._options.color, r.fillRect(o.position, 0, o.length, i.bitmapSize.height);
+    });
+  }
+}
+class p {
+  constructor(t, i) {
+    e(this, "_source"), e(this, "_x", null), e(this, "_options"), this._source = t, this._options = i;
+  }
+  update() {
+    const t = this._source._chart.timeScale();
+    this._x = t.timeToCoordinate(this._source._time);
+  }
+  renderer() {
+    return new u(this._x, this._options);
+  }
+}
+class x {
+  constructor(t, i) {
+    e(this, "_source"), e(this, "_x", null), e(this, "_options"), this._source = t, this._options = i;
+  }
+  update() {
+    const t = this._source._chart.timeScale();
+    this._x = t.timeToCoordinate(this._source._time);
+  }
+  visible() {
+    return this._options.showLabel;
+  }
+  tickVisible() {
+    return this._options.showLabel;
+  }
+  coordinate() {
+    return this._x ?? 0;
+  }
+  text() {
+    return this._options.labelText;
+  }
+  textColor() {
+    return this._options.labelTextColor;
+  }
+  backColor() {
+    return this._options.labelBackgroundColor;
+  }
+}
+const w = {
+  color: "green",
+  labelText: "",
+  width: 3,
+  labelBackgroundColor: "green",
+  labelTextColor: "white",
+  showLabel: !1
+};
+class d {
+  constructor(t, i, r, o) {
+    e(this, "_chart"), e(this, "_series"), e(this, "_time"), e(this, "_paneViews"), e(this, "_timeAxisViews");
+    const n = {
+      ...w,
+      ...o
+    };
+    this._chart = t, this._series = i, this._time = r, this._paneViews = [new p(this, n)], this._timeAxisViews = [new x(this, n)];
+  }
+  updateAllViews() {
+    this._paneViews.forEach((t) => t.update()), this._timeAxisViews.forEach((t) => t.update());
+  }
+  timeAxisViews() {
+    return this._timeAxisViews;
+  }
+  paneViews() {
+    return this._paneViews;
+  }
+}
+export {
+  d as VertLine
+};

package/dist/esm/components/grid-td-cell/grid-td-cell.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function s({ children: r, className: i, ...m }) {
+  return /* @__PURE__ */ o("td", { className: t("px-3 py-2 align-middle", i), ...m, children: r });
+}
+export {
+  s as GridTDCell
+};

package/dist/esm/components/grid-td-cell/index.js

@@ -0,0 +1,4 @@
+import { GridTDCell as l } from "./grid-td-cell.js";
+export {
+  l as GridTDCell
+};

package/dist/esm/components/guard/guard.js

@@ -0,0 +1,10 @@
+function u({
+  showGuard: r,
+  guard: n,
+  children: t
+}) {
+  return r ? n : t;
+}
+export {
+  u as Guard
+};

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

@@ -0,0 +1,4 @@
+import { Guard as a } from "./guard.js";
+export {
+  a as Guard
+};

package/dist/esm/components/head-cell/head-cell.js

@@ -0,0 +1,80 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { HelpTip as p } from "../help-tip/help-tip.js";
+import { faCaretUp as N, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as d } from "../icons/fa-icon.js";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as y, Tooltip as b, TooltipTrigger as H, TooltipContent as w } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function q({
+  title: l,
+  tip: r,
+  arrowPosition: i = "left",
+  sortDirection: s,
+  sortField: f = "this field",
+  sortTip: u,
+  onSort: t,
+  className: h
+}) {
+  const [x, m] = v.useState(!1), g = !!s || x, a = () => /* @__PURE__ */ e(
+    "span",
+    {
+      className: n(
+        "inline-flex items-center transition-opacity",
+        g ? "opacity-100" : "opacity-0"
+      ),
+      children: s === "asc" ? /* @__PURE__ */ e(d, { icon: N, className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ e(d, { icon: T, className: "size-3 text-muted-foreground" })
+    }
+  ), c = () => /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      disabled: !t,
+      className: n(
+        "inline-flex items-center gap-1 text-sm font-medium text-muted-foreground",
+        t && "cursor-pointer hover:text-foreground transition-colors",
+        !t && "cursor-default"
+      ),
+      children: [
+        t && i === "left" && a(),
+        l,
+        t && i === "right" && a()
+      ]
+    }
+  ), C = `Sort by ${f}`;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: n("inline-flex items-center gap-1.5", h),
+      onPointerEnter: () => m(!0),
+      onPointerLeave: () => m(!1),
+      children: [
+        t ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ o(b, { children: [
+          /* @__PURE__ */ e(H, { asChild: !0, children: c() }),
+          /* @__PURE__ */ e(w, { children: u || C })
+        ] }) }) : c(),
+        r && /* @__PURE__ */ e(p, { children: r })
+      ]
+    }
+  );
+}
+function B({
+  title: l,
+  tip: r,
+  className: i
+}) {
+  return /* @__PURE__ */ o("div", { className: n("inline-flex items-center gap-1.5", i), children: [
+    /* @__PURE__ */ e("span", { className: "text-sm font-medium text-muted-foreground", children: l }),
+    r && /* @__PURE__ */ e(p, { children: r })
+  ] });
+}
+export {
+  q as HeadCell,
+  B as SimpleHeadCell
+};

package/dist/esm/components/head-cell/index.js

@@ -0,0 +1,5 @@
+import { HeadCell as a, SimpleHeadCell as d } from "./head-cell.js";
+export {
+  a as HeadCell,
+  d as SimpleHeadCell
+};

package/dist/esm/components/health-factor/health-factor.js

@@ -0,0 +1,65 @@
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as p, formatPercentage as v } from "@gearbox-protocol/sdk";
+import { cva as x } from "class-variance-authority";
+import "react";
+import { cn as C } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { StatusBars as F } from "../status-elements/status-elements.js";
+const g = 15e3, A = 11e3, H = 10500, N = (t) => {
+  if (t)
+    return t >= g ? "good" : t > A ? "medium" : t > H ? "bad" : t > p ? "critical" : "liquidation";
+}, b = x(
+  "inline-flex items-center font-medium [text-decoration:inherit]",
+  {
+    variants: {
+      zone: {
+        good: "text-success",
+        medium: "text-warning",
+        bad: "text-destructive",
+        critical: "text-destructive",
+        liquidation: "text-liquidation",
+        unset: "[color:unset]"
+      }
+    }
+  }
+);
+function G({
+  value: t,
+  debt: e,
+  decimals: a = 3,
+  zone: o,
+  zoneType: i = "color",
+  className: m,
+  ...u
+}) {
+  const n = e !== void 0 && e === 0n, r = !n && i === "color" ? o === void 0 ? N(t) : o : void 0, s = r === void 0 ? void 0 : r === null ? "unset" : r, d = () => {
+    if (n) return "N/A";
+    const l = Number(t);
+    return v(l, a);
+  };
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      className: C(
+        b(
+          s !== void 0 ? { zone: s } : {}
+        ),
+        m
+      ),
+      ...u,
+      children: [
+        o && i === "bars" && /* @__PURE__ */ c("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ c(F, { zone: o }) }),
+        d()
+      ]
+    }
+  );
+}
+export {
+  A as BAD_HF,
+  g as GOOD_HF,
+  G as HealthFactor,
+  N as getHFZones
+};

package/dist/esm/components/health-factor/index.js

@@ -0,0 +1,7 @@
+import { BAD_HF as t, GOOD_HF as F, HealthFactor as H, getHFZones as r } from "./health-factor.js";
+export {
+  t as BAD_HF,
+  F as GOOD_HF,
+  H as HealthFactor,
+  r as getHFZones
+};

package/dist/esm/components/help-center-container/help-center-container.js

@@ -0,0 +1,64 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useState as s, useEffect as a } from "react";
+import { BlockSync as h } from "../block-sync/block-sync.js";
+import { cn as g } from "../../utils/cn.js";
+function y({
+  blockSyncProps: e,
+  footerHeight: i,
+  gapFromFooter: t
+}) {
+  const [c, o] = s(t), { pageVerticalOffset: n, clientOffsetHeight: d, clientHeight: l } = H();
+  return a(() => {
+    const r = i + t, m = d - (l + n), u = m < r ? r - m : 0;
+    o(t + u);
+  }, [n, l, d]), /* @__PURE__ */ f(
+    "div",
+    {
+      className: g(
+        // Desktop: fixed position with dynamic bottom.
+        // Breakpoint synced with mobile BlockSync fallback in GearboxFooter (md:hidden).
+        "hidden md:flex",
+        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]"
+      ),
+      style: { bottom: `${c}px` },
+      children: /* @__PURE__ */ f(
+        h,
+        {
+          blockByChain: e.blockByChain,
+          explorerAddresses: e.explorerAddresses,
+          networkById: e.networkById
+        }
+      )
+    }
+  );
+}
+const w = () => Math.max(
+  document.body.scrollHeight,
+  document.documentElement.scrollHeight,
+  document.body.offsetHeight,
+  document.documentElement.offsetHeight,
+  document.body.clientHeight,
+  document.documentElement.clientHeight
+);
+function H() {
+  const [e, i] = s(window.scrollY), [t, c] = s(
+    document.documentElement.clientHeight
+  );
+  return a(() => {
+    const o = () => {
+      i(window.scrollY);
+    }, n = () => {
+      c(document.documentElement.clientHeight);
+    };
+    return window.addEventListener("scroll", o), window.addEventListener("resize", n), () => {
+      window.removeEventListener("scroll", o), window.removeEventListener("resize", n);
+    };
+  }, []), {
+    pageVerticalOffset: e,
+    clientHeight: t,
+    clientOffsetHeight: w()
+  };
+}
+export {
+  y as HelpCenterContainer
+};

package/dist/esm/components/help-center-container/index.js

@@ -0,0 +1,4 @@
+import { HelpCenterContainer as n } from "./help-center-container.js";
+export {
+  n as HelpCenterContainer
+};

package/dist/esm/components/help-sections/help-sections.js

@@ -0,0 +1,21 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function l({ children: t, className: e }) {
+  return /* @__PURE__ */ r("div", { className: o("space-y-4", e), children: t });
+}
+function x({ title: t, children: e, className: m }) {
+  return /* @__PURE__ */ i("div", { className: o("space-y-2", m), children: [
+    t && /* @__PURE__ */ r("h3", { className: "text-sm font-medium text-foreground", children: t }),
+    /* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground", children: e })
+  ] });
+}
+export {
+  x as HelpSection,
+  l as HelpSections
+};

package/dist/esm/components/help-sections/index.js

@@ -0,0 +1,5 @@
+import { HelpSection as p, HelpSections as t } from "./help-sections.js";
+export {
+  p as HelpSection,
+  t as HelpSections
+};

package/dist/esm/components/help-tip/help-tip.js

@@ -0,0 +1,131 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconQuestionCircle as v, IconInfo as h } from "@gearbox-protocol/static";
+import { cva as T } from "class-variance-authority";
+import * as c from "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
+const H = T("transition-colors", {
+  variants: {
+    iconColor: {
+      "gray-10": "text-gray-10",
+      "gray-20": "text-gray-20",
+      "gray-30": "text-gray-30",
+      "gray-40": "text-gray-40",
+      "gray-50": "text-gray-50",
+      "gray-60": "text-gray-60",
+      "gray-70": "text-gray-70",
+      "gray-80": "text-gray-80",
+      "gray-90": "text-gray-90",
+      "gray-100": "text-gray-100",
+      "gray-110": "text-gray-110",
+      muted: "text-secondary-foreground",
+      foreground: "text-foreground"
+    },
+    iconHoverColor: {
+      "gray-10": "hover:text-gray-10",
+      "gray-20": "hover:text-gray-20",
+      "gray-30": "hover:text-gray-30",
+      "gray-40": "hover:text-gray-40",
+      "gray-50": "hover:text-gray-50",
+      "gray-60": "hover:text-gray-60",
+      "gray-70": "hover:text-gray-70",
+      "gray-80": "hover:text-gray-80",
+      "gray-90": "hover:text-gray-90",
+      "gray-100": "hover:text-gray-100",
+      "gray-110": "hover:text-gray-110",
+      muted: "hover:text-secondary-foreground",
+      foreground: "hover:text-foreground"
+    }
+  },
+  defaultVariants: { iconColor: "gray-90", iconHoverColor: "gray-110" }
+}), I = c.forwardRef(
+  ({
+    className: r,
+    children: o,
+    maxWidth: t,
+    minWidth: a,
+    delayShow: g = 200,
+    placement: y = "bottom",
+    iconSize: i = 14,
+    iconColor: n = "gray-90",
+    iconHoverColor: p = "gray-110",
+    iconVariant: m = "question",
+    onPointerEnter: x,
+    ...d
+  }, f) => {
+    const u = /* @__PURE__ */ e(
+      l,
+      {
+        ref: f,
+        iconSize: i,
+        iconColor: n,
+        iconHoverColor: p,
+        iconVariant: m,
+        onPointerEnter: x,
+        className: r,
+        ...d
+      }
+    );
+    return /* @__PURE__ */ e(
+      C,
+      {
+        title: u,
+        placement: y,
+        delayShow: g,
+        maxWidth: t,
+        minWidth: a,
+        children: o
+      }
+    );
+  }
+);
+I.displayName = "HelpTip";
+const l = c.forwardRef(
+  ({
+    className: r,
+    iconSize: o = 14,
+    iconColor: t = "gray-90",
+    iconHoverColor: a = "gray-110",
+    iconVariant: g = "question",
+    onPointerEnter: y,
+    ...i
+  }, n) => {
+    const p = g === "question" ? v : h;
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        ref: n,
+        role: "img",
+        "aria-hidden": !0,
+        className: s(
+          "inline-block cursor-help",
+          H({ iconColor: t, iconHoverColor: a }),
+          r
+        ),
+        onPointerEnter: y,
+        ...i,
+        children: /* @__PURE__ */ e(p, { size: o })
+      }
+    );
+  }
+);
+l.displayName = "HelpTipIcon";
+const N = c.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ e(
+  "span",
+  {
+    ref: t,
+    className: s("ml-1.5 inline-block leading-[0]", r),
+    ...o
+  }
+));
+N.displayName = "TipWrap";
+export {
+  I as HelpTip,
+  l as HelpTipIcon,
+  N as TipWrap
+};

package/dist/esm/components/help-tip/index.js

@@ -0,0 +1,6 @@
+import { HelpTip as i, HelpTipIcon as o, TipWrap as r } from "./help-tip.js";
+export {
+  i as HelpTip,
+  o as HelpTipIcon,
+  r as TipWrap
+};

package/dist/esm/components/hide-on/hide-on.js

@@ -0,0 +1,65 @@
+import * as o from "react";
+import { cn as a } from "../../utils/cn.js";
+const c = {
+  xs: "hidden",
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+  extraSmall: "hidden",
+  small: "sm:hidden",
+  medium: "md:hidden",
+  large: "lg:hidden",
+  xlarge: "xl:hidden"
+}, h = {
+  xs: "block",
+  sm: "hidden sm:block",
+  md: "hidden md:block",
+  lg: "hidden lg:block",
+  xl: "hidden xl:block",
+  extraSmall: "block",
+  small: "hidden sm:block",
+  medium: "hidden md:block",
+  large: "hidden lg:block",
+  xlarge: "hidden xl:block"
+};
+function r({
+  $breakpoint: d,
+  breakpoint: e,
+  as: l = "div",
+  children: n,
+  className: i,
+  ...m
+}) {
+  const s = d ?? e ?? "sm";
+  return o.createElement(
+    l,
+    {
+      className: a(c[s], i),
+      ...m
+    },
+    n
+  );
+}
+function x({
+  $breakpoint: d,
+  breakpoint: e,
+  as: l = "div",
+  children: n,
+  className: i,
+  ...m
+}) {
+  const s = d ?? e ?? "md";
+  return o.createElement(
+    l,
+    {
+      className: a(h[s], i),
+      ...m
+    },
+    n
+  );
+}
+export {
+  r as HideOn,
+  x as ShowOn
+};

package/dist/esm/components/hide-on/index.js

@@ -0,0 +1,5 @@
+import { HideOn as n, ShowOn as r } from "./hide-on.js";
+export {
+  n as HideOn,
+  r as ShowOn
+};

package/dist/esm/components/horizontal-indicator/horizontal-indicator.js

@@ -0,0 +1,35 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconQuestionCircle as a } from "@gearbox-protocol/static";
+import * as d from "react";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as m, Tooltip as c, TooltipTrigger as p, TooltipContent as f } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
+import { cn as x } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const h = d.forwardRef(({ label: i, value: l, tip: r, valueDescription: t, className: n }, s) => /* @__PURE__ */ o("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
+  /* @__PURE__ */ o("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ e("span", { children: i }),
+    r && /* @__PURE__ */ e(m, { delayDuration: 0, children: /* @__PURE__ */ o(c, { children: [
+      /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-help",
+          children: /* @__PURE__ */ e(a, { size: 14, className: "size-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ e(f, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: r }) })
+    ] }) })
+  ] }),
+  /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ e("div", { className: "text-base font-semibold text-foreground", children: l }),
+    t && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: t })
+  ] })
+] }));
+h.displayName = "HorizontalIndicator";
+export {
+  h as HorizontalIndicator
+};

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

@@ -0,0 +1,4 @@
+import { HorizontalIndicator as t } from "./horizontal-indicator.js";
+export {
+  t as HorizontalIndicator
+};