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

package/dist/esm/components/app-bar/app-bar.js

@@ -0,0 +1,211 @@
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { faBars as u } from "@fortawesome/free-solid-svg-icons";
+import * as p from "react";
+import { Button as c } from "../buttons/button/button.js";
+import { FaIcon as x } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import { Z_INDEX as g } from "../../utils/z-index.js";
+const w = p.forwardRef(
+  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
+    "nav",
+    {
+      ref: o,
+      className: t(
+        "relative flex flex-row flex-nowrap items-center w-full",
+        "py-4 px-4 md:px-10",
+        e
+      ),
+      ...r,
+      children: a
+    }
+  )
+);
+w.displayName = "AppBar";
+const v = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: o,
+    className: t("flex flex-row flex-nowrap items-center gap-2", e),
+    ...r,
+    children: a
+  }
+));
+v.displayName = "AppBarSidePanel";
+const N = p.forwardRef(
+  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: o,
+      className: t(
+        "relative grow shrink-0 basis-[0%] flex justify-center self-end",
+        "px-0 md:px-3",
+        e
+      ),
+      ...r,
+      children: a
+    }
+  )
+);
+N.displayName = "AppBarCenter";
+const h = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: o,
+    className: t(
+      "absolute bottom-[-15px] [&>div>div]:overflow-visible whitespace-nowrap w-min",
+      "hidden md:block",
+      e
+    ),
+    ...r,
+    children: a
+  }
+));
+h.displayName = "AppBarCenterContent";
+const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className: o, ...s }, i) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: i,
+    className: t(
+      "relative text-[15px] leading-[125%] text-foreground cursor-pointer group/app-nav-item",
+      o
+    ),
+    ...s,
+    children: [
+      a && /* @__PURE__ */ n(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: t(
+            "absolute -top-[6px] -left-[13px]",
+            "w-[calc(100%+26px)] h-[calc(100%+12px)]",
+            "rounded-[15px]",
+            "group-hover/app-nav-item:bg-gray-40",
+            "transition-colors"
+          )
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "relative flex items-center", children: [
+        r,
+        e != null && /* @__PURE__ */ n(
+          "div",
+          {
+            className: t(
+              "ml-1.5 -mr-[7px] px-[7px] py-1",
+              "text-[9px] font-medium leading-[125%]",
+              "bg-gray-40 rounded-[10px]",
+              "group-hover/app-nav-item:bg-gray-80",
+              "transition-colors"
+            ),
+            children: e
+          }
+        )
+      ] })
+    ]
+  }
+));
+B.displayName = "AppBarNavItem";
+const f = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+}, m = {
+  sm: 12,
+  md: 14,
+  lg: 16
+}, y = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+  c,
+  {
+    ref: o,
+    variant: "outline",
+    size: f[e],
+    width: "compact",
+    className: t("inline-flex", a),
+    ...r,
+    children: /* @__PURE__ */ n(
+      x,
+      {
+        icon: u,
+        className: "text-foreground",
+        style: { width: m[e], height: m[e] }
+      }
+    )
+  }
+));
+y.displayName = "AppBarHamburgerButton";
+const b = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+  c,
+  {
+    ref: o,
+    variant: "outline",
+    size: f[e],
+    width: "compact",
+    className: t("inline-flex", a),
+    ...r,
+    children: /* @__PURE__ */ n(A, {})
+  }
+));
+b.displayName = "AppBarDotsButton";
+function A() {
+  return /* @__PURE__ */ d("span", { className: "inline-flex items-center justify-center gap-[2px]", children: [
+    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
+    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
+    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" })
+  ] });
+}
+const R = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, ...s }, i) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: i,
+    role: "menuitem",
+    tabIndex: 0,
+    className: t(
+      "flex w-full items-center",
+      "px-3 py-3",
+      "text-[0.875rem] leading-4.25 font-normal text-foreground",
+      "bg-transparent rounded-lg",
+      "cursor-pointer select-none",
+      "hover:bg-gray-80",
+      "transition-colors",
+      a
+    ),
+    onClick: r,
+    onKeyDown: (l) => {
+      (l.key === "Enter" || l.key === " ") && r?.(l), o?.(l);
+    },
+    ...s,
+    children: e
+  }
+));
+R.displayName = "AppBarMenuItem";
+const D = p.forwardRef(({ children: e, className: a, ...r }, o) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: o,
+    role: "menu",
+    className: t(
+      "mt-2 p-1 overflow-hidden min-w-40",
+      "bg-gray-40 rounded-xl",
+      "shadow-[0_2px_16px_rgba(0,0,0,0.6)]",
+      g.DROPDOWN,
+      a
+    ),
+    ...r,
+    children: e
+  }
+));
+D.displayName = "AppBarDropdownMenu";
+export {
+  w as AppBar,
+  N as AppBarCenter,
+  h as AppBarCenterContent,
+  b as AppBarDotsButton,
+  D as AppBarDropdownMenu,
+  y as AppBarHamburgerButton,
+  R as AppBarMenuItem,
+  B as AppBarNavItem,
+  v as AppBarSidePanel
+};

