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

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -0,0 +1,394 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useEffect as y } from "react";
+import h from "react-markdown";
+import k from "remark-gfm";
+import "../base-link/base-link.js";
+import "@gearbox-protocol/sdk";
+import { cn as p } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import "../layout/col/col.js";
+import "../layout/container/container.js";
+import "../layout/footer/footer.js";
+import "../layout/grid/grid.js";
+import "../layout/header/header.js";
+import "../layout/layout/layout.js";
+import { PageLayout as w } from "../layout/page-layout/page-layout.js";
+import "../layout/social-icons/social-icons.js";
+import "../accordion/accordion.js";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
+import "../alert-badge/alert-badge.js";
+import "../alert-dialog/alert-dialog.js";
+import "../alert-modal/alert-modal.js";
+import "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "react-intl";
+import "../arc-loader/arc-loader.js";
+import "../asset-line/asset-line.js";
+import "../buttons/back-button/back-button.js";
+import "../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 "../buttons/tab-button/tab-button.js";
+import "../token-icon/token-icon.js";
+import "wagmi";
+import "../auth/wallet-ui-context.js";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../navigation-context/navigation-context.js";
+import "../button-checkbox/button-checkbox.js";
+import "../card-grid/card-grid.js";
+import "../cards/card/card.js";
+import "../carousel/carousel.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../checkbox-item/checkbox-item.js";
+import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../colored-text/colored-text.js";
+import "../input/input.js";
+import "../with-title/with-title.js";
+import "../smart-number-input/balance-indicator.js";
+import "../smart-number-input/smart-number-input.js";
+import "../points-icon/points-icon.js";
+import "../skeleton/skeleton.js";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../confirm-menu/confirm-menu.js";
+import "../currency-button/currency-button.js";
+import "../description/description.js";
+import "../detailed-apy/detailed-apy.js";
+import "../detailed-page-title/detailed-page-title.js";
+import "../detailed-page-title/detailed-page-title-copy-button.js";
+import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
+import "../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../dialog/dialog-container.js";
+import "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import "../dialog/dialog-footer.js";
+import "../dialog/dialog-header.js";
+import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../label/label.js";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "../edit-input/edit-input.js";
+import "../fadeout-loading/fadeout-loading.js";
+import "../filter/filter-block.js";
+import "../filter/filter-checkbox-item.js";
+import "../filter/filter-chip.js";
+import "../filter/filter-chips.js";
+import "../filter/filter-dropdown-item.js";
+import "../filter/filter-group.js";
+import "../filter/filter-label.js";
+import "../search-line/search-line.js";
+import "../tabs/tabs.js";
+import "../filter/filter-modal-item.js";
+import "../filter/filter-radio-item.js";
+import "../filter/filter-separator.js";
+import "../filter/variants.js";
+import "../graph/formatters.js";
+import "lightweight-charts";
+import "../graph/graph-view.js";
+import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
+import "../horizontal-indicator/horizontal-indicator.js";
+import "../icon-button/icon-button.js";
+import { Link as I } from "../link/link.js";
+import "../token-symbol/token-symbol.js";
+import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
+import "../loader/loader.js";
+import "../loading/loading.js";
+import "../loading-bar/loading-bar.js";
+import "../navbar/navbar.js";
+import "../navbar/navbar-indicator-context.js";
+import "../app-bar/app-bar.js";
+import "../navitem/navitem.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../page-title/page-title.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../progress-bar/progress-bar.js";
+import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
+import "../search-bar/search-bar.js";
+import "../segmented-control/segmented-control.js";
+import "../select/select.js";
+import "../separate-line/separate-line.js";
+import "../separator/separator.js";
+import "../simple-accordion/simple-accordion.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../slider/slider.js";
+import "../slider/slider-context.js";
+import "@radix-ui/react-slider";
+import "../spinner/spinner.js";
+import "../spinner-loader/spinner-loader.js";
+import "../split-list/split-list.js";
+import "../stat-badge/stat-badge.js";
+import "../status-dot/status-dot.js";
+import "../stepper/stepper.js";
+import "../switch/switch.js";
+import "../table/grid-table.js";
+import "../table/table.js";
+import "../table/grid-table-loader.js";
+import "../textarea/textarea.js";
+import "../theme-provider.js";
+import "../time-to-liquidation/time-to-liquidation.js";
+import "../tip-card/tip-card.js";
+import "../toggle/toggle.js";
+import "../typography/typography.js";
+import "../with-filter-button/with-filter-button.js";
+function T(o) {
+  return o.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+function u(o) {
+  return typeof o == "string" ? o : typeof o == "number" ? String(o) : Array.isArray(o) ? o.map(u).join("") : o && typeof o == "object" && "props" in o && typeof o.props == "object" && o.props !== null && "children" in o.props ? u(
+    o.props.children
+  ) : "";
+}
+function a(o) {
+  const l = u(o), s = l.match(/\{#([a-z0-9-]+)\}\s*$/i);
+  if (s) {
+    const c = s[1];
+    if (typeof o == "string") {
+      const i = l.replace(/\s*\{#[a-z0-9-]+\}\s*$/i, "").trim();
+      return { id: c, displayText: i };
+    }
+    return { id: c, displayText: o };
+  }
+  return { id: T(l), displayText: o };
+}
+function Tr({
+  content: o,
+  title: l,
+  backButton: s,
+  bare: c = !1,
+  nodeClassNames: i,
+  nodeComponents: x
+}) {
+  y(() => {
+    const t = window.location.hash;
+    t && setTimeout(() => {
+      const m = document.getElementById(t.slice(1));
+      m && m.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 100);
+  }, []);
+  const d = /* @__PURE__ */ r("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ r(
+    h,
+    {
+      remarkPlugins: [k],
+      components: {
+        h1: ({ children: t, ...m }) => {
+          const { id: e, displayText: n } = a(t);
+          return /* @__PURE__ */ r(
+            "h1",
+            {
+              id: e,
+              className: p(
+                "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
+                i?.h1
+              ),
+              ...m,
+              children: n
+            }
+          );
+        },
+        h2: ({ children: t, ...m }) => {
+          const { id: e, displayText: n } = a(t);
+          return /* @__PURE__ */ r(
+            "h2",
+            {
+              id: e,
+              className: p(
+                "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
+                i?.h2
+              ),
+              ...m,
+              children: n
+            }
+          );
+        },
+        h3: ({ children: t, ...m }) => {
+          const { id: e, displayText: n } = a(t);
+          return /* @__PURE__ */ r(
+            "h3",
+            {
+              id: e,
+              className: p(
+                "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
+                i?.h3
+              ),
+              ...m,
+              children: n
+            }
+          );
+        },
+        h4: ({ children: t, ...m }) => {
+          const { id: e, displayText: n } = a(t);
+          return /* @__PURE__ */ r(
+            "h4",
+            {
+              id: e,
+              className: p(
+                "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
+                i?.h4
+              ),
+              ...m,
+              children: n
+            }
+          );
+        },
+        p: ({ ...t }) => /* @__PURE__ */ r(
+          "p",
+          {
+            className: p(
+              "text-muted-foreground mb-4 leading-relaxed",
+              i?.p
+            ),
+            ...t
+          }
+        ),
+        a: ({ href: t, color: m, ...e }) => t?.startsWith("#") && t ? /* @__PURE__ */ r(
+          "a",
+          {
+            href: t,
+            className: p(
+              "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+              i?.a
+            ),
+            onClick: (g) => {
+              g.preventDefault();
+              const b = t.slice(1), f = document.getElementById(b);
+              f && (f.scrollIntoView({
+                behavior: "smooth",
+                block: "start"
+              }), window.history.pushState(null, "", t));
+            },
+            ...e
+          }
+        ) : x?.a === "Link" ? /* @__PURE__ */ r(
+          I,
+          {
+            href: t,
+            external: !t?.startsWith("/"),
+            variant: "underlined",
+            size: "unset",
+            className: i?.a,
+            ...e
+          }
+        ) : /* @__PURE__ */ r(
+          "a",
+          {
+            href: t,
+            className: p(
+              "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+              i?.a
+            ),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            color: m,
+            ...e
+          }
+        ),
+        ul: ({ ...t }) => /* @__PURE__ */ r(
+          "ul",
+          {
+            className: p(
+              "list-disc list-inside mb-4 text-muted-foreground space-y-2",
+              i?.ul
+            ),
+            ...t
+          }
+        ),
+        ol: ({ ...t }) => /* @__PURE__ */ r(
+          "ol",
+          {
+            className: p(
+              "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
+              i?.ol
+            ),
+            ...t
+          }
+        ),
+        li: ({ ...t }) => /* @__PURE__ */ r(
+          "li",
+          {
+            className: p("ml-4 text-muted-foreground", i?.li),
+            ...t
+          }
+        ),
+        blockquote: ({ ...t }) => /* @__PURE__ */ r(
+          "blockquote",
+          {
+            className: p(
+              "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
+              i?.blockquote
+            ),
+            ...t
+          }
+        ),
+        code: ({ className: t, ...m }) => !t?.includes("language-") ? /* @__PURE__ */ r(
+          "code",
+          {
+            className: p(
+              "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
+              i?.code
+            ),
+            ...m
+          }
+        ) : /* @__PURE__ */ r(
+          "code",
+          {
+            className: p(
+              "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
+              i?.code
+            ),
+            ...m
+          }
+        ),
+        strong: ({ ...t }) => /* @__PURE__ */ r(
+          "strong",
+          {
+            className: p(
+              "font-bold text-foreground",
+              i?.strong
+            ),
+            ...t
+          }
+        ),
+        em: ({ ...t }) => /* @__PURE__ */ r(
+          "em",
+          {
+            className: p("italic text-foreground", i?.em),
+            ...t
+          }
+        )
+      },
+      children: o
+    }
+  ) });
+  return c ? d : /* @__PURE__ */ r(w, { title: l || "", backButton: s, children: d });
+}
+export {
+  Tr as MarkdownViewer
+};

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

@@ -0,0 +1,4 @@
+import { Modal as a } from "./modal.js";
+export {
+  a as Modal
+};

package/dist/esm/components/modal/modal.js

@@ -0,0 +1,128 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dialog";
+import { cva as D } from "class-variance-authority";
+import * as i from "react";
+import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk";
+import { useIsMobile as M } from "../../hooks/use-media-query.js";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import { Z_INDEX as O, Z_INDEX_VALUES as N } from "../../utils/z-index.js";
+const u = "gb-modal-open";
+let n = 0;
+const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] before:opacity-40", L = D("", {
+  variants: {
+    colorTheme: {
+      default: "bg-black/30",
+      dark: "bg-black",
+      "dark-transparent": "bg-black/85"
+    },
+    backdrop: {
+      success: `${b} before:bg-[linear-gradient(180deg,rgba(146,255,176,0.85)_0%,rgba(146,255,176,0)_50%)]`,
+      failure: `${b} before:bg-[linear-gradient(180deg,rgba(255,61,64,0.85)_0%,rgba(255,61,64,0)_50%)]`,
+      default: ""
+    }
+  },
+  defaultVariants: {
+    colorTheme: "default",
+    backdrop: "default"
+  }
+}), w = i.forwardRef(
+  ({
+    show: r = !0,
+    colorTheme: g = "default",
+    backdrop: p = "default",
+    xsCentered: v = !1,
+    onClickOutside: s,
+    zIndexLayer: c = "MODAL",
+    className: x,
+    children: y,
+    ...h
+  }, C) => {
+    const _ = M(), d = O[c], f = { zIndex: N[c] };
+    i.useEffect(() => {
+      if (!(typeof document > "u") && r)
+        return n += 1, document.body.classList.add(u), () => {
+          n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(u);
+        };
+    }, [r]);
+    const l = i.useCallback(
+      (e) => {
+        e || s?.();
+      },
+      [s]
+    );
+    return r ? /* @__PURE__ */ t(a.Root, { open: r, onOpenChange: l, modal: !0, children: /* @__PURE__ */ m(a.Portal, { children: [
+      /* @__PURE__ */ t(
+        a.Overlay,
+        {
+          className: o(
+            "fixed inset-0",
+            "pointer-events-auto",
+            d,
+            L({ colorTheme: g, backdrop: p })
+          ),
+          style: f
+        }
+      ),
+      /* @__PURE__ */ t(
+        a.Content,
+        {
+          className: o("fixed inset-0", "overflow-y-auto", d),
+          style: f,
+          onPointerDownOutside: (e) => {
+            e.detail.originalEvent.target?.closest?.(
+              "[data-sonner-toaster], [data-sonner-toast], [data-gearbox-banner]"
+            ) && e.preventDefault();
+          },
+          onInteractOutside: (e) => {
+            e.detail.originalEvent.target?.closest?.(
+              "[data-sonner-toaster], [data-sonner-toast], [data-gearbox-banner]"
+            ) && e.preventDefault();
+          },
+          onClick: (e) => {
+            e.target === e.currentTarget && l(!1);
+          },
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: o(
+                "min-h-full",
+                "flex flex-col justify-center items-center",
+                "animate-[modalContentShow_225ms_cubic-bezier(0.4,0,0.2,1)]"
+              ),
+              role: "presentation",
+              onClick: (e) => {
+                e.target === e.currentTarget && l(!1);
+              },
+              children: /* @__PURE__ */ m(
+                "div",
+                {
+                  ref: C,
+                  className: o(
+                    "relative",
+                    "w-full sm:w-auto",
+                    "m-auto py-0 px-0 sm:py-5",
+                    _ && "w-full",
+                    v && "min-h-screen flex flex-nowrap items-center justify-center sm:min-h-0 sm:block",
+                    x
+                  ),
+                  ...h,
+                  children: [
+                    /* @__PURE__ */ t(a.Title, { className: "sr-only", children: "Modal Window" }),
+                    y
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }) }) : null;
+  }
+);
+w.displayName = "Modal";
+export {
+  w as Modal
+};

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

@@ -0,0 +1,11 @@
+import { Navbar as o, NavbarNav as v, navbarVariants as t } from "./navbar.js";
+import { NavbarIndicatorProvider as e, useNavbarIndicator as N } from "./navbar-indicator-context.js";
+import { NavbarWithOverflow as f } from "./navbar-with-overflow.js";
+export {
+  o as Navbar,
+  e as NavbarIndicatorProvider,
+  v as NavbarNav,
+  f as NavbarWithOverflow,
+  t as navbarVariants,
+  N as useNavbarIndicator
+};

package/dist/esm/components/navbar/navbar-indicator-context.js

@@ -0,0 +1,46 @@
+import { jsx as x } from "react/jsx-runtime";
+import { createContext as C, useRef as a, useState as h, useCallback as s, useEffect as l, useContext as b } from "react";
+const d = C(
+  null
+), z = ({ children: f }) => {
+  const i = a(/* @__PURE__ */ new Map()), [e, m] = h(null), r = a(null), c = a(null), v = s((t, o) => {
+    i.current.set(t, o);
+  }, []), I = s((t) => {
+    i.current.delete(t);
+  }, []), n = s((t) => {
+    if (!r.current || !c.current) return;
+    const o = i.current.get(t);
+    if (!o) return;
+    const u = o.getBoundingClientRect(), R = c.current.getBoundingClientRect(), p = u.left - R.left + c.current.scrollLeft, w = u.width;
+    r.current.style.opacity = "1", r.current.style.transform = `translateX(${p}px)`, r.current.style.width = `${w}px`;
+  }, []), g = s(
+    (t) => {
+      m(t), n(t);
+    },
+    [n]
+  );
+  return l(() => {
+    e && n(e);
+  }, [e, n]), l(() => {
+    const t = () => {
+      e && n(e);
+    };
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [e, n]), /* @__PURE__ */ x(
+    d.Provider,
+    {
+      value: {
+        registerItem: v,
+        unregisterItem: I,
+        setActiveItem: g,
+        containerRef: c,
+        indicatorRef: r
+      },
+      children: f
+    }
+  );
+}, A = () => b(d);
+export {
+  z as NavbarIndicatorProvider,
+  A as useNavbarIndicator
+};