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

package/dist/esm/components/modal/modal.js

@@ -1,26 +1,21 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-dialog";
-import { cva as D } from "class-variance-authority";
-import * as i from "react";
-import "@gearbox-protocol/sdk/common-utils";
-import { useIsMobile as M } from "../../hooks/use-media-query.js";
-import "@gearbox-protocol/sdk";
-import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "luxon";
-import { Z_INDEX as O, Z_INDEX_VALUES as N } from "../../utils/z-index.js";
+import { cva as k } from "class-variance-authority";
+import * as s from "react";
+import { useIsMobile as D } from "../../hooks/use-media-query.js";
+import { cn as r } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import { Z_INDEX as N } from "../../utils/z-index.js";
+import { Z_INDEX_VALUES as O } from "../../utils/internal/z-index-values.js";
 const u = "gb-modal-open";
 let n = 0;
-const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] before:opacity-40", L = D("", {
+const _ = k("", {
   variants: {
     colorTheme: {
       default: "bg-black/30",
-      dark: "bg-black",
       "dark-transparent": "bg-black/85"
     },
     backdrop: {
-      success: `${b} before:bg-[linear-gradient(180deg,rgba(146,255,176,0.85)_0%,rgba(146,255,176,0)_50%)]`,
-      failure: `${b} before:bg-[linear-gradient(180deg,rgba(255,61,64,0.85)_0%,rgba(255,61,64,0)_50%)]`,
       default: ""
     }
   },
@@ -28,40 +23,40 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
     colorTheme: "default",
     backdrop: "default"
   }
-}), w = i.forwardRef(
+}), L = s.forwardRef(
   ({
-    show: r = !0,
-    colorTheme: g = "default",
-    backdrop: p = "default",
-    xsCentered: v = !1,
-    onClickOutside: s,
-    zIndexLayer: c = "MODAL",
-    className: x,
-    children: y,
+    show: o = !0,
+    colorTheme: p = "default",
+    backdrop: g = "default",
+    xsCentered: b = !1,
+    onClickOutside: i,
+    zIndexLayer: d = "MODAL",
+    className: v,
+    children: x,
     ...h
-  }, C) => {
-    const _ = M(), d = O[c], f = { zIndex: N[c] };
-    i.useEffect(() => {
-      if (!(typeof document > "u") && r)
+  }, y) => {
+    const C = D(), c = N[d], f = { zIndex: O[d] };
+    s.useEffect(() => {
+      if (!(typeof document > "u") && o)
         return n += 1, document.body.classList.add(u), () => {
           n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(u);
         };
-    }, [r]);
-    const l = i.useCallback(
+    }, [o]);
+    const l = s.useCallback(
       (e) => {
-        e || s?.();
+        e || i?.();
       },
-      [s]
+      [i]
     );
-    return r ? /* @__PURE__ */ t(a.Root, { open: r, onOpenChange: l, modal: !0, children: /* @__PURE__ */ m(a.Portal, { children: [
+    return o ? /* @__PURE__ */ t(a.Root, { open: o, onOpenChange: l, modal: !0, children: /* @__PURE__ */ m(a.Portal, { children: [
       /* @__PURE__ */ t(
         a.Overlay,
         {
-          className: o(
+          className: r(
             "fixed inset-0",
             "pointer-events-auto",
-            d,
-            L({ colorTheme: g, backdrop: p })
+            c,
+            _({ colorTheme: p, backdrop: g })
           ),
           style: f
         }
@@ -69,7 +64,7 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
       /* @__PURE__ */ t(
         a.Content,
         {
-          className: o("fixed inset-0", "overflow-y-auto", d),
+          className: r("fixed inset-0", "overflow-y-auto", c),
           style: f,
           onPointerDownOutside: (e) => {
             e.detail.originalEvent.target?.closest?.(
@@ -87,7 +82,7 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
           children: /* @__PURE__ */ t(
             "div",
             {
-              className: o(
+              className: r(
                 "min-h-full",
                 "flex flex-col justify-center items-center",
                 "animate-[modalContentShow_225ms_cubic-bezier(0.4,0,0.2,1)]"
@@ -99,19 +94,19 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
               children: /* @__PURE__ */ m(
                 "div",
                 {
-                  ref: C,
-                  className: o(
+                  ref: y,
+                  className: r(
                     "relative",
                     "w-full sm:w-auto",
                     "m-auto py-0 px-0 sm:py-5",
-                    _ && "w-full",
-                    v && "min-h-screen flex flex-nowrap items-center justify-center sm:min-h-0 sm:block",
-                    x
+                    C && "w-full",
+                    b && "min-h-screen flex flex-nowrap items-center justify-center sm:min-h-0 sm:block",
+                    v
                   ),
                   ...h,
                   children: [
                     /* @__PURE__ */ t(a.Title, { className: "sr-only", children: "Modal Window" }),
-                    y
+                    x
                   ]
                 }
               )
@@ -122,7 +117,7 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
     ] }) }) : null;
   }
 );
-w.displayName = "Modal";
+L.displayName = "Modal";
 export {
-  w as Modal
+  L as Modal
 };

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -1,33 +1,29 @@
-import { jsx as n } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as a } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsx as a } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-function f({
+function p({
   size: o,
   className: t,
   style: i,
-  ...r
+  ...n
 }) {
-  const m = o ? { width: o, height: o } : {};
+  const r = o ? { width: o, height: o } : {};
   return (
     // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "img",
       {
         alt: "Logo",
-        className: a("object-contain", t),
-        style: { ...m, ...i },
+        className: c("object-contain", t),
+        style: { ...r, ...i },
         loading: "lazy",
         decoding: "async",
-        ...r
+        ...n
       }
     )
   );
 }
 export {
-  f as NavBarLogo
+  p as NavBarLogo
 };

package/dist/esm/components/navigation-context/index.js

@@ -1,5 +1,4 @@
-import { NavigationProvider as o, useNavigationAdapter as r } from "./navigation-context.js";
+import { NavigationProvider as i } from "./navigation-provider.js";
 export {
-  o as NavigationProvider,
-  r as useNavigationAdapter
+  i as NavigationProvider
 };

package/dist/esm/components/navigation-context/navigation-context.js

@@ -1,36 +1,25 @@
 import { jsx as e } from "react/jsx-runtime";
-import * as t from "react";
-const i = t.createContext(null);
-function p({
-  Link: o,
-  useLocation: a,
-  useNavigate: n,
-  children: s
-}) {
-  const c = t.useMemo(
-    () => ({ Link: o, useLocation: a, useNavigate: n }),
-    [o, a, n]
-  );
-  return /* @__PURE__ */ e(i.Provider, { value: c, children: s });
-}
-const r = t.forwardRef(
-  ({ to: o, ...a }, n) => /* @__PURE__ */ e("a", { ref: n, href: o, ...a })
+import * as a from "react";
+const r = a.createContext(
+  null
+), n = a.forwardRef(
+  ({ to: o, ...i }, t) => /* @__PURE__ */ e("a", { ref: t, href: o, ...i })
 );
-r.displayName = "FallbackLink";
-const d = {
-  Link: r,
+n.displayName = "FallbackLink";
+const s = {
+  Link: n,
   useLocation: () => typeof window < "u" ? { hash: window.location.hash, pathname: window.location.pathname } : { hash: "", pathname: "/" },
   useNavigate: () => (o) => {
     typeof window < "u" && (window.location.href = o);
   }
 };
-function f() {
-  const o = t.useContext(i);
+function l() {
+  const o = a.useContext(r);
   return o || (process.env.NODE_ENV === "development" && console.warn(
     "NavigationProvider is missing. Wrap your app with <NavigationProvider> or <NextNavigationProvider> (from @gearbox-protocol/ui-kit/next). Falling back to plain <a> links."
-  ), d);
+  ), s);
 }
 export {
-  p as NavigationProvider,
-  f as useNavigationAdapter
+  r as NavigationContext,
+  l as useNavigationAdapter
 };

package/dist/esm/components/navigation-context/navigation-provider.js

@@ -0,0 +1,18 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as a from "react";
+import { NavigationContext as n } from "./navigation-context.js";
+function v({
+  Link: r,
+  useLocation: o,
+  useNavigate: t,
+  children: e
+}) {
+  const i = a.useMemo(
+    () => ({ Link: r, useLocation: o, useNavigate: t }),
+    [r, o, t]
+  );
+  return /* @__PURE__ */ m(n.Provider, { value: i, children: e });
+}
+export {
+  v as NavigationProvider
+};

package/dist/esm/components/network-icon/index.js

@@ -1,6 +1,4 @@
-import { NetworkIcon as t } from "./network-icon.js";
-import { NetworkIndicator as c } from "./network-indicator.js";
+import { NetworkIcon as e } from "./network-icon.js";
 export {
-  t as NetworkIcon,
-  c as NetworkIndicator
+  e as NetworkIcon
 };

package/dist/esm/components/network-icon/network-icon.js

@@ -2,7 +2,7 @@ import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { RoundedImage as i } from "../rounded-image/rounded-image.js";
 import { SimpleTooltip as d } from "../tooltip/simple-tooltip.js";
 import { cn as g } from "../../utils/cn.js";
-import { getStatic as r } from "../../utils/static.js";
+import { getStatic as r } from "../../utils/internal/static.js";
 const s = r("/chains/allnetworks.svg");
 function h(t) {
   return t ? r(`/chains/${t.toLowerCase()}.svg`) : s;

package/dist/esm/components/no-value/index.js

@@ -0,0 +1,4 @@
+import { NoValue as r } from "./no-value.js";
+export {
+  r as NoValue
+};

package/dist/esm/components/no-value/no-value.js

@@ -0,0 +1,34 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { ValueTest as n } from "../base/values/constants.js";
+import { HelpTip as o } from "../help-tip/help-tip.js";
+import { useIntlTyped as i } from "../typed-intl/index.js";
+const c = "—";
+function u({ reason: r }) {
+  const t = i();
+  if (r === void 0)
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        className: "text-secondary-foreground",
+        "data-testid": n.placeholder,
+        children: c
+      }
+    );
+  const s = t.formatMessage({
+    messageId: "components.value.accruing"
+  });
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: "inline-flex items-center leading-[0]",
+      "data-testid": n.accruing,
+      children: [
+        /* @__PURE__ */ e(o, { iconSize: 18, children: s }),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: s })
+      ]
+    }
+  );
+}
+export {
+  u as NoValue
+};

package/dist/esm/components/points-icon/points-icon.js

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import * as f from "react";
 import { RoundedImage as l } from "../rounded-image/rounded-image.js";
-import { buildStaticUrl as d } from "../../utils/static.js";
+import { buildStaticUrl as d } from "../../utils/internal/static.js";
 const g = f.forwardRef(
   ({
     reward: t,

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

@@ -1,10 +1,6 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { cn as o } 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 a = {
   primary: "border-primary bg-primary",
@@ -13,49 +9,49 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function f({
-  size: r = 24,
+function h({
+  size: e = 24,
   color: n = "primary",
   className: s,
   children: d
 }) {
-  const t = r + 8, l = a[n];
+  const l = e + 8, t = a[n];
   return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full border-2",
-          l.split(" ")[0]
+          t.split(" ")[0]
           // border color
         ),
         style: {
           top: -4,
           left: -4,
-          width: t,
-          height: t
+          width: l,
+          height: l
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full",
-          l.split(" ")[1]
+          t.split(" ")[1]
         ),
         style: {
-          top: -r / 4,
-          right: -r / 4,
-          width: r * 7 / 12,
-          height: r * 7 / 12,
+          top: -e / 4,
+          right: -e / 4,
+          width: e * 7 / 12,
+          height: e * 7 / 12,
           zIndex: 1
         },
         children: /* @__PURE__ */ i(
           "svg",
           {
-            width: r / 3,
-            height: r / 3,
+            width: e / 3,
+            height: e / 3,
             viewBox: "0 0 8 8",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
@@ -63,8 +59,8 @@ function f({
             role: "img",
             "aria-label": "Pool Points Indicator",
             children: [
-              /* @__PURE__ */ e("title", { children: "Pool Points" }),
-              /* @__PURE__ */ e("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+              /* @__PURE__ */ r("title", { children: "Pool Points" }),
+              /* @__PURE__ */ r("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
             ]
           }
         )
@@ -74,5 +70,5 @@ function f({
   ] });
 }
 export {
-  f as PoolPointsIndicator
+  h as PoolPointsIndicator
 };

package/dist/esm/components/radio-group/index.js

@@ -0,0 +1,5 @@
+import { RadioGroup as p, RadioGroupItem as a } from "./radio-group.js";
+export {
+  p as RadioGroup,
+  a as RadioGroupItem
+};

package/dist/esm/components/radio-group/radio-group.js

@@ -0,0 +1,54 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import { cva as n } from "class-variance-authority";
+import * as t from "react";
+import { cn as s } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+const l = n("", {
+  variants: {
+    size: {
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    },
+    color: {
+      primary: "border-primary",
+      secondary: "border-gray-50 data-[state=checked]:border-primary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), c = t.forwardRef(({ className: e, ...o }, a) => /* @__PURE__ */ i(r.Root, { ref: a, className: s(e), ...o }));
+c.displayName = r.Root.displayName;
+const p = t.forwardRef(({ className: e, color: o, size: a, ...d }, m) => /* @__PURE__ */ i(
+  r.Item,
+  {
+    ref: m,
+    className: s(
+      "group relative shrink-0 rounded-full border shadow cursor-pointer transition-colors flex items-center justify-center",
+      "data-[state=checked]:border-primary",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      l({ size: a, color: o }),
+      "disabled:cursor-not-allowed disabled:bg-gray-20 disabled:border-gray-50",
+      e
+    ),
+    ...d,
+    children: /* @__PURE__ */ i(
+      r.Indicator,
+      {
+        className: s(
+          "pointer-events-none flex items-center justify-center",
+          "size-2 rounded-full bg-primary",
+          "group-disabled:bg-gray-50"
+        )
+      }
+    )
+  }
+));
+p.displayName = r.Item.displayName;
+export {
+  c as RadioGroup,
+  p as RadioGroupItem
+};

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 @@
+class s {
+  static root = "sdk-status-pill-root";
+  static dot = "sdk-status-pill-dot";
+  static tooltip = "sdk-status-pill-tooltip";
+}
+export {
+  s 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
+};