liber-salti/build/Grid/Grid.types.d.ts

Saltí - Liber Design System

/// <reference types="react" />
export declare type GridSize = false | 'auto' | true | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export declare type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
export interface GridProps {
    /**
     * Defines the align-content style property. It's applied for all screen sizes
     */
    alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
    /**
     * Defines the align-items style property. It's applied for all screen sizes
     */
    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
    /**
     * The content of the component
     */
    children?: React.ReactNode;
    /**
     * The component used for the root node. Either a string to use a HTML element or a component
     */
    component?: React.ElementType;
    /**
     * If true, the component will have the flex container behavior. You should be wrapping items with a container
     */
    container?: boolean;
    /**
     * Defines the flex-direction style property. It is applied for all screen sizes
     */
    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    /**
     * If true, the component will have the flex item behavior. You should be wrapping items with a container
     */
    item?: boolean;
    /**
     * Defines the justify-content style property. It is applied for all screen sizes
     */
    justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
    /**
     * Defines the space between the type item component. It can only be used on a type container component
     */
    spacing?: GridSpacing;
    /**
     * Defines the flex-wrap style property. It's applied for all screen sizes
     */
    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    /**
     * If true, it sets min-width?: 0 on the item.
     * Refer to the limitations section of the documentation to better understand the use case
     */
    zeroMinWidth?: boolean;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the xl breakpoint and wider screens
     */
    xl?: GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the lg breakpoint and wider screens if not overridden
     */
    lg?: GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the md breakpoint and wider screens if not overridden
     */
    md?: GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the sm breakpoint and wider screens if not overridden
     */
    sm?: GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for all the screen sizes with the lowest priority
     */
    xs?: GridSize;
}