npm - @gearbox-protocol/ui-kit - Versions diffs - 4.0.0-next.6 → 4.0.0-next.60 - Mend

@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (850) hide show

package/dist/types/components/table/table-loader-guard.d.ts DELETED Viewed

@@ -1,45 +0,0 @@
-import { TableLoaderProps } from './table-loader';
-import type * as React from "react";
-/**
- * TableLoaderGuardProps — props for TableLoaderGuard component.
- */
-export interface TableLoaderGuardProps extends TableLoaderProps {
-    showGuard: boolean;
-    children: React.ReactNode;
-}
-/**
- * TableLoaderGuard — guard component that displays table skeleton while data is being loaded.
- *
- * @usage
- * Use TableLoaderGuard to conditionally show loading state in tables:
- * loading guards, conditional skeleton display, table data loading protection.
- *
- * Props:
- * - `showGuard` — if true, displays loading skeleton instead of children (required).
- * - `children` — content to display when not loading (required).
- * - `height` — height of each loading line (defaults to "70px").
- * - `columns` — number of skeleton columns (defaults to 6).
- * - `rows` — number of skeleton rows (defaults to 5).
- *
- * Note: Combines Guard with TableLoader for convenient conditional rendering in tables.
- *
- * @example
- * ```tsx
- * <GridTable cols={6}>
- *   <GridTableHeader>
- *     <Head />
- *   </GridTableHeader>
- *   <TableLoaderGuard
- *     showGuard={isLoading}
- *     rows={5}
- *     columns={6}
- *     height="70px"
- *   >
- *     <GridTableBody>
- *       {data.map(item => <Line key={item.id} data={item} />)}
- *     </GridTableBody>
- *   </TableLoaderGuard>
- * </GridTable>
- * ```
- */
-export declare function TableLoaderGuard({ showGuard, children, height, columns, rows, ...props }: TableLoaderGuardProps): React.ReactElement;

package/dist/types/components/table/table-loader.d.ts DELETED Viewed

