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

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

@@ -0,0 +1,77 @@
+import type * as React from "react";
+/**
+ * Graph dropdown item configuration
+ */
+export interface GraphDropdownItem<T> {
+    /** Value identifier for the graph */
+    value: T;
+    /** Display label for the graph */
+    label: React.ReactNode;
+}
+/**
+ * GraphDropdown component props
+ */
+export interface GraphDropdownProps<T> {
+    /** Default selected item(s) */
+    defaultItem: GraphDropdownItem<T> | Array<GraphDropdownItem<T>>;
+    /** Available items to select from */
+    items: Array<GraphDropdownItem<T>>;
+    /** Callback when selection changes */
+    onSelected: (graph: T | Array<T>) => void;
+    /** Enable multiple selection mode */
+    multiple?: boolean;
+    /** Set of graph values that have no data available */
+    graphsWithNoData?: Set<T>;
+    /** Set of graph values that are currently loading */
+    loadingGraphs?: Set<T>;
+    /** Callback when user tries to select a graph with no data */
+    onNoDataSelected?: (graphValue: T, graphLabel: React.ReactNode) => void;
+}
+/**
+ * GraphDropdown — dropdown select component for choosing graph types.
+ *
+ * @usage
+ * Use GraphDropdown for graph/chart type selection:
+ * metric selectors, chart type toggles, data series pickers.
+ *
+ * Features:
+ * - Single or multiple selection modes
+ * - Checkbox indicators for multi-select
+ * - Synced with external default item changes
+ * - Read-only mode when only one item
+ *
+ * Props:
+ * - `defaultItem` — initially selected item(s)
+ * - `items` — array of selectable options
+ * - `onSelected` — callback when selection changes
+ * - `multiple` — enable multi-select mode
+ *
+ * @example
+ * ```tsx
+ * // Single selection
+ * <GraphDropdown
+ *   items={[
+ *     { value: "price", label: "Price" },
+ *     { value: "volume", label: "Volume" },
+ *   ]}
+ *   defaultItem={{ value: "price", label: "Price" }}
+ *   onSelected={(value) => setSelectedGraph(value)}
+ * />
+ *
+ * // Multiple selection
+ * <GraphDropdown
+ *   items={[
+ *     { value: "eth", label: "ETH" },
+ *     { value: "btc", label: "BTC" },
+ *     { value: "usdc", label: "USDC" },
+ *   ]}
+ *   defaultItem={[
+ *     { value: "eth", label: "ETH" },
+ *     { value: "btc", label: "BTC" },
+ *   ]}
+ *   onSelected={(values) => setSelectedGraphs(values)}
+ *   multiple
+ * />
+ * ```
+ */
+export declare function GraphDropdown<T extends string = string>({ items, defaultItem, onSelected, multiple, graphsWithNoData, loadingGraphs, onNoDataSelected, }: GraphDropdownProps<T>): React.ReactElement;

package/dist/types/components/trading-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './graph-dropdown';
+export * from './trading-view';

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

