@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

package/dist/grid-safelist.css

@@ -0,0 +1,264 @@
+/**
+ * Grid and Col Component Safelist for Tailwind CSS 4
+ *
+ * In Tailwind 4, dynamically generated classes need to be explicitly listed
+ * for JIT compilation. This file ensures all Grid/Col utility classes are available.
+ *
+ * These classes are used by the Grid and Col layout components.
+ */
+
+/* Grid column spans - used by Col component */
+.col-span-1,
+.col-span-2,
+.col-span-3,
+.col-span-4,
+.col-span-5,
+.col-span-6,
+.col-span-7,
+.col-span-8,
+.col-span-9,
+.col-span-10,
+.col-span-11,
+.col-span-12,
+.col-span-full,
+.col-auto {
+  /* Tailwind will generate these */
+}
+
+/* Responsive column spans */
+.sm\:col-span-1,
+.sm\:col-span-2,
+.sm\:col-span-3,
+.sm\:col-span-4,
+.sm\:col-span-5,
+.sm\:col-span-6,
+.sm\:col-span-7,
+.sm\:col-span-8,
+.sm\:col-span-9,
+.sm\:col-span-10,
+.sm\:col-span-11,
+.sm\:col-span-12,
+.sm\:col-span-full,
+.sm\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.md\:col-span-1,
+.md\:col-span-2,
+.md\:col-span-3,
+.md\:col-span-4,
+.md\:col-span-5,
+.md\:col-span-6,
+.md\:col-span-7,
+.md\:col-span-8,
+.md\:col-span-9,
+.md\:col-span-10,
+.md\:col-span-11,
+.md\:col-span-12,
+.md\:col-span-full,
+.md\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.lg\:col-span-1,
+.lg\:col-span-2,
+.lg\:col-span-3,
+.lg\:col-span-4,
+.lg\:col-span-5,
+.lg\:col-span-6,
+.lg\:col-span-7,
+.lg\:col-span-8,
+.lg\:col-span-9,
+.lg\:col-span-10,
+.lg\:col-span-11,
+.lg\:col-span-12,
+.lg\:col-span-full,
+.lg\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.xl\:col-span-1,
+.xl\:col-span-2,
+.xl\:col-span-3,
+.xl\:col-span-4,
+.xl\:col-span-5,
+.xl\:col-span-6,
+.xl\:col-span-7,
+.xl\:col-span-8,
+.xl\:col-span-9,
+.xl\:col-span-10,
+.xl\:col-span-11,
+.xl\:col-span-12,
+.xl\:col-span-full,
+.xl\:col-auto {
+  /* Tailwind will generate these */
+}
+
+/* Grid columns - used by Grid component */
+.grid-cols-1,
+.grid-cols-2,
+.grid-cols-3,
+.grid-cols-4,
+.grid-cols-5,
+.grid-cols-6,
+.grid-cols-7,
+.grid-cols-8,
+.grid-cols-9,
+.grid-cols-10,
+.grid-cols-11,
+.grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+/* Responsive grid columns */
+.sm\:grid-cols-1,
+.sm\:grid-cols-2,
+.sm\:grid-cols-3,
+.sm\:grid-cols-4,
+.sm\:grid-cols-5,
+.sm\:grid-cols-6,
+.sm\:grid-cols-7,
+.sm\:grid-cols-8,
+.sm\:grid-cols-9,
+.sm\:grid-cols-10,
+.sm\:grid-cols-11,
+.sm\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.md\:grid-cols-1,
+.md\:grid-cols-2,
+.md\:grid-cols-3,
+.md\:grid-cols-4,
+.md\:grid-cols-5,
+.md\:grid-cols-6,
+.md\:grid-cols-7,
+.md\:grid-cols-8,
+.md\:grid-cols-9,
+.md\:grid-cols-10,
+.md\:grid-cols-11,
+.md\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.lg\:grid-cols-1,
+.lg\:grid-cols-2,
+.lg\:grid-cols-3,
+.lg\:grid-cols-4,
+.lg\:grid-cols-5,
+.lg\:grid-cols-6,
+.lg\:grid-cols-7,
+.lg\:grid-cols-8,
+.lg\:grid-cols-9,
+.lg\:grid-cols-10,
+.lg\:grid-cols-11,
+.lg\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.xl\:grid-cols-1,
+.xl\:grid-cols-2,
+.xl\:grid-cols-3,
+.xl\:grid-cols-4,
+.xl\:grid-cols-5,
+.xl\:grid-cols-6,
+.xl\:grid-cols-7,
+.xl\:grid-cols-8,
+.xl\:grid-cols-9,
+.xl\:grid-cols-10,
+.xl\:grid-cols-11,
+.xl\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+/* Gap utilities - used by Grid component */
+.gap-0,
+.gap-1,
+.gap-2,
+.gap-3,
+.gap-4,
+.gap-5,
+.gap-6,
+.gap-7,
+.gap-8,
+.gap-9,
+.gap-10,
+.gap-12,
+.gap-16,
+.gap-20,
+.gap-24 {
+  /* Tailwind will generate these */
+}
+
+.gap-x-0,
+.gap-x-1,
+.gap-x-2,
+.gap-x-3,
+.gap-x-4,
+.gap-x-5,
+.gap-x-6,
+.gap-x-7,
+.gap-x-8,
+.gap-x-9,
+.gap-x-10,
+.gap-x-12,
+.gap-x-16,
+.gap-x-20,
+.gap-x-24 {
+  /* Tailwind will generate these */
+}
+
+.gap-y-0,
+.gap-y-1,
+.gap-y-2,
+.gap-y-3,
+.gap-y-4,
+.gap-y-5,
+.gap-y-6,
+.gap-y-7,
+.gap-y-8,
+.gap-y-9,
+.gap-y-10,
+.gap-y-12,
+.gap-y-16,
+.gap-y-20,
+.gap-y-24 {
+  /* Tailwind will generate these */
+}
+
+/* Column start positions - used by Col component */
+.col-start-1,
+.col-start-2,
+.col-start-3,
+.col-start-4,
+.col-start-5,
+.col-start-6,
+.col-start-7,
+.col-start-8,
+.col-start-9,
+.col-start-10,
+.col-start-11,
+.col-start-12,
+.col-start-13,
+.col-start-auto {
+  /* Tailwind will generate these */
+}
+
+/* Order utilities - used by Col component */
+.order-1,
+.order-2,
+.order-3,
+.order-4,
+.order-5,
+.order-6,
+.order-7,
+.order-8,
+.order-9,
+.order-10,
+.order-11,
+.order-12,
+.order-first,
+.order-last,
+.order-none {
+  /* Tailwind will generate these */
+}

