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

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