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

package/dist/types/components/navbar/navbar-with-overflow.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+export interface NavbarOverflowItem {
+    id: string;
+    label: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface NavbarWithOverflowProps {
+    items: NavbarOverflowItem[];
+    moreLabel?: React.ReactNode;
+    className?: string;
+}
+/**
+ * NavbarWithOverflow — renders nav items inline, moving items that don't fit
+ * into a "More" dropdown. Self-contained: measures its own wrapper width
+ * via ResizeObserver. When all items fit, they are centered (via parent flex).
+ *
+ * Use inside <Navbar> or any flex container.
+ */
+export declare function NavbarWithOverflow({ items, moreLabel, className, }: NavbarWithOverflowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/navbar/navbar.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const navbarVariants: (props?: ({
+    variant?: "default" | "left" | "right" | "centered" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Navbar component props
+ */
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navbarVariants> {
+    /**
+     * Container class name for inner wrapper
+     */
+    containerClassName?: string;
+}
+/**
+ * Navbar component for application navigation
+ */
+declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Navbar navigation wrapper component
+ */
+declare const NavbarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Navbar, NavbarNav, navbarVariants };

package/dist/types/components/navbar-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './navbar-logo';

package/dist/types/components/navbar-logo/navbar-logo.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+export interface NavBarLogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Size of the logo (width and height)
+     */
+    size?: string | number;
+}
+/**
+ * NavBarLogo — a logo image for navigation bar
+ */
+export declare function NavBarLogo({ size, className, style, ...props }: NavBarLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/navigation-context/index.d.ts

@@ -0,0 +1 @@
+export { type NavigationAdapter, type NavigationLinkProps, NavigationProvider, useNavigationAdapter, } from './navigation-context';

package/dist/types/components/navigation-context/navigation-context.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export interface NavigationLinkProps {
+    to: string;
+    className?: string;
+    target?: string;
+    rel?: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+    children?: React.ReactNode;
+}
+export interface NavigationAdapter {
+    Link: React.ComponentType<any>;
+    useLocation: () => {
+        hash: string;
+        pathname: string;
+    };
+    useNavigate: () => (to: string) => void;
+}
+interface NavigationProviderProps extends NavigationAdapter {
+    children: React.ReactNode;
+}
+/**
+ * Universal navigation provider.
+ * Pass your router's Link component, useLocation, and useNavigate directly.
+ *
+ * @example react-router-dom
+ * ```tsx
+ * import { Link, useLocation, useNavigate } from "react-router-dom";
+ *
+ * <NavigationProvider Link={Link} useLocation={useLocation} useNavigate={useNavigate}>
+ *   <App />
+ * </NavigationProvider>
+ * ```
+ *
+ * @example Next.js (via @gearbox-protocol/ui-kit/next)
+ * ```tsx
+ * import { NextNavigationProvider } from "@gearbox-protocol/ui-kit/next";
+ *
+ * <NextNavigationProvider Link={NextLink} useRouter={useRouter} usePathname={usePathname}>
+ *   <App />
+ * </NextNavigationProvider>
+ * ```
+ */
+export declare function NavigationProvider({ Link, useLocation, useNavigate, children, }: NavigationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useNavigationAdapter(): NavigationAdapter;
+export {};

package/dist/types/components/navitem/index.d.ts

@@ -0,0 +1 @@
+export * from './navitem';

package/dist/types/components/navitem/navitem.d.ts

@@ -0,0 +1,67 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const navitemVariants: (props?: ({
+    variant?: "link" | "default" | "tab" | "ghost" | "active" | "pill" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * NavItem component props
+ */
+export interface NavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof navitemVariants> {
+    /**
+     * Renders the navitem as a child element using Radix Slot
+     * Useful for creating custom navigation elements or working with routing libraries
+     *
+     * @example
+     * ```tsx
+     * <NavItem asChild>
+     *   <Link href="/path">Link</Link>
+     * </NavItem>
+     * ```
+     */
+    asChild?: boolean;
+    /**
+     * Whether the navigation item is currently active
+     */
+    active?: boolean;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional badge or indicator to display after the label
+     */
+    badge?: React.ReactNode;
+    /**
+     * Indicates if this is an external link
+     */
+    external?: boolean;
+}
+/**
+ * NavItem component for navigation items
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <NavItem href="/dashboard">Dashboard</NavItem>
+ *
+ * // Active state
+ * <NavItem href="/settings" active>Settings</NavItem>
+ *
+ * // With icon
+ * <NavItem href="/profile" icon={<UserIcon />}>Profile</NavItem>
+ *
+ * // With badge
+ * <NavItem href="/notifications" badge={<Badge>3</Badge>}>Notifications</NavItem>
+ *
+ * // As a router link
+ * <NavItem asChild>
+ *   <Link to="/dashboard">Dashboard</Link>
+ * </NavItem>
+ *
+ * // Tab variant
+ * <NavItem variant="tab" active>Overview</NavItem>
+ * ```
+ */
+declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavItem, navitemVariants };

package/dist/types/components/network-icon/index.d.ts

@@ -0,0 +1,2 @@
+export type { NetworkIconProps } from './network-icon';
+export * from './network-icon';

package/dist/types/components/network-icon/network-icon.d.ts

@@ -0,0 +1,28 @@
+/**
+ * NetworkIcon — component for displaying blockchain network icons.
+ *
+ * @usage
+ * Use NetworkIcon to display network/chain icons:
+ * Mainnet, Arbitrum, Optimism, Monad, etc.
+ *
+ * Props:
+ * - `network` — network name (required).
+ * - `size` — icon size in pixels (defaults to 20).
+ * - `isTest` — whether this is a test network (shows test badge).
+ * - `suffixSize` — size of the test badge (defaults to 12).
+ * - `showTooltip` — whether to show a tooltip with the network name.
+ * - `rounded` — whether to clip the icon to a circle.
+ *
+ * Internally uses `RoundedImage` for image loading, retry and fallback logic.
+ * Automatically falls back to a default "all networks" icon when loading fails.
+ */
+export interface NetworkIconProps {
+    network: string | undefined;
+    size?: number;
+    isTest?: boolean;
+    suffixSize?: number;
+    showTooltip?: boolean;
+    rounded?: boolean;
+    className?: string;
+}
+export declare function NetworkIcon({ network, size, isTest, suffixSize, showTooltip, rounded, className, }: NetworkIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/next/back-button.d.ts

@@ -0,0 +1,3 @@
+import { BackButtonProps as BaseBackButtonProps } from '../buttons/back-button';
+export type BackButtonProps = Omit<BaseBackButtonProps, "LinkComponent">;
+export declare function BackButton(props: BackButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/next/connectkit/index.d.ts

@@ -0,0 +1 @@
+export { type NextSIWEClientProviderProps, SIWEClientProvider, } from './siwe-provider';

package/dist/types/components/next/connectkit/siwe-provider.d.ts

@@ -0,0 +1,8 @@
+import { SIWEClientProviderProps as BaseSIWEClientProviderProps } from '../../connectkit/siwe-provider';
+export type NextSIWEClientProviderProps = Omit<BaseSIWEClientProviderProps, "onRefresh">;
+/**
+ * Next.js variant of {@link SIWEClientProvider} that calls `router.refresh()` after sign-in and sign-out.
+ *
+ * Import from `@gearbox-protocol/ui-kit/next/connectkit`.
+ */
+export declare function SIWEClientProvider(props: NextSIWEClientProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/next/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Next.js-optimized components
+ * These components use Next.js features like Image, Link, and useRouter
+ * Use these when your project is using Next.js
+ */
+export { SignInRequired } from '../auth/signin-required';
+export { preloadTokenIcons } from '../token-icon';
+export { BackButton } from './back-button';
+export { NextMarkdownViewer, type NextMarkdownViewerProps, } from './next-markdown-viewer';
+export { NextNavigationProvider } from './next-navigation-provider';
+export { TokenIcon } from './token-icon';

package/dist/types/components/next/next-markdown-viewer.d.ts

@@ -0,0 +1,23 @@
+export interface NextMarkdownViewerProps {
+    content: string;
+    title?: string;
+    backButtonHref?: string;
+    backButtonText?: string;
+}
+/**
+ * NextMarkdownViewer — Next.js-specific wrapper for MarkdownViewer.
+ *
+ * @usage
+ * Use NextMarkdownViewer in Next.js applications to automatically handle
+ * back navigation using Next.js router.
+ *
+ * Props:
+ * - `content` — markdown content string to render (required).
+ * - `title` — optional page title displayed in PageLayout.
+ * - `backButtonHref` — optional href for back button (defaults to "/").
+ * - `backButtonText` — optional text for back button (defaults to "Back").
+ *
+ * Note: This component requires Next.js and uses "use client" directive.
+ * For non-Next.js applications, use the base MarkdownViewer component instead.
+ */
+export declare function NextMarkdownViewer({ content, title, backButtonHref, backButtonText, }: NextMarkdownViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/next/next-navigation-provider.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+interface NextNavigationProviderProps {
+    Link: React.ComponentType<any>;
+    useRouter: () => {
+        push: (url: string) => void;
+    };
+    usePathname: () => string;
+    children: React.ReactNode;
+}
+/**
+ * Navigation provider for Next.js App Router.
+ * Maps Next.js navigation primitives to the universal NavigationAdapter.
+ *
+ * @example
+ * ```tsx
+ * import { NextNavigationProvider } from "@gearbox-protocol/ui-kit/next";
+ * import NextLink from "next/link";
+ * import { useRouter, usePathname } from "next/navigation";
+ *
+ * <NextNavigationProvider Link={NextLink} useRouter={useRouter} usePathname={usePathname}>
+ *   <App />
+ * </NextNavigationProvider>
+ * ```
+ */
+export declare function NextNavigationProvider({ Link: NextLink, useRouter, usePathname, children, }: NextNavigationProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/next/token-icon.d.ts

@@ -0,0 +1,3 @@
+import { TokenIconProps } from '../token-icon';
+export type { TokenIconProps };
+export declare function TokenIcon(props: TokenIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/not-found/index.d.ts

@@ -0,0 +1 @@
+export * from './not-found';

package/dist/types/components/not-found/not-found.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export interface NotFoundProps {
+    icon?: React.ReactNode;
+    message: React.ReactNode;
+    className?: string;
+}
+/**
+ * NotFound - Display a "not found" message with an optional icon
+ *
+ * @example
+ * ```tsx
+ * <NotFound
+ *   icon={<IconDeadRobot />}
+ *   message="No data found"
+ * />
+ * ```
+ */
+export declare function NotFound({ icon, message, className, }: NotFoundProps): React.ReactElement;

package/dist/types/components/options-list/index.d.ts

@@ -0,0 +1 @@
+export * from './options-list';

package/dist/types/components/options-list/options-list.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+export interface OptionsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare function OptionsList({ className, children, ...props }: OptionsListProps): React.ReactElement;
+export interface OptionsItemProps {
+    icon?: React.ReactNode;
+    title: string | React.ReactNode;
+    subTitle?: string | React.ReactNode;
+    onClick?: () => void;
+    endingIcon?: React.ReactNode;
+    last?: boolean;
+    className?: string;
+}
+export declare function OptionsItem({ icon, title, subTitle, onClick, endingIcon, last, className, }: OptionsItemProps): React.ReactElement;

package/dist/types/components/overflow/index.d.ts

@@ -0,0 +1 @@
+export * from './overflow';

package/dist/types/components/overflow/overflow.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+export interface OverflowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Overflow — a container that hides overflow content
+ */
+export declare function Overflow({ children, className, ...props }: OverflowProps): import("react/jsx-runtime").JSX.Element;
+export interface OverflowWrapProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /**
+     * @deprecated Use className instead
+     */
+    size?: number;
+}
+/**
+ * OverflowWrap — a container that wraps long words
+ */
+export declare function OverflowWrap({ children, className, size, ...props }: OverflowWrapProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/overflow-container/index.d.ts

@@ -0,0 +1 @@
+export * from './overflow-container';

package/dist/types/components/overflow-container/overflow-container.d.ts

@@ -0,0 +1,55 @@
+import type * as React from "react";
+export type Size = "default" | "small";
+export type BorderColor = "default" | "light" | "none";
+export interface OverflowContainerProps {
+    /**
+     * Size variant
+     */
+    size?: Size;
+    /**
+     * Maximum height
+     */
+    maxHeight: string;
+    /**
+     * Minimum height
+     */
+    minHeight?: string;
+    /**
+     * Border color variant
+     */
+    borderColor?: BorderColor;
+    /**
+     * Outer padding (CSS string like "14px 12px 14px 0")
+     */
+    outerPadding?: string;
+    /**
+     * Inner padding (CSS string like "0 22px 0 16px")
+     */
+    innerPadding?: string | null;
+    /**
+     * Children content
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Additional CSS class for the overflow container
+     */
+    overflowContainerClassName?: string;
+}
+/**
+ * OverflowContainer — scrollable container with border and padding
+ *
+ * @example
+ * ```tsx
+ * <OverflowContainer
+ *   maxHeight="400px"
+ *   innerPadding="16px"
+ * >
+ *   {items.map(item => <div key={item.id}>{item.content}</div>)}
+ * </OverflowContainer>
+ * ```
+ */
+export declare function OverflowContainer({ children, maxHeight, minHeight, size, borderColor, outerPadding, innerPadding, className, overflowContainerClassName, }: OverflowContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/page-title/index.d.ts

@@ -0,0 +1 @@
+export * from './page-title';

package/dist/types/components/page-title/page-title.d.ts

@@ -0,0 +1,77 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const pageTitleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    variant?: "default" | "muted" | "primary" | "gradient" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const pageTitleRootVariants: (props?: ({
+    spacing?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface PageTitleProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof pageTitleVariants> {
+    /**
+     * Optional back button element to display before the title
+     */
+    backButton?: React.ReactNode;
+    /**
+     * Optional icon to display before the title
+     */
+    icon?: React.ReactNode;
+    /**
+     * Position of the actions (mobile-first base)
+     */
+    actionsPosition?: "left" | "right";
+    /**
+     * Position of the actions from md breakpoint (≥768px). Overrides actionsPosition.
+     */
+    actionsPositionMd?: "left" | "right";
+    /**
+     * Optional action buttons to display after the title
+     */
+    actions?: React.ReactNode;
+    /**
+     * Spacing between elements
+     */
+    spacing?: "sm" | "default" | "lg";
+    /**
+     * Optional subtitle or description
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Whether to render as h1 or div
+     */
+    as?: "h1" | "h2" | "h3" | "div";
+}
+/**
+ * PageTitle component for displaying page headers with optional back button, icon, and actions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PageTitle>Dashboard</PageTitle>
+ *
+ * // With back button
+ * <PageTitle backButton={<BackButton href="/home" />}>
+ *   Settings
+ * </PageTitle>
+ *
+ * // With icon and actions
+ * <PageTitle
+ *   icon={<UserIcon />}
+ *   actions={<Button>Edit</Button>}
+ * >
+ *   Profile
+ * </PageTitle>
+ *
+ * // With subtitle
+ * <PageTitle subtitle="Manage your account settings">
+ *   Settings
+ * </PageTitle>
+ *
+ * // Different sizes and variants
+ * <PageTitle size="lg" variant="gradient">
+ *   Welcome
+ * </PageTitle>
+ * ```
+ */
+export declare const PageTitle: React.ForwardRefExoticComponent<PageTitleProps & React.RefAttributes<HTMLDivElement>>;
+export { pageTitleVariants, pageTitleRootVariants };

package/dist/types/components/percent-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './percent-indicator';

package/dist/types/components/percent-indicator/percent-indicator.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+export interface PercentIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The percentage value (already in percent form, e.g., 75 for 75%)
+     */
+    percent: number;
+    /**
+     * Number of decimal places to show
+     * @default 2
+     */
+    decimals?: number;
+    /**
+     * Show color indicator based on percentage
+     * @default true
+     */
+    showColor?: boolean;
+    /**
+     * Show progress bar below the value
+     * @default true
+     */
+    showProgressBar?: boolean;
+}
+export declare function PercentIndicator({ percent, decimals, showColor, showProgressBar, className, ...props }: PercentIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/points-icon/index.d.ts

@@ -0,0 +1 @@
+export { PointsIcon, type PointsIconProps, type PointsReward, } from './points-icon';

package/dist/types/components/points-icon/points-icon.d.ts

@@ -0,0 +1,57 @@
+import { RoundedImageProps } from '../rounded-image/rounded-image';
+import * as React from "react";
+export interface PointsReward {
+    /**
+     * Display name of the reward program
+     */
+    name: string;
+    /**
+     * Type/identifier used to resolve the icon
+     */
+    type: string;
+}
+export interface PointsIconProps extends React.HTMLAttributes<HTMLImageElement>, Omit<RoundedImageProps, "size" | "src" | "alt"> {
+    /**
+     * Reward information with name and type
+     */
+    reward: PointsReward;
+    /**
+     * Size of the icon in pixels
+     */
+    size?: number;
+    /**
+     * Base URL for static assets (defaults to Gearbox static CDN)
+     */
+    staticBaseUrl?: string;
+}
+/**
+ * PointsIcon — component for displaying reward/points program icons.
+ *
+ * @usage
+ * Use PointsIcon to display icons for various points and reward programs:
+ * - Protocol reward programs (EigenLayer, EtherFi, etc.)
+ * - Partner points systems
+ * - Incentive program badges
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PointsIcon
+ *   reward={{ name: "EigenLayer Points", type: "eigenlayer" }}
+ * />
+ *
+ * // Custom size
+ * <PointsIcon
+ *   reward={{ name: "EtherFi Points", type: "etherfi" }}
+ *   size={32}
+ * />
+ *
+ * // With custom static URL
+ * <PointsIcon
+ *   reward={{ name: "Custom Reward", type: "custom" }}
+ *   staticBaseUrl="https://my-cdn.com"
+ * />
+ * ```
+ */
+declare const PointsIcon: React.ForwardRefExoticComponent<PointsIconProps & React.RefAttributes<HTMLImageElement>>;
+export { PointsIcon };

package/dist/types/components/pool-apy-tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './pool-apy-tooltip';

package/dist/types/components/pool-apy-tooltip/pool-apy-tooltip.d.ts

@@ -0,0 +1,46 @@
+import { PoolBaseAPY } from '../compound-apy/compound-apy';
+import { LocaleKeys } from '../../locale';
+import { ExtraRewardApyData, TokenMetaInfo } from '../../types/common';
+import type * as React from "react";
+export interface PoolAPYPointsTip {
+    reward?: {
+        duration?: string;
+        condition?: string;
+        name?: string;
+        type?: string;
+    };
+    amount: string;
+    name: string;
+    tokenTitle?: string;
+    fullTip: string;
+}
+interface ExternalAPYData {
+    totalValue: number;
+    apy: number;
+    name: string;
+    tooltip: LocaleKeys;
+}
+interface APY7DAgoData {
+    totalAPY?: number;
+    /** From the original DetailedApyProps */
+    totalAPYLoading?: boolean;
+    baseAPY?: Array<PoolBaseAPY>;
+    /** Alternative loading flag used by some consumers */
+    loading7DAgo?: boolean;
+    loading?: boolean;
+    /** Allow extra fields from consumers */
+    [key: string]: unknown;
+}
+export interface PoolAPYTooltipProps {
+    children?: React.ReactNode;
+    totalAPY?: number;
+    baseAPY?: Array<PoolBaseAPY>;
+    extraAPY?: Array<ExtraRewardApyData>;
+    points?: Array<PoolAPYPointsTip>;
+    apy7DAgo?: APY7DAgoData;
+    externalAPY?: ExternalAPYData;
+    tokensList?: Record<string, TokenMetaInfo>;
+    className?: string;
+}
+export declare function PoolAPYTooltip({ children, totalAPY, baseAPY, extraAPY, points, apy7DAgo, externalAPY, tokensList, className, }: PoolAPYTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/pool-indicator-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './pool-indicator-icon';