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

package/dist/types/components/graph/plugins/vertical-line.d.ts

@@ -0,0 +1,23 @@
+import { IChartApi, ISeriesApi, ISeriesPrimitive, ISeriesPrimitiveAxisView, IPrimitivePaneView, SeriesType, Time } from 'lightweight-charts';
+export interface VertLineOptions {
+  color: string;
+  labelText: string;
+  /** Optional value shown in the top tooltip (used by Graph overlay) */
+  value?: string | number;
+  width: number;
+  labelBackgroundColor: string;
+  labelTextColor: string;
+  showLabel: boolean;
+}
+
+export declare class VertLine implements ISeriesPrimitive<Time> {
+  constructor(
+    chart: IChartApi,
+    series: ISeriesApi<SeriesType>,
+    time: Time,
+    options?: Partial<VertLineOptions>,
+  );
+  updateAllViews(): void;
+  timeAxisViews(): readonly ISeriesPrimitiveAxisView[];
+  paneViews(): readonly IPrimitivePaneView[];
+}

package/dist/types/components/grid-td-cell/grid-td-cell.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+export interface GridTDCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    children?: React.ReactNode;
+}
+/**
+ * GridTDCell — a simple table cell wrapper
+ */
+export declare function GridTDCell({ children, className, ...props }: GridTDCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/grid-td-cell/index.d.ts

@@ -0,0 +1 @@
+export * from './grid-td-cell';

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

@@ -0,0 +1,34 @@
+import type * as React from "react";
+/**
+ * GuardProps — props for Guard component.
+ */
+export interface GuardProps {
+    showGuard: boolean;
+    guard: React.ReactNode;
+}
+/**
+ * Guard — conditional rendering wrapper component.
+ *
+ * @usage
+ * Use Guard to conditionally render content based on a boolean condition:
+ * loading states, conditional content display, guard clauses, protected content.
+ *
+ * Props:
+ * - `showGuard` — if true, renders guard instead of children (required).
+ * - `guard` — content to render when showGuard is true (required).
+ * - `children` — content to render when showGuard is false (required).
+ *
+ * Note: Simple conditional rendering wrapper that helps avoid ternary operators in JSX.
+ * When showGuard is true, renders guard; otherwise renders children.
+ *
+ * @example
+ * ```tsx
+ * <Guard
+ *   showGuard={isLoading}
+ *   guard={<Loader />}
+ * >
+ *   <Content />
+ * </Guard>
+ * ```
+ */
+export declare function Guard({ showGuard, guard, children, }: React.PropsWithChildren<GuardProps>): React.ReactElement;

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

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

package/dist/types/components/head-cell/head-cell.d.ts

@@ -0,0 +1,108 @@
+import * as React from "react";
+export type SortDirection = "asc" | "desc" | null;
+export type ArrowPosition = "left" | "right";
+export interface HeadCellProps {
+    /**
+     * Title to display in the header cell
+     */
+    title: React.ReactNode;
+    /**
+     * Help tip to display next to title
+     */
+    tip?: React.ReactNode;
+    /**
+     * Position of the sort arrow
+     */
+    arrowPosition?: ArrowPosition;
+    /**
+     * Current sort direction (null = not sorted)
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Sort tooltip text
+     */
+    sortTip?: React.ReactNode;
+    /**
+     * Field name for sort tooltip (used in default sortTip)
+     */
+    sortField?: string;
+    /**
+     * Callback when sort is triggered
+     */
+    onSort?: () => void;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * HeadCell — table header cell component with sorting support.
+ *
+ * @usage
+ * Use HeadCell in table headers when you need:
+ * - Sortable columns with visual indicators
+ * - Tooltips explaining the sort action
+ * - Help tips for column information
+ *
+ * @example
+ * ```tsx
+ * // Basic sortable header
+ * <HeadCell
+ *   title="Amount"
+ *   sortDirection="asc"
+ *   onSort={() => handleSort("amount")}
+ * />
+ *
+ * // With help tip
+ * <HeadCell
+ *   title="APY"
+ *   tip="Annual Percentage Yield"
+ *   sortDirection={sortDir}
+ *   onSort={handleSort}
+ * />
+ *
+ * // With custom sort tooltip
+ * <HeadCell
+ *   title="Value"
+ *   sortTip="Click to sort by value"
+ *   onSort={handleSort}
+ * />
+ * ```
+ */
+export declare function HeadCell({ title, tip, arrowPosition, sortDirection, sortField, sortTip, onSort, className, }: HeadCellProps): React.ReactElement;
+export interface SimpleHeadCellProps {
+    /**
+     * Title to display in the header cell
+     */
+    title: React.ReactNode;
+    /**
+     * Help tip to display next to title
+     */
+    tip?: React.ReactNode;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * SimpleHeadCell — simple table header cell without sorting.
+ *
+ * @usage
+ * Use SimpleHeadCell in table headers when you don't need sorting:
+ * - Non-sortable columns
+ * - Static headers
+ * - Headers with only help tips
+ *
+ * @example
+ * ```tsx
+ * // Basic header
+ * <SimpleHeadCell title="Status" />
+ *
+ * // With help tip
+ * <SimpleHeadCell
+ *   title="Health Factor"
+ *   tip="Ratio of collateral value to borrowed value"
+ * />
+ * ```
+ */
+export declare function SimpleHeadCell({ title, tip, className, }: SimpleHeadCellProps): React.ReactElement;

package/dist/types/components/head-cell/index.d.ts

@@ -0,0 +1 @@
+export { type ArrowPosition, HeadCell, type HeadCellProps, SimpleHeadCell, type SimpleHeadCellProps, type SortDirection, } from './head-cell';

package/dist/types/components/health-factor/health-factor.d.ts

@@ -0,0 +1,40 @@
+import type * as React from "react";
+export type HFZones = "good" | "medium" | "bad" | "critical" | "liquidation";
+export declare const GOOD_HF = 15000;
+export declare const BAD_HF = 11000;
+/**
+ * Determines the health factor zone based on the value
+ * @param hf - Health factor value in basis points (e.g., 15000 for 1.5)
+ * @returns The health factor zone or undefined
+ */
+export declare const getHFZones: (hf: number | bigint | undefined) => HFZones | undefined;
+export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Health factor value in basis points (e.g. 15000 = 1.5, 10000 = 1.0). */
+    value: number | bigint;
+    /** Debt in base units; when 0n, display shows "N/A". */
+    debt?: bigint;
+    /** Decimal places for the displayed value. @default 3 */
+    decimals?: number;
+    /** Pre-computed zone; if not set, derived from value. */
+    zone?: HFZones | null;
+    /**
+     * How to indicate zone: "color" (text color only) or "bars" (StatusBars before value).
+     * @default "color"
+     */
+    zoneType?: "color" | "bars";
+}
+/**
+ * HealthFactor — displays health factor value with optional zone color or StatusBars.
+ *
+ * @usage
+ * Use for account/collateral health: value in basis points, zero debt shows "N/A".
+ * zoneType "color" colors the text; zoneType "bars" shows StatusBars (and optional color).
+ *
+ * @example
+ * ```tsx
+ * <HealthFactor value={15000} debt={1000000n} />
+ * <HealthFactor value={12000} debt={1000000n} zoneType="bars" zone="medium" />
+ * <HealthFactor value={15000} debt={0n} />  // "N/A"
+ * ```
+ */
+export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/health-factor/index.d.ts

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

package/dist/types/components/help-center-container/help-center-container.d.ts

@@ -0,0 +1,22 @@
+import { BlockSyncProps } from '../../types/footer';
+import type * as React from "react";
+export interface HelpCenterContainerProps {
+    blockSyncProps: BlockSyncProps;
+    gapFromFooter: number;
+    footerHeight: number;
+}
+/**
+ * HelpCenterContainer - displays network sync status
+ * On desktop: fixed position in bottom-right corner, dynamically adjusts to stay above footer
+ * On mobile: static position, rendered inside footer
+ *
+ * @example
+ * ```tsx
+ * <HelpCenterContainer
+ *   blockSyncProps={blockSyncProps}
+ *   footerHeight={108}
+ *   gapFromFooter={8}
+ * />
+ * ```
+ */
+export declare function HelpCenterContainer({ blockSyncProps, footerHeight, gapFromFooter, }: HelpCenterContainerProps): React.ReactElement;

package/dist/types/components/help-center-container/index.d.ts

@@ -0,0 +1 @@
+export * from './help-center-container';

package/dist/types/components/help-sections/help-sections.d.ts

@@ -0,0 +1,33 @@
+import type * as React from "react";
+export interface HelpSectionsProps {
+    /**
+     * Children content (help sections)
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * HelpSections — a container for help section items
+ */
+export declare function HelpSections({ children, className }: HelpSectionsProps): import("react/jsx-runtime").JSX.Element;
+export interface HelpSectionProps {
+    /**
+     * Section title
+     */
+    title?: React.ReactNode;
+    /**
+     * Section content
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * HelpSection — a single help section with title and content
+ */
+export declare function HelpSection({ title, children, className }: HelpSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/help-sections/index.d.ts

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

package/dist/types/components/help-tip/help-tip.d.ts

@@ -0,0 +1,64 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const iconColorVariants: (props?: ({
+    iconColor?: "muted" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "foreground" | null | undefined;
+    iconHoverColor?: "muted" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "foreground" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface HelpTipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
+    /** Tooltip popup content (what appears when hovering the icon). */
+    children: React.ReactNode;
+    /** Maximum width of the tooltip panel. */
+    maxWidth?: string;
+    /** Minimum width of the tooltip panel. */
+    minWidth?: string;
+    /** Delay before showing tooltip (ms). @default 200 */
+    delayShow?: number;
+    /** Tooltip placement relative to the icon. @default "bottom" */
+    placement?: "top" | "right" | "bottom" | "left";
+    /** Size of the help icon in pixels. @default 14 */
+    iconSize?: number;
+    /** Icon color variant (default gray-90). Theme-aware: dark → gray-40, light → gray-80. */
+    iconColor?: "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "muted" | "foreground";
+    /** Icon color on hover (default gray-110). Theme-aware: dark → gray-70, light → gray-100. */
+    iconHoverColor?: "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | "muted" | "foreground";
+    /** Icon type: question circle or info. @default "question" */
+    iconVariant?: "question" | "info";
+    /** Called when the icon (trigger) is hovered. */
+    onPointerEnter?: React.PointerEventHandler<HTMLSpanElement>;
+}
+/**
+ * HelpTip — contextual help trigger: icon opens a tooltip with explanation text.
+ *
+ * @usage
+ * Use next to labels or terms to show extra context on hover:
+ * field hints, term definitions, feature explanations.
+ *
+ * @example
+ * ```tsx
+ * <div className="flex items-center gap-2">
+ *   <span>Health Factor</span>
+ *   <HelpTip>
+ *     Health Factor represents the safety of your position.
+ *     Values above 1.5 are considered healthy.
+ *   </HelpTip>
+ * </div>
+ * ```
+ */
+declare const HelpTip: React.ForwardRefExoticComponent<HelpTipProps & React.RefAttributes<HTMLSpanElement>>;
+export interface HelpTipIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof iconColorVariants> {
+    /** Size of the icon in pixels. @default 14 */
+    iconSize?: number;
+    /** Icon type: question circle or info. @default "question" */
+    iconVariant?: "question" | "info";
+}
+/**
+ * HelpTipIcon — standalone help icon (gray-90 default, gray-110 on hover).
+ * Use with a custom tooltip or when you only need the icon.
+ */
+declare const HelpTipIcon: React.ForwardRefExoticComponent<HelpTipIconProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * TipWrap — wrapper for spacing the help tip inline with text (e.g. after a label).
+ * Matches A: margin-left 6px, inline-block, line-height 0.
+ */
+declare const TipWrap: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export { HelpTip, HelpTipIcon, TipWrap };

package/dist/types/components/help-tip/index.d.ts

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

package/dist/types/components/hide-on/hide-on.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+/**
+ * Breakpoint types - supports multiple naming conventions for backwards compatibility
+ */
+export type BreakpointType = "xs" | "sm" | "md" | "lg" | "xl" | "small" | "medium" | "large" | "xlarge" | "extraSmall";
+/**
+ * @deprecated Use BreakpointType instead
+ */
+export type MediaWidthClasses = BreakpointType;
+export interface HideOnProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Breakpoint at which content should be hidden (with $ prefix)
+     */
+    $breakpoint?: BreakpointType;
+    /**
+     * Breakpoint at which content should be hidden (without $ prefix - legacy API)
+     */
+    breakpoint?: BreakpointType;
+    /**
+     * Element type to render
+     * @default "div"
+     */
+    as?: keyof JSX.IntrinsicElements;
+    children?: React.ReactNode;
+}
+/**
+ * HideOn - Hide content on specified breakpoint and above
+ *
+ * Supports both `$breakpoint` (styled-components style) and `breakpoint` props
+ * for backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * // New API
+ * <HideOn $breakpoint="sm">
+ *   <div>Hidden on small screens and above</div>
+ * </HideOn>
+ *
+ * // Legacy API
+ * <HideOn breakpoint="small">
+ *   <div>Hidden on small screens and above</div>
+ * </HideOn>
+ * ```
+ */
+export declare function HideOn({ $breakpoint, breakpoint, as: Component, children, className, ...props }: HideOnProps): React.ReactElement;
+export interface ShowOnProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Breakpoint at which content should be shown (with $ prefix)
+     */
+    $breakpoint?: BreakpointType;
+    /**
+     * Breakpoint at which content should be shown (without $ prefix - legacy API)
+     */
+    breakpoint?: BreakpointType;
+    /**
+     * Element type to render
+     * @default "div"
+     */
+    as?: keyof JSX.IntrinsicElements;
+    children?: React.ReactNode;
+}
+/**
+ * ShowOn - Show content on specified breakpoint and above
+ *
+ * Supports both `$breakpoint` (styled-components style) and `breakpoint` props
+ * for backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * // New API
+ * <ShowOn $breakpoint="md">
+ *   <div>Shown on medium screens and above</div>
+ * </ShowOn>
+ *
+ * // Legacy API
+ * <ShowOn breakpoint="medium">
+ *   <div>Shown on medium screens and above</div>
+ * </ShowOn>
+ * ```
+ */
+export declare function ShowOn({ $breakpoint, breakpoint, as: Component, children, className, ...props }: ShowOnProps): React.ReactElement;

package/dist/types/components/hide-on/index.d.ts

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

package/dist/types/components/horizontal-indicator/horizontal-indicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * HorizontalIndicator - displays a label with an optional tooltip and a value
+ *
+ * @example
+ * ```tsx
+ * <HorizontalIndicator
+ *   label="Total Value"
+ *   tip="The total value locked"
+ *   value="$1,234.56"
+ * />
+ * ```
+ */
+export interface HorizontalIndicatorProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    tip?: string;
+    valueDescription?: React.ReactNode;
+    className?: string;
+}
+declare const HorizontalIndicator: React.ForwardRefExoticComponent<HorizontalIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { HorizontalIndicator };

package/dist/types/components/horizontal-indicator/index.d.ts

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

package/dist/types/components/icon-button/icon-button.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import { BaseLink } from '../base-link/base-link';
+import * as React from "react";
+/** Button type for IconButton — matches interface (A) theme variants */
+export type IconButtonType = "outlined" | "filled" | "filledDark" | "hollow" | "empty";
+declare const iconButtonVariants: (props?: ({
+    buttonType?: "filledDark" | "outlined" | "filled" | "empty" | "hollow" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface IconButtonIconProps {
+    /** Tailwind text color class (e.g. "text-foreground", "text-gray-60") */
+    color?: "default";
+    /** Icon size in px; applied as size-* (e.g. 16 → size-4) */
+    size?: 12 | 14 | 16 | 18 | 20 | 24;
+}
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">, VariantProps<typeof iconButtonVariants> {
+    /**
+     * Renders as child element using Radix Slot
+     */
+    asChild?: boolean;
+    /**
+     * Button size in pixels (width and height). Default 40.
+     */
+    size?: number;
+    /**
+     * When provided, the button is wrapped in BaseLink with these props (e.g. href, asChild).
+     */
+    linkProps?: React.ComponentProps<typeof BaseLink>;
+}
+/**
+ * IconButton — circular button for icons or named icon. Aligned with interface (A) API and theme.
+ *
+ * @example
+ * ```tsx
+ * <IconButton icon="gear" buttonType="outlined" />
+ * <IconButton buttonType="filled" size={40}>
+ *   <FaIcon icon={faCog} className="size-4" />
+ * </IconButton>
+ * <IconButton linkProps={{ href: "/back" }} icon="back" />
+ * ```
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton, iconButtonVariants };

package/dist/types/components/icon-button/index.d.ts

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

package/dist/types/components/icons/fa-icon.d.ts

@@ -0,0 +1,2 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+export declare function FaIcon({ className, ...props }: FontAwesomeIconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { faArrowDown, faArrowLeft, faArrowRight, faArrowsUpDown, faArrowUp, faBars, faBolt, faCaretDown, faCaretLeft, faCaretRight, faCaretUp, faCheck, faChevronLeft, faChevronRight, faCircle, faCircleCheck, faCircleExclamation, faCirclePlus, faCircleQuestion, faCloud, faCog, faCreditCard, faEllipsisVertical, faEnvelope, faKeyboard, faLifeRing, faMagnifyingGlass, faMessage, faPlus, faRightFromBracket, faTrash, faTriangleExclamation, faUser, faUserPlus, faUsers, faWallet, faXmark, } from '@fortawesome/free-solid-svg-icons';
+export { FaIcon } from './fa-icon';

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

@@ -0,0 +1,35 @@
+/**
+ * Image — universal image component that works in any React framework.
+ *
+ * @usage
+ * Use Image for displaying images in a framework-agnostic way:
+ * logos, icons, asset images, general images.
+ *
+ * Props:
+ * - `src` — image source URL (required).
+ * - `alt` — alternative text for accessibility (required).
+ * - `width` — image width in pixels (required).
+ * - `height` — image height in pixels (required).
+ * - `onError` — callback when image fails to load (optional).
+ * - `onLoad` — callback when image successfully loads (optional).
+ * - `className` — additional CSS classes (optional).
+ * - `loading` — loading behavior: "lazy" | "eager" (defaults to "lazy").
+ *
+ * Note: Uses native HTML img element with optimized loading attributes.
+ * Works in any React framework (CRA, Vite, Next.js, Remix, etc.).
+ *
+ * Do NOT use Image:
+ * - when you need Next.js-specific image optimization (use next/image directly).
+ * - for background images (use CSS background-image instead).
+ */
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    onError?: () => void;
+    onLoad?: () => void;
+    className?: string;
+    loading?: "lazy" | "eager";
+}
+export declare function Image({ src, alt, width, height, onError, onLoad, className, loading, }: ImageProps): import("react/jsx-runtime").JSX.Element;

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

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