export type GridTemplateColumns = string;
export type GridTemplateRows = string;
export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense';
export type GridAutoColumns = string;
export type GridAutoRows = string;

export type GridJustifyItems =
  | 'start'
  | 'end'
  | 'center'
  | 'stretch'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

export type GridAlignItems =
  | 'start'
  | 'end'
  | 'center'
  | 'stretch'
  | 'baseline';

export type GridProps = {
  as?: NonNullable<'div' | 'span' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'ul' | 'ol'>;
  templateColumns?: GridTemplateColumns;
  templateColumnsMd?: GridTemplateColumns;
  templateColumnsLg?: GridTemplateColumns;
  templateRows?: GridTemplateRows;
  templateRowsMd?: GridTemplateRows;
  templateRowsLg?: GridTemplateRows;
  autoFlow?: GridAutoFlow;
  autoFlowMd?: GridAutoFlow;
  autoFlowLg?: GridAutoFlow;
  autoColumns?: GridAutoColumns;
  autoRows?: GridAutoRows;
  justifyContent?: GridJustifyItems;
  justifyContentMd?: GridJustifyItems;
  justifyContentLg?: GridJustifyItems;
  alignItems?: GridAlignItems;
  alignItemsMd?: GridAlignItems;
  alignItemsLg?: GridAlignItems;
  gap?: string;
  gapMd?: string;
  gapLg?: string;
  paddingInline?: string;
  paddingBlock?: string;
  marginInline?: string;
  marginBlock?: string;
  inline?: boolean;
  maxWidth?: string;
  maxHeight?: string;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
};
