@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

@@ -0,0 +1,40 @@
+import { jsx as s, Fragment as m } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { useSliderContext as d } from "./slider-context.js";
+import { getIntervalBounds as v, resolveColor as h } from "./types.js";
+function k() {
+  const r = d();
+  if (!r) return null;
+  const { colorIntervals: t, min: n, max: o } = r;
+  if (!t?.length) return null;
+  const e = o - n;
+  return e <= 0 ? null : /* @__PURE__ */ s(p, { intervals: t, range: e, min: n });
+}
+function p({
+  intervals: r,
+  range: t,
+  min: n
+}) {
+  const o = f(
+    () => [...r || []].reverse(),
+    [r]
+  );
+  return /* @__PURE__ */ s(m, { children: o.map((e, u) => {
+    const { start: l, end: c } = v(e), i = (l - n) / t * 100, a = (c - l) / t * 100;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: "absolute h-full",
+        style: {
+          left: `${i}%`,
+          width: `${a}%`,
+          backgroundColor: h(e.color) ?? "hsl(var(--success))"
+        }
+      },
+      `interval-${u}-${l}-${c}`
+    );
+  }) });
+}
+export {
+  k as SliderTrack
+};

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

@@ -1,130 +1,181 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-slider";
-import * as D from "react";
-import { useMemo as v } from "react";
-import { cn as x } from "../../utils/cn.js";
+import { jsx as u, jsxs as j } from "react/jsx-runtime";
+import { LEVERAGE_DECIMALS as I } from "@gearbox-protocol/sdk";
+import * as C from "@radix-ui/react-slider";
+import * as X from "react";
+import { useMemo as y, useRef as B, useState as q, useLayoutEffect as H } from "react";
+import { cn as V } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function A(r) {
-  return {
-    start: r.start ?? r.from ?? 0,
-    end: r.end ?? r.to ?? 0
-  };
+import "luxon";
+import { SliderProvider as J } from "./slider-context.js";
+import { SliderMark as K } from "./slider-mark.js";
+import { SliderTrack as Q } from "./slider-track.js";
+import { getIntervalBounds as U, getThumbInBoundsOffset as _ } from "./types.js";
+const E = Number(I);
+function R(t, n, o) {
+  const a = t / n, r = Math.round(a * o);
+  return Math.round(r / o * n);
 }
-function E(r, a) {
-  if (a)
-    for (const o of a) {
-      const { start: c, end: f } = A(o);
-      if (r >= c && r <= f)
-        return o.color;
-    }
+function Y(t, n, o, a) {
+  const r = /* @__PURE__ */ new Set([t]);
+  for (let s = 1; n >= t + o * s; s += 1)
+    r.add(t + o * s);
+  return r.add(n), [...r].sort((s, i) => s - i);
 }
-const G = D.forwardRef(
+function Z(t, n, o) {
+  if (t.length === 0) return t;
+  const a = t.length - 1, r = {
+    point: Math.max(t[0].point, n),
+    type: t[0].type
+  }, s = {
+    point: Math.min(t[a].point, o),
+    type: t[a].type
+  }, i = t.slice(1, a).reduce((l, c) => (c.point !== r.point && c.point !== s.point && (l[c.point] = c), l), {});
+  return [r, ...Object.values(i), s];
+}
+function tt(t, n, o, a, r) {
+  const s = R(t, o, 1), l = Y(s, n, r).map(
+    (c) => ({
+      point: R(c, o, a),
+      type: "base"
+    })
+  );
+  return Z(l, t, n);
+}
+function et(t, n, o) {
+  const a = t, r = R(a, o, 1), s = Math.abs(r - a), i = n.reduce(
+    (p, x) => {
+      const N = x !== void 0 ? Math.abs(x - a) : Number.MAX_SAFE_INTEGER;
+      return p[N] = x || 0, p;
+    },
+    []
+  ), l = {
+    [s]: r,
+    ...i
+  }, c = Math.min(
+    ...Object.keys(l).map((p) => Number(p))
+  );
+  return { minPoint: l[c], minDistance: c };
+}
+function nt(t, n, o) {
+  return Math.min(Math.max(t, n), o);
+}
+const ot = X.forwardRef(
   ({
-    className: r,
-    variant: a = "default",
-    // New API
-    value: o,
-    onValueChange: c,
-    min: f,
-    max: k,
-    step: R,
-    // Legacy API
-    from: M,
-    to: V,
-    colorIntervals: p,
-    precision: u,
-    markerStep: d,
-    onChangeValue: y,
-    onSubmitValue: w,
-    ...j
-  }, T) => {
-    const n = f ?? M ?? 0, s = k ?? V ?? 100, N = Array.isArray(u) ? u[0] : u, B = R ?? (N ? 10 ** -N : 1), m = v(() => {
-      if (Array.isArray(o)) return o;
-      if (typeof o == "number") return [o];
-    }, [o]), F = (e) => {
-      c?.(e), y && e.length > 0 && y(e[0]);
-    }, K = (e) => {
-      w && e.length > 0 && w(e[0]);
-    }, P = m?.[0] ?? 0, S = E(P, p), C = (m ?? [0]).length, _ = v(
-      () => Array.from({ length: C }, (e, t) => `thumb-${t}`),
-      [C]
-    ), h = v(() => {
-      if (!d) return;
-      const e = [];
-      for (let t = n; t <= s; t += d)
-        e.push(t);
-      return e;
-    }, [n, s, d]);
-    return /* @__PURE__ */ g("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ g(
-        l.Root,
+    className: t,
+    from: n,
+    to: o,
+    value: a,
+    onChangeValue: r,
+    onSubmitValue: s,
+    colorIntervals: i,
+    precision: l = 10,
+    markerStep: c = 100,
+    epsilon: A = 8,
+    colorIntervalLabel: p,
+    ...x
+  }, N) => {
+    const [f, m] = n > o ? [o, n] : [n, o], v = Array.isArray(l) ? l[0] : l, F = y(() => E / v, [v]), G = y(
+      () => i?.flatMap((e) => [e.start, e.end]) || [],
+      [i]
+    ), D = (e) => {
+      const { minDistance: d, minPoint: h } = et(
+        e,
+        G,
+        E
+      );
+      return d < A ? nt(h, f, m) : e;
+    }, $ = (e) => {
+      e.length > 0 && r(D(e[0]));
+    }, z = (e) => {
+      s && e.length > 0 && s(D(e[0]));
+    }, k = y(() => c ? tt(
+      f,
+      m,
+      E,
+      v,
+      c
+    ).map((d) => d.point) : void 0, [f, m, v, c]), L = B(null), S = B(null), [T, O] = q(void 0), P = y(() => {
+      if (!i?.length) return;
+      const e = i[i.length - 1], { start: d, end: h } = U(e), b = m - f;
+      if (b <= 0) return;
+      const g = (d - f) / b * 100, M = (h - f) / b * 100, W = _(g), w = _(M);
+      return {
+        pct: (g + M) / 2,
+        offsetPx: (W + w) / 2
+      };
+    }, [i, f, m]);
+    return H(() => {
+      const e = L.current, d = S.current;
+      if (!P || !e || !d) {
+        O(void 0);
+        return;
+      }
+      const h = () => {
+        const g = e.offsetWidth, M = d.offsetWidth, w = P.pct / 100 * g + P.offsetPx - M / 2;
+        O(Math.max(0, Math.min(w, g - M)));
+      };
+      h();
+      const b = new ResizeObserver(h);
+      return b.observe(e), () => b.disconnect();
+    }, [P]), /* @__PURE__ */ u(J, { colorIntervals: i, min: f, max: m, children: /* @__PURE__ */ j("div", { className: "relative w-full px-[9px] pb-3", children: [
+      /* @__PURE__ */ u("div", { className: "relative", children: /* @__PURE__ */ j(
+        C.Root,
         {
-          ref: T,
-          className: x(
+          ref: N,
+          className: V(
             "relative flex w-full touch-none select-none items-center",
-            r
+            t
           ),
-          min: n,
-          max: s,
-          step: B,
-          value: m,
-          onValueChange: F,
-          onValueCommit: K,
-          ...j,
+          min: f,
+          max: m,
+          step: F,
+          value: [a],
+          onValueChange: $,
+          onValueCommit: z,
+          ...x,
           children: [
-            /* @__PURE__ */ g(l.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: [
-              p?.map((e, t) => {
-                const { start: b, end: $ } = A(e), q = (b - n) / (s - n) * 100, z = ($ - b) / (s - n) * 100;
-                return /* @__PURE__ */ i(
-                  "div",
-                  {
-                    className: "absolute h-full",
-                    style: {
-                      left: `${q}%`,
-                      width: `${z}%`,
-                      backgroundColor: e.color ?? "var(--primary)",
-                      opacity: 0.3
-                    }
-                  },
-                  `interval-${t}-${b}-${$}`
-                );
-              }),
-              /* @__PURE__ */ i(
-                l.Range,
-                {
-                  className: x("absolute h-full"),
-                  style: {
-                    backgroundColor: S ?? void 0
-                  }
-                }
-              )
-            ] }),
-            _.map((e) => /* @__PURE__ */ i(
-              l.Thumb,
+            /* @__PURE__ */ u(C.Track, { className: "relative h-1 grow overflow-hidden bg-gray-40 mx-[9px] cursor-pointer", children: /* @__PURE__ */ u(Q, {}) }),
+            k && k.length > 0 && /* @__PURE__ */ u("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ u("div", { className: "relative w-full", children: k.map((e) => /* @__PURE__ */ u(
+              K,
               {
-                className: "block h-5 w-5 rounded-full border-2 border-primary bg-background shadow-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:bg-accent"
+                value: e,
+                min: f,
+                max: m,
+                onClick: (d) => {
+                  r(d), s?.(d);
+                }
               },
-              e
-            ))
+              `mark-${e}`
+            )) }) }),
+            /* @__PURE__ */ u(
+              C.Thumb,
+              {
+                className: V(
+                  "relative block h-[18px] w-[18px] 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"
+                )
+              }
+            )
           ]
         }
-      ),
-      h && h.length > 0 && /* @__PURE__ */ i("div", { className: "relative w-full h-2 mt-1", children: h.map((e) => {
-        const t = (e - n) / (s - n) * 100;
-        return /* @__PURE__ */ i(
-          "div",
-          {
-            className: "absolute w-0.5 h-1 bg-muted-foreground/50",
-            style: { left: `${t}%` }
-          },
-          `mark-${e}`
-        );
-      }) })
-    ] });
+      ) }),
+      p && i && i.length > 0 && /* @__PURE__ */ u("div", { ref: L, className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ u(
+        "div",
+        {
+          ref: S,
+          className: "absolute text-[11px] font-medium leading-[126%] text-success whitespace-nowrap",
+          style: T !== void 0 ? { left: `${T}px` } : void 0,
+          children: p
+        }
+      ) })
+    ] }) });
   }
 );
