import type { BentoColumns, BentoGap, CardVariant, ResponsiveCols, Tone } from '@donotdev/components';
import { type TechKey } from '../../data/techLogos';
export type TechBentoProps = {
    title?: string;
    techs: Array<{
        name: TechKey;
        size?: 'normal' | 'long' | 'high' | 'huge';
        variant?: CardVariant;
    }>;
    /**
     * Number of columns - fixed or responsive (same as Grid)
     * - number: fixed columns (same on all breakpoints)
     * - [mobile, tablet, laptop, desktop]: responsive columns per breakpoint
     * @default 3
     * @example 3 - always 3 columns
     * @example [1, 1, 2, 3] - 1 col mobile/tablet, 2 laptop, 3 desktop
     */
    cols?: number | ResponsiveCols;
    /**
     * @deprecated Use `cols` prop instead. Kept for backward compatibility.
     */
    columns?: BentoColumns;
    gap?: BentoGap;
    separator?: boolean;
    /** Tone system for background colors (matches Section/CallToAction) */
    tone?: Tone;
    /** Content alignment @default 'center' */
    align?: 'start' | 'center' | 'end';
    /** Whether the section is collapsible */
    collapsible?: boolean;
    /** Controlled open state (when collapsible) */
    open?: boolean;
    /** Callback when open state changes (when collapsible) */
    onOpenChange?: (open: boolean) => void;
    /** Default open state (uncontrolled, when collapsible) */
    defaultOpen?: boolean;
    className?: string;
};
export declare function TechBento({ title, techs, cols, columns, gap, separator, tone, align, collapsible, open, onOpenChange, defaultOpen, className, }: TechBentoProps): import("react/jsx-runtime").JSX.Element;
export default TechBento;
//# sourceMappingURL=TechBento.d.ts.map