import { VariantProps } from '@payfit/unity-themes';
import { gridItem } from './Grid.variants.js';
export type GridItemVariantProps = VariantProps<typeof gridItem>;
type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
/** Base properties shared across all grid item variants */
interface GridItemBaseProps {
    /** Render the grid item as a specific HTML element */
    asElement?: ElementType;
    /** Override the container's justify-items value for this item. Use 'start', 'center', 'end', or 'stretch' */
    justify?: GridItemVariantProps['justify'];
    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
    align?: GridItemVariantProps['align'];
    /** Add custom classes to the grid item */
    className?: string;
    /** The content of the grid item */
    children?: React.ReactNode;
}
/** Properties for grid items using named grid areas */
interface GridItemAreaProps extends GridItemBaseProps {
    /** The named grid area this item should occupy */
    area: string;
    colSpan?: never;
    colStart?: never;
    colEnd?: never;
}
/** Properties for grid items using column-based positioning */
interface GridItemTracksProps extends GridItemBaseProps {
    area?: never;
    /** Set how many columns this item should span */
    colSpan?: GridItemVariantProps['colSpan'];
    /** Set which column this item should start from */
    colStart?: GridItemVariantProps['colStart'];
    /** Set which column this item should end at */
    colEnd?: GridItemVariantProps['colEnd'];
}
/**
 * Props for the GridItem component. This component accepts either:
 * - Named grid area positioning using the `area` prop
 * - Column- and row-based positioning using `colSpan`, `colStart`, and/or `colEnd`, and `rowSpan`, `rowStart`, and/or `rowEnd`
 * These two positioning methods cannot be mixed.
 */
export type GridItemProps = GridItemAreaProps | GridItemTracksProps;
type InternalGridItemProps = GridItemProps & Omit<React.HTMLAttributes<HTMLElement>, keyof GridItemProps>;
/**
 * Use GridItem to control how individual items behave within a Grid container.
 * This component provides props to manage column spanning, positioning, and alignment of grid items.
 * @example
 * ```tsx
 * <Grid cols={12}>
 *   <GridItem colSpan={6}>
 *     <div>Half width content</div>
 *   </GridItem>
 *   <GridItem colStart={7} colEnd={13}>
 *     <div>Other half content</div>
 *   </GridItem>
 * </Grid>
 * ```
 */
export declare const GridItem: import('react').ForwardRefExoticComponent<InternalGridItemProps & import('react').RefAttributes<HTMLDivElement>>;
export {};