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

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

import React from "react";
export interface GlassStackProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Stack direction
     */
    direction?: "vertical" | "horizontal";
    /**
     * Responsive direction
     */
    responsive?: {
        sm?: "vertical" | "horizontal";
        md?: "vertical" | "horizontal";
        lg?: "vertical" | "horizontal";
        xl?: "vertical" | "horizontal";
        "2xl"?: "vertical" | "horizontal";
    };
    /**
     * Space between items
     */
    space?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
    /**
     * Alias for space (compat)
     */
    spacing?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
    /**
     * Responsive spacing
     */
    responsiveSpace?: {
        sm?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
        md?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
        lg?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
        xl?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
        "2xl"?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
    };
    /**
     * Alignment of items
     */
    align?: "start" | "center" | "end" | "stretch" | "baseline";
    /**
     * Justify content
     */
    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
    /**
     * Whether items should wrap
     */
    wrap?: boolean;
    /**
     * Divider between items
     */
    divider?: React.ReactNode;
    /**
     * Custom divider render function
     */
    renderDivider?: (index: number) => React.ReactNode;
    /**
     * 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 GlassStackItemProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Whether this item should grow to fill available space
     */
    grow?: boolean;
    /**
     * Whether this item should shrink
     */
    shrink?: boolean;
    /**
     * Align this item differently from the stack alignment
     */
    alignSelf?: "auto" | "start" | "center" | "end" | "stretch" | "baseline";
    /**
     * Whether to respect user's motion preferences
     */
    respectMotionPreference?: boolean;
    /**
     * Accessibility label for screen readers
     */
    "aria-label"?: string;
    /**
     * Accessibility role for semantic meaning
     */
    role?: string;
}
/**
 * GlassStack component
 * Layout component for stacking items with consistent spacing
 */
export declare const GlassStack: React.ForwardRefExoticComponent<GlassStackProps & React.RefAttributes<HTMLDivElement>>;
/**
 * GlassStackItem component
 * Individual item within a stack with flex control
 */
export declare const GlassStackItem: React.ForwardRefExoticComponent<GlassStackItemProps & React.RefAttributes<HTMLDivElement>>;
/**
 * VStack component
 * Vertical stack (shorthand for GlassStack with direction="vertical")
 */
export declare const VStack: React.ForwardRefExoticComponent<Omit<GlassStackProps, "direction"> & React.RefAttributes<HTMLDivElement>>;
/**
 * HStack component
 * Horizontal stack (shorthand for GlassStack with direction="horizontal")
 */
export declare const HStack: React.ForwardRefExoticComponent<Omit<GlassStackProps, "direction"> & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=GlassStack.d.ts.map