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

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

@@ -1,109 +0,0 @@
-/**
- * Filter Components
- *
- * A comprehensive set of filter components for building complex filter interfaces.
- * These components work together with DropdownMenu components from dropdown-menu
- * to create filter dropdowns similar to CreditSessionsListFilter.
- *
- * @example Building a complex filter dropdown:
- * ```tsx
- * import {
- *   DropdownMenu,
- *   DropdownMenuContent,
- *   DropdownMenuTrigger,
- *   DropdownMenuRadioGroup,
- * } from "@/components/dropdown-menu";
- * import {
- *   FilterButton,
- * } from "@/components/buttons/filter-button";
- * import {
- *   FilterLabel,
- *   FilterSeparator,
- *   FilterCheckboxItem,
- *   FilterRadioItem,
- *   FilterGroup,
- *   FilterChips,
- * } from "./filter";
- *
- * function CreditSessionsListFilter() {
- *   const [status, setStatus] = React.useState<string[]>([]);
- *   const [type, setType] = React.useState<string>("all");
- *
- *   const activeFilters = [
- *     ...(status.length > 0 ? status.map(s => ({ id: `status-${s}`, label: `Status: ${s}` })) : []),
- *     ...(type !== "all" ? [{ id: "type", label: `Type: ${type}` }] : []),
- *   ];
- *
- *   return (
- *     <>
- *       <DropdownMenu>
- *         <DropdownMenuTrigger asChild>
- *           <FilterButton />
- *         </DropdownMenuTrigger>
- *         <DropdownMenuContent>
- *           <FilterGroup>
- *             <FilterLabel>Status</FilterLabel>
- *             <FilterCheckboxItem
- *               checked={status.includes("active")}
- *               onCheckedChange={(checked) =>
- *                 setStatus(checked
- *                   ? [...status, "active"]
- *                   : status.filter(s => s !== "active"))
- *               }
- *             >
- *               Active
- *             </FilterCheckboxItem>
- *             <FilterCheckboxItem
- *               checked={status.includes("inactive")}
- *               onCheckedChange={(checked) =>
- *                 setStatus(checked
- *                   ? [...status, "inactive"]
- *                   : status.filter(s => s !== "inactive"))
- *               }
- *             >
- *               Inactive
- *             </FilterCheckboxItem>
- *           </FilterGroup>
- *           <FilterSeparator />
- *           <FilterGroup>
- *             <FilterLabel>Type</FilterLabel>
- *             <DropdownMenuRadioGroup value={type} onValueChange={setType}>
- *               <FilterRadioItem value="all">All</FilterRadioItem>
- *               <FilterRadioItem value="credit">Credit</FilterRadioItem>
- *               <FilterRadioItem value="debit">Debit</FilterRadioItem>
- *             </DropdownMenuRadioGroup>
- *           </FilterGroup>
- *         </DropdownMenuContent>
- *       </DropdownMenu>
- *       <FilterChips
- *         filters={activeFilters}
- *         onRemoveFilter={(id) => {
- *           if (id.startsWith("status-")) {
- *             setStatus(status.filter(s => `status-${s}` !== id));
- *           } else if (id === "type") {
- *             setType("all");
- *           }
- *         }}
- *         onClearAll={() => {
- *           setStatus([]);
- *           setType("all");
- *         }}
- *       />
- *     </>
- *   );
- * }
- * ```
- */
-export * from './filter-block';
-export * from './filter-checkbox-item';
-export * from './filter-chip';
-export * from './filter-chips';
-export * from './filter-dropdown-item';
-export * from './filter-group';
-export * from './filter-label';
-export * from './filter-modal';
-export * from './filter-modal-item';
-export * from './filter-radio-item';
-export * from './filter-separator';
-export type { FilterModalSelectList } from './interface';
-export * from './variants';

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

@@ -1,24 +0,0 @@
-/**
- * Type representing a list of selected filter values for FilterModal component
- * Can be a Set or Array of values
- */
-export type FilterModalSelectList<T> = Set<T> | T[];
-/**
- * @deprecated Use FilterModalSelectList instead
- * This type is kept for backward compatibility
- */
-export type SelectFilterList<T> = FilterModalSelectList<T>;
-/**
- * Type representing a filter range with from and to values
- * Used for range-based filtering (e.g., date ranges, number ranges)
- */
-export type FilterRange<T = number> = {
-    /**
-     * The starting value of the range
-     */
-    from: T;
-    /**
-     * The ending value of the range
-     */
-    to: T;
-};

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

