website refactor

apps/website/ui/primitives/GridItem.tsx

@@ -1,35 +1,27 @@
-import React, { ElementType } from 'react';
-import { Box, BoxProps } from './Box';
+import React, { ReactNode, ElementType } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
-/**
- * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
- * 
- * GridItem is for items inside a Grid container.
- * 
- * - DO NOT add positioning props (absolute, top, zIndex).
- * - DO NOT add background/border props.
- * 
- * If you need a more specific layout, create a new component in apps/website/components.
- */
-
-export interface GridItemProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
-  children?: React.ReactNode;
-  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-  mdSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-  lgSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-  className?: string;
+export interface GridItemProps<T extends ElementType = 'div'> extends BoxProps<T> {
+  children?: ReactNode;
+  colSpan?: number | ResponsiveValue<number>;
+  rowSpan?: number | ResponsiveValue<number>;
+  lgSpan?: number; // Alias for colSpan.lg
 }
 
-export function GridItem<T extends ElementType = 'div'>({ children, colSpan, mdSpan, lgSpan, className = '', ...props }: GridItemProps<T>) {
-  const spanClasses = [
-    colSpan ? `col-span-${colSpan}` : '',
-    mdSpan ? `md:col-span-${mdSpan}` : '',
-    lgSpan ? `lg:col-span-${lgSpan}` : '',
-    className
-  ].filter(Boolean).join(' ');
+export function GridItem<T extends ElementType = 'div'>({ 
+  children, 
+  colSpan, 
+  rowSpan,
+  lgSpan,
+  ...props 
+}: GridItemProps<T>) {
+  const actualColSpan = lgSpan ? { base: colSpan as any, lg: lgSpan } : colSpan;
 
   return (
-    <Box className={spanClasses} {...props}>
+    <Box 
+      colSpan={actualColSpan as any} 
+      {...props}
+    >
       {children}
     </Box>
   );