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

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

@@ -1,32 +1,47 @@
-import { splitInterval as m, formatWithoutDecimals as a } from "../../utils/math.js";
-import { decimalsToStep as l, findClosestPoint as y, formatWithDecimals as u, validateMinMax as x } from "../../utils/math.js";
-function f(t, i, e) {
+import { splitInterval as h, findClosestPoint as M, formatWithoutDecimals as d } from "./slider-math.js";
+import { validateMinMax as l } from "./slider-math.js";
+function k(t, e, r) {
   if (t.length === 0) return t;
-  const o = t.length - 1, r = {
-    point: Math.max(t[0].point, i),
+  const o = t.length - 1, s = {
+    point: Math.max(t[0].point, e),
     type: t[0].type
-  }, s = {
-    point: Math.min(t[o].point, e),
+  }, c = {
+    point: Math.min(t[o].point, r),
     type: t[o].type
-  }, c = t.slice(1, o).reduce((p, n) => (n.point !== r.point && n.point !== s.point && (p[n.point] = n), p), {});
-  return [r, ...Object.values(c), s];
+  }, p = t.slice(1, o).reduce((i, n) => (n.point !== s.point && n.point !== c.point && (i[n.point] = n), i), {});
+  return [s, ...Object.values(p), c];
 }
-function d(t, i, e, o, r) {
-  const s = a(t, e, 1), p = m(s, i, r).map(
+function y(t, e, r, o, s) {
+  const c = d(t, r, 1), i = h(c, e, s).map(
     (n) => ({
-      point: a(n, e, o),
+      point: d(n, r, o),
       type: "base"
     })
   );
-  return f(p, t, i);
+  return k(i, t, e);
+}
+function x(t, { snapPoints: e, intervals: r, epsilon: o, decimals: s }) {
+  const { minDistance: c, minPoint: p } = M(
+    t,
+    [...e],
+    s
+  );
+  if (c >= o)
+    return t;
+  let i, n = o;
+  for (const a of e) {
+    const f = Math.abs(a - t);
+    f < n && (i = a, n = f);
+  }
+  const m = r?.some((a) => p >= a.start && p <= a.end);
+  return i !== void 0 && !m ? i : p;
 }
 export {
-  l as decimalsToStep,
-  y as findClosestPoint,
-  u as formatWithDecimals,
-  a as formatWithoutDecimals,
-  d as makeMarkerPoints,
-  m as splitInterval,
-  f as validateMarkerPoints,
-  x as validateMinMax
+  M as findClosestPoint,
+  d as formatWithoutDecimals,
+  y as makeMarkerPoints,
+  x as resolveSnap,
+  h as splitInterval,
+  k as validateMarkerPoints,
+  l as validateMinMax
 };

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

@@ -1,19 +1,16 @@
-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 "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 X } from "./slider-context.js";
+import { SliderMark as Y } from "./slider-mark.js";
+import { validateMinMax as Z } from "./slider-math.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 +19,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) => Z(
+      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(X, { 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 +92,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 +100,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(
+                  Y,
                   {
                     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 +139,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/index.js

@@ -1,5 +1,4 @@
-import { Spinner as n, SpinnerOverlay as p } from "./spinner.js";
+import { Spinner as n } from "./spinner.js";
 export {
-  n as Spinner,
-  p as SpinnerOverlay
+  n as Spinner
 };

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

@@ -1,62 +1,45 @@
-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 { 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(
-  ({ className: s, size: e = "default", label: r, ...n }, o) => {
-    const l = {
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { IconPending as f } from "@gearbox-protocol/static";
+import * as l from "react";
+import { cn as s } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+const c = l.forwardRef(
+  ({ className: m, size: e = "default", label: t, ...n }, o) => {
+    const a = {
       xs: "h-3 w-3",
       sm: "h-4 w-4",
       default: "h-6 w-6",
       lg: "h-8 w-8",
       xl: "h-12 w-12"
     };
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ i(
       "div",
       {
         ref: o,
-        className: a(
+        className: s(
           "flex flex-col items-center justify-center gap-2",
-          s
+          m
         ),
         ...n,
         children: [
-          /* @__PURE__ */ t(
-            c,
+          /* @__PURE__ */ r(
+            f,
             {
               size: e === "xs" ? 12 : e === "sm" ? 16 : e === "default" ? 24 : e === "lg" ? 32 : 48,
-              className: a(
+              className: s(
                 "animate-spin text-muted-foreground",
-                l[e]
+                a[e]
               )
             }
           ),
-          r && /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground", children: r })
+          t && /* @__PURE__ */ r("span", { className: "text-sm text-muted-foreground", children: t })
         ]
       }
     );
   }
 );
-m.displayName = "Spinner";
-const p = i.forwardRef(({ className: s, fullScreen: e = !1, ...r }, n) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: n,
-    className: a(
-      "flex items-center justify-center bg-background/80 backdrop-blur-sm",
-      e ? `fixed inset-0 ${d.LOADING}` : "absolute inset-0",
-      s
-    ),
-    children: /* @__PURE__ */ t(m, { size: "lg", ...r })
-  }
-));
-p.displayName = "SpinnerOverlay";
+c.displayName = "Spinner";
 export {
-  m as Spinner,
-  p as SpinnerOverlay
+  c as Spinner
 };

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

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

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

@@ -1,13 +1,10 @@
 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 { cn as u } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const b = c(
+const b = m(
   [
     /* layout */
     "relative flex items-center",
@@ -26,7 +23,7 @@ const b = c(
     defaultVariants: { colSize: "equal" }
   }
 ), d = t.forwardRef(
-  ({ children: i, colSize: e = !0, className: l }, s) => {
+  ({ children: i, colSize: r = !0, className: l }, s) => {
     const n = t.Children.toArray(i).filter(Boolean);
     return /* @__PURE__ */ a(
       "div",
@@ -37,17 +34,17 @@ const b = c(
           "items-stretch",
           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}`;
+        children: n.map((e, o, f) => {
+          const p = typeof r == "function" ? r(o, f) : r, c = t.isValidElement(e) && e.key != null ? e.key : `split-item-${o}`;
           return /* @__PURE__ */ a(
             "div",
             {
               className: b({
                 colSize: p === "auto" ? "auto" : "equal"
               }),
-              children: r
+              children: e
             },
-            m
+            c
           );
         })
       }

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

@@ -1,11 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cva as u } from "class-variance-authority";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { cn as o } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const d = {
   good: "bg-success",
@@ -14,11 +10,11 @@ const d = {
   critical: "bg-destructive",
   liquidation: "bg-liquidation"
 };
-function A({ zone: i, size: t = 8 }) {
+function _({ zone: i, size: t = 8 }) {
   return /* @__PURE__ */ a(
     "div",
     {
-      className: s("rounded-full shrink-0", d[i]),
+      className: o("rounded-full shrink-0", d[i]),
       style: { width: t, height: t },
       "aria-hidden": !0
     }
@@ -30,7 +26,7 @@ const l = {
   bad: 1,
   critical: 1,
   liquidation: 1
-}, m = 3, g = {
+}, g = 3, m = {
   good: "success",
   medium: "warning",
   bad: "destructive",
@@ -53,17 +49,17 @@ const l = {
     }
   }
 );
-function x({ zone: i }) {
-  const t = l[i], e = g[i], n = Array.from({ length: m }, (o, r) => {
+function O({ zone: i }) {
+  const t = l[i], e = m[i], n = Array.from({ length: g }, (s, r) => {
     const c = r < t;
     return {
       key: r,
       color: c ? e : "gray-50"
     };
   }).reverse();
-  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)) });
+  return /* @__PURE__ */ a("div", { className: o("flex flex-wrap gap-0.5 w-2"), "aria-hidden": !0, children: n.map(({ key: s, color: r }) => /* @__PURE__ */ a("div", { className: b({ color: r }) }, s)) });
 }
 export {
-  A as HealthDot,
-  x as StatusBars
+  _ as HealthDot,
+  O as StatusBars
 };

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

@@ -1,8 +1,4 @@
-import { TabControl as e, TabItem as b, useHashTabs as s, useSectionTab as t, useTabControl as T } from "./tab-control.js";
+import { TabControl as t } from "./tab-control.js";
 export {
-  e as TabControl,
-  b as TabItem,
-  s as useHashTabs,
-  t as useSectionTab,
-  T as useTabControl
+  t as TabControl
 };