@@ -0,0 +1,153 @@
+import { RangeButtonsProps } from '../buttons/range-buttons/range-buttons';
+import { YMeasureUnits } from '../graph/formatters';
+import { GraphViewWithDataProps } from '../graph/graph-view';
+import { GraphDropdownItem, GraphDropdownProps } from './graph-dropdown';
+import type * as React from "react";
+/**
+ * Point data structure for chart
+ */
+export interface GraphDataPoint {
+    time: number;
+    value: number;
+}
+/**
+ * Graph data structure with title and data points
+ */
+export interface GraphData {
+    /** Stable identifier used for color mapping. Should match `GraphDropdownItem.value`. */
+    id?: string;
+    title?: string;
+    data: GraphDataPoint[];
+    /** Line color (area stroke). If omitted, palette by series index is used. */
+    lineColor?: string;
+    /** Alias for lineColor */
+    color?: string;
+    /** Area fill gradient top */
+    topColor?: string;
+    /** Area fill gradient bottom */
+    bottomColor?: string;
+}
+/**
+ * TradingView component props
+ */
+export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data"> {
+    /** Graph data - single or array of series */
+    data: GraphData | Array<GraphData> | undefined;
+    /** Y-axis unit for single or multiple series */
+    yMeasureUnit?: YMeasureUnits | Array<YMeasureUnits>;
+    /** Chart height in pixels */
+    height?: number;
+    /** Default selected graph item(s) */
+    defaultGraph?: GraphDropdownProps<T>["defaultItem"];
+    /** Callback when graph selection changes */
+    onGraphSelected?: GraphDropdownProps<T>["onSelected"];
+    /** Available graphs for selection */
+    graphs?: Array<GraphDropdownItem<T>>;
+    /** Enable multiple graph selection */
+    isMultipleSelect?: boolean;
+    /** Available time range options */
+    rangeList: RangeButtonsProps<string>["rangeList"];
+    /** Currently selected time range */
+    range: string;
+    /** Callback to change selected range */
+    setRange: (range: string) => void;
+    /** Callback when expand button is clicked */
+    onGraphExpanded?: () => void;
+    /** Whether graph is currently expanded */
+    isGraphExpanded?: boolean;
+    /** Callback when series is unselected from legend */
+    onUnselectSeries?: (label: string) => void;
+    /** Set of graph values that have no data available */
+    graphsWithNoData?: Set<T>;
+    /** Set of graph values that are currently loading */
+    loadingGraphs?: Set<T>;
+    /** Message to show when user selects a graph with no data */
+    noDataMessage?: string;
+    /**
+     * Number of decimal places for current value display.
+     * If 0, rounds to whole numbers. Default is 8 (full precision).
+     */
+    currentValueDecimals?: number;
+    /**
+     * When true, all series use a single Y axis so vertical position reflects
+     * actual relative values (e.g. "part" vs "whole" like Ethereum vs All Networks).
+     */
+    useSharedPriceScale?: boolean;
+    /**
+     * When true (default), shows the current value and date in the top-left corner
+     * in single-series mode. Set to false to hide.
+     * If `graphTitle` is set, it replaces that block.
+     */
+    showCurrentValue?: boolean;
+    /**
+     * Renders in the top-left of the chart area instead of current value + date.
+     * Only when a single series is shown; hidden when multiple graphs/series are
+     * selected (same as current value block).
+     */
+    graphTitle?: React.ReactNode;
+    /** Y-axis floor when one series has data; if omitted, default scaling. */
+    yScaleMin?: number;
+    /** Y-axis floor when multiple series have data; if omitted, default scaling. */
+    yScaleMinMultiple?: number;
+    /**
+     * If set, series label → palette index is persisted in localStorage under this key
+     * so colors stay stable across reloads (same label keeps the same color).
+     */
+    seriesColorPersistenceKey?: string;
+}
+/**
+ * TradingView — comprehensive charting component with graph selection and time range controls.
+ *
+ * @usage
+ * Use TradingView for interactive financial charts:
+ * price charts, trading dashboards, market analytics, multi-series comparisons.
+ *
+ * Features:
+ * - Graph dropdown for selecting different metrics
+ * - Time range buttons for filtering data period
+ * - Fullscreen expand/collapse support
+ * - Multiple series with automatic color assignment
+ * - Legend with clickable series toggle
+ * - Mobile-responsive toolbar
+ *
+ * Props:
+ * - `data` — graph data (single GraphData or array for multiple series)
+ * - `yMeasureUnit` — y-axis unit (single or array matching series)
+ * - `height` — chart height in pixels (default: 306)
+ * - `graphs` — available graph options for dropdown
+ * - `defaultGraph` — initially selected graph(s)
+ * - `onGraphSelected` — callback when graph selection changes
+ * - `isMultipleSelect` — allow multiple graph selection
+ * - `rangeList` — time range options array
+ * - `range` — currently selected range value
+ * - `setRange` — callback to update range
+ * - `onGraphExpanded` — callback for expand button click
+ * - `isGraphExpanded` — current expand state
+ * - `onUnselectSeries` — callback when series is unselected from legend
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = useState("1d");
+ * const [selectedGraph, setSelectedGraph] = useState("price");
+ *
+ * <TradingView
+ *   data={priceData}
+ *   yMeasureUnit="$"
+ *   height={400}
+ *   graphs={[
+ *     { value: "price", label: "Price" },
+ *     { value: "volume", label: "Volume" },
+ *   ]}
+ *   defaultGraph={{ value: "price", label: "Price" }}
+ *   onGraphSelected={setSelectedGraph}
+ *   rangeList={[
+ *     { value: "1d", label: "1D" },
+ *     { value: "1w", label: "7D" },
+ *     { value: "1m", label: "30D" },
+ *   ]}
+ *   range={range}
+ *   setRange={setRange}
+ * />
+ * ```
+ */
+export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: TradingViewProps<T>): React.ReactElement;

