import { default as React } from 'react'; import { ContentDensity, UseContentDensityReturn } from '../types'; /** * Options for useContentDensity hook. */ export interface UseContentDensityOptions { /** Ref to the container element */ containerRef: React.RefObject; /** Whether to automatically recalculate on changes */ autoRecalculate?: boolean; /** Debounce interval for recalculation in ms */ debounceMs?: number; /** Selector for child items (defaults to direct children) */ itemSelector?: string; } /** * Hook for analyzing content density within a container. * * @param options - Hook configuration options * @returns Content density metrics and controls * * @example * ```tsx * function DensityAwareLayout() { * const containerRef = useRef(null); * const { * density, * itemCount, * averageItemSize, * sizeVariance, * isImageHeavy, * isTextHeavy, * recalculate * } = useContentDensity({ * containerRef, * autoRecalculate: true, * debounceMs: 200 * }); * * const layoutMode = useMemo(() => { * if (isImageHeavy && density === 'low') return 'grid'; * if (isTextHeavy) return 'list'; * if (density === 'high') return 'compact'; * return 'grid'; * }, [density, isImageHeavy, isTextHeavy]); * * return ( *
* {children} *
* ); * } * ``` */ export declare function useContentDensity(options: UseContentDensityOptions): UseContentDensityReturn; /** * Hook that returns true when content density exceeds a threshold. * * @param currentDensity - Current content density * @param threshold - Minimum density threshold * @returns Whether density meets or exceeds threshold * * @example * ```tsx * function CompactModeToggle({ density }: { density: ContentDensity }) { * const shouldUseCompactMode = useDensityThreshold(density, 'high'); * * return shouldUseCompactMode ? : ; * } * ``` */ export declare function useDensityThreshold(currentDensity: ContentDensity, threshold: ContentDensity): boolean; export type { UseContentDensityReturn };