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

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

@@ -0,0 +1,237 @@
+import { jsx as e, jsxs as t, Fragment as x } from "react/jsx-runtime";
+import * as N from "react";
+import { BaseLink as j } from "../../base-link/base-link.js";
+import { BlockSync as k } from "../../block-sync/block-sync.js";
+import { cn as h } from "../../../utils/cn.js";
+import { AppLogo as F } from "../app-logo/app-logo.js";
+import { LegalDisclaimer as D } from "../legal-disclaimer/legal-disclaimer.js";
+import { SocialIcons as L } from "../social-icons/social-icons.js";
+const G = N.forwardRef(
+  ({
+    logo: a,
+    copyright: s,
+    social: r,
+    version: i,
+    secondaryInfo: c,
+    legalLinks: l,
+    containerClassName: d,
+    className: n,
+    children: m,
+    mobileExtraContent: f,
+    ...o
+  }, u) => /* @__PURE__ */ e(
+    "footer",
+    {
+      ref: u,
+      className: h(
+        "relative w-full border-t bg-card border-border flex items-center justify-center",
+        n
+      ),
+      ...o,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: h(
+            "flex flex-col sm:flex-row sm:flex-nowrap justify-between items-center sm:items-start gap-4 sm:gap-0 py-6 w-full px-4",
+            d
+          ),
+          children: [
+            /* @__PURE__ */ t("div", { className: "text-center sm:text-left text-sm text-muted-foreground w-full sm:w-auto", children: [
+              a && /* @__PURE__ */ t(x, { children: [
+                /* @__PURE__ */ e("div", { className: "flex justify-center sm:justify-start", children: a }),
+                /* @__PURE__ */ e("div", { className: "h-2" })
+              ] }),
+              s && /* @__PURE__ */ e("div", { children: s }),
+              /* @__PURE__ */ e("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 sm:hidden", children: f })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "w-full sm:w-auto", children: [
+              r && /* @__PURE__ */ t(x, { children: [
+                /* @__PURE__ */ e("div", { className: "flex items-center justify-center sm:justify-end gap-2.5", children: r }),
+                /* @__PURE__ */ e("div", { className: "h-3" })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-center sm:justify-end gap-2 text-sm text-muted-foreground", children: [
+                i && /* @__PURE__ */ e("span", { children: i }),
+                c && /* @__PURE__ */ t(x, { children: [
+                  /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                  c
+                ] }),
+                l && /* @__PURE__ */ t(x, { children: [
+                  /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                  l
+                ] })
+              ] })
+            ] }),
+            m
+          ]
+        }
+      )
+    }
+  )
+);
+G.displayName = "Footer";
+function b({ href: a, text: s, external: r = !1 }) {
+  return /* @__PURE__ */ e(
+    j,
+    {
+      href: a,
+      external: r,
+      variant: "underlined",
+      color: "secondary",
+      size: "sm",
+      children: s
+    }
+  );
+}
+function g({
+  title: a,
+  links: s
+}) {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 md:items-end", children: [
+    /* @__PURE__ */ e("h3", { className: "text-foreground", children: a }),
+    /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 justify-end", children: s.map((r, i) => /* @__PURE__ */ t(N.Fragment, { children: [
+      /* @__PURE__ */ e(b, { ...r }),
+      i < s.length - 1 && /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "•" })
+    ] }, r.href)) })
+  ] });
+}
+function z({
+  appName: a,
+  legalAppName: s,
+  legalReferences: r,
+  legalContent: i,
+  className: c,
+  version: l,
+  discordAddr: d,
+  landingAddr: n,
+  twitterAddr: m,
+  telegramAddr: f,
+  blockSyncProps: o,
+  onPress: u,
+  showLegalLinks: v,
+  showDeveloperLinks: w
+}) {
+  const y = !!(m || d || f);
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      className: h(
+        "relative w-full border-t bg-card border-border",
+        "text-sm font-normal leading-[120%] tracking-[-0.14px] text-secondary-foreground",
+        c
+      ),
+      children: /* @__PURE__ */ t("div", { className: "flex flex-col md:flex-row md:flex-nowrap justify-between py-6 px-8", children: [
+        /* @__PURE__ */ t("div", { className: "w-full md:w-auto text-center md:text-left flex flex-col items-center md:items-start", children: [
+          /* @__PURE__ */ e(F, { appName: a }),
+          /* @__PURE__ */ e("div", { className: "h-2" }),
+          (() => {
+            const p = i ?? (r ? /* @__PURE__ */ e(
+              D,
+              {
+                appName: s,
+                hrefs: r
+              }
+            ) : /* @__PURE__ */ t("div", { className: "text-muted-foreground text-center md:text-left", children: [
+              /* @__PURE__ */ t("div", { children: [
+                "Copyright © Gearbox Foundation 2023-",
+                (/* @__PURE__ */ new Date()).getFullYear(),
+                "."
+              ] }),
+              /* @__PURE__ */ e("div", { children: "Built at ETHGlobal MarketMake hackathon." })
+            ] }));
+            return u ? /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: u,
+                className: "cursor-pointer text-left bg-transparent border-none p-0 m-0",
+                children: p
+              }
+            ) : p;
+          })(),
+          (l || o) && // Breakpoint synced with HelpCenterContainer (hidden md:flex).
+          /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2 mt-4 md:hidden", children: [
+            l && /* @__PURE__ */ t("span", { children: [
+              "Version ",
+              l
+            ] }),
+            o && /* @__PURE__ */ e(k, { ...o })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "hidden md:flex flex-col gap-4", children: [
+          y && /* @__PURE__ */ e("div", { className: "flex items-center justify-end gap-2.5", children: /* @__PURE__ */ e(
+            L,
+            {
+              twitterAddr: m,
+              discordAddr: d,
+              telegramAddr: f
+            }
+          ) }),
+          v && r && /* @__PURE__ */ e(
+            g,
+            {
+              title: "Legal",
+              links: [
+                {
+                  href: r.termsOfService,
+                  text: "Terms of Service"
+                },
+                {
+                  href: r.privacyNotice,
+                  text: "Privacy Notice"
+                },
+                {
+                  href: r.riskDisclosure,
+                  text: "Risk Disclosure"
+                }
+              ]
+            }
+          ),
+          w && /* @__PURE__ */ e(
+            g,
+            {
+              title: "Developers",
+              links: [
+                {
+                  href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
+                  text: "Documentation",
+                  external: !0
+                },
+                {
+                  href: "https://docs.gearbox.finance/risk-and-security/audits-bug-bounty",
+                  text: "Audits",
+                  external: !0
+                },
+                {
+                  href: "https://github.com/Gearbox-protocol",
+                  text: "GitHub",
+                  external: !0
+                }
+              ]
+            }
+          ),
+          (l || n) && /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-end gap-2 text-muted-foreground", children: [
+            l && /* @__PURE__ */ t("span", { children: [
+              "Version ",
+              l
+            ] }),
+            l && n && /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+            n && /* @__PURE__ */ e(
+              b,
+              {
+                href: `${n}/terms`,
+                text: "Legal Info",
+                external: !0
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  G as Footer,
+  b as FooterLink,
+  g as FooterLinkSection,
+  z as GearboxFooter
+};

package/dist/esm/components/layout/footer/index.js

@@ -0,0 +1,7 @@
+import { Footer as r, FooterLink as t, FooterLinkSection as F, GearboxFooter as i } from "./footer.js";
+export {
+  r as Footer,
+  t as FooterLink,
+  F as FooterLinkSection,
+  i as GearboxFooter
+};

package/dist/esm/components/layout/grid/grid.js

@@ -0,0 +1,161 @@
+import { jsx as y } from "react/jsx-runtime";
+import * as f from "react";
+import { cn as u } from "../../../utils/cn.js";
+const _ = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12"
+}, C = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+  7: "sm:grid-cols-7",
+  8: "sm:grid-cols-8",
+  9: "sm:grid-cols-9",
+  10: "sm:grid-cols-10",
+  11: "sm:grid-cols-11",
+  12: "sm:grid-cols-12"
+}, L = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  7: "md:grid-cols-7",
+  8: "md:grid-cols-8",
+  9: "md:grid-cols-9",
+  10: "md:grid-cols-10",
+  11: "md:grid-cols-11",
+  12: "md:grid-cols-12"
+}, G = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12"
+}, A = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+  5: "xl:grid-cols-5",
+  6: "xl:grid-cols-6",
+  7: "xl:grid-cols-7",
+  8: "xl:grid-cols-8",
+  9: "xl:grid-cols-9",
+  10: "xl:grid-cols-10",
+  11: "xl:grid-cols-11",
+  12: "xl:grid-cols-12"
+}, E = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  7: "gap-7",
+  8: "gap-8",
+  9: "gap-9",
+  10: "gap-10",
+  12: "gap-12",
+  16: "gap-16",
+  20: "gap-20",
+  24: "gap-24"
+}, R = {
+  0: "gap-x-0",
+  1: "gap-x-1",
+  2: "gap-x-2",
+  3: "gap-x-3",
+  4: "gap-x-4",
+  5: "gap-x-5",
+  6: "gap-x-6",
+  7: "gap-x-7",
+  8: "gap-x-8",
+  9: "gap-x-9",
+  10: "gap-x-10",
+  12: "gap-x-12",
+  16: "gap-x-16",
+  20: "gap-x-20",
+  24: "gap-x-24"
+}, D = {
+  0: "gap-y-0",
+  1: "gap-y-1",
+  2: "gap-y-2",
+  3: "gap-y-3",
+  4: "gap-y-4",
+  5: "gap-y-5",
+  6: "gap-y-6",
+  7: "gap-y-7",
+  8: "gap-y-8",
+  9: "gap-y-9",
+  10: "gap-y-10",
+  12: "gap-y-12",
+  16: "gap-y-16",
+  20: "gap-y-20",
+  24: "gap-y-24"
+}, s = (g, r) => !g || typeof g == "string" ? "" : typeof g == "number" ? r === "sm" ? C[g] || "" : r === "md" ? L[g] || "" : r === "lg" ? G[g] || "" : r === "xl" ? A[g] || "" : _[g] || "" : "", l = (g, r) => g === void 0 ? "" : r === "x" ? R[g] || "" : r === "y" ? D[g] || "" : E[g] || "", I = f.forwardRef(
+  ({
+    cols: g = 12,
+    sm: r,
+    md: c,
+    lg: a,
+    xl: p,
+    gap: m = 4,
+    gapX: d,
+    gapY: i,
+    className: t,
+    style: o,
+    children: x,
+    ...S
+  }, n) => {
+    const e = typeof g == "string" ? {
+      ...o,
+      gridTemplateColumns: g === "auto" ? "repeat(auto-fit, minmax(0, auto))" : g
+    } : o;
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        ref: n,
+        className: u(
+          "grid",
+          s(g),
+          s(r, "sm"),
+          s(c, "md"),
+          s(a, "lg"),
+          s(p, "xl"),
+          d !== void 0 ? l(d, "x") : l(m),
+          i !== void 0 && l(i, "y"),
+          t
+        ),
+        style: e,
+        ...S,
+        children: x
+      }
+    );
+  }
+);
+I.displayName = "Grid";
+export {
+  I as Grid
+};

