@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/types/configs/tailwind-preset.d.ts

@@ -0,0 +1,126 @@
+/**
+ * Tailwind CSS preset for @gearbox-protocol/permissionless-ui
+ *
+ * This preset includes:
+ * - Design tokens (colors, spacing, typography, etc.)
+ * - Custom animations
+ * - Safelist for dynamic classes (Grid, Col components)
+ * - Content paths for class generation
+ *
+ * @example
+ * ```ts
+ * // tailwind.config.ts
+ * import { preset } from '@gearbox-protocol/permissionless-ui/preset';
+ *
+ * export default {
+ *   presets: [preset],
+ *   content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ * };
+ * ```
+ */
+export declare const preset: {
+    darkMode: "class";
+    safelist: {
+        pattern: RegExp;
+    }[];
+    theme: {
+        extend: {
+            colors: {
+                background: string;
+                foreground: string;
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                success: string;
+                warning: string;
+                liquidation: string;
+                border: string;
+                input: string;
+                ring: string;
+                "text-secondary": string;
+                "dropdown-dark-button": string;
+                white: string;
+                black: string;
+                gray: {
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    100: string;
+                    110: string;
+                };
+                chart: {
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
+                    "5": string;
+                };
+            };
+            fontFamily: {
+                sans: string[];
+            };
+            borderRadius: {
+                lg: string;
+                md: string;
+                sm: string;
+            };
+            keyframes: {
+                "accordion-down": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+                "accordion-up": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            animation: {
+                "accordion-down": string;
+                "accordion-up": string;
+            };
+        };
+    };
+    plugins: {
+        handler: () => void;
+    }[];
+};
+export default preset;

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

@@ -1,3 +1,32 @@
 import type { Config } from "tailwindcss";
+import { preset } from "./tailwind-preset";
+/**
+ * Tailwind configuration for consuming applications
+ *
+ * This configuration can be extended in your project's tailwind.config.ts
+ *
+ * @example
+ * ```ts
+ * // Option 1: Use as preset (recommended)
+ * import { preset } from '@gearbox-protocol/permissionless-ui/preset';
+ *
+ * export default {
+ *   presets: [preset],
+ *   content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ * };
+ *
+ * // Option 2: Extend this config
+ * import tailwindConfig from '@gearbox-protocol/permissionless-ui/tailwind';
+ *
+ * export default {
+ *   ...tailwindConfig,
+ *   content: [
+ *     './src/**\/*.{js,ts,jsx,tsx}',
+ *     './node_modules/@gearbox-protocol/permissionless-ui/dist/**\/*.js',
+ *   ],
+ * };
+ * ```
+ */
 declare const tailwindConfig: Config;
 export default tailwindConfig;
+export { preset };

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

@@ -0,0 +1,28 @@
+/**
+ * Centralized variant definitions for reuse across components
+ */
+export declare const sizeVariants: {
+    readonly xs: "text-xs";
+    readonly sm: "text-sm";
+    readonly default: "text-sm";
+    readonly lg: "text-base";
+    readonly xl: "text-lg";
+};
+export declare const stateVariants: {
+    readonly default: "";
+    readonly error: "border-red-500 text-red-500 focus-visible:ring-red-500";
+    readonly success: "border-green-500 text-green-500 focus-visible:ring-green-500";
+    readonly warning: "border-yellow-500 text-yellow-500 focus-visible:ring-yellow-500";
+};
+export declare const paddingVariants: {
+    readonly none: "p-0";
+    readonly xs: "p-2";
+    readonly sm: "p-4";
+    readonly default: "p-6";
+    readonly lg: "p-8";
+    readonly xl: "p-10";
+};
+export declare const interactiveVariants: {
+    readonly default: "transition-colors duration-200";
+    readonly disabled: "opacity-50 cursor-not-allowed pointer-events-none";
+};

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

@@ -0,0 +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";

package/dist/types/hooks/use-controllable-state.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Hook for managing controlled/uncontrolled component state
+ *
+ * This allows components to work both in controlled mode (when value is provided)
+ * and uncontrolled mode (when only defaultValue is provided)
+ *
+ * @example
+ * ```tsx
+ * function MyInput({ value, defaultValue, onChange }) {
+ *   const [internalValue, setInternalValue] = useControllableState({
+ *     value,
+ *     defaultValue,
+ *     onChange
+ *   });
+ *
+ *   return <input value={internalValue} onChange={e => setInternalValue(e.target.value)} />;
+ * }
+ * ```
+ */
+export declare function useControllableState<T>({ value: controlledValue, defaultValue, onChange, }: {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+}): readonly [T | undefined, (nextValue: T | ((prev: T) => T)) => void];

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

@@ -0,0 +1,31 @@
+type Task<T> = (arg: T) => void;
+/**
+ * Hook to debounce a function call
+ *
+ * @example
+ * ```tsx
+ * const handleSearch = (query: string) => {
+ *   console.log('Searching for:', query);
+ * };
+ * const debouncedSearch = useDebounce(handleSearch, 500);
+ *
+ * // Usage:
+ * debouncedSearch('query');
+ * ```
+ */
+export declare function useDebounce<T>(call: Task<T>, delay?: number): (arg: T) => void;
+/**
+ * Hook to debounce any function call
+ *
+ * @example
+ * ```tsx
+ * const debounceCall = useDebounceCall(500);
+ *
+ * // Usage:
+ * debounceCall(() => {
+ *   console.log('Debounced call');
+ * });
+ * ```
+ */
+export declare function useDebounceCall(delay?: number): (call: () => void) => void;
+export {};

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

@@ -0,0 +1,37 @@
+import type { FilterRange } from "../types/filter";
+export interface SelectFilterList<T> {
+    items: Array<T>;
+    label: string;
+}
+/**
+ * Hook for managing range filter state
+ */
+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];
+type SortType = "desc" | "asc";
+export interface FilterSortField<T> {
+    field: T;
+    sort: SortType;
+}
+export type SortField<T> = FilterSortField<T>;
+export declare const getSortForField: <T>(s: T, state: FilterSortField<T> | null) => SortType | undefined;
+export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Hook for managing sort state
+ */
+export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+interface GeneralRangeFilterState {
+    state: FilterRange | null;
+}
+interface GeneralSelectFilterState<T> {
+    state: SelectFilterList<T> | null;
+}
+/**
+ * Hook to check if any/all filters are selected
+ * Returns [anySelected, allSelected]
+ */
+export declare function useFilterAllSelected(filterState: Record<string, GeneralRangeFilterState | GeneralSelectFilterState<any>>): [boolean, boolean];
+export type { FilterRange };

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

