Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants"; import type { ButtonVariants } from "$lib/components/ui/Button.svelte";
export const buttonGroup = tv({ base: "inline-flex items-center", variants: { spaced: { true: "gap-2", false: [ "items-stretch gap-0 overflow-hidden rounded-sm border border-border-default bg-background-subtle dark:bg-background-canvas", "*:relative *:border-y-0", "[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px", "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]", "[&>*:not(:last-child)]:[--btn-radius-r:0px]", // a Dropdown keeps its trigger one level down, and the radius vars only // inherit that far — Button re-declares them on itself, so the wrapper's // value loses. reach the nested trigger directly. "[&>*>button]:border-y-0", "[&>*:not(:first-child)>button]:[--btn-radius-l:0px]", "[&>*:not(:last-child)>button]:[--btn-radius-r:0px]", "[&>*:not([data-variant=ghost])]:z-10", "[&>*:focus-visible]:-outline-offset-2" ] }, direction: { horizontal: [""], vertical: ["flex-col"] } }, defaultVariants: { spaced: false, direction: "horizontal" } });
export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
export function segmentProps(selected: boolean): { variant: ButtonVariants["variant"]; insetShadow: boolean; class?: string; } { return selected ? { variant: "default", insetShadow: true } : { variant: "ghost", insetShadow: false, class: "text-foreground-default" }; }</script>
<script lang="ts"> import type { Snippet } from "svelte";
interface Props { spaced?: ButtonGroupVariants["spaced"]; direction?: ButtonGroupVariants["direction"]; class?: string; children: Snippet; }
let { spaced = false, direction = "horizontal", class: className, children, ...rest }: Props = $props();
const classes = $derived(buttonGroup({ spaced, direction, class: className }));</script>
<div class={classes} {...rest}> {@render children()}</div>