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

package/dist/types/components/explorer-links-dropdown/explorer-links-dropdown.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+/**
+ * Explorer link definition
+ */
+export interface ExplorerLink {
+    /**
+     * Display name for the explorer
+     */
+    name: string;
+    /**
+     * URL to the explorer
+     */
+    url: string;
+    /**
+     * Optional icon
+     */
+    icon?: React.ReactNode;
+}
+export interface ExplorerLinksDropdownProps {
+    /**
+     * Custom explorer links (overrides chain-based detection)
+     */
+    explorerLinks?: ExplorerLink[];
+    /**
+     * Whether the dropdown is open (controlled)
+     */
+    opened?: boolean;
+    /**
+     * Alignment of the dropdown
+     */
+    opens?: "left" | "right";
+    /**
+     * Callback when dropdown closes
+     */
+    onClose?: () => void;
+    /**
+     * Trigger element
+     */
+    title?: React.ReactNode;
+    /**
+     * Address to link to
+     */
+    address?: `0x${string}`;
+    /**
+     * Transaction hash to link to
+     */
+    txHash?: string;
+    /**
+     * Chain ID for explorer detection
+     * @default 1
+     */
+    chainId?: number;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Children (alternative trigger)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ExplorerLinksDropdown — dropdown with links to various block explorers
+ *
+ * @example
+ * ```tsx
+ * // For an address
+ * <ExplorerLinksDropdown
+ *   address="0x..."
+ *   chainId={1}
+ *   title={<Button variant="ghost">View on Explorer</Button>}
+ * />
+ *
+ * // For a transaction
+ * <ExplorerLinksDropdown
+ *   txHash="0x..."
+ *   chainId={42161}
+ *   title="View Transaction"
+ * />
+ * ```
+ */
+export declare function ExplorerLinksDropdown({ explorerLinks, opened, opens, onClose, title, address, txHash, chainId, className, children, }: ExplorerLinksDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/explorer-links-dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './explorer-links-dropdown';

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface FadeoutLoadingProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** When true, content is shown at 50% opacity (loading state). */
+    loading?: boolean;
+    /** Transition duration in ms; when set, overrides default 100ms (A uses 100ms). */
+    duration?: number;
+}
+/**
+ * FadeoutLoading — wrapper that fades content when loading is true.
+ *
+ * @usage
+ * Use to indicate loading without hiding content: data refresh, optimistic updates.
+ * Opacity 1 by default; 0.5 when loading; transition 100ms ease-in-out (matches A).
+ *
+ * @example
+ * ```tsx
+ * <FadeoutLoading loading={isLoading}>
+ *   <span>$1,234.56</span>
+ * </FadeoutLoading>
+ * ```
+ */
+declare const FadeoutLoading: React.ForwardRefExoticComponent<FadeoutLoadingProps & React.RefAttributes<HTMLSpanElement>>;
+export { FadeoutLoading };

package/dist/types/components/fadeout-loading/index.d.ts

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

package/dist/types/components/filter/filter-block.d.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+import { filterBlockVariants } from './variants';
+import * as React from "react";
+export interface FilterBlockProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof filterBlockVariants> {
+    /**
+     * Whether the filter block is opened/expanded
+     * @deprecated Use controlled state in parent component
+     */
+    opened?: boolean;
+    /**
+     * Filter type identifier
+     */
+    type?: string;
+    /**
+     * Whether any filter is selected
+     */
+    hasSelected?: boolean;
+    /**
+     * Callback to reset filters
+     */
+    onReset?: () => void;
+}
+/**
+ * FilterBlock component for displaying filter content in a card-like container
+ *
+ * @example
+ * ```tsx
+ * <FilterBlock variant="default">
+ *   <h3>Filter Options</h3>
+ *   <FilterContent />
+ * </FilterBlock>
+ *
+ * // With backward-compatible props
+ * <FilterBlock opened={true} hasSelected={true} onReset={() => {}}>
+ *   <FilterContent />
+ * </FilterBlock>
+ * ```
+ */
+export declare const FilterBlock: React.ForwardRefExoticComponent<FilterBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-checkbox-item.d.ts

@@ -0,0 +1,23 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterCheckboxItem component - a checkbox item for filters in dropdown menus
+ */
+export interface FilterCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
+}
+/**
+ * FilterCheckboxItem component for displaying filter options with checkboxes
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterCheckboxItem checked={isChecked} onCheckedChange={setChecked}>
+ *     Option 1
+ *   </FilterCheckboxItem>
+ *   <FilterCheckboxItem checked={isChecked2} onCheckedChange={setChecked2}>
+ *     Option 2
+ *   </FilterCheckboxItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterCheckboxItem: React.ForwardRefExoticComponent<FilterCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-chip.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+/**
+ * FilterChip component - displays an active filter as a removable chip
+ */
+export interface FilterChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label text for the filter chip
+     */
+    label: string;
+    /**
+     * Value of the filter (optional, for identification)
+     */
+    value?: string;
+    /**
+     * Callback when the chip is removed
+     */
+    onRemove?: () => void;
+    /**
+     * Whether to show the remove button (defaults to true)
+     */
+    showRemove?: boolean;
+}
+/**
+ * FilterChip component for displaying active filters as removable chips
+ *
+ * @example
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <FilterChip label="Status: Active" onRemove={() => removeFilter("status")} />
+ *   <FilterChip label="Type: Credit" onRemove={() => removeFilter("type")} />
+ * </div>
+ * ```
+ */
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-chips.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * FilterChips component - container for displaying multiple filter chips
+ */
+export interface FilterChipsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of active filters to display as chips
+     */
+    filters?: Array<{
+        id: string;
+        label: string;
+        value?: string;
+    }>;
+    /**
+     * Callback when a filter chip is removed
+     */
+    onRemoveFilter?: (id: string) => void;
+    /**
+     * Callback to clear all filters
+     */
+    onClearAll?: () => void;
+    /**
+     * Whether to show the "Clear all" button
+     */
+    showClearAll?: boolean;
+}
+/**
+ * FilterChips component for displaying multiple active filters as chips
+ *
+ * @example
+ * ```tsx
+ * <FilterChips
+ *   filters={[
+ *     { id: "status", label: "Status: Active" },
+ *     { id: "type", label: "Type: Credit" },
+ *   ]}
+ *   onRemoveFilter={(id) => removeFilter(id)}
+ *   onClearAll={() => clearAllFilters()}
+ * />
+ * ```
+ */
+export declare const FilterChips: React.ForwardRefExoticComponent<FilterChipsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-dropdown-item.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+/**
+ * FilterDropdownItem component - a dropdown menu item for filters
+ */
+export interface FilterDropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    inset?: boolean;
+    /**
+     * Title/label for the filter item (backward compatibility)
+     */
+    title?: React.ReactNode | string;
+    /**
+     * Number of decimal places for numeric filters (backward compatibility)
+     */
+    decimals?: number;
+    /**
+     * Maximum value for numeric filters (backward compatibility)
+     * Can be a number or an object with balance info
+     */
+    maxValue?: number | {
+        balance: bigint;
+        balanceView: string;
+    } | unknown;
+    /**
+     * Current filter state (backward compatibility)
+     */
+    state?: unknown;
+    /**
+     * Handler to save the filter value (backward compatibility)
+     * Generic to support different filter value types
+     */
+    onSave?: (value: any) => void;
+    /**
+     * Handler to reset the filter (backward compatibility)
+     */
+    onReset?: () => void;
+}
+/**
+ * FilterDropdownItem component for displaying filter options in a dropdown menu
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterDropdownItem onClick={() => handleFilter("all")}>
+ *     All Items
+ *   </FilterDropdownItem>
+ *   <FilterDropdownItem onClick={() => handleFilter("active")}>
+ *     Active Items
+ *   </FilterDropdownItem>
+ * </DropdownMenuContent>
+ *
+ * // Backward compatible usage
+ * <FilterDropdownItem
+ *   title="Quota Limit"
+ *   decimals={2}
+ *   maxValue={1000}
+ *   state={filter.quotaLimit.state}
+ *   onSave={filter.quotaLimit.save}
+ *   onReset={filter.quotaLimit.reset}
+ * />
+ * ```
+ */
+export declare const FilterDropdownItem: React.ForwardRefExoticComponent<FilterDropdownItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-group.d.ts

