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

import { VariantProps } from '@payfit/unity-themes';
import { flexItem } from './Flex.variants.js';
export type FlexItemVariantProps = VariantProps<typeof flexItem>;
type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
export interface FlexItemProps {
    /** Render the flex item as a specific HTML element */
    asElement?: ElementType;
    /** Control if the item grows to fill available space. Use 1 to allow growing, 0 to prevent it */
    grow?: FlexItemVariantProps['grow'];
    /** Control if the item shrinks when space is limited. Use 1 to allow shrinking, 0 to prevent it */
    shrink?: FlexItemVariantProps['shrink'];
    /** Set the initial size of the item before remaining space is distributed. Use pixel values or fractions */
    basis?: FlexItemVariantProps['basis'];
    /** Change the item's position in the flex container. Use 'first', 'last', or 'none' */
    order?: FlexItemVariantProps['order'];
    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
    self?: FlexItemVariantProps['self'];
    /** Add custom classes to the flex item */
    className?: string;
    /** The content of the flex item */
    children?: React.ReactNode;
}
/**
 * Use FlexItem to control how individual items behave within a Flex container.
 * This component provides props to manage growing, shrinking, sizing, and positioning of flex items.
 * @example
 * ```tsx
 * <Flex gap="100">
 *   <FlexItem grow={1}>
 *     <div>Flexible content</div>
 *   </FlexItem>
 *   <FlexItem basis="200" shrink={0}>
 *     <div>Fixed width content</div>
 *   </FlexItem>
 * </Flex>
 * ```
 */
export declare const FlexItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
export declare const StackItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
export {};