@gearbox-protocol/ui-kit 4.0.0-next.13 → 4.0.0-next.15

package/dist/esm/components/layout/app-footer/app-footer.js

@@ -1,37 +1,34 @@
-import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
-import * as d from "react";
-import { BlockSyncPill as x } from "../../block-sync-pill/block-sync-pill.js";
-import { cn as h } from "../../../utils/cn.js";
-const u = [
+import { jsx as e, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as f } from "../../../utils/cn.js";
+const d = [
   { label: "Docs", href: "https://docs.gearbox.finance" },
   { label: "Support", href: "https://discord.com/invite/gearbox" },
   { label: "Terms", href: "https://gearbox.finance/terms" },
   { label: "Privacy Policy", href: "https://gearbox.finance/privacy" }
-], g = d.forwardRef(
+], x = i.forwardRef(
   ({
-    links: o = u,
+    links: o = d,
     copyright: s,
     year: l = (/* @__PURE__ */ new Date()).getFullYear(),
-    showStatus: c = !0,
-    statusLabel: m = "Status",
-    blockSyncProps: t,
-    className: n,
-    ...i
-  }, p) => /* @__PURE__ */ e(
+    status: a,
+    className: c,
+    ...n
+  }, m) => /* @__PURE__ */ e(
     "footer",
     {
-      ref: p,
-      className: h(
+      ref: m,
+      className: f(
         "border-t border-border/60 px-4 sm:px-6 lg:px-8",
-        n
+        c
       ),
-      ...i,
-      children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
-        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ a(f, { children: [
+      ...n,
+      children: /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
+        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ t(p, { children: [
           "© Gearbox Protocol, ",
           l
         ] }) }),
-        c && t ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: /* @__PURE__ */ e(x, { ...t, statusLabel: m }) }) : null,
+        a ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: a }) : null,
         /* @__PURE__ */ e("nav", { className: "order-3 flex w-full flex-wrap items-center justify-center gap-4 sm:order-2 sm:ml-auto sm:w-auto sm:justify-start", children: o.map((r) => /* @__PURE__ */ e(
           "a",
           {
@@ -47,8 +44,8 @@ const u = [
     }
   )
 );
-g.displayName = "AppFooter";
+x.displayName = "AppFooter";
 export {
-  g as AppFooter,
-  u as DEFAULT_APP_FOOTER_LINKS
+  x as AppFooter,
+  d as DEFAULT_APP_FOOTER_LINKS
 };

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({