@@ -0,0 +1,22 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterGroup component - a group container for filters
+ */
+export interface FilterGroupProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> {
+}
+/**
+ * FilterGroup component for grouping related filter items
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterGroup>
+ *     <FilterLabel>Status</FilterLabel>
+ *     <FilterCheckboxItem>Active</FilterCheckboxItem>
+ *     <FilterCheckboxItem>Inactive</FilterCheckboxItem>
+ *   </FilterGroup>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterGroup: React.ForwardRefExoticComponent<FilterGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterLabel component - a label for filter groups
+ */
+export interface FilterLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    inset?: boolean;
+}
+/**
+ * FilterLabel component for labeling filter groups
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterLabel>Status</FilterLabel>
+ *   <FilterCheckboxItem>Active</FilterCheckboxItem>
+ *   <FilterCheckboxItem>Inactive</FilterCheckboxItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterLabel: React.ForwardRefExoticComponent<FilterLabelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-modal-item.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+/**
+ * FilterModalItem component - a content item for filter modals
+ */
+export interface FilterModalItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    /**
+     * Whether the item is active/selected
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Title/label for the filter item (backward compatibility)
+     */
+    title?: React.ReactNode | string;
+    /**
+     * Current filter state (backward compatibility)
+     */
+    state?: unknown;
+    /**
+     * Handler to open the filter modal (backward compatibility)
+     */
+    onOpen?: () => void;
+    /**
+     * Handler to reset the filter (backward compatibility)
+     */
+    onReset?: () => void;
+}
+/**
+ * FilterModalItem component for displaying filter options in a modal dialog
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <DialogTitle>Filter Options</DialogTitle>
+ *   <FilterModalItem active={isActive} onClick={() => handleFilter("option1")}>
+ *     Option 1
+ *   </FilterModalItem>
+ *   <FilterModalItem onClick={() => handleFilter("option2")}>
+ *     Option 2
+ *   </FilterModalItem>
+ * </DialogContent>
+ *
+ * // Backward compatible usage
+ * <FilterModalItem
+ *   title="Filter by Pool"
+ *   state={filter.pools.state}
+ *   onOpen={modal.pools.open}
+ *   onReset={filter.pools.reset}
+ * />
+ * ```
+ */
+export declare const FilterModalItem: React.ForwardRefExoticComponent<FilterModalItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/filter/filter-modal.d.ts

