export type ContainerQueryLevel = 'component' | 'section' | 'page' | 'app';
interface UseContainerQueryLevelOptions {
    /**
     * The ref to the container element to observe
     */
    ref: React.RefObject<HTMLElement | null>;
}
interface UseContainerQueryLevelReturn {
    /**
     * The current container query level based on the container width
     */
    level: ContainerQueryLevel;
    /**
     * The current width of the observed container
     */
    width: number;
}
/**
 * Hook that determines the current container query level based on container width.
 *
 * This hook uses ResizeObserver to monitor the width of a container element and
 * determines which container query level it falls into based on Unity's container
 * breakpoints from design tokens. Breakpoints are automatically synced with Unity's
 * design system: component (< 703px), section (703-1062px), page (1063-1438px), app (≥ 1439px).
 * @param options Configuration options containing the ref to observe
 * @returns Object containing the current level and width
 * @example
 * ```tsx
 * function MyComponent() {
 *   const containerRef = useRef<HTMLDivElement>(null)
 *   const { level, width } = useContainerQueryLevel({ ref: containerRef })
 *
 *   return (
 *     <div ref={containerRef}>
 *       Current level: {level} (width: {width}px)
 *     </div>
 *   )
 * }
 * ```
 */
export declare function useContainerQueryLevel(options: UseContainerQueryLevelOptions): UseContainerQueryLevelReturn;
export {};