@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.2

package/dist/types/components/connectkit/connect-kit-wallet-adapter.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-export interface ConnectKitWalletAdapterProps {
-    children?: ReactNode;
-}
-/**
- * Bridges ConnectKit (`useModal`, `useSIWE`) into {@link WalletUIProvider} so
- * {@link ConnectRequired}, {@link SignInRequired}, and editable tables work without importing ConnectKit
- * from application code.
- *
- * Place inside `ConnectKitProvider` (and typically inside or beside {@link SIWEClientProvider} when using SIWE).
- */
-export declare function ConnectKitWalletAdapter({ children, }: ConnectKitWalletAdapterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-export { ConnectKitWalletAdapter, type ConnectKitWalletAdapterProps, } from './connect-kit-wallet-adapter';
-export { SIWEClientProvider, type SIWEClientProviderProps, } from './siwe-provider';

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

@@ -1,30 +0,0 @@
-/**
- * SIWEClientProvider — provider component for Sign-In With Ethereum (SIWE) authentication.
- *
- * Requires `connectkit` and must be used under `ConnectKitProvider` + `WagmiProvider`.
- *
- * @usage
- * Use SIWEClientProvider to wrap your application and enable SIWE authentication:
- * app root, authentication context, wallet-based authentication.
- *
- * Props:
- * - `apiRoutePrefix` — API route prefix for SIWE endpoints (required):
- *   - `/nonce` — endpoint for fetching nonce (relative to prefix).
- *   - `/signin` — endpoint for verifying signature.
- *   - `/session` — endpoint for getting current session.
- *   - `/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).
- * - `onRefresh` — optional callback after sign-in or sign-out (e.g. Next.js `router.refresh()`).
- *
- * Note: wraps ConnectKit's `SIWEProvider` with custom HTTP API integration.
- *
- * Import from `@gearbox-protocol/ui-kit/connectkit` so `connectkit` stays an optional peer dependency.
- */
-export interface SIWEClientProviderProps {
-    apiRoutePrefix: string;
-    statement?: string;
-    children?: React.ReactNode;
-    onRefresh?: () => void;
-}
-export declare function SIWEClientProvider({ apiRoutePrefix, statement, children, onRefresh, ...props }: SIWEClientProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/credit-session-status/credit-session-status.d.ts

@@ -1,7 +0,0 @@
-import type * as React from "react";
-export type CreditSessionStatusType = "active" | "closed" | "repaid" | "liquidated" | "liquidateExpired" | "liquidatePaused";
-export interface CreditSessionStatusProps {
-    status: CreditSessionStatusType;
-    className?: string;
-}
-export declare function CreditSessionStatus({ status, className, }: CreditSessionStatusProps): React.ReactElement;

package/dist/types/components/credit-session-status/index.d.ts

@@ -1 +0,0 @@
-export * from './credit-session-status';

package/dist/types/components/currency-button/currency-button.d.ts

@@ -1,44 +0,0 @@
-import { NetworkType } from '@gearbox-protocol/sdk';
-import { VariantProps } from 'class-variance-authority';
-import { TokenFullData } from '../../types/common';
-import type * as React from "react";
-declare const blockVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface CurrencyButtonProps extends VariantProps<typeof blockVariants> {
-    /** Override title (e.g. for tooltip). */
-    title?: string;
-    /** Max length for symbol display. @default 13 */
-    maxLength?: number;
-    /** Token to display. */
-    token?: Omit<TokenFullData, "address">;
-    /** When true, button does not respond to click. */
-    disabled?: boolean;
-    /** Called when button is clicked to open token select. When set and not disabled, block is clickable. */
-    showSelectDialog?: () => void;
-    /** When true, expand icon is rotated (e.g. dropdown open). @default false */
-    active?: boolean;
-    /** Chain ID for token/network. */
-    chainId?: number;
-    /** Network type. */
-    network?: NetworkType;
-    /** Extra class name. */
-    className?: string;
-    /** Fallback content when no token (e.g. "Select token"). */
-    children?: React.ReactNode;
-}
-/**
- * CurrencyButton — token display with optional expand icon and click-to-select.
- *
- * @usage
- * Use as the token selector trigger in SmartNumberInput or similar.
- * When showSelectDialog is set and not disabled, block is clickable and shows expand icon.
- *
- * @example
- * ```tsx
- * <CurrencyButton token={token} showSelectDialog={() => setOpen(true)} size="md" />
- * <CurrencyButton showSelectDialog={() => setOpen(true)}>Select token</CurrencyButton>
- * ```
- */
-export declare function CurrencyButton({ title, maxLength, token, disabled, showSelectDialog, size: sizeProp, active, chainId, network, className, children, }: CurrencyButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/currency-button/index.d.ts

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

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

@@ -1,28 +0,0 @@
-import { TypographyProps } from '../typography/typography';
-import * as React from "react";
-/**
- * DescriptionProps — props for Description component.
- */
-export interface DescriptionProps extends Omit<TypographyProps, "variant" | "color"> {
-}
-/**
- * Description — component for displaying secondary/muted text.
- *
- * @usage
- * Use Description for secondary information and hints:
- * subtitles, helper text, additional information, muted descriptions.
- *
- * Props:
- * - All standard HTML span props are supported (className, children, etc.).
- *
- * Note: Uses small text size (text-sm) and muted foreground color by default.
- * Rendered as inline span element.
- *
- * @example
- * ```tsx
- * <Description>This is a secondary text</Description>
- * <Description className="text-xs">Small description</Description>
- * ```
- */
-declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLDivElement>>;
-export { Description };

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

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

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

@@ -1,45 +0,0 @@
-import { ExplorerLink } from '../explorer-links-dropdown';
-import { TokenMetaInfo } from '../../types/common';
-import * as React from "react";
-export type { ExplorerLink } from '../explorer-links-dropdown';
-export interface DetailedPageTitleProps {
-    /** Main title text or node */
-    title: React.ReactNode;
-    /** Token data for the icon (symbol used for TokenIcon) */
-    token?: TokenMetaInfo;
-    /** Text to copy when the copy button is clicked; copy button is hidden when omitted */
-    toCopy?: string;
-    /** Explorer links for the dropdown; dropdown is hidden when empty or omitted */
-    explorerLinks?: Array<ExplorerLink>;
-    /** Optional slot for additional buttons before copy and explorer actions */
-    buttonsSlot?: React.ReactNode;
-    /** Position of action buttons: "left" (inline with title) or "right" (pushed to far right). Mobile-first base. */
-    actionsPosition?: "left" | "right";
-    /** Position of action buttons from md breakpoint (≥768px). Overrides actionsPosition. */
-    actionsPositionMd?: "left" | "right";
-    /** Size of the token icon in pixels. Default: 36 */
-    tokenIconSize?: number;
-    /** When true, the token icon is shown with grayscale filter */
-    disabled?: boolean;
-    /** Optional class name for the root element */
-    className?: string;
-}
-/**
- * DetailedPageTitle — page title with token icon, optional copy button, explorer dropdown, and button slot
- *
- * @usage
- * Use for detail pages (e.g. pool, vault) where the title shows a token icon, copy address, and explorer links.
- *
- * @example
- * ```tsx
- * <DetailedPageTitle
- *   title="USDC Pool (0x1234...)"
- *   token={usdcToken}
- *   toCopy="0x1234567890abcdef"
- *   explorerLinks={[{ url: "https://etherscan.io/...", name: "Etherscan" }]}
- *   buttonsSlot={<Button size="sm">Custom</Button>}
- * />
- * ```
- */
-declare const DetailedPageTitle: React.ForwardRefExoticComponent<DetailedPageTitleProps & React.RefAttributes<HTMLDivElement>>;
-export { DetailedPageTitle };

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

@@ -1,63 +0,0 @@
-import type * as React from "react";
-type ThemeVariant = "light" | "dark" | "empty" | "filledDark" | "filled";
-type SizeVariant = "sm" | "md" | "default" | "lg";
-export interface DefaultDropdownLabelProps {
-    /**
-     * Children content
-     */
-    children?: React.ReactNode;
-    /**
-     * Label text (alternative to children)
-     */
-    label?: React.ReactNode;
-    /**
-     * Whether dropdown is open
-     */
-    opened?: boolean;
-    /**
-     * Size variant or numeric font size.
-     * - `"sm"` — compact (7px vertical padding, 14px font, 8px border-radius)
-     * - `"md"` | `"default"` — standard (13px vertical padding, 14px font, 12px border-radius)
-     * - `"lg"` — large (13px vertical padding, 18px font, 12px border-radius)
-     * - `number` — custom font size in px (no padding/radius applied)
-     */
-    size?: number | SizeVariant | string;
-    /**
-     * Theme variant. Controls background, hover, and shadow styles.
-     * - `"filled"` — gray-60 background with shadow
-     * - `"filledDark"` — gray-10 background with shadow
-     * - `"empty"` | `"dark"` | `"light"` — transparent background
-     *
-     * When no theme is provided, no background/shadow styles are applied.
-     */
-    theme?: ThemeVariant | string;
-    /**
-     * Element type to render
-     */
-    as?: keyof JSX.IntrinsicElements;
-    /**
-     * Click handler
-     */
-    onClick?: () => void;
-    /**
-     * Custom icon (ReactNode). When omitted, a default caret-down icon is shown.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Default icon size in px (ignored when custom `icon` is provided).
-     * @default 16
-     */
-    iconSize?: number;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
-}
-/**
- * DefaultDropdownLabel — a label for dropdown triggers.
- *
- * Supports themed variants (`filled`, `filledDark`, `empty`, etc.) that
- * mirror the original `@gearbox-protocol/interface` DropdownButton styles.
- */
-export declare function DefaultDropdownLabel({ children, label, opened, size, theme, as: Component, onClick, icon, iconSize, className, }: DefaultDropdownLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/dropdown-label/index.d.ts

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

package/dist/types/components/error-view/error-view.d.ts

@@ -1,28 +0,0 @@
-import type * as React from "react";
-export interface ErrorViewProps {
-    /** HTTP status code or error code to display */
-    status: number;
-    /** Error message to display */
-    message: string;
-    /** Optional back button configuration */
-    backButton?: {
-        text: string;
-        href: string;
-    };
-    /** Additional className for the container */
-    className?: string;
-}
-/**
- * ErrorView - Display a centered error view with status code and message
- * Useful for error pages like 404, 500, etc.
- *
- * @example
- * ```tsx
- * <ErrorView
- *   status={404}
- *   message="Page not found"
- *   backButton={{ text: "Go back", href: "/" }}
- * />
- * ```
- */
-export declare function ErrorView({ status, message, backButton, className, }: ErrorViewProps): React.ReactElement;

package/dist/types/components/error-view/index.d.ts

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

package/dist/types/components/form/form-field.d.ts

@@ -1,38 +0,0 @@
-import { Input } from '../input';
-import type * as React from "react";
-interface FormFieldProps {
-    label: string;
-    error?: string;
-    required?: boolean;
-    helperText?: string;
-    inputProps?: React.ComponentProps<typeof Input>;
-    className?: string;
-}
-/**
- * FormField component - Composition of Label and Input with error handling
- *
- * Automatically manages ARIA attributes for accessibility
- *
- * @example
- * ```tsx
- * <FormField
- *   label="Email"
- *   required
- *   inputProps={{ type: "email", placeholder: "Enter your email" }}
- * />
- *
- * <FormField
- *   label="Username"
- *   error="Username is already taken"
- *   inputProps={{ value: username, onChange: handleChange }}
- * />
- *
- * <FormField
- *   label="Password"
- *   helperText="Must be at least 8 characters"
- *   inputProps={{ type: "password" }}
- * />
- * ```
- */
-export declare function FormField({ label, error, required, helperText, inputProps, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

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

package/dist/types/components/grid-td-cell/grid-td-cell.d.ts

@@ -1,8 +0,0 @@
-import type * as React from "react";
-export interface GridTDCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-    children?: React.ReactNode;
-}
-/**
- * GridTDCell — a simple table cell wrapper
- */
-export declare function GridTDCell({ children, className, ...props }: GridTDCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/grid-td-cell/index.d.ts

@@ -1 +0,0 @@
-export * from './grid-td-cell';

package/dist/types/components/help-center-container/help-center-container.d.ts

@@ -1,22 +0,0 @@
-import { BlockSyncProps } from '../../types/footer';
-import type * as React from "react";
-export interface HelpCenterContainerProps {
-    blockSyncProps: BlockSyncProps;
-    gapFromFooter: number;
-    footerHeight: number;
-}
-/**
- * HelpCenterContainer - displays network sync status
- * On desktop: fixed position in bottom-right corner, dynamically adjusts to stay above footer
- * On mobile: static position, rendered inside footer
- *
- * @example
- * ```tsx
- * <HelpCenterContainer
- *   blockSyncProps={blockSyncProps}
- *   footerHeight={108}
- *   gapFromFooter={8}
- * />
- * ```
- */
-export declare function HelpCenterContainer({ blockSyncProps, footerHeight, gapFromFooter, }: HelpCenterContainerProps): React.ReactElement;

package/dist/types/components/help-center-container/index.d.ts

@@ -1 +0,0 @@
-export * from './help-center-container';

package/dist/types/components/help-sections/help-sections.d.ts

@@ -1,33 +0,0 @@
-import type * as React from "react";
-export interface HelpSectionsProps {
-    /**
-     * Children content (help sections)
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
-}
-/**
- * HelpSections — a container for help section items
- */
-export declare function HelpSections({ children, className }: HelpSectionsProps): import("react/jsx-runtime").JSX.Element;
-export interface HelpSectionProps {
-    /**
-     * Section title
-     */
-    title?: React.ReactNode;
-    /**
-     * Section content
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
-}
-/**
- * HelpSection — a single help section with title and content
- */
-export declare function HelpSection({ title, children, className }: HelpSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/help-sections/index.d.ts

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

package/dist/types/components/hide-on/hide-on.d.ts

@@ -1,81 +0,0 @@
-import * as React from "react";
-/**
- * Breakpoint types - supports multiple naming conventions for backwards compatibility
- */
-export type BreakpointType = "xs" | "sm" | "md" | "lg" | "xl" | "small" | "medium" | "large" | "xlarge" | "extraSmall";
-/**
- * @deprecated Use BreakpointType instead
- */
-export type MediaWidthClasses = BreakpointType;
-export interface HideOnProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Breakpoint at which content should be hidden (with $ prefix)
-     */
-    $breakpoint?: BreakpointType;
-    /**
-     * Breakpoint at which content should be hidden (without $ prefix - legacy API)
-     */
-    breakpoint?: BreakpointType;
-    /**
-     * Element type to render
-     * @default "div"
-     */
-    as?: keyof JSX.IntrinsicElements;
-    children?: React.ReactNode;
-}
-/**
- * HideOn - Hide content on specified breakpoint and above
- *
- * Supports both `$breakpoint` (styled-components style) and `breakpoint` props
- * for backwards compatibility.
- *
- * @example
- * ```tsx
- * // New API
- * <HideOn $breakpoint="sm">
- *   <div>Hidden on small screens and above</div>
- * </HideOn>
- *
- * // Legacy API
- * <HideOn breakpoint="small">
- *   <div>Hidden on small screens and above</div>
- * </HideOn>
- * ```
- */
-export declare function HideOn({ $breakpoint, breakpoint, as: Component, children, className, ...props }: HideOnProps): React.ReactElement;
-export interface ShowOnProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Breakpoint at which content should be shown (with $ prefix)
-     */
-    $breakpoint?: BreakpointType;
-    /**
-     * Breakpoint at which content should be shown (without $ prefix - legacy API)
-     */
-    breakpoint?: BreakpointType;
-    /**
-     * Element type to render
-     * @default "div"
-     */
-    as?: keyof JSX.IntrinsicElements;
-    children?: React.ReactNode;
-}
-/**
- * ShowOn - Show content on specified breakpoint and above
- *
- * Supports both `$breakpoint` (styled-components style) and `breakpoint` props
- * for backwards compatibility.
- *
- * @example
- * ```tsx
- * // New API
- * <ShowOn $breakpoint="md">
- *   <div>Shown on medium screens and above</div>
- * </ShowOn>
- *
- * // Legacy API
- * <ShowOn breakpoint="medium">
- *   <div>Shown on medium screens and above</div>
- * </ShowOn>
- * ```
- */
-export declare function ShowOn({ $breakpoint, breakpoint, as: Component, children, className, ...props }: ShowOnProps): React.ReactElement;

package/dist/types/components/hide-on/index.d.ts

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

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

@@ -1,22 +0,0 @@
-import * as React from "react";
-/**
- * HorizontalIndicator - displays a label with an optional tooltip and a value
- *
- * @example
- * ```tsx
- * <HorizontalIndicator
- *   label="Total Value"
- *   tip="The total value locked"
- *   value="$1,234.56"
- * />
- * ```
- */
-export interface HorizontalIndicatorProps {
-    label: React.ReactNode;
-    value: React.ReactNode;
-    tip?: string;
-    valueDescription?: React.ReactNode;
-    className?: string;
-}
-declare const HorizontalIndicator: React.ForwardRefExoticComponent<HorizontalIndicatorProps & React.RefAttributes<HTMLDivElement>>;
-export { HorizontalIndicator };

package/dist/types/components/horizontal-indicator/index.d.ts

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

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

@@ -1,35 +0,0 @@
-/**
- * Image — universal image component that works in any React framework.
- *
- * @usage
- * Use Image for displaying images in a framework-agnostic way:
- * logos, icons, asset images, general images.
- *
- * Props:
- * - `src` — image source URL (required).
- * - `alt` — alternative text for accessibility (required).
- * - `width` — image width in pixels (required).
- * - `height` — image height in pixels (required).
- * - `onError` — callback when image fails to load (optional).
- * - `onLoad` — callback when image successfully loads (optional).
- * - `className` — additional CSS classes (optional).
- * - `loading` — loading behavior: "lazy" | "eager" (defaults to "lazy").
- *
- * Note: Uses native HTML img element with optimized loading attributes.
- * Works in any React framework (CRA, Vite, Next.js, Remix, etc.).
- *
- * Do NOT use Image:
- * - when you need Next.js-specific image optimization (use next/image directly).
- * - for background images (use CSS background-image instead).
- */
-export interface ImageProps {
-    src: string;
-    alt: string;
-    width: number;
-    height: number;
-    onError?: () => void;
-    onLoad?: () => void;
-    className?: string;
-    loading?: "lazy" | "eager";
-}
-export declare function Image({ src, alt, width, height, onError, onLoad, className, loading, }: ImageProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/types/components/layout/app-logo/app-logo.d.ts

@@ -1,26 +0,0 @@
-/**
- * AppLogo — application logo component with Gearbox Protocol logo and app name.
- *
- * @usage
- * Use AppLogo to display application branding:
- * header logo, footer logo, page branding.
- *
- * Props:
- * - `appName` — application name displayed next to logo (required).
- * - `size` — logo size: "default" or "small" (defaults to "default").
- *
- * Note: Uses Gearbox Protocol logo from static CDN. Logo size and text size adjust based on size prop.
- * Works with any React framework (not tied to Next.js).
- *
- * Do NOT use AppLogo:
- * - for custom logos or branding (use Image component with custom logo).
- * - when you need different logo styling (use Image component with appropriate styling).
- */
-export declare function AppLogo({ appName, size, }: {
-    appName?: string;
-    size?: "default" | "small";
-}): import("react/jsx-runtime").JSX.Element;
-export declare function AppLogoLink({ appName, className, }: {
-    appName?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/app-logo/index.d.ts

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

package/dist/types/components/layout/block/block.d.ts

@@ -1,23 +0,0 @@
-import type * as React from "react";
-export type BlockMargins = "none" | "sm" | "md" | "lg";
-export type JustifyContent = "flex-start" | "center" | "flex-end" | "between";
-export type AlignItems = "flex-start" | "center" | "flex-end" | "stretch";
-export interface BlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Bottom margin */
-    margin?: BlockMargins;
-    /** Horizontal alignment (justify-content) */
-    justify?: JustifyContent;
-    /** Vertical alignment (align-items) */
-    align?: AlignItems;
-}
-/**
- * Block — a flexbox container with configurable margin, justify, and align
- *
- * @example
- * ```tsx
- * <Block margin="md" justify="center" align="center">
- *   <div>Content</div>
- * </Block>
- * ```
- */
-export declare function Block({ children, margin, justify, align, className, ...props }: BlockProps): React.ReactElement;

package/dist/types/components/layout/block/index.d.ts

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