website refactor

apps/website/ui/Button.tsx

@@ -19,7 +19,32 @@ export interface ButtonProps {
   rel?: string;
   title?: string;
   style?: React.CSSProperties;
-  rounded?: boolean;
+  rounded?: boolean | string;
+  className?: string;
+  bg?: string;
+  color?: string;
+  w?: string | number;
+  h?: string | number;
+  px?: number;
+  borderColor?: string;
+  mt?: number;
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+  letterSpacing?: string;
+  hoverBorderColor?: string;
+  fontSize?: string;
+  p?: number;
+  minHeight?: string;
+  transition?: boolean;
+  ring?: string;
+  transform?: string;
+  hoverScale?: boolean;
+  overflow?: string;
+  borderWidth?: string;
+  aspectRatio?: string;
+  border?: boolean;
+  shadow?: string;
+  display?: string;
+  center?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({ 
@@ -39,8 +64,34 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
   title,
   style: styleProp,
   rounded = false,
+  className,
+  bg,
+  color,
+  w,
+  h,
+  px,
+  borderColor,
+  mt,
+  position,
+  letterSpacing,
+  hoverBorderColor,
+  fontSize,
+  p,
+  minHeight,
+  transition,
+  ring,
+  transform,
+  hoverScale,
+  overflow,
+  borderWidth,
+  aspectRatio,
+  border,
+  shadow,
+  display,
+  center,
 }, ref) => {
-  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 baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
+  const transitionClasses = transition !== false ? 'transition-all duration-150 ease-in-out' : '';
   
   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)]',
@@ -60,17 +111,45 @@ 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 roundedClasses = rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none');
   
   const classes = [
     baseClasses,
+    transitionClasses,
     variantClasses[variant],
     sizeClasses[size],
     disabledClasses,
     widthClasses,
     roundedClasses,
+    ring,
+    hoverScale ? 'hover:scale-105' : '',
+    display === 'flex' ? 'flex' : '',
+    center ? 'items-center justify-center' : '',
+    className,
   ].filter(Boolean).join(' ');
   
+  const style: React.CSSProperties = {
+    ...styleProp,
+    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
+    ...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
+    ...(w ? { width: w } : {}),
+    ...(h ? { height: h } : {}),
+    ...(px ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
+    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor, borderStyle: 'solid', borderWidth: '1px' } : {}),
+    ...(mt ? { marginTop: `${mt * 0.25}rem` } : {}),
+    ...(position ? { position } : {}),
+    ...(letterSpacing ? { letterSpacing } : {}),
+    ...(fontSize ? { fontSize } : {}),
+    ...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
+    ...(minHeight ? { minHeight } : {}),
+    ...(transform ? { transform } : {}),
+    ...(overflow ? { overflow } : {}),
+    ...(borderWidth ? { borderWidth } : {}),
+    ...(aspectRatio ? { aspectRatio } : {}),
+    ...(border ? { border: '1px solid var(--ui-color-border-default)' } : {}),
+    ...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
+  };
+
   const content = (
     <Box display="flex" alignItems="center" gap={2}>
       {isLoading && <Icon icon={Loader2} size={size === 'sm' ? 3 : 4} animate="spin" />}
@@ -88,7 +167,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         rel={rel}
         className={classes}
         onClick={onClick as MouseEventHandler<HTMLAnchorElement>}
-        style={styleProp}
+        style={style}
         title={title}
       >
         {content}
@@ -103,7 +182,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
       className={classes}
       onClick={onClick as MouseEventHandler<HTMLButtonElement>}
       disabled={disabled || isLoading}
-      style={styleProp}
+      style={style}
       title={title}
     >
       {content}