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

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

@@ -1,6 +1,6 @@
-export declare class LeverageInputTest {
-    static root: string;
-    static slider: string;
-    static value: string;
-    static reset: string;
-}
+export declare const LeverageInputTest: {
+    readonly root: "leverage-input-root";
+    readonly slider: "leverage-input-slider";
+    readonly value: "leverage-input-value";
+    readonly reset: "leverage-input-reset";
+};

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-params-table/constants.d.ts

@@ -1,3 +1,3 @@
-export declare class LiquidationParamsTableTest {
-    static root: string;
-}
+export declare const LiquidationParamsTableTest: {
+    readonly root: "liquidation-params-table-root";
+};

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

@@ -1,5 +1,5 @@
-export declare class LiquidationPriceBlockTest {
-    static root: string;
-    static value: string;
-    static valueTo: string;
-}
+export declare const LiquidationPriceBlockTest: {
+    readonly root: "liquidation-price-block-root";
+    readonly value: "liquidation-price-block-value";
+    readonly valueTo: "liquidation-price-block-value-to";
+};

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

@@ -1,9 +1,9 @@
-export declare class ManagePaneTest {
-    static root: string;
-    static tabs: string;
-    static dropdown: string;
-    static body: string;
-    static message: string;
-    static actionDialog: string;
-    static tab: (id: string) => string;
-}
+export declare const ManagePaneTest: {
+    readonly root: "manage-pane-root";
+    readonly tabs: "manage-pane-tabs";
+    readonly dropdown: "manage-pane-dropdown";
+    readonly body: "manage-pane-body";
+    readonly message: "manage-pane-message";
+    readonly actionDialog: "manage-pane-action-dialog";
+    readonly tab: (id: string) => string;
+};

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;

package/dist/types/components/base/more-accordion/constants.d.ts

@@ -1,4 +1,4 @@
-export declare class MoreAccordionTest {
-    static root: string;
-    static trigger: string;
-}
+export declare const MoreAccordionTest: {
+    readonly root: "more-accordion-root";
+    readonly trigger: "more-accordion-trigger";
+};

package/dist/types/components/base/more-accordion/more-accordion.d.ts

@@ -7,5 +7,10 @@ export interface MoreAccordionProps {
     readonly moreMessage?: TitleText;
     readonly lessMessage?: TitleText;
 }
-/** Centered more/less disclosure over a `SimpleAccordion`. */
+/**
+ * Centered more/less disclosure over a `SimpleAccordion`.
+ *
+ * Nothing renders it yet, in the kit or in either consumer: kept as part of the
+ * base layer on purpose.
+ */
 export declare function MoreAccordion({ children, moreMessage, lessMessage, }: MoreAccordionProps): React.ReactElement;

package/dist/types/components/base/nested-info-stack/constants.d.ts

@@ -1,3 +1,3 @@
-export declare class NestedInfoStackTest {
-    static root: string;
-}
+export declare const NestedInfoStackTest: {
+    readonly root: "nested-info-stack-root";
+};

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

@@ -1,3 +1,3 @@
-export declare class PageTitleTest {
-    static root: string;
-}
+export declare const PageTitleTest: {
+    readonly root: "page-title-root";
+};

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

@@ -1,4 +1,7 @@
-export declare class PoolApyBreakdownCardTest {
-    static root: string;
-    static value: string;
-}
+export declare const PoolApyBreakdownCardTest: {
+    readonly root: "pool-apy-breakdown-card-root";
+    readonly net: "pool-apy-breakdown-card-net";
+    readonly value: "pool-apy-breakdown-card-value";
+    readonly reward: "pool-apy-breakdown-card-reward";
+    readonly points: "pool-apy-breakdown-card-points";
+};

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 const PositionAssetsTest: {
+    readonly root: "position-assets-root";
+    readonly row: "position-assets-row";
+    readonly worth: "position-assets-worth";
+    readonly empty: "position-assets-empty";
+};

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-asset-rows.d.ts

