compote-ui 0.56.0 → 0.57.0

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

@@ -1,373 +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';
-	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-70 p-3 flex flex-col gap-3" showArrow={false}>
-		<div class="flex items-center justify-between py-2.5 mr-1">
-			<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-2">
-				<ScrollArea.Root class="h-96">
-					<ScrollArea.Viewport>
-						<ScrollArea.Content class="flex flex-col gap-3">
-							{#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>
-											<ScrollArea.Root>
-												<ScrollArea.Viewport class="max-h-40">
-													<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>
-									{: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/toolbar/data-table-column-filter.svelte.d.ts

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

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

@@ -1,73 +0,0 @@
-<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';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		triggerLabel?: string;
-	};
-
-	let { table, triggerLabel = 'Columns' }: Props = $props();
-
-	const columnVisibility = $derived(getReactiveTableState(table).columnVisibility);
-	const allLeafColumns = $derived.by(() => {
-		getReactiveTableState(table);
-		return table.getAllLeafColumns();
-	});
-	const allColumnsVisible = $derived(
-		allLeafColumns.every((c) => !c.getCanHide() || columnVisibility[c.id] !== false)
-	);
-	const someColumnsVisible = $derived(
-		allLeafColumns.some((c) => c.getCanHide() && columnVisibility[c.id] !== false)
-	);
-	const allColumnsVisibilityState = $derived(
-		allColumnsVisible ? true : someColumnsVisible ? ('indeterminate' as const) : false
-	);
-
-	function getColumnLabel(column: { columnDef: { header?: unknown }; id: string }) {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-</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
-				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 allLeafColumns as column (column.id)}
-							<Checkbox
-								label={getColumnLabel(column)}
-								class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
-								checked={columnVisibility[column.id] !== false}
-								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-v8/toolbar/data-table-column-visibility.svelte.d.ts

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

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

@@ -1,57 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	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';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		placeholder?: string;
-		class?: ClassValue;
-	};
-
-	let { table, placeholder = 'Search...', class: className }: Props = $props();
-
-	const globalFilter = $derived(
-		(getReactiveTableState(table).globalFilter as string | undefined) ?? ''
-	);
-
-	let timer: ReturnType<typeof setTimeout> | undefined;
-
-	onDestroy(() => clearTimeout(timer));
-
-	function handleInput(e: Event) {
-		const value = (e.currentTarget as HTMLInputElement).value;
-		clearTimeout(timer);
-		timer = setTimeout(() => {
-			table.setGlobalFilter(value || undefined);
-		}, 300);
-	}
-
-	function clearFilter() {
-		clearTimeout(timer);
-		table.setGlobalFilter(undefined);
-	}
-</script>
-
-<Field.Root class={cn(className)}>
-	<Field.Input {placeholder} value={globalFilter} oninput={handleInput}>
-		{#snippet startIcon()}
-			<PhMagnifyingGlass class="size-4" />
-		{/snippet}
-		{#snippet endIcon()}
-			{#if globalFilter}
-				<button
-					type="button"
-					onclick={clearFilter}
-					aria-label="Clear search"
-					class="flex size-5 items-center justify-center rounded text-ink-dim hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
-				>
-					<PhX class="size-3.5" />
-				</button>
-			{/if}
-		{/snippet}
-	</Field.Input>
-</Field.Root>

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

@@ -1,31 +0,0 @@
-import type { RowData } from '@tanstack/table-core';
-import { type ClassValue } from 'tailwind-variants';
-import { type DataTableInstance } from '../data-table-utils';
-declare function $$render<T extends RowData>(): {
-    props: {
-        table: DataTableInstance<T>;
-        placeholder?: string;
-        class?: ClassValue;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends RowData> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DataTableSearch: $$IsomorphicComponent;
-type DataTableSearch<T extends RowData> = InstanceType<typeof DataTableSearch<T>>;
-export default DataTableSearch;

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

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		class?: ClassValue;
-		children?: Snippet;
-		center?: Snippet;
-		right?: Snippet;
-	};
-
-	let { class: className, children, center, right, ...rest }: Props = $props();
-</script>
-
-<div
-	class={cn('mb-4 grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3', className)}
-	{...rest}
->
-	<div class="col-start-1 row-start-1 flex min-w-0 flex-wrap items-center gap-3 justify-self-start">
-		{@render children?.()}
-	</div>
-
-	{#if center}
-		<div
-			class="col-start-2 row-start-1 flex min-w-0 flex-wrap items-center justify-center gap-3 justify-self-center"
-		>
-			{@render center()}
-		</div>
-	{/if}
-
-	{#if right}
-		<div
-			class="col-start-3 row-start-1 flex min-w-0 flex-wrap items-center justify-end gap-3 justify-self-end"
-		>
-			{@render right()}
-		</div>
-	{/if}
-</div>

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

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