@@ -0,0 +1,15 @@
+import type { Asset, CalcQuotaUpdateProps, TokenData } from "@gearbox-protocol/sdk";
+import type { Address } from "viem";
+export interface UseHFProps {
+    quotas: Record<Address, Asset>;
+    quotasInfo: CalcQuotaUpdateProps["quotas"];
+    assets: Array<Asset>;
+    prices: Record<Address, bigint>;
+    liquidationThresholds: Record<Address, bigint>;
+    underlyingToken: Address;
+    debt: bigint;
+    tokensList: Record<Address, TokenData>;
+}
+export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, tokensList, }: UseHFProps): {
+    hf: number;
+};

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

@@ -0,0 +1,52 @@
+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";
+interface UseLiquidationHeatmapProps {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    xLabel?: TokenData;
+    yLabel?: TokenData;
+    assets: Array<Asset>;
+    quotas: Record<Address, Asset>;
+    prices: Record<Address, bigint>;
+    liquidationThresholds: Record<Address, bigint>;
+    underlyingTokenAddress: Address;
+    debt: bigint;
+    quotasInfo: CalcQuotaUpdateProps["quotas"];
+    tokensList: Record<Address, TokenData>;
+}
+export declare function useLiquidationHeatmap({ xMin, xMax, yMin, yMax, xLabel, yLabel, assets, quotas, prices, liquidationThresholds, quotasInfo, underlyingTokenAddress, debt, tokensList, }: UseLiquidationHeatmapProps): Cell[];
+interface UseEditPriceManuallyProps {
+    prices: Record<Address, bigint>;
+}
+export declare function useEditPriceManually({ prices }: UseEditPriceManuallyProps): readonly [{}, (newPrice: bigint, token: Address) => void];
+export interface UseLiquidationGraphParamsReturnType {
+    xAxis?: AxisParams;
+    yAxis?: AxisParams;
+    currentPoint: Point;
+    fixedBalances: Array<Asset>;
+}
+export interface UseLiquidationGraphParamsProps {
+    assets: Array<Asset>;
+    liquidationThresholds: CalcQuotaUpdateProps["liquidationThresholds"];
+    quotas: Record<Address, Asset>;
+    quotasInfo: CalcQuotaUpdateProps["quotas"];
+    tokensList: Record<Address, TokenData>;
+    prices: Record<Address, bigint>;
+}
+/**
+ * Props type for Credit Session Details Liquidation Dialog
+ * Extends UseLiquidationGraphParamsProps with additional fields
+ */
+export type CreditSessionDetailsLiquidationDialogProps = Omit<UseLiquidationGraphParamsProps, "assets"> & {
+    assetsSorted: Array<Asset>;
+    underlyingToken: Address;
+    debt: bigint;
+};
+export declare function useLiquidationGraphParams({ assets, liquidationThresholds, quotas, quotasInfo, tokensList, prices, }: UseLiquidationGraphParamsProps): UseLiquidationGraphParamsReturnType;

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

