@gearbox-protocol/ui-kit 3.13.1 → 3.14.0-next.10

package/dist/types/components/buttons/button/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "text" | "default" | "success" | "destructive" | "ghost" | "outline" | "secondary" | "white" | "neutral" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
-    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | null | undefined;
+    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | "md" | null | undefined;
     width?: "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
@@ -43,8 +43,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  * Sizes (size):
  * - `auto` — automatic height without padding.
  * - `xs` — extra small (rounded-full, px-3, text-xs).
- * - `sm` — small (h-8, px-3, text-xs).
- * - `default` — standard (h-9, px-4, py-2).
+ * - `sm` — small (h-7, px-3, text-xs).
+ * - `md` — medium (h-8, px-3.5, text-sm).
+ * - `default` — standard (h-10, px-4).
  * - `lg` — large (h-10, px-8).
  * - `icon` — square button for icons (h-9 w-9).
  *

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

@@ -108,10 +108,17 @@ export interface GraphProps {
      * between series with different data coverage.
      */
     visibleTimeFrom?: number;
+    /**
+     * When true, all user-initiated zoom and pan interactions are disabled.
+     * The visible time range can only be changed programmatically — e.g. via
+     * range buttons. Specifically disables: mouse-wheel zoom, pinch zoom,
+     * axis drag-to-scale, axis double-click reset, and scroll/drag panning.
+     */
+    disableZoom?: boolean;
 }
 /**
  * Graph component that renders a chart using lightweight-charts library
  * with support for area series, custom tooltips, and vertical line annotations
  * Supports single or multiple series with different colors and legends
  */
