website refactor

apps/website/ui/Box.tsx

@@ -89,6 +89,8 @@ export interface BoxProps<T extends ElementType> {
   group?: boolean;
   groupHoverBorderColor?: string;
   groupHoverTextColor?: string;
+  groupHoverScale?: boolean;
+  groupHoverOpacity?: number;
   fontSize?: string;
   transform?: string;
   borderWidth?: string;
@@ -111,6 +113,8 @@ export interface BoxProps<T extends ElementType> {
   webkitMaskImage?: string;
   backgroundSize?: string;
   backgroundPosition?: string;
+  backgroundColor?: string;
+  insetY?: Spacing | string;
 }
 
 type ResponsiveValue<T> = {
@@ -136,6 +140,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     flexDirection,
     alignItems,
     justifyContent,
+    flexWrap,
     position,
     top,
     bottom,
@@ -183,6 +188,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     group,
     groupHoverBorderColor,
     groupHoverTextColor,
+    groupHoverScale,
+    groupHoverOpacity,
     fontSize,
     transform,
     borderWidth,
@@ -204,6 +211,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     webkitMaskImage,
     backgroundSize,
     backgroundPosition,
+    backgroundColor,
+    insetY,
     ...props 
   }: BoxProps<T> & ComponentPropsWithoutRef<T>,
   ref: ForwardedRef<HTMLElement>
@@ -321,18 +330,20 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     borderRight ? 'border-r' : '',
     borderColor ? borderColor : '',
     ring ? ring : '',
-    bg ? bg : '',
+    bg ? bg : (backgroundColor ? (backgroundColor.startsWith('bg-') ? backgroundColor : `bg-${backgroundColor}`) : ''),
     color ? color : '',
     hoverColor ? `hover:${hoverColor}` : '',
     shadow ? shadow : '',
     flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
     flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
+    flexWrap ? `flex-${flexWrap}` : '',
     hoverBorderColor ? `hover:${hoverBorderColor}` : '',
     hoverTextColor ? `hover:${hoverTextColor}` : '',
     hoverBg ? `hover:${hoverBg}` : '',
     transition ? 'transition-all' : '',
     lineClamp ? `line-clamp-${lineClamp}` : '',
     inset ? `inset-${inset}` : '',
+    insetY !== undefined && spacingMap[insetY as string | number] ? `inset-y-${spacingMap[insetY as string | number]}` : '',
     bgOpacity !== undefined ? `bg-opacity-${bgOpacity * 100}` : '',
     opacity !== undefined ? `opacity-${opacity * 100}` : '',
     blur ? `blur-${blur}` : '',
@@ -343,6 +354,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     group ? 'group' : '',
     groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
     groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
+    groupHoverScale ? 'group-hover:scale-[1.02]' : '',
+    groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
     getResponsiveClasses('', display),
     getFlexDirectionClass(flexDirection),
     getAlignItemsClass(alignItems),
@@ -390,6 +403,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 } : {}),
+    ...(insetY !== undefined && !spacingMap[insetY as string | number] ? { top: insetY, bottom: insetY } : {}),
     ...(hideScrollbar ? { scrollbarWidth: 'none', msOverflowStyle: 'none', '&::-webkit-scrollbar': { display: 'none' } } : {}),
     ...((props as Record<string, unknown>).style as object || {})
   };

apps/website/ui/Text.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import { BoxProps } from './Box';
+import { Box, BoxProps } from './Box';
 
 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;
 
@@ -194,5 +194,5 @@ export function Text<T extends ElementType = 'span'>({
     ...style
   };
   
-  return <Tag className={classes} style={combinedStyle} {...props}>{children}</Tag>;
+  return <Box as={Tag} className={classes} style={combinedStyle} {...props}>{children}</Box>;
 }