@@ -0,0 +1,16 @@
+import type { TokenData } from "@gearbox-protocol/sdk";
+export interface Coordinates {
+    x: number;
+    y: number;
+}
+export type AxisOrder = "reverse" | "straight";
+export interface AxisParams {
+    min: number;
+    max: number;
+    minHf: number;
+    label: TokenData;
+    order: AxisOrder;
+    nextOrder: () => void;
+}
+export type Point = [x: number, y: number];
+export type LiquidationPoint = Point;

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

@@ -0,0 +1,66 @@
+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";
+export interface Cell extends ReactochartCell {
+    x: number;
+    xEnd: number;
+    y: number;
+    yEnd: number;
+    value: number;
+}
+export declare const CELL_HOVERED = "rct-chart__heatmap-cell--hovered";
+export declare const CELL_CURRENT = "rct-chart__heatmap-cell--current";
+export declare const CELL_GOOD = "rct-chart__heatmap-cell--good";
+export declare const CELL_OK = "rct-chart__heatmap-cell--ok";
+export declare const CELL_BAD = "rct-chart__heatmap-cell--bad";
+export declare const CELL_LIQUIDATION = "rct-chart__heatmap-cell--liquidation";
+interface UseAxisProps {
+    currentPrice: number | undefined;
+    token: TokenData | undefined;
+}
+export declare const DEFAULT_AXIS_MIN = 0;
+export declare const DEFAULT_AXIS_MAX = 1;
+export declare function useAxis({ token, currentPrice, }: UseAxisProps): AxisParams | undefined;
+interface UseFixedAssetsProps {
+    assets: Array<Asset>;
+    liquidationThresholds: CalcQuotaUpdateProps["liquidationThresholds"];
+    quotas: Record<Address, Asset>;
+    quotasInfo: CalcQuotaUpdateProps["quotas"];
+    at?: number;
+    length?: number;
+}
+export declare function useFixedAssets({ assets, liquidationThresholds, quotas, quotasInfo, at, length, }: UseFixedAssetsProps): [Asset[], Asset[]];
+interface UsePriceInNumberProps {
+    asset: Asset | undefined;
+    tokensList: Record<Address, TokenData>;
+    prices: Record<Address, bigint>;
+}
+type UsePriceInNumberReturnType = [
+    price: number | undefined,
+    token: TokenData | undefined
+];
+export declare function usePriceInNumber({ asset, tokensList, prices, }: UsePriceInNumberProps): UsePriceInNumberReturnType;
+export declare function useIsAxisInRelativeUnits(axis: TokenData | undefined, underlying: TokenData | undefined): boolean;
+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;
+export declare function useLiquidationGraphActivePrice(activePoint: number, underlyingPrice: bigint | undefined, isRelative: boolean, order?: AxisOrder): number;
+export declare function useLiquidationGraphCurrentActiveValue(): {
+    activePoint: [number | undefined, number | undefined] | null;
+    handleMouseMove: ({ xValue, yValue, }: {
+        xValue: number | null;
+        yValue: number | null;
+    }) => void;
+    handleMouseLeave: () => void;
+};
+interface UseWithActivePricesProps {
+    xLabel: TokenData | undefined;
+    yLabel: TokenData | undefined;
+    activePoint: [number | undefined, number | undefined] | null;
+    prices: Record<Address, bigint>;
+}
+export declare function useWithLiquidationGraphActivePrices({ xLabel, yLabel, activePoint, prices, }: UseWithActivePricesProps): {};
+export declare function isPointInCell(p: Point, c: Cell): boolean;
+export declare function getCellClass(p: Cell, currentPoint: Point, activePointX?: number, activePointY?: number): string;
+export {};

