@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -0,0 +1,109 @@
+/**
+ * Filter Components
+ *
+ * A comprehensive set of filter components for building complex filter interfaces.
+ * These components work together with DropdownMenu components from dropdown-menu
+ * to create filter dropdowns similar to CreditSessionsListFilter.
+ *
+ * @example Building a complex filter dropdown:
+ * ```tsx
+ * import {
+ *   DropdownMenu,
+ *   DropdownMenuContent,
+ *   DropdownMenuTrigger,
+ *   DropdownMenuRadioGroup,
+ * } from "../dropdown-menu";
+ * import {
+ *   FilterButton,
+ * } from "../buttons/filter-button";
+ * import {
+ *   FilterLabel,
+ *   FilterSeparator,
+ *   FilterCheckboxItem,
+ *   FilterRadioItem,
+ *   FilterGroup,
+ *   FilterChips,
+ * } from "./filter";
+ *
+ * function CreditSessionsListFilter() {
+ *   const [status, setStatus] = React.useState<string[]>([]);
+ *   const [type, setType] = React.useState<string>("all");
+ *
+ *   const activeFilters = [
+ *     ...(status.length > 0 ? status.map(s => ({ id: `status-${s}`, label: `Status: ${s}` })) : []),
+ *     ...(type !== "all" ? [{ id: "type", label: `Type: ${type}` }] : []),
+ *   ];
+ *
+ *   return (
+ *     <>
+ *       <DropdownMenu>
+ *         <DropdownMenuTrigger asChild>
+ *           <FilterButton />
+ *         </DropdownMenuTrigger>
+ *         <DropdownMenuContent>
+ *           <FilterGroup>
+ *             <FilterLabel>Status</FilterLabel>
+ *             <FilterCheckboxItem
+ *               checked={status.includes("active")}
+ *               onCheckedChange={(checked) =>
+ *                 setStatus(checked
+ *                   ? [...status, "active"]
+ *                   : status.filter(s => s !== "active"))
+ *               }
+ *             >
+ *               Active
+ *             </FilterCheckboxItem>
+ *             <FilterCheckboxItem
+ *               checked={status.includes("inactive")}
+ *               onCheckedChange={(checked) =>
+ *                 setStatus(checked
+ *                   ? [...status, "inactive"]
+ *                   : status.filter(s => s !== "inactive"))
+ *               }
+ *             >
+ *               Inactive
+ *             </FilterCheckboxItem>
+ *           </FilterGroup>
+ *           <FilterSeparator />
+ *           <FilterGroup>
+ *             <FilterLabel>Type</FilterLabel>
+ *             <DropdownMenuRadioGroup value={type} onValueChange={setType}>
+ *               <FilterRadioItem value="all">All</FilterRadioItem>
+ *               <FilterRadioItem value="credit">Credit</FilterRadioItem>
+ *               <FilterRadioItem value="debit">Debit</FilterRadioItem>
+ *             </DropdownMenuRadioGroup>
+ *           </FilterGroup>
+ *         </DropdownMenuContent>
+ *       </DropdownMenu>
+ *       <FilterChips
+ *         filters={activeFilters}
+ *         onRemoveFilter={(id) => {
+ *           if (id.startsWith("status-")) {
+ *             setStatus(status.filter(s => `status-${s}` !== id));
+ *           } else if (id === "type") {
+ *             setType("all");
+ *           }
+ *         }}
+ *         onClearAll={() => {
+ *           setStatus([]);
+ *           setType("all");
+ *         }}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export * from "./filter-block";
+export * from "./filter-checkbox-item";
+export * from "./filter-chip";
+export * from "./filter-chips";
+export * from "./filter-dropdown-item";
+export * from "./filter-group";
+export * from "./filter-label";
+export * from "./filter-modal";
+export * from "./filter-modal-item";
+export * from "./filter-radio-item";
+export * from "./filter-separator";
+export type { FilterModalSelectList } from "./interface";
+export * from "./variants";

package/dist/types/components/filter/interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Type representing a list of selected filter values for FilterModal component
+ * Can be a Set or Array of values
+ */
+export type FilterModalSelectList<T> = Set<T> | T[];
+/**
+ * @deprecated Use FilterModalSelectList instead
+ * This type is kept for backward compatibility
+ */
+export type SelectFilterList<T> = FilterModalSelectList<T>;
+/**
+ * Type representing a filter range with from and to values
+ * Used for range-based filtering (e.g., date ranges, number ranges)
+ */
+export type FilterRange<T = number> = {
+    /**
+     * The starting value of the range
+     */
+    from: T;
+    /**
+     * The ending value of the range
+     */
+    to: T;
+};

package/dist/types/components/filter/variants.d.ts

