@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.4

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

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import { NavbarIndicatorProvider, useNavbarIndicator } from './navbar-indicator-context.js';
+
+const navbarVariants = cva("flex items-center bg-background", {
+  variants: {
+    variant: {
+      default: "justify-between",
+      centered: "justify-center",
+      left: "justify-start",
+      right: "justify-end"
+    },
+    size: {
+      sm: "h-12 px-4",
+      default: "h-full px-6",
+      lg: "h-20 px-8"
+    },
+    sticky: {
+      true: "sticky top-0 z-50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    sticky: false
+  }
+});
+const NavbarContent = ({ containerClassName, children }) => {
+  const indicatorContext = useNavbarIndicator();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: indicatorContext?.containerRef,
+      className: cn(
+        "flex items-center gap-2 flex-1 justify-center overflow-x-auto h-full relative",
+        containerClassName
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: indicatorContext?.indicatorRef,
+            className: "absolute bottom-0 h-0.5 bg-pink-500 transition-all duration-300 ease-out pointer-events-none",
+            style: {
+              left: 0,
+              width: 0,
+              opacity: 0,
+              transform: "translateX(0)"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const Navbar = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    sticky,
+    containerClassName,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: cn(navbarVariants({ variant, size, sticky, className })),
+        ...props,
+        children: /* @__PURE__ */ jsx(NavbarIndicatorProvider, { children: /* @__PURE__ */ jsx(NavbarContent, { containerClassName, children }) })
+      }
+    );
+  }
+);
+Navbar.displayName = "Navbar";
+const NavbarNav = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-1", className),
+    ...props,
+    children
+  }
+));
+NavbarNav.displayName = "NavbarNav";
+
+export { Navbar, NavbarNav, navbarVariants };

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

@@ -0,0 +1 @@
+export { NavItem, navitemVariants } from './navitem.js';

