@payfit/unity-components/dist/esm/components/grid/Grid.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { grid } from './Grid.variants.js';
export type GridContainerVariantProps = VariantProps<typeof grid>;
type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
export interface GridProps {
    /** Render the grid container as a specific HTML element */
    asElement?: ElementType;
    /** Create an inline grid container instead of a block-level container */
    inline?: GridContainerVariantProps['inline'];
    /** Set the number of columns in the grid. Use 6 for small grids or 12 for larger ones */
    cols?: GridContainerVariantProps['cols'];
    /** Set the grid template rows. Use any valid syntax from CSS' grid-template-rows property */
    rows?: string;
    /** Set the grid template areas. Use any valid syntax from CSS' grid-template-areas property */
    areas?: string;
    /** Control how grid items flow. Use 'row', 'col', 'dense', 'row-dense', or 'col-dense' */
    flow?: GridContainerVariantProps['flow'];
    /** Align grid items along the inline axis within their cells. Use 'start', 'center', 'end', or 'stretch' */
    justifyItems?: GridContainerVariantProps['justifyItems'];
    /** Align grid items along the block axis within their cells. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
    alignItems?: GridContainerVariantProps['alignItems'];
    /** Add custom classes to the grid container */
    className?: string;
    /** The content to be laid out using CSS Grid */
    children?: React.ReactNode;
}
/**
 * The Grid component provides a powerful and intuitive way to create grid layouts using CSS Grid.
 * Use it to create responsive grid layouts with precise control over item placement and alignment.
 *
 * Key features:
 * - Create 6 or 12 column grids with the `cols` prop
 * - Control item flow with the `flow` prop
 * - Align items with `justifyItems` and `alignItems` props
 * - Create inline grids with the `inline` prop
 *
 * Use GridItem components inside Grid to control individual item behavior.
 * @example
 * ```tsx
 * // Create a basic 12-column grid
 * <Grid cols={12}>
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </Grid>
 *
 * // Create a grid with items aligned to center
 * <Grid justifyItems="center" alignItems="center">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </Grid>
 * ```
 */
export declare const Grid: import('react').ForwardRefExoticComponent<GridProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof GridProps> & import('react').RefAttributes<HTMLDivElement>>;
export {};