compote-ui 0.46.5 → 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

@@ -13,6 +13,10 @@
 	}: ToggleProps = $props();
 </script>
 
-<ArkToggle.Root {...rootProps} bind:pressed class={toggle({ size, icon, 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-group/toggle-group-item.svelte

@@ -22,9 +22,6 @@
 	);
 </script>
 
-<ToggleGroup.Item
-	{...rest}
-	class={itemClass}
->
+<ToggleGroup.Item {...rest} class={itemClass}>
 	{@render children?.()}
 </ToggleGroup.Item>

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

@@ -36,7 +36,10 @@
 
 	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 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
@@ -44,10 +47,6 @@
 	);
 </script>
 
-<ToggleGroup.Root
-	{...rootProps}
-	bind:value
-	class={rootClass}
->
+<ToggleGroup.Root {...rootProps} bind:value class={rootClass}>
 	{@render children?.()}
 </ToggleGroup.Root>

package/package.json

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