@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/types/components/navbar-indicator-context.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+interface NavbarIndicatorContextType {
+    registerItem: (id: string, element: HTMLElement) => void;
+    unregisterItem: (id: string) => void;
+    setActiveItem: (id: string) => void;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    indicatorRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const NavbarIndicatorProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useNavbarIndicator: () => NavbarIndicatorContextType | null;
+export {};

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

@@ -0,0 +1,25 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const navbarVariants: (props?: ({
+    variant?: "default" | "right" | "left" | "centered" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Navbar component props
+ */
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navbarVariants> {
+    /**
+     * Container class name for inner wrapper
+     */
+    containerClassName?: string;
+}
+/**
+ * Navbar component for application navigation
+ */
+declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Navbar navigation wrapper component
+ */
+declare const NavbarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Navbar, NavbarNav, navbarVariants };

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

@@ -0,0 +1,67 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const navitemVariants: (props?: ({
+    variant?: "link" | "default" | "ghost" | "tab" | "active" | "pill" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * NavItem component props
+ */
+export interface NavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof navitemVariants> {
+    /**
+     * Renders the navitem as a child element using Radix Slot
+     * Useful for creating custom navigation elements or working with routing libraries
+     *
+     * @example
+     * ```tsx
+     * <NavItem asChild>
+     *   <Link href="/path">Link</Link>
+     * </NavItem>
+     * ```
+     */
+    asChild?: boolean;
+    /**
+     * Whether the navigation item is currently active
+     */
+    active?: boolean;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional badge or indicator to display after the label
+     */
+    badge?: React.ReactNode;
+    /**
+     * Indicates if this is an external link
+     */
+    external?: boolean;
+}
+/**
+ * NavItem component for navigation items
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <NavItem href="/dashboard">Dashboard</NavItem>
+ *
+ * // Active state
+ * <NavItem href="/settings" active>Settings</NavItem>
+ *
+ * // With icon
+ * <NavItem href="/profile" icon={<UserIcon />}>Profile</NavItem>
+ *
+ * // With badge
+ * <NavItem href="/notifications" badge={<Badge>3</Badge>}>Notifications</NavItem>
+ *
+ * // As a router link
+ * <NavItem asChild>
+ *   <Link to="/dashboard">Dashboard</Link>
+ * </NavItem>
+ *
+ * // Tab variant
+ * <NavItem variant="tab" active>Overview</NavItem>
+ * ```
+ */
+declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavItem, navitemVariants };

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

@@ -0,0 +1,3 @@
+import { type BackButtonProps as BaseBackButtonProps } from "../buttons/back-button";
+export type BackButtonProps = Omit<BaseBackButtonProps, "LinkComponent">;
+export declare function BackButton(props: BackButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+/**
+ * Next.js-optimized components
+ * These components use Next.js features like Image, Link, and useRouter
+ * Use these when your project is using Next.js
+ */
+export { SignInRequired } from "../auth/signin-required";
+export { BackButton } from "./back-button";
+export { SIWEClientProvider } from "./siwe-provider";
+export { TokenIcon } from "./token-icon";
+export { Web3Providers } from "./web3-providers";

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

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

package/dist/types/components/next/token-icon.d.ts

@@ -0,0 +1,3 @@
+import { type TokenIconProps as BaseTokenIconProps } from "../token-icon";
+export type TokenIconProps = Omit<BaseTokenIconProps, "ImageComponent">;
+export declare function TokenIcon(props: TokenIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/next/web3-providers.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { Config } from "wagmi";
+/**
+ * Web3Providers — all-in-one provider component for Web3 apps with Wagmi, ConnectKit, SIWE, and React Query.
+ *
+ * @usage
+ * Use Web3Providers to wrap your Next.js application and enable Web3 functionality:
+ * app root, authentication context, wallet connection.
+ *
+ * Props:
+ * - `config` — Wagmi config object (required).
+ * - `apiRoutePrefix` — API route prefix for SIWE endpoints (required):
+ *   - `/api/nonce` — endpoint for fetching nonce.
+ *   - `/api/signin` — endpoint for verifying signature.
+ *   - `/api/session` — endpoint for getting current session.
+ *   - `/api/logout` — endpoint for signing out.
+ * - `statement` — optional custom statement for SIWE message (defaults to "Sign In With Ethereum.").
+ * - `children` — application content wrapped by provider (required).
+ *
+ * Note: Web3Providers wraps WagmiProvider, QueryClientProvider, ConnectKitProvider, and SIWEProvider with correct order and configuration.
+ */
+interface Web3ProvidersProps {
+    config: Config;
+    apiRoutePrefix: string;
+    statement?: string;
+    children: ReactNode;
+}
+export declare function Web3Providers({ config, apiRoutePrefix, statement, children, }: Web3ProvidersProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/not-found.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export interface NotFoundProps {
+    icon?: React.ReactNode;
+    message: React.ReactNode;
+    className?: string;
+}
+/**
+ * NotFound - Display a "not found" message with an optional icon
+ *
+ * @example
+ * ```tsx
+ * <NotFound
+ *   icon={<IconDeadRobot />}
+ *   message="No data found"
+ * />
+ * ```
+ */
+export declare function NotFound({ icon, message, className, }: NotFoundProps): React.ReactElement;

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

@@ -0,0 +1,15 @@
+import type * as React from "react";
+export interface OptionsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare function OptionsList({ className, children, ...props }: OptionsListProps): React.ReactElement;
+export interface OptionsItemProps {
+    icon?: React.ReactNode;
+    title: string | React.ReactNode;
+    subTitle?: string | React.ReactNode;
+    onClick?: () => void;
+    endingIcon?: React.ReactNode;
+    last?: boolean;
+    className?: string;
+}
+export declare function OptionsItem({ icon, title, subTitle, onClick, endingIcon, last, className, }: OptionsItemProps): React.ReactElement;

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

@@ -0,0 +1,69 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const pageTitleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    variant?: "default" | "primary" | "muted" | "gradient" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const pageTitleRootVariants: (props?: ({
+    spacing?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface PageTitleProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof pageTitleVariants> {
+    /**
+     * Optional back button element to display before the title
+     */
+    backButton?: React.ReactNode;
+    /**
+     * Optional icon to display before the title
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional action buttons to display after the title
+     */
+    actions?: React.ReactNode;
+    /**
+     * Spacing between elements
+     */
+    spacing?: "sm" | "default" | "lg";
+    /**
+     * Optional subtitle or description
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Whether to render as h1 or div
+     */
+    as?: "h1" | "h2" | "h3" | "div";
+}
+/**
+ * PageTitle component for displaying page headers with optional back button, icon, and actions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PageTitle>Dashboard</PageTitle>
+ *
+ * // With back button
+ * <PageTitle backButton={<BackButton href="/home" />}>
+ *   Settings
+ * </PageTitle>
+ *
+ * // With icon and actions
+ * <PageTitle
+ *   icon={<UserIcon />}
+ *   actions={<Button>Edit</Button>}
+ * >
+ *   Profile
+ * </PageTitle>
+ *
+ * // With subtitle
+ * <PageTitle subtitle="Manage your account settings">
+ *   Settings
+ * </PageTitle>
+ *
+ * // Different sizes and variants
+ * <PageTitle size="lg" variant="gradient">
+ *   Welcome
+ * </PageTitle>
+ * ```
+ */
+export declare const PageTitle: React.ForwardRefExoticComponent<PageTitleProps & React.RefAttributes<HTMLDivElement>>;
+export { pageTitleVariants, pageTitleRootVariants };

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

@@ -0,0 +1,28 @@
+import type * as React from "react";
+export interface PercentIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The percentage value (already in percent form, e.g., 75 for 75%)
+     */
+    percent: number;
+    /**
+     * Number of decimal places to show
+     * @default 2
+     */
+    decimals?: number;
+    /**
+     * Show color indicator based on percentage
+     * @default true
+     */
+    showColor?: boolean;
+}
+/**
+ * PercentIndicator component for displaying percentage values with optional color coding
+ *
+ * @example
+ * ```tsx
+ * <PercentIndicator percent={75} />  // Shows "75.00%"
+ * <PercentIndicator percent={50} decimals={1} />  // Shows "50.0%"
+ * <PercentIndicator percent={95} showColor={false} />  // No color coding
+ * ```
+ */
+export declare function PercentIndicator({ percent, decimals, showColor, className, ...props }: PercentIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/pool-points-indicator.d.ts

@@ -0,0 +1,41 @@
+import type { PropsWithChildren } from "react";
+export type PoolPointsColor = "primary" | "secondary" | "green" | "blue" | "yellow";
+export interface PoolPointsIndicatorProps {
+    /**
+     * Size of the token icon in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Color of the border and indicator
+     * @default "primary"
+     */
+    color?: PoolPointsColor;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+/**
+ * PoolPointsIndicator component - wrapper that adds a circular border and indicator
+ * around a TokenIcon (or any children) to show pool points
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with TokenIcon
+ * <PoolPointsIndicator size={24}>
+ *   <TokenIcon symbol="ETH" size={24} />
+ * </PoolPointsIndicator>
+ *
+ * // With custom color
+ * <PoolPointsIndicator size={24} color="green">
+ *   <TokenIcon symbol="USDC" size={24} />
+ * </PoolPointsIndicator>
+ *
+ * // Secondary color
+ * <PoolPointsIndicator size={32} color="secondary">
+ *   <TokenIcon symbol="DAI" size={32} />
+ * </PoolPointsIndicator>
+ * ```
+ */
+export declare function PoolPointsIndicator({ size, color, className, children, }: PropsWithChildren<PoolPointsIndicatorProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,117 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const searchLineVariants: (props?: ({
+    size?: "full" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const searchLineInputVariants: (props?: ({
+    active?: boolean | null | undefined;
+    theme?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SearchLineState {
+    value: string;
+    handleInput: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSubmit: (ev: {
+        preventDefault: () => void;
+    }) => void;
+    loading?: boolean;
+}
+export interface SearchLineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit">, VariantProps<typeof searchLineVariants> {
+    /**
+     * Search state object containing value, handlers, and loading state
+     */
+    searchState: SearchLineState;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Theme variant
+     */
+    theme?: "light" | "dark";
+    /**
+     * Whether to show the search icon on the left
+     */
+    showSearchIcon?: boolean;
+    /**
+     * Custom icon to show when active (default: ArrowRight)
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Callback when the search is submitted
+     */
+    onSubmit?: (value: string) => void;
+}
+/**
+ * SearchLine component with animated states and submit functionality
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with search state
+ * const [value, setValue] = useState("");
+ * const searchState = {
+ *   value,
+ *   handleInput: (e) => setValue(e.target.value),
+ *   handleSubmit: (e) => {
+ *     e.preventDefault();
+ *     console.log("Search:", value);
+ *   },
+ *   loading: false,
+ * };
+ *
+ * <SearchLine searchState={searchState} placeholder="Search..." />
+ *
+ * // With loading state
+ * <SearchLine
+ *   searchState={{ ...searchState, loading: true }}
+ *   theme="dark"
+ * />
+ *
+ * // Full width
+ * <SearchLine
+ *   searchState={searchState}
+ *   size="full"
+ *   showSearchIcon
+ * />
+ * ```
+ */
+export declare const SearchLine: React.ForwardRefExoticComponent<SearchLineProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for WithSearchLine component
+ */
+export interface WithSearchLineProps {
+    /**
+     * Search state object
+     */
+    searchState: SearchLineState;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Theme variant
+     */
+    theme?: "light" | "dark";
+    /**
+     * Content to display alongside the search line
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name for the container
+     */
+    className?: string;
+}
+/**
+ * WithSearchLine component that combines content with a search line
+ *
+ * @example
+ * ```tsx
+ * <WithSearchLine
+ *   searchState={searchState}
+ *   placeholder="Search items..."
+ * >
+ *   <h2>Items List</h2>
+ * </WithSearchLine>
+ * ```
+ */
+export declare const WithSearchLine: React.ForwardRefExoticComponent<WithSearchLineProps & React.RefAttributes<HTMLDivElement>>;
+export { searchLineVariants, searchLineInputVariants };

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

@@ -1,4 +1,5 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 /**
  * Select — dropdown select component and its subcomponents.
@@ -29,11 +30,17 @@ import * as React from "react";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const selectTriggerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants, };

package/dist/types/components/short-string.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+/**
+ * ShortStringProps — props for ShortString component.
+ */
+export interface ShortStringProps {
+    children: string;
+    maxLength?: number;
+    className?: string;
+    showTooltip?: boolean;
+}
+/**
+ * ShortString — component for truncating text with tooltip showing full content.
+ *
+ * @usage
+ * Use ShortString to display long text in limited space:
+ * long addresses, file names, descriptions, text overflow handling.
+ *
+ * Props:
+ * - `children` — text content to display (required).
+ * - `maxLength` — maximum character length before truncation (if not provided, uses CSS text-overflow).
+ * - `className` — additional CSS classes for styling.
+ * - `showTooltip` — whether to show tooltip with full text on hover (defaults to true).
+ *
+ * Note: If maxLength is not provided, uses CSS text-overflow with ellipsis.
+ * If maxLength is provided, truncates text with JavaScript and adds "..." suffix.
+ * Tooltip shows full text content on hover when enabled.
+ *
+ * @example
+ * ```tsx
+ * <ShortString maxLength={20}>
+ *   This is a very long string that will be truncated
+ * </ShortString>
+ *
+ * <ShortString>
+ *   This will be truncated with CSS text-overflow
+ * </ShortString>
+ * ```
+ */
+export declare function ShortString({ children, maxLength, className, showTooltip, }: ShortStringProps): React.ReactElement;

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

@@ -1,11 +1,28 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const skeletonVariants: (props?: ({
+    variant?: "default" | "lighter" | "darker" | null | undefined;
+    speed?: "default" | "slow" | "fast" | null | undefined;
+    width?: "full" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3/4" | "1/2" | "1/3" | "1/4" | null | undefined;
+    height?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Skeleton — loading placeholder component.
+ * SkeletonProps — props for Skeleton component.
+ */
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+}
+/**
+ * Skeleton — loading placeholder component with pulse animation.
  *
  * @usage
  * Use Skeleton to display loading placeholders:
  * content loading states, data fetching indicators, placeholder animations.
  *
  * Props:
+ * - `variant` — visual variant: "default", "lighter", "darker" (defaults to "default").
+ * - `speed` — animation speed: "slow", "default", "fast" (defaults to "default").
+ * - `width` — width preset: "full", "3/4", "1/2", "1/3", "1/4", "xs", "sm", "md", "lg", "xl", "2xl" (defaults to "full").
+ * - `height` — height preset: "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl" (defaults to "md").
  * - All standard HTML div props are supported (className, style, etc.).
  *
  * Note: Uses pulse animation and muted background color.
@@ -15,6 +32,14 @@
  * Do NOT use Skeleton:
  * - for error states (use appropriate error components).
  * - for empty states (use appropriate empty state components).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton />
+ * <Skeleton width="1/2" height="sm" />
+ * <Skeleton variant="lighter" width="md" height="lg" />
+ * <Skeleton speed="fast" width="sm" height="xl" className="rounded-full" />
+ * ```
  */
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+declare function Skeleton({ className, variant, speed, width, height, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, skeletonVariants };