package/dist/types/hooks/use-media-query.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Hook for responsive media queries
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useMediaQuery("(max-width: 768px)");
+ *
+ *   return <div>{isMobile ? "Mobile view" : "Desktop view"}</div>;
+ * }
+ * ```
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * Checks if the viewport is mobile-sized (max-width: 768px)
+ */
+export declare const useIsMobile: () => boolean;
+/**
+ * Checks if the viewport is tablet-sized (768px - 1024px)
+ */
+export declare const useIsTablet: () => boolean;
+/**
+ * Checks if the viewport is desktop-sized (min-width: 1024px)
+ */
+export declare const useIsDesktop: () => boolean;

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

@@ -0,0 +1,10 @@
+/**
+ * Hook to store the previous value
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePrevious(count);
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/types/index.d.ts

@@ -1,2 +1,71 @@
-export * from "./components/index";
-export * from "./utils/index";
+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/markdown-viewer";
+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";

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

@@ -0,0 +1,16 @@
+import type { VariantProps } from "class-variance-authority";
+import type React from "react";
+/**
+ * Utility for extracting variants from CVA
+ */
+export type ExtractVariants<T> = T extends (...args: any[]) => any ? VariantProps<T> : never;
+/**
+ * Common type for components with variants
+ */
+export type ComponentWithVariants<TElement extends React.ElementType, TVariants> = React.ComponentPropsWithoutRef<TElement> & TVariants;
+/**
+ * Type for polymorphic components that can render as different elements
+ */
+export type PolymorphicComponentProps<TElement extends React.ElementType, TProps = {}> = TProps & Omit<React.ComponentPropsWithoutRef<TElement>, keyof TProps> & {
+    as?: TElement;
+};

package/dist/types/types/filter.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Types for filter components
+ */
+export interface RangeNumber {
+    balance: bigint;
+    balanceView: string;
+}
+export type FilterRange = readonly [RangeNumber, RangeNumber];

package/dist/types/types/footer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Types for Footer component
+ */
+export interface LastSyncBlock {
+    block: bigint;
+    localTimestamp: number;
+}
+export interface BlockByChain {
+    [chainId: number]: {
+        lastSyncBlock: LastSyncBlock;
+    };
+}
+export interface ExplorerInfo {
+    url: string;
+    name?: string;
+}
+export interface ExplorerAddresses {
+    [chainId: number]: string | ExplorerInfo;
+}
+export interface NetworkById {
+    [chainId: number]: string;
+}
+export interface BlockSyncProps {
+    blockByChain: BlockByChain;
+    explorerAddresses: ExplorerAddresses;
+    networkById: NetworkById;
+}
+export interface FooterProps {
+    blockSyncProps?: BlockSyncProps;
+}

package/dist/types/types/graph.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Types for graph components
+ */
+export interface GraphPoint {
+    timestamp: number;
+    value: number;
+}
+export type GraphMeasureUnits = "%" | "$" | "x" | "";
+export interface GraphProps {
+    data: Array<GraphPoint>;
+    yMeasureUnit?: GraphMeasureUnits;
+    height?: number;
+    formatValue?: (value: number) => string;
+    color?: string;
+}
+/**
+ * Props for GraphView component
+ */
+export interface GraphViewProps extends Omit<GraphProps, "data"> {
+    data: GraphProps["data"] | undefined;
+    loading: boolean;
+}

package/dist/types/types/help.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Help sections for different parts of the application
+ */
+export type HelpSections = "creditDetails" | "creditWalletConnect" | "creditManage" | "creditList" | "poolList" | "poolSupply" | "poolWithdraw" | "creditSession" | "charts.poolsList" | "charts.poolDetails" | "charts.creditsList" | "charts.creditDetails";

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

@@ -0,0 +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";

package/dist/types/types/range-item.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+/**
+ * Interface for range button items
+ * Used in RangeButtons component
+ */
+export interface RangeItemProps<T> {
+    value: T;
+    label: React.ReactNode;
+}