@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.41

package/dist/esm/components/slider/slider.js

@@ -1,19 +1,18 @@
-import { jsx as r, jsxs as T } from "react/jsx-runtime";
-import { LEVERAGE_DECIMALS as F } from "@gearbox-protocol/sdk";
+import { jsx as o, jsxs as W } from "react/jsx-runtime";
+import { LEVERAGE_DECIMALS as F } from "@gearbox-protocol/sdk/onchain";
 import * as P from "@radix-ui/react-slider";
 import * as H from "react";
 import { useMemo as m, useRef as w, useCallback as J, useState as K, useLayoutEffect as Q } from "react";
 import { cn as y } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { findClosestPoint as X, validateMinMax as Y } from "../../utils/math.js";
+import { validateMinMax as X } from "../../utils/math.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { SliderProvider as Z } from "./slider-context.js";
-import { SliderMark as I } from "./slider-mark.js";
-import { SliderTrack as ee } from "./slider-track.js";
-import { makeMarkerPoints as te } from "./slider-utils.js";
-import { getIntervalBounds as ne, getThumbInBoundsOffset as W } from "./types.js";
+import { SliderProvider as Y } from "./slider-context.js";
+import { SliderMark as Z } from "./slider-mark.js";
+import { SliderTrack as I } from "./slider-track.js";
+import { makeMarkerPoints as ee, resolveSnap as te } from "./slider-utils.js";
+import { getIntervalBounds as ne, getThumbInBoundsOffset as D } from "./types.js";
 const M = Number(F), re = H.forwardRef(
   ({
     className: O,
@@ -22,67 +21,69 @@ const M = Number(F), re = H.forwardRef(
     value: _,
     onChangeValue: N,
     onSubmitValue: g,
-    colorIntervals: o,
+    colorIntervals: n,
     precision: h = 10,
     markerStep: v = 100,
     epsilon: j = 8,
-    colorIntervalLabel: C,
+    colorIntervalLabel: L,
     ...z
   }, B) => {
-    const [n, i] = u > p ? [p, u] : [u, p], d = Array.isArray(h) ? h[0] : h, $ = m(() => M / d, [d]), G = m(
-      () => o?.flatMap((e) => [e.start, e.end]) || [],
-      [o]
-    ), L = (e) => {
-      const { minDistance: t, minPoint: s } = X(
-        e,
-        G,
-        M
-      );
-      return t < j ? Y(s, n, i) : e;
-    }, U = (e) => {
-      e.length > 0 && N(L(e[0]));
+    const [r, s] = u > p ? [p, u] : [u, p], d = Array.isArray(h) ? h[0] : h, $ = m(() => M / d, [d]), G = m(
+      () => n?.flatMap((e) => [e.start, e.end]) || [],
+      [n]
+    ), C = (e) => X(
+      te(e, {
+        snapPoints: G,
+        intervals: n,
+        epsilon: j,
+        decimals: M
+      }),
+      r,
+      s
+    ), U = (e) => {
+      e.length > 0 && N(C(e[0]));
     }, V = (e) => {
-      g && e.length > 0 && g(L(e[0]));
-    }, b = m(() => v ? te(
-      n,
-      i,
+      g && e.length > 0 && g(C(e[0]));
+    }, b = m(() => v ? ee(
+      r,
+      s,
       M,
       d,
       v
-    ).map((t) => t.point) : void 0, [n, i, d, v]), E = w(null), q = J(() => {
+    ).map((t) => t.point) : void 0, [r, s, d, v]), E = w(null), q = J(() => {
       const e = E.current;
       if (!e) return;
       const t = () => {
         e.dataset.dragging = "";
-      }, s = () => {
+      }, a = () => {
         document.removeEventListener("pointermove", t), delete e.dataset.dragging;
       };
-      document.addEventListener("pointermove", t, { once: !0 }), document.addEventListener("pointerup", s, { once: !0 });
+      document.addEventListener("pointermove", t, { once: !0 }), document.addEventListener("pointerup", a, { once: !0 });
     }, []), R = w(null), k = w(null), [S, A] = K(void 0), f = m(() => {
-      if (!o?.length) return;
-      const e = o[o.length - 1], { start: t, end: s } = ne(e), a = i - n;
-      if (a <= 0) return;
-      const c = (t - n) / a * 100, l = (s - n) / a * 100, D = W(c), x = W(l);
+      if (!n?.length) return;
+      const e = n[n.length - 1], { start: t, end: a } = ne(e), i = s - r;
+      if (i <= 0) return;
+      const c = (t - r) / i * 100, l = (a - r) / i * 100, T = D(c), x = D(l);
       return {
         pct: (c + l) / 2,
-        offsetPx: (D + x) / 2
+        offsetPx: (T + x) / 2
       };
-    }, [o, n, i]);
+    }, [n, r, s]);
     return Q(() => {
       const e = R.current, t = k.current;
       if (!f || !e || !t) {
         A(void 0);
         return;
       }
-      const s = () => {
+      const a = () => {
         const c = e.offsetWidth, l = t.offsetWidth, x = f.pct / 100 * c + f.offsetPx - l / 2;
         A(Math.max(0, Math.min(x, c - l)));
       };
-      s();
-      const a = new ResizeObserver(s);
-      return a.observe(e), () => a.disconnect();
-    }, [f]), /* @__PURE__ */ r(Z, { colorIntervals: o, min: n, max: i, children: /* @__PURE__ */ T("div", { className: "relative w-full px-[9px] pb-3", children: [
-      /* @__PURE__ */ r(
+      a();
+      const i = new ResizeObserver(a);
+      return i.observe(e), () => i.disconnect();
+    }, [f]), /* @__PURE__ */ o(Y, { colorIntervals: n, min: r, max: s, children: /* @__PURE__ */ W("div", { className: "relative w-full px-[9px] pb-3", children: [
+      /* @__PURE__ */ o(
         "div",
         {
           ref: E,
@@ -93,7 +94,7 @@ const M = Number(F), re = H.forwardRef(
             "[&:not([data-dragging])_span[style]]:[transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]"
           ),
           onPointerDown: q,
-          children: /* @__PURE__ */ T(
+          children: /* @__PURE__ */ W(
             P.Root,
             {
               ref: B,
@@ -101,28 +102,28 @@ const M = Number(F), re = H.forwardRef(
                 "relative flex w-full touch-none select-none items-center",
                 O
               ),
-              min: n,
-              max: i,
+              min: r,
+              max: s,
               step: $,
               value: [_],
               onValueChange: U,
               onValueCommit: V,
               ...z,
               children: [
-                /* @__PURE__ */ r(P.Track, { className: "relative h-1 grow overflow-hidden bg-gray-40 mx-[9px] cursor-pointer", children: /* @__PURE__ */ r(ee, {}) }),
-                b && b.length > 0 && /* @__PURE__ */ r("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ r("div", { className: "relative w-full", children: b.map((e) => /* @__PURE__ */ r(
-                  I,
+                /* @__PURE__ */ o(P.Track, { className: "relative h-1 grow overflow-hidden bg-gray-40 mx-[9px] cursor-pointer", children: /* @__PURE__ */ o(I, {}) }),
+                b && b.length > 0 && /* @__PURE__ */ o("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ o("div", { className: "relative w-full", children: b.map((e) => /* @__PURE__ */ o(
+                  Z,
                   {
                     value: e,
-                    min: n,
-                    max: i,
+                    min: r,
+                    max: s,
                     onSelect: (t) => {
                       N(t), g?.(t);
                     }
                   },
                   `mark-${e}`
                 )) }) }),
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ o(
                   P.Thumb,
                   {
                     className: y(
@@ -140,13 +141,13 @@ const M = Number(F), re = H.forwardRef(
           )
         }
       ),
-      C && o && o.length > 0 && /* @__PURE__ */ r("div", { ref: R, className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ r(
+      L && n && n.length > 0 && /* @__PURE__ */ o("div", { ref: R, className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ o(
         "div",
         {
           ref: k,
           className: "absolute text-[11px] font-medium leading-[126%] text-success whitespace-nowrap",
           style: S !== void 0 ? { left: `${S}px` } : void 0,
-          children: C
+          children: L
         }
       ) })
     ] }) });

package/dist/esm/components/spinner/spinner.js

@@ -1,10 +1,9 @@
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import { IconPending as c } from "@gearbox-protocol/static";
 import * as i from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import { Z_INDEX as d } from "../../utils/z-index.js";
 const m = i.forwardRef(

package/dist/esm/components/spinner-loader/spinner-loader.js

@@ -1,26 +1,25 @@
 import { jsx as m } from "react/jsx-runtime";
-import * as p from "react";
-import "@gearbox-protocol/sdk";
-import { cn as d } from "../../utils/cn.js";
+import * as d from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const s = p.forwardRef(
-  ({ size: r = 40, speed: o = "1s", width: i = 4, className: t, style: e, ...a }, n) => /* @__PURE__ */ m(
+const s = d.forwardRef(
+  ({ size: r = 40, speed: o = "1s", width: i = 4, className: e, style: t, ...a }, n) => /* @__PURE__ */ m(
     "span",
     {
       ref: n,
-      className: d(
+      className: p(
         "inline-block rounded-full border-solid border-gray-20 border-b-gray-110 animate-spin",
-        t
+        e
       ),
       style: {
         width: r,
         height: r,
         borderWidth: i,
         animationDuration: o,
-        ...e
+        ...t
       },
       ...a
     }

package/dist/esm/components/split-list/split-list.js

@@ -1,13 +1,12 @@
 import { jsx as a } from "react/jsx-runtime";
-import { cva as c } from "class-variance-authority";
+import { cva as m } from "class-variance-authority";
 import * as t from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const b = c(
+const b = m(
   [
     /* layout */
     "relative flex items-center",
@@ -38,7 +37,7 @@ const b = c(
           l
         ),
         children: n.map((r, o, f) => {
-          const p = typeof e == "function" ? e(o, f) : e, m = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
+          const p = typeof e == "function" ? e(o, f) : e, c = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
           return /* @__PURE__ */ a(
             "div",
             {
@@ -47,7 +46,7 @@ const b = c(
               }),
               children: r
             },
-            m
+            c
           );
         })
       }

package/dist/esm/components/status-dot/status-dot.js

@@ -1,10 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import * as n from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const d = m("rounded-full shrink-0", {
@@ -30,7 +29,7 @@ const d = m("rounded-full shrink-0", {
     variant: "default",
     size: "sm"
   }
-}), p = n.forwardRef(
+}), c = n.forwardRef(
   ({ className: t, variant: r, size: a, pulse: s, ...e }, i) => /* @__PURE__ */ o(
     "div",
     {
@@ -44,8 +43,8 @@ const d = m("rounded-full shrink-0", {
     }
   )
 );
-p.displayName = "StatusDot";
+c.displayName = "StatusDot";
 export {
-  p as StatusDot,
+  c as StatusDot,
   d as statusDotVariants
 };

package/dist/esm/components/status-elements/status-elements.js

@@ -1,10 +1,9 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cva as u } from "class-variance-authority";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const d = {
@@ -14,7 +13,7 @@ const d = {
   critical: "bg-destructive",
   liquidation: "bg-liquidation"
 };
-function A({ zone: i, size: t = 8 }) {
+function q({ zone: i, size: t = 8 }) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -30,7 +29,7 @@ const l = {
   bad: 1,
   critical: 1,
   liquidation: 1
-}, m = 3, g = {
+}, g = 3, m = {
   good: "success",
   medium: "warning",
   bad: "destructive",
@@ -53,8 +52,8 @@ const l = {
     }
   }
 );
-function x({ zone: i }) {
-  const t = l[i], e = g[i], n = Array.from({ length: m }, (o, r) => {
+function A({ zone: i }) {
+  const t = l[i], e = m[i], n = Array.from({ length: g }, (o, r) => {
     const c = r < t;
     return {
       key: r,
@@ -64,6 +63,6 @@ function x({ zone: i }) {
   return /* @__PURE__ */ a("div", { className: s("flex flex-wrap gap-0.5 w-2"), "aria-hidden": !0, children: n.map(({ key: o, color: r }) => /* @__PURE__ */ a("div", { className: b({ color: r }) }, o)) });
 }
 export {
-  A as HealthDot,
-  x as StatusBars
+  q as HealthDot,
+  A as StatusBars
 };

package/dist/esm/components/tab-control/tab-control.js

@@ -1,25 +1,24 @@
-import { jsx as f, jsxs as T, Fragment as S } from "react/jsx-runtime";
-import { useRef as p, useState as v, useCallback as b, useMemo as w, useEffect as N } from "react";
+import { jsx as f, jsxs as T, Fragment as k } from "react/jsx-runtime";
+import { useRef as g, useState as v, useCallback as m, useMemo as w, useEffect as N } from "react";
 import { useNavigationAdapter as C } from "../navigation-context/navigation-context.js";
-import "@gearbox-protocol/sdk";
-import { cn as m } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as b } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function U(n) {
+function S(n) {
   if (!n) return null;
   const { width: r = 0, height: s = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, o = n?.offsetLeft || 0;
   return { width: r, height: s, left: o, top: i };
 }
-function $(n, r, s) {
-  const i = p(null), [o, u] = v(null), l = p(null), c = b((e) => {
+function U(n, r, s) {
+  const i = g(null), [o, u] = v(null), l = g(null), c = m((e) => {
     u(e), l.current = e;
   }, []);
   return N(() => {
     const e = s.current[n], d = () => {
-      const a = U(e), h = a?.height !== l.current?.height, x = a?.width !== l.current?.width, g = a?.left !== l.current?.left, y = a?.top !== l.current?.top;
-      (h || x || g || y) && c(a);
+      const a = S(e), h = a?.height !== l.current?.height, p = a?.width !== l.current?.width, x = a?.left !== l.current?.left, y = a?.top !== l.current?.top;
+      (h || p || x || y) && c(a);
     };
     i.current = d, d();
     const t = e ? new ResizeObserver(d) : null;
@@ -35,7 +34,7 @@ function $(n, r, s) {
     };
   }, [r]), o;
 }
-function B({
+function A({
   className: n,
   tabs: r,
   state: s,
@@ -43,16 +42,16 @@ function B({
   tabItemWrapPadding: o,
   variant: u = "auto"
 }) {
-  const l = p(null), c = p({}), e = $(
+  const l = g(null), c = g({}), e = U(
     s.id,
     l.current,
     c
   ), d = (t, a) => () => s.handleTabChange(t, a);
-  return /* @__PURE__ */ f("div", { className: m("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ T(
+  return /* @__PURE__ */ f("div", { className: b("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ T(
     "div",
     {
       ref: l,
-      className: m(
+      className: b(
         "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
         "scrollbar-hidden",
         i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
@@ -69,20 +68,26 @@ function B({
           }
         ),
         r.map((t, a, h) => {
-          const x = a === h.length - 1;
+          const p = a === h.length - 1;
           return /* @__PURE__ */ f(
             "button",
             {
-              ref: (g) => {
-                c.current[t.id] = g;
+              ref: (x) => {
+                c.current[t.id] = x;
               },
               type: "button",
               onClick: t.disabled ? void 0 : d(t.id, a),
               disabled: t.disabled,
-              className: m(
-                "flex items-center bg-transparent border-none shrink-0 text-foreground outline-none",
+              className: b(
+                // `outline-none` with nothing in its place left these triggers
+                // with no visible focus at all: a keyboard reader tabbing the
+                // strip could not see where they were. The ring matches the
+                // Radix-backed `Tabs` trigger so the two look the same when
+                // focused.
+                "flex items-center bg-transparent border-none shrink-0 text-foreground",
+                "outline-none ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                 o ? "" : "p-0 pb-3.5",
-                u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
+                u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !p && "mr-10 max-[500px]:mr-8",
                 t.disabled && "cursor-not-allowed",
                 !t.disabled && "cursor-pointer",
                 !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
@@ -97,18 +102,18 @@ function B({
     }
   ) });
 }
-function F({
+function B({
   icon: n,
   label: r,
   selected: s,
   textSize: i = "default",
   amount: o
 }) {
-  return /* @__PURE__ */ T(S, { children: [
+  return /* @__PURE__ */ T(k, { children: [
     n && /* @__PURE__ */ f(
       "div",
       {
-        className: m(
+        className: b(
           "mr-3",
           s ? "text-foreground" : "text-secondary-foreground"
         ),
@@ -118,7 +123,7 @@ function F({
     /* @__PURE__ */ f(
       "div",
       {
-        className: m(
+        className: b(
           "m-0 p-0 whitespace-nowrap",
           i === "default" && "text-sm leading-[17px] font-normal",
           i === "unset" && "text-[unset] leading-[unset] font-[unset]",
@@ -130,20 +135,20 @@ function F({
     !!o && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
   ] });
 }
-function I(n, r = 0) {
-  const [s, i] = v(n), [o, u] = v(r), l = b((c, e) => {
+function F(n, r = 0) {
+  const [s, i] = v(n), [o, u] = v(r), l = m((c, e) => {
     i(c), u(e);
   }, []);
   return { id: s, index: o, handleTabChange: l };
 }
-function M(n) {
+function I(n) {
   const { useLocation: r, useNavigate: s } = C(), { hash: i } = r(), o = s(), u = w(
     () => n.reduce(
       (t, a, h) => (t[a.id] = { id: a.id, index: h }, t),
       {}
     ),
     [n]
-  ), l = w(() => i.slice(1).toLowerCase(), [i]), { id: c, index: e } = u[l] || {}, d = b(
+  ), l = w(() => i.slice(1).toLowerCase(), [i]), { id: c, index: e } = u[l] || {}, d = m(
     (t) => {
       o(`#${t}`);
     },
@@ -155,7 +160,7 @@ function M(n) {
     handleTabChange: d
   };
 }
-function D({
+function M({
   defaultTabs: n,
   pathRoot: r,
   selectedSection: s
@@ -166,7 +171,7 @@ function D({
       {}
     ),
     [n]
-  ), l = b(
+  ), l = m(
     (d) => {
       o(`${r}/${d}`);
     },
@@ -175,9 +180,9 @@ function D({
   return { id: c, index: e, handleTabChange: l };
 }
 export {
-  B as TabControl,
-  F as TabItem,
-  M as useHashTabs,
-  D as useSectionTab,
-  I as useTabControl
+  A as TabControl,
+  B as TabItem,
+  I as useHashTabs,
+  M as useSectionTab,
+  F as useTabControl
 };

package/dist/esm/components/table/grid-loading-line.js

@@ -1,42 +1,41 @@
 import { jsx as r } from "react/jsx-runtime";
 import { Skeleton as l } from "../skeleton/skeleton.js";
 import "react";
-import "@gearbox-protocol/sdk";
-import { cn as e } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function v({
-  height: i = "70px",
-  columns: t = 6,
+function u({
+  height: e = "70px",
+  columns: i = 6,
   cellClassName: o,
   last: m,
   className: n,
-  ...p
+  ...d
 }) {
   return /* @__PURE__ */ r(
     "div",
     {
-      className: e("contents", n),
-      style: { minHeight: i },
-      ...p,
-      children: Array.from({ length: t }, (s, d) => /* @__PURE__ */ r(
+      className: t("contents", n),
+      style: { minHeight: e },
+      ...d,
+      children: Array.from({ length: i }, (s, p) => /* @__PURE__ */ r(
         "div",
         {
-          className: e(
+          className: t(
             "flex items-center",
             !m && "border-b border-border",
             o || "p-4"
           ),
-          style: { minHeight: i },
+          style: { minHeight: e },
           children: /* @__PURE__ */ r(l, { width: "full", height: "md" })
         },
-        `${d}-${t}`
+        `${p}-${i}`
       ))
     }
   );
 }
 export {
-  v as GridLoadingLine
+  u as GridLoadingLine
 };