compote-ui 0.46.4 → 0.47.1

package/dist/components/combobox/combobox.svelte

@@ -3,6 +3,8 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { useFilter } from '@ark-ui/svelte/locale';
 	import { Portal } from '@ark-ui/svelte/portal';
+	import { createVirtualizer } from '@tanstack/svelte-virtual';
+	import { untrack } from 'svelte';
 	import type { ComboboxProps } from './types';
 	import { createListCollection, type ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
@@ -18,26 +20,22 @@
 		readOnly,
 		multiple,
 		loading = false,
+		virtualized = false,
 		class: className,
 		onValueChange,
 		...restProps
 	}: ComboboxProps<T> = $props();
 
-	// Client-side filtering state
 	let filterText = $state('');
-	const filters = useFilter({ sensitivity: 'base' });
 
-	// Base collection — only rebuilds when items prop changes
+	const filters = useFilter({ sensitivity: 'base' });
 	const baseCollection = $derived(createListCollection(items));
-
-	// Filtered view — lightweight .filter() on keystroke, full collection when empty
 	const collection = $derived(
 		filterText
 			? baseCollection.filter((itemString) => filters().contains(itemString, filterText))
 			: baseCollection
 	);
 
-	// Handle input change — only filter on actual user typing, not on selection/clear events
 	function handleInputChange(details: Combobox.InputValueChangeDetails) {
 		if (details.reason === 'input-change') {
 			filterText = details.inputValue;
@@ -78,6 +76,29 @@
 		}
 		onValueChange?.(details);
 	}
+
+	let contentRef = $state<HTMLDivElement | null>(null);
+
+	const virtualizer = createVirtualizer({
+		get count() {
+			return virtualized ? collection.size : 0;
+		},
+		getScrollElement: () => contentRef,
+		estimateSize: () => 36,
+		overscan: 10
+	});
+
+	$effect(() => {
+		const count = virtualized ? collection.size : 0;
+		const scrollElement = contentRef;
+
+		if (!scrollElement) return;
+
+		untrack(() => {
+			$virtualizer.setOptions({ ...$virtualizer.options, count });
+			$virtualizer.measure();
+		});
+	});
 </script>
 
 <Combobox.Root
@@ -86,6 +107,9 @@
 	inputValue={controlledInputValue}
 	onValueChange={handleValueChange}
 	onInputValueChange={handleInputChange}
+	scrollToIndexFn={virtualized
+		? (d) => $virtualizer.scrollToIndex(d.index, { align: 'center' })
+		: undefined}
 	openOnClick
 	{multiple}
 	{readOnly}
@@ -140,31 +164,78 @@
 	<Portal>
 		<Combobox.Positioner class="data-[state=closed]:pointer-events-none">
 			<Combobox.Content
-				class="z-200 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-document p-1 shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0  data-[state=open]:zoom-in-95"
+				class={cn(
+					'z-200 min-w-(--reference-width) rounded-md border bg-surface-document p-1 shadow-md',
+					'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+					'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+					virtualized ? 'overflow-hidden' : 'max-h-60 overflow-auto'
+				)}
 			>
