import { CSSProperties, ReactNode } from 'react';

export type TBoxBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
export interface ICommonReact {
	children?: ReactNode;
	className?: string;
	style?: CSSProperties;
}
export type Gutter = number | undefined | Partial<Record<TBoxBreakpoint, number>>;
export type GutterParams = Gutter | [
	Gutter,
	Gutter
];
/**
 * 监听盒子大小变化，返回当前的断点
 * @param dom
 * @returns
 */
export declare const useBoxBreakpoint: (dom: any) => {
	boxBreakpoint: TBoxBreakpoint;
	/**
	 * @deprecated
	 * 使用 haveWidth 替代
	 */
	isInit: boolean;
	/** width为0，或者不存在 */
	haveWidth: boolean;
};
declare const PresetDefaultGrid: {
	xs: number;
	sm: number;
	md: number;
	lg: number;
	xl: number;
	xxl: number;
};
export interface BoxRowProps {
	/**
	 * 在不同响应尺寸下的元素占位格数
	 * 应用到所有Col子元素上
	 */
	defaultGrid?: Partial<typeof PresetDefaultGrid>;
	/** 间距 */
	gutter?: GutterParams;
	/** flex 布局的垂直对齐方式 */
	align?: "top" | "middle" | "bottom" | "stretch";
	/** flex 布局的水平排列方式 */
	justify?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly";
	/** 尺寸变化回调 */
	onBoxBreakpointChange?: (breakpoint: TBoxBreakpoint) => void;
}
export type BoxColProps = {
	/**
	 * 栅格占位格数
	 * span 优先级最高：配置了span后，其他的响应式配置将失效；
	 * 范围 0 ～ 24
	 * 为  0  相当于隐藏
	 * 为  24  相当于独占一行
	 */
	span?: number;
	/** 屏幕 < 576px  */
	xs?: number;
	/** 屏幕 ≥ 576px */
	sm?: number;
	/** 屏幕 ≥ 768px */
	md?: number;
	/** 屏幕 ≥ 992px */
	lg?: number;
	/** 屏幕 ≥ 1200px */
	xl?: number;
	/** 屏幕 ≥ 1600px */
	xxl?: number;
	/**
	 * 是否移除 外部包装div
	 * ```
	 * 1. 如果children 为数组，则此配置不生效
	 * 2. 如果移除，会在children中添加style和className（所以children组件必须要有style、className属性）
	 * ```
	 */
	removeWrapper?: boolean;
};
export declare const BoxGrid: {
	/**
	 *  网格响应式布局
	 *```
	 * 1. 应用场景：根据盒子大小决定内部元素的布局
	 * 2. 子元素只能是 BoxGrid.Col
	 */
	Row: import("react").FC<BoxRowProps & ICommonReact>;
	/**
	 * 网格响应式布局，
	 * 默认值：
	 * { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
	 * xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}
	 *```
	 * 1. 设置 span 栅格占位格数，0 ～ 24
	 * 2. grid 自定义响应式网格布局
	 * xs: 容器尺寸 < 576px
	 * sm: 容器尺寸 ≥ 576px
	 * md: 容器尺寸 ≥ 768px
	 * lg: 容器尺寸 ≥ 992px
	 * xl: 容器尺寸 ≥ 1200px
	 * xxl: 容器尺寸 ≥ 1600px
	 * ```
	 */
	Col: import("react").FC<BoxColProps & ICommonReact>;
	/**
	 * 获取栅格响应式布局的配置
	 * @param minSize 元素的最小可接受宽度
	 * @returns { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num }
	 */
	getGridMapByRange: (minSize: number) => Record<TBoxBreakpoint, number>;
};

export {};