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

package/dist/types/components/network-icon/network-indicator.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from '../buttons';
+import { NetworkIcons } from '../../utils/network-icons';
+type IndicatorSize = "sm" | "md" | "default" | "lg";
+export interface NetworkIndicatorProps extends Omit<ButtonProps, "size" | "children"> {
+    network: NetworkIcons | undefined;
+    chainId: number | undefined;
+    size?: IndicatorSize;
+    iconSize?: number;
+    chevronSize?: number;
+    showTitle?: boolean;
+    opened: boolean;
+    /**
+     * When true, button appears enabled and shows chevron even without onClick.
+     * Useful when the component is used as a dropdown trigger that handles clicks externally.
+     * Defaults to true when onClick is provided.
+     */
+    interactive?: boolean;
+}
+/**
+ * Network picker trigger: optional "Network:" label, icon, and chevron.
+ */
+export declare const NetworkIndicator: import('react').ForwardRefExoticComponent<NetworkIndicatorProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/points-icon/index.d.ts

@@ -1 +1 @@
-export { PointsIcon, type PointsIconProps, type PointsReward, } from './points-icon';
+export { PointsIcon, type PointsIconProps, type PointsIconReward, type PointsReward, } from './points-icon';

package/dist/types/components/points-icon/points-icon.d.ts