package/dist/esm/components/app-bar/index.js

@@ -0,0 +1,12 @@
+import { AppBar as e, AppBarCenter as a, AppBarCenterContent as t, AppBarDotsButton as B, AppBarDropdownMenu as n, AppBarHamburgerButton as A, AppBarMenuItem as o, AppBarNavItem as u, AppBarSidePanel as m } from "./app-bar.js";
+export {
+  e as AppBar,
+  a as AppBarCenter,
+  t as AppBarCenterContent,
+  B as AppBarDotsButton,
+  n as AppBarDropdownMenu,
+  A as AppBarHamburgerButton,
+  o as AppBarMenuItem,
+  u as AppBarNavItem,
+  m as AppBarSidePanel
+};

package/dist/esm/components/apy/apy.js

@@ -0,0 +1,32 @@
+import { jsx as t, Fragment as i } from "react/jsx-runtime";
+import { AlertBadge as p } from "../alert-badge/alert-badge.js";
+import { SimpleTooltip as n } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as l } from "../typed-intl/index.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { percentTemplate as s } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function y({
+  apy: r,
+  tooltip: m = /* @__PURE__ */ t(l, { messageId: "components.APY.tip" }),
+  naText: e = "N/A"
+}) {
+  const o = r !== null ? s(r) : e;
+  return m ? /* @__PURE__ */ t(
+    n,
+    {
+      placement: "bottom",
+      title: /* @__PURE__ */ t(p, { size: "sm", children: o }),
+      children: m
+    }
+  ) : /* @__PURE__ */ t(i, { children: o });
+}
+export {
+  y as Apy
+};

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

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

package/dist/esm/components/arc-loader/arc-loader.js

