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

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

import React from 'react';
export interface GlassFlexProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Flex direction
     */
    direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
    /**
     * Responsive direction
     */
    responsive?: {
        sm?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
        md?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
        lg?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
        xl?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
        '2xl'?: 'row' | 'row-reverse' | 'col' | 'col-reverse';
    };
    /**
     * Flex wrap
     */
    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    /**
     * Justify content
     */
    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
    /**
     * Align items
     */
    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
    /**
     * Align content (for wrapped items)
     */
    alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
    /**
     * Gap between 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';
    /**
     * Whether flex container should grow to fill available space
     */
    fullWidth?: boolean;
    /**
     * Whether flex container should grow to fill available height
     */
    fullHeight?: boolean;
    /**
     * 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 GlassFlexItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Flex grow
     */
    grow?: boolean | 0 | 1;
    /**
     * Flex shrink
     */
    shrink?: boolean | 0 | 1;
    /**
     * Flex basis
     */
    basis?: 'auto' | 'full' | '1/2' | '1/3' | '2/3' | '1/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '5/6' | '1/12' | '5/12' | '7/12' | '11/12';
    /**
     * Flex shorthand (grow shrink basis)
     */
    flex?: 'none' | 'auto' | 'initial' | '1';
    /**
     * Align self
     */
    alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch';
    /**
     * Order
     */
    order?: 'none' | 'first' | 'last' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
    /**
     * Whether to respect user's motion preferences
     */
    respectMotionPreference?: boolean;
    /**
     * Accessibility label for screen readers
     */
    'aria-label'?: string;
    /**
     * Accessibility role for semantic meaning
     */
    role?: string;
}
/**
 * GlassFlex component
 * Flexible layout container with glassmorphism styling
 */
export declare const GlassFlex: React.ForwardRefExoticComponent<GlassFlexProps & React.RefAttributes<HTMLDivElement>>;
/**
 * GlassFlexItem component
 * Flex item with control over flex properties
 */
export declare const GlassFlexItem: React.ForwardRefExoticComponent<GlassFlexItemProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=GlassFlex.d.ts.map