compote-ui 0.36.0 → 0.36.1

package/package.json

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

package/dist/components/data-table-old/core/cells.d.ts

@@ -1,78 +0,0 @@
-import type { AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellData, ColumnDef, DisplayColumnDef, GroupColumnDef, RowData } from '@tanstack/svelte-table';
-import type { DataTableFeatures } from './create-table.svelte';
-type NumericFormat = {
-    locale?: string;
-    minimumFractionDigits?: number;
-    maximumFractionDigits?: number;
-    fractionDigits?: number;
-};
-export type DataTableCellConfig<TData extends RowData = RowData, TValue = unknown> = ({
-    type: 'text';
-} & {
-    fallback?: string;
-}) | ({
-    type: 'number';
-} & NumericFormat) | ({
-    type: 'currency';
-    currency: string;
-    currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
-} & NumericFormat) | ({
-    type: 'percentage';
-} & NumericFormat) | {
-    type: 'boolean';
-    trueLabel?: string;
-    falseLabel?: string;
-    nullLabel?: string;
-} | {
-    type: 'link';
-    href?: string | ((value: TValue, row: TData) => string);
-    target?: HTMLAnchorElement['target'];
-    fallback?: string;
-};
-export type DataTableCellType<TData extends RowData = RowData, TValue = unknown> = DataTableCellConfig<TData, TValue> | Exclude<DataTableCellConfig<TData, TValue>['type'], 'currency' | 'link'>;
-export type DataTableColumnMeta<TData extends RowData = RowData, TValue = unknown> = {
-    dataTable?: {
-        align?: DataTableColumnAlign;
-        cell?: DataTableCellConfig<TData, TValue>;
-        filter?: DataTableFilterConfig<TValue>;
-        hasCustomCell?: boolean;
-    };
-};
-export type DataTableColumnAlign = 'left' | 'center' | 'right';
-export type DataTableFilterOption<TValue = unknown> = {
-    label: string;
-    value: TValue;
-};
-export type DataTableFilterConfig<TValue = unknown> = {
-    type: 'text';
-    placeholder?: string;
-} | {
-    type: 'facet';
-    options?: DataTableFilterOption<TValue>[];
-    maxOptions?: number;
-} | {
-    type: 'number-range';
-    min?: number;
-    max?: number;
-    step?: number;
-    formatOptions?: Intl.NumberFormatOptions;
-} | {
-    type: 'boolean';
-    trueLabel?: string;
-    falseLabel?: string;
-};
-export type DataTableFilterType<TValue = unknown> = DataTableFilterConfig<TValue> | DataTableFilterConfig<TValue>['type'];
-type DataTableColumnDefOptions<TData extends RowData, TValue> = {
-    align?: DataTableColumnAlign;
-    cellType?: DataTableCellType<TData, TValue>;
-    filter?: DataTableFilterType<TValue>;
-};
-export type DataTableColumnDef<TData extends RowData, TValue extends CellData = CellData> = (AccessorKeyColumnDef<DataTableFeatures, TData, TValue> & DataTableColumnDefOptions<TData, TValue>) | (AccessorFnColumnDef<DataTableFeatures, TData, TValue> & DataTableColumnDefOptions<TData, TValue>) | (DisplayColumnDef<DataTableFeatures, TData, TValue> & DataTableColumnDefOptions<TData, TValue>) | (Omit<GroupColumnDef<DataTableFeatures, TData, TValue>, 'columns'> & DataTableColumnDefOptions<TData, TValue> & {
-    columns?: DataTableColumnDef<TData, CellData>[];
-});
-export type DataTableCell<TData extends RowData = RowData, TValue = unknown> = Cell<DataTableFeatures, TData, TValue>;
-export declare function getDataTableCellConfig<TData extends RowData, TValue>(cell: DataTableCell<TData, TValue>): DataTableCellConfig<TData, TValue> | undefined;
-export declare function getDataTableFilterConfig<TData extends RowData, TValue>(columnDef: ColumnDef<DataTableFeatures, TData, TValue>): DataTableFilterConfig<TValue> | undefined;
-export declare function hasCustomDataTableCell<TData extends RowData, TValue>(cell: DataTableCell<TData, TValue>): boolean;
-export declare function normalizeDataTableColumns<TData extends RowData>(columns: DataTableColumnDef<TData>[]): ColumnDef<DataTableFeatures, TData, CellData>[];
-export {};

package/dist/components/data-table-old/core/cells.js