@@ -1,6 +1,12 @@
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 import * as React from "react";
-export interface PointsReward {
+/**
+ * Minimal reward identity for {@link PointsIcon} (name + icon slug).
+ *
+ * Prefer this over the deprecated {@link PointsReward} alias — that name
+ * collides with SDK `PointsReward<T>` from `@gearbox-protocol/sdk/rewards`.
+ */
+export interface PointsIconReward {
     /**
      * Display name of the reward program
      */
@@ -10,11 +16,16 @@ export interface PointsReward {
      */
     type: string;
 }
+/**
+ * @deprecated Use {@link PointsIconReward}. The bare name conflicts with SDK
+ * `PointsReward<T>` from `@gearbox-protocol/sdk/rewards`.
+ */
+export type PointsReward = PointsIconReward;
 export interface PointsIconProps extends React.HTMLAttributes<HTMLImageElement>, Omit<RoundedImageProps, "size" | "src" | "alt"> {
     /**
      * Reward information with name and type
      */
-    reward: PointsReward;
+    reward: PointsIconReward;
     /**
      * Size of the icon in pixels
      */

package/dist/types/components/rwa-feature/index.d.ts

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

package/dist/types/components/rwa-feature/rwa-feature.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface RWAFeatureProps {
+    disabledStyle: boolean;
+    tooltip?: React.ReactNode;
+}
+/** The "RWA" gradient chip with an explanatory tooltip. */
+export declare function RWAFeature({ disabledStyle, tooltip, }: RWAFeatureProps): React.ReactElement;

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

@@ -3,8 +3,8 @@ import type * as React from "react";
 declare const skeletonVariants: (props?: ({
     variant?: "default" | "lighter" | "darker" | null | undefined;
     speed?: "default" | "fast" | "slow" | null | undefined;
-    width?: "full" | "xs" | "sm" | "lg" | "xl" | "2xl" | "md" | "3/4" | "1/2" | "1/3" | "1/4" | null | undefined;
-    height?: "xs" | "sm" | "lg" | "xl" | "2xl" | "md" | "3xl" | "4xl" | "5xl" | null | undefined;
+    width?: "full" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3/4" | "1/2" | "1/3" | "1/4" | null | undefined;
+    height?: "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type WidthPreset = NonNullable<VariantProps<typeof skeletonVariants>["width"]>;
 type HeightPreset = NonNullable<VariantProps<typeof skeletonVariants>["height"]>;

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

@@ -3,7 +3,7 @@ import * as React from "react";
 type ColSize = boolean | "auto";
 export interface SplitListProps {
     /** Size for each column (or function for per-index). @default true */
-    colSize?: ColSize | ((index: number) => ColSize);
+    colSize?: ColSize | ((index: number, arr: unknown[]) => ColSize);
     /** List items. */
     children?: React.ReactNode;
     /** Extra class name for the root. */

package/dist/types/components/status-dot/status-dot.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const statusDotVariants: (props?: ({
     variant?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {
     /**

package/dist/types/components/table/grid-table.d.ts

@@ -218,7 +218,7 @@ interface GridTableHeadProps extends ColProps, VariantProps<typeof gridTableHead
 declare const GridTableHead: React.ForwardRefExoticComponent<GridTableHeadProps & React.RefAttributes<HTMLDivElement>>;
 declare const gridTableCellVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
-    textAlign?: "left" | "center" | "right" | null | undefined;
+    textAlign?: "center" | "left" | "right" | null | undefined;
     gapBefore?: "none" | "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface GridTableCellProps extends ColProps, VariantProps<typeof gridTableCellVariants> {

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

@@ -1,12 +1,7 @@
-export * from './edit-button';
-export * from './editable-grid-table';
-export * from './editable-table';
 export * from './grid-error-line';
 export * from './grid-loading-line';
 export * from './grid-table';
-export * from './grid-table-loader';
 export * from './table';
 export * from './table-loader';
 export * from './table-loader-guard';
 export * from './table-sm';
-export * from './updated-value';

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

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const textColorVariants: (props?: ({
-    buttonColor?: "primaryDashed" | "secondaryDashed" | "empty" | null | undefined;
+    buttonColor?: "empty" | "primaryDashed" | "secondaryDashed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const layoutVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | null | undefined;
     width?: "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof layoutVariants>, VariantProps<typeof textColorVariants> {

package/dist/types/components/tip-card/tip-card.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const tipCardVariants: (props?: ({
-    backgroundColor?: "dark" | "transparent" | "light" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
-    textColor?: "unset" | "dark" | "light" | null | undefined;
+    backgroundColor?: "dark" | "transparent" | "light" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    textColor?: "dark" | "unset" | "light" | null | undefined;
     borderColor?: "none" | "dark" | "light" | "gradient" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const indicatorVariants: (props?: ({

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

@@ -1,5 +1,6 @@
 import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
 import { default as React } from 'react';
+import { TokenIconInput } from '../../utils/token-icon-source';
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 /**
  * TokenIcon — component for displaying token/asset icons.
@@ -9,7 +10,10 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * token symbols, asset icons, currency icons, token representations.
  *
  * Props:
- * - `symbol` — token symbol/ticker, direct icon URL, or `IconComposite` (see `TokenMetaInfo` in `@/types/common`).
+ * - `token` — token as it comes from the SDK/backend, or a bare symbol (preferred).
+ *   The component resolves the icon itself via `getTokenIcon`, so callers never
+ *   pass a pre-baked URL.
+ * - `symbol` — already-resolved source: direct icon URL or `IconComposite` (legacy).
  * - `size` — icon size in pixels (defaults to 48).
  *
  * Note: Fetches icon from Gearbox static CDN based on symbol.
@@ -29,7 +33,12 @@ type DirectIcon = {
 };
 export type SymbolOrIcon = string | DirectIcon | IconComposite;
 export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
-    symbol: SymbolOrIcon | undefined;
+    /**
+     * Token (or bare symbol). When set, takes precedence over `symbol` and is
+     * resolved via `getTokenIcon` (diesel composites, GEAR logo, etc.).
+     */
+    token?: TokenIconInput | string;
+    symbol?: SymbolOrIcon | undefined;
     size?: number;
     className?: string;
 }

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

@@ -1,16 +1,17 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
+import { Token } from '@gearbox-protocol/sdk/model';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
-import { TokenIconProps } from '../token-icon';
 import { TokenMetaInfo } from '../../types/common';
 declare const tokenSymbolVariants: (props?: ({
-    marginSize?: "sm" | "lg" | "md" | null | undefined;
+    marginSize?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof tokenSymbolVariants> {
     /**
-     * Token data object or symbol string
+     * SDK `Token`, `TokenMetaInfo`, or bare symbol string. Passed straight to
+     * `TokenIcon`, which resolves the icon via `getTokenIcon`.
      */
-    token?: TokenMetaInfo | string;
+    token?: Token | TokenMetaInfo | string;
     /**
      * Optional override title to display
      */
@@ -51,7 +52,6 @@ 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/trading-view/trading-view.d.ts

@@ -1,3 +1,4 @@
+import { LineStyle } from 'lightweight-charts';
 import { RangeButtonsProps } from '../buttons/range-buttons/range-buttons';
 import { YMeasureUnits } from '../graph/formatters';
 import { GraphViewWithDataProps } from '../graph/graph-view';
@@ -26,11 +27,17 @@ export interface GraphData {
     topColor?: string;
     /** Area fill gradient bottom */
     bottomColor?: string;
+    /** Price scale when Graph `dualYAxis` is enabled. */
+    priceScaleId?: "left" | "right";
+    /** Render as line instead of area. */
+    seriesType?: "area" | "line";
+    /** Line dash style (line series). */
+    lineStyle?: LineStyle;
 }
 /**
  * TradingView component props
  */
-export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data"> {
+export interface TradingViewProps<T extends string = string> extends Omit<GraphViewWithDataProps, "series" | "loading" | "toolbar" | "size" | "showLegend" | "onUnselectSeries" | "yMeasureUnit" | "currentValueDecimals" | "data" | "title"> {
     /** Graph data - single or array of series */
     data: GraphData | Array<GraphData> | undefined;
     /** Y-axis unit for single or multiple series */
@@ -61,6 +68,13 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     graphsWithNoData?: Set<T>;
     /** Set of graph values that are currently loading */
     loadingGraphs?: Set<T>;
+    /**
+     * Explicit loading state. When provided, it takes precedence over the loading
+     * state inferred from `loadingGraphs`/`data`. Use it when the series list is
+     * empty while the underlying query is still pending (otherwise the chart would
+     * briefly show "no data" before data arrives).
+     */
+    isLoading?: boolean;
     /** Message to show when user selects a graph with no data */
     noDataMessage?: string;
     /**
@@ -96,11 +110,18 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
     seriesColorPersistenceKey?: string;
     /**
      * When true, all user-initiated zoom and pan interactions are disabled.
-     * The time range can only be changed via the range buttons.
+     * The time range can only be changed via the range dropdown.
      * Disables: mouse-wheel zoom, pinch zoom, axis drag, axis double-click reset,
      * and scroll/drag panning.
      */
     disableZoom?: boolean;
+    /**
+     * Controls rendered to the left of the range dropdown (e.g. leverage chips).
+     * A divider is shown between this slot and the dropdown when both are present.
+     */
+    trailing?: React.ReactNode;
+    /** Heading to the left of the chart controls, outside the chart frame. */
+    title?: React.ReactNode;
 }
 /**
  * TradingView — comprehensive charting component with graph selection and time range controls.
@@ -157,4 +178,4 @@ export interface TradingViewProps<T extends string = string> extends Omit<GraphV
  * />
  * ```
  */
-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, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, ...restProps }: 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, isLoading: isLoadingProp, noDataMessage, currentValueDecimals, containerClassName, useSharedPriceScale, showCurrentValue, yScaleMin, yScaleMinMultiple, seriesColorPersistenceKey, title, trailing, ...restProps }: TradingViewProps<T>): React.ReactElement;

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

@@ -3,8 +3,8 @@ import * as React from "react";
 declare const typographyVariants: (props?: ({
     variant?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodySmall" | "overline" | "inherit" | null | undefined;
     color?: "inherit" | "default" | "muted" | "success" | "warning" | "destructive" | "primary" | "secondary" | null | undefined;
-    weight?: "medium" | "inherit" | "normal" | "semibold" | "bold" | null | undefined;
-    align?: "inherit" | "left" | "center" | "right" | null | undefined;
+    weight?: "bold" | "medium" | "inherit" | "normal" | "semibold" | null | undefined;
+    align?: "center" | "inherit" | "left" | "right" | null | undefined;
     leading?: "inherit" | "normal" | "tight" | "relaxed" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -4,10 +4,10 @@ declare const rootVariants: (props?: ({
     align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const labelVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    size?: "default" | "unset" | "sm" | "xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const valueVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    size?: "default" | "unset" | "sm" | "xs" | null | undefined;
     weight?: "medium" | "normal" | "unset" | null | undefined;
     color?: "default" | "muted" | "success" | "warning" | "primary" | "alert" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -24,6 +24,12 @@ export interface VerticalIndicatorProps extends Omit<React.HTMLAttributes<HTMLDi
     value?: React.ReactNode;
     /** New value shown after an arrow (value → valueTo); the first value is shown with line-through */
     valueTo?: React.ReactNode;
+    /**
+     * When true (default) and valueTo is provided, the old value (value) is rendered in
+     * secondary-foreground color to visually dim it. Set to false to keep the original color
+     * (e.g. for Health Factor which uses zone-based coloring).
+     */
+    dimPreviousValue?: boolean;
     /** Called when the tip icon is hovered */
     onPointerEnterTip?: () => void;
 }

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

@@ -1,27 +1,44 @@
+import { SpaceSize } from '../base/spacing';
 import type * as React from "react";
+/**
+ * One step of the shared spacing scale, or an explicit pixel height for the
+ * rare outlier that the scale does not cover.
+ */
+export type VSpaceSize = SpaceSize | number;
 /**
  * VSpaceProps — props for VSpace component.
  */
 export interface VSpaceProps {
-    height: number;
+    /**
+     * Preferred form: one semantic step of the shared spacing scale. Each step
+     * already carries a mobile and a desktop height, so one prop covers both
+     * breakpoints. A number is the escape hatch: a fixed pixel height applied on
+     * all breakpoints (unless `mobileSize` overrides the mobile half).
+     */
+    size: VSpaceSize;
+    /**
+     * Optional mobile override for when the pair baked into `size` does not
+     * fit. Applies below the `md:` breakpoint; accepts a scale step (its mobile
+     * height is used) or explicit pixels.
+     */
+    mobileSize?: VSpaceSize;
+    className?: string;
 }
 /**
- * VSpace — vertical spacing component for creating vertical gaps.
+ * VSpace — vertical spacing between elements, on the shared spacing scale.
  *
  * @usage
- * Use VSpace to add vertical spacing between elements:
- * spacing between sections, gaps between components, vertical layout spacing.
- *
- * Props:
- * - `height` — height of the spacer in pixels (required).
- *
- * Note: Creates an empty div with specified height.
- * Useful for precise vertical spacing control in layouts.
+ * Use VSpace to add vertical gaps between sections or components. A `size`
+ * token is responsive by itself: it steps down on mobile and up from the `md:`
+ * breakpoint, so callers never branch on screen width. Numbers and
+ * `mobileSize` exist only for outliers the scale does not cover.
  *
  * @example
  * ```tsx
- * <VSpace height={16} />
- * <VSpace height={24} />
+ * <VSpace size="md" />                 // 12px on mobile, 24px from md up
+ * <VSpace size={20} />                 // fixed 20px on all breakpoints
+ * <VSpace size="lg" mobileSize="sm" /> // 8px on mobile, 48px from md up
+ * <VSpace size={24} mobileSize={12} /> // explicit pixels per breakpoint
  * ```
  */
-export declare function VSpace({ height }: VSpaceProps): React.ReactElement;
+export declare function VSpace({ size, mobileSize, className, }: VSpaceProps): React.ReactElement;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import type * as React from "react";
 declare const withTitleVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface WithTitleProps extends VariantProps<typeof withTitleVariants> {
     /**

package/dist/types/components/yield-breakdown-tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './yield-breakdown-tooltip';

package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts

@@ -0,0 +1,30 @@
+import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
+import type * as React from "react";
+export interface YieldBreakdownTooltipProps {
+    /**
+     * Net yield (`ApyBreakdown`). For a strategy this is the net at
+     * {@link maxLeverage}.
+     */
+    supplyApy: ApyBreakdown;
+    /**
+     * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x). When set,
+     * the header is "Net APY at Nx Leverage" and a Borrow Rate row is shown.
+     */
+    maxLeverage?: Leverage;
+    /**
+     * Strategy collateral yield used for Collateral / Incentive rows. Falls back
+     * to {@link supplyApy} when omitted.
+     */
+    collateralApy?: ApyBreakdown;
+    /** Strategy base borrow cost in bps (shown as a negative rate). */
+    borrowApy?: Bps;
+    /** Strategy additional (quota) borrow cost in bps (folded into Borrow Rate). */
+    additionalBorrowApy?: Bps;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Earn APY tooltip — strategy (`Net APY at Nx Leverage`) and pool
+ * (`Overall APY`) layouts from SDK `ApyBreakdown`.
+ */
+export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -63,8 +63,14 @@ export declare const preset: {
                 "success-foreground": string;
                 "success-hover": string;
                 warning: string;
+                info: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
                 liquidation: string;
+                "liquidation-line": string;
                 border: string;
+                divider: string;
                 input: string;
                 ring: string;
                 "text-secondary": string;
@@ -90,6 +96,13 @@ export declare const preset: {
                     "3": string;
                     "4": string;
                     "5": string;
+                    "6": string;
+                    "7": string;
+                    "8": string;
+                    "9": string;
+                    "10": string;
+                    "11": string;
+                    "12": string;
                 };
             };
             fontFamily: {

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

@@ -4,8 +4,8 @@ export * from './use-debounce';
 export * from './use-debounce-call';
 export * from './use-filter';
 export * from './use-hf';
-export * from './use-liquidation';
 export * from './use-media-query';
+export * from './use-observed-width-key';
 export * from './use-opened-state';
 export * from './use-previous';
 export * from './use-smart-number-input';

package/dist/types/hooks/use-filter.d.ts

@@ -23,6 +23,52 @@ export type SortSetterFunction<T> = (field: T, startFromSort?: SortType) => void
  * Hook for managing sort state
  */
 export declare function useSort<T>(initialState?: FilterSortField<T> | null): readonly [FilterSortField<T> | null, SortSetterFunction<T>];
+/**
+ * Ordered list of active sort keys. The first entry is the primary sort key,
+ * the second is the tie-breaker, and so on. An empty array means "no sort".
+ */
+export type MultiSortField<T> = ReadonlyArray<FilterSortField<T>>;
+/** Resolved sort state for a single column inside a {@link MultiSortField}. */
+export interface MultiSortFieldState {
+    /** Sort direction for this field, or `undefined` when the field is inactive. */
+    sort: SortType | undefined;
+    /**
+     * 1-based position of the field within the active sort keys, or `undefined`
+     * when the field is inactive. Use it to render a priority badge (1, 2, …).
+     */
+    priority: number | undefined;
+}
+export type MultiSortSetterFunction<T> = (field: T, startFromSort?: SortType) => void;
+/**
+ * Resolve the direction and priority of a single field within a multi-sort.
+ *
+ * @example
+ * ```tsx
+ * const { sort, priority } = getSortForFields("type", state);
+ * <HeadCell sortDirection={sort} sortPriority={state.length > 1 ? priority : undefined} />
+ * ```
+ */
+export declare const getSortForFields: <T>(field: T, state: MultiSortField<T> | null) => MultiSortFieldState;
+/**
+ * Pure reducer behind {@link useMultiSort}. Each field cycles through three
+ * states on successive clicks: `startFromSort` → the opposite direction →
+ * removed. Clicking a brand-new field makes it the primary key (existing keys
+ * become tie-breakers) and the lowest-priority key is dropped once `maxFields`
+ * is reached.
+ */
+export declare function nextMultiSortState<T>(prev: MultiSortField<T>, field: T, startFromSort?: SortType, maxFields?: number): MultiSortField<T>;
+export interface UseMultiSortOptions {
+    /** Maximum number of simultaneously active sort keys. Defaults to `2`. */
+    maxFields?: number;
+}
+/**
+ * Hook for managing sort state across multiple fields (e.g. sort by `type`,
+ * then by `apy`). Mirrors {@link useSort} but keeps an ordered list of keys.
+ */
+export declare function useMultiSort<T>(initialState?: MultiSortField<T> | null, { maxFields }?: UseMultiSortOptions): readonly [MultiSortField<T>, MultiSortSetterFunction<T>, {
+    readonly removeSortField: (field: T) => void;
+    readonly resetSort: () => void;
+}];
 interface GeneralRangeFilterState {
     state: FilterRange | null;
 }

package/dist/types/hooks/use-media-query.d.ts

@@ -9,8 +9,12 @@
  *   return <div>{isMobile ? "Mobile view" : "Desktop view"}</div>;
  * }
  * ```
+ *
+ * @param enabled When `false`, skips the `matchMedia` subscription. Used by
+ *   the named breakpoint hooks so they do not attach listeners when a
+ *   `BreakpointProvider` already owns the shared state.
  */
-export declare function useMediaQuery(query: string): boolean;
+export declare function useMediaQuery(query: string, enabled?: boolean): boolean;
 /**
  * Checks if the viewport is mobile-sized (max-width: 500px-)
  */

package/dist/types/hooks/use-observed-width-key.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tracks the rounded CSS-pixel width of an element via ResizeObserver.
+ * Useful when a layout should collapse by container width, not viewport.
+ */
+export declare function useObservedWidthKey<T extends HTMLElement>(): {
+    ref: import('react').RefObject<T | null>;
+    widthKey: number;
+};