@gearbox-protocol/permissionless-ui 1.22.0-next.98 → 1.22.0

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

@@ -1,72 +1,162 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import { LEVERAGE_DECIMALS as b } from "@gearbox-protocol/sdk";
-import { Slider as N } from "../slider/slider.js";
-import "../slider/slider-context.js";
-import "react";
-import { TokenSymbol as v } from "../token-symbol/token-symbol.js";
-import { cn as E } from "../../utils/cn.js";
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { formatBN as F, toBN as H } from "@gearbox-protocol/sdk";
+import * as v from "@radix-ui/react-slider";
+import { useMemo as l, useCallback as u, useRef as J } from "react";
+import { SliderProvider as K } from "../slider/slider-context.js";
+import { SliderMark as Q } from "../slider/slider-mark.js";
+import { cn as x } from "../../utils/cn.js";
 import "sonner";
+import { validateMinMax as w } from "../../utils/math.js";
 import "luxon";
-const y = Number(b);
-function z({
-  from: r = 0,
-  to: n = 100,
-  value: c = 0,
-  token: i,
-  step: a = 1,
-  setValue: f,
-  additionalMarkers: t,
-  additionalMarkersLabels: h,
-  epsilon_inPer: l,
-  children: x,
-  className: u
+import "../../utils/z-index.js";
+import { SliderTokenLabel as X } from "./slider-token-label.js";
+import { makeSliderTokenMarkerPoints as Y, mergeCloseMarkers as Z } from "./slider-token-utils.js";
+const V = 7.5;
+function ue({
+  from: p,
+  to: g,
+  step: I,
+  markerStep: N,
+  token: b,
+  additionalMarkers: c,
+  additionalMarkersLabels: S,
+  value: $,
+  setValue: m,
+  epsilon_inPer: E = 1,
+  mergeMarkers_inPer: L = 3,
+  className: z
 }) {
-  const d = y / a, g = (e) => {
-    let o = e;
-    if (l && t) {
-      const S = (n - r) * l / 100;
-      for (const p of t)
-        if (Math.abs(o - p) <= S) {
-          o = p;
-          break;
-        }
-    }
-    f?.(o);
-  };
-  return /* @__PURE__ */ m("div", { className: E("space-y-2", u), children: [
-    i && /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ s(v, { token: i, size: 20, showSymbol: !0 }),
-      /* @__PURE__ */ m("span", { className: "text-sm text-muted-foreground", children: [
-        c.toFixed(2),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ s(
+  const [t, n] = p > g ? [g, p] : [p, g], d = l(() => n - t, [n, t]), M = l(
+    () => d / 100 * E,
+    [E, d]
+  ), T = l(
+    () => d / 100 * L,
+    [d, L]
+  ), h = l(
+    () => d / 100 * V,
+    [d]
+  ), f = l(() => c == null ? {} : typeof c == "number" ? { [c]: c } : Object.fromEntries(
+    c.map((e) => [e, e])
+  ), [c]), y = l(
+    () => Y(
+      t,
+      n,
       N,
-      {
-        from: r,
-        to: n,
-        precision: d,
-        value: c,
-        onChangeValue: g,
-        markerStep: 0
-      }
+      f
     ),
-    t && t.length > 0 && /* @__PURE__ */ s("div", { className: "relative h-4", children: t.map((e) => {
-      const o = (e - r) / (n - r) * 100;
-      return /* @__PURE__ */ s(
-        "div",
-        {
-          className: "absolute transform -translate-x-1/2 text-xs text-muted-foreground",
-          style: { left: `${o}%` },
-          children: h?.[e] ?? `${e}%`
-        },
-        e
+    [t, n, N, f]
+  ), s = l(
+    () => Z(y, T),
+    [y, T]
+  ), C = u(
+    (e) => {
+      if (s.length === 0) {
+        m(w(e, t, n));
+        return;
+      }
+      const o = s.reduce(
+        (a, i) => Math.abs(i.point - e) < Math.abs(a.point - e) ? i : a
       );
-    }) }),
-    x
-  ] });
+      Math.abs(o.point - e) < M ? m(w(o.point, t, n)) : m(e);
+    },
+    [s, M, t, n, m]
+  ), P = u(
+    (e) => {
+      e.length > 0 && C(e[0]);
+    },
+    [C]
+  ), R = u(
+    (e) => {
+      m(w(e, t, n));
+    },
+    [t, n, m]
+  ), D = J(null), A = u(() => {
+    const e = D.current;
+    if (!e) return;
+    const o = () => {
+      e.dataset.dragging = "";
+    }, a = () => {
+      document.removeEventListener("pointermove", o), delete e.dataset.dragging;
+    };
+    document.addEventListener("pointermove", o, { once: !0 }), document.addEventListener("pointerup", a, { once: !0 });
+  }, []), G = l(() => s.map(({ point: e }, o, a) => {
+    const i = a[o + 1], k = a[o - 1], O = i ? Math.abs(e - i.point) <= h : !1, U = k ? Math.abs(e - k.point) <= h : !1, W = o === 0 || o === a.length - 1 || f[e] !== void 0 && !U && !O, _ = S?.[e], q = W ? F(H(String(e), b.decimals), b.decimals) : "", j = _ ?? q;
+    return { point: e, labelText: j, align: _ ? "top" : "bottom", hasLabel: !!j };
+  }), [
+    s,
+    f,
+    S,
+    b,
+    h
+  ]);
+  return /* @__PURE__ */ r("div", { className: x("relative w-full", z), children: /* @__PURE__ */ r(K, { colorIntervals: void 0, min: t, max: n, children: /* @__PURE__ */ r("div", { className: "relative w-full px-[9px] pt-3 pb-3", children: /* @__PURE__ */ B(
+    "div",
+    {
+      ref: D,
+      className: x(
+        "relative",
+        "[&:not([data-dragging])_span[style]]:transition-[left]",
+        "[&:not([data-dragging])_span[style]]:duration-100",
+        "[&:not([data-dragging])_span[style]]:[transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]"
+      ),
+      onPointerDown: A,
+      children: [
+        /* @__PURE__ */ B(
+          v.Root,
+          {
+            className: "relative flex w-full touch-none select-none items-center",
+            min: t,
+            max: n,
+            step: I,
+            value: [$],
+            onValueChange: P,
+            onValueCommit: P,
+            children: [
+              /* @__PURE__ */ r(v.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-gray-40 mx-[9px] cursor-pointer" }),
+              s.length > 0 && /* @__PURE__ */ r("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ r("div", { className: "relative w-full", children: s.map(({ point: e }) => /* @__PURE__ */ r(
+                Q,
+                {
+                  value: e,
+                  min: t,
+                  max: n,
+                  onSelect: R
+                },
+                `mark-${e}`
+              )) }) }),
+              /* @__PURE__ */ r(
+                v.Thumb,
+                {
+                  className: x(
+                    "relative block h-[18px] w-[18px] shrink-0 rounded-full bg-foreground",
+                    "cursor-grab active:cursor-grabbing",
+                    "focus-visible:outline-none",
+                    "disabled:pointer-events-none disabled:opacity-50",
+                    "after:absolute after:h-1.5 after:w-1.5 after:rounded-full after:bg-accent",
+                    "after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "absolute inset-0 pointer-events-none", children: /* @__PURE__ */ r("div", { className: "relative w-full h-full", children: G.map(
+          ({ point: e, labelText: o, align: a, hasLabel: i }) => i && /* @__PURE__ */ r(
+            X,
+            {
+              point: e,
+              min: t,
+              max: n,
+              label: o,
+              align: a,
+              onSelect: R
+            },
+            `label-${e}`
+          )
+        ) }) })
+      ]
+    }
+  ) }) }) });
 }
 export {
-  z as SliderToken
+  ue as SliderToken
 };

package/dist/esm/components/smart-number-input/balance-indicator.js

@@ -7,6 +7,7 @@ import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const b = x("font-normal leading-[130%] text-foreground", {
   variants: {
     size: {
@@ -16,7 +17,7 @@ const b = x("font-normal leading-[130%] text-foreground", {
   },
   defaultVariants: { size: "md" }
 });
-function w({
+function S({
   title: m = "Balance",
   className: i,
   maxAmount: l,
@@ -57,5 +58,5 @@ function w({
   );
 }
 export {
-  w as BalanceIndicator
+  S as BalanceIndicator
 };

package/dist/esm/components/smart-number-input/smart-number-input.js

@@ -11,6 +11,7 @@ import { parseInputToBN as Q } from "../../utils/parse-input-to-bn.js";
 import { cn as d } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import { BalanceIndicator as U } from "./balance-indicator.js";
 const W = c(
   "relative w-full text-foreground bg-gray-20 border border-gray-30 transition-[background-color] duration-100 ease-linear [&:hover]:bg-gray-30 [&:hover]:border-gray-40 data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px] data-[disabled=true]:cursor-not-allowed",

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

@@ -1,10 +1,11 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { IconPending as d } from "@gearbox-protocol/static";
+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 "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 = {
@@ -14,7 +15,7 @@ const m = i.forwardRef(
       lg: "h-8 w-8",
       xl: "h-12 w-12"
     };
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ f(
       "div",
       {
         ref: o,
@@ -25,7 +26,7 @@ const m = i.forwardRef(
         ...n,
         children: [
           /* @__PURE__ */ t(
-            d,
+            c,
             {
               size: e === "xs" ? 12 : e === "sm" ? 16 : e === "default" ? 24 : e === "lg" ? 32 : 48,
               className: a(
@@ -41,20 +42,20 @@ const m = i.forwardRef(
   }
 );
 m.displayName = "Spinner";
-const f = i.forwardRef(({ className: s, fullScreen: e = !1, ...r }, n) => /* @__PURE__ */ t(
+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 z-50" : "absolute inset-0",
+      e ? `fixed inset-0 ${d.LOADING}` : "absolute inset-0",
       s
     ),
     children: /* @__PURE__ */ t(m, { size: "lg", ...r })
   }
 ));
-f.displayName = "SpinnerOverlay";
+p.displayName = "SpinnerOverlay";
 export {
   m as Spinner,
-  f as SpinnerOverlay
+  p as SpinnerOverlay
 };

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

@@ -1,11 +1,12 @@
-import { jsx as d } from "react/jsx-runtime";
-import * as m from "react";
+import { jsx as m } from "react/jsx-runtime";
+import * as d from "react";
 import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const s = m.forwardRef(
-  ({ size: r = 40, speed: o = "1s", width: i = 4, className: e, style: a, ...t }, n) => /* @__PURE__ */ d(
+import "../../utils/z-index.js";
+const s = d.forwardRef(
+  ({ size: r = 40, speed: o = "1s", width: i = 4, className: e, style: t, ...a }, n) => /* @__PURE__ */ m(
     "span",
     {
       ref: n,
@@ -18,9 +19,9 @@ const s = m.forwardRef(
         height: r,
         borderWidth: i,
         animationDuration: o,
-        ...a
+        ...t
       },
-      ...t
+      ...a
     }
   )
 );

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

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const u = c(
   [
     /* layout */

package/dist/esm/components/stat-badge/stat-badge.js

@@ -8,6 +8,7 @@ import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const V = l(
   "w-full h-full rounded-lg border transition-colors",
   {

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

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const d = m("rounded-full shrink-0", {
   variants: {
     variant: {

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

@@ -2,9 +2,10 @@ 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 o } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const d = {
   good: "bg-success",
   medium: "bg-warning",
@@ -12,11 +13,11 @@ const d = {
   critical: "bg-destructive",
   liquidation: "bg-liquidation"
 };
-function B({ zone: i, size: t = 8 }) {
+function q({ zone: i, size: t = 8 }) {
   return /* @__PURE__ */ a(
     "div",
     {
-      className: o("rounded-full shrink-0", d[i]),
+      className: s("rounded-full shrink-0", d[i]),
       style: { width: t, height: t },
       "aria-hidden": !0
     }
@@ -51,17 +52,17 @@ const l = {
     }
   }
 );
-function q({ zone: i }) {
-  const t = l[i], e = m[i], n = Array.from({ length: g }, (s, 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,
       color: c ? e : "gray-50"
     };
   }).reverse();
-  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)) });
+  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 {
-  B as HealthDot,
-  q as StatusBars
+  q as HealthDot,
+  A as StatusBars
 };

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

@@ -4,13 +4,14 @@ import "@gearbox-protocol/sdk";
 import { cn as d } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const m = {
   xs: 4,
   sm: 5,
   md: 6,
   lg: 8
 };
-function u({
+function h({
   isNegative: i,
   $isNegative: o,
   size: t = 5,
@@ -34,5 +35,5 @@ function u({
   );
 }
 export {
-  u as StatusTriangle
+  h as StatusTriangle
 };

package/dist/esm/components/stepper/stepper.js

@@ -6,6 +6,7 @@ import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const v = p.forwardRef(
   ({
     className: g,

package/dist/esm/components/styled-dropdown/styled-dropdown.js

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { DropdownMenu as I, DropdownMenuTrigger as $ } from "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
 import { DropdownMenuContent as A } from "../dropdown-menu/dropdown-menu-content.js";
@@ -14,7 +14,8 @@ import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function V({
+import "../../utils/z-index.js";
+function W({
   children: g,
   open: u,
   onOpenChange: h,
@@ -25,19 +26,19 @@ function V({
   theme: x = "default",
   size: w = "md",
   icon: t,
-  iconSize: l,
+  iconSize: p,
   align: v = "start",
   side: D = "bottom",
   className: k,
   triggerClassName: C,
   onClickAnalytics: M
 }) {
-  const p = b || y, s = {
+  const l = b || y, s = {
     xs: "text-xs px-1.5 py-0.5",
     sm: "text-sm px-2 py-1",
     md: "text-sm px-3 py-1.5",
     lg: "text-base px-4 py-2"
-  }, d = {
+  }, m = {
     empty: "bg-transparent hover:bg-accent",
     default: "bg-background border border-border hover:bg-accent",
     dark: "bg-gray-800 text-white hover:bg-gray-700",
@@ -54,7 +55,7 @@ function V({
         {
           "aria-hidden": "true",
           className: "inline-block fill-current",
-          style: { width: l || 12, height: l || 12 },
+          style: { width: p || 12, height: p || 12 },
           viewBox: `0 0 ${o} ${n}`,
           children: /* @__PURE__ */ e("path", { d: Array.isArray(i) ? i[0] : i })
         }
@@ -62,19 +63,19 @@ function V({
     }
     return t;
   };
-  return /* @__PURE__ */ m(I, { open: u, onOpenChange: h, children: [
-    p && /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ m(
+  return /* @__PURE__ */ d(I, { open: u, onOpenChange: h, children: [
+    l && /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ d(
       "button",
       {
         type: "button",
         className: c(
           "inline-flex items-center gap-1 rounded transition-colors",
           s[w] || s.md,
-          d[x] || d.default,
+          m[x] || m.default,
           C
         ),
         children: [
-          p,
+          l,
           j()
         ]
       }
@@ -103,5 +104,5 @@ function V({
   ] });
 }
 export {
-  V as StyledDropdown
+  W as StyledDropdown
 };

package/dist/esm/components/switch/switch.js

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const d = l.forwardRef(({ className: r, size: t = "default", ...o }, i) => {
   const n = {
     sm: "h-4 w-7",