@gearbox-protocol/permissionless-ui 1.17.9 → 1.19.0

package/dist/esm/components/pool-indicator-icon/pool-indicator-icon.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function f({
+  children: o,
+  size: t = 24,
+  className: r
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: i(
+        "inline-flex items-center justify-center rounded-full bg-muted",
+        r
+      ),
+      style: { width: t, height: t },
+      children: o
+    }
+  );
+}
+export {
+  f as PoolIndicatorIcon
+};

package/dist/esm/components/rounded-image/index.js

@@ -0,0 +1,4 @@
+import { RoundedImage as d } from "./rounded-image.js";
+export {
+  d as RoundedImage
+};

package/dist/esm/components/rounded-image/rounded-image.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function p({
+  className: t,
+  size: o,
+  style: r,
+  ...m
+}) {
+  return (
+    // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
+    /* @__PURE__ */ e(
+      "img",
+      {
+        alt: "",
+        className: i("rounded-full object-cover", t),
+        style: {
+          ...o ? { width: o, height: o } : {},
+          ...r
+        },
+        loading: "lazy",
+        decoding: "async",
+        ...m
+      }
+    )
+  );
+}
+export {
+  p as RoundedImage
+};

package/dist/esm/components/row/index.js

@@ -0,0 +1,4 @@
+import { Row as e } from "./row.js";
+export {
+  e as Row
+};

package/dist/esm/components/row/row.js

@@ -0,0 +1,55 @@
+import { jsx as w } from "react/jsx-runtime";
+import "react";
+import { cn as b } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+const v = {
+  "flex-start": "items-start",
+  "flex-end": "items-end",
+  center: "items-center",
+  baseline: "items-baseline",
+  stretch: "items-stretch"
+}, g = {
+  "flex-start": "justify-start",
+  "flex-end": "justify-end",
+  center: "justify-center",
+  "space-between": "justify-between",
+  "space-around": "justify-around",
+  "space-evenly": "justify-evenly"
+};
+function G({
+  $align: n,
+  align: i,
+  $justify: r,
+  justify: a,
+  $flexDirection: l = "row",
+  flexDirection: o,
+  $wrap: f = !0,
+  wrap: c,
+  $gap: m,
+  gap: p,
+  className: u,
+  children: x,
+  ...y
+}) {
+  const e = i || n, t = a || r, d = o || l, j = c ?? f, s = p ?? m;
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: b(
+        "flex",
+        d === "column" ? "flex-col" : "flex-row",
+        j ? "flex-wrap" : "flex-nowrap",
+        e && v[e],
+        t && g[t],
+        s !== void 0 && `gap-${s}`,
+        u
+      ),
+      ...y,
+      children: x
+    }
+  );
+}
+export {
+  G as Row
+};

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
+};