website refactor

apps/website/ui/Box.tsx

@@ -52,12 +52,12 @@ export interface BoxProps<T extends ElementType> {
   
   // Aliases (Deprecated - use full names)
   m?: Spacing | ResponsiveSpacing;
-  mt?: Spacing | ResponsiveSpacing;
-  mb?: Spacing | ResponsiveSpacing;
+  mt?: Spacing | 'auto' | ResponsiveSpacing;
+  mb?: Spacing | 'auto' | ResponsiveSpacing;
   ml?: Spacing | 'auto' | ResponsiveSpacing;
   mr?: Spacing | 'auto' | ResponsiveSpacing;
   mx?: Spacing | 'auto' | ResponsiveSpacing;
-  my?: Spacing | ResponsiveSpacing;
+  my?: Spacing | 'auto' | ResponsiveSpacing;
   p?: Spacing | ResponsiveSpacing;
   pt?: Spacing | ResponsiveSpacing;
   pb?: Spacing | ResponsiveSpacing;
@@ -216,6 +216,19 @@ export interface BoxProps<T extends ElementType> {
   backgroundSize?: string;
   backgroundPosition?: string;
   backgroundImage?: string;
+  htmlFor?: string;
+  minH?: string | number | ResponsiveValue<string | number>;
+  borderOpacity?: number;
+  rows?: number;
+  backgroundColor?: string;
+  outline?: string;
+  focusBorderColor?: string;
+  href?: string;
+  name?: string;
+  borderTopColor?: string;
+  onPointerDown?: React.PointerEventHandler<any>;
+  onPointerMove?: React.PointerEventHandler<any>;
+  onPointerUp?: React.PointerEventHandler<any>;
 }
 
 export const Box = forwardRef(<T extends ElementType = 'div'>(
@@ -354,6 +367,19 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     backgroundSize,
     backgroundPosition,
     backgroundImage,
+    htmlFor,
+    minH,
+    borderOpacity,
+    rows,
+    backgroundColor,
+    outline,
+    focusBorderColor,
+    href,
+    name,
+    borderTopColor,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
     ...props 
   }: BoxProps<T>,
   ref: ForwardedRef<HTMLElement>
@@ -417,7 +443,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     getResponsiveClasses('max-w', maxWidth),
     getResponsiveClasses('min-w', minWidth),
     getResponsiveClasses('max-h', maxHeight),
-    getResponsiveClasses('min-h', minHeight),
+    getResponsiveClasses('min-h', minHeight || minH),
     getResponsiveClasses('', display),
     center ? 'flex items-center justify-center' : '',
     overflow ? (overflow.includes(':') ? overflow : `overflow-${overflow}`) : '',
@@ -464,6 +490,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(typeof minWidth === 'string' ? { minWidth } : {}),
     ...(typeof maxHeight === 'string' ? { maxHeight } : {}),
     ...(typeof minHeight === 'string' ? { minHeight } : {}),
+    ...(typeof minH === 'string' || typeof minH === 'number' ? { minHeight: minH } : {}),
     ...(aspectRatio ? { aspectRatio } : {}),
     ...(typeof top === 'string' || typeof top === 'number' ? { top } : {}),
     ...(typeof right === 'string' || typeof right === 'number' ? { right } : {}),
@@ -473,7 +500,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(typeof borderBottom === 'string' ? { borderBottom } : (borderBottom === true ? { borderBottom: '1px solid var(--ui-color-border-default)' } : {})),
     ...(typeof borderLeft === 'string' ? { borderLeft } : (borderLeft === true ? { borderLeft: '1px solid var(--ui-color-border-default)' } : {})),
     ...(typeof borderRight === 'string' ? { borderRight } : (borderRight === true ? { borderRight: '1px solid var(--ui-color-border-default)' } : {})),
-    ...(bg ? { background: bg.startsWith('bg-') ? undefined : bg } : {}),
+    ...(borderTopColor ? { borderTopColor: borderTopColor.startsWith('border-') ? undefined : borderTopColor } : {}),
+    ...(borderOpacity !== undefined ? { borderOpacity } : {}),
+    ...(bg || backgroundColor ? { background: (bg || backgroundColor)!.startsWith('bg-') ? undefined : (bg || backgroundColor) } : {}),
     ...(rounded === true ? { borderRadius: 'var(--ui-radius-md)' } : (typeof rounded === 'string' ? { borderRadius: rounded.includes('rem') || rounded.includes('px') ? rounded : `var(--ui-radius-${rounded})` } : {})),
     ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
     ...(border === true ? { border: '1px solid var(--ui-color-border-default)' } : (typeof border === 'string' ? { border } : {})),
@@ -531,6 +560,13 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
       muted={muted}
       playsInline={playsInline}
       viewBox={viewBox}
+      htmlFor={htmlFor}
+      rows={rows}
+      href={href}
+      name={name}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
       {...props} 
     >
       {children}