import React from "react";
import { HTMLMotionProps } from "framer-motion";
import { DefaultTheme } from "styled-components";
export interface FlexProps extends HTMLMotionProps<"div"> {
    className?: string;
    children: React.ReactNode;
    direction?: "row" | "column";
    justify?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "soft" | "elevated" | "outline" | "glass";
    align?: "flex-start" | "center" | "flex-end" | "stretch";
    gap?: keyof DefaultTheme["spacing"];
    wrap?: "nowrap" | "wrap" | "wrap-reverse";
    fullWidth?: boolean;
    fullHeight?: boolean;
    responsive?: boolean;
    maxWidth?: string;
    variant?: "standard" | "card" | "list" | "bubble";
    shouldAnimate?: boolean;
    /** ✨ NEW PROPS */
    background?: string | ((theme: DefaultTheme) => string);
    hoverBackground?: string;
    padding?: keyof DefaultTheme["spacing"];
    margin?: keyof DefaultTheme["spacing"];
    borderRadius?: keyof DefaultTheme["radii"];
    borderColor?: keyof DefaultTheme["colors"];
    shadow?: keyof DefaultTheme["elevations"];
    hoverShadow?: keyof DefaultTheme["elevations"];
    opacity?: number;
    flex?: string;
    onHover?: () => void;
    style?: React.CSSProperties;
    disableHoverEffect?: boolean;
    onClick?: React.MouseEventHandler<HTMLDivElement>;
    $swipeDirection?: "left" | "right" | null;
}
export declare const Flex: React.FC<FlexProps>;