@@ -1,66 +0,0 @@
-export function getDataTableCellConfig(cell) {
-    return cell.column.columnDef.meta?.dataTable
-        ?.cell;
-}
-export function getDataTableFilterConfig(columnDef) {
-    return columnDef.meta?.dataTable?.filter;
-}
-export function hasCustomDataTableCell(cell) {
-    return (cell.column.columnDef.meta?.dataTable
-        ?.hasCustomCell ?? false);
-}
-export function normalizeDataTableColumns(columns) {
-    return columns.map((columnDef) => {
-        const { cellType, filter, align, columns: childColumns, meta, ...column } = columnDef;
-        const cell = normalizeDataTableCellType(cellType);
-        const filterConfig = normalizeDataTableFilterType(filter);
-        const hasCustomCell = 'cell' in column;
-        const filterFn = 'filterFn' in column ? column.filterFn : getDefaultDataTableFilterFn(filterConfig);
-        const nextMeta = cell || align || filterConfig
-            ? {
-                ...(meta ?? {}),
-                dataTable: {
-                    ...(meta?.dataTable ?? {}),
-                    ...(align ? { align } : {}),
-                    ...(cell ? { cell } : {}),
-                    ...(filterConfig ? { filter: filterConfig } : {}),
-                    hasCustomCell
-                }
-            }
-            : meta;
-        return {
-            ...column,
-            ...(childColumns ? { columns: normalizeDataTableColumns(childColumns) } : {}),
-            ...(filterFn ? { filterFn } : {}),
-            ...(nextMeta ? { meta: nextMeta } : {})
-        };
-    });
-}
-function normalizeDataTableCellType(cellType) {
-    if (!cellType)
-        return undefined;
-    return typeof cellType === 'string' ? { type: cellType } : cellType;
-}
-function normalizeDataTableFilterType(filter) {
-    if (!filter)
-        return undefined;
-    return typeof filter === 'string' ? { type: filter } : filter;
-}
-function getDefaultDataTableFilterFn(filter) {
-    if (!filter)
-        return undefined;
-    if (filter.type === 'facet')
-        return dataTableFacetFilter;
-    if (filter.type === 'number-range')
-        return 'inNumberRange';
-    if (filter.type === 'boolean')
-        return 'equals';
-    return 'includesString';
-}
-const dataTableFacetFilter = (row, columnId, filterValue) => {
-    if (!Array.isArray(filterValue) || filterValue.length === 0)
-        return true;
-    const value = row.getValue(columnId);
-    return filterValue.some((filterItem) => Object.is(filterItem, value));
-};
-dataTableFacetFilter.autoRemove = (filterValue) => !Array.isArray(filterValue) || filterValue.length === 0;

package/dist/components/data-table-old/core/create-table.svelte.d.ts

@@ -1,24 +0,0 @@
-import type { RowData, SvelteTable, TableOptions, TableState, Updater } from '@tanstack/svelte-table';
-import { type DataTableColumnDef } from './cells';
-declare const dataTableFeatures: {
-    columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-    columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-    columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-    columnSizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnSizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-    columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-    rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-    rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
-};
-export type DataTableFeatures = typeof dataTableFeatures;
-type DataTableData<TData extends RowData> = ReadonlyArray<TData> | (() => ReadonlyArray<TData>);
-export type DataTableSelectedState = Pick<TableState<DataTableFeatures>, 'columnFilters' | 'columnResizing' | 'columnVisibility' | 'rowSelection' | 'sorting'>;
-export type DataTableOptions<TData extends RowData> = Omit<TableOptions<DataTableFeatures, TData>, '_features' | 'data' | 'columns'> & {
-    data: DataTableData<TData>;
-    columns: DataTableColumnDef<TData>[];
-} & Partial<Pick<TableOptions<DataTableFeatures, TData>, '_features'>>;
-export type DataTable<TData extends RowData, TSelected = DataTableSelectedState> = SvelteTable<DataTableFeatures, TData, TSelected> & {
-    setData: (data: ReadonlyArray<TData>) => void;
-    updateData: (updater: Updater<ReadonlyArray<TData>>) => void;
-};
-export declare function createDataTable<TData extends RowData, TSelected = DataTableSelectedState>(options: DataTableOptions<TData>, selector?: (state: TableState<DataTableFeatures>) => TSelected): DataTable<TData, TSelected>;
-export {};

package/dist/components/data-table-old/core/create-table.svelte.js

