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

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?: "default" | "success" | "warning" | "primary" | "alert" | "info" | null | undefined;
+    variant?: "none" | "default" | "success" | "warning" | "primary" | "alert" | "info" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,3 +1,4 @@
+import { Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { Address } from 'viem';
 type Mode = "default" | "cascade";
@@ -42,6 +43,7 @@ export interface SingleAssetCellProps {
     className?: string;
     balances?: undefined;
     tokensList?: undefined;
+    tokens?: undefined;
 }
 /**
  * Multi-asset list cell props (legacy API, compatible with @gearbox-protocol/interface)
@@ -80,14 +82,44 @@ export interface MultiAssetCellProps {
     className?: string;
     assetAddress?: undefined;
     symbol?: undefined;
+    tokens?: undefined;
 }
-export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps;
+/**
+ * SDK-native token list — pass tokens as-is, no address lookup map.
+ */
+export interface TokensAssetCellProps {
+    tokens: ReadonlyArray<Token>;
+    /**
+     * 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;
+    balances?: undefined;
+    tokensList?: undefined;
+    assetAddress?: undefined;
+    symbol?: undefined;
+}
+export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps | TokensAssetCellProps;
 /**
  * AssetsListCell — displays asset icons in a list/grid layout
  *
- * Supports two APIs:
- * 1. Single asset (new): `<AssetsListCell assetAddress="0x..." symbol="ETH" />`
+ * Supports three APIs:
+ * 1. Single asset: `<AssetsListCell assetAddress="0x..." symbol="ETH" />`
  * 2. Multi-asset list (legacy): `<AssetsListCell balances={[...]} tokensList={...} />`
+ * 3. SDK tokens: `<AssetsListCell tokens={[...]} />`
  *
  * @example
  * ```tsx
@@ -98,7 +130,15 @@ export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps;
  *   comment="Ethereum"
  * />
  *
- * // Multi-asset list (cascade mode)
+ * // SDK tokens (cascade mode)
+ * <AssetsListCell
+ *   tokens={collateralTokens}
+ *   maxAssets={5}
+ *   iconSize={24}
+ *   options={{ mode: "cascade" }}
+ * />
+ *
+ * // Multi-asset list (legacy)
  * <AssetsListCell
  *   balances={[{ token: "0x1234..." }, { token: "0x5678..." }]}
  *   tokensList={{ "0x1234...": { symbol: "ETH" }, "0x5678...": { symbol: "USDC" } }}

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" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Badge — component for displaying labels, tags, or status indicators.

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

@@ -0,0 +1,40 @@
+import { Token } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { TitleText } from '../text';
+import { AmountInputTest } from './constants';
+import { TokenButtonSize } from './token-button';
+export { AmountInputTest };
+export type AmountInputSize = TokenButtonSize;
+export interface AmountInputProps {
+    readonly amount: bigint;
+    readonly onAmount: (amount: bigint) => void;
+    readonly token: Token;
+    /** When more than one, the field shows a token picker. */
+    readonly tokens?: ReadonlyArray<Token>;
+    readonly onToken?: (token: Token) => void;
+    readonly balance?: bigint;
+    /** Wallet balances by token address — the picker's balance column. */
+    readonly balances?: Readonly<Record<string, bigint>>;
+    /** USD price per whole token by address — the picker's USD line. */
+    readonly usdPrices?: Readonly<Record<string, 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. */
+    readonly maxLabel?: TitleText;
+    /** USD price per one whole token; shows a USD equivalent when set. */
+    readonly usdPrice?: number;
+    /**
+     * Field density. Defaults to `sm` on mobile and `md` otherwise — the
+     * reference `SmartNumberInput` sizes from agentic-rwa.
+     */
+    readonly size?: AmountInputSize;
+    readonly disabled?: boolean;
+    readonly testId?: string;
+}
+/**
+ * The one amount field of a dialog: label row with balance and MAX, a large
+ * value input beside the token (icon + optional modal picker), and a USD
+ * equivalent. The reference `SmartNumberInput` markup on SDK-typed props —
+ * design only, `bigint` in / `bigint` out.
+ */
+export declare function AmountInput({ amount, onAmount, token, tokens, onToken, balance, balances, usdPrices, label, maxLabel, usdPrice, size, disabled, testId, }: AmountInputProps): React.ReactElement;

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

@@ -0,0 +1,15 @@
+import { Token } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+export interface BalanceIndicatorProps {
+    /** Label before the amount; defaults to the "Balance" locale string. */
+    readonly title?: React.ReactNode;
+    readonly token: Token;
+    readonly balance: bigint;
+    readonly disabled?: boolean;
+    readonly onMax: () => void;
+}
+/**
+ * "Balance: <amount>" row with a MAX pill. Internal to `AmountInput`
+ * (the reference `BalanceIndicator`, retyped on the SDK `Token`).
+ */
+export declare function BalanceIndicator({ title, token, balance, disabled, onMax, }: BalanceIndicatorProps): React.ReactElement;

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

@@ -0,0 +1,11 @@
+export declare class AmountInputTest {
+    static root: string;
+    static input: string;
+    static max: string;
+    static token: string;
+    static label: string;
+    static balance: string;
+    static usd: string;
+    static selectPanel: string;
+    static selectOption: string;
+}

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

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

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

@@ -0,0 +1,28 @@
+import { Token } from '@gearbox-protocol/sdk/model';
+import { VariantProps } from 'class-variance-authority';
+import { default as React } from 'react';
+declare const blockVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TokenButtonSize = NonNullable<VariantProps<typeof blockVariants>["size"]>;
+export interface TokenButtonProps {
+    readonly token: Token | undefined;
+    /** When set and not disabled, the block is clickable and shows a chevron. */
+    readonly onClick?: () => void;
+    /**
+     * Marks the block as a picker trigger (cursor + chevron) without a local
+     * click handler — for use inside a dropdown trigger that owns the toggle.
+     */
+    readonly interactive?: boolean;
+    /** Rotates the chevron (picker open). */
+    readonly active?: boolean;
+    readonly disabled?: boolean;
+    readonly size?: TokenButtonSize;
+}
+/**
+ * Token display with icon and optional chevron — the trigger of the token
+ * picker. Internal to `AmountInput` (the reference `CurrencyButton`, retyped
+ * on the SDK `Token`).
+ */
+export declare function TokenButton({ token, onClick, interactive, active, disabled, size, }: TokenButtonProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,17 @@
+import { Token } from '@gearbox-protocol/sdk/model';
+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>>;
+    /** USD price per one whole token by address; shows a USD line under the balance. */
+    readonly usdPrices?: Readonly<Record<string, number>>;
+    readonly onSelect: (token: Token) => void;
+    readonly onClose: () => void;
+}
+/**
+ * Token picker body of `AmountInput` — the reference `TokenSelectModal`
+ * (`ConfirmMenu` + name/balance rows) on SDK-typed props. Always rendered
+ * inside a `Modal`.
+ */
+export declare function TokenSelectPanel({ tokens, balances, usdPrices, onSelect, onClose, }: TokenSelectPanelProps): React.ReactElement;

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

@@ -0,0 +1,16 @@
+import { ApyBreakdown, Bps } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { BorrowRateBlockTest } from './constants';
+export { BorrowRateBlockTest };
+export type BorrowRateValue = ApyBreakdown | 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;

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

@@ -0,0 +1,5 @@
+export declare class BorrowRateBlockTest {
+    static root: string;
+    static trigger: string;
+    static details: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './borrow-rate-block';
+export * from './constants';

package/dist/types/components/base/chart-with-side-card/chart-with-side-card.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ChartWithSideCardTest } from './constants';
+export { ChartWithSideCardTest };
+export interface ChartWithSideCardProps {
+    readonly chart: React.ReactNode;
+    readonly side: React.ReactNode;
+}
+/**
+ * Detail-page yield layout: chart on the left, a side card on the right.
+ * The card is one StatBadge column wide; if that would squeeze the chart
+ * below 40rem, the card wraps underneath at full width instead.
+ */
+export declare function ChartWithSideCard({ chart, side, }: ChartWithSideCardProps): React.ReactElement;

package/dist/types/components/base/chart-with-side-card/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class ChartWithSideCardTest {
+    static root: string;
+    static chart: string;
+    static side: string;
+}

package/dist/types/components/base/chart-with-side-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './chart-with-side-card';
+export * from './constants';

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

@@ -0,0 +1,4 @@
+export declare class DetailedPageTitleTest {
+    static root: string;
+    static actions: string;
+}

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

@@ -0,0 +1,32 @@
+import { Token } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { PageTitleText } from '../page-title';
+import { ExplorerLink } from '../../explorer-links-dropdown';
+import { DetailedPageTitleTest } from './constants';
+export type DetailedPageTitleExplorerLink = ExplorerLink;
+export { DetailedPageTitleTest };
+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.
+     */
+    readonly token?: Token;
+    readonly icon?: React.ReactNode;
+    readonly tokenIconSize?: number;
+    readonly disabled?: boolean;
+    readonly toCopy?: string;
+    readonly explorerLinks?: ReadonlyArray<DetailedPageTitleExplorerLink>;
+    readonly badges?: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly buttonsSlot?: React.ReactNode;
+    readonly meta?: React.ReactNode;
+    readonly actionsPosition?: "left" | "right";
+    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;

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

@@ -0,0 +1 @@
+export * from './detailed-page-title';

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

@@ -0,0 +1,9 @@
+export declare class DetailsViewTest {
+    static root: string;
+    static leftPane: string;
+    static managePane: string;
+}
+export declare class DetailAsideWrapperTest {
+    static root: string;
+    static stickyContent: string;
+}

package/dist/types/components/base/details-view/detail-aside/constants.d.ts

@@ -0,0 +1,17 @@
+/** Fallback top spacer (px) used until the alignment anchor is measured. */
+export declare const DETAIL_ASIDE_SPACER_PX = 75;
+export declare const DETAIL_ASIDE_STICKY_OFFSET_TOP_PX = 16;
+export declare const DETAIL_ASIDE_STICKY_OFFSET_BOTTOM_PX = 24;
+export declare const DETAIL_MAIN_ASIDE_LAYOUT_CLASS_NAME: string;
+export declare const DETAIL_MAIN_ASIDE_CLASS_NAME: string;
+/**
+ * Marker attribute for the element in the main column whose top edge the aside
+ * form should line up with (the metric badges).
+ */
+export declare const ASIDE_ALIGN_ANCHOR_ATTR = "data-aside-align-anchor";
+/**
+ * Marker attribute for the aside's form card top edge.
+ */
+export declare const ASIDE_FORM_TOP_ATTR = "data-aside-form-top";
+/** Sticky mode exposed on the aside content node (debugging / e2e). */
+export declare const DETAIL_ASIDE_MODE_ATTR = "data-detail-aside-mode";

package/dist/types/components/base/details-view/detail-aside/detail-aside-scope.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+/**
+ * Scopes the aside alignment anchor to a single detail layout instance.
+ * {@link DetailAsideWrapper} prefers this anchor over a global querySelector.
+ */
+export declare function DetailAsideScope({ children, }: {
+    readonly children: React.ReactNode;
+}): React.ReactElement;
+export declare function useDetailAsideAnchorGetter(): (() => HTMLElement | null) | undefined;
+/**
+ * Marks the main-column element whose top edge the aside form should align with.
+ * Must be rendered inside {@link DetailAsideScope}.
+ */
+export declare function AsideAlignAnchor({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;

package/dist/types/components/base/details-view/detail-aside/detail-aside-screen-layout.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface DetailAsideScreenLayoutProps {
+    readonly children: React.ReactNode;
+    /** Aside panel content; wrapped in {@link DetailAsideWrapper} when defined. */
+    readonly aside?: React.ReactNode | null;
+    readonly mainRef?: React.RefObject<HTMLDivElement | null>;
+    readonly asidePosition?: "left" | "right";
+    readonly centeredMain?: boolean;
+    readonly className?: string;
+    readonly asideClassName?: string;
+    readonly mainClassName?: string;
+}
+/**
+ * Detail page layout: scoped anchor context + {@link MainAsideLayout} with
+ * shared aside width classes + sticky {@link DetailAsideWrapper}.
+ *
+ * Uses `variant="detail"` for the centred max-width two-column wrapper, but with
+ * `stickyAside={false}` so the layout does NOT add its built-in `overflow-y-auto` /
+ * sticky / fixed aside. That keeps a single page scrollbar and lets the smart
+ * sticky controller in {@link DetailAsideWrapper} own the aside positioning.
+ *
+ * Place {@link AsideAlignAnchor} inside `children` where the main-column badges
+ * should align with the aside form top.
+ */
+export declare function DetailAsideScreenLayout({ children, aside, mainRef, asidePosition, centeredMain, className, asideClassName, mainClassName, }: DetailAsideScreenLayoutProps): React.ReactElement;

package/dist/types/components/base/details-view/detail-aside/detail-aside-wrapper.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+/**
+ * Wrapper for deposit/withdraw and position action asides on detail layouts.
+ *
+ * On desktop the aside column starts at the top of the breadcrumbs/title row,
+ * so the form needs a top spacer to line its top edge up with the metric badges
+ * further down the main column. That offset is the height of the breadcrumbs +
+ * title block, which differs per screen and per viewport width — a fixed pixel
+ * value only matched one layout, leaving the form too high/low on wide screens.
+ *
+ * The spacer is measured live from the badges anchor
+ * ({@link ASIDE_ALIGN_ANCHOR_ATTR}) so the form top aligns with the badges.
+ * The aside itself follows the page's single scroll area: short panels pin to
+ * the top offset, while tall panels move with the page until their top or bottom
+ * reaches the viewport boundary. No internal scroll container is created.
+ */
+export declare function DetailAsideWrapper({ children, }: {
+    children: React.ReactNode;
+}): React.ReactElement;

package/dist/types/components/base/details-view/detail-aside/geometry.d.ts

@@ -0,0 +1,18 @@
+import { AsideStickyMode, ScrollLimits, StickyLimits } from './types';
+export declare function computeStickyLimits(viewportHeight: number, contentHeight: number, offsetTop?: number, offsetBottom?: number): StickyLimits;
+export declare function isShortAside(limits: StickyLimits): boolean;
+export declare function computeSpacerPx(anchorTop: number, rootTop: number, internalOffset: number): number;
+export declare function computeRelativeTop(contentTop: number, normalContentTop: number, maxRelativeTop: number): number;
+export declare function computeScrollLimits(viewportTop: number, viewportHeight: number, offsetTop?: number, offsetBottom?: number): ScrollLimits;
+export interface ReconcileAsideStickyInput {
+    readonly limits: StickyLimits;
+    readonly contentTop: number;
+    readonly contentBottom: number;
+    readonly scrollLimits: ScrollLimits;
+}
+/**
+ * Geometry-only sticky mode after programmatic scroll or scroll restoration.
+ * Delta-based transitions in the scroll handler stay authoritative during
+ * continuous user scrolling; this reconciles the final settled position.
+ */
+export declare function reconcileAsideStickyMode({ limits, contentTop, contentBottom, scrollLimits, }: ReconcileAsideStickyInput): AsideStickyMode;

package/dist/types/components/base/details-view/detail-aside/scroll-parent.d.ts

@@ -0,0 +1 @@
+export declare function findScrollParentFromElement(element: HTMLElement): HTMLElement | Window;

package/dist/types/components/base/details-view/detail-aside/sticky-controller.d.ts

@@ -0,0 +1,15 @@
+export interface CreateDetailAsideStickyControllerProps {
+    readonly root: HTMLDivElement;
+    readonly content: HTMLDivElement;
+    readonly motion: HTMLDivElement;
+    readonly getAnchor?: () => HTMLElement | null;
+    readonly onSpacerChange: (spacerPx: number) => void;
+    readonly offsetTop?: number;
+    readonly offsetBottom?: number;
+}
+export interface DetailAsideStickyController {
+    bind: () => void;
+    unbind: () => void;
+}
+export declare function defaultQuerySelectorAnchor(): HTMLElement | null;
+export declare function createDetailAsideStickyController({ root, content, motion, getAnchor, onSpacerChange, offsetTop, offsetBottom, }: CreateDetailAsideStickyControllerProps): DetailAsideStickyController;

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

@@ -0,0 +1,11 @@
+export type AsideStickyMode = "relative" | "top" | "bottom";
+export interface StickyLimits {
+    availableHeight: number;
+    bottomTop: number;
+    contentHeight: number;
+    top: number;
+}
+export interface ScrollLimits {
+    topLimit: number;
+    bottomLimit: number;
+}

package/dist/types/components/base/details-view/detail-aside/use-detail-aside-sticky.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+export interface UseDetailAsideStickyProps {
+    readonly rootRef: RefObject<HTMLDivElement | null>;
+    readonly contentRef: RefObject<HTMLDivElement | null>;
+    readonly motionRef: RefObject<HTMLDivElement | null>;
+    readonly getAnchor?: () => HTMLElement | null;
+    readonly enabled?: boolean;
+}
+export declare function useDetailAsideSticky({ rootRef, contentRef, motionRef, getAnchor, enabled, }: UseDetailAsideStickyProps): {
+    spacerPx: number;
+};

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { DetailsViewTest } from './constants';
+export { DetailsViewTest };
+export interface DetailsViewProps {
+    readonly children: React.ReactNode;
+    readonly mainRef?: React.RefObject<HTMLDivElement | null>;
+    readonly className?: string;
+    readonly testId?: string;
+}
+/**
+ * Detail screen shell: left pane (sections) + right manage pane, with the
+ * manage pane moving inline into the left column on narrow screens.
+ */
+export declare function DetailsView({ children, mainRef, className, testId, }: DetailsViewProps): React.ReactElement;
+export interface DetailsViewLeftPaneProps {
+    readonly children: React.ReactNode;
+    /** Injected by {@link DetailsView} on narrow screens. */
+    readonly mobileManagePane?: React.ReactNode;
+}
+export declare function DetailsViewLeftPane({ children, mobileManagePane, }: DetailsViewLeftPaneProps): React.ReactElement;
+export interface DetailsViewManagePaneProps {
+    readonly children: React.ReactNode;
+}
+export declare function DetailsViewManagePane(_props: DetailsViewManagePaneProps): null;
+export declare namespace DetailsViewManagePane {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+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/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class HealthFactorBlockTest {
+    static root: string;
+    static value: string;
+    static valueTo: string;
+}

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

@@ -0,0 +1,29 @@
+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;
+    /** Target HF after the operation; renders a from → to transition. */
+    readonly hfTo?: number;
+    /** Debt in base units; a 0n debt renders "N/A". */
+    readonly debt: bigint;
+    /** Debt after the operation (defaults to `debt`). */
+    readonly debtTo?: bigint;
+    /** Pre-computed zone; if not set, derived from the value. */
+    readonly zone?: HFZones;
+    readonly isLoading?: boolean;
+    /** Label override; defaults to the "Health factor" locale string. */
+    readonly title?: TitleText;
+    /** Tooltip override; defaults to the standard HF explanation. */
+    readonly tip?: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * "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.
+ */
+export declare function HealthFactorBlock({ hf, hfTo, debt, debtTo, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;

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

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './health-factor-block';

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

@@ -0,0 +1,6 @@
+export declare class HistoryChartTest {
+    static root: string;
+    static empty: string;
+    static error: string;
+    static range: (id: string) => string;
+}

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

@@ -0,0 +1,37 @@
+import { HistoryRange, HistorySeries } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { PriceLineConfig, PriceZoneConfig } from '../../graph';
+import { YMeasureUnits } from '../../graph/formatters';
+import { HistoryChartTest } from './constants';
+export { HistoryChartTest };
+export interface HistoryChartProps {
+    /** One series or several (dual charts); SDK shape as it comes. */
+    readonly data: HistorySeries | ReadonlyArray<HistorySeries> | undefined;
+    readonly range: HistoryRange;
+    readonly onRange: (range: HistoryRange) => void;
+    readonly isLoading?: boolean;
+    readonly error?: Error;
+    /** Y-axis unit ("%", "$", a token symbol); one for all or one per series. */
+    readonly yMeasureUnit?: YMeasureUnits | ReadonlyArray<YMeasureUnits>;
+    /** Chart height in pixels. */
+    readonly height?: number;
+    /** Display names per metric id; a metric without an entry shows as itself. */
+    readonly seriesTitles?: Readonly<Record<string, string>>;
+    /** Horizontal reference lines, e.g. a liquidation price. */
+    readonly priceLines?: ReadonlyArray<PriceLineConfig>;
+    /** Shaded horizontal bands, e.g. a liquidation danger zone. */
+    readonly zones?: ReadonlyArray<PriceZoneConfig>;
+    /**
+     * Current-value overlay in the chart corner. Detail screens keep this off;
+     * defaults to `false`.
+     */
+    readonly showCurrentValue?: boolean;
+    /** Y-axis floor when the series has data. */
+    readonly yScaleMin?: number;
+}
+/**
+ * Design-only history chart on the TradingView engine: range buttons, legend,
+ * tooltips, optional reference lines and zones. Takes the SDK's
+ * `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, }: HistoryChartProps): React.ReactElement;

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

@@ -0,0 +1 @@
+export * from './history-chart';

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

@@ -0,0 +1,34 @@
+export * from './amount-input';
+export * from './borrow-rate-block';
+export * from './chart-with-side-card';
+export * from './detailed-page-title';
+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 './liquidation-params-table';
+export * from './liquidation-price-block';
+export * from './manage-pane';
+export * from './more-accordion';
+export * from './nested-info-stack';
+export * from './page-title';
+export * from './pool-apy-breakdown-card';
+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';
+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/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class InfoListTest {
+    static root: string;
+    static line: string;
+    static sectionTitle: string;
+}