-G.displayName = "Slider";
+ot.displayName = "Slider";
 export {
-  G as Slider
+  ot as Slider
 };

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

@@ -0,0 +1,36 @@
+const n = {
+  additionalSuccess: "hsl(var(--success))",
+  additionalSuccessLight: "#88c497",
+  additionalWarning: "hsl(var(--warning))",
+  additionalAlert: "hsl(var(--destructive))",
+  additionalLiquidation: "hsl(var(--liquidation))",
+  mainPrimary: "hsl(var(--primary))",
+  mainAccent: "hsl(var(--accent))",
+  textPrimary: "hsl(var(--foreground))",
+  textSecondary: "hsl(var(--secondary-foreground))",
+  gray40: "hsl(var(--gray-40))",
+  gray50: "hsl(var(--gray-50))",
+  gray60: "hsl(var(--gray-60))"
+};
+function i(r) {
+  if (r)
+    return n[r] ?? r;
+}
+function s(r) {
+  return {
+    start: r.start ?? 0,
+    end: r.end ?? 0
+  };
+}
+const t = 18, a = t / 2;
+function e(r) {
+  return a - a * r / 50;
+}
+export {
+  n as THEME_COLOR_MAP,
+  a as THUMB_HALF,
+  t as THUMB_SIZE,
+  s as getIntervalBounds,
+  e as getThumbInBoundsOffset,
+  i as resolveColor
+};

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

