wip

apps/website/ui/Card.tsx

@@ -1,19 +1,20 @@
 import React, { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
+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;
 
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
+interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'className'> {
   children: ReactNode;
   className?: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
   variant?: 'default' | 'highlight';
-  p?: Spacing;
-  px?: Spacing;
-  py?: Spacing;
-  pt?: Spacing;
-  pb?: Spacing;
-  pl?: Spacing;
-  pr?: Spacing;
+  p?: Spacing | any;
+  px?: Spacing | any;
+  py?: Spacing | any;
+  pt?: Spacing | any;
+  pb?: Spacing | any;
+  pl?: Spacing | any;
+  pr?: Spacing | any;
 }
 
 export function Card({ 
@@ -53,8 +54,8 @@ export function Card({
   ].filter(Boolean).join(' ');
   
   return (
-    <div className={classes} onClick={onClick} {...props}>
+    <Box className={classes} onClick={onClick as any} {...props}>
       {children}
-    </div>
+    </Box>
   );
 }