package/dist/types/components/asset-line.d.ts

@@ -0,0 +1,59 @@
+import type { NetworkType, TokenData } from "@gearbox-protocol/sdk";
+import * as React from "react";
+type Sizes = "default" | "sm" | "md" | "lg";
+/**
+ * AssetLineBaseProps — base props for AssetLine component.
+ */
+export interface AssetLineBaseProps {
+    symbolMaxLength?: number;
+    descriptionMaxLength?: number;
+    size?: Sizes;
+    iconSize?: Sizes;
+    gapSize?: Sizes;
+    hideValue?: boolean;
+}
+/**
+ * AssetLineProps — props for AssetLine component.
+ */
+export interface AssetLineProps extends AssetLineBaseProps {
+    token: TokenData | undefined;
+    tokenLabel?: string;
+    tokenDescription?: React.ReactNode;
+    chainId?: number;
+    network?: NetworkType;
+    value: React.ReactNode;
+    valueDescription?: React.ReactNode;
+    last: boolean;
+    onSelect?: () => void;
+    className?: string;
+}
+/**
+ * AssetLine — component for displaying asset information in a table row format.
+ *
+ * @usage
+ * Use AssetLine to display asset data in tables:
+ * token lists, asset rows, portfolio tables, asset selection lists.
+ *
+ * Props:
+ * - `token` — token data object (TokenData).
+ * - `tokenLabel` — custom label for token (overrides token.title).
+ * - `tokenDescription` — additional description displayed below token symbol.
+ * - `chainId` — chain ID for token network.
+ * - `network` — network type for token.
+ * - `value` — value to display in right column (required).
+ * - `valueDescription` — additional description displayed below value.
+ * - `last` — if true, removes bottom border (required).
+ * - `onSelect` — callback function for row selection (makes row clickable).
+ * - `size` — row size: "default", "sm", "md", "lg" (defaults to "default").
+ * - `iconSize` — icon size override (defaults to size).
+ * - `gapSize` — gap size between elements (defaults to size).
+ * - `symbolMaxLength` — max length for symbol truncation.
+ * - `descriptionMaxLength` — max length for description truncation.
+ * - `hideValue` — if true, hides the value column (defaults to false).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Uses GridTableRow and GridTableCell internally. Displays token icon, symbol, and value in a two-column layout.
+ * When onSelect is provided, row becomes clickable with cursor pointer.
+ */
+export declare const AssetLine: React.ForwardRefExoticComponent<AssetLineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/assets-list-cell.d.ts

