@gearbox-protocol/permissionless-ui 1.22.0-next.34 → 1.22.0-next.35

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/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/index.d.ts

@@ -98,6 +98,7 @@ export * from './spinner';
 export * from './split-list';
 export * from './stat-badge';
 export * from './status-dot';
+export * from './status-elements';
 export * from './status-triangle';
 export * from './stepper';
 export * from './styled-dropdown';

package/dist/types/components/input/use-icon-slot-widths.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Returns callback refs and measured widths for two icon slot elements.
+ * Use the widths (with fallback) to set input padding so it matches the icon button width.
+ */
+export declare function useIconSlotWidths(): {
+    startSlotWidth: number | null;
+    endSlotWidth: number | null;
+    setStartRef: (el: HTMLButtonElement | null) => void;
+    setEndRef: (el: HTMLButtonElement | null) => void;
+    inputPaddingStyle: (hasStart: boolean, hasEnd: boolean) => React.CSSProperties;
+};

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

@@ -0,0 +1 @@
+export * from './status-elements';

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

@@ -0,0 +1,16 @@
+import { HFZones } from '..';
+export interface AccountHealthDotProps {
+    zone: HFZones;
+    size?: number;
+}
+/**
+ * HealthDot — colored dot indicating health factor zone.
+ */
+export declare function HealthDot({ zone, size }: AccountHealthDotProps): import("react/jsx-runtime").JSX.Element;
+export interface StatusBarsProps {
+    zone: HFZones;
+}
+/**
+ * StatusBars — row of bars indicating health factor zone (1–3 filled).
+ */
+export declare function StatusBars({ zone }: StatusBarsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const textColorVariants: (props?: ({
-    buttonColor?: "empty" | "primaryDashed" | "secondaryDashed" | null | undefined;
+    buttonColor?: "primaryDashed" | "secondaryDashed" | "empty" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const layoutVariants: (props?: ({
     size?: "default" | "sm" | "lg" | "md" | null | undefined;

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

@@ -1,40 +1,19 @@
 import { TokenData } from '@gearbox-protocol/sdk';
+import { ParseSmallNumberResult } from '../../utils';
 import { negativeTokenTemplate, tokenTemplateString } from '../../utils/templates';
+import { FormattedNumberStringProps } from '../formatted-number';
 import type * as React from "react";
 type PartialTokenData = Pick<TokenData, "title" | "decimals"> & {
     symbol?: string;
 };
-export interface TokenTemplateProps {
-    /**
-     * Token amount in base units (bigint, string, number, or undefined)
-     */
+export interface TokenTemplateProps extends Omit<FormattedNumberStringProps, "value"> {
     value: bigint | string | number | undefined;
-    /**
-     * Token data with title/symbol and decimals
-     */
     token: PartialTokenData | undefined;
-    /**
-     * Number of decimal places to display
-     */
     precision?: number;
-    /**
-     * Symbol to use between amount and token name
-     * @default " "
-     */
-    spaceSymbol?: string;
-    /**
-     * Maximum length of the result string (truncates if exceeded)
-     */
     maxLength?: number;
-    /**
-     * Allow displaying negative values with sign
-     * @default false
-     */
-    allowNegative?: boolean;
-    /**
-     * Additional className for styling
-     */
-    className?: string;
+    formatter?: (amount: bigint | string | number | undefined, decimals: number, precision?: number) => string | ParseSmallNumberResult;
+    noFormattedAmountValue?: React.ReactNode;
+    showSymbol?: boolean;
 }
 /**
  * TokenTemplate — component for displaying token amounts with symbol.
@@ -72,5 +51,5 @@ export interface TokenTemplateProps {
  * // Output: "-1.5 ETH"
  * ```
  */
-export declare function TokenTemplate({ value, token, precision, spaceSymbol, maxLength, allowNegative, className, }: TokenTemplateProps): React.ReactElement;
+export declare function TokenTemplate({ value, token, precision, formatter, noFormattedAmountValue, showSymbol, maxLength, ...rest }: TokenTemplateProps): import("react/jsx-runtime").JSX.Element;
 export { tokenTemplateString, negativeTokenTemplate };

package/dist/types/components/with-title/with-title.d.ts

@@ -1,14 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
 import type * as React from "react";
-export type Sizes = "default" | "sm" | "lg";
-export interface WithTitleProps {
+declare const withTitleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface WithTitleProps extends VariantProps<typeof withTitleVariants> {
     /**
      * Title text or element
      */
     title: string | React.ReactNode;
-    /**
-     * Size variant
-     */
-    size?: Sizes;
     /**
      * Children content
      */
@@ -29,3 +28,4 @@ export interface WithTitleProps {
  * ```
  */
 export declare function WithTitle({ title, children, size, className, }: WithTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -95,6 +95,7 @@ export * from './components/spinner';
 export * from './components/split-list';
 export * from './components/stat-badge';
 export * from './components/status-dot';
+export * from './components/status-elements';
 export * from './components/status-triangle';
 export * from './components/stepper';
 export * from './components/styled-dropdown';

package/package.json

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

package/src/styles/base.css

@@ -110,7 +110,7 @@ html.dark {
     --success-hover: 136.58 100% 85.1%;
     --destructive-foreground: 0 0% 100%;
     --warning: 43.12 100% 68.63%;
-    --liquidation: 274 67% 58%;
+    --liquidation: 277.22 74.53% 58.43%;
     --input: 225 6% 19%;
     --ring: 330 100% 59%;
     --gray-10: 225 5.26% 14.9%;