@@ -0,0 +1,23 @@
+import { TokenAmount } from '@gearbox-protocol/sdk/model';
+/** 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/position-assets/position-assets.d.ts

@@ -0,0 +1,47 @@
+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;
+/**
+ * The larger of two sides' USD. An unpriced side wins over any number: it is
+ * an unknown value, not a small one, and must not be called dust.
+ */

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

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

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/section-heading/constants.d.ts

@@ -1,3 +1,3 @@
-export declare class SectionHeadingTest {
-    static root: string;
-}
+export declare const SectionHeadingTest: {
+    readonly root: "section-heading-root";
+};

package/dist/types/components/base/segmented-tabs/constants.d.ts

@@ -1,3 +1,3 @@
-export declare class SegmentedTabsTest {
-    static root: string;
-}
+export declare const SegmentedTabsTest: {
+    readonly root: "segmented-tabs-root";
+};

package/dist/types/components/base/segmented-tabs/segmented-tabs-styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Gray pill styling shared with sibling controls (e.g. the ManagePane "…"
+ * button). Its own module so the barrel carries the component, not its classes.
+ */
+export declare const SEGMENTED_TABS_INACTIVE_BUTTON_CLASS = "bg-gray-30 border-gray-30 hover:bg-gray-40 hover:border-gray-40";

package/dist/types/components/base/segmented-tabs/segmented-tabs.d.ts

@@ -1,8 +1,6 @@
 import { default as React } from 'react';
 import { SegmentedTabsTest } from './constants';
 export { SegmentedTabsTest };
-/** Gray pill styling shared with sibling controls (e.g. the ManagePane "…" button). */
-export declare const SEGMENTED_TABS_INACTIVE_BUTTON_CLASS = "bg-gray-30 border-gray-30 hover:bg-gray-40 hover:border-gray-40";
 export interface SegmentedTabsItem<T extends string> {
     readonly id: T;
     readonly item: React.ReactNode;

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

@@ -1,3 +1,3 @@
-export declare class StackTest {
-    static root: string;
-}
+export declare const StackTest: {
+    readonly root: "stack-root";
+};

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

@@ -1,5 +1,6 @@
-export declare class StatBadgeTest {
-    static root: string;
-    static grid: string;
-    static action: string;
-}
+export declare const StatBadgeTest: {
+    readonly root: "stat-badge-root";
+    readonly grid: "stat-badge-grid-root";
+    readonly action: "stat-badge-action";
+    readonly delta: "stat-badge-delta";
+};

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;
-}
+export declare const StrategyApyBreakdownCardTest: {
+    readonly root: "strategy-apy-breakdown-card-root";
+    readonly net: "strategy-apy-breakdown-card-net";
+    readonly collateral: "strategy-apy-breakdown-card-collateral";
+    readonly borrow: "strategy-apy-breakdown-card-borrow";
+    readonly value: "strategy-apy-breakdown-card-value";
+    readonly points: "strategy-apy-breakdown-card-points";
+    readonly caption: "strategy-apy-breakdown-card-caption";
+};

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

@@ -1,5 +1,5 @@
-export declare class TabberTest {
-    static root: string;
-    static bar: string;
-    static section: string;
-}
+export declare const TabberTest: {
+    readonly root: "tabber-root";
+    readonly bar: "tabber-bar";
+    readonly section: "tabber-section";
+};

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

@@ -1,2 +1 @@
 export * from './tabber';
-export * from './use-detail-scroll-spy';

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/**
+ * Whether a node is a Tabber, so DetailsView can tell a tabbed pane from plain
+ * content. Its own module: the barrel carries the component, not the predicate.
+ */
+export declare function isTabber(node: ReactNode): boolean;

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. */
@@ -30,4 +30,3 @@ export interface TabberProps {
     readonly mobileManagePane?: React.ReactNode;
 }
 export declare function Tabber({ children, observeKey, initialSection, testId, mobileManagePane, }: TabberProps): React.ReactElement;
-export declare function isTabber(node: React.ReactNode): boolean;