@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.11

package/dist/esm/components/navbar/navbar-with-overflow.js

@@ -1,181 +0,0 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { faChevronDown as D } from "@fortawesome/free-solid-svg-icons";
-import { useRef as W, useState as g, useCallback as P, useEffect as k } from "react";
-import { AppBarDropdownMenu as S, AppBarMenuItem as B } from "../app-bar/app-bar.js";
-import { NavbarIndicatorProvider as X, useNavbarIndicator as F } from "./navbar-indicator-context.js";
-import { NavItem as R } from "../navitem/navitem.js";
-import { SimpleDropdown as G } from "../simple-dropdown/simple-dropdown.js";
-import "@gearbox-protocol/sdk";
-import { cn as T } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-import { FaIcon as V } from "../icons/fa-icon.js";
-const b = 40;
-function _({
-  visibleItems: t,
-  overflowItems: a,
-  showMore: m,
-  moreOpen: i,
-  setMoreOpen: s,
-  moreLabel: c,
-  measured: p
-}) {
-  const f = F();
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      ref: f?.containerRef,
-      className: "relative flex items-center gap-10 max-xs:gap-8 h-full",
-      style: { opacity: p ? 1 : 0 },
-      children: [
-        t.map((r) => /* @__PURE__ */ n(
-          R,
-          {
-            active: r.active,
-            onClick: r.onClick,
-            style: { cursor: "pointer" },
-            children: r.label
-          },
-          r.id
-        )),
-        m && /* @__PURE__ */ n(
-          G,
-          {
-            open: i,
-            onOpenChange: s,
-            title: /* @__PURE__ */ n(
-              R,
-              {
-                active: a.some((r) => r.active),
-                badge: /* @__PURE__ */ n(
-                  V,
-                  {
-                    icon: D,
-                    className: "size-3 text-foreground ml-1 transition-transform duration-200",
-                    style: {
-                      transform: i ? "rotate(180deg)" : void 0
-                    }
-                  }
-                ),
-                children: c
-              }
-            ),
-            asChild: !0,
-            align: "end",
-            className: "p-0 border-0 bg-transparent shadow-none",
-            children: /* @__PURE__ */ n(S, { children: a.map((r) => /* @__PURE__ */ n(B, { onClick: r.onClick, children: r.label }, r.id)) })
-          }
-        ),
-        /* @__PURE__ */ n(
-          "div",
-          {
-            ref: f?.indicatorRef,
-            className: "absolute bottom-0 h-0.5 bg-accent transition-all duration-300 ease-out pointer-events-none",
-            style: {
-              left: 0,
-              width: 0,
-              opacity: 0,
-              transform: "translateX(0)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function ie({
-  items: t,
-  moreLabel: a = "More",
-  className: m
-}) {
-  const i = W(null), s = W(null), [c, p] = g(t.length), [f, r] = g(!1), [O, w] = g(!1), d = P(() => {
-    const o = i.current, l = s.current;
-    if (!o || !l || t.length === 0) return;
-    const u = o.clientWidth;
-    if (u <= 0) return;
-    const N = Array.from(l.children), v = N.slice(0, t.length).map((e) => e.offsetWidth), j = N[t.length]?.offsetWidth ?? 60;
-    if (v.every((e) => e === 0)) return;
-    let y = 0;
-    for (let e = 0; e < t.length; e++)
-      y += (e === 0 ? 0 : b) + v[e];
-    if (y <= u) {
-      p(t.length), w(!0);
-      return;
-    }
-    let C = 0, I = 0;
-    for (let e = 0; e < t.length; e++) {
-      const z = v[e], M = C + (e === 0 ? 0 : b) + z;
-      if (M + b + j > u) break;
-      C = M, I = e + 1;
-    }
-    p(I), w(!0);
-  }, [t]);
-  k(() => {
-    d();
-  }, [d]), k(() => {
-    const o = i.current;
-    if (!o) return;
-    const l = new ResizeObserver(d);
-    return l.observe(o), () => l.disconnect();
-  }, [d]);
-  const A = t.slice(0, c), x = t.slice(c), E = x.length > 0;
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      ref: i,
-      className: T(
-        "relative flex-1 min-w-0 h-full flex items-center justify-center",
-        m
-      ),
-      children: [
-        /* @__PURE__ */ h(
-          "div",
-          {
-            ref: s,
-            "aria-hidden": !0,
-            style: {
-              position: "absolute",
-              visibility: "hidden",
-              height: 0,
-              overflow: "hidden",
-              whiteSpace: "nowrap",
-              pointerEvents: "none"
-            },
-            className: "flex items-center gap-10 max-xs:gap-8",
-            children: [
-              t.map((o) => /* @__PURE__ */ n(
-                "span",
-                {
-                  className: "inline-flex items-center whitespace-nowrap text-[15px] leading-[125%]",
-                  children: o.label
-                },
-                o.id
-              )),
-              /* @__PURE__ */ h("span", { className: "inline-flex items-center whitespace-nowrap text-[15px] leading-[125%] gap-2", children: [
-                a,
-                /* @__PURE__ */ n("span", { className: "size-3" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(
-          _,
-          {
-            visibleItems: A,
-            overflowItems: x,
-            showMore: E,
-            moreOpen: f,
-            setMoreOpen: r,
-            moreLabel: a,
-            measured: O
-          }
-        ) })
-      ]
-    }
-  );
-}
-export {
-  ie as NavbarWithOverflow
-};

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

@@ -1,99 +0,0 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import * as n from "react";
-import "@gearbox-protocol/sdk";
-import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-import { NavbarIndicatorProvider as p, useNavbarIndicator as v } from "./navbar-indicator-context.js";
-const u = d("flex items-center bg-background min-w-0", {
-  variants: {
-    variant: {
-      default: "justify-between",
-      centered: "justify-center",
-      left: "justify-start",
-      right: "justify-end"
-    },
-    size: {
-      sm: "h-12 px-4",
-      default: "h-full px-6",
-      lg: "h-20 px-8"
-    },
-    sticky: {
-      true: "sticky top-0 z-50",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-    sticky: !1
-  }
-}), b = ({ containerClassName: a, children: e }) => {
-  const t = v();
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      ref: t?.containerRef,
-      className: o(
-        "flex items-center gap-10 max-xs:gap-8 flex-1 h-full relative overflow-x-auto overflow-y-hidden",
-        "md:justify-center md:overflow-x-visible",
-        "px-1 pb-1 md:px-4 md:pb-0",
-        "navbar-scrollbar",
-        a
-      ),
-      children: [
-        e,
-        /* @__PURE__ */ r(
-          "div",
-          {
-            ref: t?.indicatorRef,
-            className: "absolute bottom-0 h-0.5 bg-accent transition-all duration-300 ease-out pointer-events-none",
-            style: {
-              left: 0,
-              width: 0,
-              opacity: 0,
-              transform: "translateX(0)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}, x = n.forwardRef(
-  ({
-    className: a,
-    variant: e,
-    size: t,
-    sticky: i,
-    containerClassName: s,
-    children: l,
-    ...f
-  }, m) => /* @__PURE__ */ r(
-    "nav",
-    {
-      ref: m,
-      className: o(u({ variant: e, size: t, sticky: i, className: a })),
-      ...f,
-      children: /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(b, { containerClassName: s, children: l }) })
-    }
-  )
-);
-x.displayName = "Navbar";
-const N = n.forwardRef(({ className: a, children: e, ...t }, i) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: i,
-    className: o("flex items-center gap-1 min-w-max", a),
-    ...t,
-    children: e
-  }
-));
-N.displayName = "NavbarNav";
-export {
-  x as Navbar,
-  N as NavbarNav,
-  u as navbarVariants
-};

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

@@ -1,5 +0,0 @@
-import { NavItem as e, navitemVariants as m } from "./navitem.js";
-export {
-  e as NavItem,
-  m as navitemVariants
-};

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

@@ -1,124 +0,0 @@
-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 I } from "../navbar/navbar-indicator-context.js";
-import "@gearbox-protocol/sdk";
-import { cn as l } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-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 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: "px-3 text-xs",
-        default: "",
-        lg: "px-5 text-base",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-), y = /* @__PURE__ */ new Set(["default", "active", "ghost"]), E = t.forwardRef(
-  ({
-    className: f,
-    variant: v,
-    size: m,
-    asChild: p = !1,
-    active: a = !1,
-    icon: d,
-    badge: c,
-    external: i = !1,
-    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]);
-    const u = e ? "default" : a ? "active" : v ?? "default", N = y.has(u);
-    return /* @__PURE__ */ s(
-      b,
-      {
-        ref: n,
-        className: l(
-          R({
-            variant: u,
-            size: m,
-            className: f
-          })
-        ),
-        "data-active": a,
-        target: i ? "_blank" : void 0,
-        rel: i ? "noopener noreferrer" : void 0,
-        ...x,
-        children: [
-          N && /* @__PURE__ */ o(
-            "div",
-            {
-              "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"
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
-E.displayName = "NavItem";
-export {
-  E as NavItem,
-  R as navitemVariants
-};

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

@@ -1,6 +0,0 @@
-import { PageTitle as t, pageTitleRootVariants as i, pageTitleVariants as o } from "./page-title.js";
-export {
-  t as PageTitle,
-  i as pageTitleRootVariants,
-  o as pageTitleVariants
-};

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

@@ -1,120 +0,0 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { cva as o } from "class-variance-authority";
-import * as b from "react";
-import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-const A = o(
-  "font-semibold leading-tight tracking-tight flex items-center gap-2",
-  {
-    variants: {
-      size: {
-        sm: "text-xl md:text-2xl",
-        default: "text-[16px] md:text-[26px]",
-        lg: "text-3xl md:text-4xl",
-        xl: "text-4xl md:text-5xl"
-      },
-      variant: {
-        default: "text-foreground",
-        primary: "text-primary",
-        muted: "text-muted-foreground",
-        gradient: "bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent"
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      variant: "default"
-    }
-  }
-), T = o(
-  "flex flex-col md:flex-row items-start md:items-center",
-  {
-    variants: {
-      spacing: {
-        sm: "gap-2",
-        default: "gap-4",
-        lg: "gap-6"
-      }
-    },
-    defaultVariants: {
-      spacing: "default"
-    }
-  }
-), V = b.forwardRef(
-  ({
-    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", R = i ? s(
-      "shrink-0 items-center gap-2",
-      e ? "flex" : "hidden",
-      a ? "md:flex" : "md:hidden"
-    ) : "shrink-0 flex items-center gap-2", k = i ? !0 : !e, C = i ? !0 : e;
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: N,
-        className: s(
-          "w-full flex items-center gap-4",
-          n ? "flex-col items-start" : "flex-row items-center",
-          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 && k && /* @__PURE__ */ t("div", { className: j, children: l })
-                ] }),
-                c && /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground mt-1", children: c })
-              ] })
-            ] }) }),
-            l && C && /* @__PURE__ */ t("div", { className: R, children: l })
-          ] })
-        ]
-      }
-    );
-  }
-);
-V.displayName = "PageTitle";
-export {
-  V as PageTitle,
-  T as pageTitleRootVariants,
-  A as pageTitleVariants
-};

