@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.12

package/dist/components/primitives/slider/slider.svelte.d.ts

@@ -1,5 +1,9 @@
 import { Slider as SliderPrimitive } from 'bits-ui';
 import { type WithoutChildrenOrChild } from '../../../utils.js';
-declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+type $$ComponentProps = WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
+    /** Id of the element naming the thumbs, which carry the slider role. */
+    thumbLabelledby?: string;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/components/primitives/sonner/sonner.svelte

@@ -7,7 +7,7 @@
 
 <Sonner
 	theme={mode.current}
-	class="toaster group"
+	class="group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
 />

package/dist/components/primitives/spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

package/dist/components/primitives/spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

package/dist/components/primitives/spinner/spinner.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import { cn } from '../../../utils.js';
+	import type { SVGAttributes } from 'svelte/elements';
+
+	let {
+		class: className,
+		role = 'status',
+		// we add name, color, and stroke for compatibility with different icon libraries props.
+		// only forward them when set, otherwise `stroke: undefined` overrides the icon's `currentColor`
+		name,
+		color,
+		stroke,
+		className: legacyClassName,
+		'aria-label': ariaLabel = 'Loading',
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon
+	{role}
+	{...name != null ? { name } : {}}
+	{...color != null ? { color } : {}}
+	{...stroke != null ? { stroke } : {}}
+	{...legacyClassName != null ? { className: legacyClassName } : {}}
+	aria-label={ariaLabel}
+	class={cn('size-4 animate-spin', className)}
+	{...restProps}
+/>

package/dist/components/primitives/spinner/spinner.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Spinner: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/primitives/switch/switch.svelte

@@ -15,7 +15,7 @@
 	bind:checked
 	data-slot="switch"
 	class={cn(
-		'peer w-8 shadow-xs inline-flex h-[1.15rem] shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
+		'peer w-8 shadow-xs h-4.5 inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
 		className
 	)}
 	{...restProps}
@@ -23,7 +23,7 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			'size-4 data-[state=unchecked]:translate-x-0 pointer-events-none block rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
+			'size-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-3.5 pointer-events-none block rounded-full bg-background ring-0 transition-transform dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
 		)}
 	/>
 </SwitchPrimitive.Root>

package/dist/components/primitives/tabs/tabs-list.svelte

@@ -1,16 +1,38 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const tabsListVariants = tv({
+		base: 'inline-flex items-center text-muted-foreground',
+		variants: {
+			variant: {
+				default: 'h-9 w-fit justify-center rounded-lg bg-muted p-0.75',
+				line: 'gap-1 px-2 w-full justify-start'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
+</script>
+
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from 'bits-ui';
 	import { cn } from '../../../utils.js';
 
-	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		...restProps
+	}: TabsPrimitive.ListProps & { variant?: TabsListVariant } = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	data-slot="tabs-list"
-	class={cn(
-		'h-9 inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
-		className
-	)}
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
 	{...restProps}
 />

package/dist/components/primitives/tabs/tabs-list.svelte.d.ts

@@ -1,4 +1,25 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
+        line: "gap-1 px-2 w-full justify-start";
+    };
+}, undefined, "inline-flex items-center text-muted-foreground", {
+    variant: {
+        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
+        line: "gap-1 px-2 w-full justify-start";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
+        line: "gap-1 px-2 w-full justify-start";
+    };
+}, undefined>>;
+export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: TabsListVariant;
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/components/primitives/tabs/tabs-trigger.svelte

@@ -1,3 +1,23 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const tabsTriggerVariants = tv({
+		base: "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default:
+					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground',
+				line: 'px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type TabsTriggerVariant = VariantProps<typeof tabsTriggerVariants>['variant'];
+</script>
+
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from 'bits-ui';
 	import { cn } from '../../../utils.js';
@@ -5,16 +25,14 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		variant = 'default',
 		...restProps
-	}: TabsPrimitive.TriggerProps = $props();
+	}: TabsPrimitive.TriggerProps & { variant?: TabsTriggerVariant } = $props();
 </script>
 
 <TabsPrimitive.Trigger
 	bind:ref
 	data-slot="tabs-trigger"
-	class={cn(
-		"gap-1.5 px-2 py-1 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center rounded-md border border-transparent whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
-	)}
+	class={cn(tabsTriggerVariants({ variant }), className)}
 	{...restProps}
 />

package/dist/components/primitives/tabs/tabs-trigger.svelte.d.ts

@@ -1,4 +1,25 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
+        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+    };
+}, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
+        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
+        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+    };
+}, undefined>>;
+export type TabsTriggerVariant = VariantProps<typeof tabsTriggerVariants>['variant'];
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.TriggerProps & {
+    variant?: TabsTriggerVariant;
+};
+declare const TabsTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsTrigger = ReturnType<typeof TabsTrigger>;
 export default TabsTrigger;

