@papernote/ui/dist/components/Grid.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
type ColumnCount = 1 | 2 | 3 | 4 | 6 | 12;
export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Content to arrange in grid */
    children: React.ReactNode;
    /** Number of columns (default, or mobile-first base) */
    columns?: ColumnCount;
    /** Columns at sm breakpoint (640px+) */
    sm?: ColumnCount;
    /** Columns at md breakpoint (768px+) */
    md?: ColumnCount;
    /** Columns at lg breakpoint (1024px+) */
    lg?: ColumnCount;
    /** Columns at xl breakpoint (1280px+) */
    xl?: ColumnCount;
    /** Gap between grid items */
    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /** Custom className */
    className?: string;
}
/**
 * Grid component for arranging children in a CSS grid layout.
 *
 * Supports ref forwarding for DOM access.
 *
 * Column options: 1, 2, 3, 4, 6, 12
 *
 * Responsive breakpoints (mobile-first):
 * - columns: Base (all sizes)
 * - sm: 640px and up
 * - md: 768px and up
 * - lg: 1024px and up
 * - xl: 1280px and up
 *
 * Gap scale:
 * - none: 0
 * - xs: 0.5rem (2)
 * - sm: 0.75rem (3)
 * - md: 1.5rem (6)
 * - lg: 2rem (8)
 * - xl: 3rem (12)
 *
 * @example
 * // Responsive grid: 1 column on mobile, 2 on tablet, 4 on desktop
 * <Grid columns={1} md={2} lg={4} gap="md">
 *   <Card>Item 1</Card>
 *   <Card>Item 2</Card>
 * </Grid>
 */
export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
export default Grid;
//# sourceMappingURL=Grid.d.ts.map