import { default as React } from 'react';
export interface BoxProps {
    /** Box content */
    children: React.ReactNode;
    /** HTML element to render */
    as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav';
    /** Padding */
    p?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /** Padding X-axis */
    px?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /** Padding Y-axis */
    py?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /** Margin */
    m?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
    /** Margin X-axis */
    mx?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
    /** Margin Y-axis */
    my?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
    /** Background color */
    bg?: 'transparent' | 'white' | 'gray' | 'primary' | 'success' | 'warning' | 'danger';
    /** Border */
    border?: boolean;
    /** Border radius */
    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /** Shadow */
    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
    /** Width */
    w?: 'auto' | 'full' | 'screen' | 'min' | 'max';
    /** Height */
    h?: 'auto' | 'full' | 'screen' | 'min' | 'max';
    /** Additional className */
    className?: string;
}
/**
 * Box Component
 *
 * Fundamental layout primitive with spacing, sizing, and styling props.
 * Acts as a building block for creating layouts and containers.
 *
 * @example
 * ```tsx
 * <Box p="md" bg="white" rounded="lg" shadow="md">
 *   <h2>Card Content</h2>
 * </Box>
 * ```
 *
 * @example
 * ```tsx
 * <Box as="section" py="xl" px="md">
 *   <Text>Section content</Text>
 * </Box>
 * ```
 */
export declare const Box: React.FC<BoxProps>;
//# sourceMappingURL=box.d.ts.map