@@ -1,66 +1,70 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { Slider as b } from "../slider/slider.js";
-import { TokenSymbol as v } from "../token-symbol/token-symbol.js";
+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 { cn as N } from "../../utils/cn.js";
+import { TokenSymbol as v } from "../token-symbol/token-symbol.js";
+import { cn as E } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
+const y = Number(b);
 function z({
-  from: s = 0,
-  to: r = 100,
-  value: m = 0,
-  token: c,
-  step: p = 1,
-  setValue: h,
+  from: r = 0,
+  to: n = 100,
+  value: c = 0,
+  token: i,
+  step: a = 1,
+  setValue: f,
   additionalMarkers: t,
-  additionalMarkersLabels: x,
-  epsilon_inPer: i,
-  children: f,
+  additionalMarkersLabels: h,
+  epsilon_inPer: l,
+  children: x,
   className: u
 }) {
-  const d = (e) => {
-    let n = e[0];
-    if (i && t) {
-      const g = (r - s) * i / 100;
-      for (const a of t)
-        if (Math.abs(n - a) <= g) {
-          n = a;
+  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;
         }
     }
-    h?.(n);
+    f?.(o);
   };
-  return /* @__PURE__ */ l("div", { className: N("space-y-2", u), children: [
-    c && /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ o(v, { token: c, size: 20, showSymbol: !0 }),
-      /* @__PURE__ */ l("span", { className: "text-sm text-muted-foreground", children: [
-        m.toFixed(2),
+  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__ */ o(
-      b,
+    /* @__PURE__ */ s(
+      N,
       {
-        min: s,
-        max: r,
-        step: p,
-        value: [m],
-        onValueChange: d
+        from: r,
+        to: n,
+        precision: d,
+        value: c,
+        onChangeValue: g,
+        markerStep: 0
       }
     ),
-    t && t.length > 0 && /* @__PURE__ */ o("div", { className: "relative h-4", children: t.map((e) => {
-      const n = (e - s) / (r - s) * 100;
-      return /* @__PURE__ */ o(
+    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: `${n}%` },
-          children: x?.[e] ?? `${e}%`
+          style: { left: `${o}%` },
+          children: h?.[e] ?? `${e}%`
         },
         e
       );
     }) }),
-    f
+    x
   ] });
 }
 export {

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

@@ -0,0 +1,61 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { cva as x } from "class-variance-authority";
+import { TextButton as u } from "../text-button/text-button.js";
+import { TokenTemplate as f } from "../token-template/token-template.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const b = x("font-normal leading-[130%] text-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function w({
+  title: m = "Balance",
+  className: i,
+  maxAmount: l,
+  token: c,
+  disabled: d,
+  maxButton: p = !0,
+  onMaxButtonClick: r,
+  size: e = "sm"
+}) {
+  const o = !d && p, n = /* @__PURE__ */ t(f, { value: l, token: c, showSymbol: !1 });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: a("flex shrink-0 basis-auto items-center", i),
+      "data-testid": "balance-indicator",
+      children: [
+        /* @__PURE__ */ s("span", { className: a(b({ size: e })), children: [
+          m,
+          ": ",
+          o && e === "sm" ? /* @__PURE__ */ t(u, { onClick: r, children: n }) : n
+        ] }),
+        o && e !== "sm" && /* @__PURE__ */ t("div", { className: "ml-2", children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: r,
+            "data-testid": "balance-max",
+            className: a(
+              "rounded-[6px] border-0 py-[3px] px-1 text-[11px]! leading-[13px]!",
+              "text-center uppercase text-foreground",
+              "bg-gray-70 hover:bg-gray-90 transition-colors"
+            ),
+            children: "max"
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  w as BalanceIndicator
+};

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

@@ -1,4 +1,6 @@
-import { SmartNumberInput as t } from "./smart-number-input.js";
+import { BalanceIndicator as t } from "./balance-indicator.js";
+import { SmartNumberInput as e } from "./smart-number-input.js";
 export {
-  t as SmartNumberInput
+  t as BalanceIndicator,
+  e as SmartNumberInput
 };