@gearbox-protocol/ui-kit 2.1.0-next.1

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

@@ -0,0 +1,71 @@
+export interface OpenedStateResult {
+    /**
+     * Current open state
+     */
+    isOpen: boolean;
+    /**
+     * Open the dialog/menu/drawer
+     */
+    open: () => void;
+    /**
+     * Close the dialog/menu/drawer
+     */
+    close: () => void;
+    /**
+     * Toggle the open state
+     */
+    toggle: () => void;
+    /**
+     * Set the open state directly
+     */
+    setIsOpen: (value: boolean) => void;
+}
+/**
+ * useOpenedState — hook for managing open/close state.
+ *
+ * @usage
+ * Use this hook for managing visibility state of dialogs, menus, drawers:
+ * - Modal dialogs
+ * - Dropdown menus
+ * - Sidebars/drawers
+ * - Expandable sections
+ *
+ * @param defaultOpen - Initial open state (default: false)
+ * @returns Object with state and control functions
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, open, close, toggle } = useOpenedState();
+ *
+ * return (
+ *   <>
+ *     <Button onClick={open}>Open Dialog</Button>
+ *
+ *     <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ *       <DialogContent>
+ *         <DialogHeader>
+ *           <DialogTitle>My Dialog</DialogTitle>
+ *         </DialogHeader>
+ *         <Button onClick={close}>Close</Button>
+ *       </DialogContent>
+ *     </Dialog>
+ *   </>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With default open state
+ * const { isOpen, toggle } = useOpenedState(true);
+ *
+ * return (
+ *   <div>
+ *     <button onClick={toggle}>
+ *       {isOpen ? "Hide" : "Show"} Details
+ *     </button>
+ *     {isOpen && <div>Details content</div>}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useOpenedState(defaultOpen?: boolean): OpenedStateResult;

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/hooks/use-smart-number-input.d.ts

@@ -0,0 +1 @@
+export declare function useSmartNumberInput(initialAmount?: bigint, initialView?: string): readonly [bigint, string, (value: bigint, valueView: string) => void];

package/dist/types/index.d.ts

@@ -0,0 +1,150 @@
+import { default as EnglishLocale } from './locale/en.json';
+export * from './components/accordion';
+export * from './components/alert-badge';
+export * from './components/alert-dialog';
+export * from './components/alert-modal';
+export * from './components/app-bar';
+export * from './components/apy';
+export * from './components/arc-loader';
+export * from './components/asset-line';
+export * from './components/assets-list-cell';
+export * from './components/assets-ratio';
+export * from './components/auth';
+export * from './components/avatar';
+export * from './components/badge';
+export * from './components/base-link';
+export * from './components/block-sync';
+export * from './components/breadcrumbs';
+export * from './components/button-checkbox';
+export * from './components/buttons';
+export * from './components/card-grid';
+export * from './components/cards';
+export * from './components/carousel';
+export * from './components/checkbox';
+export * from './components/client-adapters';
+export * from './components/colored-text';
+export * from './components/complex-input';
+export * from './components/compound-apy';
+export * from './components/confirm-menu';
+export * from './components/credit-session-status';
+export * from './components/currency-button';
+export * from './components/description';
+export { DetailedApy, type DetailedApyProps, PoolRewardsIcon, } from './components/detailed-apy';
+export * from './components/detailed-page-title';
+export * from './components/dialog';
+export * from './components/dropdown-label';
+export * from './components/dropdown-menu';
+export * from './components/edit-input';
+export * from './components/error-message';
+export * from './components/error-view';
+export * from './components/explorer-links-dropdown';
+export * from './components/fadeout-loading';
+export * from './components/filter';
+export * from './components/form';
+export * from './components/formatted-number';
+export * from './components/graph';
+export * from './components/grid-td-cell';
+export * from './components/guard';
+export * from './components/head-cell';
+export * from './components/health-factor';
+export * from './components/help-center-container';
+export * from './components/help-sections';
+export * from './components/help-tip';
+export * from './components/hide-on';
+export * from './components/horizontal-indicator';
+export * from './components/icon-button';
+export * from './components/icons';
+export * from './components/input';
+export * from './components/label';
+export * from './components/layout';
+export * from './components/legal-agreement';
+export * from './components/link';
+export * from './components/liquidation';
+export * from './components/liquidation-price';
+export * from './components/loader';
+export * from './components/loader-guard';
+export * from './components/loading';
+export * from './components/loading-bar';
+export * from './components/markdown-viewer';
+export * from './components/modal';
+export * from './components/navbar';
+export * from './components/navbar-logo';
+export * from './components/navigation-context';
+export * from './components/navitem';
+export * from './components/network-icon';
+export * from './components/not-found';
+export * from './components/options-list';
+export * from './components/overflow';
+export * from './components/overflow-container';
+export * from './components/page-title';
+export * from './components/percent-indicator';
+export * from './components/points-icon';
+export * from './components/pool-apy-tooltip';
+export * from './components/pool-indicator-icon';
+export * from './components/pool-points-indicator';
+export * from './components/progress';
+export * from './components/progress-bar';
+export * from './components/progress-circle';
+export * from './components/radio-group';
+export * from './components/rounded-image';
+export * from './components/row';
+export * from './components/search-bar';
+export * from './components/search-line';
+export * from './components/segmented-control';
+export * from './components/select';
+export * from './components/separate-line';
+export * from './components/separator';
+export * from './components/short-string';
+export * from './components/signatures';
+export * from './components/simple-accordion';
+export * from './components/simple-dropdown';
+export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/slider-token';
+export * from './components/smart-number-input';
+export * from './components/spinner';
+export * from './components/spinner-loader';
+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';
+export * from './components/switch';
+export * from './components/tab-control';
+export * from './components/table';
+export * from './components/tabs';
+export * from './components/text-button';
+export * from './components/textarea';
+export * from './components/theme-provider';
+export * from './components/theme-toggle';
+export * from './components/time-to-liquidation';
+export * from './components/tip-card';
+export * from './components/toggle';
+export * from './components/token-icon';
+export * from './components/token-symbol';
+export * from './components/token-template';
+export * from './components/tooltip';
+export * from './components/trading-view';
+export * from './components/typed-intl';
+export * from './components/typography';
+export * from './components/vertical-indicator';
+export * from './components/vertical-list';
+export * from './components/vspace';
+export * from './components/with-copy';
+export * from './components/with-filter-button';
+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';
+export * from './utils/copy';
+export * from './utils/format';
+export { formatMoney, formatPercentAmount, percentageTemplate, percentTemplate, } from './utils/format-money';
+export * from './utils/templates';

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

@@ -0,0 +1,76 @@
+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.loadingPercent": "Loading {percent}%",
+  "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.filterModal.searchPlaceholder": "Search options...",
+  "components.filterModal.noOptionsAvailable": "No options available",
+  "components.filterModal.noOptionsMatchSearch": "No options match your search",
+  "components.filterModal.reset": "Reset",
+  "components.filterModal.apply": "Apply",
+
+  "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.noData": "No data",
+  "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.noData": "No data",
+  "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/dist/types/types/common.d.ts

@@ -0,0 +1,23 @@
+import { Address } from 'viem';
+export type TokenMetaInfo = {
+    symbol: string;
+    title?: string;
+    icon?: string;
+    name?: string;
+};
+export type TokenFullData = TokenMetaInfo & {
+    decimals: number;
+    address: Address;
+};
+export interface ExtraRewardApyData {
+    apy: number;
+    rewardToken: Address;
+    rewardTokenSymbol: string;
+    endTimestamp?: number;
+    token?: Address;
+}
+export type LiquidationThresholds = Record<Address, bigint>;
+export type QuotasInfoList = Record<Address, {
+    token: Address;
+    isActive: boolean;
+}>;

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

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { default as 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 | undefined;
+    explorerAddresses: ExplorerAddresses;
+    networkById: NetworkById;
+}
+export interface FooterProps {
+    blockSyncProps?: BlockSyncProps;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Types for graph components
+ */
+export interface GraphPoint {
+    timestamp?: number;
+    /** @deprecated Use timestamp instead */
+    time?: 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;
+}

