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

package/dist/types/components/app-bar/app-bar.d.ts

@@ -0,0 +1,133 @@
+import * as React from "react";
+export interface AppBarProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBar — top-level navigation bar container.
+ *
+ * Implements the classic 3-column layout: left panel, growing center, right panel.
+ * Uses `position: relative` so that AppBarCenterContent can be absolutely positioned.
+ *
+ * @example
+ * ```tsx
+ * <AppBar>
+ *   <AppBarSidePanel>{leftContent}</AppBarSidePanel>
+ *   <AppBarCenter>
+ *     <AppBarCenterContent>{tabs}</AppBarCenterContent>
+ *   </AppBarCenter>
+ *   <AppBarSidePanel>{rightContent}</AppBarSidePanel>
+ * </AppBar>
+ * ```
+ */
+export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<HTMLElement>>;
+export interface AppBarSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarSidePanel — flex row container for left/right side items.
+ * Provides 8px gap between child elements.
+ */
+export declare const AppBarSidePanel: React.ForwardRefExoticComponent<AppBarSidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarCenter — center navigation area that grows to fill available space.
+ *
+ * Aligns itself to the bottom of the flex container (align-self: flex-end)
+ * so that the absolutely-positioned AppBarCenterContent appears below the
+ * side panel buttons.
+ */
+export declare const AppBarCenter: React.ForwardRefExoticComponent<AppBarCenterProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppBarCenterContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarCenterContent — absolutely positioned container for navigation tabs.
+ *
+ * Positioned 16px below the AppBarCenter's bottom edge, creating the effect
+ * of tabs "hanging" below the main navigation bar.
+ *
+ * Hidden on mobile (< 768px), visible on desktop (≥ 768px).
+ */
+export declare const AppBarCenterContent: React.ForwardRefExoticComponent<AppBarCenterContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppBarNavItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional attribute/badge displayed to the right of the label (e.g. "×10")
+     */
+    attribute?: React.ReactNode;
+    /**
+     * Whether to show hover background effect. Defaults to true.
+     */
+    hasHover?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * AppBarNavItem — a navigation menu item with hover background highlight.
+ *
+ * Renders the hover background as an absolutely positioned element that
+ * extends 6px above/below and 13px left/right beyond the item content,
+ * with a 15px border-radius, matching the original AppBarElement behavior.
+ *
+ * @example
+ * ```tsx
+ * <AppBarNavItem>Dashboard</AppBarNavItem>
+ * <AppBarNavItem attribute="×10">Farm</AppBarNavItem>
+ * <AppBarNavItem hasHover={false}>More</AppBarNavItem>
+ * ```
+ */
+export declare const AppBarNavItem: React.ForwardRefExoticComponent<AppBarNavItemProps & React.RefAttributes<HTMLDivElement>>;
+type AppBarButtonSize = "sm" | "md" | "lg";
+export interface AppBarHamburgerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: AppBarButtonSize;
+}
+/**
+ * AppBarHamburgerButton — outline button with hamburger (bars) icon.
+ * Used on mobile to open the navigation drawer.
+ */
+export declare const AppBarHamburgerButton: React.ForwardRefExoticComponent<AppBarHamburgerButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AppBarDotsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: AppBarButtonSize;
+}
+/**
+ * AppBarDotsButton — outline button with three horizontal dots icon.
+ * Used to open the "more options" dropdown in the AppBar.
+ */
+export declare const AppBarDotsButton: React.ForwardRefExoticComponent<AppBarDotsButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AppBarMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarMenuItem — a single item in the AppBar extra menus (hamburger / dots).
+ *
+ * Styled to match the original DropdownItem with 12px padding, 8px border-radius,
+ * and gray-80 hover background.
+ *
+ * @example
+ * ```tsx
+ * <AppBarDropdownMenu>
+ *   <AppBarMenuItem onClick={handler}>Dashboard</AppBarMenuItem>
+ *   <AppBarMenuItem onClick={handler}>Settings</AppBarMenuItem>
+ * </AppBarDropdownMenu>
+ * ```
+ */
+export declare const AppBarMenuItem: React.ForwardRefExoticComponent<AppBarMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppBarDropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarDropdownMenu — the container for AppBarMenuItems.
+ *
+ * Styled to match the original DropdownMenu with gray-40 background,
+ * rounded-xl, shadow, and 4px padding.
+ *
+ * @example
+ * ```tsx
+ * <AppBarDropdownMenu>
+ *   <AppBarMenuItem>Item 1</AppBarMenuItem>
+ *   <AppBarMenuItem>Item 2</AppBarMenuItem>
+ * </AppBarDropdownMenu>
+ * ```
+ */
+export declare const AppBarDropdownMenu: React.ForwardRefExoticComponent<AppBarDropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/app-bar/index.d.ts

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface ApyProps {
+    /** APY value (percentage, e.g. 5.23 for 5.23%). When null, naText is shown. */
+    apy: number | null;
+    /** Tooltip trigger content. When provided, APY is shown in a tooltip popup on hover. @default FormattedMessageTyped "components.APY.tip" */
+    tooltip?: ReactNode;
+    /** Text shown when apy is null. @default "N/A" */
+    naText?: ReactNode;
+}
+/**
+ * Apy — displays an APY percentage with optional tooltip.
+ * When tooltip is set, the trigger shows the tooltip content and the popup shows the APY in an AlertBadge (matches interface Apy).
+ *
+ * @usage
+ * Use for APY display; default tooltip shows intl tip message, popup shows the value.
+ *
+ * @example
+ * ```tsx
+ * <Apy apy={5.23} />
+ * <Apy apy={null} naText="—" />
+ * <Apy apy={10} tooltip={<span>Custom trigger</span>} />
+ * ```
+ */
+export declare function Apy({ apy, tooltip, naText, }: ApyProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/types/components/arc-loader/arc-loader.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface ArcLoaderProps {
+    /** Size of the loader in pixels (width and height). */
+    size?: number;
+    /** Color of the arc (used for the gradient end). */
+    color?: string;
+    /** Stroke width of the arc in pixels. */
+    strokeWidth?: number;
+    /** Animation duration (e.g. "1s", "0.8s"). */
+    speed?: string;
+    /** Additional CSS class for the container. */
+    className?: string;
+}
+/**
+ * ArcLoader — circular loading indicator with an animated arc and gradient stroke.
+ *
+ * @usage
+ * Use for loading states where a single animated arc is preferred over a full spinner.
+ *
+ * @example
+ * ```tsx
+ * <ArcLoader />
+ * <ArcLoader size={80} strokeWidth={4} color="hsl(var(--primary))" speed="0.8s" />
+ * ```
+ */
+declare const ArcLoader: React.ForwardRefExoticComponent<ArcLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { ArcLoader };

package/dist/types/components/arc-loader/index.d.ts

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

package/dist/types/components/asset-line/asset-line.d.ts

@@ -0,0 +1,68 @@
+import { NetworkType } from '@gearbox-protocol/sdk';
+import { TokenMetaInfo } from '../../types/common';
+import * as React from "react";
+type Sizes = "default" | "sm" | "md" | "lg";
+/**
+ * AssetLineBaseProps — base props for AssetLine component.
+ */
+export interface AssetLineBaseProps {
+    symbolMaxLength?: number;
+    descriptionMaxLength?: number;
+    size?: Sizes;
+    iconSize?: Sizes;
+    gapSize?: Sizes;
+    hideValue?: boolean;
+}
+/**
+ * AssetLineProps — props for AssetLine component.
+ */
+export interface AssetLineProps extends AssetLineBaseProps {
+    token: TokenMetaInfo | undefined;
+    tokenLabel?: string;
+    tokenDescription?: React.ReactNode;
+    chainId?: number;
+    network?: NetworkType;
+    value: React.ReactNode;
+    valueDescription?: React.ReactNode;
+    last: boolean;
+    onSelect?: () => void;
+    /**
+     * Whether to show rounded corners on hover and inset borders.
+     * When true, hover effect has rounded corners and borders don't extend to edges.
+     * Defaults to true.
+     */
+    rounded?: boolean;
+    className?: string;
+    height?: string;
+}
+/**
+ * AssetLine — component for displaying asset information in a table row format.
+ *
+ * @usage
+ * Use AssetLine to display asset data in tables:
+ * token lists, asset rows, portfolio tables, asset selection lists.
+ *
+ * Props:
+ * - `token` — token data object (TokenMetaInfo).
+ * - `tokenLabel` — custom label for token (overrides token.title).
+ * - `tokenDescription` — additional description displayed below token symbol.
+ * - `chainId` — chain ID for token network.
+ * - `network` — network type for token.
+ * - `value` — value to display in right column (required).
+ * - `valueDescription` — additional description displayed below value.
+ * - `last` — if true, removes bottom border (required).
+ * - `onSelect` — callback function for row selection (makes row clickable).
+ * - `size` — row size: "default", "sm", "md", "lg" (defaults to "default").
+ * - `iconSize` — icon size override (defaults to size).
+ * - `gapSize` — gap size between elements (defaults to size).
+ * - `symbolMaxLength` — max length for symbol truncation.
+ * - `descriptionMaxLength` — max length for description truncation.
+ * - `hideValue` — if true, hides the value column (defaults to false).
+ * - `rounded` — if true, hover has rounded corners and borders have insets (defaults to false).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Uses GridTableRow and GridTableCell internally. Displays token icon, symbol, and value in a two-column layout.
+ * When onSelect is provided, row becomes clickable with cursor pointer.
+ */
+export declare const AssetLine: React.ForwardRefExoticComponent<AssetLineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/asset-line/index.d.ts

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

package/dist/types/components/assets-list-cell/assets-list-cell.d.ts

@@ -0,0 +1,112 @@
+import { default as React } from 'react';
+import { Address } from 'viem';
+type Mode = "default" | "cascade";
+interface CommonOptions {
+    mode?: Mode;
+    showIconTooltip?: boolean;
+    otherTooltip?: React.ReactNode;
+    onOtherClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Single asset cell props (new API)
+ */
+export interface SingleAssetCellProps {
+    /**
+     * The asset address
+     */
+    assetAddress: Address;
+    /**
+     * The asset symbol
+     */
+    symbol: string;
+    /**
+     * Optional comment/description to display next to the symbol
+     */
+    comment?: string;
+    /**
+     * Optional explorer URL for the asset
+     */
+    explorerUrl?: string;
+    /**
+     * Icon symbol to use if it doesn't match the asset symbol
+     */
+    iconSymbol?: string;
+    /**
+     * Size of the token icon
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    balances?: undefined;
+    tokensList?: undefined;
+}
+/**
+ * Multi-asset list cell props (legacy API, compatible with @gearbox-protocol/interface)
+ */
+export interface MultiAssetCellProps {
+    /**
+     * List of asset balances (either objects with token address or plain addresses)
+     */
+    balances: Array<{
+        token: Address;
+    }> | Array<Address>;
+    /**
+     * Token data keyed by address
+     */
+    tokensList: Record<Address, {
+        symbol: string;
+        title?: string;
+    }>;
+    /**
+     * Maximum number of assets to display before showing "+N"
+     * @default 3
+     */
+    maxAssets?: number;
+    /**
+     * Size of token icons
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Display and interaction options
+     */
+    options?: CommonOptions;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    assetAddress?: undefined;
+    symbol?: undefined;
+}
+export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps;
+/**
+ * AssetsListCell — displays asset icons in a list/grid layout
+ *
+ * Supports two APIs:
+ * 1. Single asset (new): `<AssetsListCell assetAddress="0x..." symbol="ETH" />`
+ * 2. Multi-asset list (legacy): `<AssetsListCell balances={[...]} tokensList={...} />`
+ *
+ * @example
+ * ```tsx
+ * // Single asset
+ * <AssetsListCell
+ *   assetAddress="0x1234..."
+ *   symbol="ETH"
+ *   comment="Ethereum"
+ * />
+ *
+ * // Multi-asset list (cascade mode)
+ * <AssetsListCell
+ *   balances={[{ token: "0x1234..." }, { token: "0x5678..." }]}
+ *   tokensList={{ "0x1234...": { symbol: "ETH" }, "0x5678...": { symbol: "USDC" } }}
+ *   maxAssets={5}
+ *   iconSize={24}
+ *   options={{ mode: "cascade" }}
+ * />
+ * ```
+ */
+export declare function AssetsListCell(props: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/assets-list-cell/index.d.ts

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

package/dist/types/components/assets-ratio/assets-ratio.d.ts

@@ -0,0 +1,11 @@
+import { Asset } from '@gearbox-protocol/sdk';
+import * as React from "react";
+export interface AssetsRatioProps {
+    assets: Array<Asset & {
+        balanceInUSD: bigint;
+    }>;
+    /** Labels for tooltips (e.g., token symbols). Index corresponds to asset index */
+    labels?: string[];
+    className?: string;
+}
+export declare function AssetsRatio({ assets, labels, className, }: AssetsRatioProps): React.ReactElement;

package/dist/types/components/assets-ratio/index.d.ts

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

package/dist/types/components/auth/connect-required.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { Address } from 'viem';
+import { TabButtonProps } from '../buttons';
+/**
+ * ConnectRequired — component that requires a connected wallet to display content.
+ *
+ * @usage
+ * Use ConnectRequired to protect content that requires a wallet connection:
+ * action buttons, editable content, owner-specific features.
+ *
+ * Props:
+ * - `owner` — optional address that must match connected address to display content.
+ * - `children` — content displayed when connected (required).
+ * - All Button props are supported (variant, size, className, onClick, etc.).
+ *
+ * Behavior:
+ * - If user is connected: renders children (or "You are not the author" if owner mismatch).
+ * - If wallet not connected: shows "Connect Wallet" button that calls `openConnectModal` from {@link WalletUIProvider}.
+ *
+ * When no {@link WalletUIProvider} is mounted, the gate is skipped and `children` are rendered (graceful degradation).
+ *
+ * Note: Uses TabButton by default, but switches to Button if custom props are provided.
+ *
+ * Do NOT use ConnectRequired:
+ * - for public content that does not require a wallet (render content directly).
+ */
+export interface ConnectRequiredProps extends TabButtonProps {
+    owner?: Address;
+    children: ReactNode;
+    hideConnectButton?: boolean;
+}
+export declare function ConnectRequired({ children, owner, hideConnectButton, ...customProps }: ConnectRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -0,0 +1,3 @@
+export * from './connect-required';
+export * from './signin-required';
+export * from './wallet-ui-context';

package/dist/types/components/auth/signin-required.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { Address } from 'viem';
+import { TabButtonProps } from '../buttons';
+/**
+ * SignInRequired — component that requires SIWE authentication to display content.
+ *
+ * @usage
+ * Use SignInRequired to protect content that requires authentication:
+ * action buttons, editable content, owner-specific features, authenticated actions.
+ *
+ * Props:
+ * - `owner` — optional address that must match signed-in address to display content.
+ * - `children` — content displayed when authenticated (required).
+ * - `skipSignIn` — if true, skips authentication requirement (defaults to false).
+ * - All Button props are supported (variant, size, className, onClick, etc.).
+ *
+ * Behavior:
+ * - If `skipSignIn={true}` or user is signed in: renders children (or "You are not the author" if owner mismatch).
+ * - If wallet connected but not signed in: shows "Sign In as {address}" or "Try Again".
+ * - If wallet not connected: shows "Connect Wallet".
+ *
+ * Requires {@link WalletUIProvider} with SIWE state (e.g. {@link ConnectKitWalletAdapter} from
+ * `@gearbox-protocol/ui-kit/connectkit`). Without a provider, the sign-in gate is skipped and `children`
+ * are rendered (graceful degradation).
+ *
+ * Note: Uses TabButton by default, but switches to Button if custom props are provided.
+ *
+ * Do NOT use SignInRequired:
+ * - for public content that does not require authentication (render content directly).
+ */
+export interface SignInRequiredProps extends TabButtonProps {
+    owner?: Address;
+    children: ReactNode;
+    skipSignIn?: boolean;
+    hideConnectButton?: boolean;
+}
+export declare function SignInRequired({ children, owner, skipSignIn, hideConnectButton, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/components/auth/wallet-ui-context.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * SIWE-related state exposed by a wallet UI adapter (e.g. ConnectKit).
+ */
+export interface WalletUISIWEState {
+    isSignedIn: boolean;
+    isRejected: boolean;
+    isLoading: boolean;
+    data: {
+        address?: string;
+    } | null;
+}
+/**
+ * Values provided by {@link WalletUIProvider} so auth helpers work without importing ConnectKit.
+ */
+export interface WalletUIContextValue {
+    openConnectModal: () => void;
+    openSIWE?: () => void;
+    siwe?: WalletUISIWEState;
+}
+export interface WalletUIProviderProps {
+    value: WalletUIContextValue;
+    children?: ReactNode;
+}
+/**
+ * Supplies wallet modal + optional SIWE actions for {@link ConnectRequired}, {@link SignInRequired},
+ * and editable tables that use them.
+ *
+ * Use {@link ConnectKitWalletAdapter} from `@gearbox-protocol/ui-kit/connectkit` when using ConnectKit,
+ * or provide your own `value` (e.g. RainbowKit `useConnectModal`).
+ */
+export declare function WalletUIProvider({ value, children }: WalletUIProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the wallet UI adapter value, or `null` when no {@link WalletUIProvider} is mounted.
+ */
+export declare function useWalletUI(): WalletUIContextValue | null;

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

@@ -0,0 +1,15 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+/**
+ * Avatar — user profile image with fallback
+ */
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * AvatarImage — the image inside Avatar
+ */
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback — fallback content when image fails to load
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarFallback, AvatarImage };

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

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

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

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Badge — component for displaying labels, tags, or status indicators.
+ *
+ * @usage
+ * Use Badge to display labels, tags, or status indicators:
+ * status badges, category tags, count indicators, metadata labels.
+ *
+ * Variants (variant):
+ * - `default` — primary badge with background and shadow.
+ * - `secondary` — secondary badge with muted background.
+ * - `destructive` — destructive badge with red background for errors/warnings.
+ * - `outline` — outlined badge with border only.
+ *
+ * Note: Prefer using this component instead of native HTML div element for badges.
+ *
+ * Do NOT use Badge:
+ * - for interactive elements (use Button instead).
+ * - for large text content (use appropriate text components).
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

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

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

package/dist/types/components/base-link/base-link.d.ts

@@ -0,0 +1,64 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const linkVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    variant?: "default" | "unset" | "underlined" | null | undefined;
+    color?: "main" | "default" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BaseLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">, VariantProps<typeof linkVariants> {
+    /**
+     * Renders the link as a child element using Radix Slot
+     * Useful for working with routing libraries like Next.js Link or React Router Link
+     *
+     * @example
+     * ```tsx
+     * // With Next.js Link
+     * <BaseLink asChild>
+     *   <Link href="/path">Link</Link>
+     * </BaseLink>
+     *
+     * // With React Router Link
+     * <BaseLink asChild>
+     *   <Link to="/path">Link</Link>
+     * </BaseLink>
+     * ```
+     */
+    asChild?: boolean;
+    /**
+     * Indicates if this is an external link
+     * Automatically adds target="_blank" and rel="noopener noreferrer"
+     */
+    external?: boolean;
+}
+/**
+ * BaseLink component for creating links with optional external link handling
+ *
+ * This component works in both Next.js and non-Next.js projects:
+ * - In Next.js: use `asChild` prop to wrap Next.js Link component
+ * - In other frameworks: use `href` prop directly or wrap routing library links with `asChild`
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (works in any React project)
+ * <BaseLink href="/dashboard">Dashboard</BaseLink>
+ *
+ * // External link
+ * <BaseLink href="https://example.com" external>Example</BaseLink>
+ *
+ * // With Next.js Link (recommended for Next.js projects)
+ * import NextLink from "next/link";
+ *
+ * <BaseLink asChild>
+ *   <NextLink href="/dashboard">Dashboard</NextLink>
+ * </BaseLink>
+ *
+ * // With React Router Link
+ * import { Link as RouterLink } from "react-router-dom";
+ *
+ * <BaseLink asChild>
+ *   <RouterLink to="/dashboard">Dashboard</RouterLink>
+ * </BaseLink>
+ * ```
+ */
+declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { BaseLink };

package/dist/types/components/base-link/index.d.ts

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

package/dist/types/components/block-sync/block-sync.d.ts

@@ -0,0 +1,8 @@
+import { BlockSyncProps } from '../../types/footer';
+import type * as React from "react";
+/**
+ * BlockSync component - displays network synchronization status
+ * Shows a colored indicator that reflects the time since last block update
+ * On hover, displays detailed information about synced blocks for each chain
+ */
+export declare function BlockSync({ blockByChain, explorerAddresses, networkById, }: BlockSyncProps): React.ReactElement;

package/dist/types/components/block-sync/index.d.ts

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