import type { CSSProperties, ReactNode } from 'react';
/**
 * 排列方向类型
 * @description 控制子元素的排列方向
 */
export declare type DirectionType = 'horizontal' | 'horizontal-reverse' | 'vertical' | 'vertical-reverse';
/**
 * 换行类型
 * @description 控制子元素是否换行
 */
export declare type WrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
/**
 * 主轴对齐类型
 * @description 控制子元素在主轴上的对齐方式
 */
export declare type JustifyType = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
/**
 * 交叉轴对齐类型
 * @description 控制子元素在交叉轴上的对齐方式
 */
export declare type AlignType = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
/**
 * 多行对齐类型
 * @description 控制多行时行与行之间的对齐方式
 */
export declare type AlignContentType = 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
/**
 * 响应式断点类型
 * @description 响应式配置的断点名称
 */
export declare type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
/**
 * 响应式配置类型（预留）
 * @description 用于配置不同断点下的布局属性
 */
export interface ResponsiveConfig {
    /** 一行显示的元素个数 */
    columns?: number;
    /** 间距 */
    gap?: number | string;
    /** 排列方向 */
    direction?: DirectionType;
}
/**
 * PisellBasicGrid 组件 Props
 * @template T - 数据源项的类型
 * @description 基于 Flexbox 的基础布局组件属性定义
 */
export interface PisellBasicGridProps<T = any> {
    /**
     * 子元素
     * @description 当未传入 dataSource 时使用
     */
    children?: ReactNode;
    /**
     * 自定义类名
     * @description 添加到容器元素的额外类名
     */
    className?: string;
    /**
     * 自定义样式
     * @description 支持所有 CSS 属性，会与组件计算的样式合并
     */
    style?: CSSProperties;
    /**
     * 排列方向
     * @default 'horizontal'
     * @description
     * - horizontal: 横向排列
     * - horizontal-reverse: 横向反向排列
     * - vertical: 竖向排列
     * - vertical-reverse: 竖向反向排列
     */
    direction?: DirectionType;
    /**
     * 换行控制
     * @default 'nowrap'
     * @description
     * - nowrap: 不换行
     * - wrap: 换行
     * - wrap-reverse: 反向换行
     */
    wrap?: WrapType;
    /**
     * 一行显示的元素个数
     * @description 设置后子元素宽度为 calc((100% - gap * (N-1)) / N)
     * @note 优先级高于 equalWidth
     */
    columns?: number;
    /**
     * 是否等分容器宽度
     * @default false
     * @description 设置为 true 时，子元素会平均分配容器宽度 (flex: 1)
     * @note 当设置了 columns 时，此属性无效
     */
    equalWidth?: boolean;
    /**
     * 间距（统一设置行列间距）
     * @description 数字类型默认单位为 px，也可传入带单位的字符串
     * @example gap={16} 或 gap="1rem"
     */
    gap?: number | string;
    /**
     * 行间距
     * @description 优先级高于 gap
     */
    rowGap?: number | string;
    /**
     * 列间距
     * @description 优先级高于 gap
     */
    columnGap?: number | string;
    /**
     * 主轴对齐方式
     * @default 'start'
     * @description
     * - start: 起始对齐
     * - end: 末尾对齐
     * - center: 居中对齐
     * - between: 两端对齐
     * - around: 等间距对齐
     * - evenly: 均匀分布
     */
    justify?: JustifyType;
    /**
     * 交叉轴对齐方式
     * @default 'stretch'
     * @description
     * - start: 顶部对齐
     * - end: 底部对齐
     * - center: 居中对齐
     * - stretch: 拉伸填充
     * - baseline: 基线对齐
     */
    align?: AlignType;
    /**
     * 多行对齐方式
     * @default 'stretch'
     * @description 当存在多行时，控制行与行之间的对齐方式
     * - start: 顶部对齐
     * - end: 底部对齐
     * - center: 居中对齐
     * - between: 两端对齐
     * - around: 等间距对齐
     * - stretch: 拉伸填充
     */
    alignContent?: AlignContentType;
    /**
     * 响应式配置（预留）
     * @description 当前版本暂不实现，后续版本迭代
     */
    responsive?: Partial<Record<BreakpointType, ResponsiveConfig>>;
    /**
     * 数据源数组
     * @description
     * - 当传入 dataSource 时，组件内部会自动循环渲染
     * - dataSource 为 undefined 时，渲染 children
     * - dataSource 为空数组时，不渲染任何内容
     */
    dataSource?: T[];
    /**
     * 渲染函数
     * @param item - 当前数据项
     * @param index - 当前索引
     * @returns ReactNode
     * @description 用于自定义每个数据项的渲染内容
     */
    renderItem?: (item: T, index: number) => ReactNode;
    /**
     * 指定每项的唯一 key
     * @description
     * - 传入 string 时，作为数据项的属性名获取 key
     * - 传入函数时，通过函数返回 key
     * - 不传时，默认使用 index 作为 key
     * @example rowKey="id" 或 rowKey={(item, index) => `item-${item.id}`}
     */
    rowKey?: string | ((item: T, index: number) => string);
    /**
     * 前置插槽
     * @description 在数据源渲染之前渲染
     */
    startSlot?: ReactNode;
    /**
     * 后置插槽
     * @description 在数据源渲染之后渲染
     */
    endSlot?: ReactNode;
}
/**
 * 容器样式配置
 * @description useGridStyle Hook 返回的容器样式类型
 */
export interface ContainerStyle extends CSSProperties {
    display: 'flex';
    flexDirection: CSSProperties['flexDirection'];
    flexWrap: CSSProperties['flexWrap'];
    justifyContent: CSSProperties['justifyContent'];
    alignItems: CSSProperties['alignItems'];
    alignContent?: CSSProperties['alignContent'];
    gap?: CSSProperties['gap'];
    rowGap?: CSSProperties['rowGap'];
    columnGap?: CSSProperties['columnGap'];
}
/**
 * 子元素样式配置
 * @description useGridStyle Hook 返回的子元素样式类型
 */
export interface ItemStyle extends CSSProperties {
    flexBasis?: CSSProperties['flexBasis'];
    flexGrow?: CSSProperties['flexGrow'];
    flexShrink?: CSSProperties['flexShrink'];
}
/**
 * useGridStyle Hook 返回值类型
 */
export interface UseGridStyleReturn {
    /** 容器样式 */
    containerStyle: ContainerStyle;
    /** 子元素样式 */
    itemStyle: ItemStyle;
}