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

package/dist/types/components/breakpoint-provider.d.ts

@@ -0,0 +1,56 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Named breakpoint media queries. Keep in sync with the semantic hooks in
+ * `use-media-query.ts` (`useIsExtraSmall`, `useIsMobile`, …).
+ */
+export declare const BREAKPOINT_QUERIES: {
+    readonly isExtraSmall: "(max-width: 500px)";
+    readonly isMobile: "(max-width: 768px)";
+    readonly isTablet: "(min-width: 768px) and (max-width: 1024px)";
+    readonly isMedium: "(max-width: 1024px)";
+    readonly isDesktop: "(min-width: 1024px)";
+};
+export type BreakpointKey = keyof typeof BREAKPOINT_QUERIES;
+export type BreakpointState = {
+    readonly [K in BreakpointKey]: boolean;
+};
+export declare const DEFAULT_BREAKPOINT_STATE: BreakpointState;
+type MatchMediaLike = (query: string) => Pick<MediaQueryList, "matches">;
+/**
+ * Snapshot named breakpoints from a `matchMedia` implementation.
+ * Exported for unit tests; used by `BreakpointProvider` for the initial state.
+ */
+export declare function getBreakpointState(matchMedia: MatchMediaLike): BreakpointState;
+type MediaQueryListLike = {
+    matches: boolean;
+    addEventListener: (type: "change", listener: (event: MediaQueryListEvent) => void) => void;
+    removeEventListener: (type: "change", listener: (event: MediaQueryListEvent) => void) => void;
+};
+type MatchMediaSubscribe = (query: string) => MediaQueryListLike;
+/**
+ * Subscribe once to all named breakpoints. Returns an unsubscribe function.
+ * Exported for unit tests (deduplication / change propagation).
+ */
+export declare function subscribeBreakpoints(matchMedia: MatchMediaSubscribe, onChange: (state: BreakpointState) => void): () => void;
+/**
+ * Shared breakpoint context. `undefined` means no provider is mounted and
+ * semantic hooks should fall back to their own `matchMedia` subscription.
+ */
+export declare const BreakpointContext: import('react').Context<BreakpointState | undefined>;
+/**
+ * Hook that returns the provider state, or `undefined` when no
+ * `BreakpointProvider` is mounted.
+ */
+export declare function useBreakpointContext(): BreakpointState | undefined;
+export interface BreakpointProviderProps {
+    readonly children: ReactNode;
+}
+/**
+ * Owns a single set of `matchMedia` listeners for the five named breakpoints
+ * and shares the result via context. Mount once near the app root.
+ *
+ * Semantic hooks (`useIsMobile`, …) read from this context when present and
+ * otherwise keep their self-contained fallback behaviour.
+ */
+export declare function BreakpointProvider({ children, }: BreakpointProviderProps): ReactElement;
+export {};

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" | "ghost" | "outline" | "secondary" | "white" | "neutral" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
-    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | "md" | null | undefined;
+    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;
     width?: "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**

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

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

package/dist/types/components/collateral-allocation-tooltip/allocation-wheel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface AllocationWheelProps {
+    /** Slice share in 0..1 of the total allocation. */
+    readonly share: number;
+    /** Palette index for token slices; ignored when {@link idle}. */
+    readonly colorIndex: number;
+    readonly idle?: boolean;
+}
+/** 20px donut showing one slice's share of the total. */
+export declare function AllocationWheel({ share, colorIndex, idle, }: AllocationWheelProps): React.ReactElement;

package/dist/types/components/collateral-allocation-tooltip/collateral-allocation-tooltip.d.ts

@@ -0,0 +1,23 @@
+import { Amount, Token } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+export type CollateralAllocationSlice = {
+    kind: "token";
+    token: Token;
+    amount: Amount;
+} | {
+    kind: "idle";
+    amount: Amount;
+};
+export interface CollateralAllocation {
+    slices: ReadonlyArray<CollateralAllocationSlice>;
+}
+export interface CollateralAllocationTooltipProps {
+    readonly data: CollateralAllocation;
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+}
+/**
+ * Pool collateral mix for Earn table hover — token rows plus an Idle remainder.
+ * Slice shares are derived from `amount.valueUsd`.
+ */
+export declare function CollateralAllocationTooltip({ data, children, className, }: CollateralAllocationTooltipProps): React.ReactElement;

