@gearbox-protocol/ui-kit 3.13.0-next.1 → 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/layout/main-aside-layout/main-aside-layout.d.ts

@@ -4,55 +4,14 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     /** Sidebar; rendered to the left or right of the main column (`asidePosition`). */
     aside?: React.ReactNode;
     asidePosition?: "left" | "right";
-    /** Classes for the outer `<aside>` element. */
+    /** Classes for the outer `<aside>` (width, sticky, responsive visibility, etc.). */
     asideClassName?: string;
-    /** Classes for the inner main column `<div>`. */
-    mainClassName?: string;
-    /**
-     * Ref forwarded to the main column `<div>`.
-     * Use for ResizeObserver-based width tracking (e.g. chart resize key).
-     */
-    mainRef?: React.RefObject<HTMLDivElement | null>;
-    /**
-     * Layout variant.
-     *
-     * - `"default"` (default) — simple flex row, aside width controlled via `asideClassName`.
-     *
-     * - `"detail"` — detail page layout (pool / strategy / position detail screens):
-     *   - aside is `420px` at `lg`, `460px` at `xl`
-     *   - aside is **sticky** (`top-4`) from `lg` up to `2449px`
-     *   - aside becomes **fixed** (`top-28 right-32`) at `≥2450px`
-     *   - outer wrapper caps at `calc(80rem + 420px + 1.5rem)` / `calc(80rem + 460px + 1.5rem)`
-     *   - at `≥2450px` the wrapper switches to `display:block` and the main column
-     *     centres itself via `mx-auto` with `max-w-[min(80rem,calc(100vw-460px-8rem))]`
-     *   - pass `asideClassName` to override or augment aside classes (e.g. z-index)
-     */
-    variant?: "default" | "detail";
 }
 /**
- * MainAsideLayout — main column + optional sidebar in one row.
+ * Main column + optional sidebar in one row. Intended for use **inside** the app shell `Container`:
+ * main uses the remaining width (`flex-1 min-w-0`), aside keeps a fixed width.
  *
- * Intended for use **inside** the app shell `Container` (or inside `px-4 sm:px-6 lg:px-8` padding):
- * - main column uses the remaining width (`flex-1 min-w-0`)
- * - aside keeps a fixed width supplied via `asideClassName`
- *
- * On small screens the stack uses `column-reverse` so the sidebar appears above the
- * main column when `asidePosition` is `"right"` (standard for detail pages).
- *
- * ### Default variant
- * ```tsx
- * <MainAsideLayout aside={<Panel />} asideClassName="lg:w-[320px]">
- *   <Content />
- * </MainAsideLayout>
- * ```
- *
- * ### Detail variant — sticky → fixed aside for pool / strategy / position pages
- * ```tsx
- * <MainAsideLayout variant="detail" mainRef={graphRootRef} aside={<Panel />}>
- *   <Content />
- * </MainAsideLayout>
- * ```
- * This reproduces the `PoolDetailsScreen` two-column layout:
- * sticky aside below 2450 px viewport, fixed aside above it, correct max-widths.
+ * On small screens the stack uses `column-reverse` so the sidebar stays above the main column when
+ * `asidePosition` is `"right"` (common for pool pages).
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

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.13.0-next.1",
+  "version": "3.13.0",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",
@@ -71,8 +71,8 @@
     "check": "biome check --write",
     "check:ci": "biome check --diagnostic-level=error",
     "typecheck:ci": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "pnpm exec vitest run",
+    "test:watch": "pnpm exec vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -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",

package/src/styles/base.css

@@ -2,6 +2,7 @@
  * Base styles for @gearbox-protocol/ui-kit
  *
  * This file contains:
+ * - Google Fonts import (Rubik)
  * - CSS variables for light/dark themes (:root, .dark)
  * - Base body styles with fallbacks
  * - Scrollbar styles (custom + navbar)
@@ -9,10 +10,6 @@
  * - React-Slick carousel overrides
  * - Liquidation graph styles
  *
- * Rubik: load from the host app (e.g. `<link>` to Google Fonts in `index.html`).
- * Do not use `@import url(...fonts...)` here — when this file is bundled after
- * Tailwind layers, that breaks CSS `@import` ordering for minifiers.
- *
  * Does NOT contain:
  * - @import "tailwindcss" (import separately)
  * - @theme block (use theme.css for Tailwind v4 utilities)
@@ -22,6 +19,7 @@
  * - For full setup: import globals.css (includes everything)
  * - For modular setup: import base.css + theme.css + tailwindcss separately
  */
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
 
 /*
  * Critical fallback styles for browsers without CSS variable support