feat(Badge): handle icon and avatar props (#2497)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/theme/badge.ts

@@ -1,7 +1,14 @@
 import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => ({
-  base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
+  slots: {
+    base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
+    label: 'truncate',
+    leadingIcon: 'shrink-0',
+    leadingAvatar: 'shrink-0',
+    leadingAvatarSize: '',
+    trailingIcon: 'shrink-0'
+  },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
@@ -14,9 +21,24 @@ export default (options: Required<ModuleOptions>) => ({
       subtle: ''
     },
     size: {
-      sm: 'text-xs px-1.5 py-0.5',
-      md: 'text-xs px-2 py-1',
-      lg: 'text-sm px-2 py-1'
+      sm: {
+        base: 'text-xs px-1.5 py-0.5 gap-1',
+        leadingIcon: 'size-4',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-4'
+      },
+      md: {
+        base: 'text-xs px-2 py-1 gap-1',
+        leadingIcon: 'size-4',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-4'
+      },
+      lg: {
+        base: 'text-sm px-2 py-1 gap-1.5',
+        leadingIcon: 'size-5',
+        leadingAvatarSize: '2xs',
+        trailingIcon: 'size-5'
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({