package/dist/types/components/collateral-allocation-tooltip/constants.d.ts

@@ -0,0 +1,8 @@
+export declare class CollateralAllocationTooltipTest {
+    static root: string;
+    static row: string;
+    static wheel: string;
+}
+export declare class AllocationWheelTest {
+    static root: string;
+}

package/dist/types/components/collateral-allocation-tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export * from './allocation-wheel';
+export * from './collateral-allocation-tooltip';
+export * from './constants';

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

@@ -1,6 +1,3 @@
-export * from './oracles-and-lt-table';
+export * from './notification-center';
 export * from './pool-assets-table';
-export * from './pool-credit-manager-info';
-export * from './pool-credit-managers-table';
-export * from './pool-table';
-export * from './strategies-table';
+export * from './tx-preview';

package/dist/types/components/composites/notification-center/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const notificationCenterTestIds: {
+    readonly root: "notification-center-root";
+    readonly trigger: "notification-center-trigger";
+    readonly badge: "notification-center-badge";
+    readonly panel: "notification-center-panel";
+    readonly requestsSection: "notification-center-requests";
+    readonly requestRow: "notification-center-request-row";
+    readonly requestExecute: "notification-center-request-execute";
+    readonly successSection: "notification-center-success";
+    readonly successRow: "notification-center-success-row";
+    readonly empty: "notification-center-empty";
+    readonly clear: "notification-center-clear";
+};

package/dist/types/components/composites/notification-center/index.d.ts

@@ -0,0 +1,2 @@
+export * from './notification-center';
+export * from './types';

package/dist/types/components/composites/notification-center/notification-center.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { NotificationCenterProps } from './types';
+/**
+ * Presentational notification center: a bell trigger with a request-count badge
+ * and a dropdown listing deferred ("Requests") and settled ("Recent")
+ * operations. Fully controlled and data-agnostic — the host builds the row view
+ * models (titles, status labels, timestamps) and wires the callbacks.
+ */
+export declare function NotificationCenter({ open, onOpenChange, deferredRows, successRows, deferredCount, hasReady, hasAny, onClear, }: NotificationCenterProps): React.ReactElement;

package/dist/types/components/composites/notification-center/types.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+/** A deferred (two-phase) request row shown in the "Requests" section. */
+export interface DeferredRowView {
+    readonly id: string;
+    readonly title: React.ReactNode;
+    readonly positionName: React.ReactNode;
+    readonly isReady: boolean;
+    readonly isClickable: boolean;
+    readonly statusLabel: React.ReactNode;
+    /** Present only for reopenable (matured) rows; makes the row clickable. */
+    readonly onExecute?: () => void;
+}
+/** A settled operation row shown in the "Recent" section. */
+export interface SuccessRowView {
+    readonly id: string;
+    readonly label: React.ReactNode;
+    readonly timestampLabel: React.ReactNode;
+    readonly onView?: () => void;
+}
+export interface NotificationCenterProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly deferredRows: DeferredRowView[];
+    readonly successRows: SuccessRowView[];
+    readonly deferredCount: number;
+    /** At least one deferred request has matured (drives the badge/status color). */
+    readonly hasReady: boolean;
+    readonly hasAny: boolean;
+    /** Optional action: wipe settled ("Recent") notifications. Rendered in the Recent section header; hidden when omitted. */
+    readonly onClear?: () => void;
+}

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

@@ -0,0 +1,6 @@
+export declare class PoolAssetsTableTest {
+    static root: string;
+    static exposureCell: string;
+    static capCell: string;
+    static capUtilizationCell: string;
+}

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

@@ -1,3 +1,4 @@
+export * from './constants';
 export * from './pool-assets-table';
 export * from './pool-assets-table-head';
 export * from './pool-assets-table-row';

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

@@ -1,10 +1,9 @@
 import { default as React } from 'react';
 import { PoolAssetsTableSort } from './types';
