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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,41 @@
+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

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

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

@@ -0,0 +1,60 @@
+import { NetworkType } from '@gearbox-protocol/sdk';
+import { TokenFullData } from '../../types/common';
+import * as React from "react";
+/** 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;
+    /** 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;
+}
+/**
+ * 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/spinner/index.d.ts

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

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spinner
+     */
+    size?: "xs" | "sm" | "default" | "lg" | "xl";
+    /**
+     * Optional label to display below spinner
+     */
+    label?: React.ReactNode;
+}
+/**
+ * Spinner — loading indicator component
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" label="Loading..." />
+ * ```
+ */
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * SpinnerOverlay — full-screen or container loading overlay
+ *
+ * @example
+ * ```tsx
+ * <SpinnerOverlay />
+ * <SpinnerOverlay label="Please wait..." />
+ * ```
+ */
+declare const SpinnerOverlay: React.ForwardRefExoticComponent<SpinnerProps & {
+    fullScreen?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Spinner, SpinnerOverlay };

package/dist/types/components/spinner-loader/index.d.ts

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

package/dist/types/components/spinner-loader/spinner-loader.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface SpinnerLoaderProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Diameter of the spinner in pixels. @default 40 */
+    size?: number;
+    /** Animation duration (e.g. "1s", "0.8s"). @default "1s" */
+    speed?: string;
+    /** Border width in pixels. @default 4 */
+    width?: number;
+}
+/**
+ * SpinnerLoader — circular border spinner (rotating ring).
+ * Matches interface (A): gray track, darker bottom segment, configurable size/margin/speed/border width.
+ *
+ * @usage
+ * Use for: loading states where a simple rotating circle is needed (e.g. LoadingBar, dialogs).
+ *
+ * @example
+ * ```tsx
+ * <SpinnerLoader />
+ * <SpinnerLoader size={32} speed="0.8s" />
+ * <SpinnerLoader size={48} mb={16} width={3} />
+ * ```
+ */
+declare const SpinnerLoader: React.ForwardRefExoticComponent<SpinnerLoaderProps & React.RefAttributes<HTMLSpanElement>>;
+export { SpinnerLoader };

package/dist/types/components/split-list/index.d.ts

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

package/dist/types/components/split-list/split-list.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/** Column size: true = equal flex, "auto" = auto width. */
+type ColSize = boolean | "auto";
+export interface SplitListProps {
+    /** Size for each column (or function for per-index). @default true */
+    colSize?: ColSize | ((index: number) => ColSize);
+    /** List items. */
+    children?: React.ReactNode;
+    /** Extra class name for the root. */
+    className?: string;
+}
+/**
+ * SplitList — horizontal list with vertical dividers between items (matches interface).
+ *
+ * @usage
+ * Use for a row of columns with centered vertical separators.
+ *
+ * @example
+ * ```tsx
+ * <SplitList colSize={true}>
+ *   <span>Item 1</span>
+ *   <span>Item 2</span>
+ * </SplitList>
+ *
+ * <SplitList colSize={(i) => (i === 0 ? true : "auto")}>
+ *   <span>Flex</span>
+ *   <span>Auto</span>
+ * </SplitList>
+ * ```
+ */
+declare const SplitList: React.ForwardRefExoticComponent<SplitListProps & React.RefAttributes<HTMLDivElement>>;
+export { SplitList };

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

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

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

@@ -0,0 +1,191 @@
+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-dot/index.d.ts

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

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

@@ -0,0 +1,47 @@
+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" | "xs" | "sm" | "lg" | "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/status-elements/index.d.ts

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

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

@@ -0,0 +1,26 @@
+import { HFZones } from '..';
+export interface AccountHealthDotProps {
+    zone: HFZones;
+    size?: number;
+}
+/**
+ * HealthDot — colored dot indicating health factor zone.
+ */
+export declare function HealthDot({ zone, size }: AccountHealthDotProps): import("react/jsx-runtime").JSX.Element;
+export interface StatusBarsProps {
+    /** Health factor zone; determines how many bars are filled (1–3) and their color. */
+    zone: HFZones;
+}
+/**
+ * StatusBars — row of 3 small bars indicating health factor zone (1–3 filled, rest gray).
+ *
+ * @usage
+ * Use next to health factor or TTL to show zone at a glance.
+ *
+ * @example
+ * ```tsx
+ * <StatusBars zone="good" />
+ * <StatusBars zone="bad" />
+ * ```
+ */
+export declare function StatusBars({ zone }: StatusBarsProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,46 @@
+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

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

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

@@ -0,0 +1,40 @@
+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

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