import React, { CSSProperties, HTMLProps, ReactNode, Ref } from 'react';
import { COLORS, TINTS } from '../../constants';
import { GenericComponent } from '../../@types/types';
declare const margins: readonly [-8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8];
export declare type Margin = typeof margins[number];
declare const paddings: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
export declare type Padding = typeof paddings[number];
declare const borderRadiuses: {
    square: null;
    circle: string;
    rounded: string;
};
export declare type BoxProps = Partial<{
    alignContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
    alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
    alignSelf: 'center' | 'flex-start' | 'flex-end' | 'stretch';
    backgroundColor: typeof COLORS[number];
    backgroundTint: typeof TINTS[number];
    borderBottomWidth: number;
    borderColor: typeof COLORS[number];
    borderLeftWidth: number;
    borderRightWidth: number;
    borderTint: typeof TINTS[number];
    borderTopWidth: number;
    borderWidth: number;
    borderRadius: keyof typeof borderRadiuses;
    borderTopLeftRadius: keyof typeof borderRadiuses;
    borderTopRightRadius: keyof typeof borderRadiuses;
    borderBottomLeftRadius: keyof typeof borderRadiuses;
    borderBottomRightRadius: keyof typeof borderRadiuses;
    boxSizing: 'border-box' | 'content-box';
    children: ReactNode;
    className: string;
    display: 'inline' | 'inline-block' | 'block' | 'flex' | 'inline-flex' | 'grid';
    element: React.ElementType;
    flex: CSSProperties['flex'];
    flexBasis: CSSProperties['flexBasis'];
    flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    flexGrow: CSSProperties['flexGrow'];
    flexShrink: CSSProperties['flexShrink'];
    flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse';
    justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
    margin: Margin;
    marginHorizontal: Margin;
    marginVertical: Margin;
    marginBottom: Margin;
    marginLeft: Margin;
    marginRight: Margin;
    marginTop: Margin;
    order: CSSProperties['order'];
    overflow: CSSProperties['overflow'];
    overflowX: CSSProperties['overflowX'];
    overflowY: CSSProperties['overflowY'];
    padding: Padding;
    paddingHorizontal: Padding;
    paddingVertical: Padding;
    paddingBottom: Padding;
    paddingLeft: Padding;
    paddingRight: Padding;
    paddingTop: Padding;
    style: CSSProperties;
    textAlign: 'center' | 'left' | 'right';
    ref?: Ref<HTMLElement>;
    [key: string]: unknown;
} & HTMLProps<HTMLElement>>;
declare const Box: GenericComponent<BoxProps>;
export default Box;