@@ -1,74 +0,0 @@
-import { columnFacetingFeature, columnFilteringFeature, columnVisibilityFeature, columnResizingFeature, columnSizingFeature, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createCoreRowModel, createFilteredRowModel, createSortedRowModel, createTable as createTanStackTable, filterFns, functionalUpdate, rowSortingFeature, rowSelectionFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
-import { normalizeDataTableColumns } from './cells';
-const dataTableFeatures = tableFeatures({
-    columnFilteringFeature,
-    columnFacetingFeature,
-    columnVisibilityFeature,
-    columnSizingFeature,
-    columnResizingFeature,
-    rowSelectionFeature,
-    rowSortingFeature
-});
-const dataTableStateSelector = (state) => ({
-    columnFilters: state.columnFilters,
-    columnResizing: state.columnResizing,
-    columnVisibility: state.columnVisibility,
-    rowSelection: state.rowSelection,
-    sorting: state.sorting
-});
-class DataTableState {
-    #options = $state.raw({});
-    #table;
-    #columns;
-    constructor(options, selector) {
-        this.#options = options;
-        this.#columns = normalizeDataTableColumns(options.columns);
-        const getData = () => this.#getData();
-        this.#table = createTanStackTable({
-            ...options,
-            columns: this.#columns,
-            enableRowSelection: options.enableRowSelection ?? false,
-            get data() {
-                return getData();
-            },
-            _features: options._features ?? dataTableFeatures,
-            _rowModels: {
-                coreRowModel: createCoreRowModel(),
-                filteredRowModel: createFilteredRowModel(filterFns),
-                facetedRowModel: createFacetedRowModel(),
-                facetedUniqueValues: createFacetedUniqueValues(),
-                facetedMinMaxValues: createFacetedMinMaxValues(),
-                sortedRowModel: createSortedRowModel(sortFns),
-                ...options._rowModels
-            }
-        }, selector ?? dataTableStateSelector);
-    }
-    get table() {
-        const table = this.#table;
-        table.setData = (data) => {
-            this.setData(data);
-        };
-        table.updateData = (updater) => {
-            this.updateData(updater);
-        };
-        return table;
-    }
-    setData(data) {
-        this.#options = {
-            ...this.#options,
-            data
-        };
-    }
-    updateData(updater) {
-        this.setData(functionalUpdate(updater, this.#getData()));
-    }
-    #resolveData(data) {
-        return typeof data === 'function' ? data() : data;
-    }
-    #getData() {
-        return this.#resolveData(this.#options.data);
-    }
-}
-export function createDataTable(options, selector) {
-    return new DataTableState(options, selector).table;
-}

package/dist/components/data-table-old/core/index.d.ts

@@ -1,3 +0,0 @@
-export { createDataTable } from './create-table.svelte';
-export type { DataTable, DataTableFeatures, DataTableOptions, DataTableSelectedState } from './create-table.svelte';
-export { getDataTableCellConfig, getDataTableFilterConfig, hasCustomDataTableCell, normalizeDataTableColumns, type DataTableCell, type DataTableCellConfig, type DataTableCellType, type DataTableColumnAlign, type DataTableColumnDef, type DataTableColumnMeta, type DataTableFilterConfig, type DataTableFilterOption, type DataTableFilterType } from './cells';

package/dist/components/data-table-old/core/index.js

@@ -1,2 +0,0 @@
-export { createDataTable } from './create-table.svelte';
-export { getDataTableCellConfig, getDataTableFilterConfig, hasCustomDataTableCell, normalizeDataTableColumns } from './cells';

package/dist/components/data-table-old/data-table-column-visibility.svelte

