@loidolt/theme-svelte 0.4.0 → 0.6.0

package/dist/components/DataTable.svelte

@@ -0,0 +1,228 @@
+<script lang="ts" generics="T">
+  import type { Snippet } from 'svelte';
+  import type { HTMLTableAttributes } from 'svelte/elements';
+  import type { DataTableRow, DataTableState } from '../data-table.svelte.js';
+  import EditableCell from '../internal/EditableCell.svelte';
+  import Checkbox from './Checkbox.svelte';
+  import EmptyState from './EmptyState.svelte';
+  import Skeleton from './Skeleton.svelte';
+  import Table from './Table.svelte';
+  import TableHeader from './TableHeader.svelte';
+
+  interface Props extends Omit<HTMLTableAttributes, 'children'> {
+    /** The state from `createDataTable()`. */
+    table: DataTableState<T>;
+    caption?: string;
+    regionLabel?: string;
+    /** Pin the header row. Needs `--ldt-table-height` on the wrapper. */
+    sticky?: boolean;
+    /** Show placeholder rows while data is on its way. */
+    loading?: boolean;
+    loadingRows?: number;
+    /** Shown when no rows remain. Defaults to an `EmptyState` from `emptyTitle`. */
+    empty?: Snippet;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    /** Render each row yourself. Receives the row; output a whole `<tr>`. */
+    row?: Snippet<[DataTableRow<T>]>;
+    /** Accessible name of a row's selection control. */
+    selectLabel?: (row: T) => string;
+    selectAllLabel?: string;
+    /**
+     * Render only the rows scrolled into view — for thousands of rows on one page. Every row must
+     * be `rowHeight` pixels tall, and the wrapper needs `--ldt-table-height` (with `sticky`).
+     */
+    virtual?: { rowHeight: number; overscan?: number };
+    /** Called when an `editable` cell is saved. Update your data in response. */
+    onCellEdit?: (row: T, columnId: string, value: string) => void;
+    editLabel?: (header: string) => string;
+    /** `class` lands on the `<table>`; `wrapperClass` on the scroll container. */
+    class?: string;
+    wrapperClass?: string;
+    ref?: HTMLTableElement | null;
+    wrapperRef?: HTMLDivElement | null;
+  }
+
+  let {
+    table,
+    caption,
+    regionLabel,
+    sticky = false,
+    loading = false,
+    loadingRows = 5,
+    empty,
+    emptyTitle = 'No results',
+    emptyDescription,
+    row: rowSnippet,
+    selectLabel = () => 'Select row',
+    selectAllLabel = 'Select all rows on this page',
+    virtual,
+    onCellEdit,
+    editLabel = (header) => `Edit ${header}`,
+    class: className,
+    wrapperClass,
+    ref = $bindable(null),
+    wrapperRef = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const generatedName = $props.id();
+  const selectable = $derived(table.selection !== 'none');
+  const columnCount = $derived(table.columns.length + (selectable ? 1 : 0));
+  // Rows before this page, so aria-rowindex counts from the top of the whole result.
+  const offset = $derived(
+    table.rows.length === table.rowCount ? 0 : (table.page - 1) * table.pageSize
+  );
+  const described = $derived(table.rows.length < table.rowCount);
+
+  // Virtual window: which slice of the page's rows is in view, plus padding rows above and below.
+  let scrollTop = $state(0);
+  let viewport = $state(0);
+  $effect(() => {
+    if (!virtual || !wrapperRef) return;
+    const node = wrapperRef;
+    const measure = () => {
+      scrollTop = node.scrollTop;
+      viewport = node.clientHeight;
+    };
+    measure();
+    node.addEventListener('scroll', measure, { passive: true });
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => {
+      node.removeEventListener('scroll', measure);
+      observer.disconnect();
+    };
+  });
+  const windowed = $derived.by(() => {
+    const all = table.rows;
+    if (!virtual) return { rows: all, start: 0, before: 0, after: 0 };
+    const { rowHeight, overscan = 6 } = virtual;
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+    // Before the wrapper has been measured (and on the server) render one screenful.
+    const visible = Math.ceil((viewport || rowHeight * 20) / rowHeight) + overscan * 2;
+    const end = Math.min(all.length, start + visible);
+    return {
+      rows: all.slice(start, end),
+      start,
+      before: start * rowHeight,
+      after: (all.length - end) * rowHeight,
+    };
+  });
+</script>
+
+{#snippet nothing()}
+  {#if empty}{@render empty()}{:else}<EmptyState
+      title={emptyTitle}
+      description={emptyDescription}
+    />{/if}
+{/snippet}
+
+{#snippet selectCell(item: DataTableRow<T>)}
+  <td class="ldt-data-table__select">
+    {#if table.selection === 'multiple'}
+      <Checkbox
+        checked={item.selected}
+        disabled={!table.isSelectable(item)}
+        aria-label={selectLabel(item.original)}
+        onCheckedChange={(checked) => table.select(item.id, checked)}
+      />
+    {:else}
+      <input
+        type="radio"
+        class="ldt-data-table__radio"
+        name={generatedName}
+        checked={item.selected}
+        disabled={!table.isSelectable(item)}
+        aria-label={selectLabel(item.original)}
+        onchange={() => table.select(item.id, true)}
+      />
+    {/if}
+  </td>
+{/snippet}
+
+<Table
+  bind:ref
+  bind:wrapperRef
+  {caption}
+  {regionLabel}
+  {sticky}
+  columns={columnCount}
+  empty={!loading && table.rows.length === 0 ? nothing : undefined}
+  class={className}
+  wrapperClass={['ldt-data-table', wrapperClass].filter(Boolean).join(' ')}
+  aria-busy={loading || undefined}
+  aria-rowcount={described ? table.rowCount + 1 : undefined}
+  {...rest}
+>
+  <thead>
+    <tr aria-rowindex={described ? 1 : undefined}>
+      {#if selectable}
+        <th scope="col" class="ldt-data-table__select">
+          {#if table.selection === 'multiple'}
+            <Checkbox
+              checked={table.allSelected}
+              indeterminate={table.someSelected}
+              aria-label={selectAllLabel}
+              onCheckedChange={(checked) => table.toggleAll(checked)}
+            />
+          {:else}<span class="ldt-sr-only">{selectAllLabel}</span>{/if}
+        </th>
+      {/if}
+      {#each table.columns as column (column.id)}
+        <TableHeader
+          sort={column.sortable ? table.sortOf(column.id) : undefined}
+          onSort={column.sortable
+            ? (direction) =>
+                table.sortBy(column.id, direction === 'descending' ? 'descending' : 'ascending')
+            : undefined}
+          align={column.align}
+          style={column.width ? `width: ${column.width}` : undefined}
+          data-hide-below={column.hideBelow}>{column.header}</TableHeader
+        >
+      {/each}
+    </tr>
+  </thead>
+  {#if loading}
+    <tbody>
+      {#each { length: loadingRows }, index (index)}
+        <tr>
+          {#each { length: columnCount }, cell (cell)}<td><Skeleton variant="text" /></td>{/each}
+        </tr>
+      {/each}
+    </tbody>
+  {:else if table.rows.length}
+    <tbody>
+      {#if windowed.before}<tr class="ldt-data-table__spacer" aria-hidden="true"
+          ><td colspan={columnCount} style:height="{windowed.before}px"></td></tr
+        >{/if}
+      {#each windowed.rows as item, index (item.id)}
+        {#if rowSnippet}
+          {@render rowSnippet(item)}
+        {:else}
+          <tr
+            data-selected={item.selected ? '' : undefined}
+            aria-rowindex={described ? offset + windowed.start + index + 2 : undefined}
+            style:height={virtual ? `${virtual.rowHeight}px` : undefined}
+          >
+            {#if selectable}{@render selectCell(item)}{/if}
+            {#each table.columns as column (column.id)}
+              <td data-align={column.align} data-hide-below={column.hideBelow}>
+                {#if column.cell}{@render column.cell(
+                    item.original
+                  )}{:else if column.editable && onCellEdit}<EditableCell
+                    value={table.format(item.original, column)}
+                    label={editLabel(column.header)}
+                    onCommit={(value) => onCellEdit(item.original, column.id, value)}
+                  />{:else}{table.format(item.original, column)}{/if}
+              </td>
+            {/each}
+          </tr>
+        {/if}
+      {/each}
+      {#if windowed.after}<tr class="ldt-data-table__spacer" aria-hidden="true"
+          ><td colspan={columnCount} style:height="{windowed.after}px"></td></tr
+        >{/if}
+    </tbody>
+  {/if}
+</Table>

package/dist/components/DataTable.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
+import type { DataTableRow, DataTableState } from '../data-table.svelte.js';
+declare function $$render<T>(): {
+    props: Omit<HTMLTableAttributes, "children"> & {
+        /** The state from `createDataTable()`. */
+        table: DataTableState<T>;
+        caption?: string;
+        regionLabel?: string;
+        /** Pin the header row. Needs `--ldt-table-height` on the wrapper. */
+        sticky?: boolean;
+        /** Show placeholder rows while data is on its way. */
+        loading?: boolean;
+        loadingRows?: number;
+        /** Shown when no rows remain. Defaults to an `EmptyState` from `emptyTitle`. */
+        empty?: Snippet;
+        emptyTitle?: string;
+        emptyDescription?: string;
+        /** Render each row yourself. Receives the row; output a whole `<tr>`. */
+        row?: Snippet<[DataTableRow<T>]>;
+        /** Accessible name of a row's selection control. */
+        selectLabel?: (row: T) => string;
+        selectAllLabel?: string;
+        /**
+         * Render only the rows scrolled into view — for thousands of rows on one page. Every row must
+         * be `rowHeight` pixels tall, and the wrapper needs `--ldt-table-height` (with `sticky`).
+         */
+        virtual?: {
+            rowHeight: number;
+            overscan?: number;
+        };
+        /** Called when an `editable` cell is saved. Update your data in response. */
+        onCellEdit?: (row: T, columnId: string, value: string) => void;
+        editLabel?: (header: string) => string;
+        /** `class` lands on the `<table>`; `wrapperClass` on the scroll container. */
+        class?: string;
+        wrapperClass?: string;
+        ref?: HTMLTableElement | null;
+        wrapperRef?: HTMLDivElement | null;
+    };
+    exports: {};
+    bindings: "ref" | "wrapperRef";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "wrapperRef";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/components/DataTableColumnVisibility.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" generics="T">
+  import type { DataTableState } from '../data-table.svelte.js';
+  import type { MenuEntry } from '../types.js';
+  import { cx } from '../utils.js';
+  import DropdownMenu from './DropdownMenu.svelte';
+
+  interface Props {
+    table: DataTableState<T>;
+    /** Trigger text. */
+    label?: string;
+    resetLabel?: string;
+    class?: string;
+  }
+
+  let { table, label = 'Columns', resetLabel = 'Show all', class: className }: Props = $props();
+
+  const RESET = '\u0000reset';
+
+  const items = $derived<MenuEntry[]>([
+    {
+      type: 'group',
+      label,
+      items: table.allColumns
+        .filter((column) => column.hideable !== false)
+        .map((column) => ({
+          type: 'checkbox' as const,
+          value: column.id,
+          label: column.header,
+          checked: table.isVisible(column.id),
+        })),
+    },
+    ...(table.hidden.length
+      ? [{ value: RESET, label: resetLabel, separatorBefore: true } satisfies MenuEntry]
+      : []),
+  ]);
+</script>
+
+<DropdownMenu
+  {items}
+  align="end"
+  triggerClass={cx('ldt-button ldt-button--quiet ldt-button--sm', className)}
+  onCheckedChange={(id, checked) => table.setColumnVisible(id, checked)}
+  onSelect={(value) => value === RESET && table.showAllColumns()}
+>
+  {#snippet trigger()}{label}{/snippet}
+</DropdownMenu>

package/dist/components/DataTableColumnVisibility.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { DataTableState } from '../data-table.svelte.js';
+declare function $$render<T>(): {
+    props: {
+        table: DataTableState<T>;
+        /** Trigger text. */
+        label?: string;
+        resetLabel?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(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> = InstanceType<typeof DataTableColumnVisibility<T>>;
+export default DataTableColumnVisibility;

package/dist/components/DataTableFacetedFilter.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" generics="T">
+  import type { DataTableState } from '../data-table.svelte.js';
+  import type { MenuEntry, Option } from '../types.js';
+  import { cx } from '../utils.js';
+  import DropdownMenu from './DropdownMenu.svelte';
+
+  interface Props {
+    table: DataTableState<T>;
+    /** The column to filter. */
+    column: string;
+    /** Trigger text and menu heading. Defaults to the column header. */
+    title?: string;
+    /** Choices. Defaults to the column's `filterOptions`, else the values present in the data. */
+    options?: Option[];
+    /** Show how many rows hold each value. */
+    showCounts?: boolean;
+    clearLabel?: string;
+    /** How the trigger reports a selection, e.g. "Stock, 2 selected". */
+    selectedText?: (count: number) => string;
+    class?: string;
+  }
+
+  let {
+    table,
+    column,
+    title,
+    options,
+    showCounts = true,
+    clearLabel = 'Clear filter',
+    selectedText = (count) => `${count} selected`,
+    class: className,
+  }: Props = $props();
+
+  // Not a value any real option can hold, so the clear row never collides with data.
+  const CLEAR = '\u0000clear';
+
+  const header = $derived(
+    title ?? table.allColumns.find((one) => one.id === column)?.header ?? column
+  );
+  const counts = $derived(table.facets(column));
+  const choices = $derived<Option[]>(
+    options ??
+      table.allColumns.find((one) => one.id === column)?.filterOptions ??
+      [...counts.keys()].sort().map((value) => ({ value, label: value }))
+  );
+  const chosen = $derived.by(() => {
+    const value = table.filters[column];
+    return Array.isArray(value) ? value : [];
+  });
+
+  const items = $derived<MenuEntry[]>([
+    {
+      type: 'group',
+      label: header,
+      items: choices.map((choice) => ({
+        type: 'checkbox' as const,
+        value: choice.value,
+        label: choice.label,
+        checked: chosen.includes(choice.value),
+        disabled: choice.disabled,
+        hint: showCounts ? String(counts.get(choice.value) ?? 0) : undefined,
+      })),
+    },
+    ...(chosen.length
+      ? [{ value: CLEAR, label: clearLabel, separatorBefore: true } satisfies MenuEntry]
+      : []),
+  ]);
+
+  function toggle(value: string, checked: boolean) {
+    table.setFilter(column, checked ? [...chosen, value] : chosen.filter((one) => one !== value));
+  }
+</script>
+
+<DropdownMenu
+  {items}
+  triggerClass={cx('ldt-button ldt-button--quiet ldt-button--sm ldt-facet', className)}
+  onCheckedChange={toggle}
+  onSelect={(value) => value === CLEAR && table.setFilter(column, null)}
+>
+  {#snippet trigger()}
+    <span>{header}</span>{#if chosen.length}<span class="ldt-facet__count"
+        ><span aria-hidden="true">{chosen.length}</span><span class="ldt-sr-only"
+          >, {selectedText(chosen.length)}</span
+        ></span
+      >{/if}
+  {/snippet}
+</DropdownMenu>

package/dist/components/DataTableFacetedFilter.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { DataTableState } from '../data-table.svelte.js';
+import type { Option } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        table: DataTableState<T>;
+        /** The column to filter. */
+        column: string;
+        /** Trigger text and menu heading. Defaults to the column header. */
+        title?: string;
+        /** Choices. Defaults to the column's `filterOptions`, else the values present in the data. */
+        options?: Option[];
+        /** Show how many rows hold each value. */
+        showCounts?: boolean;
+        clearLabel?: string;
+        /** How the trigger reports a selection, e.g. "Stock, 2 selected". */
+        selectedText?: (count: number) => string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableFacetedFilter: $$IsomorphicComponent;
+type DataTableFacetedFilter<T> = InstanceType<typeof DataTableFacetedFilter<T>>;
+export default DataTableFacetedFilter;

package/dist/components/DataTablePagination.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" generics="T">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { DataTableState } from '../data-table.svelte.js';
+  import { cx } from '../utils.js';
+  import Pagination from './Pagination.svelte';
+  import Select from './Select.svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    table: DataTableState<T>;
+    /** Choices for rows per page. An empty list hides the picker. */
+    pageSizes?: number[];
+    pageSizeLabel?: string;
+    /** The status line, e.g. "11–20 of 48 · 3 selected". */
+    summary?: (range: { from: number; to: number; total: number; selected: number }) => string;
+    /** Accessible name of the page navigation. */
+    label?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    table,
+    pageSizes = [10, 25, 50, 100],
+    pageSizeLabel = 'Rows per page',
+    summary = ({ from, to, total, selected }) =>
+      `${total === 0 ? 0 : `${from}–${to}`} of ${total}${selected ? ` · ${selected} selected` : ''}`,
+    label = 'Table pages',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const pageId = $props.id();
+  const from = $derived(table.rowCount === 0 ? 0 : (table.page - 1) * table.pageSize + 1);
+  const to = $derived(Math.min(table.rowCount, table.page * table.pageSize));
+  const sizes = $derived(
+    [...new Set([...pageSizes, ...(Number.isFinite(table.pageSize) ? [table.pageSize] : [])])].sort(
+      (a, b) => a - b
+    )
+  );
+</script>
+
+<div bind:this={ref} class={cx('ldt-data-table-pagination', className)} {...rest}>
+  <!-- Polite, so a screen reader hears the new range after paging or filtering. -->
+  <p class="ldt-data-table-pagination__summary" role="status">
+    {summary({ from, to, total: table.rowCount, selected: table.selectedCount })}
+  </p>
+  {#if sizes.length && Number.isFinite(table.pageSize)}
+    <div class="ldt-data-table-pagination__size">
+      <label for={pageId}>{pageSizeLabel}</label>
+      <Select
+        id={pageId}
+        value={String(table.pageSize)}
+        options={sizes.map((size) => ({ value: String(size), label: String(size) }))}
+        onValueChange={(value) => table.setPageSize(Number(value))}
+      />
+    </div>
+  {/if}
+  {#if table.pageCount > 1}
+    <Pagination
+      {label}
+      count={table.rowCount}
+      perPage={table.pageSize}
+      page={table.page}
+      onPageChange={(page) => table.setPage(page)}
+    />
+  {/if}
+</div>

package/dist/components/DataTablePagination.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DataTableState } from '../data-table.svelte.js';
+declare function $$render<T>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        table: DataTableState<T>;
+        /** Choices for rows per page. An empty list hides the picker. */
+        pageSizes?: number[];
+        pageSizeLabel?: string;
+        /** The status line, e.g. "11–20 of 48 · 3 selected". */
+        summary?: (range: {
+            from: number;
+            to: number;
+            total: number;
+            selected: number;
+        }) => string;
+        /** Accessible name of the page navigation. */
+        label?: string;
+        class?: string;
+        ref?: HTMLDivElement | null;
+    };
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTablePagination: $$IsomorphicComponent;
+type DataTablePagination<T> = InstanceType<typeof DataTablePagination<T>>;
+export default DataTablePagination;

package/dist/components/DataTableSearch.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" generics="T">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { DataTableState } from '../data-table.svelte.js';
+  import Input from './Input.svelte';
+
+  interface Props extends Omit<HTMLInputAttributes, 'value' | 'type'> {
+    table: DataTableState<T>;
+    /** Filter one column instead of searching them all. */
+    column?: string;
+    /** Accessible name, when not wrapped in a `Field`. */
+    label?: string;
+    /** Milliseconds to wait after the last keystroke — worth raising for a server search. */
+    debounce?: number;
+    boxed?: boolean;
+    class?: string;
+    ref?: HTMLInputElement | null;
+  }
+
+  let {
+    table,
+    column,
+    label = 'Search',
+    debounce = 200,
+    boxed = true,
+    placeholder = 'Search',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const current = $derived.by(() => {
+    if (!column) return table.search;
+    const value = table.filters[column];
+    return typeof value === 'string' ? value : '';
+  });
+
+  // The field keeps its own text while the user types; it re-syncs when the table's value
+  // changes from elsewhere (a Clear all, a reset).
+  let text = $derived(current);
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  $effect(() => () => clearTimeout(timer));
+
+  function apply(value: string) {
+    if (column) table.setFilter(column, value);
+    else table.setSearch(value);
+  }
+
+  function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+    const value = event.currentTarget.value;
+    clearTimeout(timer);
+    if (debounce > 0) timer = setTimeout(() => apply(value), debounce);
+    else apply(value);
+  }
+</script>
+
+<Input
+  bind:ref
+  bind:value={text}
+  type="search"
+  aria-label={label}
+  {placeholder}
+  {boxed}
+  class={className}
+  {...rest}
+  oninput={handleInput}
+/>