alice.pds.demo.boltless.dev
This repository has no description
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 [&>*]:relative [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:hover]:z-10 [&>*:focus-visible]:z-10"
11 }
12 },
13 defaultVariants: {
14 spaced: false
15 }
16 });
17
18 export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
19</script>
20
21<script lang="ts">
22 import type { Snippet } from "svelte";
23
24 interface Props {
25 spaced?: ButtonGroupVariants["spaced"];
26 class?: string;
27 children: Snippet;
28 }
29
30 let { spaced = false, class: className, children }: Props = $props();
31
32 const classes = $derived(buttonGroup({ spaced, class: className }));
33</script>
34
35<div class={classes}>
36 {@render children()}
37</div>