@gearbox-protocol/permissionless-ui 1.22.0-next.67 → 1.22.0-next.69

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

@@ -1,28 +1,31 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useSliderContext as u } from "./slider-context.js";
-import { getThumbInBoundsOffset as i, getIntervalBounds as d, resolveColor as m } from "./types.js";
-function C({ value: r, min: o, max: t }) {
-  const e = u()?.colorIntervals, s = t - o;
+import { useSliderContext as i } from "./slider-context.js";
+import { getThumbInBoundsOffset as p, getIntervalBounds as d, resolveColor as b } from "./types.js";
+function C({ value: r, min: t, max: o, onClick: n }) {
+  const a = i()?.colorIntervals, s = o - t;
   if (s <= 0) return null;
-  const l = (r - o) / s * 100, c = i(l), a = p(r, e);
+  const c = (r - t) / s * 100, l = p(c), u = m(r, a);
   return /* @__PURE__ */ f(
-    "div",
+    "button",
     {
-      className: "absolute h-2.5 w-2.5 rounded-full -translate-x-1/2 -translate-y-1/2",
+      type: "button",
+      tabIndex: -1,
+      className: "absolute h-2.5 w-2.5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-auto cursor-pointer border-0 p-0 appearance-none bg-transparent",
       style: {
-        left: `calc(${l}% + ${c}px)`,
+        left: `calc(${c}% + ${l}px)`,
         top: "50%",
-        backgroundColor: a ?? "hsl(var(--gray-40))"
-      }
+        backgroundColor: u ?? "hsl(var(--gray-40))"
+      },
+      onClick: () => n?.(r)
     }
   );
 }
