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

package/dist/types/components/base/borrow-rate-block/borrow-rate-block.d.ts

@@ -1,16 +1,21 @@
-import { ApyBreakdown, Bps } from '@gearbox-protocol/sdk/model';
+import { BorrowRateBreakdown, Bps } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { BorrowRateBlockTest } from './constants';
 export { BorrowRateBlockTest };
-export type BorrowRateValue = ApyBreakdown | Bps;
+/**
+ * The SDK's `borrowRate` breakdown, or a bare `Bps` when only the position's
+ * plain `borrowApy` is available (offchain mode: no breakdown to split into
+ * total / base). A caller never picks a field itself, so `total` and `base`
+ * can't drift out of sync the way threading two separately-extracted `Bps`
+ * numbers through two props invited.
+ */
+export type BorrowRateValue = BorrowRateBreakdown | Bps;
 export interface BorrowRateBlockProps {
     readonly data: BorrowRateValue | undefined;
     readonly dataTo?: BorrowRateValue;
-    /** SDK `borrowRate.base`; omit when the breakdown is missing. */
-    readonly base?: BorrowRateValue;
 }
 /**
  * Borrow-rate row: total on the trigger, Base Rate from the SDK, Rates
  * normalization as a dash until the SDK reports it.
  */
-export declare function BorrowRateBlock({ data, dataTo, base, }: BorrowRateBlockProps): React.ReactElement;
+export declare function BorrowRateBlock({ data, dataTo, }: BorrowRateBlockProps): React.ReactElement;

package/dist/types/components/base/detailed-page-title/detailed-page-title.d.ts

