@gearbox-protocol/ui-kit 4.0.0-next.5 → 4.0.0-next.51

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

@@ -5,9 +5,11 @@ export declare class ValueTest {
     static utilization: string;
     static healthFactor: string;
     static pnl: string;
+    static priceImpact: string;
     static tokenBigint: string;
     static points: string;
     static placeholder: string;
+    static accruing: string;
 }
 export declare class PositionShortLabelTest {
     static root: string;

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

@@ -1,7 +1,9 @@
-export { ValueTest } from './constants';
-export { PnlValue } from './pnl-value';
-export { PointsValue, type PointsValueProps } from './points-value';
-export { PositionShortLabel, PositionShortLabelTest, } from './position-short-label';
-export { type PositionStatus, PositionStatusBadge, type PositionStatusBadgeProps, } from './position-status-badge';
-export { PositionTypeBadge, type PositionTypeBadgeProps, } from './position-type-badge';
-export { ApyValue, type ApyValueProps, bps, HealthFactorValue, LeverageValue, TokenBigint, UsdValue, UtilizationValue, } from './scalars';
+export * from './constants';
+export * from './no-value';
+export * from './pnl-value';
+export * from './points-value';
+export * from './position-short-label';
+export * from './position-status-badge';
+export * from './position-type-badge';
+export * from './price-impact-value';
+export * from './scalars';

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface NoValueProps {
+    /**
+     * Why the figure is absent, when the absence has an explanation worth
+     * giving. `"7d"` — the trailing seven-day average has not been computed yet
+     * — is the only one so far; anything else, including a spot figure that is
+     * simply not there, keeps the dash.
+     */
+    readonly reason?: "7d";
+}
+/**
+ * Whatever stands where a figure would be.
+ *
+ * One component rather than a dash per call site, so no two surfaces can
+ * quietly disagree about what an absent value looks like — and so an absence
+ * that has an explanation carries it everywhere at once rather than wherever
+ * someone remembered to add it.
+ *
+ * The explained form is deliberately not a skeleton: a skeleton promises the
+ * value in a moment, and this one waits on days of history.
+ *
+ * The visually-hidden copy is load-bearing — `HelpTipIcon` is `aria-hidden`,
+ * so without it the cell would reach a screen reader as nothing at all.
+ */
+export declare function NoValue({ reason }: NoValueProps): React.ReactElement;

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

@@ -1,6 +1,12 @@
 import { PnlBreakdown } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
-/** Realised + unrealised PnL of a position, signed. */
+/**
+ * Realised + unrealised PnL, signed.
+ *
+ * A breakdown (a position's own) or a bare USD figure (a wallet's total, which
+ * the model carries as a plain number) — the same pairing {@link ApyValue}
+ * makes between a breakdown and a bare rate.
+ */
 export declare function PnlValue({ data, }: {
-    readonly data: PnlBreakdown | undefined;
+    readonly data: PnlBreakdown | number | null | undefined;
 }): React.ReactElement;

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+/**
+ * A price impact as a percentage.
+ *
+ * The scale is `PERCENTAGE_FACTOR_1KK` — `1_000_000` is 100%, so `-10_000` is
+ * -1% — the legacy price-impact scale, a hundred times finer than the `Bps`
+ * the rest of this module speaks. The conversion is owned here for the same
+ * reason `bps` owns its own: `percentageTemplate` carries a same-named,
+ * differently-scaled twin, so a shared step would inherit that ambiguity.
+ *
+ * A loss is what this figure almost always is, and it prints its own minus.
+ * Only the rare route that beat the marginal price needs its sign spelled out,
+ * or a gain would read as a loss of the same size.
+ */
+export declare function priceImpact(value: bigint): string;
+/**
+ * What a routed operation gave up to market depth.
+ *
+ * Which of the three rates a caller shows — against the routed output, the
+ * equity or the position — is the caller's choice; this renders the one it is
+ * handed.
+ */
+export declare function PriceImpactValue({ data, }: {
+    readonly data: bigint | undefined;
+}): React.ReactElement;

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

@@ -10,15 +10,32 @@ import { default as React } from 'react';
  */
 export declare function bps(value: Bps): string;
 export interface ApyValueProps {
-    /** A breakdown (tooltip-able) or a bare rate; `undefined` renders a dash. */
+    /** A breakdown (tooltip-able) or a bare rate; `undefined` renders the empty state. */
     readonly data: ApyBreakdown | Bps | undefined;
+    /**
+     * Whether a breakdown carries its yield tooltip on hover. Off where the
+     * figure is already explained — a badge that states one rate, or a figure
+     * wrapped in a tooltip of its own, which would otherwise stack two.
+     *
+     * A bare `Bps` has no tooltip to begin with, so this does not reach it.
+     *
+     * @default true
+     */
+    readonly tooltip?: boolean;
+    /**
+     * The averaging window this figure comes from. `"7d"` suffixes the breakdown
+     * tooltip labels — and, when the rate is missing, says the average is still
+     * accruing rather than printing a dash. A spot figure keeps the dash: history
+     * has nothing to do with why it is absent.
+     */
+    readonly period?: "7d";
 }
 /**
  * Any APY the model carries, in one place: `supplyApy`, `netApy`, `borrowApy`.
  * A breakdown renders the reference chip (reward icons + breakdown tooltip)
  * via `CompoundAPY`; a bare `Bps` stays a plain percentage.
  */
-export declare function ApyValue({ data }: ApyValueProps): React.ReactElement;
+export declare function ApyValue({ data, tooltip, period, }: ApyValueProps): React.ReactElement;
 export declare function UsdValue({ data, }: {
     readonly data: number | null | undefined;
 }): React.ReactElement;
@@ -36,8 +53,17 @@ export declare function HealthFactorValue({ data, }: {
  * A bare `bigint` in token units (simulate previews carry these): the only
  * value component that needs a denomination passed with it, because the SDK
  * hands these out without one.
+ *
+ * Shown to `formatAssetAmount`'s three decimals, with the exact amount in a
+ * tooltip — a metrics row reads better short, and nothing is lost: the figure
+ * behind the rounding stays a hover away.
  */
-export declare function TokenBigint({ data, token, }: {
+export declare function TokenBigint({ data, token, showSymbol, }: {
     readonly data: bigint | undefined;
     readonly token: Token | undefined;
+    /**
+     * Off where the row names the token itself — a `before → after` pair prints
+     * the symbol once for both amounts rather than twice.
+     */
+    readonly showSymbol?: boolean;
 }): React.ReactElement;

package/dist/types/components/base-table/base-table-line.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactNode } from 'react';
 import { BaseTableColumn } from './types';
-export { BaseTableLineTest } from './constants';
+export * from './constants';
 export interface BaseTableLineProps<TSort extends string = never> {
     readonly columns: ReadonlyArray<BaseTableColumn<TSort>>;
     readonly cells: Readonly<Record<string, ReactNode>>;

package/dist/types/components/base-table/base-table.d.ts

@@ -1,7 +1,7 @@
 import { default as React, PropsWithChildren, ReactNode } from 'react';
 import { BaseTableColumn, BaseTableSortApi } from './types';
-export { BaseTableTest } from './constants';
-export type { BaseTableColumn, BaseTableSortApi } from './types';
+export * from './constants';
+export * from './types';
 export interface BaseTableProps<TSort extends string = never> {
     readonly columns: ReadonlyArray<BaseTableColumn<TSort>>;
     readonly isLoading: boolean;

package/dist/types/components/buttons/back-button/back-button.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 declare const backButtonVariants: (props?: ({
-    variant?: "default" | "primary" | "ghost" | null | undefined;
+    variant?: "default" | "ghost" | "primary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface LinkComponentProps {
@@ -16,5 +16,5 @@ export interface BackButtonProps extends VariantProps<typeof backButtonVariants>
     className?: string;
     LinkComponent?: React.ComponentType<LinkComponentProps>;
 }
-export declare function BackButton({ href, text, onClick, className, variant, size, LinkComponent, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackButton({ href, text, onClick, className, variant, size, LinkComponent, }: BackButtonProps): import("react").JSX.Element;
 export { backButtonVariants };

package/dist/types/components/buttons/button/button.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "text" | "default" | "success" | "destructive" | "blue" | "pink" | "white" | "secondary" | "ghost" | "outline" | "neutral" | "pink-outline" | "blue-outline" | null | undefined;
-    size?: "auto" | "default" | "icon" | "sm" | "md" | "lg" | "xs" | null | undefined;
+    variant?: "link" | "text" | "default" | "success" | "blue" | "pink" | "white" | "secondary" | "ghost" | "destructive" | "outline" | "neutral" | "pink-outline" | "blue-outline" | null | undefined;
+    size?: "auto" | "icon" | "default" | "sm" | "md" | "lg" | "xs" | null | undefined;
     width?: "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**

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

@@ -2,7 +2,5 @@ export * from './back-button';
 export * from './button';
 export * from './copy-button';
 export * from './external-button';
-export * from './filter-button';
-export * from './navigation-button';
 export * from './range-buttons';
 export * from './tab-button';

package/dist/types/components/buttons/range-buttons/range-buttons.d.ts

@@ -15,35 +15,3 @@ export interface RangeButtonsProps<T> {
     setRange: (range: T) => void;
     className?: string;
 }
-/**
- * RangeButtons — button group component for selecting from a list of options.
- *
- * @usage
- * Use RangeButtons to create option selectors:
- * time range selectors, view mode toggles, filter options, segmented controls.
- *
- * Props:
- * - `range` — currently selected value (required).
- * - `rangeList` — array of selectable options with value and label (required).
- * - `setRange` — callback function to change selected value (required).
- * - `className` — additional CSS classes for styling.
- *
- * Note: Displays inline button group with active state highlighting.
- * Supports generic type T for flexible value types.
- *
- * @example
- * ```tsx
- * const [timeRange, setTimeRange] = useState<"24h" | "7d" | "30d">("24h");
- *
- * <RangeButtons
- *   range={timeRange}
- *   rangeList={[
- *     { value: "24h", label: "24H" },
- *     { value: "7d", label: "7D" },
- *     { value: "30d", label: "30D" },
- *   ]}
- *   setRange={setTimeRange}
- * />
- * ```
- */
-export declare function RangeButtons<T>({ range, rangeList, setRange, className, }: RangeButtonsProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/cards/card/card.d.ts

@@ -54,5 +54,5 @@ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<
  * CardFooter — footer section of a Card with border-top.
  * Typically contains action buttons and/or additional information.
  */
-declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };
+export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardContent, CardDescription, CardHeader, CardTitle };

package/dist/types/components/cards/danger-zone/danger-zone.d.ts

@@ -16,4 +16,4 @@ import { CardProps } from '../card';
  * - for warnings or informational content (use regular Card with appropriate styling).
  * - when actions are not actually dangerous or destructive.
  */
-export declare function DangerZone({ children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function DangerZone({ children, ...props }: CardProps): import("react").JSX.Element;

package/dist/types/components/cards/expandable-card/expandable-card.d.ts

@@ -24,5 +24,5 @@ export interface ExpandableCardProps {
  * - when you need multiple independent expandable sections (consider using Tabs or separate ExpandableCards).
  * - for non-transaction content when a regular Card would suffice.
  */
-declare function ExpandableCard({ header, children, alwaysExpanded, }: ExpandableCardProps): import("react/jsx-runtime").JSX.Element;
+declare function ExpandableCard({ header, children, alwaysExpanded, }: ExpandableCardProps): React.JSX.Element;
 export { ExpandableCard };

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

@@ -1,4 +1,3 @@
 export * from './card';
 export * from './danger-zone';
-export * from './expandable-call';
 export * from './expandable-card';

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

@@ -3,7 +3,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
 declare const checkboxVariants: (props?: ({
     size?: "md" | "lg" | null | undefined;
-    color?: "primary" | "secondary" | null | undefined;
+    color?: "secondary" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>;
 /**
@@ -26,6 +26,6 @@ export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimit
  */
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     size?: "md" | "lg" | null | undefined;
-    color?: "primary" | "secondary" | null | undefined;
+    color?: "secondary" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/types/components/client-adapters/index.d.ts

@@ -1,3 +1,2 @@
 export * from './styled-button';
 export * from './styled-dialog-container';
-export * from './styled-rounded-image';

package/dist/types/components/client-adapters/styled-button/styled-button.d.ts

@@ -3,11 +3,16 @@ import * as React from "react";
 type ButtonWidth = "compact" | "wide";
 type ButtonColors = "primary" | "outlined" | "neutral" | "white" | "success";
 type ButtonSize = "sm" | "md" | "lg";
-export interface StyledButtonProps extends Omit<ButtonProps, "size" | "$size" | "width" | "variant"> {
-    $size?: ButtonSize;
-    $width?: ButtonWidth;
-    $color?: ButtonColors;
-    $square?: boolean;
+/**
+ * `color` and `square` are named in this component's own vocabulary, so both
+ * are omitted from `ButtonProps` before being redeclared — `color` otherwise
+ * collides with the HTML attribute.
+ */
+export interface StyledButtonProps extends Omit<ButtonProps, "size" | "width" | "variant" | "color"> {
+    size?: ButtonSize;
+    width?: ButtonWidth;
+    color?: ButtonColors;
+    square?: boolean;
 }
 declare const StyledButton: React.ForwardRefExoticComponent<StyledButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { StyledButton };

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

@@ -1,15 +1,16 @@
 import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 export interface PoolAssetsTableRowProps {
-    readonly poolName: string;
     readonly asset: QuotaAsset;
     readonly underlyingToken: Token;
     readonly last: boolean;
     readonly isCompact: boolean;
     readonly totalUsed: bigint;
     readonly colorIndex: number;
+    /** Base URL of the chain's explorer; absent leaves the row inert. */
+    readonly explorerUrl?: string;
 }
 /**
  * Single data row: token name, exposure (amount + pie), cap, and cap utilization.
  */
-export declare function PoolAssetsTableRow({ poolName, asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;
+export declare function PoolAssetsTableRow({ asset, underlyingToken, last, isCompact, totalUsed, colorIndex, explorerUrl, }: PoolAssetsTableRowProps): React.ReactElement;

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

@@ -3,12 +3,16 @@ import { default as React } from 'react';
 import { PoolAssetsTableSort } from './types';
 export interface PoolAssetsTableProps {
     readonly list: ReadonlyArray<QuotaAsset>;
-    readonly poolName: string;
     readonly sort: PoolAssetsTableSort;
     readonly underlyingToken: Token;
+    /**
+     * Block explorer base URL of the pool's chain. Given one, each row links to
+     * its token's address there; without one the rows stay inert.
+     */
+    readonly explorerUrl?: string;
 }
 /**
  * Grid table of pool asset quotas: exposure, cap, and cap utilization.
  * Collapses into stacked cards below {@link COMPACT_WIDTH_THRESHOLD}.
  */
-export declare function PoolAssetsTable({ list, poolName, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
+export declare function PoolAssetsTable({ list, sort, underlyingToken, explorerUrl, }: PoolAssetsTableProps): React.ReactElement | null;

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

@@ -1,4 +1,3 @@
-import { QuotaAsset } from '@gearbox-protocol/sdk/model';
 import { SortField, SortSetterFunction } from '../../../hooks';
 /** Column identifiers used by the pool assets table header sort controls. */
 export type PoolAssetsSortFields = "name" | "exposure" | "cap" | "capUtilization";
@@ -13,5 +12,3 @@ export interface PoolAssetsTableSort {
 export interface PoolAssetsFilterState {
     readonly sort: PoolAssetsTableSort;
 }
-/** One quota row — the SDK's {@link QuotaAsset}. */
-export type PoolAssetsTableQuotaRow = QuotaAsset;

package/dist/types/components/composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.d.ts

@@ -1,3 +1,4 @@
+import { TokenAmount } from '@gearbox-protocol/sdk/model';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
 import { TokenTemplateProps } from '../../../../token-template';
@@ -5,25 +6,57 @@ declare const rootVariants: (props?: ({
     position?: "first" | "last" | "inBetween" | "solo" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TransactionConfirmAmountFieldProps extends VariantProps<typeof rootVariants> {
+type PrimarySlot = {
+    readonly value: TokenTemplateProps["value"];
+    readonly token?: TokenTemplateProps["token"];
+} | {
+    node: React.ReactNode;
+};
+type SecondarySlot = {
+    readonly valueUSD?: bigint | number;
+} | {
+    node: React.ReactNode;
+};
+/**
+ * Either hand over the SDK's {@link TokenAmount} whole, or fill the two slots
+ * yourself. The slot form stays for the `node` escape hatch and for callers
+ * that have no `TokenAmount` to give.
+ */
+type AmountSource = {
+    /**
+     * Value, token and the USD caption all read off one SDK amount.
+     * `null` means unavailable and renders like any other absent value.
+     */
+    readonly amount: TokenAmount | null;
+    readonly primaryAmount?: undefined;
+    readonly secondaryAmount?: undefined;
+} | {
+    readonly amount?: undefined;
+    readonly primaryAmount: PrimarySlot;
+    readonly secondaryAmount?: SecondarySlot;
+};
+export type TransactionConfirmAmountFieldProps = VariantProps<typeof rootVariants> & AmountSource & {
     readonly label: React.ReactNode;
-    readonly primaryAmount: {
-        readonly value: TokenTemplateProps["value"];
-        readonly token?: TokenTemplateProps["token"];
-    } | {
-        node: React.ReactNode;
-    };
-    readonly secondaryAmount?: {
-        readonly valueUSD?: bigint | number;
-    } | {
-        node: React.ReactNode;
-    };
     readonly loading?: boolean;
     readonly maxLength?: number;
     readonly approximate?: {
         isApproximate?: boolean;
         approximateSymbol?: string;
     };
-}
-export declare function TransactionConfirmAmountField({ label, primaryAmount, secondaryAmount, loading, position, size, maxLength, approximate, }: TransactionConfirmAmountFieldProps): React.ReactElement;
+};
+/**
+ * One SDK amount already carries all three things the field shows: the number,
+ * its token and the dollar value. Callers used to take it apart and hand the
+ * pieces back through two props; passing `amount` lets them stop.
+ *
+ * Takes the whole prop union so the slot form is picked by the discriminant
+ * rather than by a cast — `amount` is `TokenAmount | null`, never `undefined`,
+ * so a caller holding `TokenAmount | undefined` has to say `?? null` and
+ * cannot land here with nothing at all.
+ */
+export declare function resolveAmountSlots(source: AmountSource): {
+    readonly primaryAmount: PrimarySlot;
+    readonly secondaryAmount: SecondarySlot | undefined;
+};
+export declare function TransactionConfirmAmountField(props: TransactionConfirmAmountFieldProps): React.ReactElement;
 export {};

package/dist/types/components/composites/tx-preview/confirm/amounts/constants.d.ts

@@ -1,6 +1,3 @@
 export declare class TransactionConfirmAmountFieldTest {
     static root: string;
 }
-export declare class TransactionConfirmAmountPairTest {
-    static root: string;
-}

package/dist/types/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.d.ts

@@ -1,23 +1,27 @@
 import { default as React } from 'react';
-import { TransactionExecutionStepView } from '../stepper/transactionExecutionStepTypes';
-import { TransactionConfirmPhase } from './transactionConfirmPhase';
-export interface TransactionConfirmShellProps {
-    readonly phase?: TransactionConfirmPhase;
-    readonly header?: React.ReactNode;
-    readonly preview: React.ReactNode;
-    readonly previewLoading?: boolean;
-    readonly previewError?: Error | null;
-    readonly previewErrorTitle?: string;
-    readonly previewClassName?: string;
-    readonly execution: React.ReactNode;
-    readonly progressSteps?: ReadonlyArray<TransactionExecutionStepView>;
-    readonly renderProgressStepLabel?: (step: TransactionExecutionStepView) => React.ReactNode;
-    readonly result?: React.ReactNode;
-    readonly className?: string;
-    readonly "data-testid"?: string;
-}
+import { TransactionConfirmShellProps } from './transactionConfirmShellTypes';
 /**
+ * The one card every transaction confirmation renders, on every surface.
  *
- * Base shell component
+ * Callers describe *what the card shows* (`body`) and *how it is framed*
+ * (`mode`); everything else is decided here. This replaces the former
+ * `TransactionConfirmPageView` / `TransactionConfirmModalView` pair, which
+ * differed only in the frame yet each restated the whole prop list.
+ *
+ * Two traps from that pair are closed here rather than left to callers.
+ *
+ * The modal's height clamp is composed with `className` instead of being
+ * replaced by it, so a caller adding a class no longer drops the viewport
+ * clamp and the flex context the scrollable preview depends on by accident.
+ * `cn` is tailwind-merge, so a utility deliberately targeting the same
+ * property still wins — though arbitrary-property syntax such as
+ * `[max-height:50vh]` sits in a different group and will not displace it.
+ *
+ * And a `placeholder` or `error` body pins the phase to `confirm`, so those
+ * two can never be asked for a result view they were never given. Note the
+ * limit of that guarantee: a `ready` body driven to a terminal phase without a
+ * `result` still draws a header and nothing else, exactly as the views it
+ * replaces did. Requiring both halves of `result` is what keeps the promise
+ * whole once a caller opts into one.
  */
-export declare function TransactionConfirmShell({ phase, header, preview, previewLoading, previewError, previewErrorTitle, previewClassName, execution, progressSteps, renderProgressStepLabel, result, className, "data-testid": dataTestId, }: TransactionConfirmShellProps): React.ReactElement;
+export declare function TransactionConfirmShell(props: TransactionConfirmShellProps): React.ReactElement | null;

package/dist/types/components/composites/tx-preview/confirm/dialog/index.d.ts

@@ -1,5 +1,5 @@
 export * from './computeTransactionConfirmDialogLayout';
 export * from './constants';
-export * from './TransactionConfirmModalView';
-export * from './TransactionConfirmPageView';
+export * from './TransactionConfirmShell';
 export * from './transactionConfirmPhase';
+export * from './transactionConfirmShellTypes';

package/dist/types/components/composites/tx-preview/confirm/dialog/transactionConfirmPhase.d.ts

@@ -1,4 +1 @@
 export type TransactionConfirmPhase = "confirm" | "awaiting_receipt" | "success" | "failure";
-export interface TransactionConfirmSubmittedTx {
-    readonly hash: `0x${string}`;
-}

package/dist/types/components/composites/tx-preview/confirm/dialog/transactionConfirmShellTypes.d.ts

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+import { ProgressStepperStep } from '../stepper/ProgressStepper';
+import { TransactionConfirmPhase } from './transactionConfirmPhase';
+/**
+ * How the card is framed. The body is identical in both: `page` drops the card
+ * into page flow, `dialog` puts the same card inside a modal.
+ */
+export type TransactionConfirmShellMode = "page" | "dialog";
+/**
+ * Pre-labelled, ready-to-render steps. The slot no longer restricts step ids
+ * to the execution union: session-plan steppers (agreement/approve/confirm
+ * plus a delayed request/complete tail) carry their own ids and labels, and
+ * visibility is the caller's decision — omit the slot to hide the stepper.
+ */
+export type TransactionConfirmShellStepper = ReadonlyArray<ProgressStepperStep>;
+/**
+ * Shown instead of preview and execution once the phase is terminal.
+ *
+ * Both halves are required on purpose: supplying `result` at all is the
+ * caller's promise that either terminal phase can be rendered. A flow that
+ * cannot fail says so with an explicit `failure: null` rather than by omission,
+ * which would leave `phase: "failure"` with nothing to draw.
+ */
+export interface TransactionConfirmShellResult {
+    readonly success: React.ReactNode;
+    readonly failure: React.ReactNode;
+}
+/**
+ * What the card is showing.
+ *
+ * A discriminated union rather than a handful of loose flags: a caller cannot
+ * ask for a preview and an error at once, and does not have to spell out the
+ * props that mean "nothing here". `placeholder` and `error` also pin the card
+ * to the `confirm` phase, so neither can ask for a result view it did not
+ * supply — the failure mode that produced an empty card before.
+ */
+export type TransactionConfirmShellBody = 
+/**
+ * Nothing to show yet: a spinner and a caption, drawn here so no consumer
+ * has to assemble one. Distinct from `ready`'s `previewLoading`, which is a
+ * skeleton over a preview that already exists.
+ */
+{
+    readonly kind: "loading";
+} | {
+    readonly kind: "error";
+    /**
+     * Required: the discriminant already says the card failed, so the object
+     * has to be there. A caller holding `Error | null` picks this body only
+     * once it has one, and `placeholder` or `ready` while it does not.
+     */
+    readonly error: Error;
+    /** Heading above the error line. Defaults to this library's own copy. */
+    readonly title?: string;
+} | {
+    readonly kind: "ready";
+    readonly preview: React.ReactNode;
+    readonly execution?: React.ReactNode;
+    readonly stepper?: TransactionConfirmShellStepper;
+    readonly result?: TransactionConfirmShellResult;
+    /** This library's skeleton over the preview slot, for a live refetch. */
+    readonly previewLoading?: boolean;
+};
+interface TransactionConfirmShellBase {
+    readonly phase?: TransactionConfirmPhase;
+    readonly title: React.ReactNode;
+    readonly titleAddon?: React.ReactNode;
+    /** Drop the addon once the phase is terminal. */
+    readonly hideTitleAddonOnResult?: boolean;
+    readonly body: TransactionConfirmShellBody;
+    /** Merged onto the outer card; it never replaces the frame's own classes. */
+    readonly className?: string;
+    /**
+     * The scrollable preview column. Defaults to
+     * {@link transactionConfirmPreviewScrollVariants}; compose with it rather
+     * than replacing it, so later changes to the base still carry over.
+     */
+    readonly previewClassName?: string;
+    /** Outer card. The inner content keeps {@link TransactionConfirmDialogTest.root}. */
+    readonly "data-testid"?: string;
+    readonly shellTestId?: string;
+}
+export interface TransactionConfirmShellProps extends TransactionConfirmShellBase {
+    readonly mode: TransactionConfirmShellMode;
+    /** `dialog` only: the modal renders nothing while closed. Ignored on `page`. */
+    readonly open?: boolean;
+    /**
+     * Omit to hide the close control — that is how a surface without one, such
+     * as a verification page, opts out. A `dialog` without it cannot be
+     * dismissed, so pass one unless that is genuinely what you want.
+     *
+     * `mode` is deliberately a plain field rather than a discriminant that would
+     * make this required for dialogs: consumers carry the mode in a variable and
+     * a union would force every one of them to branch at the call site.
+     */
+    readonly onClose?: () => void;
+}
+export {};

package/dist/types/components/composites/tx-preview/confirm/stepper/transactionExecutionStepTypes.d.ts

@@ -1,10 +1 @@
-export type TransactionExecutionStepId = "approve" | "auth" | "execute";
-export type TransactionExecutionPrerequisiteStepId = Exclude<TransactionExecutionStepId, "execute">;
 export type StepStatus = "completed" | "active" | "upcoming";
-export type TransactionExecutionStepLabelKey = "approve" | "approveBatch" | "auth" | "execute";
-export interface TransactionExecutionStepView {
-    id: TransactionExecutionStepId;
-    labelKey: TransactionExecutionStepLabelKey;
-    status: StepStatus;
-}
-export declare function shouldShowTransactionProgressStepper(steps: ReadonlyArray<Pick<TransactionExecutionStepView, "id">>): boolean;