aura-glass/dist/components/layout/GlassBox.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import React from 'react';
export interface BoxProps {
    /**
     * The content of the box
     */
    children?: React.ReactNode;
    /**
     * The component to render the box as
     */
    component?: React.ElementType;
    /**
     * Display property
     */
    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'grid' | 'inline-grid' | 'none';
    /**
     * Flex direction
     */
    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    /**
     * Flex wrap
     */
    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    /**
     * Justify content
     */
    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
    /**
     * Align items
     */
    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
    /**
     * Align content
     */
    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
    /**
     * Align self
     */
    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
    /**
     * Padding
     */
    p?: number | string;
    pt?: number | string;
    pr?: number | string;
    pb?: number | string;
    pl?: number | string;
    px?: number | string;
    py?: number | string;
    /**
     * Margin
     */
    m?: number | string;
    mt?: number | string;
    mr?: number | string;
    mb?: number | string;
    ml?: number | string;
    mx?: number | string;
    my?: number | string;
    /**
     * Width
     */
    width?: number | string;
    /**
     * Height
     */
    height?: number | string;
    /**
     * Min width
     */
    minWidth?: number | string;
    /**
     * Min height
     */
    minHeight?: number | string;
    /**
     * Max width
     */
    maxWidth?: number | string;
    /**
     * Max height
     */
    maxHeight?: number | string;
    /**
     * Border radius
     */
    borderRadius?: number | string;
    /**
     * Background color
     */
    bgcolor?: string;
    /**
     * If true, the box will have a glass effect
     */
    glass?: boolean;
    /**
     * The elevation of the glass effect
     */
    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | 'level1' | 'level2' | 'level3' | 'level4';
    /**
     * Additional CSS class name
     */
    className?: string;
    /**
     * Additional CSS styles
     */
    style?: React.CSSProperties;
    /**
     * Click handler
     */
    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}
/**
 * Box Component
 *
 * A flexible container with system props for layout and styling.
 */
export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
/**
 * GlassBox Component
 *
 * A box component with glass morphism styling.
 */
export declare const GlassBox: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=GlassBox.d.ts.map