From cd5abea56c339d84be67c87adf504f5cc905ae72 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 24 Feb 2026 18:04:15 +0300
Subject: [PATCH] feat(ButtonGroup): container for buttons

---
 src/shared/ui/Button/ButtonGroup.svelte | 33 +++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/shared/ui/Button/ButtonGroup.svelte

diff --git a/src/shared/ui/Button/ButtonGroup.svelte b/src/shared/ui/Button/ButtonGroup.svelte
new file mode 100644
index 0000000..c00eb02
--- /dev/null
+++ b/src/shared/ui/Button/ButtonGroup.svelte
@@ -0,0 +1,33 @@
+<!--
+    Component: SwissButtonGroup
+    Wraps SwissButtons in a warm-surface pill with a 1px gap and subtle border.
+    Use for segmented controls, view toggles, or any mutually exclusive button set.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    class?: string;
+}
+
+let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        'flex items-center gap-1 p-1',
+        'bg-surface dark:bg-dark-bg',
+        'border border-black/5 dark:border-white/10',
+        'rounded-none',
+        'transition-colors duration-500',
+        className,
+    )}
+    {...rest}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>