/**
 * Enhanced hook for processing utility classes with responsive and state modifiers
 */
import type { CSSProperties } from 'react';
export interface UseResponsiveUtilitiesOptions {
    /**
     * The className prop from the component
     */
    className?: string;
    /**
     * The style prop from the component
     */
    style?: CSSProperties;
    /**
     * Base component classes (from CSS modules)
     */
    componentClasses?: string | string[];
    /**
     * Component instance ID for unique CSS generation
     */
    componentId?: string;
}
export interface UseResponsiveUtilitiesResult {
    /**
     * Combined className string
     */
    className: string;
    /**
     * Combined style object for base utilities
     */
    style?: CSSProperties;
}
/**
 * Hook that processes utility classes with responsive and state modifiers
 *
 * @example
 * ```tsx
 * const { className, style } = useResponsiveUtilities({
 *   className: "mt-4 hover:bg-gray-100 md:px-6 lg:hover:shadow-lg",
 *   style: { color: 'red' },
 *   componentClasses: styles.button
 * })
 * ```
 */
export declare function useResponsiveUtilities(options: UseResponsiveUtilitiesOptions): UseResponsiveUtilitiesResult;
/**
 * Enhanced version of useUtilityStyles that supports responsive and state modifiers
 */
export declare function useEnhancedUtilityStyles(className?: string, style?: CSSProperties, componentClasses?: string | string[]): UseResponsiveUtilitiesResult;