import React from 'react';

/**
 * CSS Modules Helper for Semiont Components
 *
 * This helper provides utilities for integrating Semiont components
 * with CSS Modules while preserving the data-attribute architecture.
 */

/**
 * Creates a className builder for Semiont components with CSS Modules
 *
 * @param styles - The CSS Modules styles object
 * @param baseClass - The base Semiont class name (e.g., 'semiont-button')
 * @returns A function that builds the className string
 */
declare function createSemiontClassName(styles: Record<string, string>, baseClass: string): (_dataAttributes: Record<string, string | boolean | undefined>, additionalClasses?: string) => string;
/**
 * Helper to generate data attributes object from component props
 *
 * @param props - Component props
 * @returns Data attributes object
 */
declare function generateDataAttributes(props: {
    variant?: string;
    size?: string;
    loading?: boolean;
    fullWidth?: boolean;
    iconOnly?: boolean;
    active?: boolean;
    disabled?: boolean;
    orientation?: string;
    attached?: boolean;
    spacing?: string;
    [key: string]: any;
}): Record<string, string | undefined>;
/**
 * Merges data attributes into props object
 *
 * @param props - Original props
 * @param dataAttributes - Data attributes to merge
 * @returns Merged props object
 */
declare function mergeDataAttributes<T extends Record<string, any>>(props: T, dataAttributes: Record<string, string | undefined>): T;
/**
 * Example wrapper component for CSS Modules integration
 *
 * Usage:
 * ```tsx
 * import styles from './CustomButton.module.css';
 * import { Button } from '@semiont/react-ui';
 * import { withCSSModules } from '@semiont/react-ui/integrations';
 *
 * const CustomButton = withCSSModules(Button, styles, 'button');
 * ```
 */
declare function withCSSModules<P extends {
    className?: string;
}>(Component: React.ComponentType<P>, styles: Record<string, string>, baseClassName: string): (props: P) => React.JSX.Element;
/**
 * CSS Modules configuration helper for build tools
 *
 * This provides the necessary configuration for CSS Modules
 * to work with Semiont's data-attribute selectors
 */
declare const cssModulesConfig: {
    postcss: {
        plugins: {
            postcssPlugin: string;
            Once(root: any): void;
        }[];
    };
    webpack: {
        cssLoader: {
            modules: {
                localIdentName: string;
                getLocalIdent: (_context: any, _localIdentName: string, localName: string) => string | null;
            };
        };
    };
    vite: {
        css: {
            modules: {
                generateScopedName: string;
                scopeBehaviour: "local";
                globalModulePaths: RegExp[];
            };
        };
    };
};
/**
 * Type definitions for CSS Modules with Semiont components
 */
interface SemiontCSSModules {
    button?: string;
    'button-content'?: string;
    'button-icon'?: string;
    'button-icon-left'?: string;
    'button-icon-right'?: string;
    'button-spinner'?: string;
    'button-group'?: string;
    [key: string]: string | undefined;
}
/**
 * Helper to type CSS Modules imports
 *
 * Usage:
 * ```tsx
 * import { defineCSSModules } from '@semiont/react-ui/integrations';
 * import rawStyles from './Button.module.css';
 *
 * const styles = defineCSSModules<SemiontCSSModules>(rawStyles);
 * ```
 */
declare function defineCSSModules<T extends SemiontCSSModules>(styles: Record<string, string>): T;

export { createSemiontClassName, cssModulesConfig, defineCSSModules, generateDataAttributes, mergeDataAttributes, withCSSModules };
export type { SemiontCSSModules };
