website refactor

apps/website/ui/primitives/Surface.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './Box';
+import React, { ReactNode, ElementType, ComponentPropsWithoutRef, forwardRef, ForwardedRef } from 'react';
+import { Box, BoxProps } from './Box';
 
 /**
  * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
@@ -12,33 +12,31 @@ import { Box, BoxProps, ResponsiveValue } from './Box';
  * If you need a more specific layout, create a new component in apps/website/components.
  */
 
-export interface SurfaceProps<T extends ElementType = 'div'> {
+export interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'padding'> {
   as?: T;
-  children: ReactNode;
+  children?: ReactNode;
   variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string | boolean;
+  border?: boolean | string;
   padding?: number;
   className?: string;
   shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
-  // Sizing
-  w?: string | ResponsiveValue<string>;
-  h?: string | ResponsiveValue<string>;
-  maxWidth?: string | ResponsiveValue<string>;
 }
 
-export function Surface<T extends ElementType = 'div'>({ 
-  as,
-  children, 
-  variant = 'default',
-  rounded = 'none',
-  border = false,
-  padding = 0,
-  className = '',
-  shadow = 'none',
-  w, h, maxWidth,
-  ...props 
-}: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
+export const Surface = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    as,
+    children, 
+    variant = 'default',
+    rounded = 'none',
+    border = false,
+    padding = 0,
+    className = '',
+    shadow = 'none',
+    ...props 
+  }: SurfaceProps<T> & ComponentPropsWithoutRef<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
   const variantClasses: Record<string, string> = {
     default: 'bg-panel-gray',
     muted: 'bg-panel-gray/40',
@@ -85,7 +83,7 @@ export function Surface<T extends ElementType = 'div'>({
 
   const classes = [
     variantClasses[variant],
-    roundedClasses[rounded],
+    typeof rounded === 'string' && roundedClasses[rounded] ? roundedClasses[rounded] : '',
     border ? 'border border-border-gray' : '',
     paddingClasses[padding] || 'p-0',
     shadowClasses[shadow],
@@ -93,8 +91,10 @@ export function Surface<T extends ElementType = 'div'>({
   ].filter(Boolean).join(' ');
 
   return (
-    <Box as={as} className={classes} w={w} h={h} maxWidth={maxWidth} {...props}>
+    <Box as={as} ref={ref} className={classes} {...props}>
       {children}
     </Box>
   );
-}
+});
+
+Surface.displayName = 'Surface';