@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/types/components/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/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/index.d.ts

@@ -1,22 +1,65 @@
 export * from "./alert-dialog";
+export * from "./asset-line";
+export * from "./assets-list-cell";
+export * from "./assets-ratio";
 export * from "./auth";
 export * from "./badge";
+export * from "./base-link";
+export * from "./block-sync";
+export * from "./breadcrumbs";
 export * from "./buttons";
+export * from "./card-grid";
 export * from "./cards";
 export * from "./checkbox";
+export * from "./checkbox-item";
+export type { ExternalAPYData, ExtraRewardApy, PoolBaseAPY, } from "./compound-apy";
+export * from "./compound-apy";
+export * from "./credit-session-status";
+export * from "./description";
+export * from "./detailed-page-title";
 export * from "./dialog";
 export * from "./dropdown-menu";
-export * from "./editable-table";
+export * from "./error-message";
+export * from "./filter";
+export * from "./form";
+export * from "./graph";
+export * from "./guard";
+export * from "./health-factor";
+export * from "./help-center-container";
+export * from "./hide-on";
+export * from "./horizontal-indicator";
+export * from "./image";
 export * from "./input";
 export * from "./label";
 export * from "./layout";
+export * from "./liquidation";
+export * from "./loader-guard";
+export * from "./loading-guard";
 export * from "./markdown-viewer";
+export * from "./navbar";
+export * from "./navbar-indicator-context";
+export * from "./navitem";
+export * from "./not-found";
+export * from "./options-list";
+export * from "./page-title";
+export * from "./percent-indicator";
+export * from "./pool-points-indicator";
 export * from "./search-bar";
+export * from "./search-line";
 export * from "./select";
+export * from "./short-string";
 export * from "./signatures";
 export * from "./skeleton";
+export * from "./stat-badge";
+export * from "./tab-control";
 export * from "./table";
 export * from "./tabs";
 export * from "./textarea";
+export * from "./theme-provider";
+export * from "./theme-toggle";
 export * from "./token-icon";
+export * from "./token-symbol";
 export * from "./tooltip";
+export * from "./typed-intl";
+export * from "./vspace";
+export * from "./with-filter-button";

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

@@ -1,12 +1,26 @@
-import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const inputVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Input — text input component with error handling.
+ * InputProps — props for Input component.
+ */
+interface InputProps extends Omit<React.ComponentProps<"input">, "size">, VariantProps<typeof inputVariants> {
+    hasError?: boolean;
+    errorMessage?: string;
+}
+/**
+ * Input — text input component with size variants and error handling.
  *
  * @usage
  * Use Input for text input fields in forms:
- * text inputs, number inputs, email inputs, password inputs, search inputs, etc.
+ * text inputs, number inputs, email inputs, password inputs, search inputs.
  *
  * Props:
+ * - `size` — input size: "sm", "default", "lg" (defaults to "default").
+ * - `variant` — visual variant: "default", "error", "success" (defaults to "default").
  * - `hasError` — if true, displays error styling (red border).
  * - `errorMessage` — error message displayed below input when hasError is true and value is not empty.
  * - All standard HTML input props are supported (type, placeholder, value, onChange, etc.).
@@ -18,10 +32,13 @@ import * as React from "react";
  * Do NOT use Input:
  * - for multi-line text input (use Textarea component).
  * - for file uploads (use appropriate file input components).
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter text" />
+ * <Input size="lg" variant="error" hasError errorMessage="Invalid input" />
+ * <Input size="sm" type="email" />
+ * ```
  */
