@gearbox-protocol/ui-kit 2.1.0-next.1

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

@@ -0,0 +1,30 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function x({
+  icon: e,
+  message: r,
+  className: i
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: m(
+        "flex w-full flex-col items-center justify-center gap-4 py-8",
+        i
+      ),
+      children: [
+        e && /* @__PURE__ */ t("div", { className: "flex items-center justify-center text-muted-foreground opacity-50", children: e }),
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-center text-center text-lg text-muted-foreground", children: r })
+      ]
+    }
+  );
+}
+export {
+  x as NotFound
+};

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

@@ -0,0 +1,5 @@
+import { OptionsItem as i, OptionsList as p } from "./options-list.js";
+export {
+  i as OptionsItem,
+  p as OptionsList
+};

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

@@ -0,0 +1,52 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function g({
+  className: t,
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ e("div", { className: i("m-0 p-0 w-full flex flex-wrap", t), ...r, children: o });
+}
+function v({
+  icon: t,
+  title: o,
+  subTitle: r,
+  onClick: a,
+  endingIcon: l,
+  last: s = !1,
+  className: n
+}) {
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      type: "button",
+      onClick: a,
+      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",
+        "hover:after:hidden",
+        n
+      ),
+      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 }),
+          r && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: r })
+        ] }) }),
+        l && /* @__PURE__ */ e("div", { className: "ml-4 text-muted-foreground transition-colors", children: l })
+      ]
+    }
+  );
+}
+export {
+  v as OptionsItem,
+  g as OptionsList
+};

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

@@ -0,0 +1,5 @@
+import { Overflow as e, OverflowWrap as f } from "./overflow.js";
+export {
+  e as Overflow,
+  f as OverflowWrap
+};

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

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

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

@@ -0,0 +1,4 @@
+import { OverflowContainer as e } from "./overflow-container.js";
+export {
+  e as OverflowContainer
+};

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

@@ -0,0 +1,51 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+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";
+const m = {
+  default: "rounded-lg",
+  small: "rounded-[8px]"
+}, u = {
+  default: "border border-gray-20",
+  light: "border border-gray-50",
+  none: ""
+};
+function w({
+  children: o,
+  maxHeight: e,
+  minHeight: p = e,
+  size: d = "default",
+  borderColor: s = "default",
+  outerPadding: a = "14px 12px 14px 0",
+  innerPadding: l = "0 22px 0 16px",
+  className: i,
+  overflowContainerClassName: n
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: t(
+        "pt-3.5 pr-3 pl-0 pb-3.5",
+        m[d],
+        u[s],
+        i
+      ),
+      style: { padding: a },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: t("overflow-y-auto w-full", n),
+          style: { maxHeight: e, minHeight: p },
+          children: l !== null ? /* @__PURE__ */ r("div", { style: { padding: l }, children: o }) : o
+        }
+      )
+    }
+  );
+}
+export {
+  w as OverflowContainer
+};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,120 @@
+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/percent-indicator/index.js

@@ -0,0 +1,4 @@
+import { PercentIndicator as o } from "./percent-indicator.js";
+export {
+  o as PercentIndicator
+};

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

@@ -0,0 +1,36 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { Progress as c } from "../progress/progress.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as l } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const x = (r) => r >= 90 ? "danger" : r >= 70 ? "warning" : r >= 50 ? "info" : "success";
+function M({
+  percent: r,
+  decimals: e = 2,
+  showColor: o = !0,
+  showProgressBar: s = !0,
+  className: n,
+  ...m
+}) {
+  const a = () => o ? r >= 90 ? "text-destructive" : r >= 70 ? "text-warning" : r >= 50 ? "text-foreground" : "text-success" : "", u = Math.min(100, Math.max(0, r));
+  return /* @__PURE__ */ f("div", { className: i("flex min-w-0 flex-col gap-1", n), ...m, children: [
+    /* @__PURE__ */ t("div", { className: i("font-medium", a()), children: l(r, e) }),
+    s && /* @__PURE__ */ t(
+      c,
+      {
+        value: u,
+        variant: x(r),
+        size: "sm",
+        className: "w-16 shrink-0"
+      }
+    )
+  ] });
+}
+export {
+  M as PercentIndicator
+};

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

