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