@gearbox-protocol/ui-kit 4.0.0-next.3 → 4.0.0-next.5

package/dist/types/components/composites/pool-assets-table/constants.d.ts

@@ -0,0 +1,6 @@
+export declare class PoolAssetsTableTest {
+    static root: string;
+    static exposureCell: string;
+    static capCell: string;
+    static capUtilizationCell: string;
+}

package/dist/types/components/composites/pool-assets-table/index.d.ts

@@ -1,3 +1,4 @@
+export * from './constants';
 export * from './pool-assets-table';
 export * from './pool-assets-table-head';
 export * from './pool-assets-table-row';

package/dist/types/components/composites/pool-assets-table/pool-assets-table-head.d.ts

@@ -1,10 +1,9 @@
 import { default as React } from 'react';
 import { PoolAssetsTableSort } from './types';
-/** Props for {@link PoolAssetsTableHead}. */
 export interface PoolAssetsTableHeadProps {
     readonly sort: PoolAssetsTableSort;
 }
 /**
- * Header row: sortable Asset, Rate, and Limits columns (`components.poolAssetsTable.*` locale keys).
+ * Header row: sortable Name / Exposure / Cap / Cap utilization.
  */
 export declare function PoolAssetsTableHead({ sort, }: PoolAssetsTableHeadProps): React.ReactElement;

package/dist/types/components/composites/pool-assets-table/pool-assets-table-row.d.ts

@@ -1,15 +1,15 @@
-import { TokenData } from '@gearbox-protocol/sdk/common-utils';
+import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
-import { PoolAssetsTableQuotaRow } from './types';
-/** Props for {@link PoolAssetsTableRow}. */
 export interface PoolAssetsTableRowProps {
     readonly poolName: string;
-    readonly token: TokenData | undefined;
-    readonly currentQuota: PoolAssetsTableQuotaRow;
-    readonly underlyingToken: TokenData;
+    readonly asset: QuotaAsset;
+    readonly underlyingToken: Token;
     readonly last: boolean;
+    readonly isCompact: boolean;
+    readonly totalUsed: bigint;
+    readonly colorIndex: number;
 }
 /**
- * Single data row: token + pool name, `bps`-formatted rate, and formatted usage vs limit.
+ * Single data row: token name, exposure (amount + pie), cap, and cap utilization.
  */