package/dist/esm/components/layout/grid/index.js

@@ -0,0 +1,4 @@
+import { Grid as d } from "./grid.js";
+export {
+  d as Grid
+};

package/dist/esm/components/layout/header/header.js

@@ -0,0 +1,93 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import * as r from "react";
+import { AppBarDropdownMenu as k, AppBarHamburgerButton as C } from "../../app-bar/app-bar.js";
+import { SimpleDropdown as H } from "../../simple-dropdown/simple-dropdown.js";
+import "../../simple-dropdown/simple-dropdown-menu-item.js";
+import { cn as p } from "../../../utils/cn.js";
+const h = r.createContext(
+  null
+);
+function R() {
+  const t = r.useContext(h);
+  if (!t)
+    throw new Error("useMobileMenu must be used within Header component");
+  return t;
+}
+const O = r.forwardRef(
+  ({
+    navigation: t,
+    logo: s,
+    actions: n,
+    fixed: i = !1,
+    sticky: u = !1,
+    containerClassName: x,
+    className: b,
+    children: j,
+    mobileMenuContent: a,
+    mobileMenuOpen: o,
+    onMobileMenuOpenChange: c,
+    ...g
+  }, w) => {
+    const [v, N] = r.useState(!1), l = o !== void 0, M = l ? o : v, d = r.useCallback(
+      (m) => {
+        l || N(m), c?.(m);
+      },
+      [l, c]
+    );
+    return /* @__PURE__ */ e(
+      "header",
+      {
+        ref: w,
+        className: p(
+          "relative w-full bg-background h-18 flex flex-nowrap items-center",
+          i && "fixed top-0 left-0 right-0 z-50",
+          u && "sticky top-0 z-50",
+          b
+        ),
+        "data-fixed": i ? "true" : void 0,
+        ...g,
+        children: /* @__PURE__ */ f(
+          "div",
+          {
+            className: p(
+              "w-full h-full flex items-stretch justify-between mx-auto px-4 md:px-4 lg:px-10",
+              x
+            ),
+            children: [
+              /* @__PURE__ */ f("div", { className: "h-full flex items-center", children: [
+                /* @__PURE__ */ e("div", { className: "flex items-center gap-1 sm:gap-2 shrink-0 lg:hidden", children: a && /* @__PURE__ */ e(
+                  H,
+                  {
+                    open: M,
+                    onOpenChange: d,
+                    title: /* @__PURE__ */ e(C, { size: "md" }),
+                    asChild: !0,
+                    align: "start",
+                    className: "p-0 border-0 bg-transparent shadow-none",
+                    children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+                      h.Provider,
+                      {
+                        value: {
+                          closeMobileMenu: () => d(!1)
+                        },
+                        children: a
+                      }
+                    ) })
+                  }
+                ) }),
+                s && /* @__PURE__ */ e("div", { className: "flex items-center shrink-0", children: s })
+              ] }),
+              t && /* @__PURE__ */ e("div", { className: "hidden lg:flex items-stretch flex-1 min-w-0 h-full", children: t }),
+              /* @__PURE__ */ e("div", { className: "flex items-center gap-1 sm:gap-2 shrink-0", children: n && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+O.displayName = "Header";
+export {
+  O as Header,
+  R as useMobileMenu
+};

package/dist/esm/components/layout/header/index.js

@@ -0,0 +1,5 @@
+import { Header as r, useMobileMenu as u } from "./header.js";
+export {
+  r as Header,
+  u as useMobileMenu
+};

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

@@ -0,0 +1,29 @@
+import { AppLogo as e, AppLogoLink as t } from "./app-logo/app-logo.js";
+import { Block as m } from "./block/block.js";
+import { Col as f } from "./col/col.js";
+import { Container as a } from "./container/container.js";
+import { Footer as L, FooterLink as l, FooterLinkSection as c, GearboxFooter as g } from "./footer/footer.js";
+import { Grid as u } from "./grid/grid.js";
+import { Header as s, useMobileMenu as b } from "./header/header.js";
+import { Layout as y } from "./layout/layout.js";
+import { LegalDisclaimer as C } from "./legal-disclaimer/legal-disclaimer.js";
+import { PageLayout as M } from "./page-layout/page-layout.js";
+import { SocialIcons as B } from "./social-icons/social-icons.js";
+export {
+  e as AppLogo,
+  t as AppLogoLink,
+  m as Block,
+  f as Col,
+  a as Container,
+  L as Footer,
+  l as FooterLink,
+  c as FooterLinkSection,
+  g as GearboxFooter,
+  u as Grid,
+  s as Header,
+  y as Layout,
+  C as LegalDisclaimer,
+  M as PageLayout,
+  B as SocialIcons,
+  b as useMobileMenu
+};

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

@@ -0,0 +1,4 @@
+import { Layout as t } from "./layout.js";
+export {
+  t as Layout
+};

package/dist/esm/components/layout/layout/layout.js

@@ -0,0 +1,47 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as m } from "../../../utils/cn.js";
+const n = t.forwardRef(
+  ({ header: e, footer: o, children: a, className: d, ...i }, s) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: s,
+      className: m("grid min-h-screen grid-rows-[auto_1fr_auto]", d),
+      style: {
+        gridTemplateAreas: `
+            "header"
+            "main"
+            "footer"
+          `
+      },
+      ...i,
+      children: [
+        e && /* @__PURE__ */ r(
+          "div",
+          {
+            className: "border-b border-border",
+            style: { gridArea: "header" },
+            children: e
+          }
+        ),
+        /* @__PURE__ */ r(
+          "main",
+          {
+            className: "overflow-x-hidden py-6",
+            style: {
+              gridArea: "main",
+              backgroundColor: "hsl(var(--background))",
+              color: "hsl(var(--foreground))"
+            },
+            children: a
+          }
+        ),
+        o && /* @__PURE__ */ r("div", { style: { gridArea: "footer" }, children: o })
+      ]
+    }
+  )
+);
+n.displayName = "Layout";
+export {
+  n as Layout
+};

package/dist/esm/components/layout/legal-disclaimer/index.js

@@ -0,0 +1,4 @@
+import { LegalDisclaimer as a } from "./legal-disclaimer.js";
+export {
+  a as LegalDisclaimer
+};

package/dist/esm/components/layout/legal-disclaimer/legal-disclaimer.js

@@ -0,0 +1,46 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { BaseLink as t } from "../../base-link/base-link.js";
+function c({
+  hrefs: e,
+  appName: s = "Permissionless Interface"
+}) {
+  return /* @__PURE__ */ i("p", { className: "text-muted-foreground max-w-md text-sm", children: [
+    "Any use of and/or interaction with the ",
+    s,
+    " is subject to the",
+    " ",
+    /* @__PURE__ */ r(
+      t,
+      {
+        href: e.termsOfService,
+        className: "underline hover:text-foreground transition-colors text-sm",
+        children: "Terms of Service"
+      }
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ r(
+      t,
+      {
+        href: e.privacyNotice,
+        className: "underline hover:text-foreground transition-colors text-sm",
+        children: "Privacy Notice"
+      }
+    ),
+    ", and acceptance of risks described in the",
+    " ",
+    /* @__PURE__ */ r(
+      t,
+      {
+        href: e.riskDisclosure,
+        className: "underline hover:text-foreground transition-colors text-sm",
+        children: "Risk Disclosure Statement"
+      }
+    ),
+    "."
+  ] });
+}
+export {
+  c as LegalDisclaimer
+};

package/dist/esm/components/layout/page-layout/index.js

@@ -0,0 +1,4 @@
+import { PageLayout as e } from "./page-layout.js";
+export {
+  e as PageLayout
+};

package/dist/esm/components/layout/page-layout/page-layout.js

@@ -0,0 +1,39 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { BackButton as c } from "../../buttons/back-button/back-button.js";
+import { PageTitle as f } from "../../page-title/page-title.js";
+import { Container as x } from "../container/container.js";
+function C({
+  children: e,
+  title: i,
+  description: o,
+  icon: m,
+  backButton: r,
+  actionButton: a,
+  maxContainerWidth: l = "xl",
+  containerClassName: n
+}) {
+  return /* @__PURE__ */ s(x, { maxWidth: l, className: n, children: [
+    /* @__PURE__ */ t(
+      f,
+      {
+        backButton: r ? /* @__PURE__ */ t(
+          c,
+          {
+            href: r.href,
+            text: r.text,
+            onClick: r.onClick
+          }
+        ) : void 0,
+        icon: m,
+        actions: a,
+        subtitle: o,
+        className: "mb-6",
+        children: i
+      }
+    ),
+    e
+  ] });
+}
+export {
+  C as PageLayout
+};