alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3 import type { ButtonVariants } from "./Button.svelte";
4
5 export const buttonGroup = tv({
6 base: "inline-flex items-center",
7 variants: {
8 spaced: {
9 true: "gap-2",
10 false: [
11 "items-stretch gap-0 rounded-sm overflow-hidden border border-border-default bg-background-subtle dark:bg-background-canvas",
12 "*:relative *:border-y-0",
13 "[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
14 "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
15 "[&>*:not(:last-child)]:[--btn-radius-r:0px]",
16 "[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
17 ]
18 }
19 },
20 defaultVariants: {
21 spaced: false
22 }
23 });
24
25 export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
26
27 export function segmentProps(selected: boolean): {
28 variant: ButtonVariants["variant"];
29 insetShadow: boolean;
30 class?: string;
31 } {
32 return selected
33 ? { variant: "default", insetShadow: true }
34 : { variant: "ghost", insetShadow: false, class: "text-foreground-default" };
35 }
36</script>
37
38<script lang="ts">
39 import type { Snippet } from "svelte";
40
41 interface Props {
42 spaced?: ButtonGroupVariants["spaced"];
43 class?: string;
44 children: Snippet;
45 }
46
47 let { spaced = false, class: className, children, ...rest }: Props = $props();
48
49 const classes = $derived(buttonGroup({ spaced, class: className }));
50</script>
51
52<div class={classes} {...rest}>
53 {@render children()}
54</div>