@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.4

package/dist/types/components/with-filter-button/with-filter-button.d.ts

@@ -0,0 +1,54 @@
+import { ButtonProps } from '../buttons/button';
+import * as React from "react";
+/**
+ * Props for WithFilterButton component
+ */
+export interface WithFilterButtonProps {
+    /**
+     * Content to display alongside the filter button
+     */
+    children: React.ReactNode;
+    /**
+     * Click handler for the filter button
+     */
+    onClick?: () => void;
+    /**
+     * Reset handler for the filter button
+     */
+    onClearAll?: () => void;
+    /**
+     * Button variant (optional, defaults to "outline")
+     */
+    buttonVariant?: ButtonProps["variant"];
+    /**
+     * Button size (optional, defaults to "default")
+     */
+    buttonSize?: ButtonProps["size"];
+    /**
+     * Custom label for the filter button (optional, defaults to "Filter")
+     */
+    buttonLabel?: string;
+    /**
+     * Whether to show the filter icon (optional, defaults to true)
+     */
+    showIcon?: boolean;
+    /**
+     * Additional class name for the container
+     */
+    className?: string;
+    /**
+     * Additional class name for the button
+     */
+    buttonClassName?: string;
+}
+/**
+ * WithFilterButton component that combines content with a filter button
+ *
+ * @example
+ * ```tsx
+ * <WithFilterButton onClick={() => console.log("Filter clicked")}>
+ *   <h2>Items List</h2>
+ * </WithFilterButton>
+ * ```
+ */
+export declare const WithFilterButton: React.ForwardRefExoticComponent<WithFilterButtonProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-export * from "./design-tokens";
-export { default as tailwindConfig, preset } from "./tailwind.config";
-export { default as tailwindPreset } from "./tailwind-preset";
-export * from "./variants";
+export * from './design-tokens';
+export { default as tailwindConfig, preset } from './tailwind.config';
+export { default as tailwindPreset } from './tailwind-preset';
+export * from './variants';

package/dist/types/configs/tailwind.config.d.ts

@@ -1,5 +1,5 @@
-import type { Config } from "tailwindcss";
-import { preset } from "./tailwind-preset";
+import { Config } from 'tailwindcss';
+import { preset } from './tailwind-preset';
 /**
  * Tailwind configuration for consuming applications
  *

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

@@ -1,7 +1,7 @@
-export * from "./use-controllable-state";
-export * from "./use-debounce";
-export * from "./use-filter";
-export * from "./use-hf";
-export * from "./use-liquidation";
-export * from "./use-media-query";
-export * from "./use-previous";
+export * from './use-controllable-state';
+export * from './use-debounce';
+export * from './use-filter';
+export * from './use-hf';
+export * from './use-liquidation';
+export * from './use-media-query';
+export * from './use-previous';

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

@@ -1,4 +1,4 @@
-import type { FilterRange } from "../types/filter";
+import { FilterRange } from '../types/filter';
 export interface SelectFilterList<T> {
     items: Array<T>;
     label: string;
@@ -6,11 +6,11 @@ export interface SelectFilterList<T> {
 /**
  * Hook for managing range filter state
  */
-export declare function useRangeFilter(): readonly [FilterRange | null, import("react").Dispatch<import("react").SetStateAction<FilterRange | null>>, () => void];
+export declare function useRangeFilter(): readonly [FilterRange | null, import('react').Dispatch<import('react').SetStateAction<FilterRange | null>>, () => void];
 /**
  * Hook for managing select filter state
  */