package/dist/esm/components/navitem/navitem.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { useNavbarIndicator } from '../navbar/navbar-indicator-context.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const navitemVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 relative",
+  {
+    variants: {
+      variant: {
+        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
+        active: "text-foreground bg-secondary",
+        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
+        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline",
+        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-accent data-[active=true]:text-foreground",
+        tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        default: "px-4 py-2",
+        lg: "h-10 px-5 text-base",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const NavItem = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    active = false,
+    icon,
+    badge,
+    external = false,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    const indicatorContext = useNavbarIndicator();
+    const itemRef = React.useRef(null);
+    const itemId = React.useId();
+    React.useImperativeHandle(ref, () => itemRef.current);
+    React.useEffect(() => {
+      if (indicatorContext && itemRef.current) {
+        indicatorContext.registerItem(itemId, itemRef.current);
+        return () => {
+          indicatorContext.unregisterItem(itemId);
+        };
+      }
+    }, [indicatorContext, itemId]);
+    React.useEffect(() => {
+      if (indicatorContext && active) {
+        indicatorContext.setActiveItem(itemId);
+      }
+    }, [indicatorContext, active, itemId]);
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref: itemRef,
+        className: cn(
+          navitemVariants({
+            variant: indicatorContext ? "default" : active ? "active" : variant,
+            size,
+            className
+          })
+        ),
+        "data-active": active,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+          children,
+          badge && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: badge }),
+          external && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "h-3 w-3 shrink-0",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-label": "External link",
+              children: [
+                /* @__PURE__ */ jsx("title", { children: "External link" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NavItem.displayName = "NavItem";
+
+export { NavItem, navitemVariants };

package/dist/esm/components/next/back-button.js

@@ -1,11 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import NextLink from "next/link";
-import {
-  BackButton as BaseBackButton
-} from "../buttons/back-button.js";
+import { jsx } from 'react/jsx-runtime';
+import NextLink from 'next/link';
+import { BackButton as BackButton$1 } from '../buttons/back-button/back-button.js';
+
 function BackButton(props) {
-  return /* @__PURE__ */ jsx(BaseBackButton, { ...props, LinkComponent: NextLink });
+  return /* @__PURE__ */ jsx(BackButton$1, { ...props, LinkComponent: NextLink });
 }
-export {
-  BackButton
-};
+
+export { BackButton };

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

@@ -1,12 +1,5 @@
-import { SignInRequired } from "../auth/signin-required.js";
-import { BackButton } from "./back-button.js";
-import { MarkdownViewer } from "./markdown-viewer.js";
-import { SIWEClientProvider } from "./siwe-provider.js";
-import { TokenIcon } from "./token-icon.js";
-export {
-  BackButton,
-  MarkdownViewer,
-  SIWEClientProvider,
-  SignInRequired,
-  TokenIcon
-};
+export { SignInRequired } from '../auth/signin-required.js';
+export { BackButton } from './back-button.js';
+export { MarkdownViewer } from './markdown-viewer.js';
+export { SIWEClientProvider } from './siwe-provider.js';
+export { TokenIcon } from './token-icon.js';

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

@@ -1,10 +1,19 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { PageLayout } from "../layout/index.js";
+import { jsx } from 'react/jsx-runtime';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import 'clsx';
+import 'tailwind-merge';
+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 '../base-link/base-link.js';
+import { PageLayout } from '../layout/page-layout/page-layout.js';
+
 function slugify(text) {
   return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
 }
@@ -198,6 +207,5 @@ function MarkdownViewer({ content, title }) {
     }
   );
 }
-export {
-  MarkdownViewer
-};
+
+export { MarkdownViewer };

package/dist/esm/components/next/siwe-provider.js

@@ -1,11 +1,10 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useRouter } from "next/navigation";
-import { SIWEClientProvider as BaseSIWEClientProvider } from "../auth/siwe-provider.js";
+import { jsx } from 'react/jsx-runtime';
+import { useRouter } from 'next/navigation';
+import { SIWEClientProvider as SIWEClientProvider$1 } from '../auth/siwe-provider.js';
+
 function SIWEClientProvider(props) {
   const router = useRouter();
-  return /* @__PURE__ */ jsx(BaseSIWEClientProvider, { ...props, onRefresh: () => router.refresh() });
+  return /* @__PURE__ */ jsx(SIWEClientProvider$1, { ...props, onRefresh: () => router.refresh() });
 }
-export {
-  SIWEClientProvider
-};
+
+export { SIWEClientProvider };

package/dist/esm/components/next/token-icon.js

@@ -1,11 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import NextImage from "next/image";
-import {
-  TokenIcon as BaseTokenIcon
-} from "../token-icon.js";
+import { jsx } from 'react/jsx-runtime';
+import NextImage from 'next/image';
+import { TokenIcon as TokenIcon$1 } from '../token-icon/token-icon.js';
+
 function TokenIcon(props) {
-  return /* @__PURE__ */ jsx(BaseTokenIcon, { ...props, ImageComponent: NextImage });
+  return /* @__PURE__ */ jsx(TokenIcon$1, { ...props, ImageComponent: NextImage });
 }
-export {
-  TokenIcon
-};
+
+export { TokenIcon };

package/dist/esm/components/not-found/index.js

@@ -0,0 +1 @@
+export { NotFound } from './not-found.js';

package/dist/esm/components/not-found/not-found.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+function NotFound({
+  icon,
+  message,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col items-center justify-center gap-4 py-8",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-muted-foreground opacity-50", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-center text-lg text-muted-foreground", children: message })
+      ]
+    }
+  );
+}
+
+export { NotFound };

package/dist/esm/components/options-list/index.js

@@ -0,0 +1 @@
+export { OptionsItem, OptionsList } from './options-list.js';

package/dist/esm/components/options-list/options-list.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+function OptionsList({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("m-0 p-0 w-full flex flex-wrap", className), ...props, children });
+}
+function OptionsItem({
+  icon,
+  title,
+  subTitle,
+  onClick,
+  endingIcon,
+  last = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "relative z-0 pt-5 px-4 flex flex-row items-start gap-4 w-full cursor-pointer text-left",
+        "before:absolute before:-z-10 before:left-0 before:hidden before:w-full before:inset-y-0 before:content-[''] before:bg-foreground/10 before:rounded-sm",
+        "hover:before:block",
+        !last && "after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:content-[''] after:bg-border",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "w-6 h-6 text-muted-foreground flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: "pb-5 flex-1 flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-base leading-[1.2] font-medium", children: title }),
+          subTitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: subTitle })
+        ] }) }),
+        endingIcon && /* @__PURE__ */ jsx("div", { className: "ml-4 text-muted-foreground transition-colors", children: endingIcon })
+      ]
+    }
+  );
+}
+
+export { OptionsItem, OptionsList };

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

