update components

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

@@ -21,12 +21,13 @@
 	data-slot="toggle-group-item"
 	data-variant={ctx.variant || variant}
 	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
 	class={cn(
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size,
 		}),
-		"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
 		className
 	)}
 	{value}

website/src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -1,12 +1,21 @@
 <script lang="ts" module>
 	import { getContext, setContext } from "svelte";
-	import type { ToggleVariants } from "$lib/components/ui/toggle/index.js";
-	export function setToggleGroupCtx(props: ToggleVariants) {
+	import type { VariantProps } from "tailwind-variants";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
 		setContext("toggleGroup", props);
 	}
 
 	export function getToggleGroupCtx() {
-		return getContext<ToggleVariants>("toggleGroup");
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
 	}
 </script>
 
@@ -19,13 +28,29 @@
 		value = $bindable(),
 		class: className,
 		size = "default",
+		spacing = 0,
+		orientation = "horizontal",
 		variant = "default",
 		...restProps
-	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: "horizontal" | "vertical";
+		} = $props();
 
 	setToggleGroupCtx({
-		variant,
-		size,
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		},
 	});
 </script>
 
@@ -36,11 +61,14 @@ get along, so we shut typescript up by casting `value` to `never`.
 <ToggleGroupPrimitive.Root
 	bind:value={value as never}
 	bind:ref
+	{orientation}
 	data-slot="toggle-group"
 	data-variant={variant}
 	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
 	class={cn(
-		"group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md",
+		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
 		className
 	)}
 	{...restProps}