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

package/dist/types/components/composites/tx-preview/operations/PoolWithdrawView.d.ts

@@ -0,0 +1,11 @@
+import { PoolRedeemOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface PoolWithdrawViewProps {
+    sdk: GearboxSDKLike;
+    operation: PoolRedeemOperation;
+    /** Wallet whose transfers are highlighted; populated after simulation. */
+    wallet: Address;
+}
+/** Human-readable body of a Gearbox pool withdraw (redeem) operation (rows only). */
+export declare function PoolWithdrawView({ sdk, operation, wallet, }: PoolWithdrawViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export * from './OperationBody';
+export * from './OperationsCard';
+export * from './PoolDepositView';
+export * from './PoolRow';
+export * from './PoolWithdrawView';

package/dist/types/components/composites/tx-preview/state-change/BalanceChangeGroup.d.ts

@@ -0,0 +1,11 @@
+import { AddressBalanceChanges } from '@gearbox-protocol/sdk/preview';
+import { AddressLabels } from '../components';
+import { GearboxSDKLike } from '../types';
+export interface BalanceChangeGroupProps {
+    sdk: GearboxSDKLike;
+    group: AddressBalanceChanges;
+    /** Resolved labels for the involved addresses (drives the group divider). */
+    labels: AddressLabels;
+}
+/** One labeled section of balance changes for a single address. */
+export declare function BalanceChangeGroup({ sdk, group, labels, }: BalanceChangeGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/tx-preview/state-change/BalanceChangeRow.d.ts

@@ -0,0 +1,14 @@
+import { TokenBalanceChange } from '@gearbox-protocol/sdk/preview';
+import { GearboxSDKLike } from '../types';
+export interface BalanceChangeRowProps {
+    sdk: GearboxSDKLike;
+    change: TokenBalanceChange;
+}
+/**
+ * One token balance change as three grid cells (the parent group owns the shared
+ * grid template so columns line up across rows): the token (symbol + name,
+ * left-aligned and flexible), the struck-through before value with an arrow to
+ * the after value, and the signed diff in brackets. The whole row is colored
+ * green for a positive delta and red for a negative one.
+ */
+export declare function BalanceChangeRow({ sdk, change }: BalanceChangeRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/tx-preview/state-change/PoolStateChangeCard.d.ts

@@ -0,0 +1,18 @@
+import { AddressBalanceChanges, PoolOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface PoolStateChangeCardProps {
+    sdk: GearboxSDKLike;
+    /** The decoded pool deposit/redeem operation. */
+    operation: PoolOperation;
+    /** Balance changes grouped by watched address (from a successful simulation). */
+    balanceChanges: AddressBalanceChanges[];
+    /** Wallet whose balances are highlighted. */
+    wallet: Address;
+}
+/**
+ * Pool-specific state-change content: balance changes grouped by address (wallet
+ * and, when distinct, the recipient). Renders content only; the surrounding card
+ * chrome, loading, and error handling live in {@link StateChangeCard}.
+ */
+export declare function PoolStateChangeCard({ sdk, operation, balanceChanges, wallet, }: PoolStateChangeCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/composites/tx-preview/state-change/StateChangeCard.d.ts

@@ -0,0 +1,21 @@
+import { Operation, PoolSimulationResult } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface StateChangeCardProps {
+    sdk: GearboxSDKLike;
+    /** Parsed operation that drives which specific state-change card is shown. */
+    data: Operation;
+    /** Stage-2 simulation outcome; `undefined` while it is loading. */
+    simulation: PoolSimulationResult | undefined;
+    /** Whether the simulation is still running. */
+    isLoading: boolean;
+    /** Wallet whose balances/transfers are highlighted. */
+    wallet: Address;
+}
+/**
+ * Parent card for transaction state changes. Owns the common logic (collapsible
+ * card shell, loading skeleton, card-styled error, and no-data handling) and
+ * decides which specific state-change card to render: pool balance changes,
+ * credit account changes (not yet supported), or the decoded revert reason.
+ */
+export declare function StateChangeCard({ sdk, data, simulation, isLoading, wallet, }: StateChangeCardProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,4 @@
+export * from './BalanceChangeGroup';
+export * from './BalanceChangeRow';
+export * from './PoolStateChangeCard';
+export * from './StateChangeCard';

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

@@ -0,0 +1,19 @@
+import { Address } from 'viem';
+/**
+ * Minimal SDK surface for tx-preview UI + hooks.
+ * Satisfied by verify OnchainSDK and client preview SDK instances.
+ */
+export interface GearboxSDKLike {
+    chainId: number;
+    tokensMeta: {
+        get(address: Address): {
+            symbol?: string;
+            decimals?: number;
+            name?: string;
+        } | undefined;
+    };
+    readonly plugins: {
+        adapters: unknown;
+    };
+    client: unknown;
+}

package/dist/types/components/composites/tx-preview/utils/addressLabels.d.ts

@@ -0,0 +1,16 @@
+import { PoolOperation } from '@gearbox-protocol/sdk/preview';
+import { Address } from 'viem';
+import { AddressLabels } from '../components';
+import { GearboxSDKLike } from '../types';
+/**
+ * Builds the UI label map for a pool deposit/redeem operation.
+ *
+ * "Our" addresses (wallet, receiver, redeem owner) are flagged `ours: true`; the
+ * pool is labeled with its name and flagged `ours: false`. When the receiver /
+ * owner coincides with the wallet, it is labeled "Your wallet".
+ *
+ * Note: the `ours` flag is a UI-only concept and is derived locally here; it is
+ * intentionally decoupled from the simulation watch set in the SDK preview
+ * `simulate` module.
+ */
+export declare function buildPoolOperationLabels(sdk: GearboxSDKLike, op: PoolOperation, wallet: Address): AddressLabels;

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

@@ -0,0 +1,2 @@
+export * from './addressLabels';
+export * from './poolTokenInfo';

package/dist/types/components/composites/tx-preview/utils/poolTokenInfo.d.ts

@@ -0,0 +1,14 @@
+import { Address } from 'viem';
+import { GearboxSDKLike } from '../types';
+export interface TokenInfo {
+    symbol: string;
+    decimals: number;
+    /** Human-readable token/pool name, when available. */
+    name?: string;
+}
+/**
+ * Resolves a token's symbol, decimals and name from `sdk.tokensMeta`, falling
+ * back to a shortened address / 18 decimals when the token is not in the
+ * registry. For pools, the diesel-token meta carries the pool name.
+ */
+export declare function resolveToken(sdk: GearboxSDKLike, address: Address): TokenInfo;

package/dist/types/components/confirm-menu/confirm-menu.d.ts

@@ -2,8 +2,10 @@ import * as React from "react";
 export interface ConfirmMenuProps {
     /** Title text or element shown in the header */
     title: React.ReactNode;
-    /** Callback when the close button is clicked */
-    onClose: () => void;
+    /** Optional badge or addon rendered after the title (e.g. LP pill). */
+    titleAddon?: React.ReactNode;
+    /** Callback when the close button is clicked. Omit to hide the close control. */
+    onClose?: () => void;
     /** Additional CSS class applied to the root element */
     className?: string;
 }

package/dist/types/components/help-tip/help-tip.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const iconColorVariants: (props?: ({
-    iconColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
-    iconHoverColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconHoverColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface HelpTipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
     /** Tooltip popup content (what appears when hovering the icon). */

package/dist/types/components/layout/main-aside-layout/main-aside-layout.d.ts

@@ -28,6 +28,19 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
      *   - pass `asideClassName` to override or augment aside classes (e.g. z-index)
      */
     variant?: "default" | "detail";
+    /**
+     * Hybrid centring for the main column. Only meaningful with
+     * `variant="detail"`.
+     *
+     * - **`≥1520px`** — the main column is centred on the viewport (`mx-auto`),
+     *   capped at `56rem`, with the aside in the left gutter (`absolute`).
+     * - **`lg`…`1519px`** — LP-style in-flow row (aside + main centred as one block).
+     *
+     * On screens below `lg` the layout falls back to the normal stacked column,
+     * so wrap usage in `hidden lg:block` if the mobile layout is handled
+     * separately.
+     */
+    centeredMain?: boolean;
 }
 /**
  * MainAsideLayout — main column + optional sidebar in one row.
@@ -54,5 +67,16 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
  * ```
  * This reproduces the `PoolDetailsScreen` two-column layout:
  * sticky aside below 2450 px viewport, fixed aside above it, correct max-widths.
+ *
+ * ### Detail variant — viewport-centred main (`centeredMain`)
+ * ```tsx
+ * <div className="hidden lg:block">
+ *   <MainAsideLayout variant="detail" asidePosition="left" centeredMain aside={<Panel />}>
+ *     <Content />
+ *   </MainAsideLayout>
+ * </div>
+ * ```
+ * Centres the main column on the viewport (up to `56rem`) while the aside sits
+ * in the left gutter from `1520px`; below that the row behaves like LP detail.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/legal-agreement/index.d.ts

@@ -1 +1,5 @@
-export { type AppName, BlockedRegionDialog, type BlockedRegionDialogProps, createGearboxAppConfig, createLegalAgreementConfig, createPermissionlessInterfaceConfig, createPermissionlessSafeConfig, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogLinks, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementAwaitingPanel, type LegalAgreementAwaitingPanelProps, LegalAgreementAwaitingPanelTest, } from './legal-agreement-awaiting-panel';
+export { BlockedRegionDialog, type BlockedRegionDialogProps, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogProps, } from './legal-agreement-dialog';
+export { LegalAgreementLink, type LegalAgreementLinkProps, } from './legal-agreement-link';
+export { LegalAgreementPanel, type LegalAgreementPanelProps, LegalAgreementPanelTest, } from './legal-agreement-panel';
+export { type LegalAgreementThemeVariantProps, type LegalAgreementVisualTheme, legalAgreementAwaitingDescriptionVariants, legalAgreementAwaitingRootVariants, legalAgreementAwaitingTitleVariants, legalAgreementLinkVariants, legalAgreementPanelCheckboxLabelVariants, legalAgreementPanelCheckboxListTitleVariants, legalAgreementPanelCheckboxListVariants, legalAgreementPanelCheckboxRowVariants, legalAgreementPanelNotificationVariants, legalAgreementPanelRootVariants, legalAgreementPanelV2BannerVariants, } from './legal-agreement-theme';

package/dist/types/components/legal-agreement/legal-agreement-awaiting-panel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementAwaitingPanelTest {
+    static root: string;
+}
+export interface LegalAgreementAwaitingPanelProps {
+    readonly waitingForSignatureText?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementAwaitingPanel({ waitingForSignatureText, theme, }: LegalAgreementAwaitingPanelProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-dialog.d.ts

@@ -1,13 +1,9 @@
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
 import * as React from "react";
 export interface LegalAgreementCheckboxItem {
     id: string;
     content: React.ReactNode;
 }
-export interface LegalAgreementDialogLinks {
-    termsOfService: string;
-    privacyNotice: string;
-    riskDisclosure: string;
-}
 export interface LegalAgreementDialogConfig {
     /**
      * Product/service name (e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App")
@@ -41,6 +37,15 @@ export interface LegalAgreementDialogConfig {
      * Defaults to "Please sign the message in your wallet to agree to the Terms of Service."
      */
     waitingForSignatureText?: string;
+    /**
+     * Notice shown when terms are updated (hasV2Signature is true).
+     * Host app supplies legal copy; ui-kit only renders layout.
+     */
+    updatedTermsNoticeText?: React.ReactNode;
+    /**
+     * Optional heading above checkbox list (e.g. warranty section title).
+     */
+    checkboxListTitle?: React.ReactNode;
 }
 export interface LegalAgreementDialogProps {
     open: boolean;
@@ -50,6 +55,7 @@ export interface LegalAgreementDialogProps {
     hasV2Signature?: boolean;
     isAwaitingSignature?: boolean;
     config: LegalAgreementDialogConfig;
+    theme?: LegalAgreementVisualTheme;
 }
 /**
  * LegalAgreementDialog — dialog component for legal agreement signing.
@@ -77,59 +83,20 @@ export interface LegalAgreementDialogProps {
  * Note: Displays checkboxes for user agreement and handles signing flow.
  * Shows waiting state during signature process.
  *
- * Example usage with helper function:
+ * Example usage — host app supplies config (legal copy is app-owned):
  * ```tsx
- * import { LegalAgreementDialog, createLegalAgreementConfig } from '@gearbox-protocol/ui-kit';
+ * import { LegalAgreementDialog, LegalAgreementLink } from '@gearbox-protocol/ui-kit';
  *
- * const links = {
- *   termsOfService: 'https://gearbox.fi/terms',
- *   privacyNotice: 'https://gearbox.fi/privacy',
- *   riskDisclosure: 'https://gearbox.fi/risks',
+ * const config = {
+ *   productName: 'My App',
+ *   notificationText: <>…your legal copy with <LegalAgreementLink href="…">ToS</LegalAgreementLink>…</>,
+ *   checkboxItems: [{ id: 'consent', content: <>…</> }],
  * };
  *
- * // You can use any app name. For "Permissionless Interface" and "Permissionless Safe"
- * // it uses simplified consent flow. For other names (e.g., "Gearbox App") it uses
- * // extended consent flow with additional checkboxes.
- * const config = createLegalAgreementConfig("Permissionless Interface", links);
- *
- * <LegalAgreementDialog
- *   open={isOpen}
- *   onClose={handleClose}
- *   onSign={handleSign}
- *   isSigning={isSigning}
- *   config={config}
- * />
+ * <LegalAgreementDialog open={isOpen} onClose={handleClose} onSign={handleSign} isSigning={isSigning} config={config} />
  * ```
  */
-export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
-export type AppName = string;
-/**
- * Creates configuration for legal agreement dialog based on app name.
- * @param appName - Name of the application (any string, e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App", etc.)
- * @param links - URLs for legal documents
- * @param options - Optional configuration overrides
- */
-export declare function createLegalAgreementConfig(appName: AppName, links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Interface", links, options) instead
- */
-export declare function createPermissionlessInterfaceConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Permissionless Safe", links, options) instead
- */
-export declare function createPermissionlessSafeConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
-/**
- * @deprecated Use createLegalAgreementConfig("Gearbox App", links, options) instead
- */
-export declare function createGearboxAppConfig(links: LegalAgreementDialogLinks, options?: {
-    agreeButtonText?: string;
-}): LegalAgreementDialogConfig;
+export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, theme, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
 export interface BlockedRegionDialogProps {
     open: boolean;
     onClose: () => void;

package/dist/types/components/legal-agreement/legal-agreement-link.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export interface LegalAgreementLinkProps {
+    readonly href: string;
+    readonly children: React.ReactNode;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+/**
+ * Styled external link for legal agreement copy supplied by the host app.
+ */
+export declare function LegalAgreementLink({ href, children, theme, }: LegalAgreementLinkProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-panel.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare class LegalAgreementPanelTest {
+    static root: string;
+}
+export interface LegalAgreementPanelProps {
+    readonly config: LegalAgreementDialogConfig;
+    readonly checkedItems: Readonly<Record<string, boolean>>;
+    readonly onCheckedChange: (id: string) => void;
+    readonly hasV2Signature?: boolean;
+    readonly showTitle?: boolean;
+    readonly checkboxIdPrefix?: string;
+    readonly theme?: LegalAgreementVisualTheme;
+}
+export declare function LegalAgreementPanel({ config, checkedItems, onCheckedChange, hasV2Signature, showTitle, checkboxIdPrefix, theme, }: LegalAgreementPanelProps): React.ReactElement;

package/dist/types/components/legal-agreement/legal-agreement-theme.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+export type LegalAgreementVisualTheme = "default" | "gearboxV3";
+export declare const legalAgreementPanelRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelNotificationVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListVariants: (props?: ({
+    readonly theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxListTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxRowVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelCheckboxLabelVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementPanelV2BannerVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingRootVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingTitleVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementAwaitingDescriptionVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const legalAgreementLinkVariants: (props?: ({
+    theme?: "default" | "gearboxV3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LegalAgreementThemeVariantProps = VariantProps<typeof legalAgreementPanelRootVariants>;

package/dist/types/components/legal-agreement/legal-agreement.stories-config.d.ts

@@ -0,0 +1,11 @@
+import { LegalAgreementDialogConfig } from './legal-agreement-dialog';
+import { LegalAgreementVisualTheme } from './legal-agreement-theme';
+export declare function createStoryPermissionlessLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryExtendedLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+export declare function createStoryRwaLegalConfig(theme?: LegalAgreementVisualTheme): LegalAgreementDialogConfig;
+/** Storybook-only sample config (single-checkbox flow). Not exported from ui-kit. */
+export declare const storyPermissionlessLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only sample config (three-checkbox flow). Not exported from ui-kit. */
+export declare const storyExtendedLegalConfig: LegalAgreementDialogConfig;
+/** Storybook-only RWA sample config. Not exported from ui-kit. */
+export declare const storyRwaLegalConfig: LegalAgreementDialogConfig;

package/dist/types/components/smart-number-input/smart-number-input.d.ts

@@ -1,6 +1,22 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
 import { TokenFullData } from '../../types/common';
 import * as React from "react";
+export interface TokenOption {
+    /** Display label for this option. */
+    label: string;
+    /** Optional icon to display before the label. */
+    icon?: React.ReactNode;
+    /**
+     * Called when this option is selected (single-select) or toggled (multi-select).
+     * In multi-select mode the dropdown stays open; the parent manages checked state.
+     */
+    onSelect: () => void;
+    /**
+     * When true, the option is shown with a checkmark.
+     * Used only in multi-select mode (`multiSelectMode` prop on SmartNumberInput).
+     */
+    checked?: boolean;
+}
 /** A-matching SmartNumberInput size for layout (styles.tsx). */
 export type SmartNumberInputSize = "sm" | "md";
 export interface SmartNumberInputProps {
@@ -28,6 +44,18 @@ export interface SmartNumberInputProps {
     size?: SmartNumberInputSize;
     /** When true, currency dropdown is open (expand icon rotated). */
     active?: boolean;
+    /** Override max character length for token symbol display. When omitted, computed from viewport width. */
+    symbolMaxLength?: number;
+    /** Inline token options for dropdown selection (alternative to onShowSelectDialog). */
+    tokenOptions?: TokenOption[];
+    /**
+     * When true, the tokenOptions dropdown works as a multi-select:
+     * - The dropdown stays open after each click (doesn't auto-close).
+     * - Options marked `checked: true` show a checkmark.
+     * - The dropdown stays open until the user closes it (e.g. click outside).
+     * The parent is responsible for maintaining `checked` state on each option.
+     */
+    multiSelectMode?: boolean;
     /** Callback when amount changes. Called with (value: bigint, valueView: string). */
     onSetAmount?: (value: bigint, valueView: string) => void;
     /** Callback to show token select dialog. */
@@ -38,6 +66,30 @@ export interface SmartNumberInputProps {
     onFocus?: () => void;
     /** Blur callback. */
     onBlur?: () => void;
+    /**
+     * USD price per one whole token unit (e.g. 1800.5 for ETH at $1 800.50).
+     * When provided, the USD equivalent of the current amount is displayed below the input.
+     */
+    usdPrice?: number;
+    /**
+     * When provided, renders a Health Factor slider in the balance row
+     * (replacing the max amount / "Can borrow" indicator).
+     * Intended for debt inputs where the user wants to target a specific HF.
+     */
+    hfSlider?: HFSliderConfig;
+}
+/** Configuration for the inline Health Factor slider. */
+export interface HFSliderConfig {
+    /** Current target HF as a float (e.g. 1.5 for 150%). */
+    value: number;
+    /** Minimum HF value. @default 1.0 */
+    min?: number;
+    /** Maximum HF value. @default 3.0 */
+    max?: number;
+    /** Slider step. @default 0.01 */
+    step?: number;
+    /** Called when the slider value changes. */
+    onChange: (value: number) => void;
 }
 /**
  * SmartNumberInput — token amount input with balance display (matches interface).

package/dist/types/components/tip-card/tip-card.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const tipCardVariants: (props?: ({
-    backgroundColor?: "dark" | "transparent" | "light" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    backgroundColor?: "dark" | "transparent" | "light" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
     textColor?: "unset" | "dark" | "light" | null | undefined;
     borderColor?: "none" | "dark" | "light" | "gradient" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/locale/en.json.d.ts

@@ -25,8 +25,10 @@ declare const _default: {
   "components.loading.wait": "Please wait...",
 
   "components.smartNumberInput.balance": "Balance",
+  "components.smartNumberInput.amountLabel": "Amount",
   "components.smartNumberInput.inputTitle": "Token Amount",
   "components.smartNumberInput.confirm.input": "Input",
+  "components.smartNumberInput.selectToken": "Select token",
 
   "components.tipWindow.title": "Tip",
 

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.2",
+  "version": "3.14.0-next.23",
   "description": "Internal UI components",
-  "repository": "https://github.com/gearbox-protocol/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Gearbox-protocol/ui-kit.git"
+  },
   "license": "MIT",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
@@ -54,6 +57,16 @@
       "types": "./dist/types/components/next/connectkit/index.d.ts",
       "import": "./dist/esm/components/next/connectkit/index.js",
       "default": "./dist/cjs/components/next/connectkit/index.cjs"
+    },
+    "./tx-preview": {
+      "types": "./dist/types/components/composites/tx-preview/index.d.ts",
+      "import": "./dist/esm/components/composites/tx-preview/index.js",
+      "default": "./dist/cjs/components/composites/tx-preview/index.cjs"
+    },
+    "./tx-preview/*": {
+      "types": "./dist/types/components/composites/tx-preview/*.d.ts",
+      "import": "./dist/esm/components/composites/tx-preview/*.js",
+      "default": "./dist/cjs/components/composites/tx-preview/*.cjs"
     }
   },
   "files": [
@@ -153,7 +166,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "14.8.5",
+    "@gearbox-protocol/sdk": "14.11.0-next.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",