@gearbox-protocol/ui-kit 3.14.0-next.3 → 3.14.0-next.30

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

@@ -6,8 +6,16 @@ export interface TokenOption {
     label: string;
     /** Optional icon to display before the label. */
     icon?: React.ReactNode;
-    /** Called when this option is selected. */
+    /**
+     * 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";
@@ -40,6 +48,14 @@ export interface SmartNumberInputProps {
     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. */
@@ -50,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/components/vertical-indicator/vertical-indicator.d.ts

@@ -24,6 +24,12 @@ export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDi
     value?: React.ReactNode;
     /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
     valueTo?: React.ReactNode;
+    /**
+     * When true (default) and valueTo is provided, the old value (value) is rendered in
+     * secondary-foreground color to visually dim it. Set to false to keep the original color
+     * (e.g. for Health Factor which uses zone-based coloring).
+     */
+    dimPreviousValue?: boolean;
     /** Called when the tip icon is hovered */
     onPointerEnterTip?: () => void;
 }

package/dist/types/hooks/use-filter.d.ts

@@ -23,6 +23,52 @@ export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void
  * Hook for managing sort state
  */
 export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+/**
+ * Ordered list of active sort keys. The first entry is the primary sort key,
+ * the second is the tie-breaker, and so on. An empty array means "no sort".
+ */
+export type MultiSortField<T> = ReadonlyArray<FilterSortField<T>>;
+/** Resolved sort state for a single column inside a {@link MultiSortField}. */
+export interface MultiSortFieldState {
+    /** Sort direction for this field, or `undefined` when the field is inactive. */
+    sort: SortType | undefined;
+    /**
+     * 1-based position of the field within the active sort keys, or `undefined`
+     * when the field is inactive. Use it to render a priority badge (1, 2, …).
+     */
+    priority: number | undefined;
+}
+export type MultiSortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Resolve the direction and priority of a single field within a multi-sort.
+ *
+ * @example
+ * ```tsx
+ * const { sort, priority } = getSortForFields("type", state);
+ * <HeadCell sortDirection={sort} sortPriority={state.length > 1 ? priority : undefined} />
+ * ```
+ */
+export declare const getSortForFields: <T>(field: T, state: MultiSortField<T> | null) => MultiSortFieldState;
+/**
+ * Pure reducer behind {@link useMultiSort}. Each field cycles through three
+ * states on successive clicks: `startFromSort` → the opposite direction →
+ * removed. Clicking a brand-new field makes it the primary key (existing keys
+ * become tie-breakers) and the lowest-priority key is dropped once `maxFields`
+ * is reached.
+ */
+export declare function nextMultiSortState<T>(prev: MultiSortField<T>, field: T, startFromSort?: SortType, maxFields?: number): MultiSortField<T>;
+export interface UseMultiSortOptions {
+    /** Maximum number of simultaneously active sort keys. Defaults to `2`. */
+    maxFields?: number;
+}
+/**
+ * Hook for managing sort state across multiple fields (e.g. sort by `type`,
+ * then by `apy`). Mirrors {@link useSort} but keeps an ordered list of keys.
+ */
+export declare function useMultiSort<T>(initialState?: MultiSortField<T> | null, { maxFields }?: UseMultiSortOptions): readonly [MultiSortField<T>, MultiSortSetterFunction<T>, {
+    readonly removeSortField: (field: T) => void;
+    readonly resetSort: () => void;
+}];
 interface GeneralRangeFilterState {
     state: FilterRange | null;
 }

package/dist/types/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/avatar';
 export * from './components/badge';
 export * from './components/base-link';
 export * from './components/block-sync';
+export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/button-checkbox';
 export * from './components/buttons';
@@ -142,6 +143,7 @@ export * from './configs/variants';
 export * from './hooks';
 export type { LocaleKeys } from './locale';
 export * from './locale';
+export type { BlockSyncProps } from './types/footer';
 export { EnglishLocale };
 export * from './test-ids';
 export * from './utils';

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

@@ -18,6 +18,10 @@ declare const _default: {
   "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
   "components.footer.version": "Version {value}",
 
+  "components.blockSyncPill.syncError": ", sync error",
+  "components.blockSyncPill.syncedAt": ", synced at {time}",
+  "components.blockSyncPill.syncing": ", syncing…",
+
   "components.liquidationPrice.check": "Check Area",
 
   "components.loading.loading": "Loading",
@@ -25,8 +29,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/dist/types/types/footer.d.ts

@@ -3,12 +3,22 @@
  */
 export interface LastSyncBlock {
     block: bigint;
+    /** Local wall-clock time (ms) of the last successful sync for this chain. */
     localTimestamp: number;
 }
+/**
+ * Per-chain sync info: the last synced block plus the live refresh state, so the
+ * sync indicator can reflect whether the refresh loop is alive / failing.
+ */
+export interface ChainSyncInfo {
+    lastSyncBlock: LastSyncBlock;
+    /** True while a refresh for this chain is currently in flight. */
+    loading?: boolean;
+    /** Human-readable error if the last refresh for this chain failed. */
+    error?: string;
+}
 export interface BlockByChain {
-    [chainId: number]: {
-        lastSyncBlock: LastSyncBlock;
-    } | undefined;
+    [chainId: number]: ChainSyncInfo | undefined;
 }
 export interface ExplorerInfo {
     url: string;
@@ -24,6 +34,17 @@ export interface BlockSyncProps {
     blockByChain: BlockByChain | undefined;
     explorerAddresses: ExplorerAddresses;
     networkById: NetworkById;
+    /**
+     * Expected refresh cadence in ms. The indicator is considered stale only after
+     * `syncIntervalMs * staleMultiplier`, so a healthy loop never flips to red.
+     * Defaults to 5 minutes.
+     */
+    syncIntervalMs?: number;
+    /**
+     * Stale-threshold multiplier applied to {@link BlockSyncProps.syncIntervalMs}.
+     * Defaults to 2.5 (allows for missed/throttled cycles before flagging stale).
+     */
+    staleMultiplier?: number;
 }
 export interface FooterProps {
     blockSyncProps?: BlockSyncProps;

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.3",
+  "version": "3.14.0-next.30",
   "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.9",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",