-export declare function useSelectFilter<T>(initialState?: SelectFilterList<T> | null): readonly [SelectFilterList<T> | null, import("react").Dispatch<import("react").SetStateAction<SelectFilterList<T> | null>>, () => void];
+export declare function useSelectFilter<T>(initialState?: SelectFilterList<T> | null): readonly [SelectFilterList<T> | null, import('react').Dispatch<import('react').SetStateAction<SelectFilterList<T> | null>>, () => void];
 type SortType = "desc" | "asc";
 export interface FilterSortField<T> {
     field: T;

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

@@ -1,5 +1,5 @@
-import type { Asset, CalcQuotaUpdateProps, TokenData } from "@gearbox-protocol/sdk";
-import type { Address } from "viem";
+import { Asset, CalcQuotaUpdateProps, TokenData } from '@gearbox-protocol/sdk';
+import { Address } from 'viem';
 export interface UseHFProps {
     quotas: Record<Address, Asset>;
     quotasInfo: CalcQuotaUpdateProps["quotas"];

package/dist/types/hooks/use-liquidation/index.d.ts

@@ -1,10 +1,10 @@
-import type { Asset, CalcQuotaUpdateProps, TokenData } from "@gearbox-protocol/sdk";
-import type { Cell } from "reactochart/ColorHeatmap";
-import type { Address } from "viem";
-import type { AxisParams, Point } from "./types";
-export type { AxisOrder, AxisParams, Point as LiquidationPoint } from "./types";
-export type { Cell } from "./utils";
-export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MAX, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useAxis, useFixedAssets, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, usePriceInNumber, useWithLiquidationGraphActivePrices, } from "./utils";
+import { Asset, CalcQuotaUpdateProps, TokenData } from '@gearbox-protocol/sdk';
+import { Cell } from 'reactochart/ColorHeatmap';
+import { Address } from 'viem';
+import { AxisParams, Point } from './types';
+export type { AxisOrder, AxisParams, Point as LiquidationPoint } from './types';
+export type { Cell } from './utils';
+export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MAX, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useAxis, useFixedAssets, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, usePriceInNumber, useWithLiquidationGraphActivePrices, } from './utils';
 interface UseLiquidationHeatmapProps {
     xMin: number;
     xMax: number;

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

@@ -1,4 +1,4 @@
-import type { TokenData } from "@gearbox-protocol/sdk";
+import { TokenData } from '@gearbox-protocol/sdk';
 export interface Coordinates {
     x: number;
     y: number;

package/dist/types/hooks/use-liquidation/utils.d.ts

@@ -1,7 +1,7 @@
-import type { Asset, CalcQuotaUpdateProps, TokenData } from "@gearbox-protocol/sdk";
-import type { Cell as ReactochartCell } from "reactochart/ColorHeatmap";
-import type { Address } from "viem";
-import type { AxisOrder, AxisParams, Point } from "./types";
+import { Asset, CalcQuotaUpdateProps, TokenData } from '@gearbox-protocol/sdk';
+import { Cell as ReactochartCell } from 'reactochart/ColorHeatmap';
+import { Address } from 'viem';
+import { AxisOrder, AxisParams, Point } from './types';
 export interface Cell extends ReactochartCell {
     x: number;
     xEnd: number;
@@ -42,6 +42,10 @@ type UsePriceInNumberReturnType = [
 ];
 export declare function usePriceInNumber({ asset, tokensList, prices, }: UsePriceInNumberProps): UsePriceInNumberReturnType;
 export declare function useIsAxisInRelativeUnits(axis: TokenData | undefined, underlying: TokenData | undefined): boolean;
+/**
+ * Format price value for liquidation graph tooltip
+ * Re-exports formatPrice from utils with liquidation-specific defaults
+ */
 export declare function formatAxisTipPrice(v: number): string;
 export declare function formatAxisTipLabel(token: TokenData | undefined, underlyingToken: TokenData | undefined, order: AxisOrder | undefined): string;
 export declare function formatAxisLabel(underlyingPrice: bigint | undefined, isRelative: boolean, order?: AxisOrder): (l?: number) => string;

package/dist/types/index.d.ts

@@ -1,70 +1,70 @@
-export * from "./components/alert-dialog";
-export * from "./components/asset-line";
-export * from "./components/assets-list-cell";
-export * from "./components/assets-ratio";
-export * from "./components/auth";
-export * from "./components/badge";
-export * from "./components/base-link";
-export * from "./components/block-sync";
-export * from "./components/breadcrumbs";
-export * from "./components/buttons";
-export * from "./components/card-grid";
-export * from "./components/cards";
-export * from "./components/checkbox";
-export * from "./components/compound-apy";
-export * from "./components/credit-session-status";
-export * from "./components/description";
-export * from "./components/detailed-page-title";
-export * from "./components/dialog";
-export * from "./components/dropdown-menu";
-export * from "./components/error-message";
-export * from "./components/filter";
-export * from "./components/form";
-export * from "./components/graph";
-export * from "./components/guard";
-export * from "./components/health-factor";
-export * from "./components/help-center-container";
-export * from "./components/hide-on";
-export * from "./components/horizontal-indicator";
-export * from "./components/input";
-export * from "./components/label";
-export * from "./components/layout";
-export * from "./components/liquidation";
-export * from "./components/loader-guard";
-export * from "./components/loading-guard";
-export * from "./components/navbar";
-export * from "./components/navitem";
-export * from "./components/not-found";
-export * from "./components/options-list";
-export * from "./components/page-title";
-export * from "./components/percent-indicator";
-export * from "./components/pool-points-indicator";
-export * from "./components/search-bar";
-export * from "./components/search-line";
-export * from "./components/select";
-export * from "./components/short-string";
-export * from "./components/signatures";
-export * from "./components/skeleton";
-export * from "./components/stat-badge";
-export * from "./components/tab-control";
-export * from "./components/table";
-export * from "./components/tabs";
-export * from "./components/textarea";
-export * from "./components/theme-provider";
-export * from "./components/theme-toggle";
-export * from "./components/token-icon";
-export * from "./components/token-symbol";
-export * from "./components/tooltip";
-export * from "./components/typed-intl";
-export * from "./components/vspace";
-export * from "./components/with-filter-button";
-export * from "./configs/design-tokens";
-export * from "./configs/variants";
-export * from "./hooks";
-export * from "./utils";
-export * from "./utils/a11y";
-export { cn } from "./utils/cn";
-export * from "./utils/copy";
-export * from "./utils/format";
-export { formatMoney, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, } from "./utils/format-money";
-export * from "./utils/templates";
+export * from './components/alert-dialog';
+export * from './components/asset-line';
+export * from './components/assets-list-cell';
+export * from './components/assets-ratio';
+export * from './components/auth';
+export * from './components/badge';
+export * from './components/base-link';
+export * from './components/block-sync';
+export * from './components/breadcrumbs';
+export * from './components/buttons';
+export * from './components/card-grid';
+export * from './components/cards';
+export * from './components/checkbox';
+export * from './components/compound-apy';
+export * from './components/credit-session-status';
+export * from './components/description';
+export * from './components/detailed-page-title';
+export * from './components/dialog';
+export * from './components/dropdown-menu';
+export * from './components/error-message';
+export * from './components/filter';
+export * from './components/form';
+export * from './components/graph';
+export * from './components/guard';
+export * from './components/health-factor';
+export * from './components/help-center-container';
+export * from './components/hide-on';
+export * from './components/horizontal-indicator';
+export * from './components/input';
+export * from './components/label';
+export * from './components/layout';
+export * from './components/liquidation';
+export * from './components/loader-guard';
+export * from './components/navbar';
+export * from './components/navitem';
+export * from './components/not-found';
+export * from './components/options-list';
+export * from './components/page-title';
+export * from './components/percent-indicator';
+export * from './components/pool-points-indicator';
+export * from './components/search-bar';
+export * from './components/search-line';
+export * from './components/select';
+export * from './components/short-string';
+export * from './components/signatures';
+export * from './components/skeleton';
+export * from './components/stat-badge';
+export * from './components/tab-control';
+export * from './components/table';
+export * from './components/tabs';
+export * from './components/textarea';
+export * from './components/theme-provider';
+export * from './components/theme-toggle';
+export * from './components/token-icon';
+export * from './components/token-symbol';
+export * from './components/tooltip';
+export * from './components/trading-view';
+export * from './components/typed-intl';
+export * from './components/vspace';
+export * from './components/with-filter-button';
+export * from './configs/design-tokens';
+export * from './configs/variants';
+export * from './hooks';
+export * from './utils';
+export * from './utils/a11y';
+export { cn } from './utils/cn';
+export * from './utils/copy';
+export * from './utils/format';
+export { formatMoney, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, } from './utils/format-money';
+export * from './utils/templates';

package/dist/types/types/component-props.d.ts

@@ -1,5 +1,5 @@
-import type { VariantProps } from "class-variance-authority";
-import type React from "react";
+import { VariantProps } from 'class-variance-authority';
+import { default as React } from 'react';
 /**
  * Utility for extracting variants from CVA
  */

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

@@ -1,6 +1,6 @@
-export type * from "./component-props";
-export type * from "./filter";
-export type * from "./footer";
-export type * from "./graph";
-export type * from "./help";
-export type * from "./range-item";
+export type * from './component-props';
+export type * from './filter';
+export type * from './footer';
+export type * from './graph';
+export type * from './help';
+export type * from './range-item';

package/dist/types/utils/cn.d.ts

@@ -1,2 +1,2 @@
-import { type ClassValue } from "clsx";
+import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/utils/format-number.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Utility functions for formatting numbers with various options
+ * Used by graph formatters and liquidation components
+ */
+/**
+ * Determines the appropriate number of decimal places based on the scaled value.
+ * If the value is small (< 10), we need more precision to distinguish between values.
+ * Uses 2 decimals for small values to avoid duplicate labels on chart Y-axis.
+ */
+export declare function getAdaptiveDecimals(scaledValue: number): number;
+export interface FormatNumberOptions {
+    /** Use short format with K/M/B suffixes */
+    format?: "full" | "short";
+    /** Minimum fraction digits */
+    minimumFractionDigits?: number;
+    /** Maximum fraction digits */
+    maximumFractionDigits?: number;
+    /** Threshold for exponential notation */
+    maxExponentialThreshold?: number;
+    /** Automatically determine decimals based on magnitude */
+    adaptiveDecimals?: boolean;
+}
+/**
+ * Format a number with proper abbreviations (K, M, B)
+ *
+ * @example
+ * ```ts
+ * formatNumberWithSuffix(1500000, { format: "short" }) // "1.5M"
+ * formatNumberWithSuffix(2500, { format: "short" }) // "2.5K"
+ * formatNumberWithSuffix(500000000, { format: "short", adaptiveDecimals: true }) // "0.50B"
+ * ```
+ */
+export declare function formatNumberWithSuffix(amount: number, options?: FormatNumberOptions): string;
+/**
+ * Convert a number to significant digits string
+ *
+ * @example
+ * ```ts
+ * toSignificantDigits(1234567, 4) // "1234567"
+ * toSignificantDigits(1.234, 2) // "1.23"
+ * ```
+ */
+export declare function toSignificantDigits(value: number, decimals: number): string;
+/**
+ * Check if a value is effectively zero (within epsilon)
+ */
+export declare function isEffectivelyZero(value: number): boolean;
+/**
+ * Check if a value is below display threshold
+ */
+export declare function isBelowDisplayThreshold(value: number): boolean;
+/**
+ * Format very small values with threshold indicator
+ */
+export declare function formatSmallValue(value: number, suffix?: string): string | null;
+/**
+ * Constants for number formatting
+ */
+export declare const FORMAT_CONSTANTS: {
+    readonly EPSILON: 1e-10;
+    readonly MIN_DISPLAY_THRESHOLD: 0.0001;
+    readonly MAX_EXPONENTIAL_THRESHOLD: 100000000000;
+};
+/**
+ * Format price for liquidation graph tooltip
+ * Handles infinity, very small values, and normal values
+ *
+ * @example
+ * ```ts
+ * formatPrice(1500) // "1,500.00"
+ * formatPrice(0.00001) // "0.00001"
+ * formatPrice(Infinity) // "∞"
+ * ```
+ */
+export declare function formatPrice(value: number, decimals?: number, maxSmallDecimals?: number): string;

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

@@ -1,14 +1,15 @@
-export * from "./a11y";
-export * from "./bn-to-input-view";
-export * from "./cn";
-export { cn as default } from "./cn";
-export * from "./colors";
-export * from "./copy";
-export * from "./format";
-export * from "./format-asset-amount";
-export { formatMoney, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, } from "./format-money";
-export * from "./interface";
-export * from "./react";
-export * from "./short-sha";
-export type { SortField as UtilsSortField, SortType } from "./sort";
-export * from "./templates";
+export * from './a11y';
+export * from './bn-to-input-view';
+export * from './cn';
+export { cn as default } from './cn';
+export * from './colors';
+export * from './copy';
+export * from './format';
+export * from './format-asset-amount';
+export { formatMoney, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, } from './format-money';
+export { FORMAT_CONSTANTS, type FormatNumberOptions, formatNumberWithSuffix, formatPrice, getAdaptiveDecimals, isBelowDisplayThreshold, isEffectivelyZero, toSignificantDigits, } from './format-number';
+export * from './interface';
+export * from './react';
+export * from './short-sha';
+export type { SortField as UtilsSortField, SortType } from './sort';
+export * from './templates';

package/dist/types/utils/reactochart-compat.d.ts

@@ -1,13 +1,9 @@
-/**
- * Compatibility layer for reactochart CommonJS modules in ESM context
- * Handles the default export resolution for CommonJS modules
- */
-import ColorHeatmapImport from "reactochart/ColorHeatmap";
-import XAxisImport from "reactochart/XAxis";
-import XLineImport from "reactochart/XLine";
-import XYPlotImport from "reactochart/XYPlot";
-import YAxisImport from "reactochart/YAxis";
-import YLineImport from "reactochart/YLine";
+import { default as ColorHeatmapImport } from 'reactochart/ColorHeatmap';
+import { default as XAxisImport } from 'reactochart/XAxis';
+import { default as XLineImport } from 'reactochart/XLine';
+import { default as XYPlotImport } from 'reactochart/XYPlot';
+import { default as YAxisImport } from 'reactochart/YAxis';
+import { default as YLineImport } from 'reactochart/YLine';
 export declare const ColorHeatmap: typeof ColorHeatmapImport;
 export declare const XAxis: typeof XAxisImport;
 export declare const XLine: typeof XLineImport;

package/dist/types/utils/templates.d.ts

@@ -1,4 +1,4 @@
-import type { TokenData } from "@gearbox-protocol/sdk";
+import { TokenData } from '@gearbox-protocol/sdk';
 import type * as React from "react";
 /**
  * Formats a percentage value and returns it as a React element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -40,12 +40,16 @@
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "vite build",
+    "dev": "vite build --watch",
     "prepare": "husky",
     "check": "biome check --write",
     "check:ci": "biome check --diagnostic-level=error",
-    "typecheck:ci": "tsc --noEmit"
+    "typecheck:ci": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.4",
@@ -102,24 +106,37 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
+    "@chromatic-com/storybook": "^4.1.3",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
     "@gearbox-protocol/sdk": "*",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.0.8",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-onboarding": "^10.0.8",
+    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/addon-vitest": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@tailwindcss/postcss": "^4.1.14",
     "@tanstack/react-query": "^5.64.1",
     "@types/cross-spawn": "^6.0.6",
     "@types/luxon": "^3.4.2",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.14",
+    "@vitest/coverage-v8": "^4.0.14",
     "autoprefixer": "^10.4.21",
+    "buffer": "^6.0.3",
     "connectkit": "^1.9.1",
     "cross-spawn": "^7.0.6",
-    "esbuild-fix-imports-plugin": "^1.0.22",
+    "glob": "^13.0.0",
     "husky": "^9.1.7",
     "intl-messageformat": "^10.5.9",
     "lint-staged": "^16.2.3",
     "next": "15.5.3",
+    "playwright": "^1.57.0",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.0",
     "react": "^19.1.1",
@@ -127,10 +144,14 @@
     "react-intl": "^6.7.4",
     "react-router-dom": "^7.9.6",
     "reactochart": "^6.1.1",
+    "storybook": "^10.0.8",
     "tailwindcss": "^4.1.14",
-    "tsup": "^8.5.0",
     "typescript": "^5.9.3",
     "viem": "^2.39.0",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.14",
     "wagmi": "^2.19.4"
   },
   "commitlint": {