feat(Badge): create Badge ui component

src/shared/ui/Badge/Badge.svelte

@@ -0,0 +1,40 @@
+<!--
+    Component: Badge
+    Small status indicator with color variants and size options
+-->
+<script lang="ts">
+interface Props {
+    /**
+     * Color variant of the badge
+     * @default default
+     */
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * Size of the badge
+     * @default md
+     */
+    size?: 'sm' | 'md';
+}
+
+const { variant = 'default', size = 'md' }: Props = $props();
+
+const baseClasses = 'inline-flex items-center justify-center rounded-full font-medium';
+
+const variantClasses = $derived(
+    variant === 'success'
+        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+        : variant === 'warning'
+        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+        : variant === 'error'
+        ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+        : variant === 'info'
+        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+);
+
+const sizeClasses = $derived(size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-0.5 text-sm');
+</script>
+
+<span class="{baseClasses} {variantClasses} {sizeClasses}">
+    <slot />
+</span>