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

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

@@ -1,5 +1,5 @@
-import { splitInterval as h, findClosestPoint as M, formatWithoutDecimals as d } from "../../utils/math.js";
-import { validateMinMax as l } from "../../utils/math.js";
+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, s = {

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

@@ -4,11 +4,10 @@ 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 { validateMinMax as X } from "../../utils/math.js";
-import "luxon";
 import "../../utils/z-index.js";
-import { SliderProvider as Y } from "./slider-context.js";
-import { SliderMark as Z } from "./slider-mark.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";
@@ -30,7 +29,7 @@ const M = Number(F), re = H.forwardRef(
     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(
+    ), C = (e) => Z(
       te(e, {
         snapPoints: G,
         intervals: n,
@@ -81,7 +80,7 @@ const M = Number(F), re = H.forwardRef(
       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: [
+    }, [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",
         {
@@ -111,7 +110,7 @@ const M = Number(F), re = H.forwardRef(
               children: [
                 /* @__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,
+                  Y,
                   {
                     value: e,
                     min: r,

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

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

@@ -1,9 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import * as t from "react";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as u } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const b = m(
   [
@@ -24,7 +23,7 @@ const b = m(
     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",
@@ -35,15 +34,15 @@ const b = m(
           "items-stretch",
           l
         ),
-        children: n.map((r, o, f) => {
-          const p = typeof e == "function" ? e(o, f) : e, c = 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
             },
             c
           );

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

@@ -1,8 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cva as u } from "class-variance-authority";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const d = {
   good: "bg-success",
@@ -11,7 +10,7 @@ const d = {
   critical: "bg-destructive",
   liquidation: "bg-liquidation"
 };
-function O({ zone: i, size: t = 8 }) {
+function _({ zone: i, size: t = 8 }) {
   return /* @__PURE__ */ a(
     "div",
     {
@@ -50,7 +49,7 @@ const l = {
     }
   }
 );
-function B({ zone: i }) {
+function O({ zone: i }) {
   const t = l[i], e = m[i], n = Array.from({ length: g }, (s, r) => {
     const c = r < t;
     return {
@@ -61,6 +60,6 @@ function B({ zone: i }) {
   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 {
-  O as HealthDot,
-  B as StatusBars
+  _ as HealthDot,
+  O as StatusBars
 };

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

@@ -1,5 +1,4 @@
-import { TabControl as t, TabItem as a } from "./tab-control.js";
+import { TabControl as t } from "./tab-control.js";
 export {
-  t as TabControl,
-  a as TabItem
+  t as TabControl
 };

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

@@ -1,61 +1,60 @@
-import { jsx as u, jsxs as v, Fragment as y } from "react/jsx-runtime";
-import { useRef as h, useState as N, useCallback as k, useEffect as x } from "react";
+import { jsx as m, jsxs as w } from "react/jsx-runtime";
+import { useRef as f, useState as k, useCallback as U, useEffect as v } from "react";
+import { cn as g } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as f } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-function U(n) {
-  if (!n) return null;
-  const { width: r = 0, height: o = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, s = n?.offsetLeft || 0;
-  return { width: r, height: o, left: s, top: i };
+function y(o) {
+  if (!o) return null;
+  const { width: n = 0, height: i = 0 } = o?.getBoundingClientRect() || {}, a = o?.offsetTop || 0, l = o?.offsetLeft || 0;
+  return { width: n, height: i, left: l, top: a };
 }
-function C(n, r, o) {
-  const i = h(null), [s, b] = N(null), a = h(null), d = k((e) => {
-    b(e), a.current = e;
+function C(o, n, i) {
+  const a = f(null), [l, d] = k(null), s = f(null), u = U((e) => {
+    d(e), s.current = e;
   }, []);
-  return x(() => {
-    const e = o.current[n], c = () => {
-      const l = U(e), m = l?.height !== a.current?.height, p = l?.width !== a.current?.width, g = l?.left !== a.current?.left, w = l?.top !== a.current?.top;
-      (m || p || g || w) && d(l);
+  return v(() => {
+    const e = i.current[o], c = () => {
+      const r = y(e), b = r?.height !== s.current?.height, h = r?.width !== s.current?.width, p = r?.left !== s.current?.left, x = r?.top !== s.current?.top;
+      (b || h || p || x) && u(r);
     };
-    i.current = c, c();
+    a.current = c, c();
     const t = e ? new ResizeObserver(c) : null;
     return e && t?.observe(e), () => {
       e && t?.unobserve(e);
     };
-  }, [n, o, d]), x(() => {
-    const e = r ? new ResizeObserver(() => {
-      i.current?.();
+  }, [o, i, u]), v(() => {
+    const e = n ? new ResizeObserver(() => {
+      a.current?.();
     }) : null;
-    return r && e?.observe(r), () => {
-      r && e?.unobserve(r);
+    return n && e?.observe(n), () => {
+      n && e?.unobserve(n);
     };
-  }, [r]), s;
+  }, [n]), l;
 }
-function O({
-  className: n,
-  tabs: r,
-  state: o,
-  showBorder: i = !0,
-  tabItemWrapPadding: s,
-  variant: b = "auto"
+function z({
+  className: o,
+  tabs: n,
+  state: i,
+  showBorder: a = !0,
+  tabItemWrapPadding: l,
+  variant: d = "auto"
 }) {
-  const a = h(null), d = h({}), e = C(
-    o.id,
-    a.current,
-    d
-  ), c = (t, l) => () => o.handleTabChange(t, l);
-  return /* @__PURE__ */ u("div", { className: f("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ v(
+  const s = f(null), u = f({}), e = C(
+    i.id,
+    s.current,
+    u
+  ), c = (t, r) => () => i.handleTabChange(t, r);
+  return /* @__PURE__ */ m("div", { className: g("relative w-full flex flex-col flex-wrap", o), children: /* @__PURE__ */ w(
     "div",
     {
-      ref: a,
-      className: f(
+      ref: s,
+      className: g(
         "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"
+        a && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
       ),
       children: [
-        e && /* @__PURE__ */ u(
+        e && /* @__PURE__ */ m(
           "div",
           {
             className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
@@ -65,18 +64,18 @@ function O({
             }
           }
         ),
-        r.map((t, l, m) => {
-          const p = l === m.length - 1;
-          return /* @__PURE__ */ u(
+        n.map((t, r, b) => {
+          const h = r === b.length - 1;
+          return /* @__PURE__ */ m(
             "button",
             {
-              ref: (g) => {
-                d.current[t.id] = g;
+              ref: (p) => {
+                u.current[t.id] = p;
               },
               type: "button",
-              onClick: t.disabled ? void 0 : c(t.id, l),
+              onClick: t.disabled ? void 0 : c(t.id, r),
               disabled: t.disabled,
-              className: f(
+              className: g(
                 // `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
@@ -84,13 +83,13 @@ function O({
                 // 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",
-                s ? "" : "p-0 pb-3.5",
-                b === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !p && "mr-10 max-[500px]:mr-8",
+                l ? "" : "p-0 pb-3.5",
+                d === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !h && "mr-10 max-[500px]:mr-8",
                 t.disabled && "cursor-not-allowed",
                 !t.disabled && "cursor-pointer",
                 !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
               ),
-              style: s ? { padding: s } : void 0,
+              style: l ? { padding: l } : void 0,
               children: t.item
             },
             `tab-item-${t.id}`
@@ -100,40 +99,6 @@ function O({
     }
   ) });
 }
-function q({
-  icon: n,
-  label: r,
-  selected: o,
-  textSize: i = "default",
-  amount: s
-}) {
-  return /* @__PURE__ */ v(y, { children: [
-    n && /* @__PURE__ */ u(
-      "div",
-      {
-        className: f(
-          "mr-3",
-          o ? "text-foreground" : "text-secondary-foreground"
-        ),
-        children: n
-      }
-    ),
-    /* @__PURE__ */ u(
-      "div",
-      {
-        className: f(
-          "m-0 p-0 whitespace-nowrap",
-          i === "default" && "text-sm leading-[17px] font-normal",
-          i === "unset" && "text-[unset] leading-[unset] font-[unset]",
-          o ? "text-foreground" : "text-secondary-foreground"
-        ),
-        children: r
-      }
-    ),
-    !!s && /* @__PURE__ */ u("div", { className: "ml-1.5", children: /* @__PURE__ */ u("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: s }) })
-  ] });
-}
 export {
-  O as TabControl,
-  q as TabItem
+  z as TabControl
 };

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

@@ -0,0 +1,40 @@
+import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+function c({
+  icon: r,
+  label: d,
+  selected: t,
+  textSize: n = "default",
+  amount: o
+}) {
+  return /* @__PURE__ */ s(m, { children: [
+    r && /* @__PURE__ */ e(
+      "div",
+      {
+        className: a(
+          "mr-3",
+          t ? "text-foreground" : "text-secondary-foreground"
+        ),
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: a(
+          "m-0 p-0 whitespace-nowrap",
+          n === "default" && "text-sm leading-[17px] font-normal",
+          n === "unset" && "text-[unset] leading-[unset] font-[unset]",
+          t ? "text-foreground" : "text-secondary-foreground"
+        ),
+        children: d
+      }
+    ),
+    !!o && /* @__PURE__ */ e("div", { className: "ml-1.5", children: /* @__PURE__ */ e("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
+  ] });
+}
+export {
+  c as TabItem
+};

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

@@ -1,11 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
 import { Skeleton as p } from "../skeleton/skeleton.js";
 import "react";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as t } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-function y({
+function x({
   height: e = "70px",
   columns: i = 6,
   cellClassName: o,
@@ -36,5 +35,5 @@ function y({
   );
 }
 export {
-  y as GridLoadingLine
+  x as GridLoadingLine
 };