@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.40

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

@@ -2,10 +2,9 @@ import { jsxs as C, jsx as f } from "react/jsx-runtime";
 import { cva as R } from "class-variance-authority";
 import * as N from "react";
 import { useRef as x, useState as I, useCallback as v, useLayoutEffect as y } from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const S = R(
@@ -27,7 +26,7 @@ const S = R(
     }
   },
   defaultVariants: { size: "md" }
-}), $ = N.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
+}), $ = N.forwardRef(({ className: b, name: u, items: n, size: l = "md", ...m }, t) => {
   const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, d = x(null), p = x([]), [h, w] = I({ left: 0, width: 0 }), i = v(() => {
     const e = p.current[s];
     if (!e || o === 0) {
@@ -59,13 +58,13 @@ const S = R(
     {
       ref: z,
       className: g(S({ size: l }), b),
-      ...u,
+      ...m,
       children: [
         n.map((e, a) => /* @__PURE__ */ f(
           k,
           {
             ...e,
-            name: m,
+            name: u,
             ref: (c) => {
               p.current[a] = c;
             }
@@ -93,8 +92,8 @@ const S = R(
   );
 });
 $.displayName = "SegmentedControl";
-const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
-  const o = u ?? (t ? (d) => {
+const k = N.forwardRef(function({ name: u, switchLabel: n, label: l, onChange: m, onSelect: t, ...r }, s) {
+  const o = m ?? (t ? (d) => {
     d.preventDefault(), t();
   } : void 0);
   return /* @__PURE__ */ C(
@@ -112,7 +111,7 @@ const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
           "input",
           {
             type: "radio",
-            name: m,
+            name: u,
             className: "absolute h-0 w-0 cursor-pointer opacity-0",
             ...r,
             onChange: o

package/dist/esm/components/select/select.js

@@ -4,15 +4,14 @@ import { cva as g } from "class-variance-authority";
 import * as l from "react";
 import { faCaretDown as m, faCaretUp as b, faCheck as y } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as i } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import { Z_INDEX as h } from "../../utils/z-index.js";
 const x = (a) => /* @__PURE__ */ t(e.Root, { ...a });
 x.displayName = "Select";
-const G = e.Group, O = e.Value, N = g(
+const P = e.Group, G = e.Value, N = g(
   "group flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
   {
     variants: {
@@ -143,13 +142,13 @@ I.displayName = e.Separator.displayName;
 export {
   x as Select,
   S as SelectContent,
-  G as SelectGroup,
+  P as SelectGroup,
   R as SelectItem,
   v as SelectLabel,
   f as SelectScrollDownButton,
   p as SelectScrollUpButton,
   I as SelectSeparator,
   w as SelectTrigger,
-  O as SelectValue,
+  G as SelectValue,
   N as selectTriggerVariants
 };

package/dist/esm/components/separate-line/separate-line.js

@@ -1,9 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as p from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as d } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const s = p.forwardRef(

package/dist/esm/components/short-string/short-string.js

@@ -2,22 +2,21 @@ import { jsx as r } from "react/jsx-runtime";
 import { SimpleTooltip as f } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import { isLongString as u, shortenString as S } from "../../utils/shorten-string.js";
 import "luxon";
 import "../../utils/z-index.js";
-function y({
+function k({
   children: o,
   maxLength: t,
   showTooltip: m = !0,
   className: i
 }) {
-  const n = (p, e) => e === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: p }) : /* @__PURE__ */ r("span", { className: i, children: S(p, e) });
+  const n = (e, p) => p === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ r("span", { className: i, children: S(e, p) });
   return typeof o == "string" && t !== void 0 ? m && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(f, { title: n(o, t), children: o }) : n(o, t) : o;
 }
 export {
-  y as ShortString
+  k as ShortString
 };

package/dist/esm/components/simple-accordion/simple-accordion.js

@@ -2,10 +2,9 @@ import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import { IconExpand as N } from "@gearbox-protocol/static";
 import { AccordionTrigger as y, AccordionItem as S, AccordionContent as b, Accordion as p } from "../accordion/accordion.js";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const h = "flex-wrap text-left bg-transparent border-0 [&[data-state=open]>[data-accordion-icon]]:rotate-180";

package/dist/esm/components/simple-dropdown/simple-dropdown-menu-item.js

@@ -10,10 +10,9 @@ import "../dropdown-menu/dropdown-menu-separator.js";
 import "../dropdown-menu/dropdown-menu-shortcut.js";
 import "../dropdown-menu/dropdown-menu-sub-content.js";
 import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const n = "cursor-pointer gap-0 rounded-lg px-3 py-3 text-sm font-normal leading-[17px] text-foreground hover:bg-gray-80 focus:bg-gray-80", a = p.forwardRef(({ className: o, ...r }, m) => /* @__PURE__ */ t(

package/dist/esm/components/simple-dropdown/simple-dropdown.js

@@ -1,15 +1,14 @@
 import { jsxs as R, jsx as r } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-dropdown-menu";
 import { useRef as j } from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import { Z_INDEX as y } from "../../utils/z-index.js";
 function E({
-  children: p,
-  title: f,
+  children: f,
+  title: p,
   asChild: a = !1,
   placement: m = "bottom",
   align: u = "start",
@@ -60,7 +59,7 @@ function E({
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
               v
             ),
-            children: f
+            children: p
           }
         ),
         /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(
@@ -77,7 +76,7 @@ function E({
             },
             onPointerDownOutside: o ? x : void 0,
             onEscapeKeyDown: o ? () => e?.(!1) : void 0,
-            children: p
+            children: f
           }
         ) })
       ]

package/dist/esm/components/skeleton/skeleton-stack.js

@@ -1,18 +1,17 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useMemo as c } from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { Skeleton as i } from "./skeleton.js";
-const n = {
+import { Skeleton as n } from "./skeleton.js";
+const i = {
   sm: "space-y-2",
   md: "space-y-3",
   lg: "space-y-4"
 };
-function w({
+function S({
   lines: o = 5,
   className: t,
   gap: e = "md"
@@ -21,8 +20,8 @@ function w({
     () => Array.from({ length: o }, () => crypto.randomUUID()),
     [o]
   );
-  return /* @__PURE__ */ m("div", { className: r(n[e], t), children: p.map((s, a) => /* @__PURE__ */ m(
-    i,
+  return /* @__PURE__ */ m("div", { className: r(i[e], t), children: p.map((s, a) => /* @__PURE__ */ m(
+    n,
     {
       className: r("h-4 w-full", a === o - 1 && "w-3/4")
     },
@@ -30,5 +29,5 @@ function w({
   )) });
 }
 export {
-  w as SkeletonStack
+  S as SkeletonStack
 };

package/dist/esm/components/skeleton/skeleton.js

@@ -1,10 +1,9 @@
 import { jsx as a, Fragment as p } from "react/jsx-runtime";
 import { cva as f } from "class-variance-authority";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as w } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const c = f("animate-pulse rounded-md bg-muted", {
@@ -51,7 +50,7 @@ const c = f("animate-pulse rounded-md bg-muted", {
     height: "md"
   }
 });
-function j({
+function $({
   className: s,
   variant: l,
   speed: n,
@@ -87,6 +86,6 @@ function j({
   );
 }
 export {
-  j as Skeleton,
+  $ as Skeleton,
   c as skeletonVariants
 };

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

@@ -0,0 +1,6 @@
+class t {
+  static interval = "slider-interval";
+}
+export {
+  t as SliderTest
+};

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

@@ -1,28 +1,31 @@
-import { Slider as o } from "./slider.js";
-import { SliderProvider as i, useSliderContext as a } from "./slider-context.js";
-import { SliderMark as m } from "./slider-mark.js";
-import { SliderTrack as d } from "./slider-track.js";
-import { makeMarkerPoints as n, validateMarkerPoints as p } from "./slider-utils.js";
-import { THEME_COLOR_MAP as M, THUMB_HALF as S, THUMB_SIZE as v, getIntervalBounds as T, getThumbInBoundsOffset as k, resolveColor as u } from "./types.js";
-import { decimalsToStep as c, findClosestPoint as B, formatWithDecimals as C, formatWithoutDecimals as H, splitInterval as I, validateMinMax as _ } from "../../utils/math.js";
+import { SliderTest as o } from "./constants.js";
+import { Slider as i } from "./slider.js";
+import { SliderProvider as l, useSliderContext as m } from "./slider-context.js";
+import { SliderMark as d } from "./slider-mark.js";
+import { SliderTrack as n } from "./slider-track.js";
+import { makeMarkerPoints as x, resolveSnap as M, validateMarkerPoints as S } from "./slider-utils.js";
+import { THEME_COLOR_MAP as T, THUMB_HALF as k, THUMB_SIZE as u, getIntervalBounds as P, getThumbInBoundsOffset as c, resolveColor as B } from "./types.js";
+import { decimalsToStep as H, findClosestPoint as I, formatWithDecimals as _, formatWithoutDecimals as h, splitInterval as E, validateMinMax as O } from "../../utils/math.js";
 export {
-  o as Slider,
-  m as SliderMark,
-  i as SliderProvider,
-  d as SliderTrack,
-  M as THEME_COLOR_MAP,
-  S as THUMB_HALF,
-  v as THUMB_SIZE,
-  c as decimalsToStep,
-  B as findClosestPoint,
-  C as formatWithDecimals,
-  H as formatWithoutDecimals,
-  T as getIntervalBounds,
-  k as getThumbInBoundsOffset,
-  n as makeMarkerPoints,
-  u as resolveColor,
-  I as splitInterval,
-  a as useSliderContext,
-  p as validateMarkerPoints,
-  _ as validateMinMax
+  i as Slider,
+  d as SliderMark,
+  l as SliderProvider,
+  o as SliderTest,
+  n as SliderTrack,
+  T as THEME_COLOR_MAP,
+  k as THUMB_HALF,
+  u as THUMB_SIZE,
+  H as decimalsToStep,
+  I as findClosestPoint,
+  _ as formatWithDecimals,
+  h as formatWithoutDecimals,
+  P as getIntervalBounds,
+  c as getThumbInBoundsOffset,
+  x as makeMarkerPoints,
+  B as resolveColor,
+  M as resolveSnap,
+  E as splitInterval,
+  m as useSliderContext,
+  S as validateMarkerPoints,
+  O as validateMinMax
 };

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

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

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

@@ -1,32 +1,49 @@
-import { splitInterval as m, formatWithoutDecimals as a } from "../../utils/math.js";
-import { decimalsToStep as l, findClosestPoint as y, formatWithDecimals as u, validateMinMax as x } from "../../utils/math.js";
-function f(t, i, e) {
+import { splitInterval as h, findClosestPoint as M, formatWithoutDecimals as m } from "../../utils/math.js";
+import { decimalsToStep as g, formatWithDecimals as D, validateMinMax as P } from "../../utils/math.js";
+function k(t, e, s) {
   if (t.length === 0) return t;
   const o = t.length - 1, r = {
-    point: Math.max(t[0].point, i),
+    point: Math.max(t[0].point, e),
     type: t[0].type
-  }, s = {
-    point: Math.min(t[o].point, e),
+  }, c = {
+    point: Math.min(t[o].point, s),
     type: t[o].type
-  }, c = t.slice(1, o).reduce((p, n) => (n.point !== r.point && n.point !== s.point && (p[n.point] = n), p), {});
-  return [r, ...Object.values(c), s];
+  }, p = t.slice(1, o).reduce((i, n) => (n.point !== r.point && n.point !== c.point && (i[n.point] = n), i), {});
+  return [r, ...Object.values(p), c];
 }
-function d(t, i, e, o, r) {
-  const s = a(t, e, 1), p = m(s, i, r).map(
+function u(t, e, s, o, r) {
+  const c = m(t, s, 1), i = h(c, e, r).map(
     (n) => ({
-      point: a(n, e, o),
+      point: m(n, s, o),
       type: "base"
     })
   );
-  return f(p, t, i);
+  return k(i, t, e);
+}
+function y(t, { snapPoints: e, intervals: s, epsilon: o, decimals: r }) {
+  const { minDistance: c, minPoint: p } = M(
+    t,
+    [...e],
+    r
+  );
+  if (c >= o)
+    return t;
+  let i, n = o;
+  for (const a of e) {
+    const f = Math.abs(a - t);
+    f < n && (i = a, n = f);
+  }
+  const d = s?.some((a) => p >= a.start && p <= a.end);
+  return i !== void 0 && !d ? i : p;
 }
 export {
-  l as decimalsToStep,
-  y as findClosestPoint,
-  u as formatWithDecimals,
-  a as formatWithoutDecimals,
-  d as makeMarkerPoints,
-  m as splitInterval,
-  f as validateMarkerPoints,
-  x as validateMinMax
+  g as decimalsToStep,
+  M as findClosestPoint,
+  D as formatWithDecimals,
+  m as formatWithoutDecimals,
+  u as makeMarkerPoints,
+  y as resolveSnap,
+  h as splitInterval,
+  k as validateMarkerPoints,
+  P as validateMinMax
 };