import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
import { StyleProp, TGrow, TSpacing, TWidthHeight } from '../../types';

export interface IFlexProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'onClick'> {
    /**
     * the content to render inside the Flex container
     */
    children: ReactNode | JSX.Element;
    /**
     * the items alignment of the Flex container
     * @default flex-start
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
     */
    align?: StyleProp<CSSProperties['alignItems']>;
    /**
     * the items alignment of the Flex container
     * @default flex-start
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
     */
    justify?: StyleProp<CSSProperties['justifyContent']>;
    /**
     * the wrap of the Flex container
     * @default nowrap
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
     */
    wrap?: StyleProp<CSSProperties['flexWrap']>;
    /**
     * the gap between the Flex items
     */
    spacing?: StyleProp<TSpacing>;
    /**
     * the gap between the Flex items
     */
    xSpacing?: StyleProp<TSpacing>;
    /**
     * the gap between the Flex items
     */
    ySpacing?: StyleProp<TSpacing>;
    /**
     * the direction of the Flex container
     * @default row
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
     */
    direction?: StyleProp<CSSProperties['flexDirection']>;
    /**
     * set the maxWidth of the Flex, if not set it will be 'auto'.
     * @default auto
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
     */
    maxWidth?: StyleProp<TWidthHeight>;
    /**
     * set the maxWidth of the Flex, if not set it will be 'auto'.
     * @default auto
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/width
     */
    width?: StyleProp<TWidthHeight>;
    /**
     * set the minWidth of the Flex, if not set it will be 'auto'.
     * @default auto
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
     */
    minWidth?: StyleProp<TWidthHeight>;
    /**
     * set the minHeight of the Flex, if not set it will be 'auto'.
     * @default auto
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
     */
    minHeight?: StyleProp<TWidthHeight>;
    /**
     * set the maxHeight of the Flex, if not set it will be 'auto'.
     * @default auto
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
     */
    maxHeight?: StyleProp<TWidthHeight>;
    /**
     * set the height of the Flex, if not set it will be 'auto'.
     * @default auto
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/height
     */
    height?: StyleProp<TWidthHeight>;
    /**
     * set the grow of the Flex, if not set it will be 0.
     * @default 0
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
     */
    grow?: StyleProp<TGrow>;
    /**
     * set the shrink of the Flex, if not set it will be 1.
     * @default 1
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
     */
    shrink?: StyleProp<TGrow>;
}
//# sourceMappingURL=types.d.ts.map