@gearbox-protocol/ui-kit 4.0.0-next.14 → 4.0.0-next.16

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,8 @@
+import { SdkStatusPillTest as r } from "./constants.js";
+import { sdkStatusDotVariant as s } from "./sdk-status.js";
+import { SdkStatusPill as e } from "./sdk-status-pill.js";
+export {
+  e as SdkStatusPill,
+  r as SdkStatusPillTest,
+  s as sdkStatusDotVariant
+};

package/dist/esm/components/sdk-status-pill/sdk-status-pill.js

@@ -0,0 +1,59 @@
+import { jsx as t } from "react/jsx-runtime";
+import { StatusDot as a } from "../status-dot/status-dot.js";
+import { SimpleTooltip as c } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { useIntlTyped as m } from "../typed-intl/index.js";
+import "react";
+import "@gearbox-protocol/sdk/common-utils";
+import { useMediaQuery as d } from "../../hooks/use-media-query.js";
+import { SdkStatusPillTest as e } from "./constants.js";
+import { sdkStatusDotVariant as l } from "./sdk-status.js";
+const p = "(hover: none)", u = {
+  loading: "components.sdkStatus.connecting",
+  ready: "components.sdkStatus.connected",
+  error: "components.sdkStatus.disconnected"
+};
+function M({
+  status: o
+}) {
+  const { formatMessage: s } = m(), i = !d(p), r = s({ messageId: u[o] }), n = (
+    // `<output>` rather than a span with role="status": same implicit live
+    // region, and the status is announced without the dot being focusable.
+    //
+    // The box is `size-6`, not the dot's 6px: a 6px hover/tap target is far
+    // under the 24px WCAG 2.5.8 minimum and genuinely hard to hit, while the
+    // dot itself has to stay small to keep the footer quiet.
+    //
+    // `-m-1.5` keeps that out of the layout in both axes, so the footer row
+    // keeps its height and the links do not shift.
+    /* @__PURE__ */ t(
+      "output",
+      {
+        className: "-m-1.5 flex size-6 cursor-pointer items-center justify-center",
+        "data-testid": e.root,
+        "aria-label": r,
+        children: /* @__PURE__ */ t(
+          a,
+          {
+            variant: l(o),
+            size: "xs",
+            pulse: o === "loading",
+            "data-testid": e.dot
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ t(
+    c,
+    {
+      title: n,
+      trigger: i ? "hover" : "click",
+      placement: "top",
+      children: /* @__PURE__ */ t("span", { className: "text-xs", "data-testid": e.tooltip, children: r })
+    }
+  );
+}
+export {
+  M as SdkStatusPill
+};

package/dist/esm/components/sdk-status-pill/sdk-status.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return t === "ready" ? "success" : "default";
+}
+export {
+  a as sdkStatusDotVariant
+};

package/dist/esm/components/with-copy/with-copy.js

@@ -128,10 +128,10 @@ import "../legal-agreement/legal-agreement-theme.js";
 import "../loader/loader.js";
 import "../loading/loading.js";
 import "../loading-bar/loading-bar.js";
+import "../status-dot/status-dot.js";
 import "../segmented-control/segmented-control.js";
 import "../separate-line/separate-line.js";
 import "../split-list/split-list.js";
-import "../status-dot/status-dot.js";
 import "../textarea/textarea.js";
 import "../theme-provider.js";
 function or({

package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js

@@ -1,25 +1,26 @@
-import { jsxs as a, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { PointsIcon as N } from "../points-icon/points-icon.js";
-import { TokenIcon as P } from "../token-icon/token-icon.js";
-import { SimpleTooltip as A } from "../tooltip/simple-tooltip.js";
+import { jsxs as a, jsx as e, Fragment as P } from "react/jsx-runtime";
+import { PointsIcon as A } from "../points-icon/points-icon.js";
+import { TokenIcon as I } from "../token-icon/token-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import { FormattedMessageTyped as s } from "../typed-intl/index.js";
 import "react";
-import { tokenRewardsOf as I, pointProgramsOf as B, totalApyOf as T } from "../../utils/apy-breakdown.js";
+import { tokenRewardsOf as B, pointProgramsOf as R, totalApyOf as $ } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk";
-import { bpsToPercent as $ } from "../../utils/bps.js";
+import { bpsToPercent as j } from "../../utils/bps.js";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import { formatLeverage as j } from "../../utils/format-leverage.js";
-import { formatCompactPercent as R } from "../../utils/format-money.js";
+import { formatLeverage as S } from "../../utils/format-leverage.js";
+import { formatCompactPercent as C } from "../../utils/format-money.js";
+import { strategyQuotaRate as O } from "../../utils/strategy-apy.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 function i(n) {
-  const o = $(n), r = R(Math.abs(o));
+  const o = j(n), r = C(Math.abs(o));
   return o < 0 ? `-${r}` : r;
 }
-function U({
+function L({
   supplyApy: n,
   maxLeverage: o,
   collateralApy: r,
@@ -28,7 +29,7 @@ function U({
   children: h,
   className: f
 }) {
-  const g = o !== void 0 && o > 0, l = r ?? n, w = I(l), y = B(n), b = T(n), d = c != null || u != null ? -((c ?? 0) + (u ?? 0)) : void 0, x = y.filter((t) => t.multiplier != null), v = /* @__PURE__ */ a(
+  const g = o !== void 0 && o > 0, l = r ?? n, y = B(l), w = R(n), b = $(n), v = c != null || u != null, k = O({ additionalBorrowApy: u, maxLeverage: o }), d = v ? -((c ?? 0) + k) : void 0, x = w.filter((t) => t.multiplier != null), N = /* @__PURE__ */ a(
     "div",
     {
       className: p(
@@ -46,7 +47,7 @@ function U({
             {
               messageId: "components.yieldBreakdown.titleNetAtLeverage",
               values: {
-                leverage: j(o)
+                leverage: S(o)
               }
             }
           ) : /* @__PURE__ */ e(s, { messageId: "components.apyParts.totalAPY" }) }),
@@ -69,7 +70,7 @@ function U({
             value: i(l.organicApy)
           }
         ),
-        w.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
+        y.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
           m,
           {
             muted: t.supplyApr < 0,
@@ -81,7 +82,7 @@ function U({
                   values: { symbol: t.token.symbol }
                 }
               ) }),
-              /* @__PURE__ */ e(P, { token: t.token, size: 20 })
+              /* @__PURE__ */ e(I, { token: t.token, size: 20 })
             ] }),
             value: i(t.supplyApr)
           },
@@ -95,7 +96,7 @@ function U({
             value: i(d)
           }
         ),
-        x.length > 0 && /* @__PURE__ */ a(k, { children: [
+        x.length > 0 && /* @__PURE__ */ a(P, { children: [
           /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
           x.map((t) => /* @__PURE__ */ e(
             m,
@@ -109,7 +110,7 @@ function U({
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  N,
+                  A,
                   {
                     reward: {
                       name: t.name,
@@ -128,7 +129,7 @@ function U({
     }
   );
   return /* @__PURE__ */ e(
-    A,
+    T,
     {
       placement: "bottom",
       triangle: !1,
@@ -137,7 +138,7 @@ function U({
       maxWidth: "100%",
       title: /* @__PURE__ */ e("span", { className: f, children: h }),
       triggerClassName: f,
-      children: v
+      children: N
     }
   );
 }
@@ -161,5 +162,5 @@ function m({
   ] });
 }
 export {
-  U as YieldBreakdownTooltip
+  L as YieldBreakdownTooltip
 };