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

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-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

@@ -10,10 +10,11 @@ export * from './copy';
 export * from './format';
 export * from './format-asset-amount';
 export * from './format-leverage';
-export { formatMoney, formatMoneyAmount, formatPercentAmount, percentageTemplate, percentTemplate, } from './format-money';
+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.4",
+  "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%;
   }
 }
 

package/src/styles/theme.css

@@ -48,9 +48,12 @@
   --color-success-foreground: hsl(var(--success-foreground));
   --color-success-hover: hsl(var(--success-hover));
   --color-warning: hsl(var(--warning));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
   --color-liquidation: hsl(var(--liquidation));
   --color-liquidation-line: hsl(var(--liquidation-line));
   --color-border: hsl(var(--border));
+  --color-divider: hsl(var(--divider));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
   --color-text-secondary: hsl(var(--text-secondary));
@@ -74,6 +77,19 @@
   --color-additional-success: hsl(var(--success));
   --color-additional-warning: hsl(var(--warning));
   --color-additional-alert: hsl(var(--destructive));
+  --color-additional-info: hsl(var(--info));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+  --color-chart-6: hsl(var(--chart-6));
+  --color-chart-7: hsl(var(--chart-7));
+  --color-chart-8: hsl(var(--chart-8));
+  --color-chart-9: hsl(var(--chart-9));
+  --color-chart-10: hsl(var(--chart-10));
+  --color-chart-11: hsl(var(--chart-11));
+  --color-chart-12: hsl(var(--chart-12));
 
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);