website refactor

apps/website/ui/Box.tsx

@@ -91,6 +91,7 @@ export interface BoxProps<T extends ElementType> {
   groupHoverTextColor?: string;
   groupHoverScale?: boolean;
   groupHoverOpacity?: number;
+  groupHoverWidth?: 'full' | '0' | 'auto';
   fontSize?: string;
   transform?: string;
   borderWidth?: string;
@@ -115,6 +116,9 @@ export interface BoxProps<T extends ElementType> {
   backgroundPosition?: string;
   backgroundColor?: string;
   insetY?: Spacing | string;
+  letterSpacing?: string;
+  lineHeight?: string;
+  backgroundImage?: string;
 }
 
 type ResponsiveValue<T> = {
@@ -190,6 +194,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     groupHoverTextColor,
     groupHoverScale,
     groupHoverOpacity,
+    groupHoverWidth,
     fontSize,
     transform,
     borderWidth,
@@ -213,6 +218,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     backgroundPosition,
     backgroundColor,
     insetY,
+    letterSpacing,
+    lineHeight,
+    backgroundImage,
     ...props 
   }: BoxProps<T> & ComponentPropsWithoutRef<T>,
   ref: ForwardedRef<HTMLElement>
@@ -356,6 +364,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
     groupHoverScale ? 'group-hover:scale-[1.02]' : '',
     groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
+    groupHoverWidth ? `group-hover:w-${groupHoverWidth}` : '',
     getResponsiveClasses('', display),
     getFlexDirectionClass(flexDirection),
     getAlignItemsClass(alignItems),
@@ -399,6 +408,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(webkitMaskImage ? { WebkitMaskImage: webkitMaskImage } : {}),
     ...(backgroundSize ? { backgroundSize } : {}),
     ...(backgroundPosition ? { backgroundPosition } : {}),
+    ...(backgroundImage ? { backgroundImage } : {}),
+    ...(letterSpacing ? { letterSpacing } : {}),
+    ...(lineHeight ? { lineHeight } : {}),
     ...(top !== undefined && !spacingMap[top as string | number] ? { top } : {}),
     ...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
     ...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),