website refactor

apps/website/ui/Button.tsx

@@ -1,8 +1,7 @@
 import React, { ReactNode, MouseEventHandler, forwardRef } from 'react';
-import { Stack } from './primitives/Stack';
+import { Box } from './primitives/Box';
 import { Icon } from './Icon';
 import { Loader2 } from 'lucide-react';
-import { ResponsiveValue } from './primitives/Box';
 
 export interface ButtonProps {
   children: ReactNode;
@@ -18,20 +17,9 @@ export interface ButtonProps {
   href?: string;
   target?: string;
   rel?: string;
-  className?: string;
+  title?: string;
   style?: React.CSSProperties;
-  width?: string | number | ResponsiveValue<string | number>;
-  height?: string | number | ResponsiveValue<string | number>;
-  minWidth?: string | number;
-  px?: number;
-  py?: number;
-  p?: number;
-  rounded?: string;
-  bg?: string;
-  color?: string;
-  fontSize?: string;
-  h?: string;
-  w?: string;
+  rounded?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({ 
@@ -48,22 +36,11 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
   href,
   target,
   rel,
-  className,
+  title,
   style: styleProp,
-  width,
-  height,
-  minWidth,
-  px,
-  py,
-  p,
-  rounded,
-  bg,
-  color,
-  fontSize,
-  h,
-  w,
+  rounded = false,
 }, ref) => {
-  const baseClasses = 'inline-flex items-center justify-center rounded-none transition-all duration-150 ease-in-out focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
+  const baseClasses = 'inline-flex items-center justify-center transition-all duration-150 ease-in-out focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
   
   const variantClasses = {
     primary: 'bg-[var(--ui-color-intent-primary)] text-white hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-primary)] shadow-[0_0_15px_rgba(25,140,255,0.3)] hover:shadow-[0_0_25px_rgba(25,140,255,0.5)]',
@@ -83,6 +60,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
   
   const disabledClasses = (disabled || isLoading) ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
   const widthClasses = fullWidth ? 'w-full' : '';
+  const roundedClasses = rounded ? 'rounded-full' : 'rounded-none';
   
   const classes = [
     baseClasses,
@@ -90,25 +68,15 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
     sizeClasses[size],
     disabledClasses,
     widthClasses,
-    className
+    roundedClasses,
   ].filter(Boolean).join(' ');
   
-  const style: React.CSSProperties = {
-    ...(width ? { width: typeof width === 'object' ? undefined : width } : {}),
-    ...(height ? { height: typeof height === 'object' ? undefined : height } : {}),
-    ...(minWidth ? { minWidth } : {}),
-    ...(fontSize ? { fontSize } : {}),
-    ...(h ? { height: h } : {}),
-    ...(w ? { width: w } : {}),
-    ...(styleProp || {})
-  };
-
   const content = (
-    <Stack direction="row" align="center" gap={2}>
+    <Box display="flex" alignItems="center" gap={2}>
       {isLoading && <Icon icon={Loader2} size={size === 'sm' ? 3 : 4} animate="spin" />}
       {!isLoading && icon}
       {children}
-    </Stack>
+    </Box>
   );
 
   if (as === 'a') {
@@ -120,7 +88,8 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         rel={rel}
         className={classes}
         onClick={onClick as MouseEventHandler<HTMLAnchorElement>}
-        style={style}
+        style={styleProp}
+        title={title}
       >
         {content}
       </a>
@@ -134,7 +103,8 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
       className={classes}
       onClick={onClick as MouseEventHandler<HTMLButtonElement>}
       disabled={disabled || isLoading}
-      style={style}
+      style={styleProp}
+      title={title}
     >
       {content}
     </button>