Ilia Mashkov
40 lines
899 B
Svelte
40 lines
899 B
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>
|