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

package/dist/types/components/alert-badge/alert-badge.d.ts

@@ -5,7 +5,7 @@ declare const alertBadgeVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AlertBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size">, VariantProps<typeof alertBadgeVariants> {
+export interface AlertBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size" | "color">, VariantProps<typeof alertBadgeVariants> {
     /**
      * Custom icon to display instead of default
      */
@@ -14,6 +14,12 @@ export interface AlertBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * Whether to hide the icon
      */
     hideIcon?: boolean;
+    /**
+     * Alias for `variant` — for backward compatibility with legacy
+     * `@gearbox-protocol/interface` AlertBadge API.
+     * If both `color` and `variant` are provided, `variant` takes precedence.
+     */
+    color?: VariantProps<typeof alertBadgeVariants>["variant"];
 }
 /**
  * AlertBadge — prominent badge component for alerts, warnings, and notifications

package/dist/types/components/assets-list-cell/assets-list-cell.d.ts

@@ -1,5 +1,16 @@
+import { default as React } from 'react';
 import { Address } from 'viem';
-export interface AssetsListCellProps {
+type Mode = "default" | "cascade";
+interface CommonOptions {
+    mode?: Mode;
+    showIconTooltip?: boolean;
+    otherTooltip?: React.ReactNode;
+    onOtherClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Single asset cell props (new API)
+ */
+export interface SingleAssetCellProps {
     /**
      * The asset address
      */
@@ -18,7 +29,6 @@ export interface AssetsListCellProps {
     explorerUrl?: string;
     /**
      * Icon symbol to use if it doesn't match the asset symbol
-     * e.g., pool tokens don't have their own symbol and use underlying symbol
      */
     iconSymbol?: string;
     /**
@@ -30,19 +40,73 @@ export interface AssetsListCellProps {
      * Additional CSS classes
      */
     className?: string;
+    balances?: undefined;
+    tokensList?: undefined;
+}
+/**
+ * Multi-asset list cell props (legacy API, compatible with @gearbox-protocol/interface)
+ */
+export interface MultiAssetCellProps {
+    /**
+     * List of asset balances (either objects with token address or plain addresses)
+     */
+    balances: Array<{
+        token: Address;
+    }> | Array<Address>;
+    /**
+     * Token data keyed by address
+     */
+    tokensList: Record<Address, {
+        symbol: string;
+        title?: string;
+    }>;
+    /**
+     * Maximum number of assets to display before showing "+N"
+     * @default 3
+     */
+    maxAssets?: number;
+    /**
+     * Size of token icons
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Display and interaction options
+     */
+    options?: CommonOptions;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    assetAddress?: undefined;
+    symbol?: undefined;
 }
+export type AssetsListCellProps = SingleAssetCellProps | MultiAssetCellProps;
 /**
- * AssetsListCell component for displaying asset information in list views
- * Similar to TableCellAsset but without table cell wrapper, suitable for list/grid layouts
+ * AssetsListCell — displays asset icons in a list/grid layout
+ *
+ * Supports two APIs:
+ * 1. Single asset (new): `<AssetsListCell assetAddress="0x..." symbol="ETH" />`
+ * 2. Multi-asset list (legacy): `<AssetsListCell balances={[...]} tokensList={...} />`
  *
  * @example
  * ```tsx
+ * // Single asset
  * <AssetsListCell
  *   assetAddress="0x1234..."
  *   symbol="ETH"
  *   comment="Ethereum"
- *   explorerUrl="https://etherscan.io"
+ * />
+ *
+ * // Multi-asset list (cascade mode)
+ * <AssetsListCell
+ *   balances={[{ token: "0x1234..." }, { token: "0x5678..." }]}
+ *   tokensList={{ "0x1234...": { symbol: "ETH" }, "0x5678...": { symbol: "USDC" } }}
+ *   maxAssets={5}
+ *   iconSize={24}
+ *   options={{ mode: "cascade" }}
  * />
  * ```
  */
-export declare function AssetsListCell({ assetAddress, symbol, iconSymbol, comment, explorerUrl, iconSize, className, }: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsListCell(props: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/auth/connect-required.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../node_modules/.pnpm/react@19.2.0/node_modules/react';
+import { ReactNode } from 'react';
 import { Address } from 'viem';
 import { TabButtonProps } from '../buttons';
 /**
@@ -29,4 +29,4 @@ export interface ConnectRequiredProps extends TabButtonProps {
     owner?: Address;
     children: ReactNode;
 }
-export declare function ConnectRequired({ children, owner, ...customProps }: ConnectRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').ReactPortal | import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').ReactElement<unknown, string | import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function ConnectRequired({ children, owner, ...customProps }: ConnectRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/components/auth/signin-required.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../node_modules/.pnpm/react@19.2.0/node_modules/react';
+import { ReactNode } from 'react';
 import { Address } from 'viem';
 import { TabButtonProps } from '../buttons';
 /**
@@ -31,4 +31,4 @@ export interface SignInRequiredProps extends TabButtonProps {
     children: ReactNode;
     skipSignIn?: boolean;
 }
-export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').ReactPortal | import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').ReactElement<unknown, string | import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -2,7 +2,7 @@ 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" | "sm" | "lg" | "xs" | null | undefined;
+    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | null | undefined;
     width?: "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**

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

@@ -1,4 +1,4 @@
-import { default as React } from '../../../../node_modules/.pnpm/react@19.2.0/node_modules/react';
+import * as React from "react";
 export interface NavigationButtonProps {
     href: string;
     text: string;

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

@@ -12,11 +12,11 @@ import * as React from "react";
  * ```
  */
 declare const cardGridVariants: (props?: ({
-    columns?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
-    columnsLg?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
-    columnsMd?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
-    columnsSm?: 2 | 1 | 3 | 5 | 4 | 6 | null | undefined;
-    gap?: "none" | "sm" | "lg" | "md" | "xl" | null | undefined;
+    columns?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    columnsLg?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    columnsMd?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    columnsSm?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xl" | "md" | null | undefined;
     justifyItemContent?: "center" | "start" | "end" | "stretch" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface CardGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardGridVariants> {

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

@@ -1 +1,3 @@
 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

@@ -1,5 +1,5 @@
-import { default as React } from '../../../../node_modules/.pnpm/react@19.2.0/node_modules/react';
 import { ButtonProps } from '../../buttons/button';
+import * as React from "react";
 type ButtonWidth = "compact" | "wide";
 type ButtonColors = "primary" | "outlined" | "neutral" | "white" | "success";
 type ButtonSize = "sm" | "md" | "lg";

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

@@ -0,0 +1 @@
+export * from './styled-dialog-container';

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

@@ -0,0 +1,13 @@
+import { DialogContainerProps } from '../../dialog/dialog-container';
+import * as React from "react";
+type PaddingSize = "none" | "md" | "lg" | "xl";
+export interface StyledDialogContainerProps extends Omit<DialogContainerProps, "padding" | "colorTheme" | "maxWidth"> {
+    $padding?: PaddingSize;
+    $width?: string;
+    $minWidth?: string;
+    $maxWidth?: string;
+    $minHeight?: string;
+    $colorTheme?: DialogContainerProps["colorTheme"];
+}
+declare const StyledDialogContainer: React.ForwardRefExoticComponent<StyledDialogContainerProps & React.RefAttributes<HTMLDivElement>>;
+export { StyledDialogContainer };

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

@@ -0,0 +1 @@
+export * from './styled-rounded-image';

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

@@ -0,0 +1,9 @@
+import { RoundedImageProps } from '../../rounded-image/rounded-image';
+import * as React from "react";
+export interface StyledRoundedImageProps extends Omit<RoundedImageProps, "size" | "rounded" | "defaultIcon"> {
+    $size: number;
+    $rounded?: boolean;
+    $defaultIcon?: string;
+}
+declare const StyledRoundedImage: React.ForwardRefExoticComponent<StyledRoundedImageProps & React.RefAttributes<HTMLImageElement>>;
+export { StyledRoundedImage };

package/dist/types/components/colored-text/colored-text.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const coloredTextVariants: (props?: ({
     color?: "inherit" | "default" | "muted" | "success" | "warning" | "primary" | "alert" | null | undefined;
-    size?: "default" | "sm" | "lg" | "xs" | "unset" | "xl" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | "unset" | null | undefined;
     weight?: "medium" | "normal" | "semibold" | "bold" | "unset" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ColoredTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof coloredTextVariants> {

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

@@ -1,9 +1,11 @@
 import { TokenData } from '@gearbox-protocol/sdk';
+import { InputProps } from '../input';
 import { WithTitleProps } from '../with-title';
 import type * as React from "react";
+export type BalanceIndicatorSize = "sm" | "md";
 export interface BalanceIndicatorProps {
     /**
-     * Title for max button
+     * Label before balance (e.g. "Balance")
      */
     title?: React.ReactNode;
     /**
@@ -15,39 +17,33 @@ export interface BalanceIndicatorProps {
      */
     token: TokenData | undefined;
     /**
-     * Size variant
+     * Size variant (matches interface SmartNumberInputSize)
      */
-    size?: "sm" | "md" | "lg";
+    size?: BalanceIndicatorSize;
     /**
      * Whether the indicator is disabled
      */
     disabled?: boolean;
     /**
-     * Whether to show max button
+     * Whether to show max button / clickable amount
      */
     maxButton?: boolean;
     /**
-     * Callback when max button is clicked
+     * 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
      */
     titleProps: WithTitleProps;
     /**
-     * Props for input element
+     * Props for input element (matches interface: InputProps with onChange overridden)
      */
-    inputProps: Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> & {
-        /**
-         * Callback when value changes (receives bigint and string view)
-         */
+    inputProps: Omit<InputProps, "onChange" | "endingIcon"> & {
         onChange?: (value: bigint, valueView: string) => void;
-        /**
-         * Input size variant
-         */
-        inputSize?: "sm" | "lg" | "default";
     };
     /**
      * Props for balance indicator

package/dist/types/components/compound-apy/compound-apy.d.ts

@@ -1,5 +1,5 @@
 import { TokenData } from '@gearbox-protocol/sdk';
-import { LocaleKeys } from '../typed-intl';
+import { LocaleKeys } from '../../locale';
 export interface PoolBaseAPY {
     type: "supplyAPY" | "tokenYield";
     apy: number;

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

@@ -1,8 +1,9 @@
-import type * as React from "react";
+import { TypographyProps } from '../typography/typography';
+import * as React from "react";
 /**
  * DescriptionProps — props for Description component.
  */
-export interface DescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface DescriptionProps extends Omit<TypographyProps, "variant" | "color"> {
 }
 /**
  * Description — component for displaying secondary/muted text.
@@ -23,4 +24,5 @@ export interface DescriptionProps extends React.HTMLAttributes<HTMLSpanElement>
  * <Description className="text-xs">Small description</Description>
  * ```
  */
-export declare function Description({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLDivElement>>;
+export { Description };

package/dist/types/components/dialog/dialog-container.d.ts

@@ -1,7 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-export interface DialogContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-    padding?: boolean;
+declare const dialogContainerVariants: (props?: ({
+    padding?: boolean | "xl" | "md" | null | undefined;
+    colorTheme?: "default" | "box" | "modal" | "transparent" | null | undefined;
+    maxWidth?: "full" | "sm" | "lg" | "xl" | "2xl" | "md" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DialogContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogContainerVariants> {
 }
 /**
  * DialogContainer component for responsive content width within dialogs

package/dist/types/components/dialog/dialog-modal-container.d.ts

@@ -1,9 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import { ModalProps } from '../modal/modal';
 import { DialogContainerProps } from './dialog-container';
-import { DialogModalProps } from './dialog-modal';
 import * as React from "react";
+declare const dialogModalContainerVariants: (props?: ({
+    width?: "full" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface DialogModalContainerProps {
-    modalProps: Omit<DialogModalProps, "ref" | " children">;
-    dialogProps?: Omit<DialogContainerProps, "ref" | "children">;
+    show: boolean;
+    onClickOutside?: () => void;
+    modal?: Omit<ModalProps, "ref" | " children" | "show" | "onClickOutside">;
+    dialog?: Omit<DialogContainerProps, "ref" | "children"> & VariantProps<typeof dialogModalContainerVariants>;
 }
 /**
  * DialogModalContainer component for responsive content width within dialogs

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

@@ -1,5 +1,5 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-declare const Dialog: import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').FC<DialogPrimitive.DialogProps>;
-declare const DialogTrigger: import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: import('../../../node_modules/.pnpm/react@19.2.0/node_modules/react').FC<DialogPrimitive.DialogPortalProps>;
+declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
 export { Dialog, DialogPortal, DialogTrigger };

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

@@ -1,3 +1,4 @@
+export * from '../modal/modal';
 export * from './dialog';
 export * from './dialog-container';
 export * from './dialog-content';
@@ -5,7 +6,6 @@ export * from './dialog-description';
 export * from './dialog-footer';
 export * from './dialog-form';
 export * from './dialog-header';
-export * from './dialog-modal';
 export * from './dialog-modal-container';
 export * from './dialog-overlay';
 export * from './dialog-title';

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

@@ -1,55 +1,40 @@
-export interface EditInputProps {
+import { VariantProps } from 'class-variance-authority';
+import { Input } from '../input';
+import { TextButton } from '../text-button';
+import * as React from "react";
+declare const editLabelHeightVariants: (props?: ({
+    labelHeight?: "xs" | "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Variants = VariantProps<typeof editLabelHeightVariants>;
+export interface EditInputProps extends Omit<React.ComponentProps<typeof Input>, "onChange" | "label" | "size"> {
     /**
-     * Current value
+     * Label shown when not editing (clickable to enter edit mode)
      */
-    value?: string;
+    label: React.ReactNode;
     /**
-     * Callback when value changes
+     * Callback when value changes (matches interface: receives event)
      */
-    onChange?: (value: string) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Placeholder text
+     * Callback when submit is triggered (Enter or ending icon click)
      */
-    placeholder?: string;
+    onSubmit: () => void;
     /**
-     * Whether the input is disabled
+     * Callback when edit mode is toggled
      */
-    disabled?: boolean;
+    onEditModeChange?: (active: boolean) => void;
     /**
-     * Callback when input loses focus
+     * Props passed to the TextButton used in view mode
      */
-    onBlur?: () => void;
+    textButtonProps?: Partial<React.ComponentProps<typeof TextButton>>;
     /**
-     * Callback when enter is pressed
+     * Size variant (matches interface InputSize)
      */
-    onSubmit?: () => void;
-    /**
-     * Callback when edit mode changes
-     */
-    onEditModeChange?: (isEditing: boolean) => void;
-    /**
-     * Label for the input
-     */
-    label?: string;
-    /**
-     * Size variant
-     */
-    inputSize?: "xs" | "sm" | "md" | "lg";
-    /**
-     * Additional CSS class
-     */
-    className?: string;
+    inputSize?: NonNullable<Variants["labelHeight"]>;
 }
 /**
- * EditInput — an inline editable input field
- *
- * @example
- * ```tsx
- * <EditInput
- *   value={name}
- *   onChange={setName}
- *   placeholder="Enter name"
- * />
- * ```
+ * EditInput — inline editable field: view mode (TextButton + label) or edit mode (Input + arrow submit).
+ * Matches interface EditInput structure and styles.
  */
-export declare function EditInput({ value, onChange, placeholder, disabled, onBlur, onSubmit, onEditModeChange, label, inputSize, className, }: EditInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditInput({ label, value, onChange, onSubmit, onEditModeChange, textButtonProps, inputSize, colorTheme, placeholder, inputMode, autoComplete, autoCorrect, type, spellCheck, className, onKeyDown: onKeyDownProp, ...restProps }: EditInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/fadeout-loading/fadeout-loading.d.ts

@@ -1,24 +1,16 @@
 import * as React from "react";
 export interface FadeoutLoadingProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Whether the content is in loading state
-     */
+    /** When true, content is shown at 50% opacity (loading state). */
     loading?: boolean;
-    /**
-     * Duration of the fade transition in milliseconds
-     * @default 150
-     */
+    /** Transition duration in ms; when set, overrides default 100ms (A uses 100ms). */
     duration?: number;
 }
 /**
- * FadeoutLoading — wrapper component that fades content when loading
+ * FadeoutLoading — wrapper that fades content when loading is true.
  *
  * @usage
- * Use FadeoutLoading to indicate loading state by fading content:
- * data refresh indicators, optimistic update feedback, subtle loading states.
- *
- * The component reduces opacity when loading is true, providing visual feedback
- * without completely hiding the content.
+ * Use to indicate loading without hiding content: data refresh, optimistic updates.
+ * Opacity 1 by default; 0.5 when loading; transition 100ms ease-in-out (matches A).
  *
  * @example
  * ```tsx

package/dist/types/components/formatted-number/formatted-number.d.ts

@@ -1,11 +1,21 @@
+import { ParseSmallNumberResult } from '../../utils';
 import type * as React from "react";
 export interface FormattedNumberStringProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
-     * The value to display
+     * Maximum length for decimal part in tooltip (trimmed)
      */
-    value: string | number;
+    decimalPartLength?: number;
+    /**
+     * When repeat (leading zeros in decimal) exceeds this, show "0" + repeat count
+     */
+    hideZerosIfMore?: number;
+    /**
+     * The value to display (string, or parsed small number result)
+     */
+    value: string | ParseSmallNumberResult | undefined;
 }
 /**
- * FormattedNumberString — displays a number with tabular figures for alignment
+ * FormattedNumberString — displays a number with optional compact decimal (zeros as repeat count) and tooltip with full value.
+ * Matches interface FormattedNumber structure and styles.
  */
-export declare function FormattedNumberString({ value, className, ...props }: FormattedNumberStringProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormattedNumberString({ value, decimalPartLength, hideZerosIfMore, className, ...props }: FormattedNumberStringProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/health-factor/health-factor.d.ts

@@ -8,52 +8,33 @@ export declare const BAD_HF = 11000;
  * @returns The health factor zone or undefined
  */
 export declare const getHFZones: (hf: number | bigint | undefined) => HFZones | undefined;
-export interface HealthFactorProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The health factor value in basis points
-     * For example: 15000 for health factor 1.5, 500 for health factor 0.05
-     * (SDK always returns health factor in basis points: 10000 = 1.0)
-     */
+export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Health factor value in basis points (e.g. 15000 = 1.5, 10000 = 1.0). */
     value: number | bigint;
-    /**
-     * Debt amount in base units (bigint)
-     * If debt is 0, component will display "N/A"
-     */
+    /** Debt in base units; when 0n, display shows "N/A". */
     debt?: bigint;
-    /**
-     * Number of decimal places to show
-     * @default 3
-     */
+    /** Decimal places for the displayed value. @default 3 */
     decimals?: number;
-    /**
-     * Pre-computed zone (optional). If not provided, will be calculated from value
-     */
+    /** Pre-computed zone; if not set, derived from value. */
     zone?: HFZones | null;
     /**
-     * Show color indicator based on health factor zone
-     * @default true
+     * How to indicate zone: "color" (text color only) or "bars" (StatusBars before value).
+     * @default "color"
      */
-    showColor?: boolean;
+    zoneType?: "color" | "bars";
 }
 /**
- * HealthFactor component for displaying health factor values with zone-based color coding
+ * HealthFactor — displays health factor value with optional zone color or StatusBars.
  *
- * Health factor zones:
- * - good: >= 1.5 (15000 basis points) - Green
- * - medium: 1.1 - 1.5 (11000-15000) - Yellow
- * - bad: 1.05 - 1.1 (10500-11000) - Orange
- * - critical: 1.0 - 1.05 (10000-10500) - Red
- * - liquidation: < 1.0 (< 10000) - Red
+ * @usage
+ * Use for account/collateral health: value in basis points, zero debt shows "N/A".
+ * zoneType "color" colors the text; zoneType "bars" shows StatusBars (and optional color).
  *
  * @example
  * ```tsx
- * // Health factor in basis points (SDK format)
- * <HealthFactor value={15000} debt={1000000n} />  // Shows "1.500" in green
- * <HealthFactor value={12000} debt={1000000n} decimals={2} />  // Shows "1.20" in yellow
- * <HealthFactor value={500} debt={1000000n} />  // Shows "0.050" in red
- *
- * // Zero debt shows N/A
- * <HealthFactor value={15000} debt={0n} />  // Shows "N/A"
+ * <HealthFactor value={15000} debt={1000000n} />
+ * <HealthFactor value={12000} debt={1000000n} zoneType="bars" zone="medium" />
+ * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```
  */
-export declare function HealthFactor({ value, debt, decimals, zone, showColor, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;
+export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;