import { ReactNode } from 'react';
export interface FlexBoxTemplateRenderProp extends Function {
    (props: FlexBoxTemplateProps): ReactNode;
}
/**
 * @description
 * we are using the same property name as that actually in css
 * and all the values of those properties is acceptable
 * NOTE: this is only for container
 * flexWrap -> flex-wrap
 * direction -> flex-direction
 * justifyContent -> justify-content
 * alignItems -> align-items
 */
interface FlexContainerProps {
    flexWrap?: string;
    direction?: string;
    justifyContent?: string;
    alignItems?: string;
}
/**
 * @description
 * we are using the same property name as that actually in css
 * and all the values of those properties is acceptable
 *
 * order -> order
 * grow -> flex-grow
 * shrink -> flex-shrink
 * basis -> flex-basis
 * align -> align-self
 */
interface FlexItemProps {
    index?: number;
    order?: number | string;
    grow?: number;
    shrink?: number | string;
    basis?: string;
    align?: string;
}
/**
 * @description
 * for responsive support we are getting 3 props for each devices
 * so, the item width will be rendering based on this column count.
 * To be simple, how many items(with columns) should show in each devices
 */
interface ItemsPerDeviceProps {
    desktopColumn?: number | string;
    tabletColumn?: number | string;
    mobileColumn?: number | string;
}
type FlexBoxListType = Array<FlexItemProps>;
export interface FlexBoxTemplateProps extends FlexContainerProps, ItemsPerDeviceProps {
    className?: string;
    children?: ReactNode;
    shouldAdapt?: boolean;
    gridGap?: number;
    list?: FlexBoxListType;
    renderItem?: FlexBoxTemplateRenderProp;
    renderList?: FlexBoxTemplateRenderProp;
    renderWrapper?: FlexBoxTemplateRenderProp;
}
export declare namespace CSS {
    type GridGap = number;
    type ItemWidth = number;
}
export {};