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

package/dist/types/components/styled-dropdown/styled-dropdown.d.ts

@@ -0,0 +1,95 @@
+import type * as React from "react";
+export interface StyledDropdownItem {
+    value?: string | number | boolean;
+    label?: React.ReactNode;
+    title?: React.ReactNode;
+    [key: string]: unknown;
+}
+export interface StyledDropdownProps<T extends StyledDropdownItem = StyledDropdownItem> {
+    /**
+     * Children content (dropdown items if not using `items` prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether dropdown is open (controlled)
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Trigger element/label
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Label element (alias for trigger)
+     */
+    label?: React.ReactNode;
+    /**
+     * Dropdown items
+     */
+    items?: T[];
+    /**
+     * Callback when item is selected
+     */
+    onSelect?: (item: T) => void;
+    /**
+     * Theme variant
+     */
+    theme?: "empty" | "default" | "dark" | "light" | "filledDark" | string;
+    /**
+     * Size variant
+     */
+    size?: "xs" | "sm" | "md" | "lg" | string;
+    /**
+     * Icon to display (can be ReactNode or FontAwesome IconDefinition)
+     */
+    icon?: React.ReactNode | {
+        icon: [number, number, unknown, unknown, string | string[]];
+        iconName?: string;
+    };
+    /**
+     * Icon size
+     */
+    iconSize?: number;
+    /**
+     * Alignment of dropdown
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * Side of trigger to show dropdown
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * Additional CSS class for content
+     */
+    className?: string;
+    /**
+     * Additional CSS class for trigger
+     */
+    triggerClassName?: string;
+    /**
+     * Analytics callback on click
+     */
+    onClickAnalytics?: (item: T) => void;
+}
+/**
+ * StyledDropdown — a styled dropdown wrapper with legacy API support
+ *
+ * @example
+ * ```tsx
+ * // New API with children
+ * <StyledDropdown trigger={<button>Open</button>}>
+ *   <DropdownMenuItem>Item 1</DropdownMenuItem>
+ * </StyledDropdown>
+ *
+ * // Legacy API with items
+ * <StyledDropdown
+ *   label={<span>Select option</span>}
+ *   items={[{ value: 1, label: 'Option 1' }]}
+ *   onSelect={(item) => console.log(item)}
+ * />
+ * ```
+ */
+export declare function StyledDropdown<T extends StyledDropdownItem = StyledDropdownItem>({ children, open, onOpenChange, trigger, label, items, onSelect, theme, size, icon, iconSize, align, side, className, triggerClassName, onClickAnalytics, }: StyledDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,19 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as React from "react";
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+    /**
+     * Size of the switch
+     */
+    size?: "sm" | "default" | "lg";
+}
+/**
+ * Switch — toggle component for on/off states
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
+ * <Switch size="sm" disabled />
+ * ```
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/types/components/tab-control/index.d.ts

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

package/dist/types/components/tab-control/tab-control.d.ts

@@ -0,0 +1,40 @@
+export interface TabControl<T extends string> {
+    item: React.ReactNode;
+    id: T;
+    disabled?: boolean;
+}
+export interface TabControlProps<T extends string> {
+    className?: string;
+    tabs: Array<TabControl<T>>;
+    state: UseTabControlReturnType<T>;
+    showBorder?: boolean;
+    variant?: "equal" | "auto";
+    tabItemWrapPadding?: string;
+}
+export declare function TabControl<T extends string>({ className, tabs, state: controlState, showBorder, tabItemWrapPadding, variant, }: TabControlProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TabItemProps {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    amount?: number;
+    selected: boolean;
+    textSize?: "default" | "unset";
+}
+export declare function TabItem({ icon, label, selected, textSize, amount, }: TabItemProps): import("react/jsx-runtime").JSX.Element;
+interface UseTabControlReturnType<T extends string> {
+    id: T;
+    index: number;
+    handleTabChange: (id: T, index: number) => void;
+}
+export declare function useTabControl<T extends string>(initialId: T, initialIndex?: number): UseTabControlReturnType<T>;
+export interface LocationHashItem<T extends string> {
+    id: T;
+}
+type UsePathTabsReturnType<T extends string> = Partial<Omit<UseTabControlReturnType<T>, "handleTabChange">> & Pick<UseTabControlReturnType<T>, "handleTabChange">;
+export declare function useHashTabs<T extends string>(tabs: Array<LocationHashItem<T>>): UsePathTabsReturnType<T>;
+interface UseSectionTabProps<T extends string> {
+    defaultTabs: Array<TabControl<T>>;
+    pathRoot: string;
+    selectedSection: string;
+}
+export declare function useSectionTab<T extends string>({ defaultTabs, pathRoot, selectedSection, }: UseSectionTabProps<T>): UsePathTabsReturnType<T>;
+export {};

package/dist/types/components/table/edit-button.d.ts

@@ -0,0 +1,51 @@
+import { ButtonProps } from '../buttons';
+import type * as React from "react";
+interface EditButtonProps extends Omit<ButtonProps, "variant" | "width"> {
+    /**
+     * @deprecated Use children instead
+     */
+    customButton?: React.ReactNode;
+    /**
+     * Width variant of the button
+     * - "default" — compact icon button
+     * - "wide" — full width button
+     */
+    width?: "default" | "wide";
+    /**
+     * @deprecated Use width="wide" instead
+     */
+    $width?: "default" | "wide";
+}
+/**
+ * EditButton — button component for triggering edit actions.
+ *
+ * @usage
+ * Use EditButton to provide edit functionality in editable components:
+ * table cells, form fields, editable values.
+ *
+ * Props:
+ * - `onClick` — callback function executed when button is clicked.
+ * - `children` — custom content to replace default edit icon.
+ * - `width` — button width: "default" or "wide".
+ * - `disabled` — if true, button is disabled.
+ *
+ * Note: Uses ghost variant Button with Edit icon by default.
+ *
+ * @example
+ * ```tsx
+ * // Default icon button
+ * <EditButton onClick={handleEdit} />
+ *
+ * // With custom content
+ * <EditButton onClick={handleEdit}>
+ *   Edit Item
+ * </EditButton>
+ *
+ * // Wide button
+ * <EditButton width="wide" onClick={handleEdit}>
+ *   <span>Edit</span>
+ * </EditButton>
+ * ```
+ */
+export declare function EditButton({ onClick, customButton, children, disabled, width, $width, className, style, ...props }: EditButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/table/editable-grid-table.d.ts

@@ -0,0 +1,120 @@
+import { Address } from 'viem';
+/**
+ * GridTableCellAssetProps — props for GridTableCellAsset component.
+ */
+interface GridTableCellAssetProps {
+    assetAddress: Address;
+    symbol: string;
+    comment?: string;
+    explorerUrl?: string;
+    iconSymbol?: string;
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+}
+/**
+ * GridTableCellAsset — grid table cell component for displaying asset information.
+ *
+ * @usage
+ * Use GridTableCellAsset to display asset data in grid table cells:
+ * token symbols, asset addresses with icons, explorer links.
+ *
+ * Props:
+ * - `assetAddress` — asset contract address (required).
+ * - `symbol` — asset symbol/ticker (required).
+ * - `comment` — optional comment displayed next to symbol.
+ * - `explorerUrl` — optional explorer URL for external link button.
+ * - `iconSymbol` — optional symbol for icon extraction (used when icon doesn't match symbol, e.g., pool tokens).
+ * - `span` — number of columns to span (defaults to 1).
+ *
+ * Note: Displays token icon, symbol, optional comment, and optional explorer link in a grid cell.
+ */
+export declare function GridTableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, span, }: GridTableCellAssetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * GridTableCellUpdatableProps — props for GridTableCellUpdatable component.
+ */
+export interface GridTableCellUpdatableProps {
+    oldValue?: string;
+    newValue: string;
+    onEdit?: () => void;
+    isEditable?: boolean;
+    className?: string;
+    customButton?: React.ReactNode;
+    align?: "left" | "right" | "center";
+    postfix?: string;
+    disabled?: boolean;
+    nowrap?: boolean;
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+}
+/**
+ * GridTableCellUpdatable — grid table cell component for displaying editable values with old/new value comparison.
+ *
+ * @usage
+ * Use GridTableCellUpdatable to display values that can be edited in grid table cells:
+ * editable parameters, configurable settings, updatable data with change indication.
+ *
+ * Props:
+ * - `oldValue` — previous value displayed with strikethrough when different from newValue.
+ * - `newValue` — current/new value to display (required).
+ * - `onEdit` — callback function executed when edit button is clicked.
+ * - `isEditable` — if false, edit button is not shown (defaults to true).
+ * - `className` — additional CSS classes for styling.
+ * - `customButton` — custom React node to replace default edit button.
+ * - `align` — text alignment: "left", "right", or "center" (defaults to "right").
+ * - `postfix` — optional text displayed after the value.
+ * - `disabled` — if true, edit button is disabled.
+ * - `nowrap` — if true, prevents text wrapping.
+ * - `span` — number of columns to span (defaults to 1).
+ *
+ * Note: Uses UpdatedValue component internally to display old/new values with edit functionality.
+ */
+export declare function GridTableCellUpdatable({ oldValue, newValue, onEdit, isEditable, className, align, customButton, postfix, disabled, nowrap, span, }: GridTableCellUpdatableProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * GridTableEditableAction — action button configuration for GridTableEditable.
+ */
+export interface GridTableEditableAction {
+    text: string;
+    onClick: () => void;
+    loadingText?: string;
+    isLoading?: boolean;
+}
+/**
+ * GridTableEditableProps — props for GridTableEditable component.
+ */
+interface GridTableEditableProps {
+    title: string;
+    onNew?: () => void;
+    newButtonText?: string;
+    isLoading?: boolean;
+    buttonLoadingText?: string;
+    actions?: GridTableEditableAction[];
+    children: React.ReactNode;
+    disabled?: boolean;
+    skipSignIn?: boolean;
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+}
+/**
+ * GridTableEditable — grid table component with header, action buttons, and editable content.
+ *
+ * @usage
+ * Use GridTableEditable to create grid tables with editable content and action buttons:
+ * data management tables, configuration tables, editable parameter lists with grid layout.
+ *
+ * Props:
+ * - `title` — table title displayed in header (required).
+ * - `onNew` — callback function for "New" button action.
+ * - `newButtonText` — text for "New" button (defaults to "New").
+ * - `isLoading` — if true, "New" button shows loading state.
+ * - `buttonLoadingText` — text shown in "New" button when loading (defaults to "Adding...").
+ * - `actions` — array of additional action buttons (GridTableEditableAction[]).
+ * - `children` — table content (GridTable rows/cells) (required).
+ * - `disabled` — if true, all action buttons are disabled (defaults to false).
+ * - `skipSignIn` — if true, skips sign-in requirement for actions (defaults to true).
+ * - `cols` — number of columns (1-12) or custom CSS grid template (defaults to 12).
+ *
+ * Note: Action buttons are wrapped in SignInRequired component and use TabButton for styling. Table is wrapped in rounded border container.
+ *
+ * Do NOT use GridTableEditable:
+ * - for read-only tables without editing capabilities (use regular GridTable component).
+ * - when you don't need action buttons or title (use regular GridTable component).
+ */
+export declare function GridTableEditable({ title, onNew, newButtonText, buttonLoadingText, isLoading, actions, children, disabled, skipSignIn, cols, }: GridTableEditableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/table/editable-table.d.ts

@@ -0,0 +1,101 @@
+import { Address } from 'viem';
+interface TableCellAssetProps {
+    assetAddress: Address;
+    symbol: string;
+    comment?: string;
+    explorerUrl?: string;
+    iconSymbol?: string;
+}
+/**
+ * TableCellAsset — table cell component for displaying asset information.
+ *
+ * @usage
+ * Use TableCellAsset to display asset data in table cells:
+ * token symbols, asset addresses, icons, explorer links.
+ *
+ * Props:
+ * - `assetAddress` — asset contract address (required).
+ * - `symbol` — asset symbol/ticker (required).
+ * - `comment` — optional comment displayed next to symbol.
+ * - `explorerUrl` — optional explorer URL for external link button.
+ * - `iconSymbol` — optional symbol for icon extraction (used when icon doesn't match symbol, e.g., pool tokens).
+ */
+export declare function TableCellAsset({ assetAddress, symbol, iconSymbol, comment, explorerUrl, }: TableCellAssetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableCellUpdatable — table cell component for displaying editable values with old/new value comparison.
+ *
+ * @usage
+ * Use TableCellUpdatable to display values that can be edited in table cells:
+ * editable parameters, configurable settings, updatable data with change indication.
+ *
+ * Props:
+ * - `oldValue` — previous value displayed with strikethrough when different from newValue.
+ * - `newValue` — current/new value to display (required).
+ * - `onEdit` — callback function executed when edit button is clicked.
+ * - `isEditable` — if false, edit button is not shown (defaults to true).
+ * - `className` — additional CSS classes for styling.
+ * - `customButton` — custom React node to replace default edit button.
+ * - `align` — text alignment: "left", "right", or "center" (defaults to "right").
+ * - `postfix` — optional text displayed after the value.
+ * - `disabled` — if true, edit button is disabled.
+ * - `nowrap` — if true, prevents text wrapping.
+ */
+export interface TableCellUpdatableProps {
+    oldValue?: string;
+    newValue: string;
+    onEdit?: () => void;
+    isEditable?: boolean;
+    className?: string;
+    customButton?: React.ReactNode;
+    align?: "left" | "right" | "center";
+    postfix?: string;
+    disabled?: boolean;
+    nowrap?: boolean;
+}
+export declare function TableCellUpdatable({ oldValue, newValue, onEdit, isEditable, className, align, customButton, postfix, disabled, nowrap, }: TableCellUpdatableProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * TableEditableAction — action button configuration for TableEditable.
+ */
+export interface TableEditableAction {
+    text: string;
+    onClick: () => void;
+    loadingText?: string;
+    isLoading?: boolean;
+}
+/**
+ * TableEditable — table component with header, action buttons, and editable content.
+ *
+ * @usage
+ * Use TableEditable to create tables with editable content and action buttons:
+ * data management tables, configuration tables, editable parameter lists.
+ *
+ * Props:
+ * - `title` — table title displayed in header (required).
+ * - `onNew` — callback function for "New" button action.
+ * - `newButtonText` — text for "New" button (defaults to "New").
+ * - `isLoading` — if true, "New" button shows loading state.
+ * - `buttonLoadingText` — text shown in "New" button when loading (defaults to "Adding...").
+ * - `actions` — array of additional action buttons (TableEditableAction[]).
+ * - `children` — table content (Table rows/cells) (required).
+ * - `disabled` — if true, all action buttons are disabled.
+ * - `skipSignIn` — if true, skips sign-in requirement for actions (defaults to true).
+ *
+ * Note: Action buttons are wrapped in SignInRequired component and use TabButton for styling.
+ *
+ * Do NOT use TableEditable:
+ * - for read-only tables without editing capabilities (use regular Table component).
+ * - when you don't need action buttons or title (use regular Table component).
+ */
+interface TableEditableProps {
+    title: string;
+    onNew?: () => void;
+    newButtonText?: string;
+    isLoading?: boolean;
+    buttonLoadingText?: string;
+    actions?: TableEditableAction[];
+    children: React.ReactNode;
+    disabled?: boolean;
+    skipSignIn?: boolean;
+}
+export declare function TableEditable({ title, onNew, newButtonText, buttonLoadingText, isLoading, actions, children, disabled, skipSignIn, }: TableEditableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/table/grid-error-line.d.ts

@@ -0,0 +1,49 @@
+import type * as React from "react";
+/**
+ * GridErrorLineProps — props for GridErrorLine component.
+ */
+export interface GridErrorLineProps {
+    err: Error;
+    btnTitle?: React.ReactNode;
+    onClick?: () => void;
+    /**
+     * Whether this is the last row (no bottom border)
+     * @default true
+     */
+    last?: boolean;
+    /**
+     * Row height
+     * @default "75px"
+     */
+    height?: string;
+}
+/**
+ * GridErrorLine — error message display component for grid tables.
+ *
+ * @usage
+ * Use GridErrorLine to display error messages in grid table rows:
+ * error states, failed data loading, table error handling with retry button.
+ *
+ * Props:
+ * - `err` — Error object to display (required).
+ * - `btnTitle` — text for action button.
+ * - `onClick` — callback function for button action.
+ * - `last` — whether this is the last row, affects border (defaults to true).
+ * - `height` — row height (defaults to "75px").
+ *
+ * Note: Displays centered error message with optional action button. Uses FormattedMessage for internationalization.
+ *
+ * @example
+ * ```tsx
+ * <GridTable cols={12}>
+ *   <GridTableBody>
+ *     <GridErrorLine
+ *       err={new Error("Something went wrong")}
+ *       btnTitle="Reload"
+ *       onClick={() => window.location.reload()}
+ *     />
+ *   </GridTableBody>
+ * </GridTable>
+ * ```
+ */
+export declare function GridErrorLine({ err, btnTitle, onClick, last, height, }: GridErrorLineProps): React.ReactElement;

package/dist/types/components/table/grid-loading-line.d.ts

@@ -0,0 +1,47 @@
+import type * as React from "react";
+/**
+ * GridLoadingLineProps — props for GridLoadingLine component.
+ */
+export interface GridLoadingLineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Height of the loading line in pixels
+     * @default "70px"
+     */
+    height?: string;
+    /**
+     * Number of skeleton columns to show
+     * @default 6
+     */
+    columns?: number;
+    /**
+     * Custom class name for each cell
+     */
+    cellClassName?: string;
+    /**
+     * Whether this is the last row (hides bottom border)
+     * @default false
+     */
+    last?: boolean;
+}
+/**
+ * GridLoadingLine — loading skeleton row component for grid tables.
+ *
+ * @usage
+ * Use GridLoadingLine to display loading state in grid tables:
+ * skeleton rows, table data loading indicators, placeholder content while fetching.
+ *
+ * Props:
+ * - `height` — height of the loading line (defaults to "70px").
+ * - `columns` — number of skeleton columns to show (defaults to 6).
+ * - `cellClassName` — custom class name for each cell.
+ * - `last` — whether this is the last row (hides bottom border).
+ *
+ * Note: Displays multiple skeleton cells matching the table structure with borders and padding.
+ *
+ * @example
+ * ```tsx
+ * <GridLoadingLine height="80px" columns={5} />
+ * <GridLoadingLine /> // Uses defaults
+ * ```
+ */
+export declare function GridLoadingLine({ height, columns, cellClassName, last, className, ...props }: GridLoadingLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/table/grid-table-loader.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * GridTableLoaderProps — props for GridTableLoader component.
+ */
+interface GridTableLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns to span (uses col-span-full by default)
+     */
+    colSpan?: number;
+}
+/**
+ * GridTableLoader — loader component for infinite scroll in GridTable.
+ *
+ * @usage
+ * Use GridTableLoader to display loading state at the bottom of grid tables:
+ * infinite scroll loading indicators, table data fetching states.
+ *
+ * Props:
+ * - `colSpan` — number of columns to span (uses col-span-full by default).
+ *
+ * Note: Displays centered spinner at the bottom of the table while loading more data.
+ */
+declare const GridTableLoader: React.ForwardRefExoticComponent<GridTableLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { GridTableLoader };
+export type { GridTableLoaderProps };