website refactor

apps/website/ui/Box.tsx

@@ -82,7 +82,7 @@ export interface BoxProps<T extends ElementType> {
   bgOpacity?: number;
   opacity?: number;
   blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  animate?: 'pulse' | 'bounce' | 'spin' | 'none';
+  animate?: 'pulse' | 'bounce' | 'spin' | 'fade-in' | 'none';
   translateX?: string;
   textAlign?: 'left' | 'center' | 'right' | 'justify';
   hoverScale?: boolean;
@@ -100,6 +100,7 @@ export interface BoxProps<T extends ElementType> {
   aspectRatio?: string;
   visibility?: 'visible' | 'hidden' | 'collapse';
   pointerEvents?: 'auto' | 'none';
+  hideScrollbar?: boolean;
   onMouseEnter?: React.MouseEventHandler<T>;
   onMouseLeave?: React.MouseEventHandler<T>;
   onClick?: React.MouseEventHandler<T>;
@@ -153,6 +154,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     gap,
     w,
     h,
+    width,
+    height,
     rounded,
     border,
     borderTop,
@@ -191,6 +194,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     aspectRatio,
     visibility,
     pointerEvents,
+    hideScrollbar,
     onMouseEnter,
     onMouseLeave,
     onClick,
@@ -362,10 +366,13 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     zIndex !== undefined ? `z-${zIndex}` : '',
     cursor ? `cursor-${cursor}` : '',
     pointerEvents ? `pointer-events-${pointerEvents}` : '',
+    hideScrollbar ? 'scrollbar-hide' : '',
     className
   ].filter(Boolean).join(' ');
 
   const style: React.CSSProperties = {
+    ...(width ? { width } : {}),
+    ...(height ? { height } : {}),
     ...(maxWidth ? { maxWidth } : {}),
     ...(minWidth ? { minWidth } : {}),
     ...(maxHeight ? { maxHeight } : {}),
@@ -383,6 +390,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
     ...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),
     ...(right !== undefined && !spacingMap[right as string | number] ? { right } : {}),
+    ...(hideScrollbar ? { scrollbarWidth: 'none', msOverflowStyle: 'none', '&::-webkit-scrollbar': { display: 'none' } } : {}),
     ...((props as Record<string, unknown>).style as object || {})
   };