gpx.studio/website/src/lib/components/ui/toggle-group/toggle-group-item.svelte

31 lines
809 B
Svelte

<script lang="ts">
import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
import { type ToggleVariants, getToggleGroupCtx } from "./index.js";
import { cn } from "$lib/utils.js";
import { toggleVariants } from "$lib/components/ui/toggle/index.js";
type $$Props = ToggleGroupPrimitive.ItemProps & ToggleVariants;
let className: string | undefined | null = undefined;
export { className as class };
export let variant: $$Props["variant"] = "default";
export let size: $$Props["size"] = "default";
export let value: $$Props["value"];
const ctx = getToggleGroupCtx();
</script>
<ToggleGroupPrimitive.Item
class={cn(
toggleVariants({
variant: ctx.variant || variant,
size: ctx.size || size,
}),
className
)}
{value}
{...$$restProps}
>
<slot />
</ToggleGroupPrimitive.Item>