<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const buttonGroup = tv({
		base: "inline-flex items-center",
		variants: {
			spaced: {
				true: "gap-2",
				false: [
					"gap-0",
					"*:relative",
					"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
					"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
					"[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
				]
			}
		},
		defaultVariants: {
			spaced: false
		}
	});

	export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
</script>

<script lang="ts">
	import type { Snippet } from "svelte";

	interface Props {
		spaced?: ButtonGroupVariants["spaced"];
		class?: string;
		children: Snippet;
	}

	let { spaced = false, class: className, children }: Props = $props();

	const classes = $derived(buttonGroup({ spaced, class: className }));
</script>

<div class={classes}>
	{@render children()}
</div>
