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

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;

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

@@ -1,48 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-export interface HelpTipProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Tooltip content (children)
-     */
+declare const iconColorVariants: (props?: ({
+    iconColor?: "muted" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "foreground" | null | undefined;
+    iconHoverColor?: "muted" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "foreground" | 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). */
     children: React.ReactNode;
-    /**
-     * Max width of the tooltip
-     */
+    /** Maximum width of the tooltip panel. */
     maxWidth?: string;
-    /**
-     * Min width of the tooltip
-     */
+    /** Minimum width of the tooltip panel. */
     minWidth?: string;
-    /**
-     * Delay before showing tooltip (ms)
-     * @default 200
-     */
+    /** Delay before showing tooltip (ms). @default 200 */
     delayShow?: number;
-    /**
-     * Delay before hiding tooltip (ms)
-     * @default 150
-     */
-    delayHide?: number;
-    /**
-     * Tooltip placement
-     * @default "bottom"
-     */
-    side?: "top" | "right" | "bottom" | "left";
-    /**
-     * Size of the help icon
-     * @default 14
-     */
+    /** Tooltip placement relative to the icon. @default "bottom" */
+    placement?: "top" | "right" | "bottom" | "left";
+    /** Size of the help icon in pixels. @default 14 */
     iconSize?: number;
-    /**
-     * Side offset of the tooltip
-     * @default 4
-     */
-    sideOffset?: number;
+    /** Icon color variant (default gray-90). Theme-aware: dark → gray-40, light → gray-80. */
+    iconColor?: "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "muted" | "foreground";
+    /** Icon color on hover (default gray-110). Theme-aware: dark → gray-70, light → gray-100. */
+    iconHoverColor?: "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "muted" | "foreground";
+    /** Icon type: question circle or info. @default "question" */
+    iconVariant?: "question" | "info";
+    /** Called when the icon (trigger) is hovered. */
+    onPointerEnter?: React.PointerEventHandler<HTMLSpanElement>;
 }
 /**
- * HelpTip — tooltip with help icon for displaying contextual help
+ * HelpTip — contextual help trigger: icon opens a tooltip with explanation text.
  *
  * @usage
- * Use HelpTip to provide additional context or explanations:
+ * Use next to labels or terms to show extra context on hover:
  * field hints, term definitions, feature explanations.
  *
  * @example
@@ -57,19 +45,20 @@ export interface HelpTipProps extends React.HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 declare const HelpTip: React.ForwardRefExoticComponent<HelpTipProps & React.RefAttributes<HTMLSpanElement>>;
-/**
- * HelpTipIcon — standalone help icon without tooltip (use with custom tooltip)
- */
-export interface HelpTipIconProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Size of the icon
-     * @default 14
-     */
+export interface HelpTipIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof iconColorVariants> {
+    /** Size of the icon in pixels. @default 14 */
     iconSize?: number;
+    /** Icon type: question circle or info. @default "question" */
+    iconVariant?: "question" | "info";
 }
+/**
+ * HelpTipIcon — standalone help icon (gray-90 default, gray-110 on hover).
+ * Use with a custom tooltip or when you only need the icon.
+ */
 declare const HelpTipIcon: React.ForwardRefExoticComponent<HelpTipIconProps & React.RefAttributes<HTMLSpanElement>>;
 /**
- * TipWrap — wrapper for positioning help tips inline with text
+ * TipWrap — wrapper for spacing the help tip inline with text (e.g. after a label).
+ * Matches A: margin-left 6px, inline-block, line-height 0.
  */
 declare const TipWrap: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 export { HelpTip, HelpTipIcon, TipWrap };

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

@@ -62,6 +62,7 @@ export * from './label';
 export * from './layout';
 export * from './legal-agreement';
 export * from './liquidation';
+export * from './liquidation-price';
 export * from './loader-guard';
 export * from './markdown-viewer';
 export * from './modal';

package/dist/types/components/liquidation-price/index.d.ts

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

package/dist/types/components/liquidation-price/liquidation-price.d.ts

@@ -0,0 +1,41 @@
+import { HFZones } from '..';
+import type * as React from "react";
+export type LiquidationPriceType = {
+    type: "text";
+} | {
+    type: "redirect";
+    to: string;
+} | {
+    type: "graph";
+    props: {
+        onShow: () => void;
+    };
+};
+export interface LiquidationPriceProps {
+    /**
+     * Liquidation price (bigint or number)
+     */
+    liquidationPrice?: bigint | number;
+    /**
+     * How to render when price is 0 / N/A: text, redirect link, or button that opens graph
+     */
+    type?: LiquidationPriceType;
+    /**
+     * Health factor zone for optional dot or bars indicator
+     */
+    hfZone?: HFZones;
+    /**
+     * Indicator style when hfZone is set: dot (right) or bars (left)
+     */
+    zoneType?: "dot" | "bars";
+    /**
+     * Label for "check" link/button when type is redirect or graph (e.g. i18n "Check")
+     */
+    checkLabel?: React.ReactNode;
+    className?: string;
+}
+/**
+ * LiquidationPrice — displays liquidation price with optional HF zone indicator.
+ * Matches interface LiquidationPrice structure.
+ */
+export declare function LiquidationPrice({ liquidationPrice, type, hfZone, zoneType, checkLabel, className, }: LiquidationPriceProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/status-elements/status-elements.d.ts

@@ -8,9 +8,19 @@ export interface AccountHealthDotProps {
  */
 export declare function HealthDot({ zone, size }: AccountHealthDotProps): import("react/jsx-runtime").JSX.Element;
 export interface StatusBarsProps {
+    /** Health factor zone; determines how many bars are filled (1–3) and their color. */
     zone: HFZones;
 }
 /**
- * StatusBars — row of bars indicating health factor zone (1–3 filled).
+ * StatusBars — row of 3 small bars indicating health factor zone (1–3 filled, rest gray).
+ *
+ * @usage
+ * Use next to health factor or TTL to show zone at a glance.
+ *
+ * @example
+ * ```tsx
+ * <StatusBars zone="good" />
+ * <StatusBars zone="bad" />
+ * ```
  */
 export declare function StatusBars({ zone }: StatusBarsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/vertical-indicator/vertical-indicator.d.ts

@@ -1,70 +1,43 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-declare const verticalIndicatorVariants: (props?: ({
-    align?: "center" | "start" | "end" | null | undefined;
+declare const rootVariants: (props?: ({
+    align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof verticalIndicatorVariants> {
-    /**
-     * Label text
-     */
+declare const labelVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const valueVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    weight?: "medium" | "normal" | "unset" | null | undefined;
+    color?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof rootVariants>, VariantProps<typeof labelVariants>, VariantProps<typeof valueVariants> {
+    /** Label text shown on the left */
     label?: React.ReactNode;
-    /**
-     * Description under the label
-     */
+    /** Description under the label (left-aligned) */
     description?: React.ReactNode;
-    /**
-     * Value description under the value
-     */
+    /** Description under the value (right-aligned) */
     valueDescription?: React.ReactNode;
-    /**
-     * Tooltip content for help tip
-     */
+    /** Tooltip content for the help tip icon next to the label */
     tip?: React.ReactNode;
-    /**
-     * Current value
-     */
+    /** Current value displayed on the right */
     value?: React.ReactNode;
-    /**
-     * New value (shows arrow transition from value to valueTo)
-     */
+    /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
     valueTo?: React.ReactNode;
-    /**
-     * Font size variant
-     */
-    size?: "xs" | "sm" | "default" | "unset";
-    /**
-     * Font weight for value
-     */
-    weight?: "normal" | "medium" | "unset";
-    /**
-     * Color variant for value
-     */
-    color?: "default" | "muted" | "success" | "warning" | "alert" | "primary";
-    /**
-     * Callback when tip is hovered
-     */
+    /** Called when the tip icon is hovered */
     onPointerEnterTip?: () => void;
 }
 /**
- * VerticalIndicator — component for displaying labeled values with optional transitions
+ * VerticalIndicator — labeled value display with optional description and value transition
  *
  * @usage
- * Use VerticalIndicator to display key-value pairs:
- * financial metrics, statistics, form field indicators, comparison values.
- *
- * Features:
- * - Label with optional description
- * - Value with optional value description
- * - Value transition display (value → valueTo)
- * - Help tip tooltip
+ * Use for key-value rows: metrics, form indicators, before/after values.
+ * Supports label + description, value + valueDescription, optional help tip,
+ * and value → valueTo transition (first value shown with line-through).
  *
  * @example
  * ```tsx
- * <VerticalIndicator
- *   label="Total Value"
- *   value="$10,000"
- * />
- *
+ * <VerticalIndicator label="Total Value" value="$10,000" />
  * <VerticalIndicator
  *   label="Health Factor"
  *   description="Account health"
@@ -76,4 +49,4 @@ export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDi
  * ```
  */
 declare const VerticalIndicator: React.ForwardRefExoticComponent<VerticalIndicatorProps & React.RefAttributes<HTMLDivElement>>;
-export { VerticalIndicator, verticalIndicatorVariants };
+export { VerticalIndicator, rootVariants as verticalIndicatorVariants };

package/dist/types/index.d.ts

@@ -59,6 +59,7 @@ export * from './components/label';
 export * from './components/layout';
 export * from './components/legal-agreement';
 export * from './components/liquidation';
+export * from './components/liquidation-price';
 export * from './components/loader-guard';
 export * from './components/markdown-viewer';
 export * from './components/modal';

package/package.json

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