website refactor

apps/website/ui/Box.tsx

@@ -120,8 +120,6 @@ export interface BoxProps<T extends ElementType> {
   role?: React.AriaRole;
   tabIndex?: number;
   // Internal use only
-  style?: React.CSSProperties;
-  className?: string;
   borderTop?: string | boolean;
   borderBottom?: string | boolean;
   borderLeft?: string | boolean;
@@ -140,6 +138,7 @@ export interface BoxProps<T extends ElementType> {
   groupHoverWidth?: string;
   animate?: any;
   blur?: string;
+  backdropBlur?: string;
   pointerEvents?: string;
   bgOpacity?: number;
   borderWidth?: string | number;
@@ -157,6 +156,10 @@ export interface BoxProps<T extends ElementType> {
   translateX?: string;
   translateY?: string;
   translate?: string;
+  rotate?: string;
+  scale?: string | number;
+  perspective?: string | number;
+  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
   cursor?: string;
   fontSize?: string | ResponsiveValue<string>;
   fontWeight?: string | number;
@@ -230,6 +233,10 @@ export interface BoxProps<T extends ElementType> {
   onPointerDown?: React.PointerEventHandler<any>;
   onPointerMove?: React.PointerEventHandler<any>;
   onPointerUp?: React.PointerEventHandler<any>;
+  /** @deprecated DO NOT USE. Use semantic props instead. */
+  className?: string;
+  /** @deprecated DO NOT USE. Use semantic props instead. */
+  style?: React.CSSProperties;
 }
 
 export const Box = forwardRef(<T extends ElementType = 'div'>(
@@ -292,6 +299,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     groupHoverWidth,
     animate,
     blur,
+    backdropBlur,
     pointerEvents,
     bgOpacity,
     borderWidth,
@@ -309,6 +317,10 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     translateX,
     translateY,
     translate,
+    rotate,
+    scale,
+    perspective,
+    whiteSpace,
     cursor,
     fontSize,
     fontWeight,
@@ -483,11 +495,15 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     group ? 'group' : '',
     animate === 'spin' ? 'animate-spin' : (animate === 'pulse' ? 'animate-pulse' : ''),
     blur ? `blur-${blur}` : '',
+    backdropBlur ? `backdrop-blur-${backdropBlur}` : '',
     pointerEvents ? `pointer-events-${pointerEvents}` : '',
     hideScrollbar ? 'scrollbar-hide' : '',
     truncate ? 'truncate' : '',
     clickable ? 'cursor-pointer' : '',
     lineClamp ? `line-clamp-${lineClamp}` : '',
+    (bg || backgroundColor)?.startsWith('bg-') ? (bg || backgroundColor) : '',
+    borderColor?.startsWith('border-') ? borderColor : '',
+    color?.startsWith('text-') ? color : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -521,6 +537,13 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(weight ? { fontWeight: weight } : {}),
     ...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
     ...(transform === true ? { transform: 'auto' } : (typeof transform === 'string' ? { transform } : {})),
+    ...(translateX ? { translateX } : {}),
+    ...(translateY ? { translateY } : {}),
+    ...(translate ? { translate } : {}),
+    ...(rotate ? { rotate } : {}),
+    ...(scale ? { scale } : {}),
+    ...(perspective ? { perspective } : {}),
+    ...(whiteSpace ? { whiteSpace } : {}),
     ...(typeof fill === 'string' ? { fill } : (fill === true ? { fill: 'currentColor' } : {})),
     ...(stroke ? { stroke } : {}),
     ...(strokeWidth ? { strokeWidth } : {}),