@gearbox-protocol/permissionless-ui 1.22.0-next.98 → 1.22.0

package/dist/esm/components/navitem/navitem.js

@@ -1,28 +1,29 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { Slot as x } from "@radix-ui/react-slot";
-import { cva as h } from "class-variance-authority";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { Slot as k } from "@radix-ui/react-slot";
+import { cva as w } from "class-variance-authority";
 import * as t from "react";
-import { useNavbarIndicator as y } from "../navbar/navbar-indicator-context.js";
+import { useNavbarIndicator as I } from "../navbar/navbar-indicator-context.js";
 import "@gearbox-protocol/sdk";
-import { cn as k } from "../../utils/cn.js";
+import { cn as l } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const I = h(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 relative",
+import "../../utils/z-index.js";
+const R = w(
+  "inline-flex items-center whitespace-nowrap text-[15px] leading-[125%] text-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 relative group/nav-item",
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
-        active: "text-foreground bg-secondary md:bg-transparent active:bg-transparent focus:bg-transparent md:active:bg-secondary md:focus:bg-secondary",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
+        default: "text-decoration-none text-foreground hover:text-foreground data-[active=true]:text-foreground",
+        active: "text-foreground",
+        ghost: "text-decoration-none text-muted-foreground hover:text-foreground data-[active=true]:text-foreground",
         link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline active:bg-transparent focus:bg-transparent",
         pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-secondary md:data-[active=true]:bg-accent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-accent",
         tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none active:bg-transparent focus:bg-transparent"
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "px-4 py-2",
-        lg: "h-10 px-5 text-base",
+        sm: "px-3 text-xs",
+        default: "",
+        lg: "px-5 text-base",
         icon: "h-9 w-9"
       }
     },
@@ -31,75 +32,92 @@ const I = h(
       size: "default"
     }
   }
