@gearbox-protocol/permissionless-ui 1.22.0-next.41 → 1.22.0-next.43

package/dist/types/components/complex-input/complex-input.d.ts

@@ -1,39 +1,7 @@
-import { TokenData } from '@gearbox-protocol/sdk';
 import { InputProps } from '../input';
 import { WithTitleProps } from '../with-title';
+import { BalanceIndicatorProps } from '..';
 import type * as React from "react";
-export type BalanceIndicatorSize = "sm" | "md";
-export interface BalanceIndicatorProps {
-    /**
-     * Label before balance (e.g. "Balance")
-     */
-    title?: React.ReactNode;
-    /**
-     * Maximum amount available
-     */
-    maxAmount: bigint;
-    /**
-     * Token data
-     */
-    token: TokenData | undefined;
-    /**
-     * Size variant (matches interface SmartNumberInputSize)
-     */
-    size?: BalanceIndicatorSize;
-    /**
-     * Whether the indicator is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show max button / clickable amount
-     */
-    maxButton?: boolean;
-    /**
-     * Callback when max is clicked
-     */
-    onMaxButtonClick?: () => void;
-}
-export declare function BalanceIndicator({ title, maxAmount, token, disabled, maxButton, onMaxButtonClick, size, }: BalanceIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export interface ComplexInputProps {
     /**
      * Props for title wrapper

package/dist/types/components/currency-button/currency-button.d.ts

@@ -1,79 +1,44 @@
-import { NetworkType, TokenData } from '@gearbox-protocol/sdk';
+import { NetworkType } from '@gearbox-protocol/sdk';
+import { VariantProps } from 'class-variance-authority';
+import { TokenDataLike } from '..';
 import type * as React from "react";
-/**
- * Size variants for CurrencyButton
- */
-export type CurrencyButtonSize = "sm" | "md" | "lg" | "old" | "default";
-export interface CurrencyButtonProps {
-    /**
-     * Custom title override (uses token.symbol by default)
-     */
+declare const blockVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CurrencyButtonProps extends VariantProps<typeof blockVariants> {
+    /** Override title (e.g. for tooltip). */
     title?: string;
-    /**
-     * Maximum length for symbol display
-     * @default 12
-     */
+    /** Max length for symbol display. @default 13 */
     maxLength?: number;
-    /**
-     * Token data to display
-     */
-    token?: TokenData;
-    /**
-     * Whether the button is disabled
-     */
+    /** Token to display. */
+    token?: TokenDataLike;
+    /** When true, button does not respond to click. */
     disabled?: boolean;
-    /**
-     * Callback when button is clicked to open token selection
-     * If not provided, button acts as a static display
-     */
+    /** Called when button is clicked to open token select. When set and not disabled, block is clickable. */
     showSelectDialog?: () => void;
-    /**
-     * Size variant
-     * @default "md"
-     */
-    size?: CurrencyButtonSize;
-    /**
-     * Whether the button is in active/selected state
-     */
+    /** When true, expand icon is rotated (e.g. dropdown open). @default false */
     active?: boolean;
-    /**
-     * Chain ID for multi-chain support
-     */
+    /** Chain ID for token/network. */
     chainId?: number;
-    /**
-     * Network type for multi-chain support
-     */
+    /** Network type. */
     network?: NetworkType;
-    /**
-     * Additional CSS class
-     */
+    /** Extra class name. */
     className?: string;
-    /**
-     * Children to render (fallback when no token)
-     */
+    /** Fallback content when no token (e.g. "Select token"). */
     children?: React.ReactNode;
 }
 /**
- * CurrencyButton — a button for selecting/displaying a token
+ * CurrencyButton — token display with optional expand icon and click-to-select.
  *
- * Shows token icon and symbol with an optional expand chevron when selectable.
+ * @usage
+ * Use as the token selector trigger in SmartNumberInput or similar.
+ * When showSelectDialog is set and not disabled, block is clickable and shows expand icon.
  *
  * @example
  * ```tsx
- * // Static display
- * <CurrencyButton token={tokenData} />
- *
- * // With selection
- * <CurrencyButton
- *   token={selectedToken}
- *   showSelectDialog={() => setOpen(true)}
- *   size="md"
- * />
- *
- * // Placeholder
- * <CurrencyButton showSelectDialog={() => setOpen(true)}>
- *   Select token
- * </CurrencyButton>
+ * <CurrencyButton token={token} showSelectDialog={() => setOpen(true)} size="md" />
+ * <CurrencyButton showSelectDialog={() => setOpen(true)}>Select token</CurrencyButton>
  * ```
  */
-export declare function CurrencyButton({ title, maxLength, token, disabled, showSelectDialog, size, active, chainId, network, className, children, }: CurrencyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CurrencyButton({ title, maxLength, token, disabled, showSelectDialog, size: sizeProp, active, chainId, network, className, children, }: CurrencyButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { TokenDataLike } from '.';
+import type * as React from "react";
+/** Size variant matching A (SmartNumberInputSize). */
+export type BalanceIndicatorSize = "sm" | "md";
+export interface BalanceIndicatorProps {
+    /** Label before balance (e.g. "Balance"). */
+    title?: React.ReactNode;
+    /** Token for formatting amount. */
+    token: TokenDataLike | undefined;
+    /** Max amount to display (formatted via TokenTemplate). */
+    maxAmount?: bigint;
+    /** When true, balance row is non-interactive. */
+    disabled?: boolean;
+    /** When true, show max button or clickable amount. @default true */
+    maxButton?: boolean;
+    /** Size variant. */
+    size: BalanceIndicatorSize;
+    /** Called when max is clicked. */
+    onMaxButtonClick: () => void;
+    /** Extra class name. */
+    className?: string;
+}
+/**
+ * BalanceIndicator — balance label + formatted max amount with optional max button.
+ * Subcomponent of SmartNumberInput (matches A BalanceIndicator + Label/MaxWrapper/MaxButton).
+ *
+ * @usage
+ * Renders "Balance: <amount>" with optional inline (sm) or separate (md) max button.
+ *
+ * @example
+ * ```tsx
+ * <BalanceIndicator
+ *   token={token}
+ *   maxAmount={balance}
+ *   size="md"
+ *   maxButton
+ *   onMaxButtonClick={() => setAmount(max)}
+ * />
+ * ```
+ */
+export declare function BalanceIndicator({ title, className, maxAmount, token, disabled, maxButton, onMaxButtonClick, size, }: BalanceIndicatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,2 @@
+export * from './balance-indicator';
 export * from './smart-number-input';

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

@@ -1,133 +1,60 @@
+import { NetworkType } from '@gearbox-protocol/sdk';
 import * as React from "react";
+/** A-matching SmartNumberInput size for layout (styles.tsx). */
+export type SmartNumberInputSize = "sm" | "md";
 /**
  * Token data for legacy API compatibility
  * Uses generic type to accept any TokenData-like object
  */
 export interface TokenDataLike {
     symbol: string;
+    title: string;
     decimals?: number;
 }
 export interface SmartNumberInputProps {
-    /**
-     * Current amount value as string
-     */
+    /** Current amount value as string. */
     amount: string;
-    /**
-     * Token symbol to display (new API)
-     */
-    tokenSymbol?: string;
-    /**
-     * Token icon element (new API)
-     */
-    tokenIcon?: React.ReactNode;
-    /**
-     * Token data object (legacy API from interface)
-     * If provided, tokenSymbol and tokenIcon will be derived from it
-     */
-    token?: TokenDataLike;
-    /**
-     * Label for the input
-     */
+    /** Token data (from interface). */
+    token: TokenDataLike | undefined;
+    /** Label for the input. */
     label?: React.ReactNode;
-    /**
-     * Max balance to display as string (new API)
-     */
-    maxBalance?: string;
-    /**
-     * Max amount as bigint (legacy API from interface)
-     */
+    /** Max button label (e.g. "Balance"). */
+    maxButtonLabel?: React.ReactNode;
+    /** Max amount to display. */
     maxAmount?: bigint;
-    /**
-     * Max amount limit as bigint (legacy API from interface)
-     */
+    /** Max amount limit (capped when max amount exceeds this). */
     maxAmountLimit?: bigint;
-    /**
-     * Max button label
-     */
-    maxButtonLabel?: React.ReactNode;
-    /**
-     * Show max button (new API)
-     */
-    showMaxButton?: boolean;
-    /**
-     * Show max button (legacy API alias)
-     */
-    maxButton?: boolean;
-    /**
-     * Chain ID for network icon (legacy API)
-     */
+    /** Chain ID for network icon. */
     chainId?: number;
-    /**
-     * Network type for display (legacy API)
-     */
-    network?: string;
-    /**
-     * Input is disabled
-     */
+    /** Network type for display. */
+    network?: NetworkType;
+    /** Show max button. @default true */
+    maxButton?: boolean;
+    /** Input is disabled. */
     disabled?: boolean;
-    /**
-     * Input is active/focused
-     */
+    /** Size variant (from interface SmartNumberInputSize). */
+    size?: SmartNumberInputSize;
+    /** When true, currency dropdown is open (expand icon rotated). */
     active?: boolean;
-    /**
-     * Size variant
-     */
-    size?: "sm" | "default" | "md" | "lg";
-    /**
-     * Callback when amount changes (new API)
-     */
-    onAmountChange?: (value: string) => void;
-    /**
-     * Callback when amount changes with bigint (legacy API from interface)
-     * Called with (value: bigint, valueView: string)
-     */
+    /** Callback when amount changes. Called with (value: bigint, valueView: string). */
     onSetAmount?: (value: bigint, valueView: string) => void;
-    /**
-     * Callback when max button is clicked (new API)
-     */
-    onMaxClick?: () => void;
-    /**
-     * Callback to show token select dialog (new API)
-     */
-    onTokenSelect?: () => void;
-    /**
-     * Callback to show token select dialog (legacy API from interface)
-     */
+    /** Callback to show token select dialog. */
     onShowSelectDialog?: () => void;
-    /**
-     * Callback when remove button is clicked
-     */
+    /** Callback when remove button is clicked. */
     onRemove?: () => void;
-    /**
-     * Focus callback
-     */
+    /** Focus callback. */
     onFocus?: () => void;
-    /**
-     * Blur callback
-     */
+    /** Blur callback. */
     onBlur?: () => void;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
- * SmartNumberInput — token amount input with balance display
+ * SmartNumberInput — token amount input with balance display (matches interface).
  *
- * Supports both new API (tokenSymbol, onAmountChange) and legacy API (token, onSetAmount)
+ * @usage
+ * Use for token amount input with balance row and optional token selector.
  *
  * @example
  * ```tsx
- * // New API
- * <SmartNumberInput
- *   amount={amount}
- *   tokenSymbol="ETH"
- *   maxBalance="1.5 ETH"
- *   onAmountChange={setAmount}
- *   onMaxClick={handleMax}
- * />
- *
- * // Legacy API (from interface)
  * <SmartNumberInput
  *   amount={amountView}
  *   token={tokenData}

package/dist/types/components/token-template/token-template.d.ts

@@ -1,14 +1,11 @@
-import { TokenData } from '@gearbox-protocol/sdk';
 import { ParseSmallNumberResult } from '../../utils';
 import { negativeTokenTemplate, tokenTemplateString } from '../../utils/templates';
+import { TokenDataLike } from '..';
 import { FormattedNumberStringProps } from '../formatted-number';
 import type * as React from "react";
-type PartialTokenData = Pick<TokenData, "title" | "decimals"> & {
-    symbol?: string;
-};
 export interface TokenTemplateProps extends Omit<FormattedNumberStringProps, "value"> {
     value: bigint | string | number | undefined;
-    token: PartialTokenData | undefined;
+    token: TokenDataLike | undefined;
     precision?: number;
     maxLength?: number;
     formatter?: (amount: bigint | string | number | undefined, decimals: number, precision?: number) => string | ParseSmallNumberResult;

package/dist/types/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './use-liquidation';
 export * from './use-media-query';
 export * from './use-opened-state';
 export * from './use-previous';
+export * from './use-smart-number-input';

package/dist/types/hooks/use-debounce-call.d.ts

@@ -1,19 +1 @@
-/**
- * Returns a debounced function caller that delays execution
- *
- * @param delay - Delay in milliseconds
- * @returns A function that accepts a callback to be called after the delay
- *
- * @example
- * ```tsx
- * const debouncedCall = useDebounceCall(300);
- *
- * const handleChange = (value: string) => {
- *   debouncedCall(() => {
- *     // This will be called 300ms after the last handleChange
- *     fetchResults(value);
- *   });
- * };
- * ```
- */
-export declare function useDebounceCall(delay: number): (fn: () => void) => void;
+export declare function useDebounceCall(delay?: number): (arg: () => void) => void;

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

@@ -9,7 +9,8 @@ export interface UseHFProps {
     underlyingToken: Address;
     debt: bigint;
     tokensList: Record<Address, TokenData>;
+    allowZeroDebt?: boolean;
 }
-export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, tokensList, }: UseHFProps): {
+export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, allowZeroDebt, tokensList, }: UseHFProps): {
     hf: number;
 };

package/dist/types/hooks/use-media-query.d.ts

@@ -11,6 +11,10 @@
  * ```
  */
 export declare function useMediaQuery(query: string): boolean;
+/**
+ * Checks if the viewport is mobile-sized (max-width: 500px-)
+ */
+export declare const useIsExtraSmall: () => boolean;
 /**
  * Checks if the viewport is mobile-sized (max-width: 768px)
  */

package/dist/types/hooks/use-smart-number-input.d.ts

@@ -0,0 +1 @@
+export declare function useSmartNumberInput(initialAmount?: bigint, initialView?: string): readonly [bigint, string, (value: bigint, valueView: string) => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.41",
+  "version": "1.22.0-next.43",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",