website refactor

apps/website/ui/Grid.tsx

@@ -1,38 +1,46 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
-export interface GridProps {
-  children: ReactNode;
-  cols?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
-  gap?: number;
-  fullWidth?: boolean;
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Grid is for grid-based layouts.
+ * 
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * - DO NOT add background/border props unless it's a specific styled grid.
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface GridProps<T extends ElementType> extends BoxProps<T> {
+  as?: T;
+  children?: ReactNode;
+  cols?: number | ResponsiveValue<number>;
+  gap?: number | string | ResponsiveValue<number | string>;
 }
 
-export const Grid = ({ 
-  children, 
-  cols = 1, 
-  gap = 0,
-  fullWidth = false
-}: GridProps) => {
-  const getGridColsClass = (value: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }) => {
-    if (typeof value === 'number') return `grid-cols-${value}`;
-    const classes = [];
-    if (value.base) classes.push(`grid-cols-${value.base}`);
-    if (value.sm) classes.push(`sm:grid-cols-${value.sm}`);
-    if (value.md) classes.push(`md:grid-cols-${value.md}`);
-    if (value.lg) classes.push(`lg:grid-cols-${value.lg}`);
-    if (value.xl) classes.push(`xl:grid-cols-${value.xl}`);
-    return classes.join(' ');
-  };
-
+export const Grid = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    children, 
+    cols = 1, 
+    gap = 4,
+    as,
+    ...props
+  }: GridProps<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
   return (
     <Box 
-      display="grid" 
-      className={getGridColsClass(cols)}
-      gap={gap} 
-      fullWidth={fullWidth}
+      as={as} 
+      ref={ref}
+      display="grid"
+      gridCols={cols}
+      gap={gap}
+      {...props}
     >
       {children}
     </Box>
   );
-};
+});
+
+Grid.displayName = 'Grid';