-), N = t.forwardRef(
+), y = /* @__PURE__ */ new Set(["default", "active", "ghost"]), E = t.forwardRef(
   ({
-    className: u,
-    variant: f,
-    size: l,
-    asChild: g = !1,
+    className: f,
+    variant: v,
+    size: m,
+    asChild: p = !1,
     active: a = !1,
     icon: d,
-    badge: s,
+    badge: c,
     external: i = !1,
-    children: m,
-    ...v
-  }, p) => {
-    const b = g ? x : "a", e = y(), n = t.useRef(null), r = t.useId();
-    return t.useImperativeHandle(p, () => n.current), t.useEffect(() => {
+    children: g,
+    ...x
+  }, h) => {
+    const b = p ? k : "a", e = I(), n = t.useRef(null), r = t.useId();
+    t.useImperativeHandle(h, () => n.current), t.useEffect(() => {
       if (e && n.current)
         return e.registerItem(r, n.current), () => {
           e.unregisterItem(r);
         };
     }, [e, r]), t.useEffect(() => {
       e && a && e.setActiveItem(r);
-    }, [e, a, r]), /* @__PURE__ */ c(
+    }, [e, a, r]);
+    const u = e ? "default" : a ? "active" : v ?? "default", N = y.has(u);
+    return /* @__PURE__ */ s(
       b,
       {
         ref: n,
-        className: k(
-          I({
-            variant: e ? "default" : a ? "active" : f,
-            size: l,
-            className: u
+        className: l(
+          R({
+            variant: u,
+            size: m,
+            className: f
           })
         ),
         "data-active": a,
         target: i ? "_blank" : void 0,
         rel: i ? "noopener noreferrer" : void 0,
-        ...v,
+        ...x,
         children: [
-          d && /* @__PURE__ */ o("span", { className: "shrink-0", children: d }),
-          m,
-          s && /* @__PURE__ */ o("span", { className: "ml-auto", children: s }),
-          i && /* @__PURE__ */ c(
-            "svg",
+          N && /* @__PURE__ */ o(
+            "div",
             {
-              className: "h-3 w-3 shrink-0",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "aria-label": "External link",
-              children: [
-                /* @__PURE__ */ o("title", { children: "External link" }),
-                /* @__PURE__ */ o(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  }
-                )
-              ]
+              "aria-hidden": "true",
+              className: l(
+                "absolute -top-[6px] -left-[13px]",
+                "w-[calc(100%+26px)] h-[calc(100%+12px)]",
+                "rounded-[15px]",
+                "group-hover/nav-item:bg-gray-40",
+                "transition-colors"
+              )
             }
-          )
+          ),
+          /* @__PURE__ */ s("div", { className: "relative flex items-center", children: [
+            d && /* @__PURE__ */ o("span", { className: "shrink-0", children: d }),
+            g,
+            c && /* @__PURE__ */ o("span", { className: "ml-auto", children: c }),
+            i && /* @__PURE__ */ s(
+              "svg",
+              {
+                className: "h-3 w-3 shrink-0",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-label": "External link",
+                children: [
+                  /* @__PURE__ */ o("title", { children: "External link" }),
+                  /* @__PURE__ */ o(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
         ]
       }
     );
   }
 );
-N.displayName = "NavItem";
+E.displayName = "NavItem";
 export {
-  N as NavItem,
-  I as navitemVariants
+  E as NavItem,
+  R as navitemVariants
 };

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

@@ -1,14 +1,16 @@
 import { SignInRequired as e } from "../auth/signin-required.js";
 import { preloadTokenIcons as n } from "../token-icon/token-icon.js";
-import { BackButton as x } from "./back-button.js";
-import { NextMarkdownViewer as m } from "./next-markdown-viewer.js";
-import { SIWEClientProvider as d } from "./siwe-provider.js";
-import { TokenIcon as I } from "./token-icon.js";
+import { BackButton as i } from "./back-button.js";
+import { NextMarkdownViewer as f } from "./next-markdown-viewer.js";
+import { NextNavigationProvider as a } from "./next-navigation-provider.js";
+import { SIWEClientProvider as k } from "./siwe-provider.js";
+import { TokenIcon as c } from "./token-icon.js";
 export {
-  x as BackButton,
-  m as NextMarkdownViewer,
-  d as SIWEClientProvider,
+  i as BackButton,
+  f as NextMarkdownViewer,
+  a as NextNavigationProvider,
+  k as SIWEClientProvider,
   e as SignInRequired,
-  I as TokenIcon,
+  c as TokenIcon,
   n as preloadTokenIcons
 };

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

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { NavigationProvider as h } from "../navigation-context/navigation-context.js";
+function v({
+  Link: i,
+  useRouter: e,
+  usePathname: r,
+  children: a
+}) {
+  return /* @__PURE__ */ o(
+    h,
+    {
+      Link: ({ to: n, ref: t, ...s }) => /* @__PURE__ */ o(i, { ref: t, href: n, ...s }),
+      useLocation: () => {
+        const n = r();
+        return { hash: typeof window < "u" ? window.location.hash : "", pathname: n };
+      },
+      useNavigate: () => {
+        const n = e();
+        return (t) => {
+          t.startsWith("#") ? window.location.hash = t : n.push(t);
+        };
+      },
+      children: a
+    }
+  );
+}
+export {
+  v as NextNavigationProvider
+};

package/dist/esm/components/not-found/not-found.js

@@ -1,9 +1,10 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as c } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 function u({
   icon: e,
   message: r,
@@ -12,7 +13,7 @@ function u({
   return /* @__PURE__ */ o(
     "div",
     {
-      className: c(
+      className: m(
         "flex w-full flex-col items-center justify-center gap-4 py-8",
         i
       ),

package/dist/esm/components/options-list/options-list.js

@@ -1,59 +1,51 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import * as n from "react";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import "react";
 import "@gearbox-protocol/sdk";
-import { cn as m } from "../../utils/cn.js";
+import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function v({
-  className: r,
+import "../../utils/z-index.js";
+function h({
+  className: t,
   children: o,
-  ...l
+  ...r
 }) {
-  const s = n.Children.toArray(o).length, i = n.Children.map(o, (t, f) => {
-    if (n.isValidElement(t)) {
-      const d = f === 0, u = f === s - 1;
-      return n.cloneElement(t, {
-        first: d,
-        last: u
-      });
-    }
-    return t;
-  });
-  return /* @__PURE__ */ e("div", { className: m("m-0 p-0 w-full flex flex-wrap", r), ...l, children: i });
+  return /* @__PURE__ */ e("div", { className: i("m-0 p-0 w-full flex flex-wrap", t), ...r, children: o });
 }
-function N({
-  icon: r,
+function g({
+  icon: t,
   title: o,
-  subTitle: l,
+  subTitle: r,
   onClick: a,
-  endingIcon: s,
-  last: i = !1,
-  className: t
+  endingIcon: l,
+  last: s = !1,
+  className: n
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ f(
     "button",
     {
       type: "button",
       onClick: a,
-      className: m(
-        "relative z-0 pt-5 px-4 flex flex-row items-start gap-4 w-full cursor-pointer text-left",
+      className: i(
+        "group relative z-0 pt-5 px-4 flex flex-row items-start gap-4 w-full cursor-pointer text-left",
         "before:absolute before:-z-10 before:left-0 before:hidden before:w-full before:inset-y-0 before:content-[''] before:bg-muted/50 before:rounded-lg",
+        !s && "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:content-[''] after:bg-border",
         "hover:before:block",
-        !i && "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:content-[''] after:bg-border",
-        t
+        "hover:after:hidden",
+        n
       ),
       children: [
-        r && /* @__PURE__ */ e("div", { className: "w-6 h-6 text-muted-foreground flex items-center justify-center", children: r }),
-        /* @__PURE__ */ e("div", { className: "pb-5 flex-1 flex flex-col gap-2", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-1.5", children: [
+        t && /* @__PURE__ */ e("div", { className: "w-6 h-6 text-muted-foreground flex items-center justify-center", children: t }),
+        /* @__PURE__ */ e("div", { className: "pb-5 flex-1 flex flex-col gap-2", children: /* @__PURE__ */ f("div", { className: "flex flex-col gap-1.5", children: [
           /* @__PURE__ */ e("div", { className: "text-base leading-[1.2] font-medium", children: o }),
-          l && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: l })
+          r && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: r })
         ] }) }),
-        s && /* @__PURE__ */ e("div", { className: "ml-4 text-muted-foreground transition-colors", children: s })
+        l && /* @__PURE__ */ e("div", { className: "ml-4 text-muted-foreground transition-colors", children: l })
       ]
     }
   );
 }
 export {
-  N as OptionsItem,
-  v as OptionsList
+  g as OptionsItem,
+  h as OptionsList
 };

package/dist/esm/components/overflow/overflow.js

@@ -1,21 +1,22 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as t } from "../../utils/cn.js";
+import { cn as e } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function d({ children: r, className: o, ...i }) {
-  return /* @__PURE__ */ e("div", { className: t("overflow-hidden", o), ...i, children: r });
+import "../../utils/z-index.js";
+function l({ children: r, className: o, ...i }) {
+  return /* @__PURE__ */ t("div", { className: e("overflow-hidden", o), ...i, children: r });
 }
-function l({
+function v({
   children: r,
   className: o,
   size: i,
   ...m
 }) {
-  return /* @__PURE__ */ e("div", { className: t("break-words", o), ...m, children: r });
+  return /* @__PURE__ */ t("div", { className: e("break-words", o), ...m, children: r });
 }
 export {
-  d as Overflow,
-  l as OverflowWrap
+  l as Overflow,
+  v as OverflowWrap
 };

package/dist/esm/components/overflow-container/overflow-container.js

@@ -4,19 +4,20 @@ import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const u = {
+import "../../utils/z-index.js";
+const m = {
   default: "rounded-lg",
   small: "rounded-[8px]"
-}, f = {
+}, u = {
   default: "border border-gray-20",
   light: "border border-gray-50",
   none: ""
 };
-function g({
+function C({
   children: o,
   maxHeight: e,
-  minHeight: d = e,
-  size: p = "default",
+  minHeight: p = e,
+  size: d = "default",
   borderColor: s = "default",
   outerPadding: a = "14px 12px 14px 0",
   innerPadding: l = "0 22px 0 16px",
@@ -28,8 +29,8 @@ function g({
     {
       className: t(
         "pt-3.5 pr-3 pl-0 pb-3.5",
-        u[p],
-        f[s],
+        m[d],
+        u[s],
         i
       ),
       style: { padding: a },
@@ -37,7 +38,7 @@ function g({
         "div",
         {
           className: t("overflow-y-auto w-full", n),
-          style: { maxHeight: e, minHeight: d },
+          style: { maxHeight: e, minHeight: p },
           children: l !== null ? /* @__PURE__ */ r("div", { style: { padding: l }, children: o }) : o
         }
       )
@@ -45,5 +46,5 @@ function g({
   );
 }
 export {
-  g as OverflowContainer
+  C as OverflowContainer
 };

package/dist/esm/components/page-title/page-title.js

@@ -1,11 +1,12 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import * as u from "react";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
+import * as C from "react";
 import "@gearbox-protocol/sdk";
-import { cn as l } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const v = d(
+import "../../utils/z-index.js";
+const A = o(
   "font-semibold leading-tight tracking-tight flex items-center gap-2",
   {
     variants: {
@@ -27,7 +28,7 @@ const v = d(
       variant: "default"
     }
   }
-), N = d(
+), T = o(
   "flex flex-col md:flex-row items-start md:items-center",
   {
     variants: {
@@ -41,63 +42,74 @@ const v = d(
       spacing: "default"
     }
   }
-), w = u.forwardRef(
+), V = C.forwardRef(
   ({
-    className: n,
-    size: x,
-    variant: f,
-    spacing: c,
-    backButton: i,
-    icon: m,
-    actions: a,
-    subtitle: s,
-    as: p = "h1",
-    children: g,
-    actionsPosition: r = "left",
-    ...o
-  }, h) => /* @__PURE__ */ t(
-    "div",
-    {
-      ref: h,
-      className: l("w-full flex items-center gap-4", n),
-      ...o,
-      children: [
-        i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center", children: i }),
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: l(
-              N({ spacing: c }),
-              r === "right" && "justify-between w-full"
-            ),
-            children: [
-              /* @__PURE__ */ e("div", { className: "flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3 min-w-0", children: [
-                m && /* @__PURE__ */ e("div", { className: "shrink-0", children: m }),
-                /* @__PURE__ */ t("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
-                    /* @__PURE__ */ e(
-                      p,
-                      {
-                        className: l(v({ size: x, variant: f }), "m-0"),
-                        children: g
-                      }
-                    ),
-                    a && r === "left" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
-                  ] }),
-                  s && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground mt-1", children: s })
-                ] })
-              ] }) }),
-              a && r === "right" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
-            ]
-          }
-        )
-      ]
-    }
-  )
+    className: x,
+    size: g,
+    variant: p,
+    spacing: m,
+    backButton: n,
+    icon: d,
+    actions: l,
+    subtitle: c,
+    as: h = "h1",
+    children: u,
+    actionsPosition: w = "left",
+    actionsPositionMd: f,
+    ...v
+  }, N) => {
+    const e = w === "right", a = f ? f === "right" : e, i = e !== a, y = i ? s(
+      "flex",
+      m === "sm" ? "gap-2" : m === "lg" ? "gap-6" : "gap-4",
+      e ? "flex-row items-center justify-between w-full" : "flex-col items-start",
+      a ? "md:flex-row md:items-center md:justify-between md:w-full" : "md:flex-row md:items-center md:justify-start"
+    ) : s(
+      T({ spacing: m }),
+      e && "justify-between w-full"
+    ), j = i ? s(
+      "shrink-0 items-center gap-2",
+      e ? "hidden" : "flex",
+      a ? "md:hidden" : "md:flex"
+    ) : "shrink-0 flex items-center gap-2", k = i ? s(
+      "shrink-0 items-center gap-2",
+      e ? "flex" : "hidden",
+      a ? "md:flex" : "md:hidden"
+    ) : "shrink-0 flex items-center gap-2", R = i ? !0 : !e, b = i ? !0 : e;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: N,
+        className: s("w-full flex items-center gap-4", x),
+        ...v,
+        children: [
+          n && /* @__PURE__ */ t("div", { className: "shrink-0 flex items-center", children: n }),
+          /* @__PURE__ */ r("div", { className: y, children: [
+            /* @__PURE__ */ t("div", { className: "flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-3 min-w-0", children: [
+              d && /* @__PURE__ */ t("div", { className: "shrink-0", children: d }),
+              /* @__PURE__ */ r("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ t(
+                    h,
+                    {
+                      className: s(A({ size: g, variant: p }), "m-0"),
+                      children: u
+                    }
+                  ),
+                  l && R && /* @__PURE__ */ t("div", { className: j, children: l })
+                ] }),
+                c && /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground mt-1", children: c })
+              ] })
+            ] }) }),
+            l && b && /* @__PURE__ */ t("div", { className: k, children: l })
+          ] })
+        ]
+      }
+    );
+  }
 );
-w.displayName = "PageTitle";
+V.displayName = "PageTitle";
 export {
-  w as PageTitle,
-  N as pageTitleRootVariants,
-  v as pageTitleVariants
+  V as PageTitle,
+  T as pageTitleRootVariants,
+  A as pageTitleVariants
 };

package/dist/esm/components/percent-indicator/percent-indicator.js

@@ -5,7 +5,8 @@ import { cn as n } from "../../utils/cn.js";
 import "sonner";
 import { percentTemplate as u } from "../../utils/format-money.js";
 import "luxon";
-function g({
+import "../../utils/z-index.js";
+function C({
   percent: t,
   decimals: r = 2,
   showColor: e = !0,
@@ -15,5 +16,5 @@ function g({
   return /* @__PURE__ */ m("div", { className: n("font-medium", e ? t >= 90 ? "text-destructive" : t >= 70 ? "text-orange-500" : t >= 50 ? "text-yellow-600" : "text-green-600" : "", o), ...i, children: u(t, r) });
 }
 export {
-  g as PercentIndicator
+  C as PercentIndicator
 };