-function p(r, o) {
-  if (o)
-    for (const t of o) {
-      const { start: n, end: e } = d(t);
+function m(r, t) {
+  if (t)
+    for (const o of t) {
+      const { start: n, end: e } = d(o);
       if (r >= n && r <= e)
-        return m(t.color) ?? "hsl(var(--success))";
+        return b(o.color) ?? "hsl(var(--success))";
     }
 }
 export {

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

@@ -1,9 +1,9 @@
-import { jsx as f, jsxs as W } from "react/jsx-runtime";
+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 j, useState as q, useLayoutEffect as H } from "react";
-import { cn as B } from "../../utils/cn.js";
+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 "luxon";
 import { SliderProvider as J } from "./slider-context.js";
@@ -17,23 +17,23 @@ function R(t, n, o) {
 }
 function Y(t, n, o, a) {
   const r = /* @__PURE__ */ new Set([t]);
-  for (let i = 1; n >= t + o * i; i += 1)
-    r.add(t + o * i);
-  return r.add(n), [...r].sort((i, s) => i - s);
+  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);
 }
 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
-  }, i = {
+  }, s = {
     point: Math.min(t[a].point, o),
     type: t[a].type
-  }, s = t.slice(1, a).reduce((l, c) => (c.point !== r.point && c.point !== i.point && (l[c.point] = c), l), {});
-  return [r, ...Object.values(s), i];
+  }, 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 i = R(t, o, 1), l = Y(i, n, r).map(
+  const s = R(t, o, 1), l = Y(s, n, r).map(
     (c) => ({
       point: R(c, o, a),
       type: "base"
@@ -42,15 +42,15 @@ function tt(t, n, o, a, r) {
   return Z(l, t, n);
 }
 function et(t, n, o) {
-  const a = t, r = R(a, o, 1), i = Math.abs(r - a), s = n.reduce(
+  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 = {
-    [i]: r,
-    ...s
+    [s]: r,
+    ...i
   }, c = Math.min(
     ...Object.keys(l).map((p) => Number(p))
   );
@@ -66,88 +66,91 @@ const ot = X.forwardRef(
     to: o,
     value: a,
     onChangeValue: r,
-    onSubmitValue: i,
-    colorIntervals: s,
+    onSubmitValue: s,
+    colorIntervals: i,
     precision: l = 10,
     markerStep: c = 100,
-    epsilon: S = 8,
+    epsilon: A = 8,
     colorIntervalLabel: p,
     ...x
   }, N) => {
-    const [d, u] = n > o ? [o, n] : [n, o], M = Array.isArray(l) ? l[0] : l, F = y(() => E / M, [M]), G = y(
-      () => s?.flatMap((e) => [e.start, e.end]) || [],
-      [s]
-    ), A = (e) => {
-      const { minDistance: m, minPoint: h } = et(
+    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 m < S ? nt(h, d, u) : e;
+      return d < A ? nt(h, f, m) : e;
     }, $ = (e) => {
-      e.length > 0 && r(A(e[0]));
+      e.length > 0 && r(D(e[0]));
     }, z = (e) => {
-      i && e.length > 0 && i(A(e[0]));
+      s && e.length > 0 && s(D(e[0]));
     }, k = y(() => c ? tt(
-      d,
-      u,
+      f,
+      m,
       E,
-      M,
+      v,
       c
-    ).map((m) => m.point) : void 0, [d, u, M, c]), D = j(null), L = j(null), [T, O] = q(void 0), P = y(() => {
-      if (!s?.length) return;
-      const e = s[s.length - 1], { start: m, end: h } = U(e), b = u - d;
+    ).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 = (m - d) / b * 100, v = (h - d) / b * 100, V = _(g), w = _(v);
+      const g = (d - f) / b * 100, M = (h - f) / b * 100, W = _(g), w = _(M);
       return {
-        pct: (g + v) / 2,
-        offsetPx: (V + w) / 2
+        pct: (g + M) / 2,
+        offsetPx: (W + w) / 2
       };
-    }, [s, d, u]);
+    }, [i, f, m]);
     return H(() => {
-      const e = D.current, m = L.current;
-      if (!P || !e || !m) {
+      const e = L.current, d = S.current;
+      if (!P || !e || !d) {
         O(void 0);
         return;
       }
       const h = () => {
-        const g = e.offsetWidth, v = m.offsetWidth, w = P.pct / 100 * g + P.offsetPx - v / 2;
-        O(Math.max(0, Math.min(w, g - v)));
+        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__ */ f(J, { colorIntervals: s, min: d, max: u, children: /* @__PURE__ */ W("div", { className: "relative w-full px-[9px] pb-3", children: [
-      /* @__PURE__ */ f("div", { className: "relative", children: /* @__PURE__ */ W(
+    }, [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: N,
-          className: B(
+          className: V(
             "relative flex w-full touch-none select-none items-center",
             t
           ),
-          min: d,
-          max: u,
+          min: f,
+          max: m,
           step: F,
           value: [a],
           onValueChange: $,
           onValueCommit: z,
           ...x,
           children: [
-            /* @__PURE__ */ f(C.Track, { className: "relative h-1 grow overflow-hidden bg-gray-40 mx-[9px]", children: /* @__PURE__ */ f(Q, {}) }),
-            k && k.length > 0 && /* @__PURE__ */ f("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ f("div", { className: "relative w-full", children: k.map((e) => /* @__PURE__ */ f(
+            /* @__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,
               {
                 value: e,
-                min: d,
-                max: u
+                min: f,
+                max: m,
+                onClick: (d) => {
+                  r(d), s?.(d);
+                }
               },
               `mark-${e}`
             )) }) }),
-            /* @__PURE__ */ f(
+            /* @__PURE__ */ u(
               C.Thumb,
               {
-                className: B(
+                className: V(
                   "relative block h-[18px] w-[18px] rounded-full bg-foreground",
                   "cursor-grab active:cursor-grabbing",
                   "focus-visible:outline-none",
@@ -160,10 +163,10 @@ const ot = X.forwardRef(
           ]
         }
       ) }),
-      p && s && s.length > 0 && /* @__PURE__ */ f("div", { ref: D, className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ f(
+      p && i && i.length > 0 && /* @__PURE__ */ u("div", { ref: L, className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ u(
         "div",
         {
-          ref: L,
+          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