compote-ui 0.46.5 → 0.47.2

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/toolbar/data-table-column-filter.svelte

@@ -0,0 +1,375 @@
+<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 { 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 { PhX, PhMagnifyingGlass } from '../../../icons';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		triggerLabel?: string;
+	};
+
+	let { table, triggerLabel = 'Filters' }: Props = $props();
+
+	let localText: Record<string, string> = $state({});
+	let localNumMin: Record<string, number> = $state({});
+	let localNumMax: Record<string, number> = $state({});
+	let localSelectSearch: Record<string, string> = $state({});
+	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
+
+	const columnFilters = $derived(getReactiveTableState(table).columnFilters);
+	const activeCount = $derived(columnFilters.length);
+
+	let activeFilterIds: string[] = $derived(columnFilters.map((f) => f.id));
+	let showColumnPicker = $state(false);
+	let columnSearchText = $state('');
+
+	const activeColumns = $derived.by(() => {
+		getReactiveTableState(table);
+		return activeFilterIds
+			.map((id) => table.getColumn(id))
+			.filter((col): col is Column<T, unknown> => col != null);
+	});
+
+	const availableColumns = $derived.by(() => {
+		getReactiveTableState(table);
+		return table
+			.getAllLeafColumns()
+			.filter((col) => col.getCanFilter() && !activeFilterIds.includes(col.id))
+			.filter(
+				(col) =>
+					!columnSearchText ||
+					getColumnLabel(col).toLowerCase().includes(columnSearchText.toLowerCase())
+			);
+	});
+
+	onDestroy(() => {
+		Object.values(timers).forEach(clearTimeout);
+	});
+
+	function getColumnType(column: Column<T, unknown>): string | undefined {
+		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
+			| string
+			| undefined;
+	}
+
+	function getColumnLabel(column: Column<T, unknown>): string {
+		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+	}
+
+	function addFilter(column: Column<T, unknown>) {
+		activeFilterIds = [...activeFilterIds, column.id];
+		showColumnPicker = false;
+		columnSearchText = '';
+	}
+
+	function removeFilter(column: Column<T, unknown>) {
+		activeFilterIds = activeFilterIds.filter((id) => id !== column.id);
+		column.setFilterValue(undefined);
+		delete localText[column.id];
+		delete localNumMin[column.id];
+		delete localNumMax[column.id];
+		delete localSelectSearch[column.id];
+		clearTimeout(timers[column.id]);
+		clearTimeout(timers[`${column.id}_min`]);
+		clearTimeout(timers[`${column.id}_max`]);
+	}
+
+	function clearFilters() {
+		Object.values(timers).forEach(clearTimeout);
+		for (const key of Object.keys(timers)) delete timers[key];
+		localText = {};
+		localNumMin = {};
+		localNumMax = {};
+		localSelectSearch = {};
+		showColumnPicker = false;
+		columnSearchText = '';
+		table.resetColumnFilters();
+	}
+
+	function handleTextInput(column: Column<T, unknown>, value: string) {
+		localText[column.id] = value;
+		clearTimeout(timers[column.id]);
+		timers[column.id] = setTimeout(() => {
+			column.setFilterValue(value || undefined);
+		}, 300);
+	}
+
+	function handleNumericInput(
+		column: Column<T, unknown>,
+		which: 'min' | 'max',
+		value: number | null
+	) {
+		if (value === null) {
+			if (which === 'min') delete localNumMin[column.id];
+			else delete localNumMax[column.id];
+		} else {
+			if (which === 'min') localNumMin[column.id] = value;
+			else localNumMax[column.id] = value;
+		}
+		clearTimeout(timers[`${column.id}_${which}`]);
+		timers[`${column.id}_${which}`] = setTimeout(() => {
+			const min = localNumMin[column.id];
+			const max = localNumMax[column.id];
+			column.setFilterValue(min === undefined && max === undefined ? undefined : [min, max]);
+		}, 300);
+	}
+
+	function getSelectValues(column: Column<T, unknown>): string[] {
+		return (column.getFilterValue() as string[] | undefined) ?? [];
+	}
+
+	function handleSelectChange(column: Column<T, unknown>, value: string, checked: boolean) {
+		const current = getSelectValues(column);
+		const next = checked ? [...current, value] : current.filter((v) => v !== value);
+		column.setFilterValue(next.length ? next : undefined);
+	}
+
+	function getFacetedValues(column: Column<T, unknown>): string[] {
+		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
+	}
+
+	function getFacetedMinMax(column: Column<T, unknown>): [number | undefined, number | undefined] {
+		const vals = column.getFacetedMinMaxValues();
+		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
+	}
+
+	function getColumnFormatOptions(
+		column: Column<T, unknown>
+	): Intl.NumberFormatOptions | undefined {
+		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
+			| Intl.NumberFormatOptions
+			| undefined;
+	}
+</script>
+
+<Popover.Root positioning={{ placement: 'bottom-end' }}>
+	<Popover.Trigger
+		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+	>
+		{triggerLabel}
+		{#if activeCount > 0}
+			({activeCount})
+		{/if}
+	</Popover.Trigger>
+
+	<Popover.Content class="w-72 p-0" showArrow={false}>
+		<div class="flex items-center justify-between px-3 py-2.5">
+			<span class="text-sm font-medium text-ink">Filters</span>
+			{#if activeCount > 0}
+				<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
+					Clear all
+				</button>
+			{/if}
+		</div>
+
+		{#if activeColumns.length > 0}
+			<div class="overflow-hidden border-t border-surface-3">
+				<ScrollArea.Root class="h-96">
+					<ScrollArea.Viewport>
+						<ScrollArea.Content>
+							{#each activeColumns as column (column.id)}
+								<div class="border border-surface-3 p-3">
+									<div class="mb-2 flex items-center justify-between">
+										<span class="text-sm font-medium text-ink">{getColumnLabel(column)}</span>
+										<button
+											type="button"
+											onclick={() => removeFilter(column)}
+											class="text-ink-dim transition-colors hover:text-ink"
+										>
+											<PhX class="size-3.5" />
+										</button>
+									</div>
+
+									{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
+										{@const [facetMin, facetMax] = getFacetedMinMax(column)}
+										{@const colFormatOptions = getColumnFormatOptions(column)}
+										<div class="flex flex-col gap-1.5">
+											<div class="min-w-0 flex-1">
+												<NumberInput
+													layout="horizontal"
+													label="From"
+													value={localNumMin[column.id] ?? facetMin ?? null}
+													min={facetMin}
+													max={facetMax}
+													formatOptions={colFormatOptions}
+													onValueChange={({ valueAsNumber }) =>
+														handleNumericInput(
+															column,
+															'min',
+															isNaN(valueAsNumber) ? null : valueAsNumber
+														)}
+												/>
+											</div>
+											<div class="min-w-0 flex-1">
+												<NumberInput
+													layout="horizontal"
+													label="To"
+													value={localNumMax[column.id] ?? facetMax ?? null}
+													min={facetMin}
+													max={facetMax}
+													formatOptions={colFormatOptions}
+													onValueChange={({ valueAsNumber }) =>
+														handleNumericInput(
+															column,
+															'max',
+															isNaN(valueAsNumber) ? null : valueAsNumber
+														)}
+												/>
+											</div>
+										</div>
+									{:else if getColumnType(column) === 'boolean'}
+										{@const boolFilter = column.getFilterValue() as boolean | undefined}
+										<div class="flex overflow-hidden rounded border border-border text-xs">
+											<button
+												type="button"
+												onclick={() => column.setFilterValue(undefined)}
+												class={cn(
+													'flex-1 px-2 py-1',
+													boolFilter === undefined
+														? 'bg-surface-3 font-medium text-ink'
+														: 'text-ink-dim hover:bg-surface-2'
+												)}
+											>
+												All
+											</button>
+											<button
+												type="button"
+												onclick={() =>
+													column.setFilterValue(boolFilter === true ? undefined : true)}
+												class={cn(
+													'flex-1 border-x border-border px-2 py-1',
+													boolFilter === true
+														? 'bg-surface-3 font-medium text-ink'
+														: 'text-ink-dim hover:bg-surface-2'
+												)}
+											>
+												Yes
+											</button>
+											<button
+												type="button"
+												onclick={() =>
+													column.setFilterValue(boolFilter === false ? undefined : false)}
+												class={cn(
+													'flex-1 px-2 py-1',
+													boolFilter === false
+														? 'bg-surface-3 font-medium text-ink'
+														: 'text-ink-dim hover:bg-surface-2'
+												)}
+											>
+												No
+											</button>
+										</div>
+									{:else if getColumnType(column) === 'select'}
+										{@const allOptions = getFacetedValues(column)}
+										{@const search = localSelectSearch[column.id] ?? ''}
+										{@const options = search
+											? allOptions.filter((o) => o.toLowerCase().includes(search.toLowerCase()))
+											: allOptions}
+										{@const selected = getSelectValues(column)}
+										<div class="flex flex-col gap-1">
+											<Field.Root>
+												<Field.Input
+													placeholder="Search..."
+													value={search}
+													oninput={(e: Event) => {
+														localSelectSearch[column.id] = (
+															e.currentTarget as HTMLInputElement
+														).value;
+													}}
+												/>
+											</Field.Root>
+											<div class="max-h-44 overflow-hidden">
+												<ScrollArea.Root class="h-full">
+													<ScrollArea.Viewport>
+														<ScrollArea.Content>
+															<div class="flex flex-col gap-0.5">
+																{#each options as option (option)}
+																	<Checkbox
+																		size="sm"
+																		label={option}
+																		class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
+																		checked={selected.includes(option)}
+																		onCheckedChange={({ checked }) =>
+																			handleSelectChange(column, option, checked === true)}
+																	/>
+																{/each}
+															</div>
+														</ScrollArea.Content>
+													</ScrollArea.Viewport>
+													<ScrollArea.Scrollbar orientation="vertical">
+														<ScrollArea.Thumb />
+													</ScrollArea.Scrollbar>
+													<ScrollArea.Corner />
+												</ScrollArea.Root>
+											</div>
+										</div>
+									{:else}
+										<Field.Root>
+											<Field.Input
+												placeholder="Search..."
+												value={localText[column.id] ?? ''}
+												oninput={(e: Event) =>
+													handleTextInput(column, (e.currentTarget as HTMLInputElement).value)}
+											/>
+										</Field.Root>
+									{/if}
+								</div>
+							{/each}
+						</ScrollArea.Content>
+					</ScrollArea.Viewport>
+					<ScrollArea.Scrollbar orientation="vertical">
+						<ScrollArea.Thumb />
+					</ScrollArea.Scrollbar>
+					<ScrollArea.Corner />
+				</ScrollArea.Root>
+			</div>
+		{/if}
+
+		{#if showColumnPicker}
+			<div class="border-t border-surface-3 p-3">
+				<div class="relative mb-1">
+					<PhMagnifyingGlass
+						class="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-ink-dim"
+					/>
+					<input
+						type="text"
+						placeholder="Search columns..."
+						bind:value={columnSearchText}
+						class="h-8 w-full rounded border border-border bg-surface-1 pr-3 pl-7 text-sm text-ink outline-none placeholder:text-ink-dim focus:ring-1 focus:ring-ring"
+					/>
+				</div>
+				<div class="max-h-48 overflow-y-auto">
+					{#each availableColumns as column (column.id)}
+						<button
+							type="button"
+							onclick={() => addFilter(column)}
+							class="w-full rounded px-2 py-1.5 text-left text-sm text-ink hover:bg-surface-2"
+						>
+							{getColumnLabel(column)}
+						</button>
+					{:else}
+						<p class="px-2 py-3 text-center text-sm text-ink-dim">No more columns</p>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div class="border-t border-surface-3">
+				<button
+					type="button"
+					onclick={() => (showColumnPicker = true)}
+					class="flex w-full items-center gap-2 px-3 py-2.5 text-sm text-ink-dim hover:bg-surface-2 hover:text-ink"
+				>
+					<span class="text-base leading-none">+</span>
+					Add Filter
+				</button>
+			</div>
+		{/if}
+	</Popover.Content>
+</Popover.Root>

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/drawer/drawer-root.svelte

@@ -2,13 +2,20 @@
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
 
-	interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
+	interface Props extends Omit<DrawerRootProps, 'open'> {
 		open?: boolean;
 	}
 
-	let { children, open = $bindable(), ...rest }: Props = $props();
+	let { children, open = $bindable(), onOpenChange, ...rest }: Props = $props();
 </script>
 
-<Drawer.Root bind:open {...rest}>
+<Drawer.Root
+	{open}
+	onOpenChange={(details) => {
+		open = details.open;
+		onOpenChange?.(details);
+	}}
+	{...rest}
+>
 	{@render children?.()}
 </Drawer.Root>

package/dist/components/drawer/drawer-root.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
-interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
+interface Props extends Omit<DrawerRootProps, 'open'> {
     open?: boolean;
 }
 declare const DrawerRoot: import("svelte").Component<Props, {}, "open">;

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

@@ -17,7 +17,7 @@
 	const locale = useLocaleContext();
 	const rootClass = $derived(
 		layout === 'horizontal'
-			? 'flex items-center gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
+			? 'flex items-center gap-1.5 justify-between w-full w-full data-disabled:opacity-50 data-disabled:grayscale'
 			: 'flex flex-col gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
 	);
 </script>
@@ -28,7 +28,12 @@
 	{...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);
@@ -48,7 +53,7 @@
 	{/if}
 	<NumberInput.Control class="relative isolate">
 		<NumberInput.Input
-			class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+			class="h-9 max-w-40 rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
 		/>
 		<div
 			class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"

package/dist/components/scroll-area/scroll-area-content.svelte

@@ -10,6 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<ScrollArea.Content {...rest} class={cn('py-3 ps-4 pe-6', className)}>
+<ScrollArea.Content {...rest} class={cn('p-3', className)}>
 	{@render children?.()}
 </ScrollArea.Content>

package/dist/components/scroll-area/scroll-area-scrollbar.svelte

@@ -13,7 +13,7 @@
 <ScrollArea.Scrollbar
 	{...rest}
 	class={cn(
-		'group pointer-events-none relative m-2 flex rounded-md bg-well opacity-0 transition-opacity duration-150',
+		'group pointer-events-none relative m-1 flex rounded-md bg-well opacity-0 transition-opacity duration-150',
 		'data-hover:pointer-events-auto data-hover:opacity-100',
 		'data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0',
 		'data-[orientation=vertical]:w-1 data-[orientation=vertical]:[&:not([data-overflow-y])]:hidden',

package/dist/components/tabs/tabs.svelte

@@ -18,6 +18,7 @@
 		bind:value
 		{defaultValue}
 		{orientation}
+		lazyMount
 		class="flex data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
 	>
 		{@render children?.()}

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.2",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",

package/dist/components/data-table-v8/data-table-column-filter.svelte

@@ -1,248 +0,0 @@
-<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 { 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';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		triggerLabel?: string;
-	};
-
-	let { table, triggerLabel = 'Filters' }: Props = $props();
-
-	let localText: Record<string, string> = $state({});
-	let localNumMin: Record<string, number> = $state({});
-	let localNumMax: Record<string, number> = $state({});
-	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
-
-	const columnFilters = $derived(getReactiveTableState(table).columnFilters);
-	const activeCount = $derived(columnFilters.length);
-	const filterableColumns = $derived.by(() => {
-		getReactiveTableState(table);
-		return table.getAllLeafColumns().filter((col) => col.getCanFilter());
-	});
-
-	onDestroy(() => {
-		Object.values(timers).forEach(clearTimeout);
-	});
-
-	function getColumnType(column: Column<T, unknown>): string | undefined {
-		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
-			| string
-			| undefined;
-	}
-
-	function getColumnLabel(column: Column<T, unknown>): string {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-
-	function clearFilters() {
-		Object.values(timers).forEach(clearTimeout);
-		for (const key of Object.keys(timers)) delete timers[key];
-		localText = {};
-		localNumMin = {};
-		localNumMax = {};
-		table.resetColumnFilters();
-	}
-
-	function handleTextInput(column: Column<T, unknown>, value: string) {
-		localText[column.id] = value;
-		clearTimeout(timers[column.id]);
-		timers[column.id] = setTimeout(() => {
-			column.setFilterValue(value || undefined);
-		}, 300);
-	}
-
-	function handleNumericInput(
-		column: Column<T, unknown>,
-		which: 'min' | 'max',
-		value: number | null
-	) {
-		if (value === null) {
-			if (which === 'min') delete localNumMin[column.id];
-			else delete localNumMax[column.id];
-		} else {
-			if (which === 'min') localNumMin[column.id] = value;
-			else localNumMax[column.id] = value;
-		}
-		clearTimeout(timers[`${column.id}_${which}`]);
-		timers[`${column.id}_${which}`] = setTimeout(() => {
-			const min = localNumMin[column.id];
-			const max = localNumMax[column.id];
-			column.setFilterValue(min === undefined && max === undefined ? undefined : [min, max]);
-		}, 300);
-	}
-
-	function getSelectValues(column: Column<T, unknown>): string[] {
-		return (column.getFilterValue() as string[] | undefined) ?? [];
-	}
-
-	function handleSelectChange(column: Column<T, unknown>, value: string, checked: boolean) {
-		const current = getSelectValues(column);
-		const next = checked ? [...current, value] : current.filter((v) => v !== value);
-		column.setFilterValue(next.length ? next : undefined);
-	}
-
-	function getFacetedValues(column: Column<T, unknown>): string[] {
-		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
-	}
-
-	function getFacetedMinMax(column: Column<T, unknown>): [number | undefined, number | undefined] {
-		const vals = column.getFacetedMinMaxValues();
-		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
-	}
-
-	function getColumnFormatOptions(
-		column: Column<T, unknown>
-	): Intl.NumberFormatOptions | undefined {
-		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
-			| Intl.NumberFormatOptions
-			| undefined;
-	}
-</script>
-
-<Popover.Root positioning={{ placement: 'bottom-end' }}>
-	<Popover.Trigger
-		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-	>
-		{triggerLabel}
-		{#if activeCount > 0}
-			({activeCount})
-		{/if}
-	</Popover.Trigger>
-
-	<Popover.Content class="w-72 px-0" showArrow={false}>
-		<div class="mb-2 flex items-center justify-between px-4">
-			<span class="text-sm font-medium text-ink">Filters</span>
-			{#if activeCount > 0}
-				<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
-					Clear all
-				</button>
-			{/if}
-		</div>
-		<div class="mb-2 border-b border-surface-3"></div>
-
-		<ScrollArea.Root class="h-80">
-			<ScrollArea.Viewport>
-				<ScrollArea.Content>
-					{#each filterableColumns as column (column.id)}
-						<div class="mb-3">
-							<p class="mb-1 text-xs font-medium text-ink">{getColumnLabel(column)}</p>
-
-							{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
-								{@const [facetMin, facetMax] = getFacetedMinMax(column)}
-								{@const colFormatOptions = getColumnFormatOptions(column)}
-								<div class="flex gap-1.5">
-									<div class="min-w-0 flex-1">
-										<p class="mb-1 text-xs text-ink-dim">From</p>
-										<NumberInput
-											value={localNumMin[column.id] ?? facetMin ?? null}
-											min={facetMin}
-											max={facetMax}
-											formatOptions={colFormatOptions}
-											onValueChange={({ valueAsNumber }) =>
-												handleNumericInput(
-													column,
-													'min',
-													isNaN(valueAsNumber) ? null : valueAsNumber
-												)}
-										/>
-									</div>
-									<div class="min-w-0 flex-1">
-										<p class="mb-1 text-xs text-ink-dim">To</p>
-										<NumberInput
-											value={localNumMax[column.id] ?? facetMax ?? null}
-											min={facetMin}
-											max={facetMax}
-											formatOptions={colFormatOptions}
-											onValueChange={({ valueAsNumber }) =>
-												handleNumericInput(
-													column,
-													'max',
-													isNaN(valueAsNumber) ? null : valueAsNumber
-												)}
-										/>
-									</div>
-								</div>
-							{:else if getColumnType(column) === 'boolean'}
-								{@const boolFilter = column.getFilterValue() as boolean | undefined}
-								<div class="flex overflow-hidden rounded border border-border text-xs">
-									<button
-										type="button"
-										onclick={() => column.setFilterValue(undefined)}
-										class={cn(
-											'flex-1 px-2 py-1',
-											boolFilter === undefined
-												? 'bg-surface-3 font-medium text-ink'
-												: 'text-ink-dim hover:bg-surface-2'
-										)}
-									>
-										All
-									</button>
-									<button
-										type="button"
-										onclick={() => column.setFilterValue(boolFilter === true ? undefined : true)}
-										class={cn(
-											'flex-1 border-x border-border px-2 py-1',
-											boolFilter === true
-												? 'bg-surface-3 font-medium text-ink'
-												: 'text-ink-dim hover:bg-surface-2'
-										)}
-									>
-										Yes
-									</button>
-									<button
-										type="button"
-										onclick={() => column.setFilterValue(boolFilter === false ? undefined : false)}
-										class={cn(
-											'flex-1 px-2 py-1',
-											boolFilter === false
-												? 'bg-surface-3 font-medium text-ink'
-												: 'text-ink-dim hover:bg-surface-2'
-										)}
-									>
-										No
-									</button>
-								</div>
-							{:else if getColumnType(column) === 'select'}
-								{@const options = getFacetedValues(column)}
-								{@const selected = getSelectValues(column)}
-								<div class="flex flex-col gap-0.5">
-									{#each options as option (option)}
-										<Checkbox
-											size="sm"
-											label={option}
-											class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
-											checked={selected.includes(option)}
-											onCheckedChange={({ checked }) =>
-												handleSelectChange(column, option, checked === true)}
-										/>
-									{/each}
-								</div>
-							{:else}
-								<Field.Root>
-									<Field.Input
-										placeholder="Search..."
-										value={localText[column.id] ?? ''}
-										oninput={(e: Event) =>
-											handleTextInput(column, (e.currentTarget as HTMLInputElement).value)}
-									/>
-								</Field.Root>
-							{/if}
-						</div>
-					{/each}
-				</ScrollArea.Content>
-			</ScrollArea.Viewport>
-			<ScrollArea.Scrollbar orientation="vertical">
-				<ScrollArea.Thumb />
-			</ScrollArea.Scrollbar>
-			<ScrollArea.Corner />
-		</ScrollArea.Root>
-	</Popover.Content>
-</Popover.Root>