website refactor

apps/website/ui/primitives/Box.tsx

@@ -12,7 +12,7 @@ import React, { forwardRef, ForwardedRef, ElementType } from 'react';
  * If you need more complex behavior, create a specific component in apps/website/components.
  */
 
-type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+export type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 
 interface ResponsiveSpacing {
   base?: Spacing;
@@ -36,12 +36,12 @@ export interface BoxProps<T extends ElementType> {
   children?: React.ReactNode;
   // Spacing
   margin?: Spacing | ResponsiveSpacing;
-  marginTop?: Spacing | ResponsiveSpacing;
-  marginBottom?: Spacing | ResponsiveSpacing;
+  marginTop?: Spacing | 'auto' | ResponsiveSpacing;
+  marginBottom?: Spacing | 'auto' | ResponsiveSpacing;
   marginLeft?: Spacing | 'auto' | ResponsiveSpacing;
   marginRight?: Spacing | 'auto' | ResponsiveSpacing;
   marginX?: Spacing | 'auto' | ResponsiveSpacing;
-  marginY?: Spacing | ResponsiveSpacing;
+  marginY?: Spacing | 'auto' | ResponsiveSpacing;
   padding?: Spacing | ResponsiveSpacing;
   paddingTop?: Spacing | ResponsiveSpacing;
   paddingBottom?: Spacing | ResponsiveSpacing;
@@ -176,6 +176,10 @@ export interface BoxProps<T extends ElementType> {
   value?: string | number;
   onChange?: React.ChangeEventHandler<any>;
   onError?: React.ReactEventHandler<any>;
+  onScroll?: React.UIEventHandler<any>;
+  onDragOver?: React.DragEventHandler<any>;
+  onDragLeave?: React.DragEventHandler<any>;
+  onDrop?: React.DragEventHandler<any>;
   placeholder?: string;
   title?: string;
   size?: string | number | ResponsiveValue<string | number>;
@@ -194,7 +198,6 @@ export interface BoxProps<T extends ElementType> {
   onMouseDown?: React.MouseEventHandler<any>;
   onMouseUp?: React.MouseEventHandler<any>;
   onMouseMove?: React.MouseEventHandler<any>;
-  onScroll?: React.UIEventHandler<any>;
   responsiveColSpan?: number | ResponsiveValue<number>;
   responsiveGridCols?: number | ResponsiveValue<number>;
   clickable?: boolean;
@@ -311,6 +314,10 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     value,
     onChange,
     onError,
+    onScroll,
+    onDragOver,
+    onDragLeave,
+    onDrop,
     placeholder,
     title,
     size,
@@ -329,7 +336,6 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     onMouseDown,
     onMouseUp,
     onMouseMove,
-    onScroll,
     responsiveColSpan,
     responsiveGridCols,
     clickable,
@@ -436,7 +442,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     getResponsiveClasses('items', alignItems),
     getResponsiveClasses('justify', justifyContent),
     alignSelf !== undefined ? `self-${alignSelf}` : '',
-    getResponsiveClasses('gap', gap),
+    gap ? getResponsiveClasses('gap', gap) : '',
     getResponsiveClasses('grid-cols', gridCols || responsiveGridCols),
     getResponsiveClasses('col-span', colSpan || responsiveColSpan),
     getResponsiveClasses('order', order),
@@ -501,6 +507,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
       onBlur={onBlur}
       onSubmit={onSubmit}
       onScroll={onScroll}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
       onError={onError}
       style={Object.keys(style).length > 0 ? style : undefined}
       id={id}

apps/website/ui/primitives/Surface.tsx

@@ -16,7 +16,7 @@ import { ThemeRadii, ThemeShadows } from '../theme/Theme';
 export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T> {
   as?: T;
   children?: ReactNode;
-  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline';
+  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
   rounded?: keyof ThemeRadii | 'none';
   shadow?: keyof ThemeShadows | 'none';
 }
@@ -62,6 +62,22 @@ export const Surface = forwardRef(<T extends ElementType = 'div'>(
     outline: {
       backgroundColor: 'transparent',
       border: '1px solid var(--ui-color-border-default)'
+    },
+    'rarity-common': {
+      backgroundColor: 'rgba(107, 114, 128, 0.1)',
+      border: '1px solid rgba(107, 114, 128, 0.5)'
+    },
+    'rarity-rare': {
+      backgroundColor: 'rgba(96, 165, 250, 0.1)',
+      border: '1px solid rgba(96, 165, 250, 0.5)'
+    },
+    'rarity-epic': {
+      backgroundColor: 'rgba(192, 132, 252, 0.1)',
+      border: '1px solid rgba(192, 132, 252, 0.5)'
+    },
+    'rarity-legendary': {
+      backgroundColor: 'rgba(255, 190, 77, 0.1)',
+      border: '1px solid rgba(255, 190, 77, 0.5)'
     }
   };