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

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

import React from 'react';
export interface GlassGridProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Number of columns (1-12)
     */
    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    /**
     * Responsive column configuration
     */
    responsive?: {
        sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
        md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
        lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
        xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
        '2xl'?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    };
    /**
     * Gap between grid items
     */
    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /**
     * Horizontal gap
     */
    gapX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /**
     * Vertical gap
     */
    gapY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /**
     * Auto-fit columns with minimum width
     */
    autoFit?: boolean;
    /**
     * Minimum column width (for auto-fit)
     */
    minColWidth?: string;
    /**
     * Grid flow direction
     */
    flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
    /**
     * Alignment
     */
    align?: 'start' | 'end' | 'center' | 'stretch';
    /**
     * Justify content
     */
    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    /**
     * Whether to respect user's motion preferences
     */
    respectMotionPreference?: boolean;
    /**
     * Accessibility label for screen readers
     */
    'aria-label'?: string;
    /**
     * Accessibility role for semantic meaning
     */
    role?: string;
}
export interface GlassGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Column span (1-12)
     */
    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | 'auto';
    /**
     * Row span
     */
    rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
    /**
     * Responsive column span
     */
    responsive?: {
        sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | 'auto';
        md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | 'auto';
        lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | 'auto';
        xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | 'auto';
        '2xl'?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full' | 'auto';
    };
    /**
     * Column start position
     */
    colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
    /**
     * Column end position
     */
    colEnd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
    /**
     * Row start position
     */
    rowStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'auto';
    /**
     * Row end position
     */
    rowEnd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'auto';
    /**
     * Item alignment
     */
    alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
    /**
     * Item justification
     */
    justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
    /**
     * Whether to respect user's motion preferences
     */
    respectMotionPreference?: boolean;
    /**
     * Accessibility label for screen readers
     */
    'aria-label'?: string;
    /**
     * Accessibility role for semantic meaning
     */
    role?: string;
}
/**
 * GlassGrid component
 * Responsive CSS Grid layout with glassmorphism styling
 */
export declare const GlassGrid: React.ForwardRefExoticComponent<GlassGridProps & React.RefAttributes<HTMLDivElement>>;
/**
 * GlassGridItem component
 * Grid item with responsive column/row spanning
 */
export declare const GlassGridItem: React.ForwardRefExoticComponent<GlassGridItemProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=GlassGrid.d.ts.map