@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

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

@@ -1,67 +1,68 @@
-import { jsx as I } from "react/jsx-runtime";
-import * as L from "react";
-import { useState as s, useRef as j, useEffect as E } from "react";
-import "@gearbox-protocol/sdk";
-import { cn as k } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { getStatic as w } from "../../utils/static.js";
-import "luxon";
+import { jsx as E } from "react/jsx-runtime";
+import * as k from "react";
+import { useState as i, useRef as l, useEffect as w } from "react";
+import { cn as N } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const d = w("/tokens/default.svg"), i = /* @__PURE__ */ new Map();
-function c(e) {
-  return i.get(e) ? d : e;
+import { getStatic as T } from "../../utils/internal/static.js";
+const u = T("/tokens/default.svg"), m = /* @__PURE__ */ new Map();
+function f(t) {
+  return m.get(t) ? u : t;
 }
-const N = L.forwardRef(
+const U = k.forwardRef(
   ({
-    className: e,
-    size: o,
-    rounded: f = !0,
-    style: l,
-    src: r,
-    defaultIcon: m = d,
-    fit: u = "cover",
-    ...g
-  }, p) => {
-    const [h, a] = s(void 0), [v, n] = s(!1), t = j(!1);
-    E(() => {
-      c(r), a(void 0), n(!1), t.current = !1;
-    }, [r]);
-    const y = (b) => {
-      t.current || (t.current = !0, i.set(b.currentTarget.src, !0), a(m));
-    }, R = () => {
+    className: t,
+    size: c,
+    rounded: g = !0,
+    style: p,
+    src: o,
+    defaultIcon: h = u,
+    fit: R = "cover",
+    ...y
+  }, r) => {
+    const [v, s] = i(void 0), [b, n] = i(!1), a = l(!1), d = l(null), I = (e) => {
+      d.current = e, typeof r == "function" ? r(e) : r && (r.current = e), e?.complete && e.naturalWidth > 0 && n(!0);
+    };
+    w(() => {
+      f(o), s(void 0), a.current = !1;
+      const e = d.current;
+      n(!!e?.complete && e.naturalWidth > 0);
+    }, [o]);
+    const L = (e) => {
+      a.current || (a.current = !0, m.set(e.currentTarget.src, !0), s(h));
+    }, j = () => {
       n(!0);
     };
     return (
       // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-      /* @__PURE__ */ I(
+      /* @__PURE__ */ E(
         "img",
         {
-          ref: p,
-          src: h || c(r),
+          ref: I,
+          src: v || f(o),
           alt: "",
-          className: k(
-            u === "cover" ? "object-cover" : "object-contain object-center",
-            f && "rounded-full",
-            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
-            e
+          className: N(
+            R === "cover" ? "object-cover" : "object-contain object-center",
+            g && "rounded-full",
+            !b && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            t
           ),
           style: {
-            width: o,
-            height: o,
-            ...l
+            width: c,
+            height: c,
+            ...p
           },
           loading: "lazy",
           decoding: "async",
-          onError: y,
-          onLoad: R,
-          ...g
+          onError: L,
+          onLoad: j,
+          ...y
         }
       )
     );
   }
 );
-N.displayName = "RoundedImage";
+U.displayName = "RoundedImage";
 export {
-  N as RoundedImage
+  U as RoundedImage
 };

package/dist/esm/components/rwa-feature/rwa-feature.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { RWA_GRADIENT_BORDER_CLASS as i } from "../rwa-styles/index.js";
+import { RWA_GRADIENT_BORDER_CLASS as i } from "../rwa-styles/rwa-gradient.js";
 import { SimpleTooltip as p } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import { FormattedMessageTyped as n } from "../typed-intl/index.js";

package/dist/esm/components/rwa-styles/{index.js → rwa-gradient.js}

@@ -1,5 +1,4 @@
-const e = "bg-transparent text-secondary-foreground relative border-0 isolate before:content-[''] before:absolute before:z-[-1] before:p-px before:-inset-px before:rounded-[inherit] before:bg-[linear-gradient(135deg,rgb(246,44,161)_0%,rgb(255,127,35)_100%)] before:[mask:linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)_content-box_exclude,_linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)] before:[mask-composite:exclude] before:[-webkit-mask-composite:xor]", r = "[&_.grid.grid-cols-subgrid.col-span-full:has([data-rwa-pool-marker='true'])>*]:before:bg-[#7fc8ea]/40";
+const e = "bg-transparent text-secondary-foreground relative border-0 isolate before:content-[''] before:absolute before:z-[-1] before:p-px before:-inset-px before:rounded-[inherit] before:bg-[linear-gradient(135deg,rgb(246,44,161)_0%,rgb(255,127,35)_100%)] before:[mask:linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)_content-box_exclude,_linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)] before:[mask-composite:exclude] before:[-webkit-mask-composite:xor]";
 export {
-  e as RWA_GRADIENT_BORDER_CLASS,
-  r as RWA_POOL_ROW_HOVER_WRAPPER_CLASS
+  e as RWA_GRADIENT_BORDER_CLASS
 };

package/dist/esm/components/sdk-status-pill/constants.js

@@ -0,0 +1,8 @@
+const t = {
+  root: "sdk-status-pill-root",
+  dot: "sdk-status-pill-dot",
+  tooltip: "sdk-status-pill-tooltip"
+};
+export {
+  t as SdkStatusPillTest
+};

package/dist/esm/components/sdk-status-pill/index.js

@@ -0,0 +1,6 @@
+import { SdkStatusPillTest as o } from "./constants.js";
+import { SdkStatusPill as S } from "./sdk-status-pill.js";
+export {
+  S as SdkStatusPill,
+  o as SdkStatusPillTest
+};

package/dist/esm/components/sdk-status-pill/sdk-status-pill.js

@@ -0,0 +1,62 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SimpleTooltip as a } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { useIntlTyped as c } from "../typed-intl/index.js";
+import "react";
+import { useMediaQuery as m } from "../../hooks/use-media-query.js";
+import { cn as d } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+import { SdkStatusPillTest as o } from "./constants.js";
+import { sdkStatusDotVariant as l } from "./sdk-status.js";
+const p = "(hover: none)", u = {
+  loading: "components.sdkStatus.connecting",
+  ready: "components.sdkStatus.connected",
+  error: "components.sdkStatus.disconnected"
+};
+function N({
+  status: e
+}) {
+  const { formatMessage: r } = c(), n = !m(p), s = r({ messageId: u[e] }), i = (
+    // `<output>` rather than a span with role="status": same implicit live
+    // region, and the status is announced without the dot being focusable.
+    //
+    // The box is `size-6`, not the dot's 6px: a 6px hover/tap target is far
+    // under the 24px WCAG 2.5.8 minimum and genuinely hard to hit, while the
+    // dot itself has to stay small to keep the footer quiet.
+    //
+    // `-m-1.5` keeps that out of the layout in both axes, so the footer row
+    // keeps its height and the links do not shift.
+    /* @__PURE__ */ t(
+      "output",
+      {
+        className: "-m-1.5 flex size-6 cursor-pointer items-center justify-center",
+        "data-testid": o.root,
+        "aria-label": s,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: d(
+              "size-1.5 shrink-0 rounded-full",
+              l(e) === "success" ? "bg-success" : "bg-muted-foreground",
+              e === "loading" && "animate-pulse"
+            ),
+            "data-testid": o.dot
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ t(
+    a,
+    {
+      title: i,
+      trigger: n ? "hover" : "click",
+      placement: "top",
+      children: /* @__PURE__ */ t("span", { className: "text-xs", "data-testid": o.tooltip, children: s })
+    }
+  );
+}
+export {
+  N as SdkStatusPill
+};

package/dist/esm/components/sdk-status-pill/sdk-status.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return t === "ready" ? "success" : "default";
+}
+export {
+  a as sdkStatusDotVariant
+};

package/dist/esm/components/search-line/index.js

@@ -1,7 +1,4 @@
-import { SearchLine as r, WithSearchLine as i, searchLineInputVariants as n, searchLineVariants as h } from "./search-line.js";
+import { SearchLine as o } from "./search-line.js";
 export {
-  r as SearchLine,
-  i as WithSearchLine,
-  n as searchLineInputVariants,
-  h as searchLineVariants
+  o as SearchLine
 };

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

@@ -1,17 +1,14 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { IconPending as C } from "@gearbox-protocol/static";
-import { cva as x } from "class-variance-authority";
-import * as r from "react";
-import { faMagnifyingGlass as I, faArrowRight as S } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as p } from "../icons/fa-icon.js";
-import { Input as V } from "../input/input.js";
-import "@gearbox-protocol/sdk";
-import { cn as f } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { faMagnifyingGlass as I, faArrowRight as V } from "@fortawesome/free-solid-svg-icons";
+import { IconPending as j } from "@gearbox-protocol/static";
+import { cva as u } from "class-variance-authority";
+import * as l from "react";
+import { FaIcon as f } from "../icons/fa-icon.js";
+import { Input as D } from "../input/input.js";
+import { cn as m } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const D = x("relative w-full transition-all duration-200", {
+const F = u("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -23,7 +20,7 @@ const D = x("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), F = x("transition-all duration-200 pr-10", {
+}), L = u("transition-all duration-200 pr-10", {
   variants: {
     active: {
       true: "",
@@ -71,81 +68,81 @@ const D = x("relative w-full transition-all duration-200", {
     active: !1,
     theme: "light"
   }
-}), v = r.forwardRef(
+}), R = l.forwardRef(
   ({
-    className: o,
-    size: n,
-    searchState: c,
-    placeholder: m = "Search...",
-    theme: l = "light",
-    showSearchIcon: s = !1,
-    customIcon: N,
+    className: d,
+    size: p,
+    searchState: h,
+    placeholder: g = "Search...",
+    theme: s = "light",
+    showSearchIcon: o = !1,
+    customIcon: x,
     onSubmit: t,
-    ...b
-  }, w) => {
-    const { value: a, handleSubmit: i, handleInput: y, loading: d } = c, [k, u] = r.useState(!1), h = a !== "" || k, z = r.useCallback(
-      (j) => {
-        j.preventDefault(), i({ preventDefault: () => {
+    ...v
+  }, N) => {
+    const { value: a, handleSubmit: r, handleInput: b, loading: n } = h, [y, i] = l.useState(!1), c = a !== "" || y, k = l.useCallback(
+      (z) => {
+        z.preventDefault(), r({ preventDefault: () => {
         } }), t && t(a);
       },
-      [i, t, a]
-    ), L = r.useCallback(() => {
-      i({ preventDefault: () => {
+      [r, t, a]
+    ), w = l.useCallback(() => {
+      r({ preventDefault: () => {
       } }), t && t(a);
-    }, [i, t, a]);
+    }, [r, t, a]);
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: w,
-        className: f(D({ size: n }), o),
-        ...b,
-        children: /* @__PURE__ */ g(
+        ref: N,
+        className: m(F({ size: p }), d),
+        ...v,
+        children: /* @__PURE__ */ C(
           "form",
           {
-            onSubmit: z,
-            onFocus: () => u(!0),
-            onBlur: () => u(!1),
+            onSubmit: k,
+            onFocus: () => i(!0),
+            onBlur: () => i(!1),
             className: "relative",
             children: [
-              s && /* @__PURE__ */ e(
-                p,
+              o && /* @__PURE__ */ e(
+                f,
                 {
                   icon: I,
                   className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
                 }
               ),
               /* @__PURE__ */ e(
-                V,
+                D,
                 {
                   type: "search",
-                  placeholder: m,
+                  placeholder: g,
                   value: a,
-                  colorTheme: l === "deep-light" ? "outlined" : "filledDark",
-                  onChange: y,
-                  className: f(
-                    F({ active: h, theme: l }),
-                    s && "pl-10"
+                  colorTheme: s === "deep-light" ? "outlined" : "filledDark",
+                  onChange: b,
+                  className: m(
+                    L({ active: c, theme: s }),
+                    o && "pl-10"
                   )
                 }
               ),
-              h && !d && /* @__PURE__ */ e(
+              c && !n && /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: L,
+                  onClick: w,
                   className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
                   "aria-label": "Submit search",
-                  children: N || /* @__PURE__ */ e(
-                    p,
+                  children: x || /* @__PURE__ */ e(
+                    f,
                     {
-                      icon: S,
+                      icon: V,
                       className: "text-primary size-[18px]"
                     }
                   )
                 }
               ),
-              d && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
-                C,
+              n && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
+                j,
                 {
                   size: 18,
                   className: "text-muted-foreground animate-spin"
@@ -158,41 +155,7 @@ const D = x("relative w-full transition-all duration-200", {
     );
   }
 );
-v.displayName = "SearchLine";
-const R = r.forwardRef(
-  ({
-    searchState: o,
-    children: n,
-    placeholder: c = "Search...",
-    theme: m = "light",
-    className: l
-  }, s) => /* @__PURE__ */ g(
-    "div",
-    {
-      ref: s,
-      className: f(
-        "w-full flex gap-4 flex-col sm:flex-row sm:items-center md:justify-between",
-        l
-      ),
-      children: [
-        /* @__PURE__ */ e("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children: n }),
-        /* @__PURE__ */ e("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ e(
-          v,
-          {
-            searchState: o,
-            placeholder: c,
-            theme: m,
-            size: "full"
-          }
-        ) })
-      ]
-    }
-  )
-);
-R.displayName = "WithSearchLine";
+R.displayName = "SearchLine";
 export {
-  v as SearchLine,
-  R as WithSearchLine,
-  F as searchLineInputVariants,
-  D as searchLineVariants
+  R as SearchLine
 };

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

@@ -1,5 +1,4 @@
-import { SegmentedControl as t, segmentedControlVariants as n } from "./segmented-control.js";
+import { SegmentedControl as r } from "./segmented-control.js";
 export {
-  t as SegmentedControl,
-  n as segmentedControlVariants
+  r as SegmentedControl
 };

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

@@ -2,11 +2,8 @@ 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 { cn as g } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const S = R(
   "relative z-0 w-full grid grid-flow-col auto-cols-[1fr] bg-gray-30",
@@ -27,7 +24,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 +56,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 +90,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 +109,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
@@ -125,6 +122,5 @@ const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
 });
 k.displayName = "SegmentedControlItem";
 export {
-  $ as SegmentedControl,
-  S as segmentedControlVariants
+  $ as SegmentedControl
 };

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

@@ -1,14 +1,8 @@
-import { Select as l, SelectContent as c, SelectGroup as S, SelectItem as r, SelectLabel as o, SelectScrollDownButton as a, SelectScrollUpButton as n, SelectSeparator as g, SelectTrigger as p, SelectValue as u, selectTriggerVariants as i } from "./select.js";
+import { Select as l, SelectContent as c, SelectItem as S, SelectTrigger as r, SelectValue as o } from "./select.js";
 export {
   l as Select,
   c as SelectContent,
-  S as SelectGroup,
-  r as SelectItem,
-  o as SelectLabel,
-  a as SelectScrollDownButton,
-  n as SelectScrollUpButton,
-  g as SelectSeparator,
-  p as SelectTrigger,
-  u as SelectValue,
-  i as selectTriggerVariants
+  S as SelectItem,
+  r as SelectTrigger,
+  o as SelectValue
 };