@@ -1,3 +0,0 @@
-export declare const filterBlockVariants: (props?: ({
-    variant?: "default" | "outlined" | "ghost" | "elevated" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/loading-bar/index.d.ts

@@ -1 +0,0 @@
-export * from './loading-bar';

package/dist/types/components/loading-bar/loading-bar.d.ts

@@ -1,25 +0,0 @@
-import * as React from "react";
-export interface LoadingBarProps {
-    /** Main message (e.g. "Loading 45%"). */
-    message: string;
-    /** Optional secondary line (e.g. "Please wait"). */
-    subMessage?: string;
-    /** Whether the modal is shown. @default true */
-    show?: boolean;
-    /** Additional class for the inner container. */
-    className?: string;
-}
-/**
- * LoadingBar — modal with spinner, title and optional description.
- * Matches A (interface LoadingBar): centered modal, 250px container, SpinnerLoader, LoadingTitle, LoadingDescription.
- *
- * @usage
- * Use for blocking loading states (e.g. while data is being fetched).
- *
- * @example
- * ```tsx
- * <LoadingBar message="Loading 50%" subMessage="Please wait" />
- * ```
- */
-declare const LoadingBar: React.ForwardRefExoticComponent<LoadingBarProps & React.RefAttributes<HTMLDivElement>>;
-export { LoadingBar };

package/dist/types/components/network-icon/network-indicator.d.ts

@@ -1,23 +0,0 @@
-import { ButtonProps } from '../buttons';
-import { NetworkIcons } from '../../utils/network-icons';
-type IndicatorSize = "sm" | "md" | "default" | "lg";
-export interface NetworkIndicatorProps extends Omit<ButtonProps, "size" | "children"> {
-    network: NetworkIcons | undefined;
-    chainId: number | undefined;
-    size?: IndicatorSize;
-    iconSize?: number;
-    chevronSize?: number;
-    showTitle?: boolean;
-    opened: boolean;
-    /**
-     * When true, button appears enabled and shows chevron even without onClick.
-     * Useful when the component is used as a dropdown trigger that handles clicks externally.
-     * Defaults to true when onClick is provided.
-     */
-    interactive?: boolean;
-}
-/**
- * Network picker trigger: optional "Network:" label, icon, and chevron.
- */
-export declare const NetworkIndicator: import('react').ForwardRefExoticComponent<NetworkIndicatorProps & import('react').RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/types/components/rwa-styles/index.d.ts

@@ -1,2 +0,0 @@
-export declare const RWA_GRADIENT_BORDER_CLASS: string;
-export declare const RWA_POOL_ROW_HOVER_WRAPPER_CLASS = "[&_.grid.grid-cols-subgrid.col-span-full:has([data-rwa-pool-marker='true'])>*]:before:bg-[#7fc8ea]/40";

package/dist/types/components/status-dot/index.d.ts

@@ -1 +0,0 @@
-export * from './status-dot';

package/dist/types/components/status-dot/status-dot.d.ts

@@ -1,47 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-declare const statusDotVariants: (props?: ({
-    variant?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
-    size?: "default" | "sm" | "lg" | "xs" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {
-    /**
-     * Whether the dot should pulse (animate)
-     */
-    pulse?: boolean;
-}
-/**
- * StatusDot — small circular indicator for status visualization
- *
- * @usage
- * Use StatusDot to display status indicators:
- * online/offline status, health indicators, activity markers, notification dots.
- *
- * Variants (variant):
- * - `default` — neutral gray dot.
- * - `success` — green dot for positive/online states.
- * - `warning` — yellow dot for warning states.
- * - `alert` — red dot for error/critical states.
- * - `primary` — primary color dot.
- * - `secondary` — secondary color dot.
- * - `muted` — muted color dot.
- *
- * Sizes (size):
- * - `xs` — extra small (6px).
- * - `sm` — small (8px).
- * - `default` — standard (10px).
- * - `lg` — large (12px).
- * - `xl` — extra large (16px).
- *
- * @example
- * ```tsx
- * <StatusDot variant="success" />
- * <StatusDot variant="alert" size="lg" pulse />
- * <div className="flex items-center gap-2">
- *   <StatusDot variant="success" />
- *   <span>Online</span>
- * </div>
- * ```
- */
-declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLDivElement>>;
-export { StatusDot, statusDotVariants };

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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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-debounce.d.ts

@@ -1,17 +0,0 @@
-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;
-export {};

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

@@ -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;
-};