-interface InputProps extends React.ComponentProps<"input"> {
-    hasError?: boolean;
-    errorMessage?: string;
-}
-export declare function Input({ hasError, errorMessage, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Input({ hasError, errorMessage, value, size, variant, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export { inputVariants };

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

@@ -1,20 +1,41 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
+declare const labelVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "muted" | "error" | "success" | null | undefined;
+    required?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Label — component for form field labels.
+ * Label — component for form field labels with size and variant options.
  *
  * @usage
  * Use Label to label form inputs and controls:
  * input labels, checkbox labels, select labels, form field labels.
  *
- * Note: Uses white text color and large text size. Automatically handles disabled state styling.
- * All standard Radix UI Label props are supported.
+ * Props:
+ * - `size` — label size: "sm", "default", "lg" (defaults to "default").
+ * - `variant` — visual variant: "default", "muted", "error", "success" (defaults to "default").
+ * - `required` — if true, displays asterisk (*) after label text.
+ * - All standard Radix UI Label props are supported (htmlFor, etc.).
+ *
+ * Note: Uses white text color and large text size by default. Automatically handles disabled state styling.
  * Prefer using this component instead of @radix-ui/react-label directly.
  *
  * Do NOT use Label:
  * - for non-form text labels (use appropriate text components).
  * - when you need different styling that doesn't match form label semantics.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * <Label size="sm" variant="muted">Optional field</Label>
+ * <Label required>Required field</Label>
+ * ```
  */
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
-export { Label };
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "muted" | "error" | "success" | null | undefined;
+    required?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label, labelVariants };

package/dist/types/components/layout/app-logo.d.ts

@@ -10,6 +10,7 @@
  * - `size` — logo size: "default" or "small" (defaults to "default").
  *
  * Note: Uses Gearbox Protocol logo from static CDN. Logo size and text size adjust based on size prop.
+ * Works with any React framework (not tied to Next.js).
  *
  * Do NOT use AppLogo:
  * - for custom logos or branding (use Image component with custom logo).

package/dist/types/components/layout/col.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+/**
+ * ColProps — props for Col component.
+ */
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+    start?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | "auto";
+    order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "first" | "last" | "none";
+}
+/**
+ * Col — grid column component for responsive column layouts.
+ *
+ * @usage
+ * Use Col within Grid component to define responsive column spans:
+ * responsive columns, grid items, flexible column widths.
+ *
+ * Props:
+ * - `span` — number of columns to span (1-12, "full", or "auto", defaults to 12).
+ * - `sm` — column span for small screens (≥640px).
+ * - `md` — column span for medium screens (≥768px).
+ * - `lg` — column span for large screens (≥1024px).
+ * - `xl` — column span for extra large screens (≥1280px).
+ * - `start` — starting column position (1-13 or "auto").
+ * - `order` — flex order for column reordering (1-12, "first", "last", "none").
+ *
+ * Note: Works with Tailwind grid system (grid-cols-12).
+ * Use within a Grid container with appropriate column configuration.
+ * "full" spans all columns, "auto" uses automatic sizing.
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={12}>
+ *   <Col span={6}>Half width</Col>
+ *   <Col span={6}>Half width</Col>
+ *   <Col span={12} md={6}>Full on mobile, half on desktop</Col>
+ * </Grid>
+ * ```
+ */
+export declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/container.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+/**
+ * ContainerProps — props for Container component.
+ */
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    padding?: boolean;
+    center?: boolean;
+}
+/**
+ * Container — responsive content width container component.
+ *
+ * @usage
+ * Use Container to constrain content width for better readability:
+ * page containers, section wrappers, centered content, responsive layouts.
+ *
+ * Props:
+ * - `maxWidth` — maximum width constraint: "sm", "md", "lg", "xl", "2xl", "full" (defaults to "xl").
+ * - `padding` — whether to apply horizontal padding (defaults to true).
+ * - `center` — whether to center container horizontally (defaults to true).
+ *
+ * Note: Follows best practices for content readability and layout.
+ * Applies responsive padding (px-4 sm:px-6 lg:px-8) when padding is true.
+ * Automatically centers content when center is true using mx-auto.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <h1>Page Content</h1>
+ * </Container>
+ *
+ * <Container maxWidth="lg" padding={false}>
+ *   <CustomContent />
+ * </Container>
+ * ```
+ */
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/footer.d.ts

@@ -1,9 +1,42 @@
+import React from "react";
 import { type LegalReferences } from "./legal-disclaimer";
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    copyright?: React.ReactNode;
+    social?: React.ReactNode;
+    version?: string;
+    secondaryInfo?: React.ReactNode;
+    legalLinks?: React.ReactNode;
+    containerClassName?: string;
+    mobileExtraContent?: React.ReactNode;
+}
 /**
- * Footer — application footer component with legal links and branding.
+ * Footer component
+ * Two-column layout with logo/copyright on left, social/info on right
+ * Responsive design with mobile adaptations
+ */
+export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * FooterLink — link component for footer navigation.
+ */
+interface FooterLinkProps {
+    href: string;
+    text: string;
+    external?: boolean;
+}
+export declare function FooterLink({ href, text, external }: FooterLinkProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FooterLinkSection — section component for grouping footer links.
+ */
+export declare function FooterLinkSection({ title, links, }: {
+    title: string;
+    links: FooterLinkProps[];
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * GearboxFooter — application footer component with legal links and branding.
  *
  * @usage
- * Use Footer as the main application footer:
+ * Use GearboxFooter as the main application footer:
  * legal links, documentation links, app branding, legal disclaimer.
  *
  * Props:
@@ -12,15 +45,21 @@ import { type LegalReferences } from "./legal-disclaimer";
  *   - `termsOfService` — Terms of Service URL.
  *   - `privacyNotice` — Privacy Notice URL.
  *   - `riskDisclosure` — Risk Disclosure URL.
+ * - `mobileStatusContent` — content to display at the bottom of footer on mobile (e.g., BlockSync).
  *
- * Note: Footer includes AppLogo, LegalDisclaimer, and predefined link sections for Legal and Developers.
+ * Note: GearboxFooter includes AppLogo, LegalDisclaimer, and predefined link sections for Legal and Developers.
  * Uses responsive grid layout (1 column on mobile, 2 columns on desktop).
+ * Built on top of the abstract Footer component.
  *
- * Do NOT use Footer:
+ * Do NOT use GearboxFooter:
  * - for page-specific footers.
  * - for section footers within content (use appropriate container components).
+ * - if you need a custom footer layout (use the abstract Footer component directly).
  */
-export declare function Footer({ appName, legalReferences, }: {
+export declare function GearboxFooter({ appName, legalReferences, className, mobileStatusContent, }: {
     appName: string;
     legalReferences: LegalReferences;
+    className?: string;
+    mobileStatusContent?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/layout/grid.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+/**
+ * GridProps — props for Grid component.
+ */
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20 | 24;
+    gapX?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20 | 24;
+    gapY?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20 | 24;
+}
+/**
+ * Grid — responsive grid layout component using CSS Grid.
+ *
+ * @usage
+ * Use Grid to create responsive grid-based layouts:
+ * page layouts, card grids, responsive columns, flexible grid structures.
+ *
+ * Props:
+ * - `cols` — number of columns (1-12) or custom CSS grid template string (defaults to 12).
+ * - `sm` — number of columns for small screens (≥640px).
+ * - `md` — number of columns for medium screens (≥768px).
+ * - `lg` — number of columns for large screens (≥1024px).
+ * - `xl` — number of columns for extra large screens (≥1280px).
+ * - `gap` — gap between grid items in Tailwind spacing units (defaults to 4).
+ * - `gapX` — horizontal gap override (overrides gap).
+ * - `gapY` — vertical gap override.
+ *
+ * Note: Works with Col component for flexible column-based layouts.
+ * Supports both numeric columns (uses Tailwind grid classes) and custom CSS grid templates.
+ * When cols is a string, uses inline style for grid-template-columns.
+ *
+ * @example
+ * ```tsx
+ * // Numeric columns (uses Tailwind classes)
+ * <Grid cols={12}>...</Grid>
+ *
+ * // Custom CSS grid columns
+ * <Grid cols="130px 120px 1.5fr repeat(3, 1fr)">...</Grid>
+ *
+ * // Responsive columns
+ * <Grid cols={1} sm={2} md={3} lg={4}>...</Grid>
+ * ```
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/header.d.ts

@@ -1,25 +1,81 @@
-import { type NavigationButtonProps } from "../buttons";
+import React from "react";
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Navigation content (shown on desktop, hidden on mobile unless specified)
+     */
+    navigation?: React.ReactNode;
+    /**
+     * Logo or brand content
+     */
+    logo?: React.ReactNode;
+    /**
+     * Action buttons or elements (e.g., Sign In, Sign Up)
+     */
+    actions?: React.ReactNode;
+    /**
+     * Whether the header should be fixed to the top of the viewport
+     */
+    fixed?: boolean;
+    /**
+     * Whether the header should stick to the top when scrolling
+     */
+    sticky?: boolean;
+    /**
+     * Additional className for the inner container
+     */
+    containerClassName?: string;
+    /**
+     * Custom content for mobile menu (optional)
+     * If not provided, the desktop navigation will be used
+     */
+    mobileMenuContent?: React.ReactNode;
+}
 /**
- * Header — application header component with navigation and wallet connection.
+ * Header component with support for navigation, logo, and actions
+ * Follows responsive design practices with automatic mobile menu support
  *
  * @usage
  * Use Header as the main application header:
  * top navigation bar, app logo, navigation menu, wallet connection button.
  *
- * Props:
- * - `appName` — application name displayed next to logo (required).
- * - `navigation` — array of NavigationButton props for navigation menu (required).
- * - `connectKitButton` — ConnectKit wallet connection button component (required).
- *
  * Note: Header is sticky at the top with z-50. Navigation is hidden on mobile (md:flex).
  * Uses NavigationButton components for navigation items.
  *
  * Do NOT use Header:
  * - for page-specific headers.
  * - for section headers within content (use CardHeader or h2/h3 elements).
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   logo={<div>MyApp</div>}
+ *   navigation={
+ *     <nav className="flex gap-4">
+ *       <NavItem href="/" active>Home</NavItem>
+ *       <NavItem href="/about">About</NavItem>
+ *     </nav>
+ *   }
+ *   actions={
+ *     <>
+ *       <Button variant="ghost">Sign In</Button>
+ *       <Button>Sign Up</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example With custom mobile menu
+ * ```tsx
+ * <Header
+ *   logo={<div>MyApp</div>}
+ *   navigation={<DesktopNav />}
+ *   mobileMenuContent={
+ *     <nav className="flex flex-col gap-2">
+ *       <a href="/" className="px-4 py-3">Home</a>
+ *       <a href="/about" className="px-4 py-3">About</a>
+ *     </nav>
+ *   }
+ * />
+ * ```
  */
-export declare function Header({ appName, navigation, connectKitButton, }: {
-    appName: string;
-    navigation: NavigationButtonProps[];
-    connectKitButton: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;

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

@@ -1,5 +1,9 @@
 export * from "./app-logo";
+export * from "./col";
+export * from "./container";
 export * from "./footer";
+export * from "./grid";
 export * from "./header";
+export * from "./layout";
 export * from "./legal-disclaimer";
 export * from "./page-layout";

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * Layout component with grid-based structure
+ * Supports header, footer, and main content areas
+ * Fully responsive with mobile-first approach
+ */
+export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+export * from "./liquidation-assets-table";
+export * from "./liquidation-graph";
+export * from "./liquidation-graph-legend";
+export * from "./liquidation-graph-tip";

package/dist/types/components/liquidation/liquidation-assets-table.d.ts

@@ -0,0 +1,14 @@
+import type { TokenData } from "@gearbox-protocol/sdk";
+import type * as React from "react";
+import type { Address } from "viem";
+import type { UseLiquidationGraphParamsReturnType } from "../../hooks/use-liquidation";
+export interface LiquidationModellingAssetsTableProps {
+    tokensList: Record<Address, TokenData>;
+    graphParams: UseLiquidationGraphParamsReturnType;
+    data: Array<{
+        token: Address;
+    }>;
+    prices: Record<Address, bigint>;
+    editedPrices: Record<Address, bigint>;
+}
+export declare function LiquidationModellingAssetsTable({ tokensList, graphParams, data, prices, editedPrices, }: LiquidationModellingAssetsTableProps): React.ReactElement;

package/dist/types/components/liquidation/liquidation-graph-legend.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function LiquidationGraphLegend(): React.ReactElement;

package/dist/types/components/liquidation/liquidation-graph-tip.d.ts

@@ -0,0 +1,13 @@
+import type { TokenData } from "@gearbox-protocol/sdk";
+import type * as React from "react";
+import type { AxisParams } from "../../hooks/use-liquidation";
+export interface LiquidationGraphTipProps {
+    activePointX: number | undefined;
+    activePointY: number | undefined;
+    xAxis: AxisParams | undefined;
+    yAxis: AxisParams | undefined;
+    hf: number;
+    underlyingToken: TokenData | undefined;
+    maxLabelLength?: number;
+}
+export declare function LiquidationGraphTip({ activePointX, activePointY, xAxis, yAxis, hf, underlyingToken, maxLabelLength, }: LiquidationGraphTipProps): React.ReactElement;

package/dist/types/components/liquidation/liquidation-graph.d.ts

@@ -0,0 +1,19 @@
+import type { Asset, CalcQuotaUpdateProps, TokenData } from "@gearbox-protocol/sdk";
+import type * as React from "react";
+import type { Address } from "viem";
+import type { UseLiquidationGraphParamsReturnType } from "../../hooks/use-liquidation";
+export interface LiquidationGraphProps {
+    graphParams: UseLiquidationGraphParamsReturnType;
+    assets: Array<Asset>;
+    liquidationThresholds: CalcQuotaUpdateProps["liquidationThresholds"];
+    quotas: Record<Address, Asset>;
+    quotasInfo: CalcQuotaUpdateProps["quotas"];
+    underlyingToken: Address;
+    debt: bigint;
+    tokensList: Record<Address, TokenData>;
+    prices: Record<Address, bigint>;
+    width?: number;
+    height?: number;
+    maxLabelLength?: number;
+}
+export declare function LiquidationGraph({ graphParams, assets, liquidationThresholds, quotas, quotasInfo, underlyingToken: underlyingTokenAddress, debt, prices, tokensList, width, height, maxLabelLength, }: LiquidationGraphProps): React.ReactElement;

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

@@ -0,0 +1,17 @@
+import type * as React from "react";
+export interface LoaderGuardProps {
+    showGuard: boolean;
+    loader?: React.ReactNode;
+}
+/**
+ * LoaderGuard - displays loading state while data is being fetched
+ * Uses Guard component internally with a default loader
+ *
+ * @example
+ * ```tsx
+ * <LoaderGuard showGuard={isLoading}>
+ *   <Content />
+ * </LoaderGuard>
+ * ```
+ */
+export declare function LoaderGuard({ showGuard: show, children, loader, }: React.PropsWithChildren<LoaderGuardProps>): React.ReactElement;

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

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export interface LoadingGuardProps {
+    showGuard: boolean;
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}
+/**
+ * LoadingGuard - displays loading state while data is being fetched
+ * Shows a loading skeleton or custom fallback when showGuard is true
+ *
+ * @example
+ * ```tsx
+ * <LoadingGuard showGuard={isLoading}>
+ *   <UserProfile user={user} posts={posts} />
+ * </LoadingGuard>
+ * ```
+ */
+export declare function LoadingGuard({ showGuard, children, fallback, }: LoadingGuardProps): React.ReactElement;