package/dist/esm/components/pool-apy-tooltip/apy-tooltip.js

@@ -1,154 +0,0 @@
-import { jsxs as s, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { faPlus as b } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as g } from "../icons/fa-icon.js";
-import { PointsIcon as u } from "../points-icon/points-icon.js";
-import { TokenIcon as h } from "../token-icon/token-icon.js";
-import { SimpleTooltip as y } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as o } from "../typed-intl/index.js";
-import { VerticalIndicator as a } from "../vertical-indicator/vertical-indicator.js";
-import "react";
-import { positiveTokenRewardsOf as v, pointProgramsOf as P, totalApyOf as N } from "../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk";
-import { bpsToPercent as l } from "../../utils/bps.js";
-import { cn as p } from "../../utils/cn.js";
-import "sonner";
-import { percentTemplate as i } from "../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-function B({ apy: r, children: c, className: m }) {
-  const d = v(r), n = P(r), f = /* @__PURE__ */ s(
-    "div",
-    {
-      className: p(
-        "w-[370px] max-w-[calc(100vw-32px)] p-6",
-        "bg-popover",
-        "border border-border",
-        "rounded-lg",
-        "shadow-[0_4px_28px_4px_rgba(0,0,0,0.15)]",
-        "text-left font-normal"
-      ),
-      children: [
-        /* @__PURE__ */ s("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ e(
-            a,
-            {
-              size: "sm",
-              label: /* @__PURE__ */ e(
-                o,
-                {
-                  messageId: "components.apyParts.supplyAPY"
-                }
-              ),
-              description: /* @__PURE__ */ e(
-                o,
-                {
-                  messageId: "components.apyParts.supplyAPY.tip"
-                }
-              ),
-              value: i(l(r.organicApy))
-            }
-          ),
-          d.map((t) => /* @__PURE__ */ e(
-            a,
-            {
-              size: "sm",
-              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center", children: [
-                /* @__PURE__ */ e(
-                  o,
-                  {
-                    messageId: "components.apyParts.extraAPY",
-                    values: { symbol: t.token.symbol }
-                  }
-                ),
-                /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(h, { token: t.token, size: 14 }) })
-              ] }),
-              description: /* @__PURE__ */ e(
-                o,
-                {
-                  messageId: "components.apyParts.extraAPY.tip"
-                }
-              ),
-              value: i(l(t.supplyApr ?? 0))
-            },
-            `extra-${t.token.address}-${t.supplyApr ?? 0}`
-          ))
-        ] }),
-        /* @__PURE__ */ e("div", { className: "my-5 border-t border-border" }),
-        /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ e(
-          a,
-          {
-            size: "sm",
-            label: /* @__PURE__ */ e("span", { className: "font-bold", children: /* @__PURE__ */ e(
-              o,
-              {
-                messageId: "components.apyParts.totalAPY"
-              }
-            ) }),
-            value: i(l(N(r)))
-          }
-        ) }),
-        n.length > 0 && /* @__PURE__ */ s(x, { children: [
-          /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
-            "div",
-            {
-              className: p(
-                "absolute -top-2.5 left-1/2 -translate-x-1/2",
-                "w-5 h-5",
-                "flex items-center justify-center",
-                "rounded-full",
-                "bg-gray-20"
-              ),
-              children: /* @__PURE__ */ e(g, { icon: b, className: "size-2.5 text-white" })
-            }
-          ) }),
-          /* @__PURE__ */ e("div", { className: "h-6" }),
-          /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: n.map((t) => /* @__PURE__ */ e(
-            a,
-            {
-              size: "sm",
-              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center", children: [
-                /* @__PURE__ */ e(
-                  o,
-                  {
-                    messageId: "components.apyParts.points",
-                    values: { symbol: t.name }
-                  }
-                ),
-                /* @__PURE__ */ e("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ e(
-                  u,
-                  {
-                    reward: {
-                      name: t.name,
-                      type: t.id
-                    },
-                    size: 16
-                  }
-                ) })
-              ] }),
-              value: t.multiplier != null ? `${t.multiplier}x` : "—"
-            },
-            `points-${t.id}`
-          )) })
-        ] })
-      ]
-    }
-  );
-  return /* @__PURE__ */ e(
-    y,
-    {
-      placement: "bottom",
-      triangle: !1,
-      type: "modal-tooltip",
-      minWidth: "100%",
-      maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: m, children: c }),
-      triggerClassName: m,
-      children: f
-    }
-  );
-}
-export {
-  B as ApyTooltip
-};

package/dist/esm/components/pool-apy-tooltip/index.js

@@ -1,4 +0,0 @@
-import { ApyTooltip as r } from "./apy-tooltip.js";
-export {
-  r as ApyTooltip
-};