@gearbox-protocol/ui-kit 3.12.1 → 3.13.0-next.1

package/dist/types/components/composites/strategies-table/components/rewards-tooltip/tooltip-content.d.ts

@@ -1,9 +1,9 @@
 import { Address } from 'viem';
-import { RewardsTooltipCellInfo, RewardsTooltipTheme, RewardsTooltipTokenMeta } from '../../types/rewards-tooltip';
+import { RewardsTooltipApyListByNetwork, RewardsTooltipCellInfo, RewardsTooltipTheme, RewardsTooltipTokenMeta } from '../../types/rewards-tooltip';
 export interface RewardsTooltipContentProps {
     cellInfo: RewardsTooltipCellInfo;
     targetToken: Address;
-    apyList: Partial<Record<Address, number>> | undefined;
+    apyListByNetwork: RewardsTooltipApyListByNetwork | undefined;
     tokensList: Partial<Record<Address, RewardsTooltipTokenMeta>> | undefined;
     strategyCreditManagers: Partial<Record<Address, {
         readonly underlyingToken: Address;
@@ -11,4 +11,4 @@ export interface RewardsTooltipContentProps {
     theme?: RewardsTooltipTheme;
     onClose?: () => void;
 }
-export declare function RewardsTooltipContent({ cellInfo, targetToken, apyList: baseAPYList, tokensList, strategyCreditManagers, onClose, theme, }: RewardsTooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function RewardsTooltipContent({ cellInfo, targetToken, apyListByNetwork, tokensList, strategyCreditManagers, onClose, theme, }: RewardsTooltipContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/strategies-table/types/rewards-tooltip.d.ts

@@ -38,7 +38,6 @@ export interface RewardsTooltipCellInfo {
     readonly isPointsWithAPY: boolean;
     readonly hasAPY?: boolean;
     readonly maxLeverage: bigint;
-    readonly apyListByNetwork: RewardsTooltipApyListByNetwork;
     readonly quotaRate: bigint;
     /**
      * Present on some call sites that reuse hook-shaped objects; the tooltip body

package/dist/types/components/composites/strategies-table/types/table.d.ts

@@ -1,6 +1,6 @@
 import { Address } from 'viem';
 import { TokenMetaInfo } from '../../../../types/common';
-import { RewardsTooltipCellInfo } from './rewards-tooltip';
+import { RewardsTooltipApyListByNetwork, RewardsTooltipCellInfo } from './rewards-tooltip';
 import type * as React from "react";
 export type StrategiesTableSortFields = "strategyName" | "apy";
 type StrategiesTableSortDirection = "desc" | "asc";
@@ -30,7 +30,7 @@ export interface StrategyTableRowDTO<S extends StrategyDTO = StrategyDTO, T exte
     readonly href?: string;
     readonly maxLeverage: bigint;
     readonly tokensList: Partial<Record<Address, T>> | undefined;
-    readonly apyList: Partial<Record<Address, number>> | undefined;
+    readonly apyListByNetwork: RewardsTooltipApyListByNetwork | undefined;
     readonly strategyCreditManagers: Partial<Record<Address, StrategyTableCreditManager>>;
     readonly disabled?: boolean;
     readonly disabledStyle?: boolean;

package/dist/types/components/layout/main-aside-layout/main-aside-layout.d.ts

@@ -4,14 +4,55 @@ 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>` (width, sticky, responsive visibility, etc.). */
+    /** Classes for the outer `<aside>` element. */
     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";
 }
 /**
- * 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.
+ * MainAsideLayout — main column + optional sidebar in one row.
  *
- * On small screens the stack uses `column-reverse` so the sidebar stays above the main column when
- * `asidePosition` is `"right"` (common for pool pages).
+ * 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.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.12.1",
+  "version": "3.13.0-next.1",
   "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": "pnpm exec vitest run",
-    "test:watch": "pnpm exec vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

package/src/styles/base.css

@@ -2,7 +2,6 @@
  * 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)
@@ -10,6 +9,10 @@
  * - 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)
@@ -19,7 +22,6 @@
  * - 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