website refactor

apps/website/ui/Badge.tsx

@@ -7,17 +7,25 @@ import { Stack } from './Stack';
 export interface BadgeProps {
   children: ReactNode;
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical' | 'info' | 'outline' | 'default' | 'danger';
-  size?: 'sm' | 'md';
+  size?: 'xs' | 'sm' | 'md';
   style?: React.CSSProperties;
   icon?: LucideIcon;
+  rounded?: string;
+  bg?: string;
+  color?: string;
+  borderColor?: string;
 }
 
 export const Badge = ({ 
   children, 
   variant = 'primary', 
   size = 'md',
-  style,
-  icon
+  style: styleProp,
+  icon,
+  rounded,
+  bg,
+  color,
+  borderColor
 }: BadgeProps) => {
   const variantClasses = {
     primary: 'bg-[var(--ui-color-intent-primary)] text-white',
@@ -32,16 +40,25 @@ export const Badge = ({
   };
 
   const sizeClasses = {
+    xs: 'px-1 py-0 text-[9px]',
     sm: 'px-1.5 py-0.5 text-[10px]',
     md: 'px-2 py-0.5 text-xs',
   };
 
   const classes = [
-    'inline-flex items-center justify-center font-bold uppercase tracking-wider rounded-none',
+    'inline-flex items-center justify-center font-bold uppercase tracking-wider',
     variantClasses[variant],
     sizeClasses[size],
+    rounded ? (rounded === 'full' ? 'rounded-full' : `rounded-${rounded}`) : 'rounded-none',
   ].join(' ');
 
+  const style: React.CSSProperties = {
+    ...styleProp,
+    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
+    ...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
+    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor, borderStyle: 'solid', borderWidth: '1px' } : {}),
+  };
+
   const content = icon ? (
     <Stack direction="row" align="center" gap={1}>
       <Icon icon={icon} size={3} />