Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243<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>