1import { cva, type VariantProps } from 'class-variance-authority';
2import React from 'react';
3import { cn } from '../lib/cn';
4
5const gridVariants = cva('grid', {
6 variants: {
7 columns: {
8 '1': 'grid-cols-1',
9 '2': 'grid-cols-2',
10 '3': 'grid-cols-3',
11 '4': 'grid-cols-4',
12 '5': 'grid-cols-5',
13 '6': 'grid-cols-6',
14 '7': 'grid-cols-7',
15 '8': 'grid-cols-8',
16 '9': 'grid-cols-9',
17 '10': 'grid-cols-10',
18 '11': 'grid-cols-11',
19 '12': 'grid-cols-12',
20 none: 'grid-cols-none',
21 subgrid: 'grid-cols-subgrid',
22 },
23 rows: {
24 '1': 'grid-rows-1',
25 '2': 'grid-rows-2',
26 '3': 'grid-rows-3',
27 '4': 'grid-rows-4',
28 '5': 'grid-rows-5',
29 '6': 'grid-rows-6',
30 none: 'grid-rows-none',
31 subgrid: 'grid-rows-subgrid',
32 },
33 flow: {
34 row: 'grid-flow-row',
35 col: 'grid-flow-col',
36 dense: 'grid-flow-dense',
37 'row-dense': 'grid-flow-row-dense',
38 'col-dense': 'grid-flow-col-dense',
39 },
40 align: {
41 start: 'items-start',
42 center: 'items-center',
43 end: 'items-end',
44 baseline: 'items-baseline',
45 stretch: 'items-stretch',
46 },
47 justify: {
48 start: 'justify-items-start',
49 center: 'justify-items-center',
50 end: 'justify-items-end',
51 stretch: 'justify-items-stretch',
52 },
53 gap: {
54 '0': 'gap-0',
55 '1': 'gap-1',
56 '2': 'gap-2',
57 '3': 'gap-3',
58 '4': 'gap-4',
59 '5': 'gap-5',
60 '6': 'gap-6',
61 '8': 'gap-8',
62 '10': 'gap-10',
63 '12': 'gap-12',
64 '16': 'gap-16',
65 '20': 'gap-20',
66 '24': 'gap-24',
67 '32': 'gap-32',
68 },
69 gapX: {
70 '0': 'gap-x-0',
71 '1': 'gap-x-1',
72 '2': 'gap-x-2',
73 '3': 'gap-x-3',
74 '4': 'gap-x-4',
75 '5': 'gap-x-5',
76 '6': 'gap-x-6',
77 '8': 'gap-x-8',
78 '10': 'gap-x-10',
79 '12': 'gap-x-12',
80 '16': 'gap-x-16',
81 '20': 'gap-x-20',
82 '24': 'gap-x-24',
83 '32': 'gap-x-32',
84 },
85 gapY: {
86 '0': 'gap-y-0',
87 '1': 'gap-y-1',
88 '2': 'gap-y-2',
89 '3': 'gap-y-3',
90 '4': 'gap-y-4',
91 '5': 'gap-y-5',
92 '6': 'gap-y-6',
93 '8': 'gap-y-8',
94 '10': 'gap-y-10',
95 '12': 'gap-y-12',
96 '16': 'gap-y-16',
97 '20': 'gap-y-20',
98 '24': 'gap-y-24',
99 '32': 'gap-y-32',
100 },
101 },
102 defaultVariants: {
103 columns: '1',
104 },
105});
106
107const GRID_RESPONSIVE_COLUMNS = {
108 sm: {
109 '1': 'sm:grid-cols-1',
110 '2': 'sm:grid-cols-2',
111 '3': 'sm:grid-cols-3',
112 '4': 'sm:grid-cols-4',
113 '5': 'sm:grid-cols-5',
114 '6': 'sm:grid-cols-6',
115 '7': 'sm:grid-cols-7',
116 '8': 'sm:grid-cols-8',
117 '9': 'sm:grid-cols-9',
118 '10': 'sm:grid-cols-10',
119 '11': 'sm:grid-cols-11',
120 '12': 'sm:grid-cols-12',
121 none: 'sm:grid-cols-none',
122 subgrid: 'sm:grid-cols-subgrid',
123 },
124 md: {
125 '1': 'md:grid-cols-1',
126 '2': 'md:grid-cols-2',
127 '3': 'md:grid-cols-3',
128 '4': 'md:grid-cols-4',
129 '5': 'md:grid-cols-5',
130 '6': 'md:grid-cols-6',
131 '7': 'md:grid-cols-7',
132 '8': 'md:grid-cols-8',
133 '9': 'md:grid-cols-9',
134 '10': 'md:grid-cols-10',
135 '11': 'md:grid-cols-11',
136 '12': 'md:grid-cols-12',
137 none: 'md:grid-cols-none',
138 subgrid: 'md:grid-cols-subgrid',
139 },
140 lg: {
141 '1': 'lg:grid-cols-1',
142 '2': 'lg:grid-cols-2',
143 '3': 'lg:grid-cols-3',
144 '4': 'lg:grid-cols-4',
145 '5': 'lg:grid-cols-5',
146 '6': 'lg:grid-cols-6',
147 '7': 'lg:grid-cols-7',
148 '8': 'lg:grid-cols-8',
149 '9': 'lg:grid-cols-9',
150 '10': 'lg:grid-cols-10',
151 '11': 'lg:grid-cols-11',
152 '12': 'lg:grid-cols-12',
153 none: 'lg:grid-cols-none',
154 subgrid: 'lg:grid-cols-subgrid',
155 },
156 xl: {
157 '1': 'xl:grid-cols-1',
158 '2': 'xl:grid-cols-2',
159 '3': 'xl:grid-cols-3',
160 '4': 'xl:grid-cols-4',
161 '5': 'xl:grid-cols-5',
162 '6': 'xl:grid-cols-6',
163 '7': 'xl:grid-cols-7',
164 '8': 'xl:grid-cols-8',
165 '9': 'xl:grid-cols-9',
166 '10': 'xl:grid-cols-10',
167 '11': 'xl:grid-cols-11',
168 '12': 'xl:grid-cols-12',
169 none: 'xl:grid-cols-none',
170 subgrid: 'xl:grid-cols-subgrid',
171 },
172} as const;
173
174type GridColumns = keyof typeof GRID_RESPONSIVE_COLUMNS.sm;
175type GridBreakpoint = keyof typeof GRID_RESPONSIVE_COLUMNS;
176type GridResponsiveColumns = { base?: GridColumns } & Partial<Record<GridBreakpoint, GridColumns>>;
177
178type GridOwnProps<E extends React.ElementType> = Omit<
179 VariantProps<typeof gridVariants>,
180 'columns'
181> & {
182 as?: E;
183 columns?: GridColumns | GridResponsiveColumns | null;
184 minChildWidth?: string;
185 className?: string;
186 style?: React.CSSProperties;
187};
188
189type GridProps<E extends React.ElementType = 'div'> = GridOwnProps<E> &
190 Omit<React.ComponentPropsWithRef<E>, keyof GridOwnProps<E>>;
191
192const BREAKPOINTS: GridBreakpoint[] = ['sm', 'md', 'lg', 'xl'];
193
194const Grid = <E extends React.ElementType = 'div'>({
195 as,
196 columns,
197 minChildWidth,
198 rows,
199 flow,
200 align,
201 justify,
202 gap,
203 gapX,
204 gapY,
205 className,
206 style,
207 ...props
208}: GridProps<E>) => {
209 const Component: React.ElementType = as ?? 'div';
210 const responsive = typeof columns === 'object' && columns !== null ? columns : null;
211 const base = typeof columns === 'object' && columns !== null ? columns.base : columns;
212
213 return (
214 <Component
215 style={
216 minChildWidth
217 ? {
218 gridTemplateColumns: `repeat(auto-fit, minmax(min(${minChildWidth}, 100%), 1fr))`,
219 ...style,
220 }
221 : style
222 }
223 className={cn(
224 gridVariants({ columns: base, rows, flow, align, justify, gap, gapX, gapY }),
225 responsive &&
226 BREAKPOINTS.map((breakpoint) => {
227 const value = responsive[breakpoint];
228 return value ? GRID_RESPONSIVE_COLUMNS[breakpoint][value] : null;
229 }),
230 className,
231 )}
232 {...props}
233 />
234 );
235};
236
237Grid.displayName = 'Grid';
238
239export { Grid, gridVariants };
240export type { GridBreakpoint, GridColumns, GridProps, GridResponsiveColumns };
