import { type HTMLAttributes, type ReactNode } from 'react';
export type ScrollFadeAxis = 'vertical' | 'horizontal' | 'both';
/**
 * Tracks whether a scrollable element is scrolled away from its edges, so
 * edge fades ("scroll shadows") can be shown only where content continues.
 * Attach `scrollRef` to the scrollable element and `update` to its
 * `onScroll`; content/size changes are re-measured via ResizeObserver.
 *
 * `axis` picks which edges are tracked: 'vertical' (top/bottom — default,
 * matches the original hook), 'horizontal' (left/right), or 'both'.
 *
 * Canonical fade pattern shared by chat lists, FilterModal, and the
 * `ScrollShadow` wrapper below.
 */
export declare function useScrollFade<T extends HTMLElement = HTMLDivElement>(axis?: ScrollFadeAxis): {
    scrollRef: import("react").RefObject<T | null>;
    fadeTop: boolean;
    fadeBottom: boolean;
    fadeLeft: boolean;
    fadeRight: boolean;
    update: () => void;
};
export type ScrollFadeEdge = 'top' | 'bottom' | 'left' | 'right';
export interface ScrollFadeOverlayProps {
    /** Which edge of the scroll container the fade sits on. */
    edge: ScrollFadeEdge;
    /** Whether the fade is currently shown (content continues past this edge). */
    visible: boolean;
    /**
     * CSS color the content fades into — should match the surface behind the
     * list. Defaults to the page background token, which is theme-aware (the
     * light theme redefines the token, so the fade flips with it).
     */
    color?: string;
    className?: string;
}
/**
 * Edge overlay that fades scrollable content into the surface behind it.
 * Render inside a `relative` wrapper around the scrollable element.
 * Vertical fades are 64px tall (legacy chat/FilterModal size); horizontal
 * fades are 40px wide per the ODS "scroll gradient" spec.
 */
export declare function ScrollFadeOverlay({ edge, visible, color, className }: ScrollFadeOverlayProps): import("react").JSX.Element;
export interface ScrollShadowProps extends HTMLAttributes<HTMLDivElement> {
    /** Which scroll direction(s) to track and fade. */
    axis?: ScrollFadeAxis;
    /**
     * CSS color of the fade — the surface the content visually sits on.
     * Defaults to the page background token; pass e.g. `var(--color-bg-card)`
     * when the scrollable sits on a card. Tokens are theme-aware, so the same
     * component works in light and dark themes (dark by default).
     */
    color?: string;
    /** Classes for the inner scrollable element (heights, paddings, etc.). */
    scrollClassName?: string;
    /** Extra classes for every fade overlay (e.g. custom size). */
    overlayClassName?: string;
    children: ReactNode;
}
/**
 * Drop-in wrapper that makes its child scrollable and fades the edges where
 * more content exists — right/left for horizontal overflow (wide tables),
 * top/bottom for vertical (long lists). Fades appear and hide automatically
 * as the user scrolls or the content resizes.
 *
 * ```tsx
 * <ScrollShadow axis="horizontal">
 *   <WideTable />
 * </ScrollShadow>
 * ```
 */
export declare function ScrollShadow({ axis, color, className, scrollClassName, overlayClassName, children, ...rest }: ScrollShadowProps): import("react").JSX.Element;
//# sourceMappingURL=scroll-fade.d.ts.map