@@ -0,0 +1,4 @@
+import { PointsIcon as r } from "./points-icon.js";
+export {
+  r as PointsIcon
+};

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

@@ -0,0 +1,40 @@
+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";
+const g = f.forwardRef(
+  ({
+    reward: t,
+    size: o = 24,
+    staticBaseUrl: r,
+    rounded: n = !1,
+    className: i,
+    style: a,
+    fit: m = "contain",
+    ...e
+  }, s) => {
+    const c = d(r)(
+      `/points/${t.type.toLowerCase()}.svg`
+    );
+    return /* @__PURE__ */ p(
+      l,
+      {
+        className: i,
+        ref: s,
+        src: c,
+        width: o,
+        height: o,
+        size: o,
+        rounded: n,
+        fit: m,
+        alt: t.name,
+        style: a,
+        ...e
+      }
+    );
+  }
+);
+g.displayName = "PointsIcon";
+export {
+  g as PointsIcon
+};

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

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

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

@@ -0,0 +1,251 @@
+import { jsx as e, jsxs as o, Fragment as x } from "react/jsx-runtime";
+import { faPlus as N } from "@fortawesome/free-solid-svg-icons";
+import { IconLighting as T } from "@gearbox-protocol/static";
+import { getRewardTokenSymbol as k } from "../compound-apy/compound-apy.js";
+import { FaIcon as S } from "../icons/fa-icon.js";
+import { PointsIcon as _ } from "../points-icon/points-icon.js";
+import { Skeleton as z } from "../skeleton/skeleton.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as y } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as r } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { TokenIcon as C } from "../token-icon/token-icon.js";
+import { SimpleTooltip as Y } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as n } from "../typed-intl/index.js";
+import { VerticalIndicator as l } from "../vertical-indicator/vertical-indicator.js";
+import { VerticalList as u } from "../vertical-list/vertical-list.js";
+const A = {
+  supplyAPY: "components.apyParts.supplyAPY",
+  tokenYield: "components.apyParts.tokenYield"
+}, L = {
+  supplyAPY: "components.apyParts.supplyAPY.tip",
+  tokenYield: "components.apyParts.tokenYield.tip"
+}, v = {
+  deposit: void 0,
+  "cross-chain-deposit": "components.apyParts.points.condition.crossDeposit",
+  holding: void 0
+};
+function $({ children: d }) {
+  return /* @__PURE__ */ e("div", { className: "w-[110px] grid grid-cols-2 items-end text-end", children: d });
+}
+function ne({
+  children: d,
+  totalAPY: f,
+  baseAPY: c,
+  extraAPY: h,
+  points: s,
+  apy7DAgo: a,
+  externalAPY: m,
+  tokensList: I,
+  className: g
+}) {
+  if (!(f !== void 0 || c && c.length > 0 || h && h.length > 0 || s && s.length > 0))
+    return /* @__PURE__ */ e("span", { className: g, children: d });
+  const P = !a || a.totalAPYLoading || a.loading7DAgo, b = !!a, p = (t, i) => b ? /* @__PURE__ */ o($, { children: [
+    /* @__PURE__ */ e("span", { children: t }),
+    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: P, children: i }) })
+  ] }) : t, w = /* @__PURE__ */ o(
+    "div",
+    {
+      className: y(
+        "w-[370px] 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__ */ o(u, { children: [
+          b && /* @__PURE__ */ e(
+            l,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ e("span", { className: "uppercase text-muted-foreground text-xs", children: /* @__PURE__ */ e(
+                n,
+                {
+                  messageId: "components.apyParts.title"
+                }
+              ) }),
+              value: /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: p("1D", "7D") })
+            }
+          ),
+          c?.map((t, i) => /* @__PURE__ */ e(
+            l,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ e(n, { messageId: A[t.type] }),
+              description: /* @__PURE__ */ e(
+                n,
+                {
+                  messageId: L[t.type]
+                }
+              ),
+              value: p(
+                r(t.apy),
+                r(a?.baseAPY?.[i]?.apy || 0)
+              )
+            },
+            `base-${t.type}-${t.apy}`
+          )),
+          h?.map((t) => {
+            const i = I?.[t.rewardToken];
+            return /* @__PURE__ */ e(
+              l,
+              {
+                size: "sm",
+                label: /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
+                  /* @__PURE__ */ e(
+                    n,
+                    {
+                      messageId: "components.apyParts.extraAPY",
+                      values: { symbol: t.rewardTokenSymbol }
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(
+                    C,
+                    {
+                      symbol: k(i, t.rewardTokenSymbol),
+                      size: 14
+                    }
+                  ) })
+                ] }),
+                description: /* @__PURE__ */ e(
+                  n,
+                  {
+                    messageId: "components.apyParts.extraAPY.tip"
+                  }
+                ),
+                value: p(
+                  r(t.apy),
+                  r(t.apy)
+                )
+              },
+              `extra-${t.rewardToken}-${t.apy}`
+            );
+          })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "my-5 border-t border-border" }),
+        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+          l,
+          {
+            size: "sm",
+            label: /* @__PURE__ */ e("span", { className: "font-bold", children: /* @__PURE__ */ e(
+              n,
+              {
+                messageId: "components.apyParts.totalAPY"
+              }
+            ) }),
+            value: p(
+              r(f || 0),
+              r(a?.totalAPY || 0)
+            )
+          }
+        ) }),
+        m && /* @__PURE__ */ e(
+          "div",
+          {
+            className: y(
+              "mt-5 px-8 pt-[18px] pb-4",
+              "rounded-[10px]",
+              "text-[13px] leading-[120%] text-center",
+              "border border-dashed border-gray-40"
+            ),
+            children: /* @__PURE__ */ e(
+              n,
+              {
+                messageId: m.tooltip,
+                values: {
+                  name: m.name,
+                  value: /* @__PURE__ */ o(x, { children: [
+                    /* @__PURE__ */ e("span", { className: "text-gray-90 mr-1.5", children: /* @__PURE__ */ e(T, { size: 14, style: { verticalAlign: "top" } }) }),
+                    /* @__PURE__ */ o("span", { className: "font-bold", children: [
+                      "+",
+                      r(m.apy)
+                    ] })
+                  ] })
+                }
+              }
+            )
+          }
+        ),
+        s && s.length > 0 && /* @__PURE__ */ o(x, { children: [
+          /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: y(
+                "absolute -top-[10px] left-0",
+                "w-5 h-5",
+                "flex items-center justify-center",
+                "rounded-full",
+                "bg-gray-20"
+              ),
+              children: /* @__PURE__ */ e(S, { icon: N, className: "size-2.5 text-white" })
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "h-6" }),
+          /* @__PURE__ */ e(u, { children: s.map((t) => /* @__PURE__ */ e(
+            l,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
+                /* @__PURE__ */ e(
+                  n,
+                  {
+                    messageId: "components.apyParts.points",
+                    values: { symbol: t.name }
+                  }
+                ),
+                t.reward && /* @__PURE__ */ e("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ e(
+                  _,
+                  {
+                    reward: {
+                      name: t.reward.name || t.name,
+                      type: t.reward.type || t.name.toLowerCase()
+                    },
+                    size: 16
+                  }
+                ) })
+              ] }),
+              description: /* @__PURE__ */ o("div", { children: [
+                /* @__PURE__ */ e("div", { children: `Per ${[
+                  ...t.reward?.duration ? [t.reward.duration] : [],
+                  ...t.tokenTitle ? [`1 ${t.tokenTitle}`] : []
+                ].join(" per ")}` }),
+                t.reward?.condition && v[t.reward.condition] && /* @__PURE__ */ e("span", { className: "text-warning", children: /* @__PURE__ */ e(
+                  n,
+                  {
+                    messageId: v[t.reward.condition]
+                  }
+                ) })
+              ] }),
+              value: t.amount
+            },
+            `points-${t.name}-${t.amount}`
+          )) })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    Y,
+    {
+      placement: "bottom",
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: "100%",
+      maxWidth: "100%",
+      title: /* @__PURE__ */ e("span", { className: g, children: d }),
+      triggerClassName: g,
+      children: w
+    }
+  );
+}
+export {
+  ne as PoolAPYTooltip
+};

package/dist/esm/components/pool-indicator-icon/index.js

@@ -0,0 +1,4 @@
+import { PoolIndicatorIcon as c } from "./pool-indicator-icon.js";
+export {
+  c as PoolIndicatorIcon
+};