@primer/react-brand/lib/Grid/Grid.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren } from 'react';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/grid.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css';
type ResponsiveMap = {
    xsmall?: GridColumnIndex;
    small?: GridColumnIndex;
    medium?: GridColumnIndex;
    large?: GridColumnIndex;
    xlarge?: GridColumnIndex;
    xxlarge?: GridColumnIndex;
};
export type GridColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export type GridProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {
    /**
     * The HTML element used to render the grid.
     */
    as?: T | 'div' | 'span' | 'section';
    /**
     * Visual aid to help with alignment.
     */
    enableOverlay?: boolean;
    /**
     * Fills the width of the parent container and removes the max-width.
     */
    fullWidth?: boolean;
    /**
     * Test id for the root element.
     */
    ['data-testid']?: string;
} & (T extends 'span' ? BaseProps<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> : BaseProps<HTMLDivElement>);
type GridColumnProps<T extends keyof JSX.IntrinsicElements = 'div'> = {
    as?: T | 'div' | 'span' | 'section';
    span?: GridColumnIndex | ResponsiveMap;
    start?: GridColumnIndex | ResponsiveMap;
} & (T extends 'span' ? BaseProps<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> : BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>);
/**
 * Use Grid to create flexible and responsive grid-based layouts
 * @see https://primer.style/brand/components/Grid
 * @example
 *   <Grid>
 *     <Grid.Column span="6">
 *       ...
 *     </Grid.Column>
 *   </Grid>
 */
export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"> & {
    /**
     * The HTML element used to render the grid.
     */
    as?: "span" | "div" | "section" | undefined;
    /**
     * Visual aid to help with alignment.
     */
    enableOverlay?: boolean;
    /**
     * Fills the width of the parent container and removes the max-width.
     */
    fullWidth?: boolean;
    /**
     * Test id for the root element.
     */
    "data-testid"?: string;
} & BaseProps<HTMLDivElement> & {
    children?: React.ReactNode | undefined;
}> & {
    readonly type: ({ className, children, as, fullWidth, enableOverlay, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => import("react/jsx-runtime").JSX.Element;
} & {
    Column: React.MemoExoticComponent<({ children, as, span, start, className, ...rest }: PropsWithChildren<GridColumnProps>) => import("react/jsx-runtime").JSX.Element>;
    testIds: {
        root: string;
    };
};
export {};