package/dist/types/components/typed-intl/index.d.ts

@@ -0,0 +1,22 @@
+import { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat';
+import { FormattedMessage } from 'react-intl';
+import { LocaleKeys } from '../../locale';
+import type * as React from "react";
+type FormattedMessageProps = React.ComponentProps<typeof FormattedMessage>;
+export type Values = FormattedMessageProps["values"];
+export interface FormattedMessageTypedProps {
+    messageId: LocaleKeys;
+    values?: Values;
+    defaultMessage?: string;
+}
+export declare function FormattedMessageTyped({ messageId, values, defaultMessage, }: FormattedMessageTypedProps): import("react/jsx-runtime").JSX.Element;
+export interface FormatMessageTypedProps {
+    messageId: LocaleKeys;
+    /** Fallback when the key is missing in the app's messages (e.g. app did not merge locale). */
+    defaultMessage?: string;
+}
+export declare function useIntlTyped(): {
+    formatMessage: ({ messageId, defaultMessage }: FormatMessageTypedProps, values?: Record<string, PrimitiveType | FormatXMLElementFn<string, string>>) => string;
+    intl: import('react-intl').IntlShape;
+};
+export {};

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

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

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

@@ -0,0 +1,57 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const typographyVariants: (props?: ({
+    variant?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodySmall" | "overline" | "inherit" | null | undefined;
+    color?: "inherit" | "default" | "muted" | "success" | "warning" | "destructive" | "primary" | "secondary" | null | undefined;
+    weight?: "medium" | "inherit" | "normal" | "semibold" | "bold" | null | undefined;
+    align?: "inherit" | "left" | "center" | "right" | null | undefined;
+    leading?: "inherit" | "normal" | "tight" | "relaxed" | null | undefined;
+    truncate?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TypographyElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";
+export interface TypographyProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof typographyVariants> {
+    /**
+     * HTML element to render. Defaults based on variant:
+     * h1-h6 variants use their respective heading elements,
+     * body/bodySmall use p, caption/overline use span
+     */
+    as?: TypographyElement;
+}
+/**
+ * Typography — semantic text component with variant-based styling
+ *
+ * @usage
+ * Use Typography for consistent text styling across the application:
+ * headings, body text, captions, labels.
+ *
+ * Variants:
+ * - `h1` — main heading (text-4xl, bold)
+ * - `h2` — secondary heading (text-3xl, semibold)
+ * - `h3` — tertiary heading (text-2xl, semibold)
+ * - `h4` — quaternary heading (text-xl, semibold)
+ * - `h5` — small heading (text-lg, medium)
+ * - `h6` — smallest heading (text-base, medium)
+ * - `body` — body text (text-base)
+ * - `bodySmall` — small body text (text-sm)
+ * - `caption` — caption text (text-xs)
+ * - `overline` — overline text (text-xs, uppercase, tracking-wider)
+ *
+ * Colors (color):
+ * - `inherit` — inherits color from parent (default)
+ * - `default` — foreground color
+ * - `muted` — muted foreground color
+ * - `success` — success/positive color
+ * - `warning` — warning color
+ * - `destructive` — error/destructive color
+ * - `primary` — primary theme color
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="muted">Description text</Typography>
+ * <Typography variant="caption" color="destructive">Error message</Typography>
+ * <Typography as="span" variant="h4">Inline heading</Typography>
+ * ```
+ */
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+export { Typography, typographyVariants };

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

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

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

@@ -0,0 +1,52 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const rootVariants: (props?: ({
+    align?: "center" | "start" | "end" | "baseline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const labelVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const valueVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    weight?: "medium" | "normal" | "unset" | null | undefined;
+    color?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof rootVariants>, VariantProps<typeof labelVariants>, VariantProps<typeof valueVariants> {
+    /** Label text shown on the left */
+    label?: React.ReactNode;
+    /** Description under the label (left-aligned) */
+    description?: React.ReactNode;
+    /** Description under the value (right-aligned) */
+    valueDescription?: React.ReactNode;
+    /** Tooltip content for the help tip icon next to the label */
+    tip?: React.ReactNode;
+    /** Current value displayed on the right */
+    value?: React.ReactNode;
+    /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
+    valueTo?: React.ReactNode;
+    /** Called when the tip icon is hovered */
+    onPointerEnterTip?: () => void;
+}
+/**
+ * VerticalIndicator — labeled value display with optional description and value transition
+ *
+ * @usage
+ * Use for key-value rows: metrics, form indicators, before/after values.
+ * Supports label + description, value + valueDescription, optional help tip,
+ * and value → valueTo transition (first value shown with line-through).
+ *
+ * @example
+ * ```tsx
+ * <VerticalIndicator label="Total Value" value="$10,000" />
+ * <VerticalIndicator
+ *   label="Health Factor"
+ *   description="Account health"
+ *   value="1.5"
+ *   valueTo="2.0"
+ *   color="success"
+ *   tip="Health factor represents..."
+ * />
+ * ```
+ */
+declare const VerticalIndicator: React.ForwardRefExoticComponent<VerticalIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { VerticalIndicator, rootVariants as verticalIndicatorVariants };

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

@@ -0,0 +1 @@
+export { VerticalList, type VerticalListProps, verticalListVariants, } from './vertical-list';

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

@@ -0,0 +1,52 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const verticalListVariants: (props?: ({
+    rowGap?: "default" | "xs" | "md" | null | undefined;
+    divided?: boolean | null | undefined;
+    nested?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface VerticalListProps extends React.HTMLAttributes<HTMLUListElement>, VariantProps<typeof verticalListVariants> {
+    /**
+     * Show dividers between items
+     */
+    divided?: boolean;
+    /**
+     * Nested list (removes outer padding/margin)
+     */
+    nested?: boolean;
+}
+/**
+ * VerticalList — component for displaying vertical lists of items.
+ *
+ * @usage
+ * Use VerticalList to display a series of items in a vertical layout:
+ * - Key-value pairs
+ * - Transaction details
+ * - Form field groups
+ * - Settings lists
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <VerticalList>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </VerticalList>
+ *
+ * // With dividers
+ * <VerticalList divided gap="md">
+ *   <div>First item</div>
+ *   <div>Second item</div>
+ *   <div>Third item</div>
+ * </VerticalList>
+ *
+ * // Nested list
+ * <VerticalList nested gap="sm">
+ *   <span>Nested item 1</span>
+ *   <span>Nested item 2</span>
+ * </VerticalList>
+ * ```
+ */
+declare const VerticalList: React.ForwardRefExoticComponent<VerticalListProps & React.RefAttributes<HTMLUListElement>>;
+export { VerticalList, verticalListVariants };

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

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

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

@@ -0,0 +1,27 @@
+import type * as React from "react";
+/**
+ * VSpaceProps — props for VSpace component.
+ */
+export interface VSpaceProps {
+    height: number;
+}
+/**
+ * VSpace — vertical spacing component for creating vertical gaps.
+ *
+ * @usage
+ * Use VSpace to add vertical spacing between elements:
+ * spacing between sections, gaps between components, vertical layout spacing.
+ *
+ * Props:
+ * - `height` — height of the spacer in pixels (required).
+ *
+ * Note: Creates an empty div with specified height.
+ * Useful for precise vertical spacing control in layouts.
+ *
+ * @example
+ * ```tsx
+ * <VSpace height={16} />
+ * <VSpace height={24} />
+ * ```
+ */
+export declare function VSpace({ height }: VSpaceProps): React.ReactElement;

package/dist/types/components/with-copy/index.d.ts

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

package/dist/types/components/with-copy/with-copy.d.ts

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import type * as React from "react";
+export interface WithCopyProps {
+    /** Text to copy to clipboard */
+    toCopy: string;
+    /** Callback after successful copy */
+    onCopySuccess?: () => void;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Custom icon element */
+    icon?: React.ReactNode;
+    /** Additional className for the container */
+    className?: string;
+    /** Additional className for the button */
+    buttonClassName?: string;
+    /** Duration to show success checkmark in ms (default: 1500) */
+    successDuration?: number;
+    /** Trigger type to show the tooltip */
+    trigger?: "button" | "root";
+    /** Tooltip content */
+    tooltip?: React.ReactNode;
+}
+/**
+ * WithCopy — wraps content with a copy-to-clipboard button
+ *
+ * @example
+ * ```tsx
+ * <WithCopy toCopy="0x1234...5678">
+ *   <span>0x1234...5678</span>
+ * </WithCopy>
+ * ```
+ */
+export declare function WithCopy({ toCopy, children, onCopySuccess, iconSize, icon, className, buttonClassName, successDuration, trigger, tooltip, }: PropsWithChildren<WithCopyProps>): React.ReactElement;

package/dist/types/components/with-filter-button/index.d.ts

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

package/dist/types/components/with-filter-button/with-filter-button.d.ts

@@ -0,0 +1,83 @@
+import { ButtonProps } from '../buttons/button';
+import * as React from "react";
+/**
+ * Props for WithFilterButton component
+ */
+export interface WithFilterButtonProps {
+    /**
+     * Content to display alongside the filter button
+     */
+    children?: React.ReactNode;
+    /**
+     * Title to display (backward compatibility)
+     * @deprecated Use children instead
+     */
+    title?: React.ReactNode | string;
+    /**
+     * Click handler for the filter button
+     */
+    onClick?: () => void;
+    /**
+     * Click handler for the filter button (backward compatibility)
+     * @deprecated Use onClick instead
+     */
+    onOpen?: () => void;
+    /**
+     * Reset handler for the filter button
+     */
+    onClearAll?: () => void;
+    /**
+     * Whether any filter is checked (backward compatibility)
+     * @deprecated Use visual styling instead
+     */
+    hasChecked?: boolean;
+    /**
+     * Button props (backward compatibility)
+     * @deprecated Use buttonVariant and buttonSize instead
+     */
+    buttonProps?: {
+        color?: string;
+        size?: string;
+        [key: string]: unknown;
+    };
+    /**
+     * Whether to hide the filter icon (backward compatibility)
+     * @deprecated Use showIcon={false} instead
+     */
+    hideIcon?: boolean;
+    /**
+     * Button variant (optional, defaults to "outline")
+     */
+    buttonVariant?: ButtonProps["variant"];
+    /**
+     * Button size (optional, defaults to "default")
+     */
+    buttonSize?: ButtonProps["size"];
+    /**
+     * Custom label for the filter button (optional, defaults to "Filter")
+     */
+    buttonLabel?: string;
+    /**
+     * Whether to show the filter icon (optional, defaults to true)
+     */
+    showIcon?: boolean;
+    /**
+     * Additional class name for the container
+     */
+    className?: string;
+    /**
+     * Additional class name for the button
+     */
+    buttonClassName?: string;
+}
+/**
+ * WithFilterButton component that combines content with a filter button
+ *
+ * @example
+ * ```tsx
+ * <WithFilterButton onClick={() => console.log("Filter clicked")}>
+ *   <h2>Items List</h2>
+ * </WithFilterButton>
+ * ```
+ */
+export declare const WithFilterButton: React.ForwardRefExoticComponent<WithFilterButtonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/with-title/index.d.ts

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

package/dist/types/components/with-title/with-title.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from "react";
+declare const withTitleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface WithTitleProps extends VariantProps<typeof withTitleVariants> {
+    /**
+     * Title text or element
+     */
+    title: string | React.ReactNode;
+    /**
+     * Children content
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * WithTitle — wrapper component that adds a title above content
+ *
+ * @example
+ * ```tsx
+ * <WithTitle title="Amount" size="sm">
+ *   <Input placeholder="Enter amount" />
+ * </WithTitle>
+ * ```
+ */
+export declare function WithTitle({ title, children, size, className, }: WithTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};