dystopia-linear-lib 1.0.0

package/dist/components/combobox/combobox-state.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { ComboboxFilter, ComboboxOption, ComboboxRenderGroup, ComboboxValue } from './Combobox.types.js';
+export declare function defaultFilter<T extends ComboboxValue>(option: ComboboxOption<T>, query: string): boolean;
+export type HighlightPart = {
+    text: string;
+    match: boolean;
+};
+/** Splits a label around the first case-insensitive occurrence of the query. */
+export declare function splitMatch(label: string, query: string): HighlightPart[];
+/**
+ * Everything the state machine needs from the host component. Passed as an
+ * object of getters so props stay the single source of truth (no prop/state
+ * mirroring, no sync loops).
+ */
+export type ComboboxStateDeps<T extends ComboboxValue> = {
+    readonly options: ComboboxOption<T>[];
+    readonly value: T | T[] | undefined;
+    readonly multiple: boolean;
+    readonly manualFilter: boolean;
+    readonly searchDebounce: number;
+    readonly filter: ComboboxFilter<T> | undefined;
+    setValue: (next: T | T[] | undefined) => void;
+    setSearch: (query: string) => void;
+};
+export declare class ComboboxState<T extends ComboboxValue> {
+    #private;
+    open: boolean;
+    /** Raw text in the search box. Updates on every keystroke. */
+    inputValue: string;
+    activeIndex: number;
+    /**
+     * Labels of options that were selected at some point. In remote-search mode
+     * `options` is replaced on every query, so a selected option can vanish from
+     * the list while still being the current value — this cache keeps the trigger
+     * able to render its label.
+     */
+    readonly selectedOptions: SvelteMap<T, ComboboxOption<T>>;
+    constructor(deps: ComboboxStateDeps<T>);
+    get multiple(): boolean;
+    get values(): T[];
+    /**
+     * Local filtering runs off the raw input so results feel instant. The debounce
+     * only delays what we hand to the parent. With `manualFilter` the parent has
+     * already filtered server-side, so we pass its list through untouched.
+     */
+    readonly filtered: ComboboxOption<T>[];
+    readonly groups: ComboboxRenderGroup<T>[];
+    readonly selectedItems: ComboboxOption<T>[];
+    isSelected(value: T): boolean;
+    /** Keeps labels of currently selected options available after `options` changes. */
+    cacheSelected(): void;
+    setInputValue(next: string): void;
+    openMenu(): void;
+    closeMenu(): void;
+    toggleMenu(): void;
+    resetActive(): void;
+    clampActive(): void;
+    /** Moves the highlight by `delta`, skipping disabled options and wrapping around. */
+    move(delta: number): void;
+    moveTo(edge: 'first' | 'last'): void;
+    setActive(index: number): void;
+    select(option: ComboboxOption<T>): void;
+    selectActive(): void;
+    deselect(value: T): void;
+    clear(): void;
+    /** Backspace on an empty query removes the last chip. */
+    popLast(): void;
+    destroy(): void;
+}

package/dist/components/combobox/combobox-state.svelte.js

