@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

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

@@ -0,0 +1,158 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const COL_SPAN_CLASSES = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12",
+  full: "col-span-full",
+  auto: "col-auto"
+};
+const COL_SPAN_SM_CLASSES = {
+  1: "sm:col-span-1",
+  2: "sm:col-span-2",
+  3: "sm:col-span-3",
+  4: "sm:col-span-4",
+  5: "sm:col-span-5",
+  6: "sm:col-span-6",
+  7: "sm:col-span-7",
+  8: "sm:col-span-8",
+  9: "sm:col-span-9",
+  10: "sm:col-span-10",
+  11: "sm:col-span-11",
+  12: "sm:col-span-12",
+  full: "sm:col-span-full",
+  auto: "sm:col-auto"
+};
+const COL_SPAN_MD_CLASSES = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  11: "md:col-span-11",
+  12: "md:col-span-12",
+  full: "md:col-span-full",
+  auto: "md:col-auto"
+};
+const COL_SPAN_LG_CLASSES = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  9: "lg:col-span-9",
+  10: "lg:col-span-10",
+  11: "lg:col-span-11",
+  12: "lg:col-span-12",
+  full: "lg:col-span-full",
+  auto: "lg:col-auto"
+};
+const COL_SPAN_XL_CLASSES = {
+  1: "xl:col-span-1",
+  2: "xl:col-span-2",
+  3: "xl:col-span-3",
+  4: "xl:col-span-4",
+  5: "xl:col-span-5",
+  6: "xl:col-span-6",
+  7: "xl:col-span-7",
+  8: "xl:col-span-8",
+  9: "xl:col-span-9",
+  10: "xl:col-span-10",
+  11: "xl:col-span-11",
+  12: "xl:col-span-12",
+  full: "xl:col-span-full",
+  auto: "xl:col-auto"
+};
+const getColSpanClass = (span, breakpoint) => {
+  if (!span) return "";
+  if (breakpoint === "sm") return COL_SPAN_SM_CLASSES[span] || "";
+  if (breakpoint === "md") return COL_SPAN_MD_CLASSES[span] || "";
+  if (breakpoint === "lg") return COL_SPAN_LG_CLASSES[span] || "";
+  if (breakpoint === "xl") return COL_SPAN_XL_CLASSES[span] || "";
+  return COL_SPAN_CLASSES[span] || "";
+};
+const COL_START_CLASSES = {
+  1: "col-start-1",
+  2: "col-start-2",
+  3: "col-start-3",
+  4: "col-start-4",
+  5: "col-start-5",
+  6: "col-start-6",
+  7: "col-start-7",
+  8: "col-start-8",
+  9: "col-start-9",
+  10: "col-start-10",
+  11: "col-start-11",
+  12: "col-start-12",
+  13: "col-start-13",
+  auto: "col-start-auto"
+};
+const ORDER_CLASSES = {
+  1: "order-1",
+  2: "order-2",
+  3: "order-3",
+  4: "order-4",
+  5: "order-5",
+  6: "order-6",
+  7: "order-7",
+  8: "order-8",
+  9: "order-9",
+  10: "order-10",
+  11: "order-11",
+  12: "order-12",
+  first: "order-first",
+  last: "order-last",
+  none: "order-none"
+};
+const getColStartClass = (start) => {
+  if (!start) return "";
+  return COL_START_CLASSES[start] || "";
+};
+const getOrderClass = (order) => {
+  if (!order) return "";
+  return ORDER_CLASSES[order] || "";
+};
+const Col = React__default.forwardRef(
+  ({ span = 12, sm, md, lg, xl, start, order, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          getColSpanClass(span),
+          getColSpanClass(sm, "sm"),
+          getColSpanClass(md, "md"),
+          getColSpanClass(lg, "lg"),
+          getColSpanClass(xl, "xl"),
+          getColStartClass(start),
+          getOrderClass(order),
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Col.displayName = "Col";
+
+export { Col };

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

@@ -0,0 +1 @@
+export { Col } from './col.js';

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

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+};
+const Container = React__default.forwardRef(
+  ({
+    maxWidth = "xl",
+    padding = true,
+    center = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          maxWidthClasses[maxWidth],
+          center && "mx-auto",
+          padding && "px-4 sm:px-6 lg:px-8",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+export { Container };

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

@@ -0,0 +1 @@
+export { Container } from './container.js';

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

@@ -0,0 +1,165 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AppLogo } from '../app-logo/app-logo.js';
+import { LegalDisclaimer } from '../legal-disclaimer/legal-disclaimer.js';
+
+const Footer = React__default.forwardRef(
+  ({
+    logo,
+    copyright,
+    social,
+    version,
+    secondaryInfo,
+    legalLinks,
+    containerClassName,
+    className,
+    children,
+    mobileExtraContent,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        ref,
+        className: cn(
+          "relative w-full border-t bg-card border-border flex items-center justify-center",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "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 max-w-[1440px]",
+              containerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-center sm:text-left text-sm text-muted-foreground w-full sm:w-auto", children: [
+                logo && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex justify-center sm:justify-start", children: logo }),
+                  /* @__PURE__ */ jsx("div", { className: "h-2" })
+                ] }),
+                copyright && /* @__PURE__ */ jsx("div", { children: copyright }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 sm:hidden", children: mobileExtraContent })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "w-full sm:w-auto", children: [
+                social && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center sm:justify-end gap-2.5", children: social }),
+                  /* @__PURE__ */ jsx("div", { className: "h-3" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center sm:justify-end gap-2 text-sm text-muted-foreground", children: [
+                  version && /* @__PURE__ */ jsx("span", { children: version }),
+                  secondaryInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                    secondaryInfo
+                  ] }),
+                  legalLinks && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+                    legalLinks
+                  ] })
+                ] })
+              ] }),
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Footer.displayName = "Footer";
+function FooterLink({ href, text, external = false }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm",
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      children: text
+    }
+  );
+}
+function FooterLinkSection({
+  title,
+  links
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 md:items-end", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: links.map((link, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      /* @__PURE__ */ jsx(FooterLink, { ...link }),
+      index < links.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "•" })
+    ] }, link.href)) })
+  ] });
+}
+function GearboxFooter({
+  appName,
+  legalReferences,
+  className,
+  mobileStatusContent
+}) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: cn(
+        "relative w-full border-t bg-card border-border flex items-center justify-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 items-top py-6 w-full px-4 max-w-[1440px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
+          /* @__PURE__ */ jsx(AppLogo, { appName, size: "small" }),
+          /* @__PURE__ */ jsx(LegalDisclaimer, { hrefs: legalReferences })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 h-full justify-between", children: [
+          /* @__PURE__ */ jsx(
+            FooterLinkSection,
+            {
+              title: "Legal",
+              links: [
+                {
+                  href: legalReferences.termsOfService,
+                  text: "Terms of Service"
+                },
+                {
+                  href: legalReferences.privacyNotice,
+                  text: "Privacy Notice"
+                },
+                {
+                  href: legalReferences.riskDisclosure,
+                  text: "Risk Disclosure"
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FooterLinkSection,
+            {
+              title: "Developers",
+              links: [
+                {
+                  href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
+                  text: "Documentation",
+                  external: true
+                },
+                {
+                  href: "https://docs.gearbox.finance/risk-and-security/audits-bug-bounty",
+                  text: "Audits",
+                  external: true
+                },
+                {
+                  href: "https://github.com/Gearbox-protocol",
+                  text: "GitHub",
+                  external: true
+                }
+              ]
+            }
+          )
+        ] }),
+        mobileStatusContent && /* @__PURE__ */ jsx("div", { className: "flex md:hidden w-full", children: mobileStatusContent })
+      ] })
+    }
+  );
+}
+
+export { Footer, FooterLink, FooterLinkSection, GearboxFooter };

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

