@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.0

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?: "default" | "none" | "alert" | "info" | "warning" | "success" | "primary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -57,4 +57,4 @@ export interface AlertBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElemen
  * ```
  */
 declare const AlertBadge: React.ForwardRefExoticComponent<AlertBadgeProps & React.RefAttributes<HTMLDivElement>>;
-export { AlertBadge, alertBadgeVariants };
+export { AlertBadge };

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

@@ -28,20 +28,22 @@ import * as React from "react";
  * - for complex forms or content (use Dialog component).
  */
 declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+/**
+ * See the note on DialogTrigger: an alias no consumer needs, kept so the radix
+ * surface stays whole and the stories can open the dialog.
+ */
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
-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>>;
 declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };

package/dist/types/components/app-bar/app-bar-frame.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+/**
+ * The bar and its three slots. Its own module, outside the barrel: AppHeader is
+ * the header a consumer mounts, and this is the frame it fills.
+ */
+export interface AppBarProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBar — top-level navigation bar container.
+ *
+ * Implements the classic 3-column layout: left panel, growing center, right panel.
+ * Uses `position: relative` so that AppBarCenterContent can be absolutely positioned.
+ *
+ * @example
+ * ```tsx
+ * <AppBar>
+ *   <AppBarSidePanel>{leftContent}</AppBarSidePanel>
+ *   <AppBarCenter>
+ *     <AppBarCenterContent>{tabs}</AppBarCenterContent>
+ *   </AppBarCenter>
+ *   <AppBarSidePanel>{rightContent}</AppBarSidePanel>
+ * </AppBar>
+ * ```
+ */
+export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<HTMLElement>>;
+export interface AppBarSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarSidePanel — flex row container for left/right side items.
+ * Provides 8px gap between child elements.
+ */
+export declare const AppBarSidePanel: React.ForwardRefExoticComponent<AppBarSidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarCenter — center navigation area that grows to fill available space.
+ *
+ * Aligns itself to the bottom of the flex container (align-self: flex-end)
+ * so that the absolutely-positioned AppBarCenterContent appears below the
+ * side panel buttons.
+ */
+export declare const AppBarCenter: React.ForwardRefExoticComponent<AppBarCenterProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppBarCenterContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * AppBarCenterContent — absolutely positioned container for navigation tabs.
+ *
+ * Positioned 16px below the AppBarCenter's bottom edge, creating the effect
+ * of tabs "hanging" below the main navigation bar.
+ *
+ * Hidden on mobile (< 768px), visible on desktop (≥ 768px).
+ */
+export declare const AppBarCenterContent: React.ForwardRefExoticComponent<AppBarCenterContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/app-bar/app-bar.d.ts

@@ -1,56 +1,4 @@
 import * as React from "react";
-export interface AppBarProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-}
-/**
- * AppBar — top-level navigation bar container.
- *
- * Implements the classic 3-column layout: left panel, growing center, right panel.
- * Uses `position: relative` so that AppBarCenterContent can be absolutely positioned.
- *
- * @example
- * ```tsx
- * <AppBar>
- *   <AppBarSidePanel>{leftContent}</AppBarSidePanel>
- *   <AppBarCenter>
- *     <AppBarCenterContent>{tabs}</AppBarCenterContent>
- *   </AppBarCenter>
- *   <AppBarSidePanel>{rightContent}</AppBarSidePanel>
- * </AppBar>
- * ```
- */
-export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<HTMLElement>>;
-export interface AppBarSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-}
-/**
- * AppBarSidePanel — flex row container for left/right side items.
- * Provides 8px gap between child elements.
- */
-export declare const AppBarSidePanel: React.ForwardRefExoticComponent<AppBarSidePanelProps & React.RefAttributes<HTMLDivElement>>;
-export interface AppBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-}
-/**
- * AppBarCenter — center navigation area that grows to fill available space.
- *
- * Aligns itself to the bottom of the flex container (align-self: flex-end)
- * so that the absolutely-positioned AppBarCenterContent appears below the
- * side panel buttons.
- */
-export declare const AppBarCenter: React.ForwardRefExoticComponent<AppBarCenterProps & React.RefAttributes<HTMLDivElement>>;
-export interface AppBarCenterContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-}
-/**
- * AppBarCenterContent — absolutely positioned container for navigation tabs.
- *
- * Positioned 16px below the AppBarCenter's bottom edge, creating the effect
- * of tabs "hanging" below the main navigation bar.
- *
- * Hidden on mobile (< 768px), visible on desktop (≥ 768px).
- */
-export declare const AppBarCenterContent: React.ForwardRefExoticComponent<AppBarCenterContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface AppBarNavItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Optional attribute/badge displayed to the right of the label (e.g. "×10")

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

@@ -1,7 +1,7 @@
 import { Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { Address } from 'viem';
-import { CollateralAllocation } from '../collateral-allocation-tooltip';
+import { CollateralAllocation } from '../collateral-allocation-tooltip/collateral-allocation-tooltip';
 type Mode = "default" | "cascade";
 interface CommonOptions {
     mode?: Mode;
@@ -44,47 +44,6 @@ export interface SingleAssetCellProps {
      * Additional CSS classes
      */
     className?: string;
-    balances?: undefined;
-    tokensList?: undefined;
-    tokens?: undefined;
-}
-/**
- * Multi-asset list cell props (legacy API, compatible with @gearbox-protocol/interface)
- */
-export interface MultiAssetCellProps {
-    /**
-     * List of asset balances (either objects with token address or plain addresses)
-     */
-    balances: Array<{
-        token: Address;
-    }> | Array<Address>;
-    /**
-     * Token data keyed by address
-     */
-    tokensList: Record<Address, {
-        symbol: string;
-        title?: string;
-    }>;
-    /**
-     * Maximum number of assets to display before showing "+N"
-     * @default 3
-     */
-    maxAssets?: number;
-    /**
-     * Size of token icons
-     * @default 24
-     */
-    iconSize?: number;
-    /**
-     * Display and interaction options
-     */
-    options?: CommonOptions;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    assetAddress?: undefined;
-    symbol?: undefined;
     tokens?: undefined;
 }
 /**
@@ -110,19 +69,16 @@ export interface TokensAssetCellProps {
      * Additional CSS classes
      */
     className?: string;
-    balances?: undefined;
-    tokensList?: undefined;
     assetAddress?: undefined;
     symbol?: undefined;
 }
-export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps | TokensAssetCellProps;
+export type AssetsListCellProps = SingleAssetCellProps | TokensAssetCellProps;
 /**
  * AssetsListCell — displays asset icons in a list/grid layout
  *
  * Supports three APIs:
  * 1. Single asset: `<AssetsListCell assetAddress="0x..." symbol="ETH" />`
- * 2. Multi-asset list (legacy): `<AssetsListCell balances={[...]} tokensList={...} />`
- * 3. SDK tokens: `<AssetsListCell tokens={[...]} />`
+ * 2. SDK tokens: `<AssetsListCell tokens={[...]} />`
  *
  * @example
  * ```tsx