@@ -0,0 +1,223 @@
+import { SvelteMap } from 'svelte/reactivity';
+function normalize(value) {
+    return value
+        .normalize('NFD')
+        .replace(/\p{Diacritic}/gu, '')
+        .toLowerCase()
+        .trim();
+}
+export function defaultFilter(option, query) {
+    const needle = normalize(query);
+    if (!needle)
+        return true;
+    if (normalize(option.label).includes(needle))
+        return true;
+    return (option.keywords ?? []).some((keyword) => normalize(keyword).includes(needle));
+}
+/** Splits a label around the first case-insensitive occurrence of the query. */
+export function splitMatch(label, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [{ text: label, match: false }];
+    const start = label.toLowerCase().indexOf(needle);
+    if (start === -1)
+        return [{ text: label, match: false }];
+    const parts = [];
+    if (start > 0)
+        parts.push({ text: label.slice(0, start), match: false });
+    parts.push({ text: label.slice(start, start + needle.length), match: true });
+    if (start + needle.length < label.length) {
+        parts.push({ text: label.slice(start + needle.length), match: false });
+    }
+    return parts;
+}
+export class ComboboxState {
+    open = $state(false);
+    /** Raw text in the search box. Updates on every keystroke. */
+    inputValue = $state('');
+    activeIndex = $state(0);
+    /**
+     * Labels of options that were selected at some point. In remote-search mode
+     * `options` is replaced on every query, so a selected option can vanish from
+     * the list while still being the current value — this cache keeps the trigger
+     * able to render its label.
+     */
+    selectedOptions = new SvelteMap();
+    #deps;
+    #timer;
+    constructor(deps) {
+        this.#deps = deps;
+    }
+    get multiple() {
+        return this.#deps.multiple;
+    }
+    get values() {
+        const current = this.#deps.value;
+        if (current === undefined || current === null)
+            return [];
+        return Array.isArray(current) ? current : [current];
+    }
+    /**
+     * Local filtering runs off the raw input so results feel instant. The debounce
+     * only delays what we hand to the parent. With `manualFilter` the parent has
+     * already filtered server-side, so we pass its list through untouched.
+     */
+    filtered = $derived.by(() => {
+        const options = this.#deps.options;
+        if (this.#deps.manualFilter)
+            return options;
+        if (!this.inputValue.trim())
+            return options;
+        const filter = this.#deps.filter ?? defaultFilter;
+        return options.filter((option) => filter(option, this.inputValue));
+    });
+    groups = $derived.by(() => {
+        const groups = [];
+        // Plain lookup object, not a Map: this index is transient scratch space
+        // rebuilt on every recompute, so it must not be reactive.
+        const byKey = Object.create(null);
+        this.filtered.forEach((option, index) => {
+            const key = option.group ?? '';
+            let group = byKey[key];
+            if (!group) {
+                group = { label: option.group, items: [] };
+                byKey[key] = group;
+                groups.push(group);
+            }
+            group.items.push({ option, index });
+        });
+        return groups;
+    });
+    selectedItems = $derived.by(() => this.values.map((value) => this.selectedOptions.get(value) ??
+        this.#deps.options.find((option) => option.value === value) ?? {
+        value,
+        label: String(value)
+    }));
+    isSelected(value) {
+        return this.values.includes(value);
+    }
+    /** Keeps labels of currently selected options available after `options` changes. */
+    cacheSelected() {
+        for (const option of this.#deps.options) {
+            if (this.isSelected(option.value))
+                this.selectedOptions.set(option.value, option);
+        }
+    }
+    setInputValue(next) {
+        this.inputValue = next;
+        this.resetActive();
+        clearTimeout(this.#timer);
+        if (this.#deps.searchDebounce <= 0) {
+            this.#deps.setSearch(next);
+            return;
+        }
+        this.#timer = setTimeout(() => this.#deps.setSearch(next), this.#deps.searchDebounce);
+    }
+    #flushSearch(next) {
+        clearTimeout(this.#timer);
+        this.inputValue = next;
+        this.#deps.setSearch(next);
+    }
+    openMenu() {
+        if (this.open)
+            return;
+        this.open = true;
+        this.resetActive();
+    }
+    closeMenu() {
+        if (!this.open)
+            return;
+        this.open = false;
+        // Single-select commits on pick, so the next open should start clean.
+        if (!this.multiple && this.inputValue)
+            this.#flushSearch('');
+    }
+    toggleMenu() {
+        if (this.open)
+            this.closeMenu();
+        else
+            this.openMenu();
+    }
+    #isEnabled(index) {
+        const option = this.filtered[index];
+        return option !== undefined && !option.disabled;
+    }
+    resetActive() {
+        const next = this.filtered.findIndex((option) => !option.disabled);
+        this.activeIndex = next === -1 ? 0 : next;
+    }
+    clampActive() {
+        if (this.filtered.length === 0) {
+            this.activeIndex = 0;
+            return;
+        }
+        if (this.activeIndex > this.filtered.length - 1 || !this.#isEnabled(this.activeIndex)) {
+            this.resetActive();
+        }
+    }
+    /** Moves the highlight by `delta`, skipping disabled options and wrapping around. */
+    move(delta) {
+        const total = this.filtered.length;
+        if (total === 0)
+            return;
+        let index = this.activeIndex;
+        for (let step = 0; step < total; step += 1) {
+            index = (index + delta + total) % total;
+            if (this.#isEnabled(index)) {
+                this.activeIndex = index;
+                return;
+            }
+        }
+    }
+    moveTo(edge) {
+        const total = this.filtered.length;
+        if (total === 0)
+            return;
+        this.activeIndex = edge === 'first' ? -1 : total;
+        this.move(edge === 'first' ? 1 : -1);
+    }
+    setActive(index) {
+        if (this.#isEnabled(index))
+            this.activeIndex = index;
+    }
+    select(option) {
+        if (option.disabled)
+            return;
+        this.selectedOptions.set(option.value, option);
+        if (this.multiple) {
+            const next = this.isSelected(option.value)
+                ? this.values.filter((value) => value !== option.value)
+                : [...this.values, option.value];
+            this.#deps.setValue(next);
+            // Menu stays open and the query is kept so several picks in a row are cheap
+            // — clearing it here would refire the parent's remote search.
+            return;
+        }
+        this.#deps.setValue(option.value);
+        this.closeMenu();
+    }
+    selectActive() {
+        const option = this.filtered[this.activeIndex];
+        if (option)
+            this.select(option);
+    }
+    deselect(value) {
+        if (this.multiple) {
+            this.#deps.setValue(this.values.filter((current) => current !== value));
+            return;
+        }
+        this.#deps.setValue(undefined);
+    }
+    clear() {
+        this.#deps.setValue(this.multiple ? [] : undefined);
+    }
+    /** Backspace on an empty query removes the last chip. */
+    popLast() {
+        const last = this.values.at(-1);
+        if (last !== undefined)
+            this.deselect(last);
+    }
+    destroy() {
+        clearTimeout(this.#timer);
+    }
+}

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Combobox } from './Combobox.svelte';
+export type { ComboboxProps, ComboboxOption, ComboboxFilter, ComboboxValue, ComboboxLabels, ComboboxRenderGroup, ComboboxRenderItem } from './Combobox.types.js';
+export { comboboxVariants, comboboxOptionVariants, comboboxChipVariants, type ComboboxVariantProps } from './Combobox.variants.js';

package/dist/components/combobox/index.js

@@ -0,0 +1,2 @@
+export { default as Combobox } from './Combobox.svelte';
+export { comboboxVariants, comboboxOptionVariants, comboboxChipVariants } from './Combobox.variants.js';

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

@@ -0,0 +1,113 @@
+<script generics="TFeatures extends TableFeatures, TData extends RowData" lang="ts">
+	import { FlexRender } from '@tanstack/svelte-table';
+	import type { RowData, TableFeatures } from '@tanstack/svelte-table';
+	import { cn } from '../../utils/cn.js';
+	import Table from '../table/Table.svelte';
+	import TableCaption from '../table/TableCaption.svelte';
+	import TableHeader from '../table/TableHeader.svelte';
+	import TableBody from '../table/TableBody.svelte';
+	import TableRow from '../table/TableRow.svelte';
+	import TableHead from '../table/TableHead.svelte';
+	import TableCell from '../table/TableCell.svelte';
+	import EmptyState from '../empty-state/EmptyState.svelte';
+	import type { DataTableProps } from './DataTable.types.js';
+
+	let {
+		table,
+		class: className,
+		classes,
+		labels,
+		empty,
+		caption,
+		expandedRow,
+		...restProps
+	}: DataTableProps<TFeatures, TData> = $props();
+
+	const rows = $derived(table.getRowModel().rows);
+
+	function toggleRowExpanded(row: (typeof rows)[number]) {
+		if ('toggleExpanded' in row) row.toggleExpanded();
+	}
+</script>
+
+<Table class={className} classes={{ table: classes?.table }} {...restProps}>
+	{#if caption}
+		<TableCaption>{@render caption()}</TableCaption>
+	{/if}
+	<TableHeader class={classes?.header}>
+		{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+			<TableRow class={classes?.row}>
+				{#each headerGroup.headers as header (header.id)}
+					{@const sortable = 'getCanSort' in header.column ? header.column.getCanSort() : false}
+					{@const sorted = 'getIsSorted' in header.column ? header.column.getIsSorted() : false}
+					<TableHead
+						class={classes?.head}
+						aria-sort={sortable
+							? sorted === 'asc'
+								? 'ascending'
+								: sorted === 'desc'
+									? 'descending'
+									: 'none'
+							: undefined}
+					>
+						{#if !header.isPlaceholder}
+							<FlexRender {header} />
+						{/if}
+					</TableHead>
+				{/each}
+			</TableRow>
+		{/each}
+	</TableHeader>
+	<TableBody class={classes?.body}>
+		{#if rows.length === 0}
+			<TableRow>
+				<TableCell colspan={table.getAllColumns().length}>
+					{#if empty}
+						{@render empty()}
+					{:else}
+						<EmptyState>
+							{#snippet title()}
+								{labels?.empty ?? 'No data'}
+							{/snippet}
+						</EmptyState>
+					{/if}
+				</TableCell>
+			</TableRow>
+		{:else}
+			{#each rows as row (row.id)}
+				{@const cells = 'getVisibleCells' in row ? row.getVisibleCells() : row.getAllCells()}
+				{@const selected = 'getIsSelected' in row ? row.getIsSelected() : false}
+				{@const expandable = 'getCanExpand' in row ? row.getCanExpand() : false}
+				{@const expanded = expandable && 'getIsExpanded' in row ? row.getIsExpanded() : false}
+				<TableRow
+					class={cn(expandable && 'cursor-pointer', classes?.row)}
+					{selected}
+					data-expanded={expandable && expanded ? '' : undefined}
+					tabindex={expandable ? 0 : undefined}
+					onclick={expandable ? () => toggleRowExpanded(row) : undefined}
+					onkeydown={expandable
+						? (event) => {
+								if (event.key === 'Enter' || event.key === ' ') {
+									event.preventDefault();
+									toggleRowExpanded(row);
+								}
+							}
+						: undefined}
+				>
+					{#each cells as cell (cell.id)}
+						<TableCell class={classes?.cell}>
+							<FlexRender {cell} />
+						</TableCell>
+					{/each}
+				</TableRow>
+				{#if expandable && expanded && expandedRow}
+					<TableRow>
+						<TableCell class={classes?.cell} colspan={cells.length}>
+							{@render expandedRow({ row })}
+						</TableCell>
+					</TableRow>
+				{/if}
+			{/each}
+		{/if}
+	</TableBody>
+</Table>

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

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

package/dist/components/data-table/DataTable.types.d.ts

@@ -0,0 +1,32 @@
+import type { Row, RowData, Table, TableFeatures } from '@tanstack/svelte-table';
+import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
+export interface DataTableLabels {
+    /** Announced when there are no rows. Defaults to "No data". */
+    empty?: string;
+}
+export interface DataTableProps<TFeatures extends TableFeatures, TData extends RowData> extends HTMLTableAttributes {
+    /** The instance you created yourself via `createTable()` — this component never calls it internally. */
+    table: Table<TFeatures, TData>;
+    class?: string;
+    classes?: {
+        table?: string;
+        header?: string;
+        body?: string;
+        row?: string;
+        head?: string;
+        cell?: string;
+    };
+    labels?: DataTableLabels;
+    /** Overrides the default `EmptyState` row shown when `table.getRowModel().rows` is empty. */
+    empty?: Snippet;
+    caption?: Snippet;
+    /**
+     * Rendered as a full-width row beneath any row where `row.getIsExpanded()` is true.
+     * Requires the consumer's `table` to compose `rowExpandingFeature` — a row without
+     * `getCanExpand()` is rendered exactly as before, click-to-expand included.
+     */
+    expandedRow?: Snippet<[{
+        row: Row<TFeatures, TData>;
+    }]>;
+}

package/dist/components/data-table/DataTable.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { DataTableColumnHeaderProps } from './DataTableColumnHeader.types.js';
+
+	let { column, class: className, children }: DataTableColumnHeaderProps = $props();
+
+	const sorted = $derived(column.getIsSorted());
+</script>
+
+{#if column.getCanSort()}
+	<button
+		type="button"
+		onclick={column.getToggleSortingHandler()}
+		class={cn(
+			'-mx-tight inline-flex cursor-pointer appearance-none items-center gap-tight rounded-md px-tight py-0.5 text-sm leading-snug font-medium text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+			className
+		)}
+	>
+		{@render children()}
+		{#if sorted === 'asc'}
+			<svg
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+				class="size-3.5 shrink-0"
+			>
+				<path d="m18 15-6-6-6 6" />
+			</svg>
+		{:else if sorted === 'desc'}
+			<svg
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+				class="size-3.5 shrink-0"
+			>
+				<path d="m6 9 6 6 6-6" />
+			</svg>
+		{:else}
+			<svg
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+				class="size-3.5 shrink-0 text-foreground-faint"
+			>
+				<path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
+			</svg>
+		{/if}
+	</button>
+{:else}
+	{@render children()}
+{/if}

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

@@ -0,0 +1,4 @@
+import type { DataTableColumnHeaderProps } from './DataTableColumnHeader.types.js';
+declare const DataTableColumnHeader: import("svelte").Component<DataTableColumnHeaderProps, {}, "">;
+type DataTableColumnHeader = ReturnType<typeof DataTableColumnHeader>;
+export default DataTableColumnHeader;

package/dist/components/data-table/DataTableColumnHeader.types.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+/**
+ * Structural subset of TanStack's `Column` — matches it without pinning to a
+ * specific `TFeatures`/`TData` instantiation, since a real `Column` from
+ * `rowSortingFeature` satisfies this shape regardless of what else the
+ * consumer's table composes.
+ */
+export interface SortableColumn {
+    getCanSort(): boolean;
+    getIsSorted(): false | 'asc' | 'desc';
+    getToggleSortingHandler(): ((event: unknown) => void) | undefined;
+}
+export interface DataTableColumnHeaderProps {
+    column: SortableColumn;
+    class?: string;
+    children: Snippet;
+}

package/dist/components/data-table/DataTableColumnHeader.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,50 @@
+<script generics="TFeatures extends TableFeatures, TData extends RowData" lang="ts">
+	import type { RowData, TableFeatures } from '@tanstack/svelte-table';
+	import { cn } from '../../utils/cn.js';
+	import { createIds } from '../../utils/id.js';
+	import Label from '../label/Label.svelte';
+	import Select from '../select/Select.svelte';
+	import Pagination from '../pagination/Pagination.svelte';
+	import type { DataTablePaginationProps } from './DataTablePagination.types.js';
+
+	let {
+		table,
+		pageSizeOptions,
+		class: className,
+		classes,
+		labels,
+		size = 'sm',
+		...restProps
+	}: DataTablePaginationProps<TFeatures, TData> = $props();
+
+	const baseId = $props.id();
+	const ids = createIds(baseId, 'page-size');
+
+	const pagination = $derived(table.atoms.pagination.get());
+</script>
+
+<div class={cn('flex flex-wrap items-center justify-between gap-cozy', className)} {...restProps}>
+	<div class="flex items-center gap-tight">
+		<Label for={ids['page-size']} class="font-normal">{labels?.pageSize ?? 'Rows per page'}</Label>
+		<Select
+			id={ids['page-size']}
+			{size}
+			class={cn('w-fit', classes?.pageSize)}
+			classes={{ select: 'focus-visible:ring-0 focus-visible:border-ring' }}
+			value={String(pagination.pageSize)}
+			onchange={(event) => table.setPageSize(Number(event.currentTarget.value))}
+		>
+			{#each pageSizeOptions as option (option)}
+				<option value={String(option)}>{option}</option>
+			{/each}
+		</Select>
+	</div>
+	<Pagination
+		class={classes?.pagination}
+		{size}
+		{labels}
+		currentPage={pagination.pageIndex + 1}
+		totalPages={table.getPageCount()}
+		onPageChange={(page) => table.setPageIndex(page - 1)}
+	/>
+</div>

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

@@ -0,0 +1,26 @@
+import type { RowData, TableFeatures } from '@tanstack/svelte-table';
+import type { DataTablePaginationProps } from './DataTablePagination.types.js';
+declare function $$render<TFeatures extends TableFeatures, TData extends RowData>(): {
+    props: DataTablePaginationProps<TFeatures, TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TFeatures extends TableFeatures, TData extends RowData> {
+    props(): ReturnType<typeof $$render<TFeatures, TData>>['props'];
+    events(): ReturnType<typeof $$render<TFeatures, TData>>['events'];
+    slots(): ReturnType<typeof $$render<TFeatures, TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TFeatures extends TableFeatures, TData extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeatures, TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeatures, TData>['props']>, ReturnType<__sveltets_Render<TFeatures, TData>['events']>, ReturnType<__sveltets_Render<TFeatures, TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TFeatures, TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TFeatures, TData>['exports']>;
+    <TFeatures extends TableFeatures, TData extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<TFeatures, TData>['props']> & {}): ReturnType<__sveltets_Render<TFeatures, TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTablePagination: $$IsomorphicComponent;
+type DataTablePagination<TFeatures extends TableFeatures, TData extends RowData> = InstanceType<typeof DataTablePagination<TFeatures, TData>>;
+export default DataTablePagination;