@@ -0,0 +1 @@
+export { Footer, FooterLink, FooterLinkSection, GearboxFooter } from './footer.js';

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

@@ -0,0 +1,183 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const GRID_COLS_CLASSES = {
+  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"
+};
+const GRID_COLS_SM_CLASSES = {
+  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"
+};
+const GRID_COLS_MD_CLASSES = {
+  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"
+};
+const GRID_COLS_LG_CLASSES = {
+  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"
+};
+const GRID_COLS_XL_CLASSES = {
+  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"
+};
+const GAP_CLASSES = {
+  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"
+};
+const GAP_X_CLASSES = {
+  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"
+};
+const GAP_Y_CLASSES = {
+  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"
+};
+const getGridColsClass = (cols, breakpoint) => {
+  if (!cols) return "";
+  if (typeof cols === "number") {
+    if (breakpoint === "sm") return GRID_COLS_SM_CLASSES[cols] || "";
+    if (breakpoint === "md") return GRID_COLS_MD_CLASSES[cols] || "";
+    if (breakpoint === "lg") return GRID_COLS_LG_CLASSES[cols] || "";
+    if (breakpoint === "xl") return GRID_COLS_XL_CLASSES[cols] || "";
+    return GRID_COLS_CLASSES[cols] || "";
+  }
+  return "";
+};
+const getGapClass = (gap, axis) => {
+  if (gap === void 0) return "";
+  if (axis === "x") return GAP_X_CLASSES[gap] || "";
+  if (axis === "y") return GAP_Y_CLASSES[gap] || "";
+  return GAP_CLASSES[gap] || "";
+};
+const Grid = React__default.forwardRef(
+  ({
+    cols = 12,
+    sm,
+    md,
+    lg,
+    xl,
+    gap = 4,
+    gapX,
+    gapY,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const customStyle = typeof cols === "string" ? { ...style, gridTemplateColumns: cols } : style;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid",
+          getGridColsClass(cols),
+          getGridColsClass(sm, "sm"),
+          getGridColsClass(md, "md"),
+          getGridColsClass(lg, "lg"),
+          getGridColsClass(xl, "xl"),
+          gapX !== void 0 ? getGapClass(gapX, "x") : getGapClass(gap),
+          gapY !== void 0 && getGapClass(gapY, "y"),
+          className
+        ),
+        style: customStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+
+export { Grid };

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

@@ -0,0 +1 @@
+export { Grid } from './grid.js';

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

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { X, Menu } from 'lucide-react';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const MobileMenuContext = React__default.createContext(
+  null
+);
+function useMobileMenu() {
+  const context = React__default.useContext(MobileMenuContext);
+  if (!context) {
+    throw new Error("useMobileMenu must be used within Header component");
+  }
+  return context;
+}
+const Header = React__default.forwardRef(
+  ({
+    navigation,
+    logo,
+    actions,
+    fixed = false,
+    sticky = false,
+    containerClassName,
+    className,
+    children,
+    mobileMenuContent,
+    ...props
+  }, ref) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = React__default.useState(false);
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn(
+          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
+          fixed && "fixed top-0 left-0 right-0 z-50",
+          sticky && "sticky top-0 z-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 max-w-[1440px]",
+                containerClassName
+              ),
+              children: [
+                logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo }),
+                navigation && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center", children: navigation }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  actions && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
+                  (navigation || mobileMenuContent) && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-accent hover:text-accent-foreground focus:outline-none",
+                      onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+                      "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+                      children: mobileMenuOpen ? /* @__PURE__ */ jsx(X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(Menu, { className: "h-6 w-6" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsx(
+            MobileMenuContext.Provider,
+            {
+              value: { closeMobileMenu: () => setMobileMenuOpen(false) },
+              children: /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+                mobileMenuContent || navigation,
+                actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Header.displayName = "Header";
+
+export { Header, useMobileMenu };

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

@@ -0,0 +1 @@
+export { Header, useMobileMenu } from './header.js';

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

@@ -1,9 +1,9 @@
-export * from "./app-logo.js";
-export * from "./col.js";
-export * from "./container.js";
-export * from "./footer.js";
-export * from "./grid.js";
-export * from "./header.js";
-export * from "./layout.js";
-export * from "./legal-disclaimer.js";
-export * from "./page-layout.js";
+export { AppLogo } from './app-logo/app-logo.js';
+export { Col } from './col/col.js';
+export { Container } from './container/container.js';
+export { Footer, FooterLink, FooterLinkSection, GearboxFooter } from './footer/footer.js';
+export { Grid } from './grid/grid.js';
+export { Header, useMobileMenu } from './header/header.js';
+export { Layout } from './layout/layout.js';
+export { LegalDisclaimer } from './legal-disclaimer/legal-disclaimer.js';
+export { PageLayout } from './page-layout/page-layout.js';

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

@@ -0,0 +1 @@
+export { Layout } from './layout.js';