@@ -0,0 +1,73 @@
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { cva as C } from "class-variance-authority";
+import * as f from "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";
+const R = C(
+  "relative inline-flex items-center justify-center"
+), j = f.forwardRef(
+  ({
+    size: t = 24,
+    color: a = "currentColor",
+    strokeWidth: e = 2,
+    speed: $ = "1s",
+    className: y
+  }, u) => {
+    const c = f.useId().replace(/:/g, "-"), n = (t - e) / 2, r = t / 2, s = -90, x = 210, i = s * Math.PI / 180, l = (s + x) * Math.PI / 180, d = r + n * Math.cos(i), p = r + n * Math.sin(i), g = r + n * Math.cos(l), m = r + n * Math.sin(l), A = `M ${d} ${p} A ${n} ${n} 0 1 1 ${g} ${m}`, M = d / t * 100, L = p / t * 100, v = g / t * 100, w = m / t * 100;
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: u,
+        className: I(R(), y),
+        style: { width: t, height: t },
+        children: /* @__PURE__ */ h(
+          "svg",
+          {
+            className: "absolute origin-center animate-spin",
+            width: t,
+            height: t,
+            viewBox: `0 0 ${t} ${t}`,
+            style: { animationDuration: $ },
+            role: "img",
+            "aria-label": "Loading",
+            children: [
+              /* @__PURE__ */ o("title", { children: "Loading" }),
+              /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ h(
+                "linearGradient",
+                {
+                  id: c,
+                  x1: `${M}%`,
+                  y1: `${L}%`,
+                  x2: `${v}%`,
+                  y2: `${w}%`,
+                  children: [
+                    /* @__PURE__ */ o("stop", { offset: "0%", stopColor: a, stopOpacity: "0.01" }),
+                    /* @__PURE__ */ o("stop", { offset: "100%", stopColor: a, stopOpacity: "1" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ o(
+                "path",
+                {
+                  d: A,
+                  fill: "none",
+                  stroke: `url(#${c})`,
+                  strokeWidth: e,
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+j.displayName = "ArcLoader";
+export {
+  j as ArcLoader
+};

package/dist/esm/components/arc-loader/index.js

@@ -0,0 +1,4 @@
+import { ArcLoader as e } from "./arc-loader.js";
+export {
+  e as ArcLoader
+};

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

@@ -0,0 +1,95 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import * as G from "react";
+import { Description as n } from "../description/description.js";
+import { ShortString as h } from "../short-string/short-string.js";
+import { GridTableRow as I, GridTableCell as p } from "../table/grid-table.js";
+import { TokenSymbol as E } from "../token-symbol/token-symbol.js";
+import { VSpace as x } from "../vspace/vspace.js";
+import "@gearbox-protocol/sdk";
+import { cn as Z } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const _ = {
+  default: 24,
+  sm: 20,
+  md: 24,
+  lg: 28
+}, g = {
+  default: 0,
+  sm: 2,
+  md: 4,
+  lg: 4
+}, O = G.forwardRef(
+  ({
+    token: o,
+    tokenLabel: N,
+    tokenDescription: l,
+    network: S,
+    chainId: u,
+    value: s,
+    valueDescription: m,
+    size: e = "default",
+    iconSize: w = e,
+    gapSize: c = e,
+    last: R,
+    symbolMaxLength: b,
+    descriptionMaxLength: L,
+    onSelect: d,
+    hideValue: f = !1,
+    rounded: T = !0,
+    className: j,
+    height: y,
+    ...A
+  }, C) => {
+    const i = N || o?.title, a = e === "md" ? "default" : e;
+    return /* @__PURE__ */ t(
+      I,
+      {
+        ...A,
+        ref: C,
+        className: Z(d && "cursor-pointer", j),
+        onRowClick: d,
+        cols: f ? "1fr" : "1fr 1fr",
+        noRound: !T,
+        last: R,
+        height: y,
+        children: [
+          /* @__PURE__ */ r(p, { size: a, className: "text-left", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ r(
+              E,
+              {
+                token: o,
+                size: _[w],
+                chainId: u,
+                network: S
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
+              i && /* @__PURE__ */ r(h, { maxLength: b, children: i }),
+              i && l && /* @__PURE__ */ r(x, { height: g[c] }),
+              l && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(
+                h,
+                {
+                  maxLength: L,
+                  showTooltip: !1,
+                  children: String(l)
+                }
+              ) })
+            ] })
+          ] }) }),
+          !f && /* @__PURE__ */ r(p, { size: a, className: "text-right", children: /* @__PURE__ */ t("div", { className: "w-full flex flex-col items-end justify-end", children: [
+            s,
+            s && m && /* @__PURE__ */ r(x, { height: g[c] }),
+            m && /* @__PURE__ */ r(n, { children: m })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+O.displayName = "AssetLine";
+export {
+  O as AssetLine
+};

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

@@ -0,0 +1,4 @@
+import { AssetLine as r } from "./asset-line.js";
+export {
+  r as AssetLine
+};