package/dist/types/types/reactochart.d.ts

@@ -0,0 +1,145 @@
+declare module "reactochart/ColorHeatmap" {
+  import type { Component } from "react";
+
+  export interface Cell {
+    x: unknown;
+    y: unknown;
+    value: unknown;
+    xEnd?: unknown;
+    yEnd?: unknown;
+  }
+
+  interface ColorHeatmapProps {
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    data?: any;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    value?: (d: any) => number;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    x?: (d: any) => number;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    xEnd?: (d: any) => number;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    y?: (d: any) => number;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    yEnd?: (d: any) => number;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    rectClassName?: string | ((d: any) => string);
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    rectStyle?: any;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class ColorHeatmap extends Component<ColorHeatmapProps> {}
+  export default ColorHeatmap;
+}
+
+declare module "reactochart/XAxis" {
+  import type { Component } from "react";
+
+  interface XAxisProps {
+    showLine?: boolean;
+    title?: string;
+    titleAlign?: string;
+    tickCount?: number;
+    labelFormat?: (value: number) => string;
+    showLabels?: boolean;
+    showTicks?: boolean;
+    onMouseClickAxis?: () => void;
+    nice?: boolean;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class XAxis extends Component<XAxisProps> {}
+  export default XAxis;
+}
+
+declare module "reactochart/XLine" {
+  import type { Component } from "react";
+
+  interface XLineProps {
+    value: number;
+    className?: string;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class XLine extends Component<XLineProps> {}
+  export default XLine;
+}
+
+declare module "reactochart/XYPlot" {
+  import type { Component } from "react";
+
+  interface XYPlotProps {
+    width: number;
+    height: number;
+    xDomain?: [number, number];
+    yDomain?: [number, number];
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    onMouseMove?: (e: any) => void;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    onMouseLeave?: (e: any) => void;
+    children?: React.ReactNode;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class XYPlot extends Component<XYPlotProps> {}
+  export default XYPlot;
+}
+
+declare module "reactochart/YAxis" {
+  import type { Component } from "react";
+
+  interface YAxisProps {
+    showLine?: boolean;
+    title?: string;
+    titleAlign?: string;
+    tickCount?: number;
+    labelFormat?: (value: number) => string;
+    showLabels?: boolean;
+    showTicks?: boolean;
+    onMouseClickAxis?: () => void;
+    nice?: boolean;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class YAxis extends Component<YAxisProps> {}
+  export default YAxis;
+}
+
+declare module "reactochart/YLine" {
+  import type { Component } from "react";
+
+  interface YLineProps {
+    value: number;
+    className?: string;
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class YLine extends Component<YLineProps> {}
+  export default YLine;
+}
+
+declare module "reactochart/ScatterPlot" {
+  import type { Component } from "react";
+
+  export interface Point {
+    x: unknown;
+    y: unknown;
+    [index: number]: unknown;
+  }
+
+  interface ScatterPlotProps {
+    data?: Point[];
+    // biome-ignore lint/suspicious/noExplicitAny: third-party library types
+    [key: string]: any;
+  }
+
+  class ScatterPlot extends Component<ScatterPlotProps> {}
+  export default ScatterPlot;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Generates a unique ID with a given prefix
+ */
+export declare function generateId(prefix: string): string;
+/**
+ * ARIA props interface for accessibility
+ */
+export interface AriaProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+    "aria-required"?: boolean;
+    "aria-disabled"?: boolean;
+}
+/**
+ * Hook for generating related IDs for form fields
+ * Useful for connecting labels, inputs, errors, and helper text
+ */
+export declare function useFormFieldIds(_name: string): {
+    inputId: string;
+    errorId: string;
+    helperId: string;
+};

package/dist/types/utils/bn-to-input-view.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Convert bigint to input view string
+ *
+ * @param number - The bigint number to convert
+ * @param decimals - Number of decimal places
+ * @param allowNegative - Whether to allow negative numbers (default: false)
+ * @param precision - Optional precision to apply
+ * @returns String representation suitable for input fields
+ *
+ * @example
+ * ```ts
+ * bnToInputView(1234567890n, 6) // "1234.56789"
+ * bnToInputView(1000000n, 6) // "1"
+ * bnToInputView(-1234567890n, 6, true) // "-1234.56789"
+ * ```
+ */
+export declare function bnToInputView(number: bigint, decimals: number, allowNegative?: boolean, precision?: number): string;

package/dist/types/utils/bn-to-pretty-view.d.ts

@@ -0,0 +1,16 @@
+import { ParseSmallNumberResult } from './parse-input-to-bn';
+/**
+ * Formats a BigInt value to a pretty human-readable string with locale formatting
+ *
+ * @param value - The BigInt value to format
+ * @param decimals - Number of decimal places for the token
+ * @param options - Optional Intl.NumberFormat options
+ * @returns Formatted string with thousands separators
+ *
+ * @example
+ * ```ts
+ * bnToPrettyView(1234567890000000000000n, 18) // "1,234.56789"
+ * bnToPrettyView(1000000000000000000n, 18) // "1"
+ * ```
+ */
+export declare function bnToPrettyView(number: bigint | undefined | string | number, decimals: number, precision?: number, allowNegative?: boolean): ParseSmallNumberResult;

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

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