@@ -1,79 +0,0 @@
-<script lang="ts" generics="TData extends RowData, TSelected = object">
-	import * as Popover from '../popover';
-	import * as ScrollArea from '../scroll-area';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import type { DataTable, DataTableFeatures, DataTableSelectedState } from './core';
-
-	type Props = {
-		table: DataTable<TData, TSelected>;
-		triggerLabel?: string;
-	};
-
-	let { table, triggerLabel = 'Columns' }: Props = $props();
-
-	const columnVisibility = $derived(
-		(table.state as unknown as DataTableSelectedState).columnVisibility
-	);
-	const allColumnsVisible = $derived(table.getIsAllColumnsVisible());
-	const someColumnsVisible = $derived(
-		table.getAllLeafColumns().some((column) => column.getCanHide() && column.getIsVisible())
-	);
-	const allColumnsVisibilityState = $derived(
-		allColumnsVisible ? true : someColumnsVisible ? 'indeterminate' : false
-	);
-
-	function getColumnLabel(column: Column<DataTableFeatures, TData, unknown>) {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-
-	function getColumnIsVisible(
-		column: Column<DataTableFeatures, TData, unknown>,
-		visibilityState: unknown
-	) {
-		void visibilityState;
-		return column.getIsVisible();
-	}
-</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}
-	</Popover.Trigger>
-
-	<Popover.Content class="w-56 p-2" showArrow={false}>
-		<div class="border-b border-surface-3 px-2 pb-2">
-			<Checkbox
-				size="sm"
-				label="All columns"
-				checked={allColumnsVisibilityState}
-				onCheckedChange={({ checked }) => table.toggleAllColumnsVisible(checked === true)}
-			/>
-		</div>
-
-		<ScrollArea.Root class="h-72">
-			<ScrollArea.Viewport>
-				<ScrollArea.Content class="py-1 pe-3">
-					<div class="flex flex-col">
-						{#each table.getAllLeafColumns() as column (column.id)}
-							<Checkbox
-								size="md"
-								label={getColumnLabel(column)}
-								class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
-								checked={getColumnIsVisible(column, columnVisibility)}
-								disabled={!column.getCanHide()}
-								onCheckedChange={({ checked }) => column.toggleVisibility(checked === true)}
-							/>
-						{/each}
-					</div>
-				</ScrollArea.Content>
-			</ScrollArea.Viewport>
-			<ScrollArea.Scrollbar orientation="vertical">
-				<ScrollArea.Thumb />
-			</ScrollArea.Scrollbar>
-			<ScrollArea.Corner />
-		</ScrollArea.Root>
-	</Popover.Content>
-</Popover.Root>

package/dist/components/data-table-old/data-table-column-visibility.svelte.d.ts

@@ -1,29 +0,0 @@
-import type { RowData } from '@tanstack/svelte-table';
-import type { DataTable } from './core';
-declare function $$render<TData extends RowData, TSelected = object>(): {
-    props: {
-        table: DataTable<TData, TSelected>;
-        triggerLabel?: string;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TData extends RowData, TSelected = object> {
-    props(): ReturnType<typeof $$render<TData, TSelected>>['props'];
-    events(): ReturnType<typeof $$render<TData, TSelected>>['events'];
-    slots(): ReturnType<typeof $$render<TData, TSelected>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData extends RowData, TSelected = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TSelected>['props']>, ReturnType<__sveltets_Render<TData, TSelected>['events']>, ReturnType<__sveltets_Render<TData, TSelected>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData, TSelected>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
-    <TData extends RowData, TSelected = object>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const DataTableColumnVisibility: $$IsomorphicComponent;
-type DataTableColumnVisibility<TData extends RowData, TSelected = object> = InstanceType<typeof DataTableColumnVisibility<TData, TSelected>>;
-export default DataTableColumnVisibility;

package/dist/components/data-table-old/data-table-filters.svelte

@@ -1,285 +0,0 @@
-<script lang="ts" generics="TData extends RowData, TSelected = object">
-	import * as Field from '../field';
-	import * as Popover from '../popover';
-	import * as ScrollArea from '../scroll-area';
-	import * as Fieldset from '../fieldset';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import Button from '../button/button.svelte';
-	import NumberInput from '../number-input/number-input.svelte';
-	import Select from '../select/select.svelte';
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import {
-		getDataTableFilterConfig,
-		type DataTable,
-		type DataTableFeatures,
-		type DataTableFilterConfig,
-		type DataTableFilterOption,
-		type DataTableSelectedState
-	} from './core';
-
-	type Props = {
-		table: DataTable<TData, TSelected>;
-		triggerLabel?: string;
-	};
-
-	type FilterableColumn = Column<DataTableFeatures, TData, unknown>;
-
-	let { table, triggerLabel = 'Filters' }: Props = $props();
-
-	const columnFilters = $derived((table.state as unknown as DataTableSelectedState).columnFilters);
-	const activeFilterCount = $derived(columnFilters.length);
-	const filterableColumns = $derived(
-		table
-			.getAllLeafColumns()
-			.filter((column) => column.getCanFilter() && getDataTableFilterConfig(column.columnDef))
-	);
-
-	function getColumnLabel(column: FilterableColumn) {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-
-	function getFilterConfig(column: FilterableColumn, filtersState: unknown) {
-		void filtersState;
-		return getDataTableFilterConfig(column.columnDef);
-	}
-
-	function getFilterValue(column: FilterableColumn, filtersState: unknown) {
-		void filtersState;
-		return column.getFilterValue();
-	}
-
-	function setTextFilter(column: FilterableColumn, value: string) {
-		column.setFilterValue(value || undefined);
-	}
-
-	function setBooleanFilter(column: FilterableColumn, value: string) {
-		if (value === 'true') {
-			column.setFilterValue(true);
-			return;
-		}
-
-		if (value === 'false') {
-			column.setFilterValue(false);
-			return;
-		}
-
-		column.setFilterValue(undefined);
-	}
-
-	function setNumberRangeFilter(column: FilterableColumn, index: 0 | 1, value: number | null) {
-		const currentValue = column.getFilterValue();
-		const current = Array.isArray(currentValue) ? currentValue : [];
-		const next = [current[0], current[1]] as [number | undefined, number | undefined];
-		next[index] = value ?? undefined;
-
-		column.setFilterValue(next[0] === undefined && next[1] === undefined ? undefined : next);
-	}
-
-	function getNumberRangeValue(
-		column: FilterableColumn,
-		filtersState: unknown
-	): [number | undefined, number | undefined] {
-		const value = getFilterValue(column, filtersState);
-		return Array.isArray(value) ? [value[0], value[1]] : [undefined, undefined];
-	}
-
-	function getFacetOptions(
-		column: FilterableColumn,
-		config: DataTableFilterConfig,
-		filtersState: unknown
-	): DataTableFilterOption[] {
-		void filtersState;
-
-		if (config.type !== 'facet') return [];
-		if (config.options) return config.options;
-
-		return Array.from(column.getFacetedUniqueValues().entries())
-			.sort(([a], [b]) => String(a).localeCompare(String(b)))
-			.slice(0, config.maxOptions ?? 20)
-			.map(([value, count]) => ({
-				value,
-				label: `${String(value)} (${count})`
-			}));
-	}
-
-	function getFacetFilterValue(column: FilterableColumn, filtersState: unknown) {
-		const value = getFilterValue(column, filtersState);
-		return Array.isArray(value) ? value : [];
-	}
-
-	function getFacetOptionChecked(
-		column: FilterableColumn,
-		option: DataTableFilterOption,
-		filtersState: unknown
-	) {
-		return getFacetFilterValue(column, filtersState).some((value) =>
-			Object.is(value, option.value)
-		);
-	}
-
-	function toggleFacetFilterValue(
-		column: FilterableColumn,
-		option: DataTableFilterOption,
-		checked: boolean
-	) {
-		const currentValue = column.getFilterValue();
-		const current = Array.isArray(currentValue) ? currentValue : [];
-		const next = checked
-			? [...current, option.value]
-			: current.filter((value) => !Object.is(value, option.value));
-
-		column.setFilterValue(next.length > 0 ? next : undefined);
-	}
-
-	function getBooleanFilterValue(column: FilterableColumn, filtersState: unknown) {
-		const value = getFilterValue(column, filtersState);
-		if (value === true) return 'true';
-		if (value === false) return 'false';
-		return null;
-	}
-
-	function getBooleanLabel(config: DataTableFilterConfig, value: boolean) {
-		if (config.type !== 'boolean') return value ? 'True' : 'False';
-		return value ? (config.trueLabel ?? 'True') : (config.falseLabel ?? 'False');
-	}
-
-	function getBooleanFilterItems(config: DataTableFilterConfig) {
-		return [
-			{ value: 'true', label: getBooleanLabel(config, true) },
-			{ value: 'false', label: getBooleanLabel(config, false) }
-		];
-	}
-</script>
-
-<Popover.Root positioning={{ placement: 'bottom-end' }}>
-	<Popover.Trigger
-		class="flex h-9 cursor-pointer items-center gap-2 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"
-	>
-		<span>{triggerLabel}</span>
-		{#if activeFilterCount > 0}
-			<span class="rounded-full bg-surface-3 px-1.5 text-xs text-ink-dim">
-				{activeFilterCount}
-			</span>
-		{/if}
-	</Popover.Trigger>
-
-	<Popover.Content class="w-80 p-0" showArrow={false}>
-		<Popover.Title class="flex items-center justify-between gap-3 border-b px-4 py-2">
-			<div class="text-sm font-medium text-ink">Filters</div>
-			<Button
-				variant="ghost"
-				disabled={activeFilterCount === 0}
-				onclick={() => table.resetColumnFilters(true)}
-			>
-				Clear
-			</Button>
-		</Popover.Title>
-
-		{#if filterableColumns.length === 0}
-			<div class="py-2 text-sm text-ink-dim">No filters available</div>
-		{:else}
-			<ScrollArea.Root class="h-96">
-				<ScrollArea.Viewport>
-					<ScrollArea.Content>
-						<div class="flex flex-col gap-4">
-							{#each filterableColumns as column (column.id)}
-								{@const config = getFilterConfig(column, columnFilters)}
-								{#if config}
-									<div class="space-y-2">
-										{#if config.type === 'text'}
-											<Field.Root>
-												<Field.Label>{getColumnLabel(column)}</Field.Label>
-												<Field.Input
-													type="search"
-													placeholder={config.placeholder ?? `Search ${getColumnLabel(column)}`}
-													value={String(getFilterValue(column, columnFilters) ?? '')}
-													oninput={(event) =>
-														setTextFilter(column, (event.currentTarget as HTMLInputElement).value)}
-												/>
-											</Field.Root>
-										{:else if config.type === 'number-range'}
-											{@const rangeValue = getNumberRangeValue(column, columnFilters)}
-											<div class="text-sm font-medium text-ink">{getColumnLabel(column)}</div>
-											<div class="grid grid-cols-2 gap-2">
-												<NumberInput
-													label="Min"
-													min={config.min}
-													max={config.max}
-													step={config.step}
-													formatOptions={config.formatOptions ?? { minimumFractionDigits: 0 }}
-													value={rangeValue[0] ?? null}
-													onValueChange={({ valueAsNumber }) =>
-														setNumberRangeFilter(
-															column,
-															0,
-															Number.isNaN(valueAsNumber) ? null : valueAsNumber
-														)}
-												/>
-												<NumberInput
-													label="Max"
-													min={config.min}
-													max={config.max}
-													step={config.step}
-													formatOptions={config.formatOptions ?? { minimumFractionDigits: 0 }}
-													value={rangeValue[1] ?? null}
-													onValueChange={({ valueAsNumber }) =>
-														setNumberRangeFilter(
-															column,
-															1,
-															Number.isNaN(valueAsNumber) ? null : valueAsNumber
-														)}
-												/>
-											</div>
-										{:else if config.type === 'boolean'}
-											<Select
-												label={getColumnLabel(column)}
-												items={getBooleanFilterItems(config)}
-												placeholder="All"
-												value={getBooleanFilterValue(column, columnFilters)}
-												onValueChange={({ value }) =>
-													setBooleanFilter(
-														column,
-														Array.isArray(value) && value.length > 0 ? value[0] : ''
-													)}
-											/>
-										{:else if config.type === 'facet'}
-											<Fieldset.Root class="max-h-44">
-												<Fieldset.Legend>{getColumnLabel(column)}</Fieldset.Legend>
-												<ScrollArea.Root class="hrounded-md border border-surface-3">
-													<ScrollArea.Viewport>
-														<ScrollArea.Content class="p-1 pe-3">
-															<div class="flex flex-col">
-																{#each getFacetOptions(column, config, columnFilters) as option (String(option.value))}
-																	<Checkbox
-																		size="sm"
-																		label={option.label}
-																		class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
-																		checked={getFacetOptionChecked(column, option, columnFilters)}
-																		onCheckedChange={({ checked }) =>
-																			toggleFacetFilterValue(column, option, checked === true)}
-																	/>
-																{/each}
-															</div>
-														</ScrollArea.Content>
-													</ScrollArea.Viewport>
-													<ScrollArea.Scrollbar orientation="vertical">
-														<ScrollArea.Thumb />
-													</ScrollArea.Scrollbar>
-													<ScrollArea.Corner />
-												</ScrollArea.Root>
-											</Fieldset.Root>
-										{/if}
-									</div>
-								{/if}
-							{/each}
-						</div>
-					</ScrollArea.Content>
-				</ScrollArea.Viewport>
-				<ScrollArea.Scrollbar orientation="vertical">
-					<ScrollArea.Thumb />
-				</ScrollArea.Scrollbar>
-				<ScrollArea.Corner />
-			</ScrollArea.Root>
-		{/if}
-	</Popover.Content>
-</Popover.Root>