@payfit/unity-components
Version:
61 lines (60 loc) • 2.69 kB
TypeScript
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 {};