@@ -1,50 +0,0 @@
-import type * as React from "react";
-/**
- * TableLoaderProps — props for TableLoader component.
- */
-export interface TableLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Height of each loading line in pixels
-     * @default "70px"
-     */
-    height?: string;
-    /**
-     * Number of skeleton columns to show
-     * @default 6
-     */
-    columns?: number;
-    /**
-     * Number of skeleton rows to show
-     * @default 5
-     */
-    rows?: number;
-    /**
-     * Custom class name for each cell in loading lines
-     */
-    cellClassName?: string;
-}
-/**
- * TableLoader — loading skeleton component for tables.
- *
- * @usage
- * Use TableLoader to display loading state in tables:
- * skeleton rows, table data loading indicators, placeholder content while fetching data.
- *
- * Props:
- * - `height` — height of each loading line (defaults to "70px").
- * - `columns` — number of skeleton columns to show (defaults to 6).
- * - `rows` — number of skeleton rows to show (defaults to 5).
- *
- * Note: Renders multiple GridLoadingLine components wrapped in GridTableBody to match the table structure.
- *
- * @example
- * ```tsx
- * <GridTable cols={6}>
- *   <GridTableHeader>
- *     <Head />
- *   </GridTableHeader>
- *   <TableLoader rows={5} columns={6} height="70px" />
- * </GridTable>
- * ```
- */
-export declare function TableLoader({ height, columns, rows, cellClassName, className, ...props }: TableLoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/with-title/index.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './with-title';

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

@@ -1,31 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import type * as React from "react";
-declare const withTitleVariants: (props?: ({
-    size?: "default" | "sm" | "md" | "lg" | 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;
-    /**
-     * Children content
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
-}
-/**
- * WithTitle — wrapper component that adds a title above content
- *
- * @example
- * ```tsx
- * <WithTitle title="Amount" size="sm">
- *   <Input placeholder="Enter amount" />
- * </WithTitle>
- * ```
- */
-export declare function WithTitle({ title, children, size, className, }: WithTitleProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/configs/design-tokens.d.ts DELETED Viewed

@@ -1,73 +0,0 @@
-/**
- * Design tokens for consistency across the UI library
- */
-export declare const designTokens: {
-    readonly colors: {
-        readonly primary: "rgb(59, 130, 246)";
-        readonly secondary: "rgb(100, 116, 139)";
-        readonly destructive: "rgb(239, 68, 68)";
-        readonly success: "rgb(34, 197, 94)";
-        readonly warning: "rgb(251, 191, 36)";
-    };
-    readonly spacing: {
-        readonly xs: "0.5rem";
-        readonly sm: "0.75rem";
-        readonly md: "1rem";
-        readonly lg: "1.5rem";
-        readonly xl: "2rem";
-    };
-    readonly borderRadius: {
-        readonly sm: "0.25rem";
-        readonly md: "0.375rem";
-        readonly lg: "0.5rem";
-        readonly xl: "0.75rem";
-        readonly full: "9999px";
-    };
-    readonly typography: {
-        readonly fontFamily: {
-            readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
-            readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
-        };
-        readonly fontSize: {
-            readonly xs: "0.75rem";
-            readonly sm: "0.875rem";
-            readonly base: "1rem";
-            readonly lg: "1.125rem";
-            readonly xl: "1.25rem";
-            readonly "2xl": "1.5rem";
-            readonly "3xl": "1.875rem";
-            readonly "4xl": "2.25rem";
-        };
-        readonly fontWeight: {
-            readonly normal: "400";
-            readonly medium: "500";
-            readonly semibold: "600";
-            readonly bold: "700";
-        };
-        readonly lineHeight: {
-            readonly tight: "1.25";
-            readonly normal: "1.5";
-            readonly relaxed: "1.75";
-        };
-    };
-    readonly animation: {
-        readonly duration: {
-            readonly fast: "150ms";
-            readonly normal: "300ms";
-            readonly slow: "500ms";
-        };
-        readonly easing: {
-            readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
-            readonly easeOut: "cubic-bezier(0.0, 0, 0.2, 1)";
-            readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
-        };
-    };
-    readonly shadows: {
-        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-        readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-        readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    };
-};
-export type DesignTokens = typeof designTokens;

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

@@ -1,28 +0,0 @@
-/**
- * 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/use-checkbox-select.d.ts DELETED Viewed

@@ -1,101 +0,0 @@
-/**
- * Represents an item with checkbox state
- */
-export interface Checkable<T> {
-    /**
-     * The original item
-     */
-    item: T;
-    /**
-     * Whether the item is checked
-     */
-    checked: boolean;
-    /**
-     * Index in the original array
-     */
-    index: number;
-}
-/**
- * Result of useCheckboxSelect hook
- */
-export interface CheckboxState<T> {
-    /**
-     * Whether all items are checked
-     */
-    allChecked: boolean;
-    /**
-     * Array of checkable items with their state
-     */
-    checkItems: Checkable<T>[];
-    /**
-     * Toggle all items on/off
-     * @param newState - Optional: force a specific state
-     */
-    handleClickAll: (newState?: boolean) => void;
-    /**
-     * Toggle a single item by index
-     * @param index - Index of the item to toggle
-     */
-    handleClickSingle: (index: number) => void;
-    /**
-     * Directly set the check items state
-     */
-    setCheckItems: (items: Checkable<T>[]) => void;
-    /**
-     * Get only the checked items
-     */
-    checkedItems: T[];
-    /**
-     * Get the count of checked items
-     */
-    checkedCount: number;
-}
-/**
- * useCheckboxSelect — hook for managing checkbox selection state.
- *
- * @usage
- * Use this hook when you need to manage selection state for a list of items:
- * - Multi-select lists
- * - Bulk actions on table rows
- * - Token selection dialogs
- * - Asset enable/disable toggles
- *
- * @param items - Array of items to make selectable
- * @param defaultChecked - Default checked state (boolean or array of booleans)
- * @param respectUserSelect - When false, resets to defaults when defaults change
- * @returns Checkbox state and handlers
- *
- * @example
- * ```tsx
- * const tokens = [{ symbol: "ETH" }, { symbol: "USDC" }];
- *
- * const {
- *   allChecked,
- *   checkItems,
- *   handleClickAll,
- *   handleClickSingle,
- *   checkedItems,
- * } = useCheckboxSelect(tokens);
- *
- * return (
- *   <div>
- *     <Checkbox checked={allChecked} onChange={() => handleClickAll()}>
- *       Select All
- *     </Checkbox>
- *
- *     {checkItems.map(({ item, checked, index }) => (
- *       <Checkbox
- *         key={index}
- *         checked={checked}
- *         onChange={() => handleClickSingle(index)}
- *       >
- *         {item.symbol}
- *       </Checkbox>
- *     ))}
- *
- *     <div>Selected: {checkedItems.length}</div>
- *   </div>
- * );
- * ```
- */
-export declare function useCheckboxSelect<T>(items: T[], defaultChecked?: boolean | boolean[], respectUserSelect?: boolean): CheckboxState<T>;

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

@@ -1,24 +0,0 @@
-/**
- * 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-hf.d.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import { Asset } from '@gearbox-protocol/sdk';
-import { Address } from 'viem';
-import { QuotasInfoList, TokenFullData } from '../types/common';
-export interface UseHFProps {
-    quotas: Record<Address, Asset>;
-    quotasInfo: QuotasInfoList;
-    assets: Array<Asset>;
-    prices: Record<Address, bigint>;
-    liquidationThresholds: Record<Address, bigint>;
-    underlyingToken: Address;
-    debt: bigint;
-    tokensList: Record<Address, TokenFullData>;
-    allowZeroDebt?: boolean;
-}
-export declare function useHF({ assets, quotas, prices, liquidationThresholds, underlyingToken, debt, quotasInfo, allowZeroDebt, tokensList, }: UseHFProps): {
-    hf: number;
-};

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

@@ -1,71 +0,0 @@
-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-smart-number-input.d.ts DELETED Viewed

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

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

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

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

@@ -1,51 +0,0 @@
-/**
- * Types for Footer component
- */
-export interface LastSyncBlock {
-    block: bigint;
-    /** Local wall-clock time (ms) of the last successful sync for this chain. */
-    localTimestamp: number;
-}
-/**
- * Per-chain sync info: the last synced block plus the live refresh state, so the
- * sync indicator can reflect whether the refresh loop is alive / failing.
- */
-export interface ChainSyncInfo {
-    lastSyncBlock: LastSyncBlock;
-    /** True while a refresh for this chain is currently in flight. */
-    loading?: boolean;
-    /** Human-readable error if the last refresh for this chain failed. */
-    error?: string;
-}
-export interface BlockByChain {
-    [chainId: number]: ChainSyncInfo | undefined;
-}
-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;
-    /**
-     * Expected refresh cadence in ms. The indicator is considered stale only after
-     * `syncIntervalMs * staleMultiplier`, so a healthy loop never flips to red.
-     * Defaults to 5 minutes.
-     */
-    syncIntervalMs?: number;
-    /**
-     * Stale-threshold multiplier applied to {@link BlockSyncProps.syncIntervalMs}.
-     * Defaults to 2.5 (allows for missed/throttled cycles before flagging stale).
-     */
-    staleMultiplier?: number;
-}
-export interface FooterProps {
-    blockSyncProps?: BlockSyncProps;
-}

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

@@ -1,24 +0,0 @@
-/**
- * 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/copy.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-export declare const copyToClipboard: ({ text, name, }: {
-    text: string;
-    name?: string;
-}) => void;

package/dist/types/utils/interface.d.ts DELETED Viewed

@@ -1,24 +0,0 @@
-/**
- * Typography variant types
- */
-export type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "bodySmall" | "caption" | "overline";
-/**
- * Typography color types
- */
-export type TypographyColor = "inherit" | "default" | "muted" | "success" | "warning" | "destructive" | "primary";
-/**
- * Typography weight types
- */
-export type TypographyWeight = "inherit" | "normal" | "medium" | "semibold" | "bold";
-/**
- * Typography text alignment types
- */
-export type TypographyAlign = "inherit" | "left" | "center" | "right";
-/**
- * Typography line height types
- */
-export type TypographyLeading = "inherit" | "tight" | "normal" | "relaxed";
-/**
- * Typography element types
- */
-export type TypographyElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";

package/dist/types/utils/plural.d.ts DELETED Viewed

@@ -1,36 +0,0 @@
-/**
- * Selects the appropriate plural form for a count (Russian pluralization rules)
- *
- * Russian has 3 plural forms:
- * - singular (1 яблоко)
- * - few (2-4 яблока)
- * - many (5-20 яблок, 0 яблок)
- *
- * @param count - The number to determine plural form for
- * @param forms - Array of [singular, few, many] forms
- * @returns The appropriate plural form
- *
- * @example
- * ```ts
- * selectPluralString(1, ["яблоко", "яблока", "яблок"]) // "яблоко"
- * selectPluralString(2, ["яблоко", "яблока", "яблок"]) // "яблока"
- * selectPluralString(5, ["яблоко", "яблока", "яблок"]) // "яблок"
- * ```
- */
-export declare function selectPluralString(count: number, forms: [string, string, string]): string;
-/**
- * English plural helper (simple s/no-s rule)
- *
- * @param count - The number to determine plural form for
- * @param singular - Singular form
- * @param plural - Plural form (optional, defaults to singular + "s")
- * @returns The appropriate form
- *
- * @example
- * ```ts
- * pluralize(1, "apple") // "apple"
- * pluralize(2, "apple") // "apples"
- * pluralize(0, "child", "children") // "children"
- * ```
- */
-export declare function pluralize(count: number, singular: string, plural?: string): string;

package/dist/types/utils/react.d.ts DELETED Viewed

@@ -1,31 +0,0 @@
-import * as React from "react";
-/**
- * Helper function to extract text content from React.ReactNode
- * Recursively extracts text from React elements, strings, numbers, etc.
- *
- * @param label - The React node to extract text from
- * @returns The extracted text content as a string
- *
- * @example
- * ```tsx
- * extractTextFromLabel("Simple text"); // "Simple text"
- * extractTextFromLabel(<span>Text with <strong>bold</strong></span>); // "Text with bold"
- * extractTextFromLabel([<span>Part 1</span>, <span>Part 2</span>]); // "Part 1 Part 2"
- * ```
- */
-export declare function extractTextFromLabel(label: React.ReactNode): string;
-/**
- * Helper function to safely serialize a value to a string key
- * Handles BigInt and other non-serializable values
- *
- * @param value - The value to serialize
- * @returns A string representation of the value suitable for use as a key
- *
- * @example
- * ```tsx
- * serializeValue("test"); // "test"
- * serializeValue(123n); // "bigint:123"
- * serializeValue({ a: 1, b: 2 }); // '{"a":1,"b":2}'
- * ```
- */
-export declare function serializeValue(value: unknown): string;

package/dist/types/utils/search-in-token.d.ts DELETED Viewed

@@ -1,43 +0,0 @@
-import { TokenFullData } from '../types/common';
-type TokenDataSlice = Pick<TokenFullData, "title" | "symbol" | "name" | "address">;
-/**
- * Searches for a match in token data (name, symbol, title, or address)
- *
- * @param token - Token data object to search in
- * @param search - Search string (case-insensitive)
- * @returns true if search string is found in any token field
- *
- * @example
- * ```ts
- * const token = {
- *   title: "Ethereum",
- *   symbol: "ETH",
- *   address: "0x..."
- * };
- *
- * searchInToken(token, "eth") // true
- * searchInToken(token, "Ethereum") // true
- * searchInToken(token, "0x") // true
- * searchInToken(token, "btc") // false
- * ```
- */
-export declare function searchInToken(token: TokenDataSlice | undefined, search: string): boolean;
-/**
- * Creates a filter function for tokens based on search string
- *
- * @param search - Search string (case-insensitive)
- * @returns Filter function that can be used with Array.filter
- *
- * @example
- * ```ts
- * const tokens = [
- *   { title: "Ethereum", symbol: "ETH" },
- *   { title: "Bitcoin", symbol: "BTC" },
- * ];
- *
- * const filtered = tokens.filter(createTokenSearchFilter("eth"));
- * // [{ title: "Ethereum", symbol: "ETH" }]
- * ```
- */
-export declare function createTokenSearchFilter(search: string): (token: TokenDataSlice | undefined) => boolean;
-export {};