@gearbox-protocol/permissionless-ui 1.22.0-next.59 → 1.22.0-next.60

package/dist/cjs/components/slider/slider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),Q=require("@radix-ui/react-slider"),m=require("react");require("@gearbox-protocol/sdk");const k=require("../../utils/cn.cjs");require("sonner");require("luxon");function L(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(c,r,u.get?u:{enumerable:!0,get:()=>t[r]})}}return c.default=t,Object.freeze(c)}const M=L(Q),Y=L(m),I={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 $(t){if(t)return I[t]??t}function p(t){return{start:t.start??0,end:t.end??0}}function ee(t,c){if(c)for(const r of c){const{start:u,end:g}=p(r);if(t>=u&&t<=g)return $(r.color)}}function te(t,c){if(c)for(const r of c){const{start:u,end:g}=p(r);if(t>=u&&t<=g)return $(r.color)??"hsl(var(--success))"}}const ne=18,D=ne/2;function _(t){return D-D*t/50}function E(t,c,r,u,g){let y=t,v=1/0;for(const b of c){const x=Math.abs(t-b);x<v&&(v=x,y=b)}return v<r?Math.max(u,Math.min(g,y)):t}const F=Y.forwardRef(({className:t,variant:c="default",value:r,onValueChange:u,min:g,max:y,step:v,from:b,to:x,colorIntervals:o,precision:C,markerStep:f,onChangeValue:T,onSubmitValue:q,colorIntervalLabel:A,epsilon:S=8,...U},z)=>{const s=g??b??0,i=y??x??100,V=Array.isArray(C)?C[0]:C,K=v??(V?1/V:void 0),N=m.useMemo(()=>{if(Array.isArray(r))return r;if(typeof r=="number")return[r]},[r]),j=m.useMemo(()=>{const e=new Set;if(o?.length)for(const n of o){const{start:a,end:d}=p(n);e.add(a),e.add(d)}if(f)for(let n=s;n<=i+f*.001;n+=f)e.add(Math.min(n,i));return[...e]},[o,f,s,i]),W=e=>{const n=e.map(a=>j.length>0?E(a,j,S,s,i):a);u?.(n),T&&n.length>0&&T(n[0])},X=e=>{const n=e.map(a=>j.length>0?E(a,j,S,s,i):a);q&&n.length>0&&q(n[0])},R=N?.[0]??0,B=ee(R,o)??{default:"hsl(var(--primary))",success:"hsl(var(--success))",warning:"hsl(var(--warning))",danger:"hsl(var(--destructive))"}[c],H=(N??[0]).length,Z=m.useMemo(()=>Array.from({length:H},(e,n)=>`thumb-${n}`),[H]),P=m.useMemo(()=>{if(!f)return;const e=[s];for(let n=s+f;n<i;n+=f)e.push(n);return e[e.length-1]!==i&&e.push(i),e},[s,i,f]),G=m.useMemo(()=>{if(!o?.length)return;const e=o[o.length-1],{start:n,end:a}=p(e),d=i-s;if(d<=0)return;const h=(n-s)/d*100,w=(a-s)/d*100,O=_(h),J=_(w);return{left:`calc(${(h+w)/2}% + ${(O+J)/2}px)`,transform:"translateX(-50%)"}},[o,s,i]);return l.jsxs("div",{className:"relative w-full px-[9px] pb-3",children:[l.jsx("div",{className:"relative",children:l.jsxs(M.Root,{ref:z,className:k.cn("relative flex w-full touch-none select-none items-center",t),min:s,max:i,step:K,value:N,onValueChange:W,onValueCommit:X,...U,children:[l.jsxs(M.Track,{className:"relative h-1 grow overflow-hidden rounded-full bg-gray-40 mx-[9px]",children:[o?.map((e,n)=>{const{start:a,end:d}=p(e),h=i-s;if(h<=0)return null;const w=(a-s)/h*100,O=(d-a)/h*100;return l.jsx("div",{className:"absolute h-full",style:{left:`${w}%`,width:`${O}%`,backgroundColor:$(e.color)??"hsl(var(--success))"}},`interval-${n}-${a}-${d}`)}),!o?.length&&l.jsx(M.Range,{className:"absolute h-full",style:{backgroundColor:B}})]}),P&&P.length>0&&l.jsx("div",{className:"absolute inset-0 pointer-events-none flex items-center",children:l.jsx("div",{className:"relative w-full",children:P.map(e=>{const n=i-s;if(n<=0)return null;const a=(e-s)/n*100,d=_(a),h=o?.length?te(e,o):e<=R?B:void 0;return l.jsx("div",{className:"absolute h-2.5 w-2.5 rounded-full -translate-x-1/2 -translate-y-1/2",style:{left:`calc(${a}% + ${d}px)`,top:"50%",backgroundColor:h??"hsl(var(--gray-40))"}},`mark-${e}`)})})}),Z.map(e=>l.jsx(M.Thumb,{className:k.cn("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")},e))]})}),A&&o&&o.length>0&&l.jsx("div",{className:"relative h-[14px] mt-2.5",children:l.jsx("div",{className:"absolute text-[11px] font-medium leading-[126%] text-success whitespace-nowrap",style:G,children:A})})]})});F.displayName="Slider";exports.Slider=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),Q=require("@gearbox-protocol/sdk"),Y=require("@radix-ui/react-slider"),m=require("react"),k=require("../../utils/cn.cjs");require("sonner");require("luxon");function H(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(c,r,u.get?u:{enumerable:!0,get:()=>t[r]})}}return c.default=t,Object.freeze(c)}const w=H(Y),I=H(m),ee={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 O(t){if(t)return ee[t]??t}function p(t){return{start:t.start??0,end:t.end??0}}function te(t,c){if(c)for(const r of c){const{start:u,end:g}=p(r);if(t>=u&&t<=g)return O(r.color)}}function ne(t,c){if(c)for(const r of c){const{start:u,end:g}=p(r);if(t>=u&&t<=g)return O(r.color)??"hsl(var(--success))"}}const re=18,B=re/2;function A(t){return B-B*t/50}function D(t,c,r,u,g){let y=t,v=1/0;for(const b of c){const x=Math.abs(t-b);x<v&&(v=x,y=b)}return v<r?Math.max(u,Math.min(g,y)):t}const F=I.forwardRef(({className:t,variant:c="default",value:r,onValueChange:u,min:g,max:y,step:v,from:b,to:x,colorIntervals:o,precision:C,markerStep:f=100,onChangeValue:$,onSubmitValue:T,colorIntervalLabel:q,epsilon:S=8,...U},z)=>{const s=g??b??0,i=y??x??100,V=Array.isArray(C)?C[0]:C,G=v??(V?Number(Q.LEVERAGE_DECIMALS)/V:void 0),N=m.useMemo(()=>{if(Array.isArray(r))return r;if(typeof r=="number")return[r]},[r]),M=m.useMemo(()=>{const e=new Set;if(o?.length)for(const n of o){const{start:a,end:d}=p(n);e.add(a),e.add(d)}if(f)for(let n=s;n<=i+f*.001;n+=f)e.add(Math.min(n,i));return[...e]},[o,f,s,i]),K=e=>{const n=e.map(a=>M.length>0?D(a,M,S,s,i):a);u?.(n),$&&n.length>0&&$(n[0])},W=e=>{const n=e.map(a=>M.length>0?D(a,M,S,s,i):a);T&&n.length>0&&T(n[0])},R=N?.[0]??0,E=te(R,o)??{default:"hsl(var(--primary))",success:"hsl(var(--success))",warning:"hsl(var(--warning))",danger:"hsl(var(--destructive))"}[c],L=(N??[0]).length,X=m.useMemo(()=>Array.from({length:L},(e,n)=>`thumb-${n}`),[L]),P=m.useMemo(()=>{if(!f)return;const e=[s];for(let n=s+f;n<i;n+=f)e.push(n);return e[e.length-1]!==i&&e.push(i),e},[s,i,f]),Z=m.useMemo(()=>{if(!o?.length)return;const e=o[o.length-1],{start:n,end:a}=p(e),d=i-s;if(d<=0)return;const h=(n-s)/d*100,j=(a-s)/d*100,_=A(h),J=A(j);return{left:`calc(${(h+j)/2}% + ${(_+J)/2}px)`,transform:"translateX(-50%)"}},[o,s,i]);return l.jsxs("div",{className:"relative w-full px-[9px] pb-3",children:[l.jsx("div",{className:"relative",children:l.jsxs(w.Root,{ref:z,className:k.cn("relative flex w-full touch-none select-none items-center",t),min:s,max:i,step:G,value:N,onValueChange:K,onValueCommit:W,...U,children:[l.jsxs(w.Track,{className:"relative h-1 grow overflow-hidden rounded-full bg-gray-40 mx-[9px]",children:[o?.map((e,n)=>{const{start:a,end:d}=p(e),h=i-s;if(h<=0)return null;const j=(a-s)/h*100,_=(d-a)/h*100;return l.jsx("div",{className:"absolute h-full",style:{left:`${j}%`,width:`${_}%`,backgroundColor:O(e.color)??"hsl(var(--success))"}},`interval-${n}-${a}-${d}`)}),!o?.length&&l.jsx(w.Range,{className:"absolute h-full",style:{backgroundColor:E}})]}),P&&P.length>0&&l.jsx("div",{className:"absolute inset-0 pointer-events-none flex items-center",children:l.jsx("div",{className:"relative w-full",children:P.map(e=>{const n=i-s;if(n<=0)return null;const a=(e-s)/n*100,d=A(a),h=o?.length?ne(e,o):e<=R?E:void 0;return l.jsx("div",{className:"absolute h-2.5 w-2.5 rounded-full -translate-x-1/2 -translate-y-1/2",style:{left:`calc(${a}% + ${d}px)`,top:"50%",backgroundColor:h??"hsl(var(--gray-40))"}},`mark-${e}`)})})}),X.map(e=>l.jsx(w.Thumb,{className:k.cn("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")},e))]})}),q&&o&&o.length>0&&l.jsx("div",{className:"relative h-[14px] mt-2.5",children:l.jsx("div",{className:"absolute text-[11px] font-medium leading-[126%] text-success whitespace-nowrap",style:Z,children:q})})]})});F.displayName="Slider";exports.Slider=F;

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

@@ -1,12 +1,12 @@
-import { jsxs as T, jsx as d } from "react/jsx-runtime";
+import { jsxs as P, jsx as d } from "react/jsx-runtime";
+import { LEVERAGE_DECIMALS as J } from "@gearbox-protocol/sdk";
 import * as N from "@radix-ui/react-slider";
-import * as J from "react";
+import * as Q from "react";
 import { useMemo as v } from "react";
-import "@gearbox-protocol/sdk";
-import { cn as q } from "../../utils/cn.js";
+import { cn as k } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const Q = {
+const Y = {
   additionalSuccess: "hsl(var(--success))",
   additionalSuccessLight: "#88c497",
   additionalWarning: "hsl(var(--warning))",
@@ -20,9 +20,9 @@ const Q = {
   gray50: "hsl(var(--gray-50))",
   gray60: "hsl(var(--gray-60))"
 };
-function O(n) {
+function E(n) {
   if (n)
-    return Q[n] ?? n;
+    return Y[n] ?? n;
 }
 function p(n) {
   return {
@@ -30,27 +30,27 @@ function p(n) {
     end: n.end ?? 0
   };
 }
-function Y(n, c) {
+function I(n, c) {
   if (c)
     for (const i of c) {
       const { start: h, end: m } = p(i);
       if (n >= h && n <= m)
-        return O(i.color);
+        return E(i.color);
     }
 }
-function I(n, c) {
+function tt(n, c) {
   if (c)
     for (const i of c) {
       const { start: h, end: m } = p(i);
       if (n >= h && n <= m)
-        return O(i.color) ?? "hsl(var(--success))";
+        return E(i.color) ?? "hsl(var(--success))";
     }
 }
-const tt = 18, F = tt / 2;
-function V(n) {
-  return F - F * n / 50;
+const et = 18, q = et / 2;
+function T(n) {
+  return q - q * n / 50;
 }
-function S(n, c, i, h, m) {
+function D(n, c, i, h, m) {
   let y = n, g = 1 / 0;
   for (const b of c) {
     const x = Math.abs(n - b);
@@ -58,7 +58,7 @@ function S(n, c, i, h, m) {
   }
   return g < i ? Math.max(h, Math.min(m, y)) : n;
 }
-const et = J.forwardRef(
+const nt = Q.forwardRef(
   ({
     className: n,
     variant: c = "default",
@@ -73,14 +73,14 @@ const et = J.forwardRef(
     to: x,
     colorIntervals: a,
     precision: M,
-    markerStep: f,
+    markerStep: f = 100,
     onChangeValue: R,
     onSubmitValue: _,
-    colorIntervalLabel: B,
-    epsilon: H = 8,
-    ...U
-  }, D) => {
-    const r = m ?? b ?? 0, o = y ?? x ?? 100, E = Array.isArray(M) ? M[0] : M, K = g ?? (E ? 1 / E : void 0), $ = v(() => {
+    colorIntervalLabel: L,
+    epsilon: O = 8,
+    ...F
+  }, U) => {
+    const r = m ?? b ?? 0, o = y ?? x ?? 100, B = Array.isArray(M) ? M[0] : M, G = g ?? (B ? Number(J) / B : void 0), A = v(() => {
       if (Array.isArray(i)) return i;
       if (typeof i == "number") return [i];
     }, [i]), w = v(() => {
@@ -94,70 +94,70 @@ const et = J.forwardRef(
         for (let e = r; e <= o + f * 1e-3; e += f)
           t.add(Math.min(e, o));
       return [...t];
-    }, [a, f, r, o]), W = (t) => {
+    }, [a, f, r, o]), K = (t) => {
       const e = t.map(
-        (s) => w.length > 0 ? S(s, w, H, r, o) : s
+        (s) => w.length > 0 ? D(s, w, O, r, o) : s
       );
       h?.(e), R && e.length > 0 && R(e[0]);
-    }, X = (t) => {
+    }, W = (t) => {
       const e = t.map(
-        (s) => w.length > 0 ? S(s, w, H, r, o) : s
+        (s) => w.length > 0 ? D(s, w, O, r, o) : s
       );
       _ && e.length > 0 && _(e[0]);
-    }, L = $?.[0] ?? 0, j = Y(L, a) ?? {
+    }, H = A?.[0] ?? 0, S = I(H, a) ?? {
       default: "hsl(var(--primary))",
       success: "hsl(var(--success))",
       warning: "hsl(var(--warning))",
       danger: "hsl(var(--destructive))"
-    }[c], k = ($ ?? [0]).length, Z = v(
-      () => Array.from({ length: k }, (t, e) => `thumb-${e}`),
-      [k]
-    ), A = v(() => {
+    }[c], j = (A ?? [0]).length, X = v(
+      () => Array.from({ length: j }, (t, e) => `thumb-${e}`),
+      [j]
+    ), $ = v(() => {
       if (!f) return;
       const t = [r];
       for (let e = r + f; e < o; e += f)
         t.push(e);
       return t[t.length - 1] !== o && t.push(o), t;
-    }, [r, o, f]), z = v(() => {
+    }, [r, o, f]), Z = v(() => {
       if (!a?.length) return;
       const t = a[a.length - 1], { start: e, end: s } = p(t), l = o - r;
       if (l <= 0) return;
-      const u = (e - r) / l * 100, C = (s - r) / l * 100, P = V(u), G = V(C);
+      const u = (e - r) / l * 100, C = (s - r) / l * 100, V = T(u), z = T(C);
       return {
-        left: `calc(${(u + C) / 2}% + ${(P + G) / 2}px)`,
+        left: `calc(${(u + C) / 2}% + ${(V + z) / 2}px)`,
         transform: "translateX(-50%)"
       };
     }, [a, r, o]);
-    return /* @__PURE__ */ T("div", { className: "relative w-full px-[9px] pb-3", children: [
-      /* @__PURE__ */ d("div", { className: "relative", children: /* @__PURE__ */ T(
+    return /* @__PURE__ */ P("div", { className: "relative w-full px-[9px] pb-3", children: [
+      /* @__PURE__ */ d("div", { className: "relative", children: /* @__PURE__ */ P(
         N.Root,
         {
-          ref: D,
-          className: q(
+          ref: U,
+          className: k(
             "relative flex w-full touch-none select-none items-center",
             n
           ),
           min: r,
           max: o,
-          step: K,
-          value: $,
-          onValueChange: W,
-          onValueCommit: X,
-          ...U,
+          step: G,
+          value: A,
+          onValueChange: K,
+          onValueCommit: W,
+          ...F,
           children: [
-            /* @__PURE__ */ T(N.Track, { className: "relative h-1 grow overflow-hidden rounded-full bg-gray-40 mx-[9px]", children: [
+            /* @__PURE__ */ P(N.Track, { className: "relative h-1 grow overflow-hidden rounded-full bg-gray-40 mx-[9px]", children: [
               a?.map((t, e) => {
                 const { start: s, end: l } = p(t), u = o - r;
                 if (u <= 0) return null;
-                const C = (s - r) / u * 100, P = (l - s) / u * 100;
+                const C = (s - r) / u * 100, V = (l - s) / u * 100;
                 return /* @__PURE__ */ d(
                   "div",
                   {
                     className: "absolute h-full",
                     style: {
                       left: `${C}%`,
-                      width: `${P}%`,
-                      backgroundColor: O(t.color) ?? "hsl(var(--success))"
+                      width: `${V}%`,
+                      backgroundColor: E(t.color) ?? "hsl(var(--success))"
                     }
                   },
                   `interval-${e}-${s}-${l}`
@@ -168,15 +168,15 @@ const et = J.forwardRef(
                 {
                   className: "absolute h-full",
                   style: {
-                    backgroundColor: j
+                    backgroundColor: S
                   }
                 }
               )
             ] }),
-            A && A.length > 0 && /* @__PURE__ */ d("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ d("div", { className: "relative w-full", children: A.map((t) => {
+            $ && $.length > 0 && /* @__PURE__ */ d("div", { className: "absolute inset-0 pointer-events-none flex items-center", children: /* @__PURE__ */ d("div", { className: "relative w-full", children: $.map((t) => {
               const e = o - r;
               if (e <= 0) return null;
-              const s = (t - r) / e * 100, l = V(s), u = a?.length ? I(t, a) : t <= L ? j : void 0;
+              const s = (t - r) / e * 100, l = T(s), u = a?.length ? tt(t, a) : t <= H ? S : void 0;
               return /* @__PURE__ */ d(
                 "div",
                 {
@@ -190,10 +190,10 @@ const et = J.forwardRef(
                 `mark-${t}`
               );
             }) }) }),
-            Z.map((t) => /* @__PURE__ */ d(
+            X.map((t) => /* @__PURE__ */ d(
               N.Thumb,
               {
-                className: q(
+                className: k(
                   "relative block h-[18px] w-[18px] rounded-full bg-foreground",
                   "cursor-grab active:cursor-grabbing",
                   "focus-visible:outline-none",
@@ -207,18 +207,18 @@ const et = J.forwardRef(
           ]
         }
       ) }),
-      B && a && a.length > 0 && /* @__PURE__ */ d("div", { className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ d(
+      L && a && a.length > 0 && /* @__PURE__ */ d("div", { className: "relative h-[14px] mt-2.5", children: /* @__PURE__ */ d(
         "div",
         {
           className: "absolute text-[11px] font-medium leading-[126%] text-success whitespace-nowrap",
-          style: z,
-          children: B
+          style: Z,
+          children: L
         }
       ) })
     ] });
   }
 );
-et.displayName = "Slider";
+nt.displayName = "Slider";
 export {
-  et as Slider
+  nt as Slider
 };

package/dist/types/components/slider/slider.d.ts

@@ -43,6 +43,7 @@ export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof
     colorIntervals?: ColorInterval[];
     /**
      * Precision for step calculation (legacy API).
+     * Converted to step using legacy formula: Number(LEVERAGE_DECIMALS) / precision.
      * Can be number or array (first element used).
      * Prefer using `step` directly for explicit control.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.59",
+  "version": "1.22.0-next.60",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",