@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.1

package/dist/types/components/signatures/vertical-timeline.d.ts

@@ -1,53 +0,0 @@
-/**
- * StepCommon — common properties for timeline steps.
- */
-interface StepCommon {
-    status: "success" | "pending" | "not-started" | "error";
-}
-/**
- * Step — default step type for timeline.
- */
-interface Step extends StepCommon {
-    type: "default";
-    title: string;
-}
-/**
- * ExtentionStep — expandable step type for timeline with collapsible content.
- */
-interface ExtentionStep extends StepCommon {
-    type: "extention";
-    children: React.ReactNode;
-}
-/**
- * VerticalTimeline — component for displaying vertical timeline of steps with status indicators.
- *
- * @usage
- * Use VerticalTimeline to display sequential steps with status:
- * transaction confirmation steps, multi-step processes, signature workflows, progress tracking.
- * Commonly used for tracking transaction status: signed, queued,executed, etc.
- *
- * Props:
- * - `steps` — array of step objects (Step | ExtentionStep) (required):
- *   - Step: `type: "default"`, `title: string`, `status: "success" | "pending" | "not-started" | "error"`.
- *   - ExtentionStep: `type: "extention"`, `children: React.ReactNode`, `status: "success" | "pending" | "not-started" | "error"`.
- * - `minWidth` — minimum width of timeline in pixels (defaults to 300).
- *
- * Step Statuses:
- * - `success` — step completed successfully (green circle with checkmark).
- * - `pending` — step in progress (gray border circle).
- * - `not-started` — step not yet started (not displayed).
- * - `error` — step failed (red circle with X).
- *
- * Note: ExtentionStep provides expandable content with "Show all" / "Hide all" toggle.
- * Steps with "not-started" status are not rendered.
- *
- * Do NOT use VerticalTimeline:
- * - for horizontal progress indicators (use appropriate progress components).
- * - for simple lists without status tracking (use regular list components).
- */
-interface VerticalTimelineProps {
-    steps: (Step | ExtentionStep)[];
-    minWidth?: number;
-}
-export declare function VerticalTimeline({ steps, minWidth, }: VerticalTimelineProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/slider-token/index.d.ts

@@ -1,3 +0,0 @@
-export * from './slider-token';
-export * from './slider-token-label';
-export * from './slider-token-utils';

package/dist/types/components/slider-token/slider-token-label.d.ts

@@ -1,13 +0,0 @@
-export interface SliderTokenLabelProps {
-    point: number;
-    min: number;
-    max: number;
-    label: string;
-    align: "top" | "bottom";
-    onSelect: (value: number) => void;
-}
-/**
- * Clickable label for a slider-token marker (numeric below or text above).
- * Positioned with the same thumb-offset logic as the track.
- */
-export declare function SliderTokenLabel({ point, min, max, label, align, onSelect, }: SliderTokenLabelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/slider-token/slider-token-utils.d.ts

@@ -1,13 +0,0 @@
-import { MarkerPoint } from '../slider/slider-utils';
-/**
- * Build marker points for SliderToken: base step points + additional points,
- * each with type "base" or "additional". Does not use decimals/precision
- * (unlike slider-utils makeMarkerPoints).
- */
-export declare function makeSliderTokenMarkerPoints(min: number, max: number, markerStep: number, additionalPoints?: Record<number, number>): MarkerPoint[];
-/**
- * Remove base markers that are too close to the next marker or to a previous
- * additional marker (matches interface SliderToken merge logic).
- * First and last markers are always kept; additional markers are never removed.
- */
-export declare function mergeCloseMarkers(markers: MarkerPoint[], mergeDistance: number): MarkerPoint[];

package/dist/types/components/slider-token/slider-token.d.ts

@@ -1,21 +0,0 @@
-import { TokenFullData } from '../../types/common';
-export interface SliderTokenProps {
-    from: number;
-    to: number;
-    token: TokenFullData;
-    step: number;
-    markerStep: number;
-    value: number;
-    setValue: (v: number) => void;
-    epsilon_inPer?: number;
-    additionalMarkers?: number | Array<number>;
-    additionalMarkersLabels?: Record<number, string>;
-    mergeMarkers_inPer?: number;
-    className?: string;
-}
-/**
- * SliderToken — slider with token-scale markers and labels.
- * No TokenSymbol/percent header (parent renders that).
- * Uses Radix Slider + SliderMark + SliderTokenLabel; snap to all markers.
- */
-export declare function SliderToken({ from, to, step, markerStep, token, additionalMarkers, additionalMarkersLabels, value, setValue, epsilon_inPer, mergeMarkers_inPer, className, }: SliderTokenProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/smart-number-input/balance-indicator.d.ts

@@ -1,41 +0,0 @@
-import { TokenFullData } from '../../types/common';
-import type * as React from "react";
-/** Size variant matching A (SmartNumberInputSize). */
-export type BalanceIndicatorSize = "sm" | "md";
-export interface BalanceIndicatorProps {
-    /** Label before balance (e.g. "Balance"). */
-    title?: React.ReactNode;
-    /** Token for formatting amount. */
-    token: Omit<TokenFullData, "address"> | undefined;
-    /** Max amount to display (formatted via TokenTemplate). */
-    maxAmount?: bigint;
-    /** When true, balance row is non-interactive. */
-    disabled?: boolean;
-    /** When true, show max button or clickable amount. @default true */
-    maxButton?: boolean;
-    /** Size variant. */
-    size: BalanceIndicatorSize;
-    /** Called when max is clicked. */
-    onMaxButtonClick: () => void;
-    /** Extra class name. */
-    className?: string;
-}
-/**
- * BalanceIndicator — balance label + formatted max amount with optional max button.
- * Subcomponent of SmartNumberInput (matches A BalanceIndicator + Label/MaxWrapper/MaxButton).
- *
- * @usage
- * Renders "Balance: &lt;amount&gt;" with optional inline (sm) or separate (md) max button.
- *
- * @example
- * ```tsx
- * <BalanceIndicator
- *   token={token}
- *   maxAmount={balance}
- *   size="md"
- *   maxButton
- *   onMaxButtonClick={() => setAmount(max)}
- * />
- * ```
- */
-export declare function BalanceIndicator({ title, className, maxAmount, token, disabled, maxButton, onMaxButtonClick, size, }: BalanceIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/smart-number-input/index.d.ts

@@ -1,2 +0,0 @@
-export * from './balance-indicator';
-export * from './smart-number-input';

package/dist/types/components/smart-number-input/smart-number-input.d.ts

@@ -1,112 +0,0 @@
-import { NetworkType } from '@gearbox-protocol/sdk';
-import { TokenFullData } from '../../types/common';
-import * as React from "react";
-export interface TokenOption {
-    /** Display label for this option. */
-    label: string;
-    /** Optional icon to display before the label. */
-    icon?: React.ReactNode;
-    /**
-     * Called when this option is selected (single-select) or toggled (multi-select).
-     * In multi-select mode the dropdown stays open; the parent manages checked state.
-     */
-    onSelect: () => void;
-    /**
-     * When true, the option is shown with a checkmark.
-     * Used only in multi-select mode (`multiSelectMode` prop on SmartNumberInput).
-     */
-    checked?: boolean;
-}
-/** A-matching SmartNumberInput size for layout (styles.tsx). */
-export type SmartNumberInputSize = "sm" | "md";
-export interface SmartNumberInputProps {
-    /** Current amount value as string. */
-    amount: string;
-    /** Token data (from interface). */
-    token: Omit<TokenFullData, "address"> | undefined;
-    /** Label for the input. */
-    label?: React.ReactNode;
-    /** Max button label (e.g. "Balance"). */
-    maxButtonLabel?: React.ReactNode;
-    /** Max amount to display. */
-    maxAmount?: bigint;
-    /** Max amount limit (capped when max amount exceeds this). */
-    maxAmountLimit?: bigint;
-    /** Chain ID for network icon. */
-    chainId?: number;
-    /** Network type for display. */
-    network?: NetworkType;
-    /** Show max button. @default true */
-    maxButton?: boolean;
-    /** Input is disabled. */
-    disabled?: boolean;
-    /** Size variant (from interface SmartNumberInputSize). */
-    size?: SmartNumberInputSize;
-    /** When true, currency dropdown is open (expand icon rotated). */
-    active?: boolean;
-    /** Override max character length for token symbol display. When omitted, computed from viewport width. */
-    symbolMaxLength?: number;
-    /** Inline token options for dropdown selection (alternative to onShowSelectDialog). */
-    tokenOptions?: TokenOption[];
-    /**
-     * When true, the tokenOptions dropdown works as a multi-select:
-     * - The dropdown stays open after each click (doesn't auto-close).
-     * - Options marked `checked: true` show a checkmark.
-     * - The dropdown stays open until the user closes it (e.g. click outside).
-     * The parent is responsible for maintaining `checked` state on each option.
-     */
-    multiSelectMode?: boolean;
-    /** Callback when amount changes. Called with (value: bigint, valueView: string). */
-    onSetAmount?: (value: bigint, valueView: string) => void;
-    /** Callback to show token select dialog. */
-    onShowSelectDialog?: () => void;
-    /** Callback when remove button is clicked. */
-    onRemove?: () => void;
-    /** Focus callback. */
-    onFocus?: () => void;
-    /** Blur callback. */
-    onBlur?: () => void;
-    /**
-     * USD price per one whole token unit (e.g. 1800.5 for ETH at $1 800.50).
-     * When provided, the USD equivalent of the current amount is displayed below the input.
-     */
-    usdPrice?: number;
-    /**
-     * When provided, renders a Health Factor slider in the balance row
-     * (replacing the max amount / "Can borrow" indicator).
-     * Intended for debt inputs where the user wants to target a specific HF.
-     */
-    hfSlider?: HFSliderConfig;
-}
-/** Configuration for the inline Health Factor slider. */
-export interface HFSliderConfig {
-    /** Current target HF as a float (e.g. 1.5 for 150%). */
-    value: number;
-    /** Minimum HF value. @default 1.0 */
-    min?: number;
-    /** Maximum HF value. @default 3.0 */
-    max?: number;
-    /** Slider step. @default 0.01 */
-    step?: number;
-    /** Called when the slider value changes. */
-    onChange: (value: number) => void;
-}
-/**
- * SmartNumberInput — token amount input with balance display (matches interface).
- *
- * @usage
- * Use for token amount input with balance row and optional token selector.
- *
- * @example
- * ```tsx
- * <SmartNumberInput
- *   amount={amountView}
- *   token={tokenData}
- *   maxAmount={maxBalance}
- *   onSetAmount={(value, view) => { setAmount(value); setView(view); }}
- *   onShowSelectDialog={openTokenDialog}
- * />
- * ```
- */
-declare const SmartNumberInput: React.ForwardRefExoticComponent<SmartNumberInputProps & React.RefAttributes<HTMLDivElement>>;
-export { SmartNumberInput };

package/dist/types/components/stat-badge/stat-badge.d.ts

@@ -1,191 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-declare const statBadgeVariants: (props?: ({
-    variant?: "primary" | "outlined" | "filled" | "elevated" | null | undefined;
-    size?: "default" | "sm" | "md" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const statBadgeTitleVariants: (props?: ({
-    size?: "default" | "sm" | "md" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const statBadgeContentVariants: (props?: ({
-    size?: "default" | "sm" | "md" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface DeltaProps {
-    /**
-     * Label to show before the delta value
-     */
-    label?: string;
-    /**
-     * Delta value (percentage or number)
-     */
-    value: number;
-    /**
-     * Tooltip content for the delta
-     */
-    tooltip?: React.ReactNode;
-    /**
-     * Custom icon for positive delta
-     */
-    positiveIcon?: React.ReactNode;
-    /**
-     * Custom icon for negative delta
-     */
-    negativeIcon?: React.ReactNode;
-}
-export interface TitleInfo {
-    /**
-     * Type of title info display
-     */
-    type?: "text" | "icon";
-    /**
-     * Content to display (tooltip, icon, etc.)
-     */
-    text?: React.ReactNode;
-}
-export interface StatBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof statBadgeVariants> {
-    /**
-     * Title/label of the stat
-     */
-    title: React.ReactNode;
-    /**
-     * Additional info to display next to title (tooltip, icon)
-     */
-    titleInfo?: TitleInfo;
-    /**
-     * Main value to display
-     */
-    value: React.ReactNode;
-    /**
-     * Optional description for the value
-     */
-    valueDescription?: React.ReactNode;
-    /**
-     * Optional delta configuration
-     */
-    delta?: DeltaProps;
-}
-/**
- * StatBadge component for displaying statistics and metrics with optional delta indicators
- *
- * **Note:** If using delta tooltips, wrap your app with `<TooltipProvider>` from the tooltip component.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <StatBadge
- *   title="Total Value"
- *   value="$1,234.56"
- * />
- *
- * // With description
- * <StatBadge
- *   title="APY"
- *   value="12.5"
- *   valueDescription="%"
- * />
- *
- * // With delta (positive change)
- * <StatBadge
- *   title="Revenue"
- *   value="$10,000"
- *   delta={{
- *     label: "+15.5%",
- *     value: 15.5,
- *   }}
- * />
- *
- * // With delta and tooltip (requires TooltipProvider)
- * <TooltipProvider>
- *   <StatBadge
- *     title="Revenue"
- *     value="$10,000"
- *     delta={{
- *       label: "+15.5%",
- *       value: 15.5,
- *       tooltip: "15.5% increase from last month"
- *     }}
- *   />
- * </TooltipProvider>
- *
- * // Small size with outlined variant
- * <StatBadge
- *   title="Users"
- *   value="1,234"
- *   size="sm"
- *   variant="outlined"
- * />
- *
- * // Primary variant
- * <StatBadge
- *   title="Active Sessions"
- *   value="42"
- *   variant="primary"
- * />
- *
- * // Negative delta
- * <StatBadge
- *   title="Errors"
- *   value="12"
- *   delta={{
- *     label: "-25%",
- *     value: -25,
- *   }}
- * />
- * ```
- */
-export declare const StatBadge: React.ForwardRefExoticComponent<StatBadgeProps & React.RefAttributes<HTMLDivElement>>;
-declare const statBadgeGridVariants: (props?: ({
-    cols?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
-    colsSm?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
-    colsMd?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
-    colsLg?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
-    colsXl?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
-    gap?: "default" | "sm" | "lg" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StatBadgeGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statBadgeGridVariants> {
-    /**
-     * Number of columns in the grid (responsive breakpoints applied automatically)
-     */
-    cols?: 1 | 2 | 3 | 4 | 5 | 6;
-    colsSm?: 1 | 2 | 3 | 4 | 5 | 6;
-    colsMd?: 1 | 2 | 3 | 4 | 5 | 6;
-    colsLg?: 1 | 2 | 3 | 4 | 5 | 6;
-    colsXl?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * Gap size between grid items
-     */
-    gap?: "sm" | "default" | "lg" | "xl";
-}
-/**
- * StatBadgeGrid component for displaying multiple stat badges in a responsive grid layout
- *
- * @example
- * ```tsx
- * // Default 4 columns (1 on mobile, 2 on tablet, 3 on desktop, 4 on xl)
- * <StatBadgeGrid>
- *   <StatBadge title="Total Value" value="$1,234.56" />
- *   <StatBadge title="APY" value="12.5%" />
- *   <StatBadge title="Users" value="1,234" />
- * </StatBadgeGrid>
- *
- * // 3 columns layout
- * <StatBadgeGrid cols={3}>
- *   <StatBadge title="Revenue" value="$10,000" />
- *   <StatBadge title="Users" value="1,234" />
- *   <StatBadge title="Sessions" value="42" />
- * </StatBadgeGrid>
- *
- * // 2 columns with large gap
- * <StatBadgeGrid cols={2} gap="lg">
- *   <StatBadge title="Active" value="123" />
- *   <StatBadge title="Inactive" value="45" />
- * </StatBadgeGrid>
- *
- * // Single column
- * <StatBadgeGrid cols={1}>
- *   <StatBadge title="Total" value="$1,000" />
- * </StatBadgeGrid>
- * ```
- */
-export declare const StatBadgeGrid: React.ForwardRefExoticComponent<StatBadgeGridProps & React.RefAttributes<HTMLDivElement>>;
-export { statBadgeVariants, statBadgeTitleVariants, statBadgeContentVariants, statBadgeGridVariants, };

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

@@ -1 +0,0 @@
-export { StatusTriangle, type StatusTriangleProps } from './status-triangle';

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

@@ -1,46 +0,0 @@
-import type * as React from "react";
-export interface StatusTriangleProps {
-    /**
-     * Whether the value is negative (points down with red color)
-     * @default false
-     */
-    isNegative?: boolean;
-    /**
-     * @deprecated Use isNegative instead
-     */
-    $isNegative?: boolean;
-    /**
-     * Size of the triangle in pixels or preset string ("xs" | "sm" | "md" | "lg")
-     * @default 5
-     */
-    size?: number | "xs" | "sm" | "md" | "lg";
-    /**
-     * Additional className
-     */
-    className?: string;
-}
-/**
- * StatusTriangle — triangular indicator for positive/negative changes.
- *
- * @usage
- * Use StatusTriangle to indicate direction of change:
- * - Price changes (up/down)
- * - Value deltas
- * - Trend indicators
- *
- * @example
- * ```tsx
- * // Positive (green, pointing up)
- * <StatusTriangle />
- *
- * // Negative (red, pointing down)
- * <StatusTriangle isNegative />
- *
- * // Custom size (number)
- * <StatusTriangle size={8} isNegative={change < 0} />
- *
- * // Preset size (string)
- * <StatusTriangle size="sm" />
- * ```
- */
-export declare function StatusTriangle({ isNegative: isNegativeProp, $isNegative, size: sizeProp, className, }: StatusTriangleProps): React.ReactElement;

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

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

package/dist/types/components/stepper/stepper.d.ts

@@ -1,40 +0,0 @@
-import * as React from "react";
-export interface StepperStep {
-    id: string;
-    label: React.ReactNode;
-    description?: React.ReactNode;
-}
-export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Array of step definitions
-     */
-    steps: StepperStep[];
-    /**
-     * Currently active step index (0-based)
-     */
-    activeStep: number;
-    /**
-     * Orientation of the stepper
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Callback when step is clicked
-     */
-    onStepClick?: (stepIndex: number) => void;
-}
-/**
- * Stepper — multi-step progress indicator
- *
- * @example
- * ```tsx
- * const steps = [
- *   { id: "1", label: "Step 1", description: "Description" },
- *   { id: "2", label: "Step 2" },
- *   { id: "3", label: "Step 3" },
- * ];
- *
- * <Stepper steps={steps} activeStep={1} />
- * ```
- */
-declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
-export { Stepper };

package/dist/types/components/styled-dropdown/index.d.ts

@@ -1 +0,0 @@
-export * from './styled-dropdown';

package/dist/types/components/styled-dropdown/styled-dropdown.d.ts

@@ -1,95 +0,0 @@
-import type * as React from "react";
-export interface StyledDropdownItem {
-    value?: string | number | boolean;
-    label?: React.ReactNode;
-    title?: React.ReactNode;
-    [key: string]: unknown;
-}
-export interface StyledDropdownProps<T extends StyledDropdownItem = StyledDropdownItem> {
-    /**
-     * Children content (dropdown items if not using `items` prop)
-     */
-    children?: React.ReactNode;
-    /**
-     * Whether dropdown is open (controlled)
-     */
-    open?: boolean;
-    /**
-     * Callback when open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Trigger element/label
-     */
-    trigger?: React.ReactNode;
-    /**
-     * Label element (alias for trigger)
-     */
-    label?: React.ReactNode;
-    /**
-     * Dropdown items
-     */
-    items?: T[];
-    /**
-     * Callback when item is selected
-     */
-    onSelect?: (item: T) => void;
-    /**
-     * Theme variant
-     */
-    theme?: "empty" | "default" | "dark" | "light" | "filledDark" | string;
-    /**
-     * Size variant
-     */
-    size?: "xs" | "sm" | "md" | "lg" | string;
-    /**
-     * Icon to display (can be ReactNode or FontAwesome IconDefinition)
-     */
-    icon?: React.ReactNode | {
-        icon: [number, number, unknown, unknown, string | string[]];
-        iconName?: string;
-    };
-    /**
-     * Icon size
-     */
-    iconSize?: number;
-    /**
-     * Alignment of dropdown
-     */
-    align?: "start" | "center" | "end";
-    /**
-     * Side of trigger to show dropdown
-     */
-    side?: "top" | "right" | "bottom" | "left";
-    /**
-     * Additional CSS class for content
-     */
-    className?: string;
-    /**
-     * Additional CSS class for trigger
-     */
-    triggerClassName?: string;
-    /**
-     * Analytics callback on click
-     */
-    onClickAnalytics?: (item: T) => void;
-}
-/**
- * StyledDropdown — a styled dropdown wrapper with legacy API support
- *
- * @example
- * ```tsx
- * // New API with children
- * <StyledDropdown trigger={<button>Open</button>}>
- *   <DropdownMenuItem>Item 1</DropdownMenuItem>
- * </StyledDropdown>
- *
- * // Legacy API with items
- * <StyledDropdown
- *   label={<span>Select option</span>}
- *   items={[{ value: 1, label: 'Option 1' }]}
- *   onSelect={(item) => console.log(item)}
- * />
- * ```
- */
-export declare function StyledDropdown<T extends StyledDropdownItem = StyledDropdownItem>({ children, open, onOpenChange, trigger, label, items, onSelect, theme, size, icon, iconSize, align, side, className, triggerClassName, onClickAnalytics, }: StyledDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/types/components/switch/switch.d.ts

@@ -1,19 +0,0 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React from "react";
-export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
-    /**
-     * Size of the switch
-     */
-    size?: "sm" | "default" | "lg";
-}
-/**
- * Switch — toggle component for on/off states
- *
- * @example
- * ```tsx
- * <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
- * <Switch size="sm" disabled />
- * ```
- */
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
-export { Switch };

package/dist/types/components/theme-toggle/index.d.ts

@@ -1 +0,0 @@
-export * from './theme-toggle';