UNPKG

2.58 kBTypeScriptView Raw
1import * as React from 'react';
2import { Breakpoint } from '../styles/createBreakpoints';
3import { OverridableComponent, SimplifiedPropsOf, OverrideProps } from '../OverridableComponent';
4
5export type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
6
7export type GridContentAlignment =
8 | 'stretch'
9 | 'center'
10 | 'flex-start'
11 | 'flex-end'
12 | 'space-between'
13 | 'space-around';
14
15export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
16
17export type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
18
19export type GridJustification =
20 | 'flex-start'
21 | 'center'
22 | 'flex-end'
23 | 'space-between'
24 | 'space-around'
25 | 'space-evenly';
26
27export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
28
29export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
30
31export type GridClassKey =
32 | 'root'
33 | 'container'
34 | 'item'
35 | 'direction-xs-column'
36 | 'direction-xs-column-reverse'
37 | 'direction-xs-row-reverse'
38 | 'wrap-xs-nowrap'
39 | 'wrap-xs-wrap-reverse'
40 | 'align-items-xs-center'
41 | 'align-items-xs-flex-start'
42 | 'align-items-xs-flex-end'
43 | 'align-items-xs-baseline'
44 | 'align-content-xs-center'
45 | 'align-content-xs-flex-start'
46 | 'align-content-xs-flex-end'
47 | 'align-content-xs-space-between'
48 | 'align-content-xs-space-around'
49 | 'justify-xs-center'
50 | 'justify-xs-flex-end'
51 | 'justify-xs-space-between'
52 | 'justify-xs-space-around'
53 | 'spacing-xs-1'
54 | 'spacing-xs-2'
55 | 'spacing-xs-3'
56 | 'spacing-xs-4'
57 | 'spacing-xs-5'
58 | 'spacing-xs-6'
59 | 'spacing-xs-7'
60 | 'spacing-xs-8'
61 | 'spacing-xs-9'
62 | 'spacing-xs-10'
63 | 'grid-xs-auto'
64 | 'grid-xs-true'
65 | 'grid-xs-1'
66 | 'grid-xs-2'
67 | 'grid-xs-3'
68 | 'grid-xs-4'
69 | 'grid-xs-5'
70 | 'grid-xs-6'
71 | 'grid-xs-7'
72 | 'grid-xs-8'
73 | 'grid-xs-9'
74 | 'grid-xs-10'
75 | 'grid-xs-11'
76 | 'grid-xs-12';
77
78export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
79 props: P &
80 Partial<Record<Breakpoint, boolean | GridSize>> & {
81 alignContent?: GridContentAlignment;
82 alignItems?: GridItemsAlignment;
83 container?: boolean;
84 direction?: GridDirection;
85 item?: boolean;
86 justify?: GridJustification;
87 spacing?: GridSpacing;
88 wrap?: GridWrap;
89 zeroMinWidth?: boolean;
90 };
91 defaultComponent: D;
92 classKey: GridClassKey;
93}
94
95declare const Grid: OverridableComponent<GridTypeMap>;
96
97export type GridProps<
98 D extends React.ElementType = GridTypeMap['defaultComponent'],
99 P = {}
100> = OverrideProps<GridTypeMap<P, D>, D>;
101
102export default Grid;