-export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, }: GraphProps): React.ReactElement;

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" | "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;
+    iconColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconHoverColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "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,14 +4,89 @@ 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";
+    /**
+     * Hybrid centring for the main column. Only meaningful with
+     * `variant="detail"`.
+     *
+     * - **`lg` … `1799px`** — behaves like the standard detail row: the aside is
+     *   in flow and the main column fills the remaining space (LP-style fill).
+     * - **`≥1800px`** — the wrapper becomes a viewport-centred, width-capped box
+     *   (`mx-auto`), the aside is parked out of flow in the gutter next to the
+     *   main column (`absolute right-full` / `left-full`), and the main column is
+     *   optically centred on the viewport. It still scales up to `80rem`.
+     *
+     * This avoids the very narrow centred column on mid-size desktops while still
+     * centring the content on wide screens.
+     *
+     * Assumes the layout is rendered inside the app shell padding
+     * (`px-4 sm:px-6 lg:px-8`) — the `≥1800px` gutter reserves `460px` aside +
+     * `1.5rem` gap + the `lg:px-8` (`2rem`) shell padding on each side.
+     *
+     * On screens below `lg` the layout falls back to the normal stacked column,
+     * so wrap usage in `hidden lg:block` if the mobile layout is handled
+     * separately.
+     */
+    centeredMain?: boolean;
 }
 /**
- * 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.
+ *
+ * ### Detail variant — viewport-centred main (`centeredMain`)
+ * ```tsx
+ * <div className="hidden lg:block">
+ *   <MainAsideLayout variant="detail" asidePosition="left" centeredMain aside={<Panel />}>
+ *     <Content />
+ *   </MainAsideLayout>
+ * </div>
+ * ```
+ * Centres the main column on the viewport at all desktop widths while the aside
+ * sits in the gutter; the main column still scales up to `80rem`.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/smart-number-input/smart-number-input.d.ts

@@ -1,6 +1,22 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
 import { TokenFullData } from '../../types/common';
 import * as React from "react";
+export interface TokenOption {
+    /** Display label for this option. */
+    label: string;
+    /** Optional icon to display before the label. */
+    icon?: React.ReactNode;
+    /**
+     * Called when this option is selected (single-select) or toggled (multi-select).
+     * In multi-select mode the dropdown stays open; the parent manages checked state.
+     */
+    onSelect: () => void;
+    /**
+     * When true, the option is shown with a checkmark.
+     * Used only in multi-select mode (`multiSelectMode` prop on SmartNumberInput).
+     */
+    checked?: boolean;
+}
 /** A-matching SmartNumberInput size for layout (styles.tsx). */
 export type SmartNumberInputSize = "sm" | "md";
 export interface SmartNumberInputProps {
@@ -28,6 +44,18 @@ export interface SmartNumberInputProps {
     size?: SmartNumberInputSize;
     /** When true, currency dropdown is open (expand icon rotated). */
     active?: boolean;
+    /** Override max character length for token symbol display. When omitted, computed from viewport width. */
+    symbolMaxLength?: number;
+    /** Inline token options for dropdown selection (alternative to onShowSelectDialog). */
+    tokenOptions?: TokenOption[];
+    /**
+     * When true, the tokenOptions dropdown works as a multi-select:
+     * - The dropdown stays open after each click (doesn't auto-close).
+     * - Options marked `checked: true` show a checkmark.
+     * - The dropdown stays open until the user closes it (e.g. click outside).
+     * The parent is responsible for maintaining `checked` state on each option.
+     */
+    multiSelectMode?: boolean;
     /** Callback when amount changes. Called with (value: bigint, valueView: string). */
     onSetAmount?: (value: bigint, valueView: string) => void;
     /** Callback to show token select dialog. */
@@ -38,6 +66,30 @@ export interface SmartNumberInputProps {
     onFocus?: () => void;
     /** Blur callback. */
     onBlur?: () => void;
+    /**
+     * USD price per one whole token unit (e.g. 1800.5 for ETH at $1 800.50).
+     * When provided, the USD equivalent of the current amount is displayed below the input.
+     */
+    usdPrice?: number;
+    /**
+     * When provided, renders a Health Factor slider in the balance row
+     * (replacing the max amount / "Can borrow" indicator).
+     * Intended for debt inputs where the user wants to target a specific HF.
+     */
+    hfSlider?: HFSliderConfig;
+}
+/** Configuration for the inline Health Factor slider. */
+export interface HFSliderConfig {
+    /** Current target HF as a float (e.g. 1.5 for 150%). */
+    value: number;
+    /** Minimum HF value. @default 1.0 */
+    min?: number;
+    /** Maximum HF value. @default 3.0 */
+    max?: number;
+    /** Slider step. @default 0.01 */
+    step?: number;
+    /** Called when the slider value changes. */
+    onChange: (value: number) => void;
 }
 /**
  * SmartNumberInput — token amount input with balance display (matches interface).

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

@@ -1,7 +1,7 @@
 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;
+    backgroundColor?: "dark" | "transparent" | "light" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "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;

package/dist/types/components/trading-view/trading-view.d.ts

@@ -94,6 +94,13 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
      * so colors stay stable across reloads (same label keeps the same color).
      */
     seriesColorPersistenceKey?: string;
+    /**
+     * When true, all user-initiated zoom and pan interactions are disabled.
+     * The time range can only be changed via the range buttons.
+     * Disables: mouse-wheel zoom, pinch zoom, axis drag, axis double-click reset,
+     * and scroll/drag panning.
+     */
+    disableZoom?: boolean;
 }
 /**
  * TradingView — comprehensive charting component with graph selection and time range controls.

package/dist/types/locale/en.json.d.ts

@@ -25,8 +25,10 @@ declare const _default: {
   "components.loading.wait": "Please wait...",
 
   "components.smartNumberInput.balance": "Balance",
+  "components.smartNumberInput.amountLabel": "Amount",
   "components.smartNumberInput.inputTitle": "Token Amount",
   "components.smartNumberInput.confirm.input": "Input",
+  "components.smartNumberInput.selectToken": "Select token",
 
   "components.tipWindow.title": "Tip",
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.13.1",
+  "version": "3.14.0-next.10",
   "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