tangled.org
Monorepo for Tangled
tangled.org
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3
4 export const buttonGroup = tv({
5 base: "inline-flex items-center",
6 variants: {
7 spaced: {
8 true: "gap-2",
9 false: [
10 "gap-0",
11 "*:relative",
12 "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
13 "[&>*:not(:last-child)]:[--btn-radius-r:0px]",
14 "[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
15 ]
16 }
17 },
18 defaultVariants: {
19 spaced: false
20 }
21 });
22
23 export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
24</script>
25
26<script lang="ts">
27 import type { Snippet } from "svelte";
28
29 interface Props {
30 spaced?: ButtonGroupVariants["spaced"];
31 class?: string;
32 children: Snippet;
33 }
34
35 let { spaced = false, class: className, children }: Props = $props();
36
37 const classes = $derived(buttonGroup({ spaced, class: className }));
38</script>
39
40<div class={classes}>
41 {@render children()}
42</div>