@gearbox-protocol/permissionless-ui 1.17.8 → 1.18.0

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

@@ -1,16 +1,17 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { cva as w } from "class-variance-authority";
-import * as g from "react";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { cva as k } from "class-variance-authority";
+import * as z from "react";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const v = w(
+const C = k(
   "relative flex flex-row flex-nowrap items-center bg-muted rounded-md",
   {
     variants: {
       size: {
         xs: "h-6 text-[10px]",
         sm: "h-7 text-xs",
+        md: "h-10 text-sm",
         default: "h-8 text-xs sm:h-10 sm:text-sm",
         lg: "h-10 text-sm sm:h-12 sm:text-base"
       },
@@ -20,79 +21,79 @@ const v = w(
       }
     },
     defaultVariants: {
-      size: "default",
+      size: "md",
       fullWidth: !0
     }
   }
-), y = g.forwardRef(
-  ({
-    className: f,
-    name: i,
-    items: r,
-    value: a,
-    size: u = "default",
-    fullWidth: o = !0,
-    minItemWidth: d,
-    onChange: m,
-    ...x
-  }, p) => {
-    const t = r.findIndex((e) => e.value === a), l = r.length, h = {
+), N = z.forwardRef(
+  ({ className: u, name: h, items: a, size: m, fullWidth: f, minItemWidth: d, ...x }, p) => {
+    const n = m ?? "md", o = f ?? !0, t = a.findIndex((e) => e.checked), l = a.length, g = {
       xs: "rounded-sm",
       sm: "rounded-sm",
+      md: "rounded-md",
       default: "rounded-md",
       lg: "rounded-md"
     }, b = d ? { minWidth: d, flex: "0 0 auto" } : {};
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ i(
       "div",
       {
         ref: p,
-        className: s(v({ size: u, fullWidth: o }), f),
+        className: s(
+          C({
+            size: n,
+            fullWidth: o
+          }),
+          u
+        ),
         ...x,
         children: [
-          r.map((e) => /* @__PURE__ */ c(
-            "label",
-            {
-              className: s(
-                "relative z-10 m-0 p-0 flex h-full cursor-pointer select-none",
-                o ? "flex-1" : "flex-shrink-0",
-                e.disabled && "cursor-not-allowed opacity-50"
-              ),
-              style: b,
-              "data-checked": e.value === a,
-              "data-disabled": e.disabled,
-              children: [
-                /* @__PURE__ */ n(
-                  "input",
-                  {
-                    type: "radio",
-                    name: i,
-                    value: e.value,
-                    checked: e.value === a,
-                    disabled: e.disabled,
-                    onChange: () => m?.(e.value),
-                    className: "absolute h-0 w-0 opacity-0 cursor-pointer"
-                  }
+          a.map((e, w) => {
+            const v = e.switchLabel ?? e.label, y = e.onChange ?? e.onSelect, c = typeof e.value == "string" ? e.value : void 0;
+            return /* @__PURE__ */ i(
+              "label",
+              {
+                className: s(
+                  "relative z-10 m-0 p-0 flex h-full cursor-pointer select-none",
+                  o ? "flex-1" : "shrink-0",
+                  e.disabled && "cursor-not-allowed opacity-50"
                 ),
-                /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: s(
-                      "flex h-full w-full items-center justify-center px-2 sm:px-3 whitespace-nowrap",
-                      e.value === a ? "text-foreground" : "text-muted-foreground"
-                    ),
-                    children: e.label
-                  }
-                )
-              ]
-            },
-            e.value
-          )),
-          /* @__PURE__ */ n(
+                style: b,
+                "data-checked": e.checked,
+                "data-disabled": e.disabled,
+                children: [
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "radio",
+                      name: h,
+                      value: c,
+                      checked: e.checked,
+                      disabled: e.disabled,
+                      onChange: y,
+                      className: "absolute h-0 w-0 opacity-0 cursor-pointer"
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "span",
+                    {
+                      className: s(
+                        "flex h-full w-full items-center justify-center px-2 sm:px-3 whitespace-nowrap",
+                        e.checked ? "text-foreground" : "text-muted-foreground"
+                      ),
+                      children: v
+                    }
+                  )
+                ]
+              },
+              c ?? w
+            );
+          }),
+          /* @__PURE__ */ r(
             "div",
             {
               className: s(
-                "absolute z-0 h-full bg-background shadow transition-all duration-200 ease-in-out",
-                h[u || "default"]
+                "absolute z-0 h-full bg-gray-600 shadow transition-all duration-200 ease-in-out",
+                g[n]
               ),
               style: o ? {
                 width: l > 0 ? `${100 / l}%` : "0%",
@@ -108,8 +109,8 @@ const v = w(
     );
   }
 );
-y.displayName = "SegmentedControl";
+N.displayName = "SegmentedControl";
 export {
-  y as SegmentedControl,
-  v as segmentedControlVariants
+  N as SegmentedControl,
+  C as segmentedControlVariants
 };

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

@@ -1,48 +1,130 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-slider";
-import * as b from "react";
-import { useMemo as f } from "react";
-import { cn as i } from "../../utils/cn.js";
+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 "sonner";
 import "@gearbox-protocol/sdk";
-const g = b.forwardRef(({ className: t, variant: n = "default", ...r }, l) => {
-  const c = {
-    default: "bg-primary",
-    success: "bg-success",
-    warning: "bg-warning",
-    danger: "bg-destructive"
-  }, s = (r.value ?? r.defaultValue ?? [0]).length, u = f(
-    () => Array.from({ length: s }, (a, m) => `thumb-${m}`),
-    [s]
-  );
-  return /* @__PURE__ */ d(
-    e.Root,
-    {
-      ref: l,
-      className: i(
-        "relative flex w-full touch-none select-none items-center",
-        t
+function A(r) {
+  return {
+    start: r.start ?? r.from ?? 0,
+    end: r.end ?? r.to ?? 0
+  };
+}
+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;
+    }
+}
+const G = D.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,
+        {
+          ref: T,
+          className: x(
+            "relative flex w-full touch-none select-none items-center",
+            r
+          ),
+          min: n,
+          max: s,
+          step: B,
+          value: m,
+          onValueChange: F,
+          onValueCommit: K,
+          ...j,
+          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,
+              {
+                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"
+              },
+              e
+            ))
+          ]
+        }
       ),
-      ...r,
-      children: [
-        /* @__PURE__ */ o(e.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ o(
-          e.Range,
-          {
-            className: i("absolute h-full", c[n])
-          }
-        ) }),
-        u.map((a) => /* @__PURE__ */ o(
-          e.Thumb,
+      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: "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"
+            className: "absolute w-0.5 h-1 bg-muted-foreground/50",
+            style: { left: `${t}%` }
           },
-          a
-        ))
-      ]
-    }
-  );
-});
-g.displayName = e.Root.displayName;
+          `mark-${e}`
+        );
+      }) })
+    ] });
+  }
+);
+G.displayName = "Slider";
 export {
-  g as Slider
+  G as Slider
 };

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

