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

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

@@ -1,9 +1,9 @@
 import { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat';
 import { FormattedMessage } from 'react-intl';
+import { LocaleKeys } from '../../locale';
 import type * as React from "react";
 type FormattedMessageProps = React.ComponentProps<typeof FormattedMessage>;
 export type Values = FormattedMessageProps["values"];
-export type LocaleKeys = string;
 export interface FormattedMessageTypedProps {
     messageId: LocaleKeys;
     values?: Values;

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

@@ -1,3 +1,4 @@
+import { default as EnglishLocale } from './locale/en.json';
 export * from './components/accordion';
 export * from './components/alert-badge';
 export * from './components/alert-dialog';
@@ -95,6 +96,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';
@@ -123,6 +125,9 @@ export * from './components/with-title';
 export * from './configs/design-tokens';
 export * from './configs/variants';
 export * from './hooks';
+export type { LocaleKeys } from './locale';
+export * from './locale';
+export { EnglishLocale };
 export * from './utils';
 export * from './utils/a11y';
 export { cn } from './utils/cn';

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

@@ -0,0 +1,68 @@
+declare const _default: {
+  "errors.networkError": "Network error. Can't fetch data",
+  "errors.incorrectAddressError": "Incorrect address. Please, check url",
+  "errors.noOpenedAccountsError": "You have no opened Credit Accounts. Perhaps, you have recently been liquidated? Check notification centre to see more.",
+  "errors.notFound": "Not found",
+  "errors.tooManyRequests": "Too many requests",
+  "errors.incorrectAddress": "Incorrect address",
+  "components.errorMessage.oops": "Oops...",
+
+  "components.alertModal.ok": "Ok",
+
+  "components.footer.privacy": "Privacy Notice",
+  "components.footer.terms": "Terms of Service",
+  "components.footer.disclosure": "Risk Disclosure Statement",
+  "components.footer.legalNotice": "Legal Notice",
+  "components.footer.legal": "Legal Info",
+  "components.footer.gearbox": "Copyright © Gearbox Foundation 2023-2026.",
+  "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
+  "components.footer.version": "Version {value}",
+
+  "components.liquidationPrice.check": "Check Area",
+
+  "components.loading.loading": "Loading",
+  "components.loading.wait": "Please wait...",
+
+  "components.smartNumberInput.balance": "Balance",
+  "components.smartNumberInput.inputTitle": "Token Amount",
+  "components.smartNumberInput.confirm.input": "Input",
+
+  "components.tipWindow.title": "Tip",
+
+  "components.healthFactor.low": "Extremely low! This HF may not cover possible oracle deviations.",
+
+  "components.headCell": "Sort by {value}",
+
+  "components.graphView.noData": "Can't get data for this graph",
+
+  "components.filterBlock.reset": "Reset All",
+
+  "components.APY.tip": "These APYs are derived from the underlying protocols’ APIs and may differ in reality. Check respective protocols for their methodology.",
+
+  "components.creditSessionDetailedLiquidation.graph.legend.point": "Current price",
+  "components.creditSessionDetailedLiquidation.graph.legend.area": "Liquidation Area",
+  "components.creditSessionDetailedLiquidation.graph.tip.hf": "Health Factor",
+  "components.creditSessionDetailedLiquidation.graph.tip.price": "Price",
+  "components.creditSessionDetailedLiquidation.table.seeGraph": "See graph",
+  "components.creditSessionDetailedLiquidation.table.asset": "Asset",
+  "components.creditSessionDetailedLiquidation.table.currentPrice": "Current price",
+  "components.creditSessionDetailedLiquidation.table.modelPrice": "Model price",
+
+  "components.apyParts.features.points": "Points",
+  "components.apyParts.features.incent": "Incent.",
+  "components.apyParts.supplyAPY": "Organic APY",
+  "components.apyParts.title": "APY type",
+  "components.apyParts.supplyAPY.tip": "Yield from lending funds",
+  "components.apyParts.tokenYield": "Intrinsic APY",
+  "components.apyParts.tokenYield.tip": "Yield from holding wstETH",
+  "components.apyParts.extraAPY": "{symbol} Incentive",
+  "components.apyParts.extraAPY.tip": "Calculated at the current rate",
+  "components.apyParts.totalAPY": "Overall APY",
+  "components.apyParts.points": "{symbol} Incentive",
+  "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
+
+  "components.openCopyButtons.copy": "Copy to clipboard"
+}
+;
+
+export default _default;

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

@@ -0,0 +1,10 @@
+import { default as en } from './en.json';
+type LocaleType = typeof en;
+export interface LocaleRegistry {
+    base: LocaleType;
+}
+type RegistryKeys<T> = {
+    [K in keyof T]: keyof T[K];
+}[keyof T];
+export default en;
+export type LocaleKeys = RegistryKeys<LocaleRegistry>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.34",
+  "version": "1.22.0-next.36",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -78,7 +78,7 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
-    "@gearbox-protocol/static": "^1.107.0",
+    "@gearbox-protocol/static": "^1.117.2",
     "lightweight-charts": "^4.1.3",
     "luxon": "^3.5.0",
     "react-infinite-scroll-component": "^6.1.0",
@@ -130,7 +130,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "^12.6.7",
+    "@gearbox-protocol/sdk": "12.6.6",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",

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%;