src/shared/ui/Stat/StatGroup.svelte

@@ -0,0 +1,32 @@
+<!--
+    Component: StatGroup
+    Renders multiple Stat components in a row with auto-separators.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { Stat } from '$shared/ui';
+import type { ComponentProps } from 'svelte';
+
+interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
+    label: string;
+    value: string | number;
+}
+
+interface Props {
+    stats: StatItem[];
+    class?: string;
+}
+
+let { stats, class: className }: Props = $props();
+</script>
+
+<div class={cn('flex items-center gap-4', className)}>
+    {#each stats as stat, i}
+        <Stat
+            label={stat.label}
+            value={stat.value}
+            variant={stat.variant}
+            separator={i < stats.length - 1}
+        />
+    {/each}
+</div>