@@ -0,0 +1,3 @@
+export declare const filterBlockVariants: (props?: ({
+    variant?: "default" | "ghost" | "elevated" | "outlined" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/form/form-field.d.ts

@@ -0,0 +1,38 @@
+import type * as React from "react";
+import { Input } from "../input";
+interface FormFieldProps {
+    label: string;
+    error?: string;
+    required?: boolean;
+    helperText?: string;
+    inputProps?: React.ComponentProps<typeof Input>;
+    className?: string;
+}
+/**
+ * FormField component - Composition of Label and Input with error handling
+ *
+ * Automatically manages ARIA attributes for accessibility
+ *
+ * @example
+ * ```tsx
+ * <FormField
+ *   label="Email"
+ *   required
+ *   inputProps={{ type: "email", placeholder: "Enter your email" }}
+ * />
+ *
+ * <FormField
+ *   label="Username"
+ *   error="Username is already taken"
+ *   inputProps={{ value: username, onChange: handleChange }}
+ * />
+ *
+ * <FormField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   inputProps={{ type: "password" }}
+ * />
+ * ```
+ */
+export declare function FormField({ label, error, required, helperText, inputProps, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from "./form-field";

package/dist/types/components/graph/default-config.d.ts

@@ -0,0 +1,20 @@
+import type { AreaSeriesPartialOptions, ChartOptions, DeepPartial } from "lightweight-charts";
+import type { VertLineOptions } from "./plugins/vertical-line";
+export declare const DEFAULT_AREA_SERIES: AreaSeriesPartialOptions;
+export declare const DEFAULT_VERTICAL_LINE: Partial<VertLineOptions>;
+/**
+ * Gets the default chart options with resolved CSS colors
+ * Call this at runtime to ensure CSS variables are properly resolved
+ */
+export declare function getDefaultOptions(): DeepPartial<ChartOptions>;
+/**
+ * Gets the default series options with resolved CSS colors
+ * Call this at runtime to ensure CSS variables are properly resolved
+ */
+export declare function getDefaultSeries(): AreaSeriesPartialOptions;
+/**
+ * Gets the default vertical line options with resolved CSS colors
+ * Call this at runtime to ensure CSS variables are properly resolved
+ */
+export declare function getDefaultVerticalLine(): Partial<VertLineOptions>;
+export declare const DEFAULT_OPTIONS: DeepPartial<ChartOptions>;

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

@@ -0,0 +1,16 @@
+import type { Time } from "lightweight-charts";
+export interface Point {
+    time: Time;
+    value: number;
+}
+interface Flavoring<FlavorT> {
+    _type?: FlavorT;
+}
+type Flavor<T, FlavorT> = T & Flavoring<FlavorT>;
+export type YMeasureUnits = "$" | "%" | "none" | Flavor<string, "token">;
+type YFormatter = (v: number, symbol: YMeasureUnits | undefined, format?: "full" | "short") => string;
+export declare const getYFormatter: (unit: YMeasureUnits) => YFormatter;
+export type XMeasureUnits = "time" | "%";
+type XFormatter = (time: Time, symbol: XMeasureUnits | undefined) => string;
+export declare const getXFormatter: (unit: XMeasureUnits, points?: Point[]) => XFormatter;
+export {};

package/dist/types/components/graph/graph-current-value.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import type { Point, XMeasureUnits, YMeasureUnits } from "./formatters";
+export interface GraphCurrentValueProps {
+    point: Point;
+    xMeasureUnit: XMeasureUnits;
+    yMeasureUnit: YMeasureUnits;
+    className?: string;
+}
+/**
+ * GraphCurrentValue component displays the current value in single mode
+ * without background, border, or legend - just date and value
+ */
+export declare function GraphCurrentValue({ point, xMeasureUnit, yMeasureUnit, className, }: GraphCurrentValueProps): React.ReactElement;

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

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import type { Point, XMeasureUnits, YMeasureUnits } from "./formatters";
+import type { SeriesConfig } from "./graph";
+export interface GraphTooltipProps {
+    /** Points by series label */
+    points: Map<string, Point>;
+    /** Series configuration */
+    series: Array<SeriesConfig>;
+    xMeasureUnit: XMeasureUnits;
+    yMeasureUnit: YMeasureUnits;
+    className?: string;
+    /** Position of the tooltip (x, y coordinates relative to the chart container) */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Container element to constrain tooltip within bounds */
+    containerRef?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * GraphTooltip component displays the current value and time on the graph
+ * Supports single or multiple series
+ */
+export declare function GraphTooltip({ points, series, xMeasureUnit, yMeasureUnit, className, position, containerRef, }: GraphTooltipProps): React.ReactElement | null;

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;