-/** Props for {@link PoolAssetsTableHead}. */
 export interface PoolAssetsTableHeadProps {
     readonly sort: PoolAssetsTableSort;
 }
 /**
- * Header row: sortable Asset, Rate, and Limits columns (`components.poolAssetsTable.*` locale keys).
+ * Header row: sortable Name / Exposure / Cap / Cap utilization.
  */
 export declare function PoolAssetsTableHead({ sort, }: PoolAssetsTableHeadProps): React.ReactElement;

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

@@ -1,15 +1,15 @@
-import { TokenData } from '@gearbox-protocol/sdk/common-utils';
+import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
-import { PoolAssetsTableQuotaRow } from './types';
-/** Props for {@link PoolAssetsTableRow}. */
 export interface PoolAssetsTableRowProps {
     readonly poolName: string;
-    readonly token: TokenData | undefined;
-    readonly currentQuota: PoolAssetsTableQuotaRow;
-    readonly underlyingToken: TokenData;
+    readonly asset: QuotaAsset;
+    readonly underlyingToken: Token;
     readonly last: boolean;
+    readonly isCompact: boolean;
+    readonly totalUsed: bigint;
+    readonly colorIndex: number;
 }
 /**
- * Single data row: token + pool name, `percentageTemplate` rate, and formatted usage vs limit.
+ * Single data row: token name, exposure (amount + pie), cap, and cap utilization.
  */
