/**
 * @fileoverview Animated bento grid layout component.
 * @author Saasflare™
 * A responsive grid layout with staggered entrance animations, inspired by
 * the Apple-style bento grid. Items can span multiple columns/rows.
 * @module packages/ui/components/ui/bento-grid
 * @package ui
 *
 * @component
 * @example
 * import { BentoGrid, BentoGridItem } from '@saasflare/ui';
 * <BentoGrid>
 *   <BentoGridItem colSpan={2}>Wide card</BentoGridItem>
 *   <BentoGridItem rowSpan={2}>Tall card</BentoGridItem>
 *   <BentoGridItem>Standard card</BentoGridItem>
 * </BentoGrid>
 *
 * @example
 * // Custom grid columns
 * <BentoGrid columns={4} gap={6}>
 *   <BentoGridItem colSpan={2} rowSpan={2}>Featured</BentoGridItem>
 *   <BentoGridItem>Small 1</BentoGridItem>
 *   <BentoGridItem>Small 2</BentoGridItem>
 * </BentoGrid>
 */
import { type ReactNode } from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Props for the BentoGrid container. */
export interface BentoGridProps extends SaasflareComponentProps {
    /** Grid items. */
    children: ReactNode;
    /** Number of columns at md+ breakpoint. Default: `3` */
    columns?: 2 | 3 | 4;
    /** Gap between items in Tailwind spacing units (4 = 1rem). Default: `4` */
    gap?: number;
    /** Additional class names. */
    className?: string;
}
/**
 * Responsive bento-style grid container with staggered item entrance.
 *
 * - Items animate in with a staggered fade+slide
 * - Supports 2, 3, or 4 column layouts (1 column on mobile)
 * - Items can span multiple columns/rows via BentoGridItem
 *
 * @component
 * @package ui
 */
export declare function BentoGrid({ children, columns, gap, className, surface, radius, animated, iconWeight, }: BentoGridProps): import("react/jsx-runtime").JSX.Element;
/** Props for a BentoGridItem. */
export interface BentoGridItemProps extends SaasflareComponentProps {
    /** Item content. */
    children: ReactNode;
    /** Number of columns to span (1–4). Default: `1` */
    colSpan?: 1 | 2 | 3 | 4;
    /** Number of rows to span (1–3). Default: `1` */
    rowSpan?: 1 | 2 | 3;
    /** Stagger delay index (multiply by 0.08 for delay). Default: `0` */
    index?: number;
    /** Additional class names. */
    className?: string;
}
/**
 * Individual item within a BentoGrid.
 *
 * - Supports column and row spanning
 * - Animates in with a staggered fade + vertical slide
 * - Pass `index` for stagger ordering
 *
 * @component
 * @package ui
 */
export declare function BentoGridItem({ children, colSpan, rowSpan, index, className, surface, radius, animated, iconWeight, }: BentoGridItemProps): import("react/jsx-runtime").JSX.Element;