@payfit/unity-components/dist/esm/components/flex/Flex.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { flex } from './Flex.variants.js';
export type FlexContainerVariantProps = VariantProps<typeof flex>;
type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
export interface FlexProps {
    /** Render the flex container as a specific HTML element */
    asElement?: ElementType;
    /** Create an inline flex container instead of a block-level container */
    inline?: FlexContainerVariantProps['inline'];
    /** Set the main axis direction. Use 'row' for horizontal or 'col' for vertical layout */
    direction?: FlexContainerVariantProps['direction'];
    /** Reverse the flow of items along the main axis */
    isReversed?: FlexContainerVariantProps['isReversed'];
    /** Control how items wrap when they exceed container size. Use 'wrap', 'wrap-reverse', or 'nowrap' */
    wrap?: FlexContainerVariantProps['wrap'];
    /** Add equal spacing between items in both directions */
    gap?: FlexContainerVariantProps['gap'];
    /** Add horizontal spacing between items */
    gapX?: FlexContainerVariantProps['gapX'];
    /** Add vertical spacing between items */
    gapY?: FlexContainerVariantProps['gapY'];
    /** Align items along the main axis. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
    justify?: FlexContainerVariantProps['justify'];
    /** Align items along the cross axis. Use 'start', 'center', 'end', 'baseline', or 'stretch' */
    align?: FlexContainerVariantProps['align'];
    /** Align wrapped lines. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
    alignContent?: FlexContainerVariantProps['alignContent'];
    /** Add custom classes to the flex container */
    className?: string;
    /** The content to be laid out using flexbox */
    children?: React.ReactNode;
}
/**
 * The Flex component provides a powerful and intuitive way to create flexible layouts using CSS Flexbox.
 * Use it to create rows, columns, and complex layouts with precise control over item alignment and spacing.
 *
 * Key features:
 * - Create row or column layouts with the `direction` prop
 * - Control spacing with `gap`, `gapX`, and `gapY` props
 * - Align items with `justify` and `align` props
 * - Control wrapping behavior with the `wrap` prop
 * - Reverse item order with `isReversed`
 *
 * Use `FlexItem` components inside `Flex` to control individual item behavior.
 *
 * > Note: `Flex` and `FlexItem` also export the aliases `Stack` and `StackItem`. We recommend you use `Flex` and `FlexItem` for clarity.
 * @example
 * ```tsx
 * // Create a basic row layout with gap
 * <Flex gap="100">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </Flex>
 *
 * // Create a column layout with items centered
 * <Flex direction="col" align="center" justify="center">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </Flex>
 * ```
 */
export declare const Flex: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
export declare const Stack: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
export {};