@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.60

package/dist/types/components/alert-badge/alert-badge.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const alertBadgeVariants: (props?: ({
-    variant?: "none" | "default" | "success" | "warning" | "primary" | "alert" | "info" | null | undefined;
+    variant?: "none" | "default" | "success" | "alert" | "info" | "warning" | "primary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/alert-dialog/alert-dialog.d.ts

@@ -33,11 +33,11 @@ declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortal
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
 declare const AlertDialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
 declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/types/components/assets-list-cell/assets-list-cell.d.ts

@@ -151,5 +151,5 @@ export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps | T
  * />
  * ```
  */
-export declare function AssetsListCell(props: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsListCell(props: AssetsListCellProps): React.JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import type * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | "secondary" | "info" | "outline" | "neutral" | "danger" | "accent" | null | undefined;
+    variant?: "default" | "success" | "secondary" | "info" | "warning" | "destructive" | "outline" | "neutral" | "danger" | "accent" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Badge — component for displaying labels, tags, or status indicators.
@@ -25,5 +25,5 @@ declare const badgeVariants: (props?: ({
  */
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
 export { Badge, badgeVariants };

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

@@ -1,4 +1,5 @@
 import { Token } from '@gearbox-protocol/sdk/model';
+import { AddressMap } from '@gearbox-protocol/sdk/onchain';
 import { default as React } from 'react';
 import { TitleText } from '../text';
 import { AmountInputTest } from './constants';
@@ -14,9 +15,9 @@ export interface AmountInputProps {
     readonly onToken?: (token: Token) => void;
     readonly balance?: bigint;
     /** Wallet balances by token address — the picker's balance column. */
-    readonly balances?: Readonly<Record<string, bigint>>;
+    readonly balances?: AddressMap<bigint>;
     /** USD price per whole token by address — the picker's USD line. */
-    readonly usdPrices?: Readonly<Record<string, number>>;
+    readonly usdPrices?: AddressMap<number>;
     /** Label above the field; defaults to the "Amount" locale string. */
     readonly label?: TitleText;
     /** Label of the balance row; defaults to the "Balance" locale string. */

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

@@ -1,11 +1,12 @@
 import { Token } from '@gearbox-protocol/sdk/model';
+import { AddressMap } from '@gearbox-protocol/sdk/onchain';
 import { default as React } from 'react';
 export interface TokenSelectPanelProps {
     readonly tokens: ReadonlyArray<Token>;
-    /** Wallet balances by token address (either casing); shows a balance column. */
-    readonly balances?: Readonly<Record<string, bigint>>;
+    /** Wallet balances by token address; shows a balance column. */
+    readonly balances?: AddressMap<bigint>;
     /** USD price per one whole token by address; shows a USD line under the balance. */
-    readonly usdPrices?: Readonly<Record<string, number>>;
+    readonly usdPrices?: AddressMap<number>;
     readonly onSelect: (token: Token) => void;
     readonly onClose: () => void;
 }

package/dist/types/components/base/apy-breakdown-body/apy-breakdown-body.d.ts

@@ -0,0 +1,43 @@
+import { Bps } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { LocaleKeys } from '../../../locale';
+export declare const BREAKDOWN_DASH = "\u2014";
+/** Width of an APY breakdown in a tooltip — the one place it is named. */
+export declare const APY_BREAKDOWN_TOOLTIP_WIDTH = "400px";
+export declare function periodMessageId(period: "7d" | undefined, base: LocaleKeys, with7d: LocaleKeys): LocaleKeys;
+/**
+ * A rate as the rows write it: two decimals, and a real minus sign.
+ *
+ * Two decimals at every scale, unlike the compact form the rest of the kit
+ * uses above 1000%. A breakdown is read by adding it up, and `1.2K%` carries
+ * three significant figures — enough to make a correct column look wrong.
+ */
+export declare function formatBreakdownRate(value: Bps): string;
+export interface ApyBreakdownBodyProps {
+    /** Heading to the left of the chip — "Net APY (7d)" and the like. */
+    readonly title: React.ReactNode;
+    /** The figure the chip prints, or {@link NoValue} when there is none. */
+    readonly chip: React.ReactNode;
+    /** Green chip when the net is positive; muted otherwise. */
+    readonly chipPositive?: boolean;
+    readonly chipTestId?: string;
+    readonly children: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * Shared chrome of an APY breakdown: header with a net chip, then rows.
+ * Used by the pool and strategy cards and by the yield tooltip.
+ */
+export declare function ApyBreakdownBody({ title, chip, chipPositive, chipTestId, children, testId, }: ApyBreakdownBodyProps): React.ReactElement;
+export interface ApyBreakdownRowProps {
+    readonly label: React.ReactNode;
+    /** The rate, or {@link NoValue} when the feed has none. */
+    readonly value: React.ReactNode;
+    readonly subtext?: React.ReactNode;
+    readonly muted?: boolean;
+    readonly testId?: string;
+    readonly valueTestId?: string;
+    readonly captionTestId?: string;
+}
+export declare function ApyBreakdownRow({ label, value, subtext, muted, testId, valueTestId, captionTestId, }: ApyBreakdownRowProps): React.ReactElement;
+export declare function ApyBreakdownDivider(): React.ReactElement;

package/dist/types/components/base/apy-breakdown-body/index.d.ts

@@ -0,0 +1,2 @@
+export * from './apy-breakdown-body';
+export * from './apy-breakdown-body';

package/dist/types/components/base/details-view/index.d.ts

@@ -1,3 +1,3 @@
-export { AsideAlignAnchor } from './detail-aside/detail-aside-scope';
-export { DetailAsideScreenLayout, type DetailAsideScreenLayoutProps, } from './detail-aside/detail-aside-screen-layout';
+export * from './detail-aside/detail-aside-scope';
+export * from './detail-aside/detail-aside-screen-layout';
 export * from './details-view';

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

@@ -13,6 +13,13 @@ export interface HealthFactorBlockProps {
     readonly debt: bigint;
     /** Debt after the operation (defaults to `debt`). */
     readonly debtTo?: bigint;
+    /**
+     * Marks the figure as projected rather than promised, with a leading `≈` in
+     * the factor's own colour. Only the projected side is marked: on a
+     * `from → to` row the "from" is where the account stands now, which is
+     * measured, not estimated.
+     */
+    readonly approximate?: boolean;
     /** Pre-computed zone; if not set, derived from the value. */
     readonly zone?: HFZones;
     readonly isLoading?: boolean;
@@ -26,4 +33,4 @@ 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.
  */
-export declare function HealthFactorBlock({ healthFactor, healthFactorTo, debt, debtTo, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;
+export declare function HealthFactorBlock({ healthFactor, healthFactorTo, debt, debtTo, approximate, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;

package/dist/types/components/base/history-chart/history-chart.d.ts

@@ -1,15 +1,29 @@
-import { HistoryRange, HistorySeries } from '@gearbox-protocol/sdk/model';
+import { ChartRange, Timestamp } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { TitleText } from '../text';
 import { PriceLineConfig, PriceZoneConfig } from '../../graph';
 import { YMeasureUnits } from '../../graph/formatters';
 import { HistoryChartTest } from './constants';
 export { HistoryChartTest };
+/**
+ * One metric's points over the selected window.
+ *
+ * Declared here rather than imported: the SDK used to export `HistorySeries`,
+ * dropped it when charts moved to the multi-metric `ChartBundle`, and this
+ * component still draws one series at a time. Only these three fields are read.
+ */
+export interface HistorySeries {
+    readonly metric: string;
+    readonly points: ReadonlyArray<{
+        readonly timestamp: Timestamp;
+        readonly value: number;
+    }>;
+}
 export interface HistoryChartProps {
-    /** One series or several (dual charts); SDK shape as it comes. */
+    /** One series or several (dual charts). */
     readonly data: HistorySeries | ReadonlyArray<HistorySeries> | undefined;
-    readonly range: HistoryRange;
-    readonly onRange: (range: HistoryRange) => void;
+    readonly range: ChartRange;
+    readonly onRange: (range: ChartRange) => void;
     readonly isLoading?: boolean;
     readonly error?: Error;
     /** Y-axis unit ("%", "$", a token symbol); one for all or one per series. */
@@ -35,13 +49,14 @@ export interface HistoryChartProps {
     readonly trailing?: React.ReactNode;
     /**
      * Force a second Y-axis. When omitted, the chart splits axes only if
-     * `yMeasureUnit` lists more than one distinct unit.
+     * `yMeasureUnit` lists more than one distinct unit. Same-unit series share
+     * one scale and show its labels.
      */
     readonly dualYAxis?: boolean;
 }
 /**
  * Design-only history chart on the TradingView engine: range dropdown, legend
  * below the frame, tooltips, optional reference lines and zones. Takes the SDK's
- * `HistorySeries` as it comes — points are mapped 1:1, no fetching.
+ * a `HistorySeries` as it comes — points are mapped 1:1, no fetching.
  */
 export declare function HistoryChart({ data, range, onRange, isLoading, error, yMeasureUnit, height, seriesTitles, priceLines, zones, showCurrentValue, yScaleMin, title, trailing, dualYAxis: dualYAxisProp, }: HistoryChartProps): React.ReactElement;

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

@@ -6,7 +6,6 @@ export * from './details-view';
 export * from './health-factor-block';
 export * from './history-chart';
 export * from './info-list';
-export * from './info-portal';
 export * from './leverage-input';
 export * from './leverage-preset-chips';
 export * from './liquidation-params-table';
@@ -16,14 +15,13 @@ export * from './more-accordion';
 export * from './nested-info-stack';
 export * from './page-title';
 export * from './pool-apy-breakdown-card';
+export * from './position-assets';
 export * from './review-button';
 export * from './section-heading';
 export * from './segmented-tabs';
-export * from './side-card';
 export * from './spacing';
 export * from './stack';
 export * from './stat-badge';
-export * from './sticky-bar';
 export * from './strategy-apy-breakdown-card';
 export * from './tabber';
 export * from './text';
@@ -31,5 +29,4 @@ export * from './time-to-liquidation-block';
 export * from './title-meta';
 export * from './token-amount';
 export * from './token-pair-symbol';
-export * from './token-pair-title';
 export * from './values';

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

@@ -1,30 +1,19 @@
 import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { TitleText } from '../text';
+import { VerticalIndicatorProps } from '../../vertical-indicator';
 import { InfoListTest } from './constants';
 export { InfoListTest };
 /** Label / value rows under a form — the projected state of an operation. */
 export declare function InfoList({ children, }: {
     readonly children: React.ReactNode;
 }): React.ReactElement;
-export interface InfoLineProps {
+export interface InfoLineProps extends Omit<VerticalIndicatorProps, "label" | "title"> {
     readonly title: TitleText;
-    readonly value: React.ReactNode;
-    /** Tooltip content behind the help icon next to the label. */
-    readonly tip?: React.ReactNode;
-    /** Caption under the value (right-aligned), e.g. "for 0.00 USDC". */
-    readonly valueDescription?: React.ReactNode;
-    /** New value after an arrow (value → valueTo); the old one is dimmed. */
-    readonly valueTo?: React.ReactNode;
-    readonly testId?: string;
+    readonly "data-testid"?: string;
 }
 /** One row of the list — the reference `VerticalIndicator` markup. */
-export declare function InfoLine({ title, value, tip, valueDescription, valueTo, testId, }: InfoLineProps): React.ReactElement;
-export interface InfoSectionTitleProps {
-    readonly title: TitleText;
-}
-/** Uppercase section label inside an `InfoList` (e.g. debt limits). */
-export declare function InfoSectionTitle({ title, }: InfoSectionTitleProps): React.ReactElement;
+export declare function InfoLine({ title, size, align, "data-testid": testId, ...rest }: InfoLineProps): React.ReactElement;
 export interface PointsInfoLineProps {
     readonly data: ApyBreakdown | undefined;
     readonly title?: TitleText;

package/dist/types/components/base/leverage-input/leverage-input.d.ts

@@ -1,7 +1,6 @@
 import { Leverage } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { TitleText } from '../text';
-import { WithTitleProps } from '../../with-title';
 import { ColorInterval } from '../../../utils/ranges';
 import { LeverageInputTest } from './constants';
 export { LeverageInputTest };
@@ -25,14 +24,17 @@ export interface LeverageInputProps {
     /** When set, renders a "Reset" button with a tooltip next to the value. */
     readonly reset?: LeverageInputResetProps;
     /**
-     * Risk bands along the track, in leverage units (e.g. `{start: 1, end: 3}`).
-     * Scaled to the slider's integer space internally.
+     * The reachable leverages, in leverage units (e.g. `{start: 1, end: 3}`),
+     * scaled to the slider's integer space internally. Omitted or empty leaves
+     * the track unmarked — which is what an unknown range looks like, not a
+     * full one.
      */
     readonly colorIntervals?: ReadonlyArray<ColorInterval>;
     /** Label of the highlighted interval range under the slider. */
     readonly colorIntervalLabel?: string;
-    readonly size?: WithTitleProps["size"];
+    readonly size?: TitleSize;
 }
+type TitleSize = "sm" | "default" | "md" | "lg";
 /**
  * Target leverage of a position, bounded by what the strategy allows.
  * Title row carries an inline-editable value (`N.NNx`) and an optional reset;

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

@@ -16,6 +16,13 @@ export interface LiquidationPriceBlockProps {
     readonly collateral?: Token | null;
     /** Underlying token of the quoted pair. */
     readonly underlying?: Token;
+    /**
+     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}, for a value the
+     * operation projects rather than promises. Only the projected side is
+     * marked: on a `from → to` row the "from" is where the account stands now,
+     * which is measured, not estimated.
+     */
+    readonly approximate?: boolean;
     /** Zone dot next to the price. */
     readonly zone?: HFZones;
     readonly isLoading?: boolean;
@@ -29,4 +36,4 @@ 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.
  */
-export declare function LiquidationPriceBlock({ price, priceTo, collateral, underlying, zone, isLoading, title, tip, testId, }: LiquidationPriceBlockProps): React.ReactElement;
+export declare function LiquidationPriceBlock({ price, priceTo, collateral, underlying, approximate, zone, isLoading, title, tip, testId, }: LiquidationPriceBlockProps): React.ReactElement;

package/dist/types/components/base/pool-apy-breakdown-card/constants.d.ts

@@ -1,4 +1,7 @@
 export declare class PoolApyBreakdownCardTest {
     static root: string;
+    static net: string;
     static value: string;
+    static reward: string;
+    static points: string;
 }

package/dist/types/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.d.ts

@@ -1,13 +1,18 @@
-import { Bps } from '@gearbox-protocol/sdk/model';
+import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { PoolApyBreakdownCardTest } from './constants';
 export { PoolApyBreakdownCardTest };
 export interface PoolApyBreakdownCardProps {
-    /** Organic and incentive APYs in basis points; a missing value renders a dash. */
-    readonly data?: {
-        readonly organicApy?: Bps;
-        readonly incentiveApy?: Bps;
-    };
+    /** SDK supply APY; missing data renders dashes, a present one with no incentives renders Incentive APY as 0%. */
+    readonly data?: ApyBreakdown;
+    /** When `"7d"`, labels carry the averaging-window suffix. */
+    readonly period?: "7d";
 }
-/** Organic vs incentive APY next to the pool APY chart. Missing values render as dashes. */
-export declare function PoolApyBreakdownCard({ data, }: PoolApyBreakdownCardProps): React.ReactElement;
+/**
+ * How a pool's net APY is arrived at: base yield plus incentives.
+ *
+ * A token reward names the incentive row (`GEAR Incentive APY`). With none,
+ * that row is still shown as Incentive APY at 0%. Points sit under a divider
+ * when present; they are not addends.
+ */
+export declare function PoolApyBreakdownCard({ data, period, }: PoolApyBreakdownCardProps): React.ReactElement;

package/dist/types/components/base/position-assets/constants.d.ts

@@ -0,0 +1,6 @@
+export declare class PositionAssetsTest {
+    static root: string;
+    static row: string;
+    static worth: string;
+    static empty: string;
+}

package/dist/types/components/base/position-assets/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './position-assets';

package/dist/types/components/base/position-assets/position-assets.d.ts

@@ -0,0 +1,65 @@
+import { TokenAmount } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { PositionAssetsTest } from './constants';
+export { PositionAssetsTest };
+export interface PositionAssetsProps {
+    /** What the position holds. */
+    readonly assets?: readonly TokenAmount[];
+    /**
+     * What those holdings become. Given, every row reads `before → after` and
+     * names its token once for the pair; omitted, the rows are plain holdings.
+     */
+    readonly to?: readonly TokenAmount[];
+    /** Rendered in place of the rows when nothing survives the dust filter. */
+    readonly empty?: React.ReactNode;
+    /**
+     * Prefixes the projected amount with {@link APPROXIMATE_SYMBOL} — the "after"
+     * of a pair, or the only column when the list itself is a projection. The
+     * struck "before" is never marked: it is what the account holds now.
+     */
+    readonly approximate?: boolean;
+    readonly testId?: string;
+}
+/**
+ * Holdings token by token, most valuable first — the position itself rather
+ * than the one number its collateral adds up to. A right-aligned column, so it
+ * reads as the value of the `InfoLine` a caller drops it into.
+ *
+ * The whole of a change belongs in the one slot: a row carries both amounts
+ * with the arrow between them, rather than the caller putting one list in
+ * `value` and another in `valueTo`. Two lists would name the same token twice
+ * and draw its icon twice, which is what pushes a long symbol out of a narrow
+ * dialog; they would also have to be kept in the same order by hand.
+ *
+ * The rows carry no label of their own, which is why they are not `InfoLine`s:
+ * `VerticalIndicator` leaves out its left column entirely when no label is
+ * given and never justifies what remains, so a label-less row would sit on the
+ * wrong side.
+ *
+ * Dust is left out: an account carries stray fractions of a cent from
+ * rounding, and listing them buries the holdings that matter. A token the
+ * oracle cannot price is never dust — an unknown value is not a small one.
+ */
+export declare function PositionAssets({ assets, to, empty, approximate, testId, }: PositionAssetsProps): React.ReactElement;
+/** One token across both sides of a change. */
+export interface AssetRow {
+    readonly token: TokenAmount["token"];
+    /** What the position holds now — zero for a token only the other side has. */
+    readonly value: bigint;
+    /** What it becomes — zero where the projection drops the token. */
+    readonly valueTo: bigint;
+    /**
+     * What the token is worth at its richer side, which is what decides both
+     * dust and order. `null` when a side the oracle cannot price is involved.
+     */
+    readonly worth: number | null;
+    /** USD of the "now" side; `null` where the oracle could not price it. */
+    readonly valueUsd: number | null;
+    /** USD of the "after" side, for the caption a paired row shows. */
+    readonly valueToUsd: number | null;
+}
+/**
+ * What earns a row, most valuable first — decided across both sides, so a
+ * token either side holds is listed once, in one place.
+ */
+export declare function visibleAssets(assets: readonly TokenAmount[] | undefined, to?: readonly TokenAmount[]): AssetRow[];

package/dist/types/components/base/review-button/constants.d.ts

@@ -1,4 +1,5 @@
 export declare class ReviewButtonTest {
     static root: string;
     static error: string;
+    static tip: string;
 }

package/dist/types/components/base/review-button/review-button.d.ts

@@ -1,13 +1,27 @@
 import { default as React } from 'react';
+import { FormattedMessageTypedProps } from '../../typed-intl';
 import { LocaleKeys } from '../../../locale';
 import { ReviewButtonTest } from './constants';
 export { ReviewButtonTest };
 export interface ReviewButtonProps {
     readonly disabled: boolean;
-    /** Message id of what blocks the action; rendered above the button. */
+    /** What blocks the action; takes the button's own label while it is set. */
     readonly error: LocaleKeys | null;
+    /**
+     * How to get past the error — a card above the button. Taken as a message
+     * rather than a node because this component owns the formatter: the numbers
+     * a resolution names are `values`, and every caller would otherwise repeat
+     * the same `<FormattedMessageTyped>` wrapper.
+     */
+    readonly tip?: FormattedMessageTypedProps;
     readonly onClick: () => void;
     readonly label?: LocaleKeys;
 }
-/** The single primary action of every dialog: review, then confirm in Verify. */
-export declare function ReviewButton({ disabled, error, onClick, label, }: ReviewButtonProps): React.ReactElement;
+/**
+ * The single primary action of every dialog: review, then confirm in Verify.
+ *
+ * A blocked action says so on the button itself, and says what to do about it
+ * above — the arrangement the confirm screen already uses, so a dialog and its
+ * confirmation report the same refusal the same way.
+ */
+export declare function ReviewButton({ disabled, error, tip, onClick, label, }: ReviewButtonProps): React.ReactElement;

package/dist/types/components/base/stat-badge/constants.d.ts

@@ -2,4 +2,5 @@ export declare class StatBadgeTest {
     static root: string;
     static grid: string;
     static action: string;
+    static delta: string;
 }

package/dist/types/components/base/stat-badge/stat-badge.d.ts

@@ -3,10 +3,20 @@ import { TitleText } from '../text';
 import { StatBadgeTest } from './constants';
 export { StatBadgeTest };
 export type StatBadgeSize = "sm" | "md" | "default";
+export interface StatBadgeDelta {
+    /** Formatted change, e.g. `"12.50%"`. Sign is taken from `value`, not this string. */
+    readonly label: ReactNode;
+    /** Signed change; `> 0` is success, `< 0` is destructive. */
+    readonly value: number;
+    /** Period hint shown on hover, e.g. `"7D"`. */
+    readonly tooltip?: ReactNode;
+}
 export interface StatBadgeProps {
     /** A messageId (formatted here) or a node. */
     readonly title: TitleText;
     readonly value: React.ReactNode;
+    /** Optional change chip in the top-right of the card. Hidden while `isLoading`. */
+    readonly delta?: StatBadgeDelta;
     /** Optional control in the top-right of the card, e.g. a Claim button. */
     readonly action?: ReactNode;
     readonly className?: string;
@@ -16,7 +26,7 @@ export interface StatBadgeProps {
     readonly testId?: string;
     readonly size?: StatBadgeSize;
 }
-export declare function StatBadge({ title, value, isLoading, size, action, className, testId, }: StatBadgeProps): React.ReactElement;
+export declare function StatBadge({ title, value, isLoading, size, delta, action, className, testId, }: StatBadgeProps): React.ReactElement;
 export interface StatBadgeGridProps {
     readonly cols?: 1 | 2 | 3 | 4;
     readonly colsLg?: 1 | 2 | 3 | 4;

package/dist/types/components/base/strategy-apy-breakdown-card/constants.d.ts

@@ -1,5 +1,9 @@
 export declare class StrategyApyBreakdownCardTest {
     static root: string;
-    static row: string;
     static net: string;
+    static collateral: string;
+    static borrow: string;
+    static value: string;
+    static points: string;
+    static caption: string;
 }

package/dist/types/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.d.ts

@@ -1,17 +1,45 @@
-import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
+import { Leverage, StrategyOpportunity } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { StrategyApyBreakdownCardTest } from './constants';
 export { StrategyApyBreakdownCardTest };
-export interface StrategyApyBreakdownData {
-    readonly collateralApy?: ApyBreakdown;
-    readonly borrowApy?: Bps;
-    readonly additionalBorrowApy?: Bps;
-    readonly maxLeverage?: Leverage;
-}
+/**
+ * What the card reads off a strategy: the seven-day feed, and the liquidation
+ * threshold the quota is weighted by.
+ *
+ * A slice of the SDK type rather than a shape of its own, so a caller hands
+ * over the opportunity it already holds and the card states what it reads.
+ */
+export type StrategyApyBreakdownSlice = Pick<StrategyOpportunity, "borrowApyAvg7D" | "quotaRateAvg7D" | "liquidationThreshold" | "collateralApyAvg7D">;
 export interface StrategyApyBreakdownCardProps {
-    readonly data: StrategyApyBreakdownData;
-    /** Selected leverage from the chart toolbar chips. Falls back to max. */
-    readonly leverage?: Leverage;
+    /** The strategy being broken down; every figure is derived from it. */
+    readonly data: StrategyApyBreakdownSlice;
+    /** Leverage every figure below is quoted at. */
+    readonly leverage: Leverage;
+    /**
+     * Multiplier caption under each figure — `11.18 × 3.11%` and the like.
+     *
+     * On beside a chart, where the card is the derivation and there is room for
+     * it. Off in a tooltip, where it is a glance.
+     */
+    readonly showFormula?: boolean;
+    /** When `"7d"`, labels carry the averaging-window suffix. */
+    readonly period?: "7d";
 }
-/** Net APY formula beside the strategy yield chart. Chart itself is unchanged. */
-export declare function StrategyApyBreakdownCard({ data, leverage: leverageProp, }: StrategyApyBreakdownCardProps): React.ReactElement;
+/**
+ * How a strategy's net APY is arrived at: collateral yield on the leveraged
+ * position, less what the credit behind it costs.
+ *
+ * The card is handed a strategy and a leverage and derives the rest, because
+ * every figure it shows is a figure only this card asks for. **N** and **B**
+ * come from the SDK — `calcNetStrategyApy` and `calcEffectiveBorrowApy`, the
+ * same two the badge and the list cell are quoting — and the collateral row is
+ * their sum, which is exactly `round(leverage × collateralApy)` because the SDK
+ * subtracts an integer `B` inside its own rounding. Deriving the third value
+ * instead of recomputing it is what makes `N = C − B` hold to the basis point
+ * rather than approximately.
+ *
+ * Incentive rows are levered individually and the collateral row takes the
+ * remainder, so the column adds up to the chip even when each reward rounds
+ * its own way.
+ */
+export declare function StrategyApyBreakdownCard({ data, leverage, showFormula, period, }: StrategyApyBreakdownCardProps): React.ReactElement;

package/dist/types/components/base/tabber/tabber.d.ts

@@ -10,8 +10,8 @@ export interface TabberSectionProps {
     readonly actions?: React.ReactNode;
     readonly children?: React.ReactNode;
     /**
-     * Render this section above the sticky tab bar (overview badges). The tab
-     * still appears in the bar and scroll-spy still tracks the section.
+     * Render this section above the sticky tab bar (overview badges). The
+     * section is not listed in the bar; scroll-spy tracks only sections below it.
      */
     readonly beforeBar?: boolean;
     /** Skip the in-section h2 — overview has badges, not a heading. */

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

@@ -11,6 +11,13 @@ export interface TimeToLiquidationBlockProps {
     readonly data?: bigint | null;
     /** Time after the operation; renders a from → to transition. */
     readonly dataTo?: bigint | null;
+    /**
+     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}, for a value the
+     * operation projects rather than promises. Only the projected side is
+     * marked: on a `from → to` row the "from" is where the account stands now,
+     * which is measured, not estimated.
+     */
+    readonly approximate?: boolean;
     /** Pre-computed zone; if not set, derived from the value. */
     readonly zone?: TTLZones;
     readonly isLoading?: boolean;
@@ -24,4 +31,4 @@ 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.
  */
-export declare function TimeToLiquidationBlock({ data, dataTo, zone, isLoading, title, tip, testId, }: TimeToLiquidationBlockProps): React.ReactElement;
+export declare function TimeToLiquidationBlock({ data, dataTo, approximate, zone, isLoading, title, tip, testId, }: TimeToLiquidationBlockProps): React.ReactElement;