@@ -0,0 +1 @@
+export { PageTitle, pageTitleRootVariants, pageTitleVariants } from './page-title.js';

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

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const pageTitleVariants = cva(
+  "font-semibold leading-tight tracking-tight flex items-center gap-2",
+  {
+    variants: {
+      size: {
+        sm: "text-xl md:text-2xl",
+        default: "text-xl md:text-2xl",
+        lg: "text-3xl md:text-4xl",
+        xl: "text-4xl md:text-5xl"
+      },
+      variant: {
+        default: "text-foreground",
+        primary: "text-primary",
+        muted: "text-muted-foreground",
+        gradient: "bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const pageTitleRootVariants = cva("flex items-center", {
+  variants: {
+    spacing: {
+      sm: "gap-2",
+      default: "gap-4",
+      lg: "gap-6"
+    }
+  },
+  defaultVariants: {
+    spacing: "default"
+  }
+});
+const PageTitle = React.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    spacing,
+    backButton,
+    icon,
+    actions,
+    subtitle,
+    as: Component = "h1",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: cn(pageTitleRootVariants({ spacing })), children: [
+      backButton && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: backButton }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+          icon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              Component,
+              {
+                className: cn(pageTitleVariants({ size, variant }), "m-0"),
+                children
+              }
+            ),
+            subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions })
+      ] })
+    ] }) });
+  }
+);
+PageTitle.displayName = "PageTitle";
+
+export { PageTitle, pageTitleRootVariants, pageTitleVariants };

package/dist/esm/components/percent-indicator/index.js

@@ -0,0 +1 @@
+export { PercentIndicator } from './percent-indicator.js';

package/dist/esm/components/percent-indicator/percent-indicator.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import { percentTemplate } from '../../utils/format-money.js';
+
+function PercentIndicator({
+  percent,
+  decimals = 2,
+  showColor = true,
+  className,
+  ...props
+}) {
+  const getColorClass = () => {
+    if (!showColor) return "";
+    if (percent >= 90) return "text-destructive";
+    if (percent >= 70) return "text-orange-500";
+    if (percent >= 50) return "text-yellow-600";
+    return "text-green-600";
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("font-medium", getColorClass(), className), ...props, children: percentTemplate(percent, decimals) });
+}
+
+export { PercentIndicator };

package/dist/esm/components/pool-points-indicator/index.js

@@ -0,0 +1 @@
+export { PoolPointsIndicator } from './pool-points-indicator.js';

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const COLOR_MAP = {
+  primary: "border-primary bg-primary",
+  secondary: "border-secondary bg-secondary",
+  green: "border-green-600 bg-green-600",
+  blue: "border-blue-600 bg-blue-600",
+  yellow: "border-yellow-600 bg-yellow-600"
+};
+function PoolPointsIndicator({
+  size = 24,
+  color = "primary",
+  className,
+  children
+}) {
+  const borderSize = size + 8;
+  const colorClasses = COLOR_MAP[color];
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute flex items-center justify-center rounded-full border-2",
+          colorClasses.split(" ")[0]
+          // border color
+        ),
+        style: {
+          top: -4,
+          left: -4,
+          width: borderSize,
+          height: borderSize
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute flex items-center justify-center rounded-full",
+          colorClasses.split(" ")[1]
+        ),
+        style: {
+          top: -size / 4,
+          right: -size / 4,
+          width: size * 7 / 12,
+          height: size * 7 / 12,
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: size / 3,
+            height: size / 3,
+            viewBox: "0 0 8 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "text-foreground",
+            role: "img",
+            "aria-label": "Pool Points Indicator",
+            children: [
+              /* @__PURE__ */ jsx("title", { children: "Pool Points" }),
+              /* @__PURE__ */ jsx("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+            ]
+          }
+        )
+      }
+    ),
+    children
+  ] });
+}
+
+export { PoolPointsIndicator };

package/dist/esm/components/search-bar/index.js

@@ -0,0 +1 @@
+export { SearchBar } from './search-bar.js';