website refactor

apps/website/ui/Badge.tsx

@@ -8,12 +8,17 @@ export interface BadgeProps {
   children: ReactNode;
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical' | 'info' | 'outline' | 'default' | 'danger';
   size?: 'xs' | 'sm' | 'md';
-  style?: React.CSSProperties;
   icon?: LucideIcon;
   rounded?: string;
   bg?: string;
   color?: string;
   borderColor?: string;
+  transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
+}
+
+/** @internal */
+interface InternalBadgeProps extends BadgeProps {
+  style?: React.CSSProperties;
 }
 
 export const Badge = ({ 
@@ -25,8 +30,9 @@ export const Badge = ({
   rounded,
   bg,
   color,
-  borderColor
-}: BadgeProps) => {
+  borderColor,
+  transform
+}: InternalBadgeProps) => {
   const variantClasses = {
     primary: 'bg-[var(--ui-color-intent-primary)] text-white',
     secondary: 'bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-text-med)] border border-[var(--ui-color-border-default)]',
@@ -50,6 +56,8 @@ export const Badge = ({
     variantClasses[variant],
     sizeClasses[size],
     rounded ? (rounded === 'full' ? 'rounded-full' : `rounded-${rounded}`) : 'rounded-none',
+    bg?.startsWith('bg-') ? bg : '',
+    color?.startsWith('text-') ? color : '',
   ].join(' ');
 
   const style: React.CSSProperties = {
@@ -57,6 +65,7 @@ export const Badge = ({
     ...(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' } : {}),
+    ...(transform ? { textTransform: transform as any } : {}),
   };
 
   const content = icon ? (