TypeScript type definitions for grid-styled

grid-styled.d.ts

import * as React from 'react';

type NumberStringOrArray = number | string | number[] | string[];

interface BoxProps {
  width?: NumberStringOrArray;
  m?: NumberStringOrArray;
  mt?: NumberStringOrArray;
  mr?: NumberStringOrArray;
  mb?: NumberStringOrArray;
  ml?: NumberStringOrArray;
  mx?: NumberStringOrArray;
  my?: NumberStringOrArray;
  p?: NumberStringOrArray;
  pt?: NumberStringOrArray;
  pr?: NumberStringOrArray;
  pb?: NumberStringOrArray;
  pl?: NumberStringOrArray;
  px?: NumberStringOrArray;
  py?: NumberStringOrArray;
  flex?: string | string[];
  order?: NumberStringOrArray;
  is?: React.ComponentClass | string;
}

type AlignOption = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
type JustifyOption = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
type DirectionOption = 'row' | 'row-reverse' | 'column' | 'column-reverse';

interface FlexProps {
  align?: AlignOption | AlignOption[];
  justify?: JustifyOption | JustifyOption[];
  direction?: DirectionOption | DirectionOption[];
  // Sets flex-wrap: wrap
  wrap?: boolean | boolean[];
  // Shortcut for flex-direction: column
  column?: boolean;
}

declare class Box extends React.Component<BoxProps> {}
declare class Grid extends React.Component<BoxProps> {}
declare class Flex extends React.Component<BoxProps & FlexProps> {}

export { Grid, Box, Flex };