package/dist/components/primitives/tabs/tabs.svelte

@@ -6,14 +6,18 @@
 		ref = $bindable(null),
 		value = $bindable(''),
 		class: className,
+		variant = 'default',
 		...restProps
-	}: TabsPrimitive.RootProps = $props();
+	}: TabsPrimitive.RootProps & {
+		/** Match the list's variant: `line` tabs sit flush on their panel, so the gap goes. */
+		variant?: 'default' | 'line';
+	} = $props();
 </script>
 
 <TabsPrimitive.Root
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn('gap-2 flex flex-col', className)}
+	class={cn('flex flex-col', variant === 'line' ? 'gap-0' : 'gap-2', className)}
 	{...restProps}
 />

package/dist/components/primitives/tabs/tabs.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
+type $$ComponentProps = TabsPrimitive.RootProps & {
+    /** Match the list's variant: `line` tabs sit flush on their panel, so the gap goes. */
+    variant?: 'default' | 'line';
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/primitives/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
 		className
 	)}
 	bind:value

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <Select.Root type="single" bind:value>
-	<Select.Trigger class="gap-2 w-[140px]">
+	<Select.Trigger class="gap-2 w-35">
 		<Palette size={14} />
 		<span>{triggerContent}</span>
 	</Select.Trigger>

package/dist/components/primitives/toggle/index.d.ts

@@ -0,0 +1,3 @@
+import Root from './toggle.svelte';
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants } from './toggle.svelte';
+export { Root, Root as Toggle };

package/dist/components/primitives/toggle/index.js

@@ -0,0 +1,5 @@
+import Root from './toggle.svelte';
+export { toggleVariants } from './toggle.svelte';
+export { Root, 
+//
+Root as Toggle };

package/dist/components/primitives/toggle/toggle.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const toggleVariants = tv({
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-input hover:bg-muted border bg-transparent'
+			},
+			size: {
+				default:
+					'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				// Icon over a short label, so a row of options still fits a phone-width column.
+				stacked: 'min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+	export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = 'default',
+		variant = 'default',
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/dist/components/primitives/toggle/toggle.svelte.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-transparent";
+        outline: "border-input hover:bg-muted border bg-transparent";
+    };
+    size: {
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
+    };
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: "bg-transparent";
+        outline: "border-input hover:bg-muted border bg-transparent";
+    };
+    size: {
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-transparent";
+        outline: "border-input hover:bg-muted border bg-transparent";
+    };
+    size: {
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
+    };
+}, undefined>>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+import { Toggle as TogglePrimitive } from 'bits-ui';
+type $$ComponentProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/primitives/toggle-group/index.d.ts

@@ -0,0 +1,3 @@
+import Item from './toggle-group-item.svelte';
+import Root from './toggle-group.svelte';
+export { Root, Item, Root as ToggleGroup, Item as ToggleGroupItem };

package/dist/components/primitives/toggle-group/index.js

@@ -0,0 +1,5 @@
+import Item from './toggle-group-item.svelte';
+import Root from './toggle-group.svelte';
+export { Root, Item, 
+//
+Root as ToggleGroup, Item as ToggleGroupItem };

package/dist/components/primitives/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { type ToggleVariants, toggleVariants } from '../toggle/index.js';
+	import { cn } from '../../../utils.js';
+	import { getToggleGroupCtx } from './toggle-group.svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	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: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 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>

package/dist/components/primitives/toggle-group/toggle-group-item.svelte.d.ts

@@ -0,0 +1,6 @@
+import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+import { type ToggleVariants } from '../toggle/index.js';
+type $$ComponentProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/primitives/toggle-group/toggle-group.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+	import { toggleVariants } from '../toggle/index.js';
+	import type { VariantProps } from 'tailwind-variants';
+
+	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<Required<ToggleGroupContext>>('toggleGroup');
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		spacing = 0,
+		orientation = 'horizontal',
+		variant = 'default',
+		...restProps
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: 'horizontal' | 'vertical';
+		} = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		}
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+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: calc(var(--spacing) * {spacing})"
+	class={cn(
+		'group/toggle-group flex w-fit flex-row items-center gap-(--gap) rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-md',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/primitives/toggle-group/toggle-group.svelte.d.ts

@@ -0,0 +1,17 @@
+import { toggleVariants } from '../toggle/index.js';
+import type { VariantProps } from 'tailwind-variants';
+type ToggleVariants = VariantProps<typeof toggleVariants>;
+interface ToggleGroupContext extends ToggleVariants {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare function setToggleGroupCtx(props: ToggleGroupContext): void;
+export declare function getToggleGroupCtx(): Required<ToggleGroupContext>;
+import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants & {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;