@gearbox-protocol/permissionless-ui 1.22.0-next.98 → 1.22.0

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

@@ -30,5 +30,6 @@ export interface SignInRequiredProps extends TabButtonProps {
     owner?: Address;
     children: ReactNode;
     skipSignIn?: boolean;
+    hideConnectButton?: boolean;
 }
-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;
+export declare function SignInRequired({ children, owner, skipSignIn, hideConnectButton, ...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/compound-apy/compound-apy.d.ts

@@ -1,6 +1,14 @@
 import { TokenData } from '@gearbox-protocol/sdk';
 import { PoolAPYPointsTip } from '../pool-apy-tooltip';
 import { LocaleKeys } from '../../locale';
+import { TokenSymbolProps } from '..';
+/**
+ * For GEAR token, use the logo symbol instead of the standard token icon.
+ * The standard gear.svg has a white background circle that looks bad on dark themes.
+ */
+export declare function getRewardTokenSymbol(token: Exclude<TokenSymbolProps["token"], string>, rewardTokenSymbol: string | undefined): (string | {
+    icon: string;
+}) | undefined;
 export interface PoolBaseAPY {
     type: "supplyAPY" | "tokenYield";
     apy: number;

package/dist/types/components/detailed-apy/detailed-apy.d.ts

@@ -1,54 +1,40 @@
-import type * as React from "react";
-export interface ApyItem {
-    type?: string;
+import { ExtraRewardApy, TokenData } from '@gearbox-protocol/sdk';
+import { JSX } from 'react';
+import { Address } from 'viem';
+export type PoolBaseAPY = {
+    type: "supplyAPY";
     apy: number;
-    label?: string;
-    token?: string;
-}
+} | {
+    type: "tokenYield";
+    apy: number;
+};
 export interface DetailedApyProps {
-    /**
-     * Total APY value
-     */
-    totalAPY?: number;
-    /**
-     * Whether total APY is loading
-     */
+    totalAPY: number;
     totalAPYLoading?: boolean;
-    /**
-     * Base APY items
-     */
-    baseAPY?: ApyItem[];
-    /**
-     * Extra APY items (rewards, etc.)
-     */
-    extraAPY?: ApyItem[];
-    /**
-     * Tokens list for displaying token names
-     */
-    tokensList?: Record<string, {
-        symbol: string;
-    }>;
-    /**
-     * Children (displayed as the trigger)
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class
-     */
-    className?: string;
+    baseAPY: Array<PoolBaseAPY>;
+    extraAPY: Array<ExtraRewardApy>;
+    tokensList: Record<Address, TokenData> | undefined;
+}
+interface PoolRewardsIconProps {
+    reward: ExtraRewardApy;
+    tokensList: Record<Address, TokenData> | undefined;
+    size?: number;
+    margin?: string;
 }
+export declare function PoolRewardsIcon({ reward, tokensList, ...rest }: PoolRewardsIconProps): JSX.Element;
 /**
- * DetailedApy — displays APY with detailed breakdown tooltip
+ * DetailedApy — displays APY breakdown with base pool APY and extra reward APYs
  *
  * @example
  * ```tsx
  * <DetailedApy
  *   totalAPY={5.23}
- *   baseAPY={[{ type: 'supply', apy: 3.5 }]}
- *   extraAPY={[{ type: 'rewards', apy: 1.73 }]}
- * >
- *   5.23%
- * </DetailedApy>
+ *   totalAPYLoading={false}
+ *   baseAPY={[{ type: "supplyAPY", apy: 3.5 }]}
+ *   extraAPY={[{ apy: 1.73, rewardToken: "0x...", rewardTokenSymbol: "GEAR", token: "0x...", balance: 0n }]}
+ *   tokensList={tokensList}
+ * />
  * ```
  */
-export declare function DetailedApy({ totalAPY, totalAPYLoading, baseAPY, extraAPY, tokensList, children, className, }: DetailedApyProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailedApy({ totalAPY, totalAPYLoading, baseAPY, extraAPY, tokensList, }: DetailedApyProps): JSX.Element;
+export {};

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

@@ -13,6 +13,12 @@ export interface DetailedPageTitleProps {
     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 */

package/dist/types/components/dialog/dialog-modal-container.d.ts

@@ -8,7 +8,7 @@ declare const dialogModalContainerVariants: (props?: ({
 export interface DialogModalContainerProps {
     show: boolean;
     onClickOutside?: () => void;
-    modal?: Omit<ModalProps, "ref" | " children" | "show" | "onClickOutside">;
+    modal?: Omit<ModalProps, "ref" | "children" | "show" | "onClickOutside">;
     dialog?: Omit<DialogContainerProps, "ref" | "children"> & VariantProps<typeof dialogModalContainerVariants>;
 }
 /**

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

@@ -71,6 +71,7 @@ export * from './markdown-viewer';
 export * from './modal';
 export * from './navbar';
 export * from './navbar-logo';
+export * from './navigation-context';
 export * from './navitem';
 export * from './not-found';
 export * from './options-list';

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

@@ -20,3 +20,7 @@ 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/header/header.d.ts

@@ -50,6 +50,16 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
      * If not provided, the desktop navigation will be used
      */
     mobileMenuContent?: React.ReactNode;
+    /**
+     * Controlled open state of the mobile menu.
+     * When provided together with onMobileMenuOpenChange, the menu is controlled from outside.
+     */
+    mobileMenuOpen?: boolean;
+    /**
+     * Called when the mobile menu open state should change.
+     * Use with mobileMenuOpen for controlled mode (e.g. to close from a parent or sync with route).
+     */
+    onMobileMenuOpenChange?: (open: boolean) => void;
 }
 /**
  * Header component with support for navigation, logo, and actions
@@ -98,6 +108,16 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
  *   }
  * />
  * ```
+ *
+ * @example Controlled mobile menu (open/close from outside)
+ * ```tsx
+ * const [mobileOpen, setMobileOpen] = useState(false);
+ * <Header
+ *   mobileMenuContent={<MobileNav />}
+ *   mobileMenuOpen={mobileOpen}
+ *   onMobileMenuOpenChange={setMobileOpen}
+ * />
+ * ```
  */
 export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 export {};

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

@@ -1,9 +1,12 @@
 import { VariantProps } from 'class-variance-authority';
+import { ZIndexLayer } from '../../utils';
 import * as React from "react";
 declare const dialogModalVariants: (props?: ({
     colorTheme?: "default" | "dark" | "dark-transparent" | null | undefined;
     backdrop?: "default" | "success" | "failure" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Layer key for stacking: MODAL (default), MODAL_ALERT (above modals), LOADING (below modals), BANNERS. */
+export type ModalZIndexLayer = Extract<ZIndexLayer, "MODAL" | "MODAL_ALERT" | "LOADING" | "BANNERS">;
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogModalVariants> {
     /**
      * Whether to show the dialog container
@@ -22,6 +25,12 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, Varian
      * Only works when used as a modal overlay
      */
     onClickOutside?: () => void;
+    /**
+     * Z-index layer: MODAL (default), MODAL_ALERT (e.g. alerts above settings), LOADING (below modals), BANNERS.
+     * Use string literals (e.g. "MODAL_ALERT").
+     * @default "MODAL"
+     */
+    zIndexLayer?: ModalZIndexLayer;
 }
 /**
  * Modal component for responsive content width within dialogs

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

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

package/dist/types/components/navbar/navbar-with-overflow.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+export interface NavbarOverflowItem {
+    id: string;
+    label: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface NavbarWithOverflowProps {
+    items: NavbarOverflowItem[];
+    moreLabel?: React.ReactNode;
+    className?: string;
+}
+/**
+ * NavbarWithOverflow — renders nav items inline, moving items that don't fit
+ * into a "More" dropdown. Self-contained: measures its own wrapper width
+ * via ResizeObserver. When all items fit, they are centered (via parent flex).
+ *
+ * Use inside <Navbar> or any flex container.
+ */
+export declare function NavbarWithOverflow({ items, moreLabel, className, }: NavbarWithOverflowProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/navigation-context/index.d.ts

@@ -0,0 +1 @@
+export { type NavigationAdapter, type NavigationLinkProps, NavigationProvider, useNavigationAdapter, } from './navigation-context';

package/dist/types/components/navigation-context/navigation-context.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export interface NavigationLinkProps {
+    to: string;
+    className?: string;
+    target?: string;
+    rel?: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+    children?: React.ReactNode;
+}
+export interface NavigationAdapter {
+    Link: React.ComponentType<any>;
+    useLocation: () => {
+        hash: string;
+        pathname: string;
+    };
+    useNavigate: () => (to: string) => void;
+}
+interface NavigationProviderProps extends NavigationAdapter {
+    children: React.ReactNode;
+}
+/**
+ * Universal navigation provider.
+ * Pass your router's Link component, useLocation, and useNavigate directly.
+ *
+ * @example react-router-dom
+ * ```tsx
+ * import { Link, useLocation, useNavigate } from "react-router-dom";
+ *
+ * <NavigationProvider Link={Link} useLocation={useLocation} useNavigate={useNavigate}>
+ *   <App />
+ * </NavigationProvider>
+ * ```
+ *
+ * @example Next.js (via @gearbox-protocol/permissionless-ui/next)
+ * ```tsx
+ * import { NextNavigationProvider } from "@gearbox-protocol/permissionless-ui/next";
+ *
+ * <NextNavigationProvider Link={NextLink} useRouter={useRouter} usePathname={usePathname}>
+ *   <App />
+ * </NextNavigationProvider>
+ * ```
+ */
+export declare function NavigationProvider({ Link, useLocation, useNavigate, children, }: NavigationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useNavigationAdapter(): NavigationAdapter;
+export {};

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

@@ -7,5 +7,6 @@ export { SignInRequired } from '../auth/signin-required';
 export { preloadTokenIcons } from '../token-icon';
 export { BackButton } from './back-button';
 export { NextMarkdownViewer, type NextMarkdownViewerProps, } from './next-markdown-viewer';
+export { NextNavigationProvider } from './next-navigation-provider';
 export { SIWEClientProvider } from './siwe-provider';
 export { TokenIcon } from './token-icon';

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

@@ -0,0 +1,26 @@
+import type * as React from "react";
+interface NextNavigationProviderProps {
+    Link: React.ComponentType<any>;
+    useRouter: () => {
+        push: (url: string) => void;
+    };
+    usePathname: () => string;
+    children: React.ReactNode;
+}
+/**
+ * Navigation provider for Next.js App Router.
+ * Maps Next.js navigation primitives to the universal NavigationAdapter.
+ *
+ * @example
+ * ```tsx
+ * import { NextNavigationProvider } from "@gearbox-protocol/permissionless-ui/next";
+ * import NextLink from "next/link";
+ * import { useRouter, usePathname } from "next/navigation";
+ *
+ * <NextNavigationProvider Link={NextLink} useRouter={useRouter} usePathname={usePathname}>
+ *   <App />
+ * </NextNavigationProvider>
+ * ```
+ */
+export declare function NextNavigationProvider({ Link: NextLink, useRouter, usePathname, children, }: NextNavigationProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 export interface OptionsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
@@ -9,7 +9,6 @@ export interface OptionsItemProps {
     subTitle?: string | React.ReactNode;
     onClick?: () => void;
     endingIcon?: React.ReactNode;
-    first?: boolean;
     last?: boolean;
     className?: string;
 }

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

@@ -17,9 +17,13 @@ export interface PageTitleProps extends React.HTMLAttributes<HTMLDivElement>, Va
      */
     icon?: React.ReactNode;
     /**
-     * Optional position of the actions
+     * Position of the actions (mobile-first base)
      */
     actionsPosition?: "left" | "right";
+    /**
+     * Position of the actions from md breakpoint (≥768px). Overrides actionsPosition.
+     */
+    actionsPositionMd?: "left" | "right";
     /**
      * Optional action buttons to display after the title
      */

package/dist/types/components/slider-token/index.d.ts

@@ -1 +1,3 @@
 export * from './slider-token';
+export * from './slider-token-label';
+export * from './slider-token-utils';

package/dist/types/components/slider-token/slider-token-label.d.ts

@@ -0,0 +1,13 @@
+export interface SliderTokenLabelProps {
+    point: number;
+    min: number;
+    max: number;
+    label: string;
+    align: "top" | "bottom";
+    onSelect: (value: number) => void;
+}
+/**
+ * Clickable label for a slider-token marker (numeric below or text above).
+ * Positioned with the same thumb-offset logic as the track.
+ */
+export declare function SliderTokenLabel({ point, min, max, label, align, onSelect, }: SliderTokenLabelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/slider-token/slider-token-utils.d.ts

@@ -0,0 +1,13 @@
+import { MarkerPoint } from '../slider/slider-utils';
+/**
+ * Build marker points for SliderToken: base step points + additional points,
+ * each with type "base" or "additional". Does not use decimals/precision
+ * (unlike slider-utils makeMarkerPoints).
+ */
+export declare function makeSliderTokenMarkerPoints(min: number, max: number, markerStep: number, additionalPoints?: Record<number, number>): MarkerPoint[];
+/**
+ * Remove base markers that are too close to the next marker or to a previous
+ * additional marker (matches interface SliderToken merge logic).
+ * First and last markers are always kept; additional markers are never removed.
+ */
+export declare function mergeCloseMarkers(markers: MarkerPoint[], mergeDistance: number): MarkerPoint[];

package/dist/types/components/slider-token/slider-token.d.ts

@@ -1,70 +1,21 @@
 import { TokenData } from '@gearbox-protocol/sdk';
-import type * as React from "react";
 export interface SliderTokenProps {
-    /**
-     * Minimum value
-     * @default 0
-     */
-    from?: number;
-    /**
-     * Maximum value
-     * @default 100
-     */
-    to?: number;
-    /**
-     * Current value
-     */
-    value?: number;
-    /**
-     * Token to display
-     */
-    token?: TokenData;
-    /**
-     * Step increment
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Step between markers
-     */
-    markerStep?: number;
-    /**
-     * Callback when value changes
-     */
-    setValue?: (value: number) => void;
-    /**
-     * Additional marker positions
-     */
-    additionalMarkers?: number[];
-    /**
-     * Labels for additional markers
-     */
-    additionalMarkersLabels?: Record<number, string>;
-    /**
-     * Epsilon for snapping to markers (percentage)
-     */
+    from: number;
+    to: number;
+    token: TokenData;
+    step: number;
+    markerStep: number;
+    value: number;
+    setValue: (v: number) => void;
     epsilon_inPer?: number;
-    /**
-     * Children content
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class
-     */
+    additionalMarkers?: number | Array<number>;
+    additionalMarkersLabels?: Record<number, string>;
+    mergeMarkers_inPer?: number;
     className?: string;
 }
 /**
- * SliderToken — a slider with token display
- *
- * @example
- * ```tsx
- * <SliderToken
- *   from={0}
- *   to={100}
- *   value={50}
- *   token={tokenData}
- *   setValue={setValue}
- * />
- * ```
+ * SliderToken — slider with token-scale markers and labels.
+ * No TokenSymbol/percent header (parent renders that).
+ * Uses Radix Slider + SliderMark + SliderTokenLabel; snap to all markers.
  */
-export declare function SliderToken({ from, to, value, token, step, setValue, additionalMarkers, additionalMarkersLabels, epsilon_inPer, children, className, }: SliderTokenProps): import("react/jsx-runtime").JSX.Element;
+export declare function SliderToken({ from, to, step, markerStep, token, additionalMarkers, additionalMarkersLabels, value, setValue, epsilon_inPer, mergeMarkers_inPer, className, }: SliderTokenProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/token-symbol/token-symbol.d.ts

@@ -1,6 +1,7 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
+import { TokenIconProps } from '../token-icon';
 declare const tokenSymbolVariants: (props?: ({
     marginSize?: "sm" | "lg" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -54,6 +55,7 @@ export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      */
     maxLength?: number;
 }
+export declare function getSymbolOrIcon(token: TokenSymbolProps["token"]): TokenIconProps["symbol"] | undefined;
 /**
  * TokenSymbol component for displaying token symbols with optional icon and comment
  *

package/dist/types/components/tooltip/simple-tooltip.d.ts

@@ -55,6 +55,8 @@ export interface SimpleTooltipProps {
  * `title` = trigger element, `children` = popup content.
  *
  * Supports **hover** (default) and **click** trigger modes.
+ * Nested tooltips (tooltip inside tooltip content) are supported:
+ * when a child tooltip opens, the parent stays open until the child closes.
  *
  * @example
  * ```tsx
@@ -74,9 +76,9 @@ export interface SimpleTooltipProps {
  *
  * @example
  * ```tsx
- * // Modal-style (transparent background, for cards / complex content)
- * <SimpleTooltip title={<span>Details</span>} type="modal-tooltip" triangle={false}>
- *   <Card>…</Card>
+ * // Nested tooltip
+ * <SimpleTooltip title={<span>Outer</span>}>
+ *   Outer content with <SimpleTooltip title={<span>inner trigger</span>}>Inner tooltip</SimpleTooltip>
  * </SimpleTooltip>
  * ```
  */

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

@@ -1,5 +1,6 @@
 import { RangeButtonsProps } from '../buttons/range-buttons/range-buttons';
 import { YMeasureUnits } from '../graph/formatters';
+import { GraphViewWithDataProps } from '../graph/graph-view';
 import { GraphDropdownItem, GraphDropdownProps } from './graph-dropdown';
 import type * as React from "react";
 /**
@@ -19,7 +20,7 @@ export interface GraphData {
 /**
  * TradingView component props
  */
-export interface TradingViewProps<T extends string = string> {
+export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data"> {
     /** Graph data - single or array of series */
     data: GraphData | Array<GraphData> | undefined;
     /** Y-axis unit for single or multiple series */
@@ -113,4 +114,4 @@ export interface TradingViewProps<T extends string = string> {
  * />
  * ```
  */
-export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, noDataMessage, currentValueDecimals, }: TradingViewProps<T>): React.ReactElement;
+export declare function TradingView<T extends string = string>({ data, yMeasureUnit, height, defaultGraph, onGraphSelected, graphs, isMultipleSelect, range, rangeList, setRange, onGraphExpanded, isGraphExpanded, onUnselectSeries, graphsWithNoData, loadingGraphs, noDataMessage, currentValueDecimals, containerClassName, ...restProps }: TradingViewProps<T>): React.ReactElement;

package/dist/types/configs/tailwind-preset.d.ts

@@ -20,9 +20,9 @@
  */
 export declare const preset: {
     darkMode: "class";
-    safelist: {
+    safelist: (string | {
         pattern: RegExp;
-    }[];
+    })[];
     theme: {
         extend: {
             screens: {

package/dist/types/index.d.ts

@@ -29,7 +29,7 @@ export * from './components/confirm-menu';
 export * from './components/credit-session-status';
 export * from './components/currency-button';
 export * from './components/description';
-export * from './components/detailed-apy';
+export { DetailedApy, type DetailedApyProps, PoolRewardsIcon, } from './components/detailed-apy';
 export * from './components/detailed-page-title';
 export * from './components/dialog';
 export * from './components/dropdown-label';
@@ -69,6 +69,7 @@ export * from './components/markdown-viewer';
 export * from './components/modal';
 export * from './components/navbar';
 export * from './components/navbar-logo';
+export * from './components/navigation-context';
 export * from './components/navitem';
 export * from './components/network-icon';
 export * from './components/not-found';

package/dist/types/utils/ranges.d.ts

@@ -30,4 +30,4 @@ export interface ColorInterval {
  * // ]
  * ```
  */
-export declare function getAvailableRanges(availableStart: number, availableEnd: number, intervals: ColorInterval[]): ColorInterval[];
+export declare function getAvailableRanges(availableStart: number | undefined, availableEnd: number | undefined, intervals: ColorInterval[]): ColorInterval[];

package/dist/types/utils/z-index.d.ts

@@ -1,8 +1,29 @@
 /**
- * TODO: remove me
- * Temporary added to avoid conflicts with other libraries
+ * Centralized z-index catalog for overlays (toast, tooltips, modals, loading).
+ * Use these values so stacking order is consistent across the app and with consumers (e.g. client).
+ *
+ * Single source of truth: Z_INDEX_VALUES. Z_INDEX (Tailwind classes) and ZIndexLayer (type) are derived.
+ *
+ * Order from top to bottom:
+ * - TOAST: highest (notifications)
+ * - TOOLTIP: below toast, above modals
+ * - BANNERS: DataCollectionBanner, DevModeBanner, DevModeInfoModal
+ * - MODAL: main app modals (Settings, Ninja, etc.)
+ * - MODAL_ALERT: alerts/confirms that open on top of other modals (e.g. RPC warning)
+ * - DROPDOWN: dropdown/popover content (portaled to body) — must be above MODAL when inside a modal
+ * - LOADING: global loading overlay (below modals so modals can be closed first)
+ * - CONTENT: page content
  */
-export declare const Z_INDEX: {
-    readonly MODAL: "z-[50]";
-    readonly TOOLTIP: "z-[9999]";
+export declare const Z_INDEX_VALUES: {
+    readonly TOAST: 10000;
+    readonly TOOLTIP: 9000;
+    readonly BANNERS: 800;
+    readonly MODAL: 600;
+    readonly MODAL_ALERT: 700;
+    readonly DROPDOWN: 650;
+    readonly LOADING: 400;
+    readonly CONTENT: 0;
 };
+export type ZIndexLayer = keyof typeof Z_INDEX_VALUES;
+/** Tailwind z-index classes derived from Z_INDEX_VALUES. Use for className. */
+export declare const Z_INDEX: { [K in ZIndexLayer]: string; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.98",
+  "version": "1.22.0",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",