compote-ui 0.36.0 → 0.36.2

package/dist/components/data-table/create-table.d.ts

@@ -1,4 +1,4 @@
-import { type ColumnFiltersState, type ColumnResizeMode, type Row, type RowData, type RowSelectionState, type SortingState, type SvelteTable, type TableState } from '@tanstack/svelte-table';
+import { type ColumnResizeMode, type Row, type RowData, type SvelteTable, type TableState } from '@tanstack/svelte-table';
 import type { DataTableColumn, DataTableLeafColumn } from './types';
 declare const dataTableFeatures: {
     columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
@@ -18,9 +18,7 @@ export type CreateDataTableOptions<T extends RowData> = {
     data: T[];
     columns: DataTableColumn<T>[];
     columnResizeMode?: ColumnResizeMode;
-    initialSorting?: SortingState;
-    initialRowSelection?: RowSelectionState;
-    initialColumnFilters?: ColumnFiltersState;
+    initialState?: Partial<TableState<DataTableFeatures>>;
     getRowId?: (row: T, index: number, parent?: Row<DataTableFeatures, T>) => string;
     enableRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
     enableMultiRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);

package/dist/components/data-table/create-table.js

@@ -39,12 +39,19 @@ export function createTable(options) {
             return createColumns(options.columns, localeCtx);
         },
         initialState: {
-            columnVisibility: createColumnVisibility(options.columns),
-            columnSizing: createColumnSizing(options.columns),
-            columnPinning: createColumnPinning(options.columns),
-            rowSelection: options.initialRowSelection ?? {},
-            sorting: options.initialSorting ?? [],
-            columnFilters: options.initialColumnFilters ?? []
+            ...options.initialState,
+            columnVisibility: {
+                ...createColumnVisibility(options.columns),
+                ...options.initialState?.columnVisibility
+            },
+            columnSizing: {
+                ...createColumnSizing(options.columns),
+                ...options.initialState?.columnSizing
+            },
+            columnPinning: options.initialState?.columnPinning ?? createColumnPinning(options.columns),
+            rowSelection: options.initialState?.rowSelection ?? {},
+            sorting: options.initialState?.sorting ?? [],
+            columnFilters: options.initialState?.columnFilters ?? []
         }
     }, (state) => ({
         columnVisibility: state.columnVisibility,

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

@@ -223,7 +223,7 @@
 	{/if}
 
 	<div class="min-h-0 flex-1 overflow-auto">
-		<table class="table-fixed border-collapse text-sm" style={tableSizeStyle()}>
+		<table class="table-fixed border-separate border-spacing-0 text-sm" style={tableSizeStyle()}>
 			<colgroup>
 				{#if isRowSelectionEnabled}
 					<col style={selectionColumnSizeStyle()} />
@@ -239,10 +239,10 @@
 			<thead class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim">
 				{#each headerGroups as headerGroup, headerGroupIndex (headerGroup.id)}
 					{@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
-					<tr>
+					<tr class="h-9">
 						{#if isRowSelectionEnabled && headerGroupIndex === 0}
 							<th
-								class="border-b border-surface-3 bg-surface-2 px-3 py-2 text-center align-middle font-medium"
+								class="h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 text-center align-middle leading-5 font-medium"
 								style="position: sticky; left: 0; z-index: 15"
 								rowspan={headerGroupCount}
 							>
@@ -262,7 +262,7 @@
 							{@const sortDirection = getHeaderSortDirection(header, table.store.state.sorting)}
 							<th
 								class={cn(
-									'relative border-b border-surface-3 bg-surface-2 px-3 py-2 font-medium',
+									'relative h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
 									alignClass(columnDef?.align)
 								)}
 								colspan={header.colSpan}
@@ -276,7 +276,7 @@
 										<button
 											type="button"
 											class={cn(
-												'inline-flex max-w-full items-center gap-1 rounded-sm outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
+												'inline-flex max-w-full appearance-none items-center gap-1 rounded-sm border-0 bg-transparent p-0 align-middle text-sm leading-5 text-inherit outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
 												justifyClass(columnDef?.align),
 												sortButtonDirectionClass(columnDef?.align)
 											)}
@@ -312,7 +312,7 @@
 								{/if}
 							</th>
 						{/each}
-						<th aria-hidden="true" class="border-b border-surface-3 bg-surface-2 p-0"></th>
+						<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
 					</tr>
 				{/each}
 			</thead>
@@ -380,7 +380,7 @@
 										<button
 											type="button"
 											class={cn(
-												'inline-flex max-w-full items-center gap-1.5 rounded-sm font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+												'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
 												justifyClass(columnDef.align)
 											)}
 											onclick={() => openUrlCell(value)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.36.0",
+	"version": "0.36.2",
 	"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>

package/dist/components/data-table-old/data-table-filters.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 DataTableFilters: $$IsomorphicComponent;
-type DataTableFilters<TData extends RowData, TSelected = object> = InstanceType<typeof DataTableFilters<TData, TSelected>>;
-export default DataTableFilters;

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

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-
-	type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
-		class?: ClassValue;
-		children?: Snippet;
-	};
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<h2 class={cn('text-lg font-semibold text-ink', className)} {...rest}>
-	{@render children?.()}
-</h2>

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

@@ -1,10 +0,0 @@
-import { type ClassValue } from 'tailwind-variants';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
-    class?: ClassValue;
-    children?: Snippet;
-};
-declare const DataTableTitle: import("svelte").Component<Props, {}, "">;
-type DataTableTitle = ReturnType<typeof DataTableTitle>;
-export default DataTableTitle;

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

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		class?: ClassValue;
-		children?: Snippet;
-	};
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<div class={cn('mb-4 flex flex-wrap items-center justify-between gap-3', className)} {...rest}>
-	{@render children?.()}
-</div>

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

@@ -1,10 +0,0 @@
-import { type ClassValue } from 'tailwind-variants';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-    class?: ClassValue;
-    children?: Snippet;
-};
-declare const DataTableToolbar: import("svelte").Component<Props, {}, "">;
-type DataTableToolbar = ReturnType<typeof DataTableToolbar>;
-export default DataTableToolbar;

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

@@ -1,342 +0,0 @@
-<script lang="ts" generics="TData extends RowData, TSelected = object">
-	import { useLocaleContext } from '@ark-ui/svelte/locale';
-	import { FlexRender } from '@tanstack/svelte-table';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCaretDown, PhCaretUp } from '../../icons';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Header, RowData } from '@tanstack/svelte-table';
-	import {
-		getDataTableCellConfig,
-		hasCustomDataTableCell,
-		type DataTable,
-		type DataTableCell,
-		type DataTableCellConfig,
-		type DataTableColumnAlign,
-		type DataTableColumnMeta,
-		type DataTableFeatures
-	} from './core';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTable<TData, TSelected>;
-		class?: ClassValue;
-		tableClass?: ClassValue;
-	};
-
-	let { table, class: className, tableClass, ...rest }: Props = $props();
-
-	const locale = useLocaleContext();
-	const columnCount = $derived(table.getVisibleLeafColumns().length);
-	const headerGroupCount = $derived(table.getHeaderGroups().length);
-	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
-	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
-	const tableColumnCount = $derived(columnCount + (isRowSelectionEnabled ? 1 : 0));
-	const allRowsSelected = $derived(table.getIsAllRowsSelected());
-	const someRowsSelected = $derived(table.getIsSomeRowsSelected());
-	const allRowsSelectionState = $derived(
-		allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false
-	);
-	const rowSelectionColumnSize = 40;
-	const tableSize = $derived(
-		table.getTotalSize() + (isRowSelectionEnabled ? rowSelectionColumnSize : 0)
-	);
-	const isColumnResizing = $derived(table.store.state.columnResizing.isResizingColumn !== false);
-
-	function formatNumericValue(
-		value: unknown,
-		options: Intl.NumberFormatOptions & { locale?: string }
-	) {
-		if (typeof value !== 'number') return formatTextValue(value);
-		const { locale: optionLocale, ...numberFormatOptions } = options;
-		return new Intl.NumberFormat(optionLocale ?? locale().locale, numberFormatOptions).format(
-			value
-		);
-	}
-
-	function formatTextValue(value: unknown, fallback = '') {
-		if (value === null || value === undefined || value === '') return fallback;
-		return String(value);
-	}
-
-	function fractionOptions(options: { fractionDigits?: number }) {
-		if (options.fractionDigits === undefined) return {};
-
-		return {
-			minimumFractionDigits: options.fractionDigits,
-			maximumFractionDigits: options.fractionDigits
-		};
-	}
-
-	function isNumericCellConfig(cellConfig: DataTableCellConfig<TData> | undefined) {
-		return (
-			cellConfig?.type === 'number' ||
-			cellConfig?.type === 'currency' ||
-			cellConfig?.type === 'percentage'
-		);
-	}
-
-	function getLinkHref<TValue>(
-		cell: DataTableCell<TData, TValue>,
-		href: string | ((value: TValue, row: TData) => string) | undefined
-	) {
-		const value = cell.getValue();
-		if (!href) return formatTextValue(value);
-		return typeof href === 'function' ? href(value, cell.row.original) : href;
-	}
-
-	function getLinkLabel(value: unknown, fallback = 'Open link') {
-		return formatTextValue(value, fallback);
-	}
-
-	function getCellMeta<TValue>(cell: DataTableCell<TData, TValue>) {
-		return (cell.column.columnDef.meta as DataTableColumnMeta<TData, TValue> | undefined)
-			?.dataTable;
-	}
-
-	function getHeaderMeta(header: Header<DataTableFeatures, TData, unknown>) {
-		return header.column.columnDef.meta as DataTableColumnMeta<TData> | undefined;
-	}
-
-	function getColumnAlign(
-		align: DataTableColumnAlign | undefined,
-		cellConfig: DataTableCellConfig<TData> | undefined
-	) {
-		return align ?? (isNumericCellConfig(cellConfig) ? 'right' : 'left');
-	}
-
-	function alignClass(align: DataTableColumnAlign | undefined) {
-		return {
-			left: 'text-left',
-			center: 'text-center',
-			right: 'text-right'
-		}[align ?? 'left'];
-	}
-
-	function justifyClass(align: DataTableColumnAlign | undefined) {
-		return {
-			left: 'justify-start',
-			center: 'justify-center',
-			right: 'justify-end'
-		}[align ?? 'left'];
-	}
-
-	function sortButtonDirectionClass(align: DataTableColumnAlign | undefined) {
-		return align === 'right' ? 'flex-row-reverse' : 'flex-row';
-	}
-
-	function columnSizeStyle(size: number) {
-		return `width: ${size}px`;
-	}
-
-	function tableSizeStyle() {
-		return `width: max(100%, ${tableSize}px)`;
-	}
-
-	function resizeHandleStyle(header: Header<DataTableFeatures, TData, unknown>) {
-		if (table.options.columnResizeMode !== 'onEnd') return undefined;
-		const deltaOffset = table.store.state.columnResizing.deltaOffset;
-		if (!header.column.getIsResizing() || deltaOffset === null) return undefined;
-		return `transform: translateX(${deltaOffset}px)`;
-	}
-
-	function getHeaderSortDirection(
-		header: Header<DataTableFeatures, TData, unknown>,
-		sortingState: unknown
-	) {
-		void sortingState;
-		return header.column.getIsSorted();
-	}
-
-	function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc') {
-		if (sortDirection === 'asc') return 'Sorted ascending';
-		if (sortDirection === 'desc') return 'Sorted descending';
-		return 'Not sorted';
-	}
-
-	function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc') {
-		if (sortDirection === 'asc') return 'ascending';
-		if (sortDirection === 'desc') return 'descending';
-		return 'none';
-	}
-</script>
-
-<div
-	class={cn('max-h-full min-h-0 overflow-auto rounded-lg border border-surface-3', className)}
-	{...rest}
->
-	{#if isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-	<table class={cn('table-fixed border-collapse text-sm', tableClass)} style={tableSizeStyle()}>
-		<colgroup>
-			{#if isRowSelectionEnabled}
-				<col style={columnSizeStyle(rowSelectionColumnSize)} />
-			{/if}
-			{#each table.getVisibleLeafColumns() as column (column.id)}
-				<col style={columnSizeStyle(column.getSize())} />
-			{/each}
-		</colgroup>
-		<thead class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim">
-			{#each table.getHeaderGroups() as headerGroup, headerGroupIndex (headerGroup.id)}
-				<tr>
-					{#if isRowSelectionEnabled && headerGroupIndex === 0}
-						<th
-							class="border-b border-surface-3 bg-surface-2 px-3 py-2 text-center align-middle font-medium"
-							rowspan={headerGroupCount}
-						>
-							{#if isMultiRowSelectionEnabled}
-								<Checkbox
-									size="sm"
-									aria-label="Select all rows"
-									class="mx-auto size-4"
-									checked={allRowsSelectionState}
-									onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
-								/>
-							{/if}
-						</th>
-					{/if}
-					{#each headerGroup.headers as header (header.id)}
-						{@const headerMeta = getHeaderMeta(header)?.dataTable}
-						{@const headerAlign = getColumnAlign(headerMeta?.align, headerMeta?.cell)}
-						{@const sortDirection = getHeaderSortDirection(header, table.store.state.sorting)}
-						<th
-							class={cn(
-								'relative border-b border-surface-3 bg-surface-2 px-3 py-2 font-medium',
-								alignClass(headerAlign)
-							)}
-							colspan={header.colSpan}
-							aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
-						>
-							{#if !header.isPlaceholder}
-								{#if header.column.getCanSort()}
-									<button
-										type="button"
-										class={cn(
-											'inline-flex max-w-full items-center gap-1 rounded-sm outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
-											justifyClass(headerAlign),
-											sortButtonDirectionClass(headerAlign)
-										)}
-										aria-label={`${getHeaderSortLabel(sortDirection)}. Toggle sorting.`}
-										onclick={header.column.getToggleSortingHandler()}
-									>
-										<span class="min-w-0 truncate">
-											<FlexRender {header} />
-										</span>
-										<span
-											class="inline-flex size-3.5 shrink-0 items-center justify-center text-ink-dim"
-										>
-											{#if sortDirection === 'asc'}
-												<PhCaretUp class="size-3.5" />
-											{:else if sortDirection === 'desc'}
-												<PhCaretDown class="size-3.5" />
-											{/if}
-										</span>
-									</button>
-								{:else}
-									<FlexRender {header} />
-								{/if}
-							{/if}
-							{#if header.column.getCanResize()}
-								<div
-									aria-hidden="true"
-									class={cn(
-										'absolute top-0 -right-1 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]'
-									)}
-									style={resizeHandleStyle(header)}
-									ondblclick={() => header.column.resetSize()}
-									onmousedown={header.getResizeHandler()}
-									ontouchstart={header.getResizeHandler()}
-								></div>
-							{/if}
-						</th>
-					{/each}
-				</tr>
-			{/each}
-		</thead>
-		<tbody>
-			{#each table.getRowModel().rows as row (row.id)}
-				<tr class="border-b border-surface-3 last:border-b-0">
-					{#if isRowSelectionEnabled}
-						<td class="px-3 py-2 text-center align-middle">
-							<Checkbox
-								size="sm"
-								aria-label="Select row"
-								class="mx-auto size-4"
-								checked={row.getIsSelected()}
-								disabled={!row.getCanSelect()}
-								onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
-							/>
-						</td>
-					{/if}
-					{#each row.getVisibleCells() as cell (cell.id)}
-						{@const cellMeta = getCellMeta(cell)}
-						{@const cellConfig = getDataTableCellConfig(cell)}
-						{@const cellAlign = getColumnAlign(cellMeta?.align, cellConfig)}
-						<td
-							class={cn(
-								'px-3 py-2',
-								alignClass(cellAlign),
-								isNumericCellConfig(cellConfig) && 'tabular-nums'
-							)}
-						>
-							{#if cellConfig && !hasCustomDataTableCell(cell)}
-								{@const value = cell.getValue()}
-								{#if cellConfig.type === 'number'}
-									{formatNumericValue(value, {
-										...cellConfig,
-										...fractionOptions(cellConfig)
-									})}
-								{:else if cellConfig.type === 'currency'}
-									{formatNumericValue(value, {
-										...cellConfig,
-										...fractionOptions(cellConfig),
-										style: 'currency'
-									})}
-								{:else if cellConfig.type === 'percentage'}
-									{formatNumericValue(value, {
-										...cellConfig,
-										...fractionOptions(cellConfig),
-										style: 'percent'
-									})}
-								{:else if cellConfig.type === 'boolean'}
-									{value === true
-										? (cellConfig.trueLabel ?? 'Yes')
-										: value === false
-											? (cellConfig.falseLabel ?? 'No')
-											: (cellConfig.nullLabel ?? '')}
-								{:else if cellConfig.type === 'link'}
-									{@const href = getLinkHref(cell, cellConfig.href)}
-									{#if href}
-										<a
-											class="inline-flex size-7 items-center justify-center rounded-md text-primary hover:bg-surface-2"
-											{href}
-											target={cellConfig.target ?? '_blank'}
-											rel="external noreferrer"
-											aria-label={getLinkLabel(value, cellConfig.fallback)}
-											title={getLinkLabel(value, cellConfig.fallback)}
-										>
-											<PhArrowSquareOut class="size-4" />
-										</a>
-									{:else}
-										{formatTextValue(value, cellConfig.fallback)}
-									{/if}
-								{:else}
-									{formatTextValue(value, cellConfig.fallback)}
-								{/if}
-							{:else}
-								<FlexRender {cell} />
-							{/if}
-						</td>
-					{/each}
-				</tr>
-			{:else}
-				<tr>
-					<td class="px-3 py-6 text-center text-ink-dim" colspan={tableColumnCount}>
-						No results.
-					</td>
-				</tr>
-			{/each}
-		</tbody>
-	</table>
-</div>

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

@@ -1,32 +0,0 @@
-import { type ClassValue } from 'tailwind-variants';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { RowData } from '@tanstack/svelte-table';
-import { type DataTable } from './core';
-declare function $$render<TData extends RowData, TSelected = object>(): {
-    props: Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
-        table: DataTable<TData, TSelected>;
-        class?: ClassValue;
-        tableClass?: ClassValue;
-    };
-    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 DataTable: $$IsomorphicComponent;
-type DataTable<TData extends RowData, TSelected = object> = InstanceType<typeof DataTable<TData, TSelected>>;
-export default DataTable;

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

@@ -1,7 +0,0 @@
-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 Filters } from './data-table-filters.svelte';
-export * from './core';
-export * from '@tanstack/svelte-table';

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

@@ -1,7 +0,0 @@
-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 Filters } from './data-table-filters.svelte';
-export * from './core';
-export * from '@tanstack/svelte-table';