frontend-svelte/src/shared/ui/Button/ButtonGroup.svelte

<!--
    Component: ButtonGroup
    Wraps buttons in a warm-surface pill with a small gap and subtle border.
    Use for segmented controls, view toggles, or any mutually exclusive button set.
-->
<script lang="ts">
import { cn } from '$shared/lib';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';

interface Props extends HTMLAttributes<HTMLDivElement> {
    /**
     * Content snippet
     */
    children?: Snippet;
    /**
     * CSS classes
     */
    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-subtle',
        'rounded-none',
        'transition-colors duration-500',
        className,
    )}
    {...rest}
>
    {#if children}
        {@render children()}
    {/if}
</div>