@gearbox-protocol/ui-kit 4.0.0-next.2 → 4.0.0-next.20

package/dist/esm/components/infinite-scroll/index.js

@@ -0,0 +1,4 @@
+import { InfiniteScrollWrapper as o } from "./infinite-scroll-wrapper.js";
+export {
+  o as InfiniteScrollWrapper
+};

package/dist/esm/components/infinite-scroll/infinite-scroll-wrapper.js

@@ -0,0 +1,30 @@
+import { jsxs as r, Fragment as a, jsx as e } from "react/jsx-runtime";
+import { DialogContainer as l } from "../dialog/dialog-container.js";
+import { FormattedMessageTyped as p } from "../typed-intl/index.js";
+import { Typography as s } from "../typography/typography.js";
+import { VSpace as m } from "../vspace/vspace.js";
+function g({
+  hasMore: o,
+  dataLength: t,
+  children: i,
+  onNextLoad: n
+}) {
+  return /* @__PURE__ */ r("div", { className: "w-full", children: [
+    i,
+    o && t > 0 && /* @__PURE__ */ r(a, { children: [
+      /* @__PURE__ */ e(m, { size: "md" }),
+      /* @__PURE__ */ e(l, { padding: !1, children: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: n,
+          className: "flex w-full cursor-pointer items-center justify-center gap-2 p-3.5 hover:text-white",
+          children: /* @__PURE__ */ e(s, { as: "span", variant: "bodySmall", color: "secondary", children: /* @__PURE__ */ e(p, { messageId: "components.infiniteScrollWrapper.showMore" }) })
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  g as InfiniteScrollWrapper
+};

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/name-cell/index.js

@@ -0,0 +1,4 @@
+import { NameCell as m } from "./name-cell.js";
+export {
+  m as NameCell
+};

package/dist/esm/components/name-cell/name-cell.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Typography as l } from "../typography/typography.js";
+function f({
+  title: c,
+  subtitle: r,
+  chips: o,
+  caption: s,
+  leading: n,
+  disabledStyle: t = !1
+}) {
+  const i = /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col items-start justify-center gap-0.5", children: [
+    /* @__PURE__ */ a("div", { className: "flex min-w-0 w-full items-start gap-x-2", children: [
+      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 break-words [overflow-wrap:anywhere]", children: c }),
+      o
+    ] }),
+    r && /* @__PURE__ */ e(
+      l,
+      {
+        variant: "caption",
+        color: "secondary",
+        as: "span",
+        className: "block min-w-0 text-xs",
+        children: r
+      }
+    ),
+    t && s && /* @__PURE__ */ e(l, { as: "span", variant: "caption", className: "leading-none", children: s })
+  ] });
+  return n ? /* @__PURE__ */ a("div", { className: "grid min-w-0 grid-cols-[auto_1fr] gap-x-3", children: [
+    n,
+    i
+  ] }) : i;
+}
+export {
+  f as NameCell
+};

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

@@ -1,4 +1,6 @@
-import { NetworkIcon as e } from "./network-icon.js";
+import { NetworkIcon as t } from "./network-icon.js";
+import { NetworkIndicator as c } from "./network-indicator.js";
 export {
-  e as NetworkIcon
+  t as NetworkIcon,
+  c as NetworkIndicator
 };

package/dist/esm/components/network-icon/network-indicator.js

@@ -0,0 +1,82 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { faChevronDown as h } from "@fortawesome/free-solid-svg-icons";
+import { forwardRef as b } from "react";
+import "../buttons/back-button/back-button.js";
+import { Button as y } from "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import "../buttons/tab-button/tab-button.js";
+import { FaIcon as u } from "../icons/fa-icon.js";
+import { FormattedMessageTyped as I } from "../typed-intl/index.js";
+import { Typography as w } from "../typography/typography.js";
+import { NetworkIcon as v } from "./network-icon.js";
+const x = {
+  sm: "sm",
+  md: "default",
+  default: "default",
+  lg: "lg"
+}, N = b(
+  ({
+    network: m,
+    chainId: k,
+    size: d = "md",
+    iconSize: n = 20,
+    chevronSize: o = 12,
+    showTitle: s = !0,
+    opened: p,
+    onClick: t,
+    interactive: l,
+    className: c,
+    ...f
+  }, g) => {
+    const e = l ?? !!t;
+    return /* @__PURE__ */ r(
+      y,
+      {
+        ref: g,
+        variant: "outline",
+        size: x[d],
+        disabled: !e,
+        onClick: t,
+        className: a(
+          c,
+          "min-w-fit",
+          "h-10 rounded-[20px]",
+          "hover:bg-transparent hover:border hover:border-gray-60",
+          "disabled:text-primary-foreground disabled:bg-transparent disabled:border disabled:border-gray-40"
+        ),
+        ...f,
+        children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          s && /* @__PURE__ */ i(w, { as: "span", variant: "bodySmall", color: "secondary", children: [
+            /* @__PURE__ */ r(I, { messageId: "components.networkIndicator.title" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ r(v, { network: m, size: n }),
+          e && /* @__PURE__ */ r(
+            u,
+            {
+              icon: h,
+              className: a(
+                "text-secondary-foreground transition-transform",
+                p && "rotate-180"
+              ),
+              style: { width: o, height: o }
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+N.displayName = "NetworkIndicator";
+export {
+  N as NetworkIndicator
+};

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
+};