-export declare function PoolAssetsTableRow({ poolName, token, currentQuota, underlyingToken, last, }: PoolAssetsTableRowProps): React.ReactElement;
+export declare function PoolAssetsTableRow({ poolName, asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;

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

@@ -1,24 +1,14 @@
-import { TokenData } from '@gearbox-protocol/sdk/common-utils';
+import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
-import { Address } from 'viem';
-import { PoolAssetsTableQuotaRow, PoolAssetsTableSort } from './types';
-/**
- * Props for {@link PoolAssetsTable}.
- */
+import { PoolAssetsTableSort } from './types';
 export interface PoolAssetsTableProps {
-    /** Quota rows to render (one per asset). */
-    readonly list: ReadonlyArray<PoolAssetsTableQuotaRow>;
-    /** Pool name shown under the asset title. */
+    readonly list: ReadonlyArray<QuotaAsset>;
     readonly poolName: string;
     readonly sort: PoolAssetsTableSort;
-    /** Token metadata keyed by token address (must include every `quota.token`). */
-    readonly tokensList: Partial<Record<Address, TokenData>>;
-    /** Underlying asset used for `TokenTemplate` amounts in the usage column. */
-    readonly underlyingToken: TokenData;
+    readonly underlyingToken: Token;
 }
 /**
- * Grid table of pool asset quotas: asset / effective rate / limits usage.
- * On viewports below the mobile breakpoint the header is hidden and each row
- * uses the compact `TableLineSm` layout.
+ * 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, tokensList, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
+export declare function PoolAssetsTable({ list, poolName, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;

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

@@ -1,7 +1,7 @@
-import { Address } from 'viem';
+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" | "rate" | "usage";
+export type PoolAssetsSortFields = "name" | "exposure" | "cap" | "capUtilization";
 /**
  * Sort state + setter wired to `HeadCell` / `useSort` (same pattern as `PoolTable`).
  */
@@ -13,13 +13,5 @@ export interface PoolAssetsTableSort {
 export interface PoolAssetsFilterState {
     readonly sort: PoolAssetsTableSort;
 }
-/**
- * One asset line: quota limit, usage, and borrow rate.
- * Shape aligns with Gearbox SDK quota / QuotaInfo-style data.
- */
-export interface PoolAssetsTableQuotaRow {
-    readonly token: Address;
-    readonly limit: bigint;
-    readonly totalQuoted: bigint;
-    readonly rate: bigint;
-}
+/** One quota row — the SDK's {@link QuotaAsset}. */
+export type PoolAssetsTableQuotaRow = QuotaAsset;

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

@@ -0,0 +1,62 @@
+import { TokenAmount } from '@gearbox-protocol/sdk/model';
+import { VariantProps } from 'class-variance-authority';
+import { default as React } from 'react';
+import { TokenTemplateProps } from '../../../../token-template';
+declare const rootVariants: (props?: ({
+    position?: "first" | "last" | "inBetween" | "solo" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+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 loading?: boolean;
+    readonly maxLength?: number;
+    readonly approximate?: {
+        isApproximate?: boolean;
+        approximateSymbol?: string;
+    };
+};
+/**
+ * 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

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

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

@@ -0,0 +1,2 @@
+export * from './constants';
+export { TransactionConfirmAmountField, type TransactionConfirmAmountFieldProps, } from './TransactionConfirmAmountField';

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { TransactionConfirmShellProps } from './transactionConfirmShellTypes';
+/**
+ * The one card every transaction confirmation renders, on every surface.
+ *
+ * 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(props: TransactionConfirmShellProps): React.ReactElement | null;

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

@@ -0,0 +1,8 @@
+import { TransactionConfirmPhase } from './transactionConfirmPhase';
+export interface TransactionConfirmDialogLayout {
+    readonly showPreview: boolean;
+    readonly showExecution: boolean;
+    readonly showProgressStepper: boolean;
+    readonly showResult: boolean;
+}
+export declare function computeTransactionConfirmDialogLayout(phase: TransactionConfirmPhase, hasProgressSteps: boolean): TransactionConfirmDialogLayout;

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

@@ -0,0 +1,17 @@
+export declare class TransactionConfirmDialogTest {
+    static root: string;
+    static execution: string;
+    static progress: string;
+    static result: string;
+}
+/** Outer dialog card: mobile-first full width, fixed 560px from md up. */
+export declare const transactionConfirmDialogShellVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Modal confirm: use available viewport height; inner preview scrolls only when
+ * content overflows (see `transactionConfirmPreviewScrollVariants`).
+ */
+export declare const transactionConfirmModalContainerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Scrollable preview column inside confirm / execute body. */
+export declare const transactionConfirmPreviewScrollVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Inner shell content: fill the padded dialog container without re-applying width. */
+export declare const transactionConfirmShellContentVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

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

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

@@ -0,0 +1 @@
+export type TransactionConfirmPhase = "confirm" | "awaiting_receipt" | "success" | "failure";

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../../../../buttons/button/button';
+export interface TransactionConfirmExecuteButtonProps extends ButtonProps {
+    readonly isLoading?: boolean;
+}
+export declare function TransactionConfirmExecuteButton({ isLoading, disabled, children, width, size, ...rest }: TransactionConfirmExecuteButtonProps): React.ReactElement;

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

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

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

@@ -0,0 +1,5 @@
+export * from './amounts';
+export * from './dialog';
+export * from './execution';
+export * from './result';
+export * from './stepper';

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmFailureResult.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface TransactionConfirmFailureResultProps {
+    readonly title: React.ReactNode;
+    readonly description: React.ReactNode;
+    readonly footerAction?: React.ReactNode;
+    readonly iconSize?: number;
+}
+/**
+ * Failure result follows the shell's confirm layout: the main content scrolls
+ * while `footerAction` remains outside the scroll container.
+ */
+export declare function TransactionConfirmFailureResult({ title, description, footerAction, iconSize, }: TransactionConfirmFailureResultProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmSuccessIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function TransactionConfirmSuccessIcon(): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmSuccessResult.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface TransactionConfirmSuccessResultProps {
+    readonly icon?: React.ReactNode;
+    readonly headline: React.ReactNode;
+    readonly subtitle: React.ReactNode;
+    readonly txHashRow?: React.ReactNode;
+    /** Extra scrollable body below the subtitle (e.g. summary tables). */
+    readonly footerAction?: React.ReactNode;
+}
+/**
+ * Success result follows the shell's confirm layout: the main content scrolls
+ * while `footerAction` remains outside the scroll container.
+ */
+export declare function TransactionConfirmSuccessResult({ icon, headline, subtitle, txHashRow, footerAction, }: TransactionConfirmSuccessResultProps): React.ReactElement;

package/dist/types/components/composites/tx-preview/confirm/result/TransactionConfirmTxHashRow.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface TransactionConfirmTxHashRowProps {
+    readonly txHashLink: React.ReactNode;
+    readonly addToWalletLink?: React.ReactNode;
+}
+export declare function TransactionConfirmTxHashRow({ txHashLink, addToWalletLink, }: TransactionConfirmTxHashRowProps): React.ReactElement;