@@ -9,8 +9,6 @@ export interface DetailedPageTitleProps {
     /** Visible heading; a node (e.g. a token-pair title) renders as given. */
     readonly title: PageTitleText | React.ReactNode;
     readonly browserTitle?: PageTitleText;
-    /** Document-head hook forwarded to {@link PageTitle}. */
-    readonly head?: (browserTitle: string) => React.ReactNode;
     /**
      * Token whose icon heads the title. The model `Token` is enough — the icon
      * is resolved from the symbol inside ui-kit.
@@ -29,4 +27,4 @@ export interface DetailedPageTitleProps {
     readonly className?: string;
 }
 /** Detail screen heading: token icon + title + badges + copy/explorer actions. */
-export declare function DetailedPageTitle({ title, browserTitle, head, token, icon, tokenIconSize, disabled, toCopy, explorerLinks, badges, actions, buttonsSlot, meta, actionsPosition, className, }: DetailedPageTitleProps): React.ReactElement;
+export declare function DetailedPageTitle({ title, browserTitle, token, icon, tokenIconSize, disabled, toCopy, explorerLinks, badges, actions, buttonsSlot, meta, actionsPosition, className, }: DetailedPageTitleProps): React.ReactElement;

package/dist/types/components/base/health-factor-block/health-factor-block.d.ts

@@ -1,13 +1,14 @@
+import { Bps } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { TitleText } from '../text';
 import { HFZones } from '../../health-factor';
 import { HealthFactorBlockTest } from './constants';
 export { HealthFactorBlockTest };
 export interface HealthFactorBlockProps {
-    /** Health factor in basis points (e.g. 15000 = 1.5); omit to render "—". */
-    readonly hf?: number;
+    /** SDK `healthFactor` in basis points (e.g. 15000 = 1.5); omit to render "—". */
+    readonly healthFactor?: Bps;
     /** Target HF after the operation; renders a from → to transition. */
-    readonly hfTo?: number;
+    readonly healthFactorTo?: Bps;
     /** Debt in base units; a 0n debt renders "N/A". */
     readonly debt: bigint;
     /** Debt after the operation (defaults to `debt`). */
@@ -23,7 +24,6 @@ export interface HealthFactorBlockProps {
 }
 /**
  * "Health factor" row of a preview: label + help tip on the left, the zone-
- * colored HF (with optional from → to transition) on the right. Design only —
- * the reference `HFBlock` markup on bare value props.
+ * colored HF (with optional from → to transition) on the right.
  */
-export declare function HealthFactorBlock({ hf, hfTo, debt, debtTo, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;
+export declare function HealthFactorBlock({ healthFactor, healthFactorTo, debt, debtTo, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;

package/dist/types/components/base/info-list/info-list.d.ts

@@ -1,3 +1,4 @@
+import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { TitleText } from '../text';
 import { InfoListTest } from './constants';
@@ -24,3 +25,9 @@ export interface InfoSectionTitleProps {
 }
 /** Uppercase section label inside an `InfoList` (e.g. debt limits). */
 export declare function InfoSectionTitle({ title, }: InfoSectionTitleProps): React.ReactElement;
+export interface PointsInfoLineProps {
+    readonly data: ApyBreakdown | undefined;
+    readonly title?: TitleText;
+}
+/** Points row that omits itself when the SDK breakdown has no programs. */
+export declare function PointsInfoLine({ data, title, }: PointsInfoLineProps): React.ReactElement | null;

package/dist/types/components/base/liquidation-price-block/liquidation-price-block.d.ts

@@ -1,3 +1,4 @@
+import { Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { TitleText } from '../text';
 import { HFZones } from '../../health-factor';
@@ -11,8 +12,10 @@ export interface LiquidationPriceBlockProps {
     readonly price?: bigint | null;
     /** Price after the operation; renders a from → to transition. */
     readonly priceTo?: bigint | null;
-    /** The pair the price is quoted in, e.g. "WETH / USDC". */
-    readonly pricePair?: React.ReactNode;
+    /** Collateral token of the quoted pair. */
+    readonly collateral?: Token | null;
+    /** Underlying token of the quoted pair. */
+    readonly underlying?: Token;
     /** Zone dot next to the price. */
     readonly zone?: HFZones;
     readonly isLoading?: boolean;
@@ -25,6 +28,5 @@ export interface LiquidationPriceBlockProps {
 /**
  * "Liquidation price" row of a preview: label + help tip, the formatted price
  * (with optional from → to and zone dot), and the price pair underneath.
- * Design only — the reference `LiquidationPriceBlock` markup on value props.
  */
-export declare function LiquidationPriceBlock({ price, priceTo, pricePair, zone, isLoading, title, tip, testId, }: LiquidationPriceBlockProps): React.ReactElement;
+export declare function LiquidationPriceBlock({ price, priceTo, collateral, underlying, zone, isLoading, title, tip, testId, }: LiquidationPriceBlockProps): React.ReactElement;

package/dist/types/components/base/manage-pane/constants.d.ts

@@ -4,5 +4,6 @@ export declare class ManagePaneTest {
     static dropdown: string;
     static body: string;
     static message: string;
+    static actionDialog: string;
     static tab: (id: string) => string;
 }

package/dist/types/components/base/manage-pane/manage-pane.d.ts

@@ -24,7 +24,9 @@ export interface ManagePaneActionTabProps {
     readonly id: string;
     readonly title: TitleText;
     /** Fires without changing the active tab (e.g. "My positions"). */
-    readonly onClick: () => void;
+    readonly onClick?: () => void;
+    /** When set, a click opens this content in a dialog instead of switching tabs. */
+    readonly children?: React.ReactNode;
 }
 export declare function ManagePaneActionTab(_props: ManagePaneActionTabProps): null;
 export interface ManagePaneProps {

package/dist/types/components/base/page-title/page-title.d.ts

@@ -3,6 +3,17 @@ import { FormatMessageTypedProps } from '../../typed-intl';
 import { PageTitleTest } from './constants';
 export { PageTitleTest };
 export type PageTitleText = FormatMessageTypedProps | string;
+export interface PageHeadProviderProps {
+    readonly children: React.ReactNode;
+    /** Renders the document head for a resolved browser title (e.g. a Helmet node). */
+    readonly render: (browserTitle: string) => React.ReactNode;
+}
+/**
+ * Optional document-head hook for {@link PageTitle}. Without a provider the
+ * visible heading still renders and `<head>` is left alone — ui-kit does not
+ * import a head library.
+ */
+export declare function PageHeadProvider({ children, render, }: PageHeadProviderProps): React.ReactElement;
 export interface PageTitleProps {
     /** Visible heading; a node (e.g. a token-pair title) renders as given. */
     readonly title: PageTitleText | React.ReactNode;
@@ -11,13 +22,8 @@ export interface PageTitleProps {
      * Required when {@link title} is a node — a node cannot become a string.
      */
     readonly browserTitle?: PageTitleText;
-    /**
-     * Renders the document head for the resolved browser title (e.g. a Helmet
-     * element). The app owns the head library; ui-kit only hands over the string.
-     */
-    readonly head?: (browserTitle: string) => React.ReactNode;
     readonly as?: "h1" | "h2" | "h3" | "span";
     readonly className?: string;
 }
 /** The one visible page heading, plus an optional document-head hook. */
-export declare function PageTitle({ title, browserTitle, head, as, className, }: PageTitleProps): React.ReactElement;
+export declare function PageTitle({ title, browserTitle, as, className, }: PageTitleProps): React.ReactElement;

package/dist/types/components/base/time-to-liquidation-block/time-to-liquidation-block.d.ts

@@ -5,12 +5,12 @@ import { TimeToLiquidationBlockTest } from './constants';
 export { TimeToLiquidationBlockTest };
 export interface TimeToLiquidationBlockProps {
     /**
-     * Time to liquidation in seconds; `null` renders "N/A", omit to render "—"
-     * (value not available).
+     * SDK `timeToLiquidation` in milliseconds; `null` renders "N/A", omit to
+     * render "—" (value not available).
      */
-    readonly seconds?: number | null;
+    readonly data?: bigint | null;
     /** Time after the operation; renders a from → to transition. */
-    readonly secondsTo?: number | null;
+    readonly dataTo?: bigint | null;
     /** Pre-computed zone; if not set, derived from the value. */
     readonly zone?: TTLZones;
     readonly isLoading?: boolean;
@@ -23,6 +23,5 @@ export interface TimeToLiquidationBlockProps {
 /**
  * "Time to liquidation" row of a preview: label + help tip, the remaining
  * time as `Nmo` / `Nd` / `<1d` with a zone dot, optionally from → to.
- * Design only — the reference `TimeToLiquidationBlock` markup on value props.
  */
-export declare function TimeToLiquidationBlock({ seconds, secondsTo, zone, isLoading, title, tip, testId, }: TimeToLiquidationBlockProps): React.ReactElement;
+export declare function TimeToLiquidationBlock({ data, dataTo, zone, isLoading, title, tip, testId, }: TimeToLiquidationBlockProps): React.ReactElement;

package/dist/types/components/base/token-amount/token-amount.d.ts

@@ -1,7 +1,9 @@
 import { Amount, Token, TokenAmount as TokenAmountModel } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
+import { StackAlign } from '../stack';
 import { TokenAmountTest } from './constants';
 export { TokenAmountTest };
+export type TokenAmountAlign = Extract<StackAlign, "start" | "end">;
 /**
  * An amount of a token, with its USD value underneath.
  *
@@ -10,7 +12,7 @@ export { TokenAmountTest };
  * `totalSupply` / `totalBorrow`, implicitly in the market underlying) name their
  * token alongside.
  */
-export type TokenAmountProps = {
+type TokenAmountDataProps = {
     /** `null` means unavailable and renders an em-dash. */
     readonly data: TokenAmountModel | null;
     readonly token?: undefined;
@@ -18,4 +20,8 @@ export type TokenAmountProps = {
     readonly data: Amount | null;
     readonly token: Token;
 };
-export declare function TokenAmount({ data, token, }: TokenAmountProps): React.ReactElement;
+export type TokenAmountProps = TokenAmountDataProps & {
+    /** Cross-axis alignment of the token line and the USD caption. */
+    readonly align?: TokenAmountAlign;
+};
+export declare function TokenAmount({ data, token, align, }: TokenAmountProps): React.ReactElement;

package/dist/types/components/base/values/constants.d.ts

@@ -6,6 +6,7 @@ export declare class ValueTest {
     static healthFactor: string;
     static pnl: string;
     static tokenBigint: string;
+    static points: string;
     static placeholder: string;
 }
 export declare class PositionShortLabelTest {

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

@@ -1,5 +1,6 @@
 export { ValueTest } from './constants';
 export { PnlValue } from './pnl-value';
+export { PointsValue, type PointsValueProps } from './points-value';
 export { PositionShortLabel, PositionShortLabelTest, } from './position-short-label';
 export { PositionTypeBadge, type PositionTypeBadgeProps, } from './position-type-badge';
-export { ApyValue, type ApyValueProps, HealthFactorValue, LeverageValue, TokenBigint, UsdValue, UtilizationValue, } from './scalars';
+export { ApyValue, type ApyValueProps, bps, HealthFactorValue, LeverageValue, TokenBigint, UsdValue, UtilizationValue, } from './scalars';

package/dist/types/components/base/values/points-value.d.ts

@@ -0,0 +1,11 @@
+import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+export interface PointsValueProps {
+    /** SDK APY breakdown; `undefined` or no point programs render nothing. */
+    readonly data: ApyBreakdown | undefined;
+}
+/**
+ * Point programs attached to an APY breakdown: icon + name for each program.
+ * Returns `null` when the SDK has none.
+ */
+export declare function PointsValue({ data, }: PointsValueProps): React.ReactElement | null;

package/dist/types/components/base/values/position-short-label.d.ts

@@ -2,7 +2,7 @@ import { StrategyPosition } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { PositionShortLabelTest } from './constants';
 export { PositionShortLabelTest };
-/** "wstETH / WETH · 2.5x" — one open position, in a menu row. */
+/** "wstETH / WETH · 2.50x" — one open position, in a menu row. */
 export declare function PositionShortLabel({ data, }: {
     readonly data: StrategyPosition;
 }): React.ReactElement;

package/dist/types/components/base/values/scalars.d.ts

@@ -1,5 +1,14 @@
 import { ApyBreakdown, Bps, Leverage, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
+/**
+ * Basis points as a percentage (`10000` = 100%); the model's `Bps` is `number`.
+ *
+ * Self-contained on purpose: `percentageTemplate` (format-money) carries a
+ * same-named, oppositely-scaled twin in `templates.tsx` (already-percent
+ * input), so a shared bps→percent step here would inherit that ambiguity.
+ * `bps` is the one place that owns the conversion.
+ */
+export declare function bps(value: Bps): string;
 export interface ApyValueProps {
     /** A breakdown (tooltip-able) or a bare rate; `undefined` renders a dash. */
     readonly data: ApyBreakdown | Bps | undefined;

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

@@ -10,6 +10,6 @@ export interface PoolAssetsTableRowProps {
     readonly last: boolean;
 }
 /**
- * Single data row: token + pool name, `percentageTemplate` rate, and formatted usage vs limit.
+ * Single data row: token + pool name, `bps`-formatted rate, and formatted usage vs limit.
  */
 export declare function PoolAssetsTableRow({ poolName, token, currentQuota, underlyingToken, last, }: PoolAssetsTableRowProps): React.ReactElement;

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/index.d.ts

@@ -9,6 +9,7 @@ export * from './colors';
 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 { FORMAT_CONSTANTS, type FormatNumberOptions, formatNumberWithSuffix, formatPrice, getAdaptiveDecimals, isBelowDisplayThreshold, isEffectivelyZero, toSignificantDigits, } from './format-number';
 export * from './format-slippage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.2",
+  "version": "4.0.0-next.4",
   "description": "Internal UI components",
   "repository": {
     "type": "git",
@@ -116,7 +116,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "15.1.0-next.5",
+    "@gearbox-protocol/sdk": "15.1.0-next.8",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",