emotion-flex-grid/build/lib/index.d.ts

A simple, responsive flexbox grid. Made with Emotion.

/// <reference types="react" />
declare type ResponsiveProp<T> = T | Array<T | null>;
declare type Wrap = 'wrap' | 'wrap-reverse' | 'nowrap';
declare type WrapProp = ResponsiveProp<Wrap>;
declare type Align = 'start' | 'center' | 'end';
declare type AlignProp = ResponsiveProp<Align>;
declare type Justify = 'start' | 'center' | 'end' | 'between' | 'around';
declare type JustifyProp = ResponsiveProp<Justify>;
declare type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
declare type DirectionProp = ResponsiveProp<Direction>;
declare type Width = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
declare type WidthProp = ResponsiveProp<Width>;
declare type OrderProp = ResponsiveProp<number>;
declare type TextAlign = 'left' | 'right' | 'center';
declare type TextAlignProp = ResponsiveProp<TextAlign>;
declare type Spacing = string | 0;
declare type SpacingProp = ResponsiveProp<Spacing>;
declare type DisplayProp = ResponsiveProp<string>;
declare type FlexProp = ResponsiveProp<string>;
export interface GridWrapProps {
    display?: DisplayProp;
    maxWidth?: ResponsiveProp<number | string>;
}
export declare const GridWrap: import("@emotion/styled").StyledComponent<{
    theme?: import("@emotion/react").Theme | undefined;
    as?: import("react").ElementType<any> | undefined;
} & GridWrapProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
export interface GridRowProps {
    display?: DisplayProp;
    wrap?: WrapProp;
    direction?: DirectionProp;
    align?: AlignProp;
    justify?: JustifyProp;
}
export declare const GridRow: import("@emotion/styled").StyledComponent<{
    theme?: import("@emotion/react").Theme | undefined;
    as?: import("react").ElementType<any> | undefined;
} & GridRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
export interface GridColumnProps {
    display?: DisplayProp;
    width?: WidthProp;
    offset?: WidthProp;
    order?: OrderProp;
    align?: AlignProp;
    textAlign?: TextAlignProp;
    flex?: FlexProp;
    p?: SpacingProp;
    px?: SpacingProp;
    py?: SpacingProp;
    pt?: SpacingProp;
    pr?: SpacingProp;
    pb?: SpacingProp;
    pl?: SpacingProp;
    m?: SpacingProp;
    mx?: SpacingProp;
    my?: SpacingProp;
    mt?: SpacingProp;
    mr?: SpacingProp;
    mb?: SpacingProp;
    ml?: SpacingProp;
}
export declare const GridColumn: import("@emotion/styled").StyledComponent<{
    theme?: import("@emotion/react").Theme | undefined;
    as?: import("react").ElementType<any> | undefined;
} & GridColumnProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
export {};