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

package/dist/types/components/text-button/text-button.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const textColorVariants: (props?: ({
+    buttonColor?: "primaryDashed" | "secondaryDashed" | "empty" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const layoutVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    width?: "compact" | "wide" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof layoutVariants>, VariantProps<typeof textColorVariants> {
+    /**
+     * Icon element (new API)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Element type to render as
+     */
+    as?: "button" | "a" | "div" | "span";
+}
+/**
+ * TextButton — text-only button with optional dashed underline (matches interface TextButton)
+ *
+ * @example
+ * ```tsx
+ * <TextButton onClick={handleClick} color="primaryDashed">
+ *   Click me
+ * </TextButton>
+ *
+ * <TextButton icon={<Icon />} size="sm" color="secondaryDashed">
+ *   Edit
+ * </TextButton>
+ * ```
+ */
+export declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

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

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

@@ -0,0 +1,40 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const textareaVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * TextareaProps — props for Textarea component.
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+}
+/**
+ * Textarea — multi-line text input component with size variants.
+ *
+ * @usage
+ * Use Textarea for multi-line text input:
+ * comments, descriptions, long-form text, message inputs, bytecodes.
+ *
+ * Props:
+ * - `size` — textarea size: "sm", "default", "lg" (defaults to "default").
+ * - `variant` — visual variant: "default", "error" (defaults to "default").
+ * - All standard HTML textarea props are supported (value, onChange, placeholder, rows, etc.).
+ *
+ * Note: Minimum height varies by size (60px for sm, 80px for default, 120px for lg).
+ * Uses standard form input styling with focus states.
+ * Prefer using this component instead of native HTML textarea element.
+ *
+ * Do NOT use Textarea:
+ * - for single-line text input (use Input component).
+ * - for rich text editing (use appropriate rich text editor components).
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Enter description" />
+ * <Textarea size="lg" rows={10} />
+ * <Textarea variant="error" />
+ * ```
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea, textareaVariants };

package/dist/types/components/theme-provider.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+/**
+ * Theme types
+ */
+export type Theme = "light" | "dark" | "system";
+/**
+ * Theme configuration interface
+ */
+export interface ThemeConfig {
+    defaultTheme?: Theme;
+    storageKey?: string;
+    attribute?: "class" | "data-theme";
+    enableColorScheme?: boolean;
+}
+/**
+ * Theme context
+ */
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    actualTheme: "light" | "dark";
+}
+/**
+ * Hook for using theme
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Theme provider - DefaultGlobalStyle analog
+ * Manages application theme and applies global styles
+ */
+export declare function ThemeProvider({ children, defaultTheme, storageKey, attribute, enableColorScheme, }: ThemeConfig & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/theme-toggle/index.d.ts

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

package/dist/types/components/theme-toggle/theme-toggle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Theme toggle component
+ * Example usage of ThemeProvider
+ */
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/time-to-liquidation/index.d.ts

@@ -0,0 +1 @@
+export { TimeToLiquidation, type TimeToLiquidationProps, } from './time-to-liquidation';

package/dist/types/components/time-to-liquidation/time-to-liquidation.d.ts

@@ -0,0 +1,24 @@
+import { TTLZones } from '../../utils';
+import * as React from "react";
+export interface TimeToLiquidationProps {
+    /** Time to liquidation in milliseconds (bigint or number). */
+    timeToLiquidation: bigint | number | null;
+    /** TTL zone for status dot (matches A TTLZones). */
+    ttlZone?: TTLZones;
+    /** Extra class name. */
+    className?: string;
+}
+/**
+ * TimeToLiquidation — displays time remaining until liquidation (matches interface).
+ *
+ * @usage
+ * Use next to health/liquidation info to show remaining time and optional zone dot.
+ *
+ * @example
+ * ```tsx
+ * <TimeToLiquidation timeToLiquidation={86400000} ttlZone="good" />
+ * <TimeToLiquidation timeToLiquidation={null} />
+ * ```
+ */
+declare const TimeToLiquidation: React.ForwardRefExoticComponent<TimeToLiquidationProps & React.RefAttributes<HTMLDivElement>>;
+export { TimeToLiquidation };

package/dist/types/components/tip-card/index.d.ts

@@ -0,0 +1 @@
+export { TipCard, type TipCardProps, tipCardVariants } from './tip-card';

package/dist/types/components/tip-card/tip-card.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const tipCardVariants: (props?: ({
+    backgroundColor?: "dark" | "transparent" | "light" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    textColor?: "unset" | "dark" | "light" | null | undefined;
+    borderColor?: "none" | "dark" | "light" | "gradient" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const indicatorVariants: (props?: ({
+    attributeColor?: "success" | "warning" | "primary" | "alert" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TipCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tipCardVariants>, VariantProps<typeof indicatorVariants> {
+}
+/**
+ * TipCard — card component for displaying tips, warnings, and information.
+ *
+ * @usage
+ * TipCard is a lightweight card container with optional styling variants:
+ * - `backgroundColor`: `transparent` | `light` | `dark`
+ * - `textColor`: `unset` | `light` | `dark`
+ * - `borderColor`: `light` | `dark` | `gradient` | `none`
+ * - `attributeColor`: adds a 4px left stripe (via `::after`): `warning` | `alert` | `success` | `primary`
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TipCard borderColor="light" backgroundColor="dark" textColor="light">
+ *   This is a tip card.
+ * </TipCard>
+ *
+ * // Gradient border
+ * <TipCard borderColor="gradient">
+ *   This card has a gradient border.
+ * </TipCard>
+ *
+ * // With attribute stripe (4px on the left)
+ * <TipCard attributeColor="warning">
+ *   Warning: please review before proceeding.
+ * </TipCard>
+ * ```
+ */
+declare const TipCard: React.ForwardRefExoticComponent<TipCardProps & React.RefAttributes<HTMLDivElement>>;
+export { TipCard, tipCardVariants };

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

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

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+declare const toggleTrackVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "onChange" | "type"> {
+    /** Controlled checked state */
+    checked: boolean;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Callback when the user toggles; receives the next state */
+    onChange?: (nextState: boolean) => void;
+    /** Additional class name for the root label */
+    className?: string;
+}
+/**
+ * Toggle — switch control for boolean state (on/off).
+ * Matches interface (A): 32×20 track, 16px thumb, gray track / accent when checked.
+ *
+ * @usage
+ * Use for: settings, options, or any on/off state where a switch is preferred over a checkbox.
+ *
+ * @example
+ * ```tsx
+ * <Toggle checked={enabled} onChange={setEnabled} />
+ * <Toggle checked={value} onChange={setValue} disabled />
+ * ```
+ */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export { Toggle, toggleTrackVariants };

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

@@ -0,0 +1 @@
+export { preloadTokenIcons, TokenIcon, type TokenIconProps, } from './token-icon';

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

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { RoundedImageProps } from '../rounded-image/rounded-image';
+/**
+ * TokenIcon — component for displaying token/asset icons.
+ *
+ * @usage
+ * Use TokenIcon to display token or asset icons:
+ * token symbols, asset icons, currency icons, token representations.
+ *
+ * Props:
+ * - `symbol` — token symbol/ticker (required).
+ * - `size` — icon size in pixels (defaults to 48).
+ *
+ * Note: Fetches icon from Gearbox static CDN based on symbol.
+ * Automatically falls back to default icon if token icon is not found.
+ * Symbol is normalized (removes "/", spaces, "-f", converts "-" to "_", lowercased).
+ * Icon displays in its original shape (not clipped).
+ *
+ * Do NOT use TokenIcon:
+ * - for address identifiers (use Identicon component).
+ * - for custom images or logos (use Image component).
+ */
+type SymbolOrIcon = string | {
+    icon: string;
+};
+export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
+    symbol: SymbolOrIcon | undefined;
+    size?: number;
+    className?: string;
+}
+declare const TokenIcon: React.ForwardRefExoticComponent<TokenIconProps & React.RefAttributes<HTMLImageElement>>;
+export { TokenIcon };
+/**
+ * Preload token icons into browser cache.
+ * Call this function early in your app initialization with the list of token symbols.
+ *
+ * @example
+ * ```tsx
+ * // In your app initialization or data loading
+ * import { preloadTokenIcons } from '@gearbox-protocol/ui-kit';
+ *
+ * const tokens = ['WETH', 'USDC', 'DAI', 'WBTC'];
+ * preloadTokenIcons(tokens);
+ * ```
+ */
+export declare function preloadTokenIcons(symbols: SymbolOrIcon[]): void;

package/dist/types/components/token-symbol/index.d.ts

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

package/dist/types/components/token-symbol/token-symbol.d.ts

@@ -0,0 +1,74 @@
+import { NetworkType } from '@gearbox-protocol/sdk';
+import { VariantProps } from 'class-variance-authority';
+import { default as React } from 'react';
+import { TokenIconProps } from '../token-icon';
+import { TokenMetaInfo } from '../../types/common';
+declare const tokenSymbolVariants: (props?: ({
+    marginSize?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof tokenSymbolVariants> {
+    /**
+     * Token data object or symbol string
+     */
+    token?: TokenMetaInfo | string;
+    /**
+     * Optional override title to display
+     */
+    title?: React.ReactNode;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Optional comment to display next to the symbol
+     */
+    comment?: string;
+    /**
+     * Whether to show the token icon
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Whether to show the token symbol text
+     * @default false
+     */
+    showSymbol?: boolean;
+    /**
+     * Size of the token icon in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Chain ID for network badge
+     */
+    chainId?: number;
+    /**
+     * Network type for network badge
+     */
+    network?: NetworkType;
+    /**
+     * Maximum length for symbol truncation
+     */
+    maxLength?: number;
+}
+export declare function getSymbolOrIcon(token: TokenSymbolProps["token"]): TokenIconProps["symbol"] | undefined;
+/**
+ * TokenSymbol component for displaying token symbols with optional icon and comment
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with token object
+ * <TokenSymbol token={tokenData} />
+ *
+ * // With symbol string
+ * <TokenSymbol token="ETH" />
+ *
+ * // Without icon
+ * <TokenSymbol token="WETH" showIcon={false} />
+ *
+ * // With symbol text
+ * <TokenSymbol token="WETH" showSymbol={true} />
+ * ```
+ */
+declare const TokenSymbol: React.ForwardRefExoticComponent<TokenSymbolProps & React.RefAttributes<HTMLDivElement>>;
+export { TokenSymbol };

package/dist/types/components/token-template/index.d.ts

@@ -0,0 +1 @@
+export { TokenTemplate, type TokenTemplateProps } from './token-template';

package/dist/types/components/token-template/token-template.d.ts

@@ -0,0 +1,52 @@
+import { TokenFullData } from '../../types/common';
+import { ParseSmallNumberResult } from '../../utils';
+import { negativeTokenTemplate, tokenTemplateString } from '../../utils/templates';
+import { FormattedNumberStringProps } from '../formatted-number';
+import type * as React from "react";
+export interface TokenTemplateProps extends Omit<FormattedNumberStringProps, "value"> {
+    value: bigint | string | number | undefined;
+    token: Omit<TokenFullData, "address"> | undefined;
+    precision?: number;
+    maxLength?: number;
+    formatter?: (amount: bigint | string | number | undefined, decimals: number, precision?: number) => string | ParseSmallNumberResult;
+    noFormattedAmountValue?: React.ReactNode;
+    showSymbol?: boolean;
+}
+/**
+ * TokenTemplate — component for displaying token amounts with symbol.
+ *
+ * @usage
+ * Use TokenTemplate to display formatted token amounts:
+ * - Wallet balances
+ * - Transaction amounts
+ * - Pool values
+ * - Any BigNumber token values
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TokenTemplate
+ *   value={1500000000000000000n}
+ *   token={{ title: "ETH", decimals: 18 }}
+ * />
+ * // Output: "1.5 ETH"
+ *
+ * // With precision
+ * <TokenTemplate
+ *   value={1000000n}
+ *   token={{ title: "USDC", decimals: 6 }}
+ *   precision={2}
+ * />
+ * // Output: "1.00 USDC"
+ *
+ * // Negative values
+ * <TokenTemplate
+ *   value={-1500000000000000000n}
+ *   token={{ title: "ETH", decimals: 18 }}
+ *   allowNegative
+ * />
+ * // Output: "-1.5 ETH"
+ * ```
+ */
+export declare function TokenTemplate({ value, token, precision, formatter, noFormattedAmountValue, showSymbol, maxLength, ...rest }: TokenTemplateProps): import("react/jsx-runtime").JSX.Element;
+export { tokenTemplateString, negativeTokenTemplate };

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

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

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

@@ -0,0 +1,92 @@
+import { TokenFullData } from '../../types/common';
+import * as React from "react";
+/**
+ * Display mode for the tokens list
+ * - default: tokens displayed side by side with small gap
+ * - cascade: tokens overlap each other (stacked effect)
+ */
+export type TokensListCellMode = "default" | "cascade";
+/**
+ * Asset balance type - either an object with token address or just an address string
+ */
+export type AssetBalance = {
+    token: `0x${string}`;
+} | `0x${string}`;
+/**
+ * Common options for TokensListCell
+ */
+export interface TokensListCellOptions {
+    /**
+     * Display mode
+     * @default "default"
+     */
+    mode?: TokensListCellMode;
+    /**
+     * Whether to show tooltip with token name on icon hover
+     * @default true
+     */
+    showIconTooltip?: boolean;
+    /**
+     * Custom tooltip content for "+N" indicator
+     */
+    otherTooltip?: React.ReactNode;
+    /**
+     * Click handler for "+N" indicator
+     */
+    onOtherClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+/**
+ * Props for TokensListCell component
+ */
+export interface TokensListCellProps {
+    /**
+     * Array of asset balances (token addresses or objects with token field)
+     */
+    balances: AssetBalance[];
+    /**
+     * Token data dictionary keyed by address
+     */
+    tokensList: Record<`0x${string}`, TokenFullData>;
+    /**
+     * Maximum number of tokens to display before showing "+N"
+     * @default 3
+     */
+    maxAssets?: number;
+    /**
+     * Size of token icons in pixels
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Additional display options
+     */
+    options?: TokensListCellOptions;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * TokensListCell — displays a list of token icons with overflow indicator
+ *
+ * Shows up to `maxAssets` token icons, with a "+N" indicator for remaining tokens.
+ * Supports two display modes: side-by-side (default) or cascading/stacked.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TokensListCell
+ *   balances={[{ token: "0x..." }, { token: "0x..." }]}
+ *   tokensList={tokensMap}
+ * />
+ *
+ * // Cascade mode with custom max
+ * <TokensListCell
+ *   balances={assets}
+ *   tokensList={tokensMap}
+ *   maxAssets={5}
+ *   options={{ mode: "cascade" }}
+ * />
+ * ```
+ */
+export declare function TokensListCell({ balances, tokensList, maxAssets, iconSize, options, className, }: TokensListCellProps): React.ReactElement;

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

@@ -0,0 +1,2 @@
+export * from './simple-tooltip';
+export * from './tooltip';

package/dist/types/components/tooltip/simple-tooltip.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+export type SimpleTooltipPlacement = "top" | "bottom" | "right" | "left";
+export type SimpleTooltipType = "tooltip" | "modal-tooltip";
+export type SimpleTooltipTrigger = "hover" | "click";
+export interface SimpleTooltipProps {
+    /**
+     * Tooltip popup content — what appears inside the floating panel.
+     */
+    children: React.ReactNode;
+    /**
+     * Trigger element — what the user hovers over or clicks to reveal the tooltip.
+     *
+     * Named `title` for backward compatibility with the legacy
+     * `@gearbox-protocol/interface` Tooltip API.
+     */
+    title: React.ReactNode;
+    /** Placement relative to the trigger element. @default "top" */
+    placement?: SimpleTooltipPlacement;
+    /** How the tooltip is triggered. @default "hover" */
+    trigger?: SimpleTooltipTrigger;
+    /** Show an arrow pointing at the trigger. @default true */
+    triangle?: boolean;
+    /** Delay before the tooltip shows (ms, hover mode only). @default 0 */
+    delayShow?: number;
+    /** Maximum width of the tooltip panel. @default "200px" */
+    maxWidth?: string;
+    /** Minimum width of the tooltip panel. */
+    minWidth?: string;
+    /**
+     * Visual type:
+     * - `"tooltip"` — dark semi-transparent background, small text (default)
+     * - `"modal-tooltip"` — transparent background, no padding (for rich content)
+     *
+     * @default "tooltip"
+     */
+    type?: SimpleTooltipType;
+    /** Controlled open state. When provided the component becomes controlled. */
+    open?: boolean;
+    /** Called when the open state should change (controlled mode). */
+    onOpenChange?: (open: boolean) => void;
+    /** Extra className applied to the floating content container. */
+    className?: string;
+    /** Extra className applied to the trigger wrapper `<span>`. */
+    triggerClassName?: string;
+    /** Whether to use the title as the trigger element. */
+    useTitleAsTrigger?: boolean;
+}
+/**
+ * `SimpleTooltip` — a drop-in replacement for the legacy
+ * `@gearbox-protocol/interface` Tooltip component.
+ *
+ * Built on Radix UI Tooltip primitives and styled with Tailwind CSS.
+ *
+ * The API intentionally mirrors the legacy component:
+ * `title` = trigger element, `children` = popup content.
+ *
+ * Supports **hover** (default) and **click** trigger modes.
+ * Nested tooltips (tooltip inside tooltip content) are supported:
+ * when a child tooltip opens, the parent stays open until the child closes.
+ *
+ * @example
+ * ```tsx
+ * // Hover tooltip (default behaviour)
+ * <SimpleTooltip title={<span>Hover me</span>} placement="top">
+ *   Some helpful text
+ * </SimpleTooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Click-triggered tooltip
+ * <SimpleTooltip title={<button>Click me</button>} trigger="click" placement="bottom">
+ *   <div>Rich interactive content</div>
+ * </SimpleTooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Nested tooltip
+ * <SimpleTooltip title={<span>Outer</span>}>
+ *   Outer content with <SimpleTooltip title={<span>inner trigger</span>}>Inner tooltip</SimpleTooltip>
+ * </SimpleTooltip>
+ * ```
+ */
+export declare function SimpleTooltip({ children, title, placement, trigger, triangle, delayShow, maxWidth, minWidth, type, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, triggerClassName, useTitleAsTrigger, }: SimpleTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SimpleTooltip {
+    var displayName: string;
+}

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

@@ -0,0 +1,25 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+/**
+ * Tooltip — tooltip component and its subcomponents.
+ *
+ * @usage
+ * Use Tooltip to display additional information on hover:
+ * help text, descriptions, hints, additional context.
+ *
+ * Tooltip Components:
+ * - `TooltipProvider` — provider component that wraps tooltip usage.
+ * - `Tooltip` — root component (TooltipPrimitive.Root).
+ * - `TooltipTrigger` — element that triggers the tooltip.
+ * - `TooltipContent` — tooltip content container.
+ *
+ * Note: All components are based on Radix UI Tooltip primitive.
+ * TooltipContent uses primary background and primary-foreground text color.
+ * Supports animations and positioning.
+ * Prefer using these components instead of @radix-ui/react-tooltip directly.
+ */
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };