@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

package/dist/types/components/liquidation/liquidation-graph-tip/liquidation-graph-tip.d.ts

@@ -0,0 +1,13 @@
+import { TokenData } from '@gearbox-protocol/sdk';
+import { AxisParams } from '../../../hooks/use-liquidation';
+import type * as React from "react";
+export interface LiquidationGraphTipProps {
+    activePointX: number | undefined;
+    activePointY: number | undefined;
+    xAxis: AxisParams | undefined;
+    yAxis: AxisParams | undefined;
+    hf: number;
+    underlyingToken: TokenData | undefined;
+    maxLabelLength?: number;
+}
+export declare function LiquidationGraphTip({ activePointX, activePointY, xAxis, yAxis, hf, underlyingToken, maxLabelLength, }: LiquidationGraphTipProps): React.ReactElement;

package/dist/types/components/loader-guard/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './navbar';
+export * from './navbar-indicator-context';

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

@@ -0,0 +1,13 @@
+import { default as React } from '../../../node_modules/.pnpm/react@19.2.0/node_modules/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/navbar.d.ts

@@ -0,0 +1,25 @@
+import { 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/index.d.ts

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

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

@@ -0,0 +1,67 @@
+import { 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

@@ -1,3 +1,3 @@
-import { type BackButtonProps as BaseBackButtonProps } from "../buttons/back-button";
+import { 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

@@ -3,8 +3,8 @@
  * 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 { MarkdownViewer } from "./markdown-viewer";
-export { SIWEClientProvider } from "./siwe-provider";
-export { TokenIcon } from "./token-icon";
+export { SignInRequired } from '../auth/signin-required';
+export { BackButton } from './back-button';
+export { MarkdownViewer } from './markdown-viewer';
+export { SIWEClientProvider } from './siwe-provider';
+export { TokenIcon } from './token-icon';

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

@@ -1,3 +1,3 @@
-import { type TokenIconProps as BaseTokenIconProps } from "../token-icon";
+import { 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/not-found/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,69 @@
+import { 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/index.d.ts

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

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

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

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

@@ -0,0 +1,41 @@
+import { PropsWithChildren } from '../../../node_modules/.pnpm/react@19.2.0/node_modules/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-bar/index.d.ts

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

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

@@ -0,0 +1,33 @@
+import { VariantProps } from 'class-variance-authority';
+declare const searchBarVariants: (props?: ({
+    size?: "full" | "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface SearchBarProps extends VariantProps<typeof searchBarVariants> {
+    onChange: (query: string) => void;
+    placeholder?: string;
+    className?: string;
+    theme?: "light" | "dark";
+}
+/**
+ * SearchBar — search input component with icon.
+ *
+ * @usage
+ * Use SearchBar to provide search functionality:
+ * search inputs, filter inputs, query inputs, search forms.
+ *
+ * Props:
+ * - `onChange` — callback function called when search query changes (required).
+ * - `placeholder` — placeholder text (defaults to "Search...").
+ * - `className` — additional CSS classes for styling.
+ * - `size` — size variant: "sm", "default", "lg", "full" (defaults to "default").
+ * - `theme` — theme variant: "light" or "dark" (defaults to "light").
+ *
+ * Note: Includes search icon on the left side. Manages internal state for search query.
+ * Calls onChange callback on every input change. Includes animated states for active/focused.
+ *
+ * Do NOT use SearchBar:
+ * - for simple text inputs (use Input component).
+ * - when you don't need search icon (use Input component).
+ */
+export declare function SearchBar({ onChange, placeholder, className, size, theme, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,117 @@
+import { 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/index.d.ts

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

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

@@ -0,0 +1,46 @@
+import { VariantProps } from 'class-variance-authority';
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+/**
+ * Select — dropdown select component and its subcomponents.
+ *
+ * @usage
+ * Use Select to create dropdown selection menus:
+ * form selects, option pickers, filter dropdowns, choice selectors.
+ *
+ * Select Components:
+ * - `Select` — root component (SelectPrimitive.Root).
+ * - `SelectTrigger` — trigger button that opens the select menu.
+ * - `SelectValue` — displays the selected value.
+ * - `SelectContent` — dropdown content container.
+ * - `SelectItem` — individual selectable option.
+ * - `SelectLabel` — label for option groups.
+ * - `SelectGroup` — groups related options.
+ * - `SelectSeparator` — visual separator between options.
+ * - `SelectScrollUpButton` / `SelectScrollDownButton` — scroll buttons for long lists.
+ *
+ * Note: All components are based on Radix UI Select.
+ * Supports keyboard navigation and accessibility features.
+ * Prefer using these components instead of @radix-ui/react-select directly.
+ *
+ * Do NOT use Select:
+ * - for multi-select (use Checkbox or appropriate multi-select components).
+ * - for simple toggle switches (use Checkbox or Switch components).
+ */
+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 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, selectTriggerVariants, };

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

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

package/dist/types/components/signatures/confirmation-item.d.ts

@@ -1,4 +1,4 @@
-import type { Address, Hex } from "viem";
+import { Address, Hex } from 'viem';
 /**
  * ConfirmationItem — component for displaying transaction confirmation with address.
  *

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

@@ -1,3 +1,3 @@
-export * from "./confirmation-item";
-export * from "./identicon";
-export * from "./vertical-timeline";
+export * from './confirmation-item';
+export * from './identicon';
+export * from './vertical-timeline';

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

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

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

@@ -0,0 +1,45 @@
+import { 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;
+/**
+ * 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.
+ * Can be styled with className to match content dimensions.
+ * Prefer using this component instead of native HTML div element for loading placeholders.
+ *
+ * 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, variant, speed, width, height, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, skeletonVariants };

package/dist/types/components/stat-badge/index.d.ts

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