@@ -0,0 +1,48 @@
+import type { Address } from "viem";
+export interface AssetsListCellProps {
+    /**
+     * The asset address
+     */
+    assetAddress: Address;
+    /**
+     * The asset symbol
+     */
+    symbol: string;
+    /**
+     * Optional comment/description to display next to the symbol
+     */
+    comment?: string;
+    /**
+     * Optional explorer URL for the asset
+     */
+    explorerUrl?: string;
+    /**
+     * Icon symbol to use if it doesn't match the asset symbol
+     * e.g., pool tokens don't have their own symbol and use underlying symbol
+     */
+    iconSymbol?: string;
+    /**
+     * Size of the token icon
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * AssetsListCell component for displaying asset information in list views
+ * Similar to TableCellAsset but without table cell wrapper, suitable for list/grid layouts
+ *
+ * @example
+ * ```tsx
+ * <AssetsListCell
+ *   assetAddress="0x1234..."
+ *   symbol="ETH"
+ *   comment="Ethereum"
+ *   explorerUrl="https://etherscan.io"
+ * />
+ * ```
+ */
+export declare function AssetsListCell({ assetAddress, symbol, iconSymbol, comment, explorerUrl, iconSize, className, }: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/assets-ratio.d.ts

@@ -0,0 +1,9 @@
+import type { Asset } from "@gearbox-protocol/sdk";
+import * as React from "react";
+export interface AssetsRatioProps {
+    assets: Array<Asset & {
+        balanceInUSD: bigint;
+    }>;
+    className?: string;
+}
+export declare function AssetsRatio({ assets, className, }: AssetsRatioProps): React.ReactElement;

package/dist/types/components/auth/signin-required.d.ts

@@ -31,4 +31,4 @@ export interface SignInRequiredProps extends TabButtonProps {
     children: ReactNode;
     skipSignIn?: boolean;
 }
-export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<import("react").AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/components/auth/siwe-provider.d.ts

@@ -25,6 +25,7 @@ interface SIWEProviderProps {
     apiRoutePrefix: string;
     statement?: string;
     children?: React.ReactNode;
+    onRefresh?: () => void;
 }
-export declare function SIWEClientProvider({ apiRoutePrefix, statement, children, ...props }: SIWEProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SIWEClientProvider({ apiRoutePrefix, statement, children, onRefresh, ...props }: SIWEProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Badge — component for displaying labels, tags, or status indicators.
  *

package/dist/types/components/base-link.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export interface BaseLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Renders the link as a child element using Radix Slot
+     * Useful for working with routing libraries like Next.js Link or React Router Link
+     *
+     * @example
+     * ```tsx
+     * <BaseLink asChild>
+     *   <Link href="/path">Link</Link>
+     * </BaseLink>
+     * ```
+     */
+    asChild?: boolean;
+    /**
+     * Indicates if this is an external link
+     */
+    external?: boolean;
+}
+/**
+ * BaseLink component for creating links with optional external link handling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BaseLink href="/dashboard">Dashboard</BaseLink>
+ *
+ * // External link
+ * <BaseLink href="https://example.com" external>Example</BaseLink>
+ *
+ * // With routing library
+ * <BaseLink asChild>
+ *   <Link to="/dashboard">Dashboard</Link>
+ * </BaseLink>
+ * ```
+ */
+declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { BaseLink };

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

@@ -0,0 +1,8 @@
+import type * as React from "react";
+import type { BlockSyncProps } from "../types/footer";
+/**
+ * BlockSync component - displays network synchronization status
+ * Shows a colored indicator that reflects the time since last block update
+ * On hover, displays detailed information about synced blocks for each chain
+ */
+export declare function BlockSync({ blockByChain, explorerAddresses, networkById, }: BlockSyncProps): React.ReactElement;

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

@@ -0,0 +1,24 @@
+import type * as React from "react";
+export interface BreadCrumb {
+    label: React.ReactNode;
+    href?: string;
+}
+export interface BreadCrumbsProps {
+    items: Array<BreadCrumb>;
+    className?: string;
+}
+/**
+ * BreadCrumbs - navigation breadcrumbs component
+ *
+ * @example
+ * ```tsx
+ * <BreadCrumbs
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Details" }
+ *   ]}
+ * />
+ * ```
+ */
+export declare function BreadCrumbs({ items, className, }: BreadCrumbsProps): React.ReactElement;

package/dist/types/components/buttons/back-button.d.ts

@@ -1,25 +1,20 @@
-export interface BackButtonProps {
+import { type VariantProps } from "class-variance-authority";
+declare const backButtonVariants: (props?: ({
+    variant?: "default" | "primary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface LinkComponentProps {
+    href: string;
+    className?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+export interface BackButtonProps extends VariantProps<typeof backButtonVariants> {
     href: string;
     text?: string;
     onClick?: () => void;
     className?: string;
+    LinkComponent?: React.ComponentType<LinkComponentProps>;
 }
-/**
- * BackButton — component for navigation back to previous page.
- *
- * @usage
- * Use BackButton to provide users with a way to return to the previous page or section:
- * breadcrumb navigation, detail pages, multi-step forms, nested views.
- * Mostly used in PageLayout component.
- *
- * Props:
- * - `href` — destination URL for navigation (required).
- * - `text` — custom text label (defaults to "Back" if not provided).
- * - `onClick` — optional callback function executed on click.
- * - `className` — additional CSS classes for styling.
- *
- * Do NOT use BackButton:
- * - for primary navigation menus (use NavigationButton or dedicated navigation components).
- * - for actions that don't navigate to a different page (use regular Button instead).
- */
-export declare function BackButton({ href, text, onClick, className, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BackButton({ href, text, onClick, className, variant, size, LinkComponent, }: BackButtonProps): import("react/jsx-runtime").JSX.Element;
+export { backButtonVariants };

package/dist/types/components/buttons/button.d.ts

@@ -1,10 +1,24 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "text" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
-    size?: "default" | "auto" | "xs" | "sm" | "lg" | "icon" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    variant?: "link" | "text" | "default" | "ghost" | "destructive" | "outline" | "secondary" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "auto" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Button component props
+ */
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /**
+     * Renders the button as a child element using Radix Slot
+     * Useful for creating link buttons or custom interactive elements
+     *
+     * @example
+     * ```tsx
+     * <Button asChild>
+     *   <Link href="/path">Link Button</Link>
+     * </Button>
+     * ```
+     */
     asChild?: boolean;
 }
 /**
@@ -36,6 +50,26 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  * Do NOT use Button:
  * - for passive labels or decorative UI elements.
  * - for elements that don't perform actions (use appropriate semantic elements instead).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variants
+ * <Button variant="destructive">Delete</Button>
+ * <Button variant="outline" size="sm">Small Button</Button>
+ *
+ * // As a link
+ * <Button asChild>
+ *   <Link href="/dashboard">Go to Dashboard</Link>
+ * </Button>
+ *
+ * // Icon button
+ * <Button size="icon" variant="ghost">
+ *   <Icon />
+ * </Button>
+ * ```
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+/**
+ * FilterButtonProps — props for FilterButton component.
+ */
+export interface FilterButtonProps extends ButtonProps {
+    /**
+     * Custom label for the filter button
+     * @default "Filter"
+     */
+    label?: string;
+    /**
+     * Whether to show the filter icon
+     * @default true
+     */
+    showIcon?: boolean;
+}
+/**
+ * FilterButton — button component with filter icon for triggering filter actions.
+ *
+ * @usage
+ * Use FilterButton to trigger filter dialogs or modals:
+ * filter triggers, search filters, table filters, list filters.
+ *
+ * Props:
+ * - `label` — custom button text (defaults to "Filter").
+ * - `showIcon` — whether to display filter icon (defaults to true).
+ * - `variant` — button variant (defaults to "outline").
+ * - `size` — button size (defaults to "default").
+ * - All standard Button props are supported (onClick, className, etc.).
+ *
+ * Note: Commonly used with WithFilterButton HOC or FilterModal component.
+ * Displays Filter icon from lucide-react by default.
+ *
+ * Do NOT use FilterButton:
+ * - for direct filtering without opening a dialog (use regular Button with filter logic).
+ * - when filter icon doesn't make sense visually (use regular Button instead).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FilterButton onClick={() => console.log("Filter clicked")} />
+ *
+ * // With custom label
+ * <FilterButton label="Apply Filters" variant="outline" size="sm" />
+ *
+ * // Without icon
+ * <FilterButton showIcon={false} label="Filters" />
+ * ```
+ */
+declare const FilterButton: React.ForwardRefExoticComponent<FilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { FilterButton };

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

@@ -2,5 +2,7 @@ export * from "./back-button";
 export * from "./button";
 export * from "./copy-button";
 export * from "./external-button";
+export * from "./filter-button";
 export * from "./navigation-button";
+export * from "./range-buttons";
 export * from "./tab-button";

package/dist/types/components/buttons/range-buttons.d.ts

@@ -0,0 +1,49 @@
+import type * as React from "react";
+/**
+ * RangeItemProps — props for single range option.
+ */
+export interface RangeItemProps<T> {
+    value: T;
+    label: React.ReactNode;
+}
+/**
+ * RangeButtonsProps — props for RangeButtons component.
+ */
+export interface RangeButtonsProps<T> {
+    range: T;
+    rangeList: Array<RangeItemProps<T>>;
+    setRange: (range: T) => void;
+    className?: string;
+}
+/**
+ * RangeButtons — button group component for selecting from a list of options.
+ *
+ * @usage
+ * Use RangeButtons to create option selectors:
+ * time range selectors, view mode toggles, filter options, segmented controls.
+ *
+ * Props:
+ * - `range` — currently selected value (required).
+ * - `rangeList` — array of selectable options with value and label (required).
+ * - `setRange` — callback function to change selected value (required).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Displays inline button group with active state highlighting.
+ * Supports generic type T for flexible value types.
+ *
+ * @example
+ * ```tsx
+ * const [timeRange, setTimeRange] = useState<"24h" | "7d" | "30d">("24h");
+ *
+ * <RangeButtons
+ *   range={timeRange}
+ *   rangeList={[
+ *     { value: "24h", label: "24H" },
+ *     { value: "7d", label: "7D" },
+ *     { value: "30d", label: "30D" },
+ *   ]}
+ *   setRange={setTimeRange}
+ * />
+ * ```
+ */
+export declare function RangeButtons<T>({ range, rangeList, setRange, className, }: RangeButtonsProps<T>): import("react/jsx-runtime").JSX.Element;