@@ -141,15 +97,7 @@ export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps | T
  *   options={{ mode: "cascade" }}
  * />
  *
- * // Multi-asset list (legacy)
- * <AssetsListCell
- *   balances={[{ token: "0x1234..." }, { token: "0x5678..." }]}
- *   tokensList={{ "0x1234...": { symbol: "ETH" }, "0x5678...": { symbol: "USDC" } }}
- *   maxAssets={5}
- *   iconSize={24}
- *   options={{ mode: "cascade" }}
- * />
  * ```
  */
-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" | "secondary" | "info" | "warning" | "success" | "destructive" | "outline" | "danger" | "accent" | "neutral" | 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;
-export { Badge, badgeVariants };
+declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
+export { Badge };

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

@@ -1,2 +1 @@
 export * from './amount-input';
-export * from './token-select-panel';

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,47 @@
+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, magnitude only.
+ *
+ * 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.
+ *
+ * `signed` is for the net chip: every row states its direction in its label.
+ */
+export declare function formatBreakdownRate(value: Bps, signed?: boolean): string;
+/** The percent a row prints, so a caption can be built to add up to it. */
+export declare function breakdownRateValue(value: Bps): number;
+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,2 @@
 export { AsideAlignAnchor } from './detail-aside/detail-aside-scope';
-export { DetailAsideScreenLayout, type DetailAsideScreenLayoutProps, } 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. */
@@ -33,15 +47,21 @@ export interface HistoryChartProps {
     readonly title?: TitleText;
     /** Controls to the left of the range dropdown (e.g. leverage chips). */
     readonly trailing?: React.ReactNode;
+    /**
+     * Replaces the default "No data" placeholder when the range holds no points,
+     * e.g. a screen that knows the series is still being indexed.
+     */
+    readonly emptyMessage?: 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;
+export declare function HistoryChart({ data, range, onRange, isLoading, error, yMeasureUnit, height, seriesTitles, priceLines, zones, showCurrentValue, yScaleMin, title, trailing, emptyMessage, 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,12 @@ 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 +28,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,33 +1,24 @@
 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;
 }
-/** Points row that omits itself when the SDK breakdown has no programs. */
+/**
+ * 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/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 };
@@ -17,7 +16,6 @@ export interface LeverageInputProps {
     readonly onChange: (value: Leverage) => void;
     readonly max: Leverage;
     readonly min?: Leverage;
-    readonly step?: number;
     /** Label above the slider; defaults to the "Leverage" locale string. */
     readonly title?: TitleText;
     /** Muted note rendered right after the label. */
@@ -25,17 +23,21 @@ 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;
+ * Title row carries an inline-editable value (`N.Nx`, hundredths kept where the
+ * value has them) and an optional reset;
  * the slider below can show risk bands via `colorIntervals`.
  */
 export declare function LeverageInput({ value, onChange, max, min, title, hint, reset, colorIntervals, colorIntervalLabel, size, }: LeverageInputProps): React.ReactElement;

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

@@ -2,15 +2,15 @@ import { default as React } from 'react';
 import { TitleText } from '../text';
 import { ManagePaneTest } from './constants';
 export { ManagePaneTest };
-export interface ManagePaneTabProps {
-    readonly id: string;
+export interface ManagePaneTabProps<T extends string = string> {
+    readonly id: T;
     readonly title: TitleText;
     readonly disabled?: boolean;
     /** Content is selectable (e.g. from the dropdown) but not shown in the segment. */
     readonly hidden?: boolean;
     readonly children?: React.ReactNode;
 }
-export declare function ManagePaneTab(_props: ManagePaneTabProps): null;
+export declare function ManagePaneTab<T extends string>(_props: ManagePaneTabProps<T>): null;
 export interface ManagePaneTabDropdownItem {
     readonly id: string;
     readonly title: React.ReactNode;
@@ -20,20 +20,20 @@ export interface ManagePaneTabDropdownProps {
     readonly items: ReadonlyArray<ManagePaneTabDropdownItem>;
 }
 export declare function ManagePaneTabDropdown(_props: ManagePaneTabDropdownProps): null;
-export interface ManagePaneActionTabProps {
-    readonly id: string;
+export interface ManagePaneActionTabProps<T extends string = string> {
+    readonly id: T;
     readonly title: TitleText;
     /** Fires without changing the active tab (e.g. "My positions"). */
     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 {
+export declare function ManagePaneActionTab<T extends string>(_props: ManagePaneActionTabProps<T>): null;
+export interface ManagePaneProps<T extends string> {
     readonly children: React.ReactNode;
     /** Controlled active tab — the screen owns it (usually `?operation=`). */
-    readonly activeTab: string;
-    readonly onTabChange: (id: string) => void;
+    readonly activeTab: T;
+    readonly onTabChange: (id: T) => void;
     readonly header?: React.ReactNode;
     readonly footer?: React.ReactNode;
     /** Rendered to the right of the tabs (e.g. the settings button). */
@@ -45,7 +45,7 @@ export interface ManagePaneProps {
  * dropdown and actions) above one card that shows the active tab's content.
  * Controlled only — no hash state of its own.
  */
-export declare function ManagePane({ children, activeTab, onTabChange, header, footer, actions, testId, }: ManagePaneProps): React.ReactElement;
+export declare function ManagePane<T extends string>({ children, activeTab, onTabChange, header, footer, actions, testId, }: ManagePaneProps<T>): React.ReactElement;
 /** Body shown in place of a dialog when the tab has nothing to act on (no position, no wallet). */
 export declare function ManagePaneMessage({ children, }: {
     readonly children: React.ReactNode;