summit-kit
Version:
A React component library for building modern web applications with an earthy and outdoorsy flair.
70 lines (69 loc) • 2.89 kB
TypeScript
import { HTMLAttributes, JSX, ReactNode } from 'react';
type ColCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type AlignItems = "start" | "center" | "end" | "stretch" | "baseline";
type JustifyItems = "start" | "center" | "end" | "stretch";
export type GridProps = HTMLAttributes<HTMLElement> & {
as?: keyof JSX.IntrinsicElements;
className?: string;
/** Number of columns (1-12). */
cols?: ColCount;
/** Number of rows (1-12). */
rows?: ColCount;
/** Grid auto-flow direction. */
flow?: "row" | "col" | "row-dense" | "col-dense";
/** Gap between grid items (inline style, e.g., 8 or "1rem"). */
gap?: string | number;
/** Gap between rows (inline style, e.g., 8 or "1rem"). */
rowGap?: string | number;
/** Gap between columns (inline style, e.g., 8 or "1rem"). */
columnGap?: string | number;
/** Set inline grid instead of block grid. */
inline?: boolean;
/** Apply full width utility. */
fullWidth?: boolean;
/** Optional CSS grid template columns via inline style. */
templateCols?: string;
/** Optional CSS grid template rows via inline style. */
templateRows?: string;
/** Vertical alignment of items within grid cells. */
alignItems?: AlignItems;
/** Horizontal alignment of items within grid cells. */
justifyItems?: JustifyItems;
children: ReactNode;
};
export declare function Grid({ as, className, cols, rows, flow, gap, rowGap, columnGap, inline, fullWidth, templateCols, templateRows, alignItems, justifyItems, children, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
type GridHeaderProps = {
headers: string[];
className?: string;
cols?: ColCount;
rows?: ColCount;
flow?: GridProps["flow"];
gap?: string | number;
rowGap?: string | number;
columnGap?: string | number;
inline?: boolean;
fullWidth?: boolean;
templateCols?: string;
templateRows?: string;
alignItems?: AlignItems;
justifyItems?: JustifyItems;
};
export declare function GridHeader({ headers, className, cols, rows, flow, gap, rowGap, columnGap, inline, fullWidth, templateCols, templateRows, alignItems, justifyItems, }: GridHeaderProps): import("react/jsx-runtime").JSX.Element;
type GridRowProps = {
children: ReactNode;
className?: string;
cols?: ColCount;
rows?: ColCount;
flow?: GridProps["flow"];
gap?: string | number;
rowGap?: string | number;
columnGap?: string | number;
inline?: boolean;
fullWidth?: boolean;
templateCols?: string;
templateRows?: string;
alignItems?: AlignItems;
justifyItems?: JustifyItems;
};
export declare function GridRow({ children, className, cols, rows, flow, gap, rowGap, columnGap, inline, fullWidth, templateCols, templateRows, alignItems, justifyItems, }: GridRowProps): import("react/jsx-runtime").JSX.Element;
export {};