@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

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

@@ -0,0 +1,198 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import type { GraphProps } from "./graph";
+declare const graphViewVariants: (props?: ({
+    variant?: "default" | "ghost" | "elevated" | "outlined" | null | undefined;
+    size?: "full" | "default" | "sm" | "lg" | "xl" | null | undefined;
+    padding?: "none" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * GraphView component props
+ */
+export interface GraphViewProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof graphViewVariants> {
+    /**
+     * Optional title to display above the graph
+     */
+    title?: string;
+    /**
+     * Optional description or subtitle
+     */
+    description?: string;
+    /**
+     * Optional toolbar or actions to display in the header
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * Optional loading state
+     */
+    loading?: boolean;
+    /**
+     * Optional empty state message
+     */
+    emptyMessage?: string;
+    /**
+     * Optional error message
+     */
+    error?: string;
+}
+/**
+ * GraphViewWithData props - extends GraphView with actual chart data
+ */
+export interface GraphViewWithDataProps extends Omit<GraphProps, "series">, Pick<GraphViewProps, "title" | "description" | "toolbar" | "emptyMessage" | "error"> {
+    /** Series configuration - can be single or multiple series */
+    series: GraphProps["series"];
+    /** Function to call when series is unselected from legend */
+    onUnselectSeries?: GraphProps["onUnselectSeries"];
+    loading: boolean;
+    containerClassName?: string;
+    variant?: GraphViewProps["variant"];
+    size?: GraphViewProps["size"];
+    padding?: GraphViewProps["padding"];
+}
+/**
+ * GraphView component for displaying graphs, charts, and visualizations
+ *
+ * This is a container component that provides layout, loading states, and error handling
+ * for chart content. Use GraphViewWithData for a complete chart with data integration.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <GraphView>
+ *   <YourGraphComponent />
+ * </GraphView>
+ *
+ * // With title and description
+ * <GraphView
+ *   title="Network Activity"
+ *   description="Last 24 hours"
+ * >
+ *   <NetworkGraph />
+ * </GraphView>
+ *
+ * // With toolbar
+ * <GraphView
+ *   title="Performance Metrics"
+ *   toolbar={
+ *     <div className="flex gap-2">
+ *       <Button size="sm">Refresh</Button>
+ *       <Button size="sm" variant="outline">Export</Button>
+ *     </div>
+ *   }
+ * >
+ *   <PerformanceChart />
+ * </GraphView>
+ *
+ * // Different sizes
+ * <GraphView size="lg">
+ *   <LargeGraph />
+ * </GraphView>
+ *
+ * // Loading state
+ * <GraphView loading title="Loading...">
+ *   <GraphSkeleton />
+ * </GraphView>
+ *
+ * // Empty state
+ * <GraphView emptyMessage="No data available">
+ *   {null}
+ * </GraphView>
+ *
+ * // Error state
+ * <GraphView error="Failed to load data">
+ *   {null}
+ * </GraphView>
+ * ```
+ */
+declare const GraphView: React.ForwardRefExoticComponent<GraphViewProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * GraphViewWithData component integrates GraphView container with Graph chart
+ *
+ * This component combines the container features of GraphView with the charting
+ * capabilities of Graph, providing a complete solution for data visualization.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with single series
+ * <GraphViewWithData
+ *   series={[{ data: chartData, label: "Price" }]}
+ *   loading={isLoading}
+ *   graphId="my-chart"
+ *   title="Price History"
+ *   description="Last 30 days"
+ *   yMeasureUnit="$"
+ *   xMeasureUnit="time"
+ * />
+ *
+ * // Multiple series with legend
+ * <GraphViewWithData
+ *   series={[
+ *     { data: series1, label: "Series 1" },
+ *     { data: series2, label: "Series 2" },
+ *     { data: series3, label: "Series 3" }
+ *   ]}
+ *   loading={isLoading}
+ *   graphId="my-chart"
+ *   showLegend={true}
+ *   title="Multiple Metrics"
+ * />
+ *
+ * // With vertical line markers
+ * <GraphViewWithData
+ *   series={[{ data: chartData, label: "Price" }]}
+ *   loading={false}
+ *   graphId="my-chart"
+ *   verticalLineOptions={[
+ *     {
+ *       xCoordinate: someTimestamp,
+ *       options: {
+ *         labelText: "Important Event",
+ *         color: "hsl(var(--primary))",
+ *       }
+ *     }
+ *   ]}
+ * />
+ *
+ * // Empty state
+ * <GraphViewWithData
+ *   series={[]}
+ *   loading={false}
+ *   graphId="my-chart"
+ *   emptyMessage="No data available"
+ * />
+ * ```
+ */
+export declare function GraphViewWithData({ series, onUnselectSeries, loading, title, description, toolbar, emptyMessage, error, containerClassName, variant, size, padding, ...restProps }: GraphViewWithDataProps): React.ReactElement;
+/**
+ * Custom hook to manage graph sizing with an aside element
+ *
+ * This hook helps calculate the available width for a graph when there's
+ * an aside element (like a legend or info panel) next to it.
+ *
+ * @param gap - The gap in pixels between the graph and aside element
+ * @returns Object containing graphWidth, parentRef, and asideRef
+ *
+ * @example
+ * ```tsx
+ * function MyChart() {
+ *   const { graphWidth, parentRef, asideRef } = useGraphAside(16);
+ *
+ *   return (
+ *     <div ref={parentRef} className="flex gap-4">
+ *       <div style={{ width: graphWidth }}>
+ *         <GraphViewWithData {...props} />
+ *       </div>
+ *       <aside ref={asideRef}>
+ *         Legend content
+ *       </aside>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useGraphAside(gap?: number): {
+    graphWidth: number | null;
+    parentRef: React.RefObject<HTMLDivElement | null>;
+    asideRef: React.RefObject<HTMLDivElement | null>;
+};
+export { GraphView, graphViewVariants };

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

@@ -0,0 +1,49 @@
+import type { ChartOptions, DeepPartial, Time } from "lightweight-charts";
+import * as React from "react";
+import type { Point, YMeasureUnits } from "./formatters";
+import type { GraphTooltipProps } from "./graph-tooltip";
+export interface SeriesConfig {
+    data: Array<Point>;
+    label: string;
+    color?: string;
+    topColor?: string;
+    bottomColor?: string;
+    yMeasureUnit?: YMeasureUnits;
+}
+type VerticalLineOptions = Partial<{
+    color: string;
+    labelText: string;
+    width: number;
+    labelBackgroundColor: string;
+    labelTextColor: string;
+    showLabel: boolean;
+}>;
+export declare const DEFAULT_SERIES_COLORS: {
+    line: string;
+    top: string;
+    bottom: string;
+}[];
+export interface GraphProps {
+    /** Series configuration - can be single or multiple series */
+    series: Array<SeriesConfig>;
+    graphId: string;
+    className?: string;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Function to call when series is unselected from legend */
+    onUnselectSeries?: (label: string) => void;
+    yMeasureUnit?: GraphTooltipProps["yMeasureUnit"];
+    xMeasureUnit?: GraphTooltipProps["xMeasureUnit"];
+    optionsOverrides?: DeepPartial<ChartOptions>;
+    verticalLineOptions?: Array<{
+        xCoordinate: Time;
+        options?: VerticalLineOptions;
+    }>;
+}
+/**
+ * Graph component that renders a chart using lightweight-charts library
+ * with support for area series, custom tooltips, and vertical line annotations
+ * Supports single or multiple series with different colors and legends
+ */
+export declare function Graph({ series, graphId, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, }: GraphProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,7 @@
+export * from "./default-config";
+export { getXFormatter, getYFormatter, type Point as GraphPoint, type XMeasureUnits, type YMeasureUnits, } from "./formatters";
+export * from "./graph";
+export * from "./graph-current-value";
+export * from "./graph-tooltip";
+export * from "./graph-view";
+export { VertLine } from "./plugins/vertical-line";

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

@@ -0,0 +1,63 @@
+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 if >= 1000, otherwise as decimal)
+ * @returns The health factor zone or undefined
+ */
+export declare const getHFZones: (hf: number | bigint | undefined) => HFZones | undefined;
+export interface HealthFactorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The health factor value
+     * Can be provided as:
+     * - Decimal value (e.g., 1.5 for 150%)
+     * - Basis points (e.g., 15000 for 150%)
+     * Values >= 1000 are treated as basis points, < 1000 as decimal
+     */
+    value: number | bigint;
+    /**
+     * Debt amount in base units (bigint)
+     * If debt is 0, component will display "N/A"
+     */
+    debt?: bigint;
+    /**
+     * Number of decimal places to show
+     * @default 3
+     */
+    decimals?: number;
+    /**
+     * Pre-computed zone (optional). If not provided, will be calculated from value
+     */
+    zone?: HFZones | null;
+    /**
+     * Show color indicator based on health factor zone
+     * @default true
+     */
+    showColor?: boolean;
+}
+/**
+ * HealthFactor component for displaying health factor values with zone-based color coding
+ *
+ * Health factor zones:
+ * - good: >= 1.5 (15000 basis points) - Green
+ * - medium: 1.1 - 1.5 (11000-15000) - Yellow
+ * - bad: 1.05 - 1.1 (10500-11000) - Orange
+ * - critical: 1.0 - 1.05 (10000-10500) - Red
+ * - liquidation: < 1.0 (< 10000) - Red
+ *
+ * @example
+ * ```tsx
+ * // Using decimal value
+ * <HealthFactor value={1.5} debt={1000000n} />  // Shows "1.500" in green
+ * <HealthFactor value={1.2} debt={1000000n} decimals={2} />  // Shows "1.20" in yellow
+ *
+ * // Using basis points
+ * <HealthFactor value={15000} debt={1000000n} />  // Shows "1.500" in green
+ *
+ * // Zero debt shows N/A
+ * <HealthFactor value={1.5} debt={0n} />  // Shows "N/A"
+ * ```
+ */
+export declare function HealthFactor({ value, debt, decimals, zone, showColor, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { BlockSyncProps } from "../types/footer";
+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/hide-on.d.ts

@@ -0,0 +1,32 @@
+import type * as React from "react";
+export type MediaWidthClasses = "small" | "medium" | "large" | "xlarge";
+export interface HideOnProps extends React.HTMLAttributes<HTMLDivElement> {
+    $breakpoint: MediaWidthClasses;
+    children: React.ReactNode;
+}
+/**
+ * HideOn - Hide content on specified breakpoint and above
+ *
+ * @example
+ * ```tsx
+ * <HideOn $breakpoint="small">
+ *   <div>Hidden on small screens and above</div>
+ * </HideOn>
+ * ```
+ */
+export declare function HideOn({ $breakpoint, children, className, ...props }: HideOnProps): React.ReactElement;
+export interface ShowOnProps extends React.HTMLAttributes<HTMLDivElement> {
+    $breakpoint: MediaWidthClasses;
+    children: React.ReactNode;
+}
+/**
+ * ShowOn - Show content on specified breakpoint and above
+ *
+ * @example
+ * ```tsx
+ * <ShowOn $breakpoint="medium">
+ *   <div>Shown on medium screens and above</div>
+ * </ShowOn>
+ * ```
+ */
+export declare function ShowOn({ $breakpoint, children, className, ...props }: ShowOnProps): React.ReactElement;

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).