@gearbox-protocol/ui-kit 3.12.2 → 3.13.0

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

@@ -5,9 +5,7 @@ import { TokenMetaInfo } from '../../types/common';
  * For GEAR token, use the logo symbol instead of the standard token icon.
  * The standard gear.svg has a white background circle that looks bad on dark themes.
  */
-export declare function getRewardTokenSymbol(token: TokenMetaInfo | undefined, rewardTokenSymbol: string | undefined): (string | {
-    icon: string;
-}) | undefined;
+export declare function getRewardTokenSymbol(token: TokenMetaInfo | undefined, rewardTokenSymbol: string | undefined): import('../token-icon').SymbolOrIcon | undefined;
 export interface PoolBaseAPY {
     type: "supplyAPY" | "tokenYield";
     apy: number;

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

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const iconColorVariants: (props?: ({
-    iconColor?: "muted" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "foreground" | null | undefined;
-    iconHoverColor?: "muted" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "foreground" | null | undefined;
+    iconColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconHoverColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface HelpTipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
     /** Tooltip popup content (what appears when hovering the icon). */

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

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

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

@@ -1,3 +1,4 @@
+import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
 import { default as React } from 'react';
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 /**
@@ -8,7 +9,7 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * token symbols, asset icons, currency icons, token representations.
  *
  * Props:
- * - `symbol` — token symbol/ticker (required).
+ * - `symbol` — token symbol/ticker, direct icon URL, or `IconComposite` (see `TokenMetaInfo` in `@/types/common`).
  * - `size` — icon size in pixels (defaults to 48).
  *
  * Note: Fetches icon from Gearbox static CDN based on symbol.
@@ -16,19 +17,23 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * Symbol is normalized (removes "/", spaces, "-f", converts "-" to "_", lowercased).
  * Icon displays in its original shape (not clipped).
  *
+ * **Ref behavior:** In the default single-image mode, `ref` is attached to the underlying `<img>`.
+ * In composite mode, `ref` is attached to the outer wrapper `div` (see `TokenIconProps` / `forwardRef` generic).
+ *
  * Do NOT use TokenIcon:
  * - for address identifiers (use Identicon component).
  * - for custom images or logos (use Image component).
  */
-type SymbolOrIcon = string | {
+type DirectIcon = {
     icon: string;
 };
+export type SymbolOrIcon = string | DirectIcon | IconComposite;
 export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
     symbol: SymbolOrIcon | undefined;
     size?: number;
     className?: string;
 }
-declare const TokenIcon: React.ForwardRefExoticComponent<TokenIconProps & React.RefAttributes<HTMLImageElement>>;
+declare const TokenIcon: React.ForwardRefExoticComponent<TokenIconProps & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;
 export { TokenIcon };
 /**
  * Preload token icons into browser cache.

package/dist/types/types/common.d.ts

@@ -1,8 +1,18 @@
+import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
 import { Address } from 'viem';
+export declare function isIconComposite(value: string | IconComposite | undefined | null): value is IconComposite;
 export type TokenMetaInfo = {
     symbol: string;
     title?: string;
-    icon?: string;
+    /**
+     * Token icon:
+     * - **String** — direct URL to a single raster/SVG asset. Often the best choice when the image is
+     *   baked on the server or CDN (single request, no client layering).
+     * - **`IconComposite`** — layered icon using named UI-kit presets (`stacked_full`, `centered_foreground`).
+     *
+     * Do not mix legacy alternate shapes; `icon` is a discriminated field (`string` vs `kind: "composite"`).
+     */
+    icon?: string | IconComposite;
     name?: string;
 };
 export type TokenFullData = TokenMetaInfo & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",
@@ -153,7 +153,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "14.5.10",
+    "@gearbox-protocol/sdk": "14.8.5",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",