@gearbox-protocol/ui-kit 2.1.0-next.1

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * Layout component with grid-based structure
+ * Supports header, footer, and main content areas
+ * Fully responsive with mobile-first approach
+ */
+export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/layout/legal-disclaimer/index.d.ts

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

package/dist/types/components/layout/legal-disclaimer/legal-disclaimer.d.ts

@@ -0,0 +1,32 @@
+/**
+ * LegalReferences — interface for legal document URLs.
+ */
+export interface LegalReferences {
+    termsOfService: string;
+    privacyNotice: string;
+    riskDisclosure: string;
+}
+/**
+ * LegalDisclaimer — component for displaying legal disclaimer text with links.
+ *
+ * @usage
+ * Use LegalDisclaimer to display legal information and required disclaimers:
+ * footer legal text, terms acceptance notices, risk disclosure statements.
+ *
+ * Props:
+ * - `hrefs` — object containing legal document URLs (required):
+ *   - `termsOfService` — Terms of Service URL.
+ *   - `privacyNotice` — Privacy Notice URL.
+ *   - `riskDisclosure` — Risk Disclosure URL.
+ *
+ * Note: Displays formatted text with links to Terms of Service, Privacy Notice, and Risk Disclosure Statement.
+ * Text uses muted color and small size for footer placement.
+ *
+ * Do NOT use LegalDisclaimer:
+ * - for custom legal text (use appropriate text components with links).
+ * - when different disclaimer format is needed (use custom component).
+ */
+export declare function LegalDisclaimer({ hrefs, appName, }: {
+    appName?: string;
+    hrefs: LegalReferences;
+}): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,41 @@
+interface PageLayoutProps {
+    children: React.ReactNode;
+    title: string;
+    description?: JSX.Element;
+    icon?: JSX.Element;
+    backButton?: {
+        href: string;
+        text?: string;
+        onClick?: () => void;
+    };
+    actionButton?: JSX.Element;
+    maxContainerWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    containerClassName?: string;
+}
+/**
+ * PageLayout — main layout component for application pages.
+ *
+ * @usage
+ * Use PageLayout as the root layout wrapper for application pages:
+ * page containers, content pages, detail pages, settings pages.
+ *
+ * Props:
+ * - `children` — page content (required).
+ * - `title` — page title displayed in header (required).
+ * - `description` — optional description element displayed below title.
+ * - `icon` — optional icon element displayed next to title.
+ * - `backButton` — optional back button configuration object:
+ *   - `href` — destination URL for back navigation (required).
+ *   - `text` — custom text label (defaults to "Back" if not provided).
+ *   - `onClick` — optional callback function executed on click.
+ * - `actionButton` — optional action button element displayed next to title.
+ *
+ * Note: PageLayout provides full-screen layout with black background, padding, and overflow handling.
+ * BackButton is rendered when backButton prop is provided.
+ *
+ * Do NOT use PageLayout:
+ * - for modal dialogs or overlays (use Dialog component instead).
+ * - for nested page sections (use Card or other container components).
+ */
+export declare function PageLayout({ children, title, description, icon, backButton, actionButton, maxContainerWidth, containerClassName, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/layout/social-icons/index.d.ts

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

package/dist/types/components/layout/social-icons/social-icons.d.ts

@@ -0,0 +1,7 @@
+export interface SocialIconsProps {
+    twitterAddr?: string;
+    discordAddr?: string;
+    telegramAddr?: string;
+    className?: string;
+}
+export declare function SocialIcons({ twitterAddr, discordAddr, telegramAddr, className, }: SocialIconsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/legal-agreement/index.d.ts

@@ -0,0 +1 @@
+export { type AppName, BlockedRegionDialog, type BlockedRegionDialogProps, createGearboxAppConfig, createLegalAgreementConfig, createPermissionlessInterfaceConfig, createPermissionlessSafeConfig, type LegalAgreementCheckboxItem, LegalAgreementDialog, type LegalAgreementDialogConfig, type LegalAgreementDialogLinks, type LegalAgreementDialogProps, } from './legal-agreement-dialog';

package/dist/types/components/legal-agreement/legal-agreement-dialog.d.ts

@@ -0,0 +1,152 @@
+import * as React from "react";
+export interface LegalAgreementCheckboxItem {
+    id: string;
+    content: React.ReactNode;
+}
+export interface LegalAgreementDialogLinks {
+    termsOfService: string;
+    privacyNotice: string;
+    riskDisclosure: string;
+}
+export interface LegalAgreementDialogConfig {
+    /**
+     * Product/service name (e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App")
+     */
+    productName: string;
+    /**
+     * Notification text displayed at the top of the dialog.
+     * Should mention that use is subject to Terms of Service, Privacy Notice, and Risk Disclosure Statement.
+     */
+    notificationText: React.ReactNode;
+    /**
+     * Array of checkbox items that user must check to proceed.
+     * Each item should have an id and content (React node).
+     */
+    checkboxItems: LegalAgreementCheckboxItem[];
+    /**
+     * Title of the dialog. Defaults to "Legal Agreement" or "Terms of Service Updated" if hasV2Signature is true.
+     */
+    title?: string;
+    /**
+     * Title shown when terms are updated (hasV2Signature is true).
+     * Defaults to "Terms of Service Updated".
+     */
+    updatedTitle?: string;
+    /**
+     * Text for the agree button. Defaults to "Agree & Connect".
+     */
+    agreeButtonText?: string;
+    /**
+     * Text shown while waiting for wallet signature.
+     * Defaults to "Please sign the message in your wallet to agree to the Terms of Service."
+     */
+    waitingForSignatureText?: string;
+}
+export interface LegalAgreementDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onSign: () => Promise<void>;
+    isSigning: boolean;
+    hasV2Signature?: boolean;
+    isAwaitingSignature?: boolean;
+    config: LegalAgreementDialogConfig;
+}
+/**
+ * LegalAgreementDialog — dialog component for legal agreement signing.
+ *
+ * @usage
+ * Use LegalAgreementDialog to display legal agreement terms and collect user consent:
+ * terms of service acceptance, privacy notice acknowledgment, risk disclosure acceptance.
+ *
+ * Props:
+ * - `open` — controls dialog visibility (required).
+ * - `onClose` — callback when dialog is closed (required).
+ * - `onSign` — callback when user agrees and signs (required).
+ * - `isSigning` — whether signing is in progress (required).
+ * - `hasV2Signature` — whether user has v2 signature and needs to re-sign (optional).
+ * - `isAwaitingSignature` — whether waiting for wallet signature (optional).
+ * - `config` — configuration object (required):
+ *   - `productName` — name of the product/service (e.g., "Permissionless Interface").
+ *   - `notificationText` — notification text displayed at the top (React node with links).
+ *   - `checkboxItems` — array of checkbox items user must check.
+ *   - `title` — optional custom dialog title.
+ *   - `updatedTitle` — optional title when terms are updated.
+ *   - `agreeButtonText` — optional agree button text.
+ *   - `waitingForSignatureText` — optional text while waiting for signature.
+ *
+ * Note: Displays checkboxes for user agreement and handles signing flow.
+ * Shows waiting state during signature process.
+ *
+ * Example usage with helper function:
+ * ```tsx
+ * import { LegalAgreementDialog, createLegalAgreementConfig } from '@gearbox-protocol/ui-kit';
+ *
+ * const links = {
+ *   termsOfService: 'https://gearbox.fi/terms',
+ *   privacyNotice: 'https://gearbox.fi/privacy',
+ *   riskDisclosure: 'https://gearbox.fi/risks',
+ * };
+ *
+ * // You can use any app name. For "Permissionless Interface" and "Permissionless Safe"
+ * // it uses simplified consent flow. For other names (e.g., "Gearbox App") it uses
+ * // extended consent flow with additional checkboxes.
+ * const config = createLegalAgreementConfig("Permissionless Interface", links);
+ *
+ * <LegalAgreementDialog
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   onSign={handleSign}
+ *   isSigning={isSigning}
+ *   config={config}
+ * />
+ * ```
+ */
+export declare function LegalAgreementDialog({ open, onClose, onSign, isSigning, hasV2Signature, isAwaitingSignature, config, }: LegalAgreementDialogProps): import("react/jsx-runtime").JSX.Element;
+export type AppName = string;
+/**
+ * Creates configuration for legal agreement dialog based on app name.
+ * @param appName - Name of the application (any string, e.g., "Permissionless Interface", "Permissionless Safe", "Gearbox App", etc.)
+ * @param links - URLs for legal documents
+ * @param options - Optional configuration overrides
+ */
+export declare function createLegalAgreementConfig(appName: AppName, links: LegalAgreementDialogLinks, options?: {
+    agreeButtonText?: string;
+}): LegalAgreementDialogConfig;
+/**
+ * @deprecated Use createLegalAgreementConfig("Permissionless Interface", links, options) instead
+ */
+export declare function createPermissionlessInterfaceConfig(links: LegalAgreementDialogLinks, options?: {
+    agreeButtonText?: string;
+}): LegalAgreementDialogConfig;
+/**
+ * @deprecated Use createLegalAgreementConfig("Permissionless Safe", links, options) instead
+ */
+export declare function createPermissionlessSafeConfig(links: LegalAgreementDialogLinks, options?: {
+    agreeButtonText?: string;
+}): LegalAgreementDialogConfig;
+/**
+ * @deprecated Use createLegalAgreementConfig("Gearbox App", links, options) instead
+ */
+export declare function createGearboxAppConfig(links: LegalAgreementDialogLinks, options?: {
+    agreeButtonText?: string;
+}): LegalAgreementDialogConfig;
+export interface BlockedRegionDialogProps {
+    open: boolean;
+    onClose: () => void;
+    termsOfServiceLink?: string;
+}
+/**
+ * BlockedRegionDialog — dialog component for blocked region access.
+ *
+ * @usage
+ * Use BlockedRegionDialog to inform users that their access has been restricted:
+ * compliance screening, region restrictions, wallet restrictions.
+ *
+ * Props:
+ * - `open` — controls dialog visibility (required).
+ * - `onClose` — callback when dialog is closed (required).
+ * - `termsOfServiceLink` — optional link to terms of service section (optional).
+ *
+ * Note: Displays information about access restriction with link to terms of service.
+ */
+export declare function BlockedRegionDialog({ open, onClose, termsOfServiceLink, }: BlockedRegionDialogProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,20 @@
+import { BaseLinkProps } from '../base-link';
+import type * as React from "react";
+export interface LinkProps extends BaseLinkProps {
+    /** When true, opens in new tab and shows external icon after content */
+    external?: boolean;
+}
+/**
+ * Link — wraps BaseLink with ContentWrap and optional IconWrap (external icon).
+ * Use for inline text links that may show an external icon.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/page">Internal</Link>
+ * <Link href="https://example.com" external>External</Link>
+ * ```
+ */
+export declare function Link({ className, children, href, target, variant, size, color, external, asChild, ...rest }: React.PropsWithChildren<LinkProps>): React.ReactElement;
+export declare namespace Link {
+    var displayName: string;
+}

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

@@ -0,0 +1,4 @@
+export * from './liquidation-assets-table';
+export * from './liquidation-graph';
+export * from './liquidation-graph-legend';
+export * from './liquidation-graph-tip';

package/dist/types/components/liquidation/liquidation-assets-table/index.d.ts

@@ -0,0 +1 @@
+export * from './liquidation-assets-table';

package/dist/types/components/liquidation/liquidation-assets-table/liquidation-assets-table.d.ts

@@ -0,0 +1,14 @@
+import { Address } from 'viem';
+import { UseLiquidationGraphParamsReturnType } from '../../../hooks/use-liquidation';
+import { TokenMetaInfo } from '../../../types/common';
+import type * as React from "react";
+export interface LiquidationModellingAssetsTableProps {
+    tokensList: Record<Address, TokenMetaInfo>;
+    graphParams: UseLiquidationGraphParamsReturnType;
+    data: Array<{
+        token: Address;
+    }>;
+    prices: Record<Address, bigint>;
+    editedPrices: Record<Address, bigint>;
+}
+export declare function LiquidationModellingAssetsTable({ tokensList, graphParams, data, prices, editedPrices, }: LiquidationModellingAssetsTableProps): React.ReactElement | null;

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

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

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

@@ -0,0 +1,20 @@
+import { Asset } from '@gearbox-protocol/sdk';
+import { Address } from 'viem';
+import { UseLiquidationGraphParamsReturnType } from '../../../hooks/use-liquidation';
+import { LiquidationThresholds, QuotasInfoList, TokenFullData } from '../../../types/common';
+import type * as React from "react";
+export interface LiquidationGraphProps {
+    graphParams: UseLiquidationGraphParamsReturnType;
+    assets: Array<Asset>;
+    liquidationThresholds: LiquidationThresholds;
+    quotas: Record<Address, Asset>;
+    quotasInfo: QuotasInfoList;
+    underlyingToken: Address;
+    debt: bigint;
+    tokensList: Record<Address, TokenFullData>;
+    prices: Record<Address, bigint>;
+    width?: number;
+    height?: number;
+    maxLabelLength?: number;
+}
+export declare function LiquidationGraph({ graphParams, assets, liquidationThresholds, quotas, quotasInfo, underlyingToken: underlyingTokenAddress, debt, prices, tokensList, width, height, maxLabelLength, }: LiquidationGraphProps): React.ReactElement;

package/dist/types/components/liquidation/liquidation-graph-legend/index.d.ts

@@ -0,0 +1 @@
+export * from './liquidation-graph-legend';

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

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function LiquidationGraphLegend(): React.ReactElement;

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

@@ -0,0 +1 @@
+export * from './liquidation-graph-tip';

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

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

package/dist/types/components/liquidation-price/index.d.ts

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

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

@@ -0,0 +1,41 @@
+import { HFZones } from '..';
+import type * as React from "react";
+export type LiquidationPriceType = {
+    type: "text";
+} | {
+    type: "redirect";
+    to: string;
+} | {
+    type: "graph";
+    props: {
+        onShow: () => void;
+    };
+};
+export interface LiquidationPriceProps {
+    /**
+     * Liquidation price (bigint or number)
+     */
+    liquidationPrice?: bigint | number;
+    /**
+     * How to render when price is 0 / N/A: text, redirect link, or button that opens graph
+     */
+    type?: LiquidationPriceType;
+    /**
+     * Health factor zone for optional dot or bars indicator
+     */
+    hfZone?: HFZones;
+    /**
+     * Indicator style when hfZone is set: dot (right) or bars (left)
+     */
+    zoneType?: "dot" | "bars";
+    /**
+     * Label for "check" link/button when type is redirect or graph (e.g. i18n "Check")
+     */
+    checkLabel?: React.ReactNode;
+    className?: string;
+}
+/**
+ * LiquidationPrice — displays liquidation price with optional HF zone indicator.
+ * Matches interface LiquidationPrice structure.
+ */
+export declare function LiquidationPrice({ liquidationPrice, type, hfZone, zoneType, checkLabel, className, }: LiquidationPriceProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface LoaderProps {
+    /** Optional class name for the root element */
+    className?: string;
+}
+/**
+ * Loader — inline loading indicator with icon and label.
+ * Matches A (interface Loader): flex row wrap centered, icon wrap with margin and overflow, loading text.
+ *
+ * @usage
+ * Use as a loading state inside guards or placeholders.
+ *
+ * @example
+ * ```tsx
+ * <Loader />
+ *
+ * <Guard showGuard={isLoading} guard={<Loader />}>
+ *   <Content />
+ * </Guard>
+ * ```
+ */
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { Loader };

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

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

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

@@ -0,0 +1,17 @@
+import type * as React from "react";
+export interface LoaderGuardProps {
+    showGuard: boolean;
+    loader?: React.ReactNode;
+}
+/**
+ * LoaderGuard - displays loading state while data is being fetched
+ * Uses Guard component internally with a default loader
+ *
+ * @example
+ * ```tsx
+ * <LoaderGuard showGuard={isLoading}>
+ *   <Content />
+ * </LoaderGuard>
+ * ```
+ */
+export declare function LoaderGuard({ showGuard: show, children, loader, }: React.PropsWithChildren<LoaderGuardProps>): React.ReactElement;

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

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

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

@@ -0,0 +1,28 @@
+export interface LoadingProps {
+    /** Array of items; loaded count is derived (e.g. non-null/defined). */
+    data: Array<unknown>;
+    /** Function to compute progress 0–100 from data. @default loadingProgress */
+    loadingFunction?: (itemsToLoad: unknown[]) => number;
+    /** Override main message. If not set, uses intl "components.loading.loadingPercent" with { percent }. */
+    message?: string;
+    /** Override sub-message. If not set, uses intl "components.loading.wait". */
+    subMessage?: string;
+}
+/**
+ * Loading — modal loading bar with progress from data array.
+ * Uses intl for default message ("Loading {percent}%") and subMessage ("Please wait...").
+ *
+ * @usage
+ * Use when loading a list of items and you want to show "Loading X%" in a modal.
+ *
+ * @example
+ * ```tsx
+ * <Loading data={[item1, item2, null]} />
+ * <Loading data={items} message={customMessage} />
+ * ```
+ */
+declare function Loading({ data, loadingFunction, message, subMessage, }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Loading {
+    var displayName: string;
+}
+export { Loading };

package/dist/types/components/loading-bar/index.d.ts

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

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface LoadingBarProps {
+    /** Main message (e.g. "Loading 45%"). */
+    message: string;
+    /** Optional secondary line (e.g. "Please wait"). */
+    subMessage?: string;
+    /** Whether the modal is shown. @default true */
+    show?: boolean;
+    /** Additional class for the inner container. */
+    className?: string;
+}
+/**
+ * LoadingBar — modal with spinner, title and optional description.
+ * Matches A (interface LoadingBar): centered modal, 250px container, SpinnerLoader, LoadingTitle, LoadingDescription.
+ *
+ * @usage
+ * Use for blocking loading states (e.g. while data is being fetched).
+ *
+ * @example
+ * ```tsx
+ * <LoadingBar message="Loading 50%" subMessage="Please wait" />
+ * ```
+ */
+declare const LoadingBar: React.ForwardRefExoticComponent<LoadingBarProps & React.RefAttributes<HTMLDivElement>>;
+export { LoadingBar };

package/dist/types/components/markdown-viewer/index.d.ts

@@ -0,0 +1 @@
+export { MarkdownViewer, type MarkdownViewerProps } from './markdown-viewer';

package/dist/types/components/markdown-viewer/markdown-viewer.d.ts

@@ -0,0 +1,61 @@
+export interface MarkdownViewerProps {
+    content: string;
+    title?: string;
+    backButton?: {
+        href: string;
+        text?: string;
+        onClick?: () => void;
+    };
+    /** If true, renders only markdown content without PageLayout wrapper */
+    bare?: boolean;
+    nodeClassNames?: {
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        p?: string;
+        a?: string;
+        ul?: string;
+        ol?: string;
+        li?: string;
+        blockquote?: string;
+        code?: string;
+        strong?: string;
+        em?: string;
+    };
+    nodeComponents?: {
+        a: "a" | "Link";
+    };
+}
+/**
+ * MarkdownViewer — component for rendering markdown content with custom styling.
+ *
+ * @usage
+ * Use MarkdownViewer to display markdown-formatted content:
+ * documentation pages, content pages, markdown articles, formatted text.
+ *
+ * Props:
+ * - `content` — markdown content string to render (required).
+ * - `title` — optional page title displayed in PageLayout.
+ * - `backButton` — optional back button configuration object:
+ *   - `href` — destination URL for back navigation (required).
+ *   - `text` — custom text label (defaults to "Back" if not provided).
+ *   - `onClick` — optional callback function executed on click.
+ * - `bare` — if true, renders only markdown content without PageLayout wrapper (defaults to false).
+ *
+ * Features:
+ * - Custom heading IDs with slugification or custom IDs (e.g., "## Heading {#custom-id}").
+ * - Smooth scroll to hash on mount and anchor link clicks.
+ * - Custom styling for all markdown elements (headings, links, lists, code blocks, etc.).
+ * - Support for GitHub Flavored Markdown (GFM) via remark-gfm.
+ * - Internal anchor links with smooth scrolling.
+ * - External links open in new tab.
+ *
+ * Note: Wraps content in PageLayout. Uses prose styling with dark theme.
+ * Automatically handles heading IDs for navigation.
+ *
+ * Do NOT use MarkdownViewer:
+ * - for simple text content (use appropriate text components).
+ * - when you need rich text editing (use appropriate rich text editor components).
+ */
+export declare function MarkdownViewer({ content, title, backButton, bare, nodeClassNames, nodeComponents, }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,48 @@
+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
+     * When false, renders null
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * When true, on extra-small viewports the content wrapper is full width, min-h-screen, flex row centered.
+     * Matches interface Modal xsCentered (MuiPaper-root on mediaWidth.extraSmall).
+     * @default false
+     */
+    xsCentered?: boolean;
+    /**
+     * Callback when clicking outside the container (on the overlay)
+     * 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
+ * Follows the same pattern as Container from layout/container
+ *
+ * @example
+ * ```tsx
+ * // With show/hide control
+ * <Modal show={isOpen} onClickOutside={handleClose}>
+ *   <Content />
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

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

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

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface NavbarIndicatorContextType {
+    registerItem: (id: string, element: HTMLElement) => void;
+    unregisterItem: (id: string) => void;
+    setActiveItem: (id: string) => void;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    indicatorRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const NavbarIndicatorProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useNavbarIndicator: () => NavbarIndicatorContextType | null;
+export {};