@@ -0,0 +1,4 @@
+import { SliderToken as r } from "./slider-token.js";
+export {
+  r as SliderToken
+};

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

@@ -0,0 +1,68 @@
+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 "react";
+import { cn as N } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function z({
+  from: s = 0,
+  to: r = 100,
+  value: m = 0,
+  token: c,
+  step: p = 1,
+  setValue: h,
+  additionalMarkers: t,
+  additionalMarkersLabels: x,
+  epsilon_inPer: i,
+  children: f,
+  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;
+          break;
+        }
+    }
+    h?.(n);
+  };
+  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),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ o(
+      b,
+      {
+        min: s,
+        max: r,
+        step: p,
+        value: [m],
+        onValueChange: d
+      }
+    ),
+    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(
+        "div",
+        {
+          className: "absolute transform -translate-x-1/2 text-xs text-muted-foreground",
+          style: { left: `${n}%` },
+          children: x?.[e] ?? `${e}%`
+        },
+        e
+      );
+    }) }),
+    f
+  ] });
+}
+export {
+  z as SliderToken
+};

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

@@ -1,91 +1,135 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { X as j } from "lucide-react";
-import * as z from "react";
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { X as G } from "lucide-react";
+import * as H from "react";
 import "../buttons/back-button/back-button.js";
