@gearbox-protocol/ui-kit 3.14.0-next.8 → 4.0.0-next.1

package/dist/types/components/base/liquidation-price-block/liquidation-price-block.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { TitleText } from '../text';
+import { HFZones } from '../../health-factor';
+import { LiquidationPriceBlockTest } from './constants';
+export { LiquidationPriceBlockTest };
+export interface LiquidationPriceBlockProps {
+    /**
+     * Liquidation price in 8-decimals fixed point; `null` renders "N/A",
+     * omit to render "—" (value not available).
+     */
+    readonly price?: bigint | null;
+    /** Price after the operation; renders a from → to transition. */
+    readonly priceTo?: bigint | null;
+    /** The pair the price is quoted in, e.g. "WETH / USDC". */
+    readonly pricePair?: React.ReactNode;
+    /** Zone dot next to the price. */
+    readonly zone?: HFZones;
+    readonly isLoading?: boolean;
+    /** Label override; defaults to the "Liquidation Price" locale string. */
+    readonly title?: TitleText;
+    /** Tooltip override; defaults to the standard explanation. */
+    readonly tip?: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * "Liquidation price" row of a preview: label + help tip, the formatted price
+ * (with optional from → to and zone dot), and the price pair underneath.
+ * Design only — the reference `LiquidationPriceBlock` markup on value props.
+ */
+export declare function LiquidationPriceBlock({ price, priceTo, pricePair, zone, isLoading, title, tip, testId, }: LiquidationPriceBlockProps): React.ReactElement;

package/dist/types/components/base/manage-pane/constants.d.ts

@@ -0,0 +1,8 @@
+export declare class ManagePaneTest {
+    static root: string;
+    static tabs: string;
+    static dropdown: string;
+    static body: string;
+    static message: string;
+    static tab: (id: string) => string;
+}

package/dist/types/components/base/manage-pane/index.d.ts

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

package/dist/types/components/base/manage-pane/manage-pane.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { TitleText } from '../text';
+import { ManagePaneTest } from './constants';
+export { ManagePaneTest };
+export interface ManagePaneTabProps {
+    readonly id: string;
+    readonly title: TitleText;
+    readonly disabled?: boolean;
+    /** Content is selectable (e.g. from the dropdown) but not shown in the segment. */
+    readonly hidden?: boolean;
+    readonly children?: React.ReactNode;
+}
+export declare function ManagePaneTab(_props: ManagePaneTabProps): null;
+export interface ManagePaneTabDropdownItem {
+    readonly id: string;
+    readonly title: React.ReactNode;
+    readonly onSelect: () => void;
+}
+export interface ManagePaneTabDropdownProps {
+    readonly items: ReadonlyArray<ManagePaneTabDropdownItem>;
+}
+export declare function ManagePaneTabDropdown(_props: ManagePaneTabDropdownProps): null;
+export interface ManagePaneProps {
+    readonly children: React.ReactNode;
+    /** Controlled active tab — the screen owns it (usually `?operation=`). */
+    readonly activeTab: string;
+    readonly onTabChange: (id: string) => void;
+    readonly header?: React.ReactNode;
+    readonly footer?: React.ReactNode;
+    /** Rendered to the right of the tabs (e.g. the settings button). */
+    readonly actions?: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * The right-hand manage pane of a detail screen: segmented tabs (+ optional
+ * dropdown and actions) above one card that shows the active tab's content.
+ * Controlled only — no hash state of its own.
+ */
+export declare function ManagePane({ children, activeTab, onTabChange, header, footer, actions, testId, }: ManagePaneProps): React.ReactElement;
+/** Body shown in place of a dialog when the tab has nothing to act on (no position, no wallet). */
+export declare function ManagePaneMessage({ children, }: {
+    readonly children: React.ReactNode;
+}): React.ReactElement;

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

@@ -0,0 +1,3 @@
+export declare class PageTitleTest {
+    static root: string;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { FormatMessageTypedProps } from '../../typed-intl';
+import { PageTitleTest } from './constants';
+export { PageTitleTest };
+export type PageTitleText = FormatMessageTypedProps | string;
+export interface PageTitleProps {
+    readonly title: PageTitleText;
+    /** Browser tab title when it should differ from the visible heading. */
+    readonly browserTitle?: PageTitleText;
+    /**
+     * Renders the document head for the resolved browser title (e.g. a Helmet
+     * element). The app owns the head library; ui-kit only hands over the string.
+     */
+    readonly head?: (browserTitle: string) => React.ReactNode;
+    readonly as?: "h1" | "h2" | "h3" | "span";
+    readonly className?: string;
+}
+/** The one visible page heading, plus an optional document-head hook. */
+export declare function PageTitle({ title, browserTitle, head, as, className, }: PageTitleProps): React.ReactElement;

package/dist/types/components/base/review-button/constants.d.ts

@@ -0,0 +1,4 @@
+export declare class ReviewButtonTest {
+    static root: string;
+    static error: string;
+}

package/dist/types/components/base/review-button/index.d.ts

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

package/dist/types/components/base/review-button/review-button.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { LocaleKeys } from '../../../locale';
+import { ReviewButtonTest } from './constants';
+export { ReviewButtonTest };
+export interface ReviewButtonProps {
+    readonly disabled: boolean;
+    /** Message id of what blocks the action; rendered above the button. */
+    readonly error: LocaleKeys | null;
+    readonly onClick: () => void;
+    readonly label?: LocaleKeys;
+}
+/** The single primary action of every dialog: review, then confirm in Verify. */
+export declare function ReviewButton({ disabled, error, onClick, label, }: ReviewButtonProps): React.ReactElement;

package/dist/types/components/base/section-heading/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class SectionHeadingTest {
+    static root: string;
+}

package/dist/types/components/base/section-heading/index.d.ts

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

package/dist/types/components/base/section-heading/section-heading.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SectionHeadingTest } from './constants';
+export { SectionHeadingTest };
+export interface SectionHeadingProps {
+    readonly children: React.ReactNode;
+    readonly className?: string;
+}
+export declare function SectionHeading({ children, className, }: SectionHeadingProps): React.ReactElement;

package/dist/types/components/base/segmented-tabs/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class SegmentedTabsTest {
+    static root: string;
+}

package/dist/types/components/base/segmented-tabs/index.d.ts

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

package/dist/types/components/base/segmented-tabs/segmented-tabs.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { SegmentedTabsTest } from './constants';
+export { SegmentedTabsTest };
+/** Gray pill styling shared with sibling controls (e.g. the ManagePane "…" button). */
+export declare const SEGMENTED_TABS_INACTIVE_BUTTON_CLASS = "bg-gray-30 border-gray-30 hover:bg-gray-40 hover:border-gray-40";
+export interface SegmentedTabsItem<T extends string> {
+    readonly id: T;
+    readonly item: React.ReactNode;
+    readonly disabled?: boolean;
+    readonly href?: string;
+    readonly testId?: string;
+    readonly onClick?: () => void;
+}
+export interface SegmentedTabsProps<T extends string> {
+    readonly items: ReadonlyArray<SegmentedTabsItem<T>>;
+    readonly activeTab: T;
+    readonly onTabChange?: (id: T, index: number) => void;
+    readonly getTestId?: (id: T) => string | undefined;
+    readonly className?: string;
+    readonly buttonClassName?: string;
+    readonly testId?: string;
+}
+/**
+ * A row of pill buttons where exactly one is active. Items with `href` render
+ * as router links; the rest fire `onTabChange`.
+ */
+export declare function SegmentedTabs<T extends string>({ items, activeTab, onTabChange, getTestId, className, buttonClassName, testId: rootTestId, }: SegmentedTabsProps<T>): React.ReactElement;

package/dist/types/components/base/spacing.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The one vertical-spacing scale of the base layer. Each step is a single
+ * semantic token that already bakes in a mobile and a desktop height, so a
+ * caller picks one `size` and gets responsive behaviour for free — no separate
+ * mobile prop. The steps are grounded in real client usage: the `md` and `lg`
+ * steps reproduce the `12 / 24` and `24 / 48` responsive pairs exactly. For
+ * outliers the scale does not cover, `VSpace` also accepts explicit pixel
+ * numbers and a `mobileSize` override.
+ */
+export type SpaceSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** Mobile and desktop px per step (desktop applies from the `md:` breakpoint). */
+export declare const SPACE_PX: Record<SpaceSize, {
+    mobile: number;
+    desktop: number;
+}>;
+/** Tailwind height utilities per step: mobile-first base + `md:` desktop. */
+export declare const SPACE_HEIGHT: Record<SpaceSize, string>;

package/dist/types/components/base/stack/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class StackTest {
+    static root: string;
+}

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

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

package/dist/types/components/base/stack/stack.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { StackTest } from './constants';
+export { StackTest };
+export type StackDirection = "row" | "col";
+export type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type StackJustify = "start" | "center" | "end" | "between";
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly direction?: StackDirection;
+    readonly gap?: StackGap;
+    readonly align?: StackAlign;
+    readonly justify?: StackJustify;
+    readonly wrap?: boolean;
+}
+/** Flex layout primitive: direction, a spacing-scale gap, alignment. */
+export declare function Stack({ direction, gap, align, justify, wrap, className, children, ...rest }: StackProps): React.ReactElement;

package/dist/types/components/base/stat-badge/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class StatBadgeTest {
+    static root: string;
+    static grid: string;
+    static action: string;
+}

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

@@ -0,0 +1,27 @@
+import { default as React, ReactNode } from 'react';
+import { TitleText } from '../text';
+import { StatBadgeTest } from './constants';
+export { StatBadgeTest };
+export type StatBadgeSize = "sm" | "md" | "default";
+export interface StatBadgeProps {
+    /** A messageId (formatted here) or a node. */
+    readonly title: TitleText;
+    readonly value: React.ReactNode;
+    /** Optional control in the top-right of the card, e.g. a Claim button. */
+    readonly action?: ReactNode;
+    readonly className?: string;
+    /** Swaps `value` for a skeleton; the badge owns that decision, not the caller. */
+    readonly isLoading?: boolean;
+    /** Overrides the badge's own test id, so a screen can name each of its badges. */
+    readonly testId?: string;
+    readonly size?: StatBadgeSize;
+}
+export declare function StatBadge({ title, value, isLoading, size, action, className, testId, }: StatBadgeProps): React.ReactElement;
+export interface StatBadgeGridProps {
+    readonly cols?: 1 | 2 | 3 | 4;
+    readonly colsLg?: 1 | 2 | 3 | 4;
+    readonly gap?: "sm" | "default" | "lg";
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function StatBadgeGrid({ cols, colsLg, gap, children, className, }: StatBadgeGridProps): React.ReactElement;

package/dist/types/components/base/sticky-bar/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class StickyBarTest {
+    static root: string;
+}

package/dist/types/components/base/sticky-bar/index.d.ts

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

package/dist/types/components/base/sticky-bar/sticky-bar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { StickyBarTest } from './constants';
+export { StickyBarTest };
+export interface StickyBarProps {
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    readonly testId?: string;
+}
+export declare function StickyBar({ children, className, testId, }: StickyBarProps): React.ReactElement;

package/dist/types/components/base/tabber/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class TabberTest {
+    static root: string;
+    static bar: string;
+    static section: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './tabber';
+export * from './use-detail-scroll-spy';

package/dist/types/components/base/tabber/tabber.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { TitleText } from '../text';
+import { TabberTest } from './constants';
+export { TabberTest };
+export interface TabberSectionProps {
+    readonly id: string;
+    /** Tab label: a messageId (formatted here) or a node. */
+    readonly title: TitleText;
+    readonly heading?: TitleText;
+    readonly actions?: React.ReactNode;
+    readonly children?: React.ReactNode;
+}
+export declare function TabberSection({ id, title, heading, actions, children, }: TabberSectionProps): React.ReactElement;
+export declare namespace TabberSection {
+    var displayName: string;
+}
+export interface TabberProps {
+    readonly children: React.ReactNode;
+    readonly observeKey?: string;
+    readonly initialSection?: string;
+    readonly testId?: string;
+}
+export declare function Tabber({ children, observeKey, initialSection, testId, }: TabberProps): React.ReactElement;
+export declare function isTabber(node: React.ReactNode): boolean;

package/dist/types/components/base/tabber/use-detail-scroll-spy.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+/**
+ * Highlights the tab for the page section most visible in the viewport (Morpho-style scroll spy).
+ * Generic over section id union.
+ */
+export declare function useDetailScrollSpy<T extends string>(refs: Record<T, React.RefObject<HTMLElement | null>>, sectionOrder: readonly T[], 
+/** Re-attach observer when this changes (e.g. data loads, entity address changes) */
+observeKey: string | undefined): {
+    activeSection: T;
+    scrollToSection: (id: T) => void;
+};

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

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

package/dist/types/components/base/text/use-title-text.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { LocaleKeys } from '../../../locale';
+/**
+ * Base components take `title: LocaleKeys | ReactNode`: a messageId is
+ * formatted through `intl`, anything else is rendered as given. Keeps text
+ * ownership inside the component and messageIds at the call site.
+ */
+export type TitleText = LocaleKeys | React.ReactNode;
+export declare function useTitleText(): (title: TitleText) => React.ReactNode;

package/dist/types/components/base/time-to-liquidation-block/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class TimeToLiquidationBlockTest {
+    static root: string;
+    static value: string;
+    static valueTo: string;
+}

package/dist/types/components/base/time-to-liquidation-block/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './time-to-liquidation-block';

package/dist/types/components/base/time-to-liquidation-block/time-to-liquidation-block.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { TitleText } from '../text';
+import { TTLZones } from '../../../utils/ttl';
+import { TimeToLiquidationBlockTest } from './constants';
+export { TimeToLiquidationBlockTest };
+export interface TimeToLiquidationBlockProps {
+    /**
+     * Time to liquidation in seconds; `null` renders "N/A", omit to render "—"
+     * (value not available).
+     */
+    readonly seconds?: number | null;
+    /** Time after the operation; renders a from → to transition. */
+    readonly secondsTo?: number | null;
+    /** Pre-computed zone; if not set, derived from the value. */
+    readonly zone?: TTLZones;
+    readonly isLoading?: boolean;
+    /** Label override; defaults to the "Time to liquidation" locale string. */
+    readonly title?: TitleText;
+    /** Tooltip override; defaults to the standard explanation. */
+    readonly tip?: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * "Time to liquidation" row of a preview: label + help tip, the remaining
+ * time as `Nmo` / `Nd` / `<1d` with a zone dot, optionally from → to.
+ * Design only — the reference `TimeToLiquidationBlock` markup on value props.
+ */
+export declare function TimeToLiquidationBlock({ seconds, secondsTo, zone, isLoading, title, tip, testId, }: TimeToLiquidationBlockProps): React.ReactElement;

package/dist/types/components/base/token-amount/constants.d.ts

@@ -0,0 +1,3 @@
+export declare class TokenAmountTest {
+    static root: string;
+}

package/dist/types/components/base/token-amount/index.d.ts

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

package/dist/types/components/base/token-amount/token-amount.d.ts

@@ -0,0 +1,21 @@
+import { Amount, Token, TokenAmount as TokenAmountModel } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { TokenAmountTest } from './constants';
+export { TokenAmountTest };
+/**
+ * An amount of a token, with its USD value underneath.
+ *
+ * The model's `TokenAmount` says what it is denominated in, so that is all this
+ * takes. The few groups the SDK hands out as a bare `Amount` (a pool's
+ * `totalSupply` / `totalBorrow`, implicitly in the market underlying) name their
+ * token alongside.
+ */
+export type TokenAmountProps = {
+    /** `null` means unavailable and renders an em-dash. */
+    readonly data: TokenAmountModel | null;
+    readonly token?: undefined;
+} | {
+    readonly data: Amount | null;
+    readonly token: Token;
+};
+export declare function TokenAmount({ data, token, }: TokenAmountProps): React.ReactElement;

package/dist/types/components/base/values/constants.d.ts

@@ -0,0 +1,13 @@
+export declare class ValueTest {
+    static apy: string;
+    static usd: string;
+    static leverage: string;
+    static utilization: string;
+    static healthFactor: string;
+    static pnl: string;
+    static tokenBigint: string;
+    static placeholder: string;
+}
+export declare class PositionShortLabelTest {
+    static root: string;
+}

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

@@ -0,0 +1,5 @@
+export { ValueTest } from './constants';
+export { PnlValue } from './pnl-value';
+export { PositionShortLabel, PositionShortLabelTest, } from './position-short-label';
+export { PositionTypeBadge, type PositionTypeBadgeProps, } from './position-type-badge';
+export { ApyValue, type ApyValueProps, HealthFactorValue, LeverageValue, TokenBigint, UsdValue, UtilizationValue, } from './scalars';

package/dist/types/components/base/values/pnl-value.d.ts

@@ -0,0 +1,6 @@
+import { PnlBreakdown } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+/** Realised + unrealised PnL of a position, signed. */
+export declare function PnlValue({ data, }: {
+    readonly data: PnlBreakdown | undefined;
+}): React.ReactElement;

package/dist/types/components/base/values/position-short-label.d.ts

@@ -0,0 +1,8 @@
+import { StrategyPosition } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { PositionShortLabelTest } from './constants';
+export { PositionShortLabelTest };
+/** "wstETH / WETH · 2.5x" — one open position, in a menu row. */
+export declare function PositionShortLabel({ data, }: {
+    readonly data: StrategyPosition;
+}): React.ReactElement;

package/dist/types/components/base/values/position-type-badge.d.ts

@@ -0,0 +1,11 @@
+import { PositionKind } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+export interface PositionTypeBadgeProps {
+    /** The SDK's `Position.kind`. */
+    readonly data: PositionKind;
+    readonly size?: "table" | "aside";
+}
+/**
+ * Colored kind label of a position row: "Lender" / "Strategy" / "Liquidation".
+ */
+export declare function PositionTypeBadge({ data, size, }: PositionTypeBadgeProps): React.ReactElement;

package/dist/types/components/base/values/scalars.d.ts

@@ -0,0 +1,34 @@
+import { ApyBreakdown, Bps, Leverage, Token } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+export interface ApyValueProps {
+    /** A breakdown (tooltip-able) or a bare rate; `undefined` renders a dash. */
+    readonly data: ApyBreakdown | Bps | undefined;
+}
+/**
+ * Any APY the model carries, in one place: `supplyApy`, `netApy`, `borrowApy`.
+ * A breakdown renders the reference chip (reward icons + breakdown tooltip)
+ * via `CompoundAPY`; a bare `Bps` stays a plain percentage.
+ */
+export declare function ApyValue({ data }: ApyValueProps): React.ReactElement;
+export declare function UsdValue({ data, }: {
+    readonly data: number | null | undefined;
+}): React.ReactElement;
+export declare function LeverageValue({ data, }: {
+    readonly data: Leverage | undefined;
+}): React.ReactElement;
+export declare function UtilizationValue({ data, }: {
+    readonly data: Bps | undefined;
+}): React.ReactElement;
+/** Health factor with its zone: below 1 the account is liquidatable. */
+export declare function HealthFactorValue({ data, }: {
+    readonly data: Bps | undefined;
+}): React.ReactElement;
+/**
+ * A bare `bigint` in token units (simulate previews carry these): the only
+ * value component that needs a denomination passed with it, because the SDK
+ * hands these out without one.
+ */
+export declare function TokenBigint({ data, token, }: {
+    readonly data: bigint | undefined;
+    readonly token: Token | undefined;
+}): React.ReactElement;

package/dist/types/components/base-link/base-link.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const linkVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "unset" | null | undefined;
+    size?: "default" | "unset" | "xs" | "sm" | null | undefined;
     variant?: "default" | "unset" | "underlined" | null | undefined;
     color?: "main" | "default" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/block-sync-pill/block-sync-pill.d.ts

@@ -0,0 +1,35 @@
+import { BlockSyncProps } from '../../types/footer';
+import type * as React from "react";
+export interface BlockSyncPillProps extends BlockSyncProps {
+    /**
+     * Label rendered inside the status pill. Defaults to `Status`.
+     */
+    statusLabel?: React.ReactNode;
+    /**
+     * Additional class names applied to the pill wrapper.
+     */
+    className?: string;
+}
+/**
+ * BlockSyncPill — backend-sync status rendered as an {@link AppFooter}-style
+ * pill: a thin bordered, rounded badge with a status dot and a label.
+ *
+ * Reflects the **liveness** of the data-refresh loop rather than raw block age:
+ * - **loading** (no successful sync yet): the dot is a pulsing neutral gray;
+ * - **synced** (within `syncIntervalMs * staleMultiplier`, no errors): green,
+ *   pulsing while a refresh is in flight;
+ * - **error / stalled**: red.
+ *
+ * Hovering reveals per-chain block numbers and the local time of the last sync.
+ *
+ * @example
+ * ```tsx
+ * <BlockSyncPill
+ *   blockByChain={blockByChain}
+ *   explorerAddresses={explorerAddresses}
+ *   networkById={networkById}
+ *   syncIntervalMs={300000}
+ * />
+ * ```
+ */
+export declare function BlockSyncPill({ blockByChain, explorerAddresses, networkById, syncIntervalMs, staleMultiplier, statusLabel, className, }: BlockSyncPillProps): React.ReactElement;

package/dist/types/components/block-sync-pill/block-sync-status.d.ts

@@ -0,0 +1,29 @@
+import { BlockByChain } from '../../types/footer';
+/**
+ * Liveness state of the data-refresh loop, derived from per-chain sync info:
+ * - `loading` — nothing has successfully synced yet (initial state);
+ * - `synced` — at least one chain synced and none are stale/failing;
+ * - `error` — a chain reported an error, or the oldest sync is stale.
+ */
+export type BlockSyncState = "loading" | "synced" | "error";
+export interface BlockSyncStatus {
+    state: BlockSyncState;
+    /** True while any chain has a refresh in flight. */
+    isSyncing: boolean;
+}
+export interface GetBlockSyncStatusProps {
+    blockByChain: BlockByChain | undefined;
+    /** Reference "now" timestamp (ms) used to evaluate staleness. */
+    now: number;
+    /** Age (ms) after which the oldest sync is considered stale. */
+    staleAfterMs: number;
+}
+/**
+ * Pure derivation of the {@link BlockSyncState} from chain sync info.
+ *
+ * A chain counts as "synced" only when it has both a real block (`> 0`) and a
+ * local sync timestamp. Staleness is measured against the **oldest** synced
+ * chain, so a single lagging chain is enough to flag the whole indicator.
+ * Errors take priority over everything else.
+ */
+export declare function getBlockSyncStatus({ blockByChain, now, staleAfterMs, }: GetBlockSyncStatusProps): BlockSyncStatus;

package/dist/types/components/block-sync-pill/index.d.ts

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