-				{#if loading}
-					<div class="flex items-center justify-center py-4">
-						<span
-							class="size-5 animate-spin rounded-full border-2 border-surface-3 border-t-ink-dim"
-						></span>
-					</div>
+				{#if virtualized}
+					{#if loading}
+						<div class="flex items-center justify-center py-4">
+							<span
+								class="size-5 animate-spin rounded-full border-2 border-surface-3 border-t-ink-dim"
+							></span>
+						</div>
+					{:else if collection.size === 0}
+						<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
+							No results found
+						</Combobox.Empty>
+					{:else}
+						<div
+							bind:this={contentRef}
+							class="overflow-auto overscroll-contain"
+							style="height: min(15rem, {$virtualizer.getTotalSize()}px);"
+						>
+							<div
+								style="height: {$virtualizer.getTotalSize()}px; width: 100%; position: relative;"
+							>
+								{#each $virtualizer.getVirtualItems() as vItem (vItem.key)}
+									{@const item = collection.items[vItem.index]}
+									{#if item}
+										<Combobox.Item
+											{item}
+											aria-setsize={collection.size}
+											aria-posinset={vItem.index + 1}
+											style="position:absolute;top:0;left:0;width:100%;height:{vItem.size}px;transform:translateY({vItem.start}px)"
+											class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-1 data-[state=checked]:bg-surface-1"
+										>
+											<Combobox.ItemText>{item.label}</Combobox.ItemText>
+											<Combobox.ItemIndicator class="absolute right-2 items-center justify-center">
+												<PhCheck class="size-3.5" />
+											</Combobox.ItemIndicator>
+										</Combobox.Item>
+									{/if}
+								{/each}
+							</div>
+						</div>
+					{/if}
 				{:else}
-					<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
-						No results found
-					</Combobox.Empty>
-				{/if}
+					{#if loading}
+						<div class="flex items-center justify-center py-4">
+							<span
+								class="size-5 animate-spin rounded-full border-2 border-surface-3 border-t-ink-dim"
+							></span>
+						</div>
+					{:else}
+						<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
+							No results found
+						</Combobox.Empty>
+					{/if}
 
-				{#each loading ? [] : collection.items as item (item.value)}
-					<Combobox.Item
-						{item}
-						class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-1 data-[state=checked]:bg-surface-1"
-					>
-						<Combobox.ItemText>{item.label}</Combobox.ItemText>
-						<Combobox.ItemIndicator class="absolute right-2 items-center justify-center">
-							<PhCheck class="size-3.5" />
-						</Combobox.ItemIndicator>
-					</Combobox.Item>
-				{/each}
+					{#each loading ? [] : collection.items as item (item.value)}
+						<Combobox.Item
+							{item}
+							class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-1 data-[state=checked]:bg-surface-1"
+						>
+							<Combobox.ItemText>{item.label}</Combobox.ItemText>
+							<Combobox.ItemIndicator class="absolute right-2 items-center justify-center">
+								<PhCheck class="size-3.5" />
+							</Combobox.ItemIndicator>
+						</Combobox.Item>
+					{/each}
+				{/if}
 			</Combobox.Content>
 		</Combobox.Positioner>
 	</Portal>

package/dist/components/combobox/types.d.ts

@@ -9,5 +9,6 @@ export interface ComboboxProps<T extends ListItem> extends Omit<ComboboxRootBase
     multiple?: boolean;
     layout?: 'vertical' | 'horizontal';
     loading?: boolean;
+    virtualized?: boolean;
     class?: string;
 }

package/dist/components/data-table-v8/index.d.ts

@@ -3,10 +3,10 @@ export { createTable } from './create-table.svelte';
 export { renderComponent, renderSnippet } from './render-helpers';
 export { default as FlexRender } from './flex-render.svelte';
 export { default as Root } from './data-table.svelte';
-export { default as Toolbar } from './data-table-toolbar.svelte';
 export { default as Title } from './data-table-title.svelte';
-export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
-export { default as ColumnFilter } from './data-table-column-filter.svelte';
-export { default as Search } from './data-table-search.svelte';
+export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
+export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
+export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
+export { default as Search } from './toolbar/data-table-search.svelte';
 export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
 export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/data-table-v8/index.js

@@ -3,8 +3,8 @@ export { createTable } from './create-table.svelte';
 export { renderComponent, renderSnippet } from './render-helpers';
 export { default as FlexRender } from './flex-render.svelte';
 export { default as Root } from './data-table.svelte';
-export { default as Toolbar } from './data-table-toolbar.svelte';
 export { default as Title } from './data-table-title.svelte';
-export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
-export { default as ColumnFilter } from './data-table-column-filter.svelte';
-export { default as Search } from './data-table-search.svelte';
+export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
+export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
+export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
+export { default as Search } from './toolbar/data-table-search.svelte';

package/dist/components/data-table-v8/{data-table-column-filter.svelte → toolbar/data-table-column-filter.svelte}

@@ -1,13 +1,13 @@
 <script lang="ts" generics="T extends RowData">
 	import { onDestroy } from 'svelte';
 	import type { Column, RowData } from '@tanstack/table-core';
-	import * as Popover from '../popover';
-	import * as ScrollArea from '../scroll-area';
-	import Checkbox from '../checkbox/checkbox.svelte';
+	import * as Popover from '../../popover';
+	import * as ScrollArea from '../../scroll-area';
+	import Checkbox from '../../checkbox/checkbox.svelte';
 	import { cn } from 'tailwind-variants';
-	import { getReactiveTableState, type DataTableInstance } from './data-table-utils';
-	import NumberInput from '../number-input/number-input.svelte';
-	import * as Field from '../field';
+	import { getReactiveTableState, type DataTableInstance } from '../data-table-utils';
+	import NumberInput from '../../number-input/number-input.svelte';
+	import * as Field from '../../field';
 
 	type Props = {
 		table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-column-filter.svelte.d.ts → toolbar/data-table-column-filter.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/table-core';
-import { type DataTableInstance } from './data-table-utils';
+import { type DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-column-visibility.svelte → toolbar/data-table-column-visibility.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T extends RowData">
 	import type { RowData } from '@tanstack/table-core';
-	import * as Popover from '../popover';
-	import * as ScrollArea from '../scroll-area';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import { getReactiveTableState, type DataTableInstance } from './data-table-utils';
+	import * as Popover from '../../popover';
+	import * as ScrollArea from '../../scroll-area';
+	import Checkbox from '../../checkbox/checkbox.svelte';
+	import { getReactiveTableState, type DataTableInstance } from '../data-table-utils';
 
 	type Props = {
 		table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-column-visibility.svelte.d.ts → toolbar/data-table-column-visibility.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/table-core';
-import { type DataTableInstance } from './data-table-utils';
+import { type DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-search.svelte → toolbar/data-table-search.svelte}

@@ -2,9 +2,9 @@
 	import { onDestroy } from 'svelte';
 	import type { RowData } from '@tanstack/table-core';
 	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhMagnifyingGlass, PhX } from '../../icons';
-	import * as Field from '../field';
-	import { getReactiveTableState, type DataTableInstance } from './data-table-utils';
+	import { PhMagnifyingGlass, PhX } from '../../../icons';
+	import * as Field from '../../field';
+	import { getReactiveTableState, type DataTableInstance } from '../data-table-utils';
 
 	type Props = {
 		table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-search.svelte.d.ts → toolbar/data-table-search.svelte.d.ts}

@@ -1,6 +1,6 @@
 import type { RowData } from '@tanstack/table-core';
 import { type ClassValue } from 'tailwind-variants';
-import { type DataTableInstance } from './data-table-utils';
+import { type DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-virtual-rows.svelte → virtual/data-table-virtual-rows.svelte}

@@ -3,9 +3,9 @@
 	import { createVirtualizer } from '@tanstack/svelte-virtual';
 	import { untrack } from 'svelte';
 	import { cn } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
-	import type { DataTableInstance } from './data-table-utils';
-	import FlexRender from './flex-render.svelte';
+	import { PhArrowSquareOut, PhCheck, PhX } from '../../../icons';
+	import type { DataTableInstance } from '../data-table-utils';
+	import FlexRender from '../flex-render.svelte';
 	import {
 		alignClass,
 		getBooleanCellValue,
@@ -20,7 +20,7 @@
 		virtualColumnSizeStyle,
 		virtualGrowColumnSizeStyle,
 		virtualSelectionColumnSizeStyle
-	} from './data-table-utils';
+	} from '../data-table-utils';
 
 	type Props = {
 		rows: Row<T>[];

package/dist/components/data-table-v8/{data-table-virtual-rows.svelte.d.ts → virtual/data-table-virtual-rows.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Row, RowData } from '@tanstack/table-core';
-import type { DataTableInstance } from './data-table-utils';
+import type { DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         rows: Row<T>[];

package/dist/components/data-table-v8/{data-table-virtualized.svelte → virtual/data-table-virtualized.svelte}

@@ -2,15 +2,15 @@
 	import type { RowData } from '@tanstack/table-core';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { DataTableInstance } from './data-table-utils';
-	import DataTableHead from './data-table-head.svelte';
+	import type { DataTableInstance } from '../data-table-utils';
+	import DataTableHead from '../data-table-head.svelte';
 	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
 	import {
 		getAllRowsSelectionState,
 		getReactiveTableState,
 		getSelectedRowCount,
 		tableSizeStyle
-	} from './data-table-utils';
+	} from '../data-table-utils';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
 		table: DataTableInstance<T>;

package/dist/components/data-table-v8/{data-table-virtualized.svelte.d.ts → virtual/data-table-virtualized.svelte.d.ts}

@@ -1,7 +1,7 @@
 import type { RowData } from '@tanstack/table-core';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ClassValue } from 'tailwind-variants';
-import type { DataTableInstance } from './data-table-utils';
+import type { DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
         table: DataTableInstance<T>;

package/dist/components/data-table-v8/virtual/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Root } from '../data-table-virtualized.svelte';
+export { default as Root } from './data-table-virtualized.svelte';
 export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
 export type { CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase } from '../index';

package/dist/components/data-table-v8/virtual/index.js

@@ -1,2 +1,2 @@
-export { default as Root } from '../data-table-virtualized.svelte';
+export { default as Root } from './data-table-virtualized.svelte';
 export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';

package/dist/components/number-input/number-input.svelte

@@ -28,7 +28,7 @@
 	{...restProps}
 	allowMouseWheel
 	locale={locale().locale}
-	value={value?.toString()}
+	value={value != null ? new Intl.NumberFormat(locale().locale, { useGrouping: false, maximumFractionDigits: 20 }).format(value) : undefined}
 	readOnly={readonly}
 	onValueChange={(valueChangeDetails) => {
 		onValueChange?.(valueChangeDetails);

package/dist/components/toggle/toggle.svelte

@@ -8,10 +8,15 @@
 		children,
 		pressed = $bindable(),
 		size,
+		icon,
 		...rootProps
 	}: ToggleProps = $props();
 </script>
 
-<ArkToggle.Root {...rootProps} bind:pressed class={toggle({ size, class: className as never })}>
+<ArkToggle.Root
+	{...rootProps}
+	bind:pressed
+	class={toggle({ size, icon, class: className as never })}
+>
 	{@render children?.()}
 </ArkToggle.Root>

package/dist/components/toggle/toggle.variants.d.ts

@@ -5,17 +5,26 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    icon: {
+        true: string;
+    };
 }, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0", {
     size: {
         sm: string;
         md: string;
         lg: string;
     };
+    icon: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
         md: string;
         lg: string;
     };
+    icon: {
+        true: string;
+    };
 }, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ToggleSize = NonNullable<VariantProps<typeof toggle>['size']>;

package/dist/components/toggle/toggle.variants.js

@@ -5,8 +5,16 @@ export const toggle = tv({
         size: {
             sm: 'h-7 min-w-7 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
             md: 'h-8 min-w-8 gap-1.5 px-2 text-sm [&_svg]:size-4',
-            lg: 'h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5'
+            lg: 'h-9 min-w-9 gap-2 px-2.5 text-sm [&_svg]:size-5'
+        },
+        icon: {
+            true: ''
         }
     },
+    compoundVariants: [
+        { size: 'sm', icon: true, class: 'w-7 px-0 [&_svg]:size-5' },
+        { size: 'md', icon: true, class: 'w-8 px-0 [&_svg]:size-6' },
+        { size: 'lg', icon: true, class: 'w-9 px-0 [&_svg]:size-7' }
+    ],
     defaultVariants: { size: 'md' }
 });

package/dist/components/toggle/types.d.ts

@@ -4,5 +4,6 @@ import type { ToggleSize } from './toggle.variants';
 export interface ToggleProps extends ToggleRootProps {
     class?: ClassValue | null;
     size?: ToggleSize;
+    icon?: boolean;
 }
 export type { ToggleSize };

package/dist/components/toggle-group/toggle-group-context.d.ts

@@ -1,8 +1,15 @@
 import type { ToggleSize } from '../toggle/toggle.variants';
+export type ToggleGroupVariant = 'outline' | 'ghost';
 export declare const getToggleGroupContext: () => {
     readonly size: ToggleSize;
+    readonly variant: ToggleGroupVariant;
+    readonly icon: boolean;
 }, setToggleGroupContext: (context: {
     readonly size: ToggleSize;
+    readonly variant: ToggleGroupVariant;
+    readonly icon: boolean;
 }) => {
     readonly size: ToggleSize;
+    readonly variant: ToggleGroupVariant;
+    readonly icon: boolean;
 };

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

@@ -8,16 +8,20 @@
 	interface Props extends ToggleGroupItemBaseProps {
 		class?: ClassValue | null;
 		size?: ToggleSize;
+		icon?: boolean;
 	}
 
-	let { class: className, children, size, ...rest }: Props = $props();
+	let { class: className, children, size, icon, ...rest }: Props = $props();
 	const groupContext = getToggleGroupContext();
 	const itemSize = $derived(size ?? groupContext.size);
+	const itemIcon = $derived(icon ?? groupContext.icon);
+	const itemClass = $derived(
+		groupContext.variant === 'ghost'
+			? toggle({ size: itemSize, icon: itemIcon, class: className as never })
+			: toggle({ size: itemSize, icon: itemIcon, class: ['rounded-none', className] as never })
+	);
 </script>
 
-<ToggleGroup.Item
-	{...rest}
-	class={toggle({ size: itemSize, class: ['rounded-none', className] as never })}
->
+<ToggleGroup.Item {...rest} class={itemClass}>
 	{@render children?.()}
 </ToggleGroup.Item>

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

@@ -4,6 +4,7 @@ import { type ToggleSize } from '../toggle/toggle.variants';
 interface Props extends ToggleGroupItemBaseProps {
     class?: ClassValue | null;
     size?: ToggleSize;
+    icon?: boolean;
 }
 declare const ToggleGroupItem: import("svelte").Component<Props, {}, "">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;

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

@@ -3,11 +3,13 @@
 	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
 	import { cn } from 'tailwind-variants';
 	import type { ToggleSize } from '../toggle/toggle.variants';
-	import { setToggleGroupContext } from './toggle-group-context';
+	import { setToggleGroupContext, type ToggleGroupVariant } from './toggle-group-context';
 
 	interface Props extends ToggleGroupRootBaseProps {
 		class?: string;
 		size?: ToggleSize;
+		variant?: ToggleGroupVariant;
+		icon?: boolean;
 	}
 
 	let {
@@ -15,23 +17,36 @@
 		children,
 		value = $bindable(),
 		size = 'md',
+		variant = 'outline',
+		icon = false,
 		...rootProps
 	}: Props = $props();
 
 	setToggleGroupContext({
 		get size() {
 			return size;
+		},
+		get variant() {
+			return variant;
+		},
+		get icon() {
+			return icon;
 		}
 	});
+
+	const rootClass = $derived(
+		variant === 'ghost'
+			? cn(
+					'inline-flex w-fit gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-1',
+					className
+				)
+			: cn(
+					'inline-flex w-fit rounded border border-border data-[orientation=vertical]:flex-col [&>:not([hidden])~:not([hidden])]:border-border data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-s data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-e-0 data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-t data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-b-0',
+					className
+				)
+	);
 </script>
 
-<ToggleGroup.Root
-	{...rootProps}
-	bind:value
-	class={cn(
-		'inline-flex w-fit rounded border border-border data-[orientation=vertical]:flex-col [&>:not([hidden])~:not([hidden])]:border-border data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-s data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-e-0 data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-t data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-b-0',
-		className
-	)}
->
+<ToggleGroup.Root {...rootProps} bind:value class={rootClass}>
 	{@render children?.()}
 </ToggleGroup.Root>

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

@@ -1,9 +1,12 @@
 import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
 import type { ToggleSize } from '../toggle/toggle.variants';
+import { type ToggleGroupVariant } from './toggle-group-context';
 interface Props extends ToggleGroupRootBaseProps {
     class?: string;
     size?: ToggleSize;
+    variant?: ToggleGroupVariant;
+    icon?: boolean;
 }
 declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.46.4",
+	"version": "0.47.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",