@@ -0,0 +1,123 @@
+import { SelectFilterList } from './interface';
+import * as React from "react";
+/**
+ * FilterModal component - a wrapper for filter modals using ui-kit Dialog
+ *
+ * This component provides a complete modal interface for selecting multiple filter options
+ * with checkbox-like behavior. It manages the modal state and provides callbacks for
+ * filter selection and reset.
+ *
+ * @example
+ * ```tsx
+ * function MyFilter() {
+ *   const [selectedFilters, setSelectedFilters] = React.useState<Set<string> | null>(null);
+ *   const [modalOpen, setModalOpen] = React.useState(false);
+ *
+ *   const options = [
+ *     { value: "active", label: "Active" },
+ *     { value: "inactive", label: "Inactive" },
+ *     { value: "pending", label: "Pending" },
+ *   ];
+ *
+ *   return (
+ *     <FilterModal
+ *       title="Filter by Status"
+ *       state={selectedFilters}
+ *       modalShow={modalOpen}
+ *       onOpen={() => setModalOpen(true)}
+ *       onClose={() => setModalOpen(false)}
+ *       onReset={() => setSelectedFilters(null)}
+ *       options={options}
+ *       onSelect={(value, checked) => {
+ *         const newSet = selectedFilters ? new Set(selectedFilters) : new Set();
+ *         if (checked) {
+ *           newSet.add(value);
+ *         } else {
+ *           newSet.delete(value);
+ *         }
+ *         setSelectedFilters(newSet.size > 0 ? newSet : null);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export interface FilterModalProps<T> {
+    /**
+     * Title of the modal dialog
+     */
+    title: React.ReactNode;
+    /**
+     * Current state of selected filters
+     * Can be a Set<T> or T[] array, or null if nothing is selected
+     */
+    state: SelectFilterList<T> | null;
+    /**
+     * Whether the modal is currently visible
+     */
+    modalShow: boolean;
+    /**
+     * Callback to open the modal
+     */
+    onOpen: () => void;
+    /**
+     * Callback to close the modal
+     */
+    onClose: () => void;
+    /**
+     * Callback to reset all filters
+     */
+    onReset: () => void;
+    /**
+     * Array of filter options to display
+     * If tabbedOptions is provided, this prop is ignored
+     */
+    options?: Array<{
+        value: T;
+        label: React.ReactNode;
+    }>;
+    /**
+     * Array of filter options grouped by tabs
+     * If provided, options will be displayed in tabs
+     */
+    tabbedOptions?: Array<{
+        tab: string;
+        label: React.ReactNode;
+        options: Array<{
+            value: T;
+            label: React.ReactNode;
+        }>;
+    }>;
+    /**
+     * Callback when an option is selected/deselected
+     * @param value - The value of the option
+     * @param checked - Whether the option is now checked
+     */
+    onSelect: (value: T, checked: boolean) => void;
+    /**
+     * Optional className for the dialog content
+     */
+    className?: string;
+    /**
+     * Optional className for the options container
+     */
+    optionsClassName?: string;
+    /**
+     * Optional reset button label (defaults to "Reset")
+     */
+    resetLabel?: React.ReactNode;
+    /**
+     * Optional apply button label (defaults to "Apply")
+     */
+    applyLabel?: React.ReactNode;
+    /**
+     * Whether to show an Apply button that closes the modal
+     * If false, selections are applied immediately
+     */
+    showApplyButton?: boolean;
+    /**
+     * Whether to show a search input
+     */
+    showSearch?: boolean;
+}
+export declare function FilterModal<T>({ title, state, modalShow, onOpen, onClose, onReset, options, tabbedOptions, onSelect, className, optionsClassName, resetLabel, applyLabel, showApplyButton, showSearch, }: FilterModalProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/filter/filter-radio-item.d.ts

@@ -0,0 +1,19 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterRadioItem component - a radio item for filters in dropdown menus
+ */
+export interface FilterRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+}
+/**
+ * FilterRadioItem component for displaying filter options with radio buttons
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
+ *   <FilterRadioItem value="option1">Option 1</FilterRadioItem>
+ *   <FilterRadioItem value="option2">Option 2</FilterRadioItem>
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+export declare const FilterRadioItem: React.ForwardRefExoticComponent<FilterRadioItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/filter/filter-separator.d.ts

@@ -0,0 +1,22 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+/**
+ * FilterSeparator component - a separator for filter groups
+ */
+export interface FilterSeparatorProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
+}
+/**
+ * FilterSeparator component for separating filter groups
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <FilterLabel>Status</FilterLabel>
+ *   <FilterCheckboxItem>Active</FilterCheckboxItem>
+ *   <FilterSeparator />
+ *   <FilterLabel>Type</FilterLabel>
+ *   <FilterCheckboxItem>Type 1</FilterCheckboxItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const FilterSeparator: React.ForwardRefExoticComponent<FilterSeparatorProps & React.RefAttributes<HTMLDivElement>>;