/**
 * IntersectionObserver 组件
 * 用于监听一组 DOM 元素的可见性状态，并获取第一个可见元素的索引。
 * @example
 * function App() {
 *   return (
 *     <IntersectionObserverProvider
 *       onFirstVisibleIndexChange={(index) => {
 *         console.log('第一个可见元素的索引:', index);
 *       }}
 *       rootMargin="0px 0px -10% 0px" // 自定义根边距
 *     >
 *       <ScrollContainer>
 *         {items.map((item, index) => (
 *           <IntersectionItem key={item.id} index={index}>
 *             <ItemComponent data={item} />
 *           </IntersectionItem>
 *         ))}
 *       </ScrollContainer>
 *     </IntersectionObserverProvider>
 *   );
 * }
 */
import React from 'react';
import type { ReactNode, CSSProperties } from 'react';
declare global {
    interface Window {
        IntersectionObserver: typeof IntersectionObserver;
    }
}
/**
 * 元素信息接口
 */
interface ElementInfo {
    element: HTMLElement;
    index: number;
    isVisible: boolean;
}
/**
 * IntersectionObserver 上下文值接口
 */
interface IntersectionObserverContextValue {
    /** 是否已初始化 */
    initialized: boolean;
    /** 注册元素 */
    registerElement: (element: HTMLElement, index: number) => void;
    /** 注销元素 */
    unregisterElement: (element: HTMLElement) => void;
    /** 批量注册元素 */
    registerElements: (elements: Array<{
        element: HTMLElement;
        index: number;
    }>) => void;
    /** 清除所有注册的元素 */
    clearAll: () => void;
    /** 第一个可见元素的索引，-1 表示没有可见元素 */
    firstVisibleIndex: number;
}
/**
 * IntersectionObserver Provider 属性接口
 */
interface IntersectionObserverProps {
    children: ReactNode;
    /** 根容器，默认为视口 */
    root?: Element | null;
    /** 根边距 */
    rootMargin?: string;
    /** 阈值 */
    threshold?: number | number[];
    /** 第一个可见元素索引变化时的回调 */
    onFirstVisibleIndexChange?: (index: number) => void;
    /** 是否禁用组件，禁用后不会创建 IntersectionObserver */
    disabled?: boolean;
}
/**
 * IntersectionItem 组件属性接口
 */
interface IntersectionItemProps {
    /** 元素索引 */
    index: number;
    /** 子元素 */
    children?: ReactNode;
    /** 类名 */
    className?: string;
    /** 样式 */
    style?: CSSProperties;
}
/**
 * IntersectionObserver 上下文
 */
declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
/**
 * 使用 IntersectionObserver 的 Hook
 * @returns {Object} 包含注册元素函数和第一个可见元素索引的对象
 */
export declare const useIntersectionObserver: () => IntersectionObserverContextValue;
/**
 * IntersectionItem 组件
 * 自动注册元素到 IntersectionObserver 中
 */
export declare const IntersectionItem: React.FC<IntersectionItemProps>;
export type { IntersectionObserverProps, IntersectionItemProps, IntersectionObserverContextValue, ElementInfo, };
export { IntersectionObserverContext, };
export default IntersectionObserverProvider;