-import { Button as $ } from "../buttons/button/button.js";
+import { Button as J } from "../buttons/button/button.js";
 import "../buttons/copy-button/copy-button.js";
 import "../buttons/external-button/external-button.js";
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
-import { cn as l } from "../../utils/cn.js";
+import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
 import "../buttons/tab-button/tab-button.js";
-const B = z.forwardRef(
+import { TokenIcon as K } from "../token-icon/token-icon.js";
+function Q(o, r) {
+  let t = o.replace(/^0+(?=\d)/, "");
+  if ((t === "" || t === ".") && (t = "0"), !/^[0-9]*\.?[0-9]*$/.test(t))
+    return [null, null];
+  try {
+    const e = t.split("."), l = e[0] || "0", p = (e[1] || "").slice(0, r).padEnd(r, "0");
+    return [BigInt(l + p), t];
+  } catch {
+    return [null, null];
+  }
+}
+function T(o, r) {
+  const t = o.toString().padStart(r + 1, "0"), e = t.slice(0, -r) || "0", l = t.slice(-r).replace(/0+$/, "");
+  return l ? `${e}.${l}` : e;
+}
+function U(o, r) {
+  const t = T(o, r), e = Number.parseFloat(t);
+  return e === 0 ? "0" : e < 1e-4 ? "< 0.0001" : e.toLocaleString(void 0, { maximumFractionDigits: 4 });
+}
+const W = H.forwardRef(
   ({
-    amount: f,
-    tokenSymbol: o,
-    tokenIcon: i,
-    label: x = "Amount",
-    maxBalance: n,
-    maxButtonLabel: h = "Max",
-    showMaxButton: g = !0,
-    disabled: e = !1,
-    active: m = !1,
-    size: d = "default",
-    onAmountChange: u,
-    onMaxClick: c,
-    onTokenSelect: a,
-    onRemove: p,
-    className: b
-  }, N) => {
-    const v = {
+    amount: o,
+    tokenSymbol: r,
+    tokenIcon: t,
+    token: e,
+    label: l = "Amount",
+    maxBalance: p,
+    maxAmount: n,
+    maxAmountLimit: m,
+    maxButtonLabel: $ = "Max",
+    showMaxButton: j,
+    maxButton: M,
+    chainId: Y,
+    network: Z,
+    disabled: a = !1,
+    active: y = !1,
+    size: N = "default",
+    onAmountChange: b,
+    onSetAmount: c,
+    onMaxClick: h,
+    onTokenSelect: P,
+    onShowSelectDialog: S,
+    onRemove: w,
+    onFocus: z,
+    onBlur: F,
+    className: V
+  }, _) => {
+    const D = j ?? M ?? !0, x = r ?? e?.symbol, I = t ?? (e?.symbol ? /* @__PURE__ */ s(K, { symbol: e.symbol, size: 24 }) : void 0), v = e?.decimals ?? 18, B = p ?? (n !== void 0 ? U(n, v) : void 0), f = P ?? S, E = {
       sm: "p-3",
+      md: "p-3.5",
       default: "p-4",
       lg: "p-5"
-    }, y = {
+    }, O = {
       sm: "text-lg",
+      md: "text-xl",
       default: "text-2xl",
       lg: "text-3xl"
-    }, C = (w) => {
-      const s = w.target.value;
-      (/^[0-9]*\.?[0-9]*$/.test(s) || s === "") && u?.(s);
-    };
-    return /* @__PURE__ */ t(
+    }, R = (u) => {
+      const i = u.target.value;
+      if (!(!/^[0-9]*\.?[0-9]*$/.test(i) && i !== "") && (b && b(i), c)) {
+        const [C, k] = Q(i, v);
+        C !== null && k !== null && c(C, k);
+      }
+    }, X = () => {
+      if (h) {
+        h();
+        return;
+      }
+      if (c && n !== void 0) {
+        const u = n && m && n > m ? m : n, i = T(u, v);
+        c(u, i);
+      }
+    }, q = D && (h || c && n !== void 0);
+    return /* @__PURE__ */ d(
       "div",
       {
-        ref: N,
-        className: l(
+        ref: _,
+        className: g(
           "relative rounded-xl border bg-card transition-colors border-border",
-          m && "border-primary",
-          e && "opacity-50 cursor-not-allowed",
-          v[d],
-          b
+          y && "border-primary",
+          a && "opacity-50 cursor-not-allowed",
+          E[N],
+          V
         ),
-        "data-active": m,
-        "data-disabled": e,
+        "data-active": y,
+        "data-disabled": a,
         children: [
-          p && /* @__PURE__ */ r(
+          w && /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              onClick: p,
+              onClick: w,
               className: "absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
-              children: /* @__PURE__ */ r(j, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ s(G, { className: "h-3 w-3" })
             }
           ),
-          /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ r("span", { className: "text-sm text-muted-foreground", children: x }),
-            n !== void 0 && /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ s("span", { className: "text-sm text-muted-foreground", children: l }),
+            B !== void 0 && /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ d("span", { className: "text-sm text-muted-foreground", children: [
                 "Balance: ",
-                n
+                B
               ] }),
-              g && c && /* @__PURE__ */ r(
-                $,
+              q && /* @__PURE__ */ s(
+                J,
                 {
                   variant: "ghost",
                   size: "xs",
-                  onClick: c,
-                  disabled: e,
+                  onClick: X,
+                  disabled: a,
                   className: "text-primary hover:text-primary/80",
-                  children: h
+                  children: $
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ r(
+          /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ s(
               "input",
               {
                 type: "text",
@@ -95,29 +139,31 @@ const B = z.forwardRef(
                 spellCheck: "false",
                 pattern: "^[0-9]*[.,]?[0-9]*$",
                 placeholder: "0",
-                value: f,
-                onChange: C,
-                disabled: e || !u,
-                className: l(
+                value: o,
+                onChange: R,
+                onFocus: z,
+                onBlur: F,
+                disabled: a || !b && !c,
+                className: g(
                   "flex-1 bg-transparent border-none outline-none text-foreground font-medium placeholder:text-muted-foreground",
-                  y[d]
+                  O[N]
                 )
               }
             ),
-            (o || i) && /* @__PURE__ */ t(
+            (x || I) && /* @__PURE__ */ d(
               "button",
               {
                 type: "button",
-                onClick: a,
-                disabled: e || !a,
-                className: l(
+                onClick: f,
+                disabled: a || !f,
+                className: g(
                   "flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-sm font-medium transition-colors",
-                  a && !e && "hover:bg-secondary/80 cursor-pointer",
-                  !a && "cursor-default"
+                  f && !a && "hover:bg-secondary/80 cursor-pointer",
+                  !f && "cursor-default"
                 ),
                 children: [
-                  i,
-                  o && /* @__PURE__ */ r("span", { children: o })
+                  I,
+                  x && /* @__PURE__ */ s("span", { children: x })
                 ]
               }
             )
@@ -127,7 +173,7 @@ const B = z.forwardRef(
     );
   }
 );
-B.displayName = "SmartNumberInput";
+W.displayName = "SmartNumberInput";
 export {
-  B as SmartNumberInput
+  W as SmartNumberInput
 };

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

@@ -0,0 +1,4 @@
+import { SplitList as o } from "./split-list.js";
+export {
+  o as SplitList
+};