-export declare function PoolAssetsTableRow({ poolName, token, currentQuota, underlyingToken, last, }: PoolAssetsTableRowProps): React.ReactElement;
+export declare function PoolAssetsTableRow({ poolName, asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;

package/dist/types/components/composites/pool-assets-table/pool-assets-table.d.ts

@@ -1,27 +1,14 @@
-import { TokenData } from '@gearbox-protocol/sdk/common-utils';
+import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
-import { Address } from 'viem';
-import { PoolAssetsTableQuotaRow, PoolAssetsTableSort } from './types';
-/**
- * Props for {@link PoolAssetsTable}.
- */
+import { PoolAssetsTableSort } from './types';
 export interface PoolAssetsTableProps {
-    /** Quota rows to render (one per asset). */
-    readonly list: ReadonlyArray<PoolAssetsTableQuotaRow>;
-    /** Pool name shown under the asset title. */
+    readonly list: ReadonlyArray<QuotaAsset>;
     readonly poolName: string;
     readonly sort: PoolAssetsTableSort;
-    /** Token metadata keyed by token address (must include every `quota.token`). */
-    readonly tokensList: Partial<Record<Address, TokenData>>;
-    /** Underlying asset used for `TokenTemplate` amounts in the usage column. */
-    readonly underlyingToken: TokenData;
+    readonly underlyingToken: Token;
 }
 /**
- * Legacy GridTable of pool asset quotas (`TokenData` field props).
- * Canonical consumer table is client-v3 `PoolsAssetsTable` (`data: PoolOpportunityDetail`).
- * Do not add a third table in this pass — next-stage `table/` absorbs this.
- *
- * On viewports below the mobile breakpoint the header is hidden and each row
- * uses the compact `TableLineSm` layout.
+ * Grid table of pool asset quotas: exposure, cap, and cap utilization.
+ * Collapses into stacked cards below {@link COMPACT_WIDTH_THRESHOLD}.
  */
-export declare function PoolAssetsTable({ list, poolName, sort, tokensList, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
+export declare function PoolAssetsTable({ list, poolName, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;

package/dist/types/components/composites/pool-assets-table/types.d.ts

@@ -1,7 +1,7 @@
-import { Address } from 'viem';
+import { QuotaAsset } from '@gearbox-protocol/sdk/model';
 import { SortField, SortSetterFunction } from '../../../hooks';
 /** Column identifiers used by the pool assets table header sort controls. */
-export type PoolAssetsSortFields = "name" | "rate" | "usage";
+export type PoolAssetsSortFields = "name" | "exposure" | "cap" | "capUtilization";
 /**
  * Sort state + setter wired to `HeadCell` / `useSort` (same pattern as `PoolTable`).
  */
@@ -13,13 +13,5 @@ export interface PoolAssetsTableSort {
 export interface PoolAssetsFilterState {
     readonly sort: PoolAssetsTableSort;
 }
-/**
- * One asset line: quota limit, usage, and borrow rate.
- * Shape aligns with Gearbox SDK quota / QuotaInfo-style data.
- */
-export interface PoolAssetsTableQuotaRow {
-    readonly token: Address;
-    readonly limit: bigint;
-    readonly totalQuoted: bigint;
-    readonly rate: bigint;
-}
+/** One quota row — the SDK's {@link QuotaAsset}. */
+export type PoolAssetsTableQuotaRow = QuotaAsset;

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

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { GraphProps } from './graph';
 import * as React from "react";
 declare const graphViewVariants: (props?: ({
-    variant?: "default" | "outlined" | "ghost" | "elevated" | null | undefined;
+    variant?: "default" | "outlined" | "ghost" | "elevated" | "plain" | null | undefined;
     size?: "full" | "default" | "sm" | "lg" | "xl" | null | undefined;
     padding?: "none" | "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -30,6 +30,10 @@ export type VerticalLineOptions = Partial<{
     width: number;
     labelBackgroundColor: string;
     labelTextColor: string;
+    /**
+     * Time-axis (bottom) badge. Independent of the top overlay, which renders
+     * whenever `labelText`, `value`, or `tooltipText` is set.
+     */
     showLabel: boolean;
     /**
      * Text shown only on hover of the line's badge (not rendered inline). Use it

package/dist/types/components/hf-indicator/hf-indicator.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface HFIndicatorProps {
+    readonly value?: string;
+}
+/**
+ * Concentric rings around a health-factor value. Presentation only.
+ */
+export declare function HFIndicator({ value, }: HFIndicatorProps): React.ReactElement;

package/dist/types/components/hf-indicator/index.d.ts

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

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

@@ -6,6 +6,7 @@ export * from './assets-list-cell';
 export * from './badge';
 export * from './base';
 export * from './base-link';
+export * from './base-table';
 export * from './block-sync-pill';
 export * from './breadcrumbs';
 export * from './breakpoint-provider';
@@ -14,6 +15,7 @@ export * from './cards';
 export * from './checkbox';
 export * from './checkbox-item';
 export * from './client-adapters';
+export * from './collateral-allocation-tooltip';
 export * from './composites';
 export * from './compound-apy';
 export * from './confirm-menu';
@@ -33,8 +35,10 @@ export * from './guard';
 export * from './head-cell';
 export * from './health-factor';
 export * from './help-tip';
+export * from './hf-indicator';
 export * from './icon-button';
 export * from './icons';
+export * from './infinite-scroll';
 export * from './input';
 export * from './label';
 export * from './layout';
@@ -44,6 +48,7 @@ export * from './loader';
 export * from './loading';
 export * from './loading-bar';
 export * from './modal';
+export * from './name-cell';
 export * from './navbar-logo';
 export * from './navigation-context';
 export * from './points-icon';

package/dist/types/components/infinite-scroll/index.d.ts

@@ -0,0 +1 @@
+export * from './infinite-scroll-wrapper';

package/dist/types/components/infinite-scroll/infinite-scroll-wrapper.d.ts

@@ -0,0 +1,11 @@
+import { default as React, PropsWithChildren } from 'react';
+export interface InfiniteScrollWrapperProps {
+    readonly dataLength: number;
+    readonly hasMore: boolean;
+    readonly onNextLoad: () => void;
+}
+/**
+ * List footer that asks for the next page. Presentation only: the caller
+ * owns paging state and `onNextLoad`.
+ */
+export declare function InfiniteScrollWrapper({ hasMore, dataLength, children, onNextLoad, }: PropsWithChildren<InfiniteScrollWrapperProps>): React.ReactElement;

package/dist/types/components/name-cell/index.d.ts

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

package/dist/types/components/name-cell/name-cell.d.ts

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+export interface NameCellProps {
+    readonly title: ReactNode;
+    readonly subtitle?: ReactNode;
+    readonly chips?: ReactNode;
+    readonly caption?: ReactNode;
+    readonly leading?: ReactNode;
+    readonly disabledStyle?: boolean;
+}
+/**
+ * Table-name layout: optional leading slot, title + chips, subtitle, caption.
+ */
+export declare function NameCell({ title, subtitle, chips, caption, leading, disabledStyle, }: NameCellProps): React.ReactElement;

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

@@ -1,2 +1,3 @@
 export type { NetworkIconProps } from './network-icon';
 export * from './network-icon';
+export * from './network-indicator';

package/dist/types/components/network-icon/network-indicator.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from '../buttons';
+import { NetworkIcons } from '../../utils/network-icons';
+type IndicatorSize = "sm" | "md" | "default" | "lg";
+export interface NetworkIndicatorProps extends Omit<ButtonProps, "size" | "children"> {
+    network: NetworkIcons | undefined;
+    chainId: number | undefined;
+    size?: IndicatorSize;
+    iconSize?: number;
+    chevronSize?: number;
+    showTitle?: boolean;
+    opened: boolean;
+    /**
+     * When true, button appears enabled and shows chevron even without onClick.
+     * Useful when the component is used as a dropdown trigger that handles clicks externally.
+     * Defaults to true when onClick is provided.
+     */
+    interactive?: boolean;
+}
+/**
+ * Network picker trigger: optional "Network:" label, icon, and chevron.
+ */
+export declare const NetworkIndicator: import('react').ForwardRefExoticComponent<NetworkIndicatorProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -37,7 +37,7 @@ export interface GraphData {
 /**
  * TradingView component props
  */
-export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data"> {
+export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data" | "title"> {
     /** Graph data - single or array of series */
     data: GraphData | Array<GraphData> | undefined;
     /** Y-axis unit for single or multiple series */
@@ -110,11 +110,18 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     seriesColorPersistenceKey?: string;
     /**
      * When true, all user-initiated zoom and pan interactions are disabled.
-     * The time range can only be changed via the range buttons.
+     * The time range can only be changed via the range dropdown.
      * Disables: mouse-wheel zoom, pinch zoom, axis drag, axis double-click reset,
      * and scroll/drag panning.
      */
     disableZoom?: boolean;
+    /**
+     * Controls rendered to the left of the range dropdown (e.g. leverage chips).
+     * A divider is shown between this slot and the dropdown when both are present.
+     */
+    trailing?: React.ReactNode;
+    /** Heading to the left of the chart controls, outside the chart frame. */
+    title?: React.ReactNode;
 }
 /**
  * TradingView — comprehensive charting component with graph selection and time range controls.
@@ -171,4 +178,4 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
  * />
  * ```
  */
-export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;
+export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, title, trailing, ...restProps }: TradingViewProps<T>): React.ReactElement;

package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts

@@ -8,25 +8,23 @@ export interface YieldBreakdownTooltipProps {
     supplyApy: ApyBreakdown;
     /**
      * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x). When set,
-     * the header shows "at Nx leverage" and borrow rows may appear.
+     * the header is "Net APY at Nx Leverage" and a Borrow Rate row is shown.
      */
     maxLeverage?: Leverage;
     /**
-     * Strategy collateral yield used for Base / Incentive rows. Falls back to
-     * {@link supplyApy} when omitted.
+     * Strategy collateral yield used for Collateral / Incentive rows. Falls back
+     * to {@link supplyApy} when omitted.
      */
     collateralApy?: ApyBreakdown;
     /** Strategy base borrow cost in bps (shown as a negative rate). */
     borrowApy?: Bps;
-    /** Strategy additional (quota) borrow cost in bps (shown as a negative rate). */
+    /** Strategy additional (quota) borrow cost in bps (folded into Borrow Rate). */
     additionalBorrowApy?: Bps;
     children?: React.ReactNode;
     className?: string;
 }
 /**
- * Yield Breakdown tooltip for Earn — pool and strategy layouts from SDK
- * `ApyBreakdown` (+ optional strategy borrow / leverage fields).
- *
- * Visuals follow Figma «Yield Details Surface» (400px card, always expanded).
+ * Earn APY tooltip — strategy (`Net APY at Nx Leverage`) and pool
+ * (`Overall APY`) layouts from SDK `ApyBreakdown`.
  */
 export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/configs/tailwind-preset.d.ts

@@ -63,9 +63,14 @@ export declare const preset: {
                 "success-foreground": string;
                 "success-hover": string;
                 warning: string;
+                info: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
                 liquidation: string;
                 "liquidation-line": string;
                 border: string;
+                divider: string;
                 input: string;
                 ring: string;
                 "text-secondary": string;
@@ -91,6 +96,13 @@ export declare const preset: {
                     "3": string;
                     "4": string;
                     "5": string;
+                    "6": string;
+                    "7": string;
+                    "8": string;
+                    "9": string;
+                    "10": string;
+                    "11": string;
+                    "12": string;
                 };
             };
             fontFamily: {

package/dist/types/hooks/index.d.ts

@@ -5,6 +5,7 @@ export * from './use-debounce-call';
 export * from './use-filter';
 export * from './use-hf';
 export * from './use-media-query';
+export * from './use-observed-width-key';
 export * from './use-opened-state';
 export * from './use-previous';
 export * from './use-smart-number-input';

package/dist/types/hooks/use-observed-width-key.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tracks the rounded CSS-pixel width of an element via ResizeObserver.
+ * Useful when a layout should collapse by container width, not viewport.
+ */
+export declare function useObservedWidthKey<T extends HTMLElement>(): {
+    ref: import('react').RefObject<T | null>;
+    widthKey: number;
+};

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/app-bar';
 export * from './components/assets-list-cell';
 export * from './components/badge';
 export * from './components/base-link';
+export * from './components/base-table';
 export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/breakpoint-provider';
@@ -15,6 +16,7 @@ export * from './components/buttons';
 export * from './components/cards';
 export * from './components/checkbox';
 export * from './components/client-adapters';
+export * from './components/collateral-allocation-tooltip';
 export * from './components/composites';
 export * from './components/compound-apy';
 export * from './components/confirm-menu';
@@ -34,8 +36,10 @@ export * from './components/guard';
 export * from './components/head-cell';
 export * from './components/health-factor';
 export * from './components/help-tip';
+export * from './components/hf-indicator';
 export * from './components/icon-button';
 export * from './components/icons';
+export * from './components/infinite-scroll';
 export * from './components/input';
 export * from './components/label';
 export * from './components/layout';
@@ -45,6 +49,7 @@ export * from './components/loader';
 export * from './components/loading';
 export * from './components/loading-bar';
 export * from './components/modal';
+export * from './components/name-cell';
 export * from './components/navbar-logo';
 export * from './components/navigation-context';
 export * from './components/network-icon';
@@ -98,5 +103,5 @@ export * from './utils/a11y';
 export { cn } from './utils/cn';
 export * from './utils/copy';
 export * from './utils/format';
-export { formatMoney, formatPercentAmount, percentageTemplate, percentTemplate, } from './utils/format-money';
+export { formatCompactPercent, formatMoney, formatPercentAmount, percentageTemplate, percentTemplate, } from './utils/format-money';
 export * from './utils/templates';

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

@@ -6,6 +6,8 @@ declare const _default: {
   "errors.tooManyRequests": "Too many requests",
   "errors.incorrectAddress": "Incorrect address",
   "components.errorMessage.oops": "Oops...",
+  "components.networkIndicator.title": "Network",
+  "components.infiniteScrollWrapper.showMore": "Show more",
 
   "components.alertModal.ok": "Ok",
 
@@ -84,21 +86,20 @@ declare const _default: {
   "components.apyParts.points": "{symbol} Incentive",
   "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
 
-  "components.yieldBreakdown.title": "Yield Breakdown",
-  "components.yieldBreakdown.atLeverage": "at {leverage}× leverage",
-  "components.yieldBreakdown.baseYield": "Base Yield",
-  "components.yieldBreakdown.incentiveYield": "Incentive Yield",
+  "components.yieldBreakdown.titleNetAtLeverage": "Net APY at {leverage}× Leverage",
+  "components.yieldBreakdown.collateralApy": "Collateral APY",
+  "components.yieldBreakdown.incentive": "Incentive",
   "components.yieldBreakdown.borrowRate": "Borrow Rate",
-  "components.yieldBreakdown.baseRate": "Base Rate",
-  "components.yieldBreakdown.additionalRate": "Additional Rate",
-  "components.yieldBreakdown.netYield": "Net Yield",
+  "components.yieldBreakdown.programPoints": "{name} Points",
   "components.yieldBreakdown.points": "Points",
 
   "components.openCopyButtons.copy": "Copy to clipboard",
 
-  "components.poolAssetsTable.asset": "Asset",
+  "components.poolAssetsTable.asset": "Name",
   "components.poolAssetsTable.rate": "Effective rate",
-  "components.poolAssetsTable.limits": "Limits Usage",
+  "components.poolAssetsTable.exposure": "Exposure",
+  "components.poolAssetsTable.cap": "Cap",
+  "components.poolAssetsTable.capUtilization": "Cap utilization",
   "components.poolAssetsTable.usage": "{amount} of {total}",
   "components.poolAssetsTable.head.name": "Credit Manager",
   "components.poolAssetsTable.head.currentDebt": "Current Debt",
@@ -198,28 +199,32 @@ declare const _default: {
   "components.historyChart.error": "Couldn't load chart data",
   "components.historyChart.empty": "No data",
 
-  "components.positionTypeBadge.pool": "Lender",
+  "components.positionTypeBadge.pool": "LP",
   "components.positionTypeBadge.strategy": "Strategy",
   "components.positionTypeBadge.liquidation": "Liquidation",
 
+  "components.positionStatusBadge.active": "Active",
+  "components.positionStatusBadge.repaid": "Repaid",
+
   "components.titleMeta.unknownCurator": "Curator",
 
   "components.moreAccordion.more": "More details",
   "components.moreAccordion.less": "Less details",
 
   "components.poolApyBreakdownCard.title": "APY Breakdown",
-  "components.poolApyBreakdownCard.apy1d": "APY 24H",
-  "components.poolApyBreakdownCard.apy7d": "APY 7d",
-  "components.poolApyBreakdownCard.apy30d": "APY 30d",
+  "components.poolApyBreakdownCard.organicApy": "Pool organic APY",
+  "components.poolApyBreakdownCard.incentiveApy": "Incentive APY",
 
-  "components.strategyApyBreakdownCard.title": "APY Breakdown",
-  "components.strategyApyBreakdownCard.formula": "How strategy APY is calculated: Collateral APY x Leverage - Base borrow rate x (Leverage - 1) - Additional borrow rate x Leverage x 1.05",
+  "components.strategyApyBreakdownCard.titleAtLeverage": "APY at {leverage}× Leverage",
   "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
-  "components.strategyApyBreakdownCard.baseBorrowRate": "Base borrow rate",
-  "components.strategyApyBreakdownCard.additionalBorrowRate": "Additional borrow rate",
+  "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
+  "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
+  "components.strategyApyBreakdownCard.formula": "{base} × {leverage} Lev.",
+
+  "components.leveragePresetChips.label": "Leverage:",
 
   "components.liquidationParamsTable.lt": "Liquidation threshold",
-  "components.liquidationParamsTable.penalty": "Liquidation penalty",
+  "components.liquidationParamsTable.penalty": "Liquidation discount",
   "components.liquidationParamsTable.premium": "Liquidation premium",
   "components.liquidationParamsTable.fee": "Liquidation fee",
 

package/dist/types/utils/format-leverage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Display leverage with two decimal places, e.g. `5.79` for `5.7857…`.
+ * The suffix (`x`) / prefix (`×`) stays at the call site.
+ */
+export declare function formatLeverage(value: number): string;

package/dist/types/utils/format-money.d.ts

@@ -14,21 +14,27 @@
  */
 export declare function formatMoney(money: number | bigint, precision?: number): string;
 /**
- * Formats a percentage amount with exponential notation for very large values
+ * Formats a percentage with compact suffixes (`K` / `M` / `B` / `T`) instead
+ * of scientific notation. Input is already in percent form (`14000` → `14K%`).
+ */
+export declare function formatCompactPercent(value: number, decimals?: number): string;
+/**
+ * Formats a percentage amount. Values of 1,000% and above use compact
+ * suffixes (`14K`) instead of exponential notation.
  *
  * @param value - The percentage value (already in percent form, e.g., 2.81 for 2.81%)
  * @param decimals - Number of decimal places (default: 2)
- * @param allowExponential - Whether to allow exponential notation for large values (default: true)
+ * @param compact - Whether to compact large values (default: true)
  * @returns Formatted number (without % sign)
  *
  * @example
  * ```ts
  * formatPercentAmount(2.81, 2) // "2.81"
- * formatPercentAmount(15000, 2) // "1.50e+4"
- * formatPercentAmount(15000, 2, false) // "15000.00"
+ * formatPercentAmount(14000, 2) // "14K"
+ * formatPercentAmount(14000, 2, false) // "14000.00"
  * ```
  */
-export declare function formatPercentAmount(value: number, decimals: number, allowExponential?: boolean): string | number;
+export declare function formatPercentAmount(value: number, decimals: number, compact?: boolean): string | number;
 /**
  * Formats a percentage value that is already in percent form
  * Use this when your value is already 2.81 (meaning 2.81%), not 0.0281

package/dist/types/utils/index.d.ts

@@ -9,10 +9,12 @@ export * from './colors';
 export * from './copy';
 export * from './format';
 export * from './format-asset-amount';
-export { formatMoney, formatMoneyAmount, formatPercentAmount, percentageTemplate, percentTemplate, } from './format-money';
+export * from './format-leverage';
+export { formatCompactPercent, formatMoney, formatMoneyAmount, formatPercentAmount, percentageTemplate, percentTemplate, } from './format-money';
 export { FORMAT_CONSTANTS, type FormatNumberOptions, formatNumberWithSuffix, formatPrice, getAdaptiveDecimals, isBelowDisplayThreshold, isEffectivelyZero, toSignificantDigits, } from './format-number';
 export * from './format-slippage';
 export * from './interface';
+export * from './leverage-presets';
 export * from './loading';
 export * from './math';
 export * from './network-icons';

package/dist/types/utils/leverage-presets.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Leverage chips beside the strategy yield chart: 30% and 70% of the
+ * (1 → max) span, rounded to 0.5, plus max itself.
+ */
+export declare function leveragePresets(max: number): number[];
+/** Chip / subtitle leverage without trailing zeros: `5`, `5.5`, `9.54`. */
+export declare function formatChipLeverage(leverage: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.3",
+  "version": "4.0.0-next.5",
   "description": "Internal UI components",
   "repository": {
     "type": "git",

package/src/styles/base.css

@@ -71,6 +71,8 @@ html.dark {
     --success-foreground: 0 0% 0%;
     --success-hover: 136.58 100% 85.1%;
     --warning: 38 95% 45%;
+    --info: 214 80% 46%;
+    --info-foreground: 0 0% 100%;
     --liquidation: 274 67% 48%;
     --liquidation-line: 38 92% 50%;
     --input: 225 10% 88%;
@@ -93,6 +95,19 @@ html.dark {
     --white-foreground: 240 2.56% 7.65%;
     --black: 0 0% 0%;
     --border: 225 10% 88%;
+    --divider: 225 10% 88%;
+    --chart-1: 18 83.05% 65.29%;
+    --chart-2: 188 62.26% 58.43%;
+    --chart-3: 326 73.71% 65.69%;
+    --chart-4: 130 44.33% 61.96%;
+    --chart-5: 257 88.96% 68.04%;
+    --chart-6: 40 72.04% 63.53%;
+    --chart-7: 212 92.43% 63.73%;
+    --chart-8: 347 78.53% 65.29%;
+    --chart-9: 167 44.1% 55.1%;
+    --chart-10: 288 64.32% 63.73%;
+    --chart-11: 76 57.14% 61.57%;
+    --chart-12: 235 89.54% 70%;
   }
 
   .dark {
@@ -119,6 +134,8 @@ html.dark {
     --success-hover: 136.58 100% 85.1%;
     --destructive-foreground: 0 0% 100%;
     --warning: 43.12 100% 68.63%;
+    --info: 215 88% 67%;
+    --info-foreground: 0 0% 100%;
     --liquidation: 277.22 74.53% 58.43%;
     --liquidation-line: 38 92% 50%;
     --input: 225 6% 19%;
@@ -140,6 +157,19 @@ html.dark {
     --white-foreground: 240 2.56% 7.65%;
     --black: 0 0% 0%;
     --border: 0 0% 100% / 0.07;
+    --divider: 218 8% 19%;
+    --chart-1: 18 83.05% 65.29%;
+    --chart-2: 188 62.26% 58.43%;
+    --chart-3: 326 73.71% 65.69%;
+    --chart-4: 130 44.33% 61.96%;
+    --chart-5: 257 88.96% 68.04%;
+    --chart-6: 40 72.04% 63.53%;
+    --chart-7: 212 92.43% 63.73%;
+    --chart-8: 347 78.53% 65.29%;
+    --chart-9: 167 44.1% 55.1%;
+    --chart-10: 288 64.32% 63.73%;
+    --chart-11: 76 57.14% 61.57%;
+    --chart-12: 235 89.54% 70%;
   }
 }