@marianmeres/stuic 3.167.0 → 3.168.0

package/dist/components/EmptyState/README.md

@@ -0,0 +1,188 @@
+# EmptyState
+
+Icon + title + description + CTA placeholder for empty lists, tables, and search
+results. Centered, theme-aware, and non-interactive by itself — the CTA area is a
+snippet you fill with your own `Button`s or links. Pairs naturally with `DataTable`
+("no rows"), search UIs ("no results"), and first-run dashboard tiles.
+
+## Props
+
+| Prop               | Type                               | Default   | Description                                       |
+| ------------------ | ---------------------------------- | --------- | ------------------------------------------------- |
+| `icon`             | `THC`                              | -         | Icon area content (e.g. `{ html: iconSearch() }`) |
+| `title`            | `THC`                              | -         | Title headline                                    |
+| `description`      | `THC`                              | -         | Short supporting text below the title             |
+| `variant`          | `"plain" \| "outline" \| "dashed"` | `"plain"` | Container treatment (bordered box or none)        |
+| `size`             | `"sm" \| "md" \| "lg"`             | `"md"`    | Padding, icon and typography scale                |
+| `unstyled`         | `boolean`                          | `false`   | Skip all default styling                          |
+| `class`            | `string`                           | -         | Additional CSS classes (merged via twMerge)       |
+| `classIcon`        | `string`                           | -         | Class for the icon area                           |
+| `classTitle`       | `string`                           | -         | Class for the title                               |
+| `classDescription` | `string`                           | -         | Class for the description                         |
+| `classActions`     | `string`                           | -         | Class for the actions area                        |
+| `el`               | `HTMLElement`                      | -         | Element reference (bindable)                      |
+
+## Snippet Props
+
+| Snippet      | Description                                        |
+| ------------ | -------------------------------------------------- |
+| `actions`    | CTA area below the description (buttons, links)    |
+| `renderIcon` | Override the icon area (instead of the `icon` THC) |
+| `children`   | Override the entire default layout                 |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { EmptyState, Button, iconSearch } from "@marianmeres/stuic";
+</script>
+
+<EmptyState
+	icon={{ html: iconSearch() }}
+	title="No results found"
+	description="Try adjusting your search or filters."
+/>
+```
+
+### With CTA
+
+```svelte
+<EmptyState
+	icon={{ html: iconPlus() }}
+	title="No projects yet"
+	description="Create your first project to get started."
+>
+	{#snippet actions()}
+		<Button intent="primary">New project</Button>
+		<Button variant="ghost">Learn more</Button>
+	{/snippet}
+</EmptyState>
+```
+
+### Variants
+
+```svelte
+<!-- No box (default) — for use inside an already-framed area (table body, panel) -->
+<EmptyState variant="plain" title="Nothing here" />
+
+<!-- Bordered container -->
+<EmptyState variant="outline" title="Nothing here" />
+
+<!-- Dashed container — the "drop zone / placeholder" look -->
+<EmptyState variant="dashed" title="Nothing here" />
+```
+
+### Sizes
+
+```svelte
+<EmptyState size="sm" title="No comments" />
+<EmptyState size="md" title="No comments" />
+<EmptyState size="lg" title="No comments" />
+```
+
+### With DataTable
+
+`DataTable` already renders an `EmptyState` (titled with its `no_data` message) when it
+has no rows. Its `empty` snippet replaces that one, which is where an icon, a
+description and a CTA go:
+
+```svelte
+<DataTable {columns} {data}>
+	{#snippet empty()}
+		<EmptyState
+			icon={{ html: iconFile() }}
+			title="No documents"
+			description="Documents you upload will show up here."
+		>
+			{#snippet actions()}
+				<Button intent="primary">Upload</Button>
+			{/snippet}
+		</EmptyState>
+	{/snippet}
+</DataTable>
+```
+
+Swapping the whole table out is the other option — when the empty case should not look
+like a table at all (no header row, no pager):
+
+```svelte
+{#if !rows.length}
+	<EmptyState
+		icon={{ html: iconFile() }}
+		title="No documents"
+		description="Documents you upload will show up here."
+	>
+		{#snippet actions()}
+			<Button intent="primary">Upload</Button>
+		{/snippet}
+	</EmptyState>
+{:else}
+	<DataTable {rows} ... />
+{/if}
+```
+
+### Custom Styling
+
+```svelte
+<!-- Override the entire layout -->
+<EmptyState variant="dashed">
+	<img src="/illustrations/empty.svg" alt="" class="w-40" />
+	<p>Absolutely nothing.</p>
+</EmptyState>
+
+<!-- Override component tokens inline -->
+<EmptyState
+	title="Big icon"
+	icon={{ html: iconSearch() }}
+	style="--stuic-empty-state-icon-size-md: 5rem;"
+/>
+```
+
+## Accessibility
+
+The component renders a plain `<div>` with no implicit role. When an empty state
+replaces content dynamically (e.g. search results updating), pass `role="status"`
+so screen readers announce it:
+
+```svelte
+<EmptyState role="status" title="No results found" />
+```
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable                                    | Default                          | Description                            |
+| ------------------------------------------- | -------------------------------- | -------------------------------------- |
+| `--stuic-empty-state-gap`                   | `0.5rem`                         | Gap between icon/title/description     |
+| `--stuic-empty-state-icon-text`             | `--stuic-color-muted-foreground` | Icon color                             |
+| `--stuic-empty-state-icon-opacity`          | `0.8`                            | Icon opacity                           |
+| `--stuic-empty-state-icon-margin-bottom`    | `0.25rem`                        | Extra space below the icon             |
+| `--stuic-empty-state-title-font-weight`     | `--font-weight-semibold`         | Title font weight                      |
+| `--stuic-empty-state-title-text`            | `--stuic-color-foreground`       | Title color                            |
+| `--stuic-empty-state-description-text`      | `--stuic-color-muted-foreground` | Description color                      |
+| `--stuic-empty-state-description-max-width` | `45ch`                           | Description line-length cap            |
+| `--stuic-empty-state-actions-gap`           | `0.5rem`                         | Gap between CTA buttons                |
+| `--stuic-empty-state-actions-margin-top`    | `1rem`                           | Space above the CTA row                |
+| `--stuic-empty-state-bg`                    | `transparent`                    | Background                             |
+| `--stuic-empty-state-border`                | `--stuic-color-border`           | Border color (outline/dashed variants) |
+| `--stuic-empty-state-border-width`          | `--stuic-border-width`           | Border width (outline/dashed variants) |
+| `--stuic-empty-state-radius`                | `--stuic-radius-container`       | Border radius (outline/dashed)         |
+
+### Size Tokens
+
+Each size (sm, md, lg) has corresponding tokens:
+
+- `--stuic-empty-state-padding-{size}`
+- `--stuic-empty-state-icon-size-{size}` (applied to any `svg` inside the icon area)
+- `--stuic-empty-state-title-font-size-{size}`
+- `--stuic-empty-state-description-font-size-{size}`
+
+## Data Attributes
+
+The component uses data attributes for styling:
+
+- `data-variant` - `"plain" | "outline" | "dashed"`
+- `data-size` - `"sm" | "md" | "lg"`

package/dist/components/EmptyState/index.css

@@ -0,0 +1,154 @@
+/* ============================================================================
+   EMPTY STATE COMPONENT TOKENS
+   Override globally: :root { --stuic-empty-state-icon-size-md: 4rem; }
+   Override locally:  <EmptyState style="--stuic-empty-state-gap: 1rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	--stuic-empty-state-gap: 0.5rem;
+
+	/* Size: sm */
+	--stuic-empty-state-padding-sm: 1.5rem;
+	--stuic-empty-state-icon-size-sm: 2rem;
+	--stuic-empty-state-title-font-size-sm: var(--text-base);
+	--stuic-empty-state-description-font-size-sm: var(--text-xs);
+
+	/* Size: md */
+	--stuic-empty-state-padding-md: 3rem;
+	--stuic-empty-state-icon-size-md: 2.5rem;
+	--stuic-empty-state-title-font-size-md: var(--text-lg);
+	--stuic-empty-state-description-font-size-md: var(--text-sm);
+
+	/* Size: lg */
+	--stuic-empty-state-padding-lg: 4rem;
+	--stuic-empty-state-icon-size-lg: 3rem;
+	--stuic-empty-state-title-font-size-lg: var(--text-xl);
+	--stuic-empty-state-description-font-size-lg: var(--text-base);
+
+	/* Icon */
+	--stuic-empty-state-icon-text: var(--stuic-color-muted-foreground);
+	--stuic-empty-state-icon-opacity: 0.8;
+	--stuic-empty-state-icon-margin-bottom: 0.25rem;
+
+	/* Typography */
+	--stuic-empty-state-title-font-weight: var(--font-weight-semibold);
+	--stuic-empty-state-title-text: var(--stuic-color-foreground);
+	--stuic-empty-state-description-text: var(--stuic-color-muted-foreground);
+	--stuic-empty-state-description-max-width: 45ch;
+
+	/* Actions */
+	--stuic-empty-state-actions-gap: 0.5rem;
+	--stuic-empty-state-actions-margin-top: 1rem;
+
+	/* Outline/dashed variants */
+	--stuic-empty-state-bg: transparent;
+	--stuic-empty-state-border: var(--stuic-color-border);
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		width: 100%;
+		gap: var(--stuic-empty-state-gap);
+		background: var(--stuic-empty-state-bg);
+	}
+
+	/* ============================================================================
+	   SIZE VARIANTS
+	   Each size sets the scale via internal CSS vars consumed by the child areas.
+	   ============================================================================ */
+
+	.stuic-empty-state[data-size="sm"] {
+		padding: var(--stuic-empty-state-padding-sm);
+		--_icon-size: var(--stuic-empty-state-icon-size-sm);
+		--_title-font-size: var(--stuic-empty-state-title-font-size-sm);
+		--_description-font-size: var(--stuic-empty-state-description-font-size-sm);
+	}
+
+	.stuic-empty-state[data-size="md"] {
+		padding: var(--stuic-empty-state-padding-md);
+		--_icon-size: var(--stuic-empty-state-icon-size-md);
+		--_title-font-size: var(--stuic-empty-state-title-font-size-md);
+		--_description-font-size: var(--stuic-empty-state-description-font-size-md);
+	}
+
+	.stuic-empty-state[data-size="lg"] {
+		padding: var(--stuic-empty-state-padding-lg);
+		--_icon-size: var(--stuic-empty-state-icon-size-lg);
+		--_title-font-size: var(--stuic-empty-state-title-font-size-lg);
+		--_description-font-size: var(--stuic-empty-state-description-font-size-lg);
+	}
+
+	/* ============================================================================
+	   CONTAINER VARIANTS
+	   plain (default): no box. outline/dashed: bordered container.
+	   ============================================================================ */
+
+	.stuic-empty-state[data-variant="outline"],
+	.stuic-empty-state[data-variant="dashed"] {
+		border: var(--stuic-empty-state-border-width, var(--stuic-border-width)) solid
+			var(--stuic-empty-state-border);
+		border-radius: var(--stuic-empty-state-radius, var(--stuic-radius-container));
+	}
+
+	.stuic-empty-state[data-variant="dashed"] {
+		border-style: dashed;
+	}
+
+	/* ============================================================================
+	   ICON AREA
+	   ============================================================================ */
+
+	.stuic-empty-state-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--stuic-empty-state-icon-text);
+		opacity: var(--stuic-empty-state-icon-opacity);
+		margin-bottom: var(--stuic-empty-state-icon-margin-bottom);
+	}
+
+	/* Normalize any passed svg icon to the size preset (like DismissibleMessage) */
+	.stuic-empty-state-icon svg {
+		width: var(--_icon-size);
+		height: var(--_icon-size);
+	}
+
+	/* ============================================================================
+	   TITLE + DESCRIPTION
+	   ============================================================================ */
+
+	.stuic-empty-state-title {
+		font-size: var(--_title-font-size);
+		font-weight: var(--stuic-empty-state-title-font-weight);
+		color: var(--stuic-empty-state-title-text);
+	}
+
+	.stuic-empty-state-description {
+		font-size: var(--_description-font-size);
+		color: var(--stuic-empty-state-description-text);
+		max-width: var(--stuic-empty-state-description-max-width);
+	}
+
+	/* ============================================================================
+	   ACTIONS (CTA)
+	   ============================================================================ */
+
+	.stuic-empty-state-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-empty-state-actions-gap);
+		margin-top: var(--stuic-empty-state-actions-margin-top);
+	}
+}

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

@@ -0,0 +1 @@
+export { default as EmptyState, type Props as EmptyStateProps, type EmptyStateVariant, type EmptyStateSize, } from "./EmptyState.svelte";

package/dist/components/EmptyState/index.js

@@ -0,0 +1 @@
+export { default as EmptyState, } from "./EmptyState.svelte";

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,250 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { PagingCalcResult } from "@marianmeres/paging-store";
+	import type { TranslateFn } from "../../types.js";
+	import type { ButtonSize } from "../Button/Button.svelte";
+
+	export type PaginationVariant = "compact" | "numbers";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+		/**
+		 * Paging calculation result from `@marianmeres/paging-store` — the exact shape
+		 * `DataTable` consumes, so both can be fed from the same store or `calculatePaging`
+		 * call. Takes precedence over the `total`/`limit`/`offset` convenience props.
+		 */
+		paging?: PagingCalcResult;
+		/** Convenience alternative to `paging`: total number of items in the dataset. */
+		total?: number;
+		/** Convenience alternative to `paging`: items per page (default 10). */
+		limit?: number;
+		/** Convenience alternative to `paging`: current offset (default 0). */
+		offset?: number;
+		/**
+		 * Callback when the user navigates to a different page. First argument is the new
+		 * offset (`DataTable`'s `onPageChange` signature), second is the 1-based target page.
+		 */
+		onPageChange?: (offset: number, page: number) => void;
+		/**
+		 * `"compact"` (default): prev / "Page X of Y" / next — the `DataTable` pager.
+		 * `"numbers"`: windowed page-number buttons with ellipsis gaps.
+		 */
+		variant?: PaginationVariant;
+		/** Numbers variant: pages always shown around the current page (default 1). */
+		siblingCount?: number;
+		/** Numbers variant: pages always shown at the start and at the end (default 1). */
+		boundaryCount?: number;
+		/** Render first/last jump buttons (default false). */
+		showFirstLast?: boolean;
+		/**
+		 * Render the "Page X of Y" info. Defaults per variant: `true` for compact (between
+		 * prev/next), `false` for numbers (after the buttons when enabled).
+		 */
+		showInfo?: boolean;
+		/**
+		 * Render nothing when there is at most one page (default true — the `DataTable`
+		 * rule: one page of results needs no pager). Set `false` to keep it visible.
+		 */
+		hideSinglePage?: boolean;
+		/** Disable all controls (e.g. while a page of data is loading). */
+		disabled?: boolean;
+		/** Size preset passed to the inner Buttons (default "sm", as in `DataTable`). */
+		size?: ButtonSize;
+		/** i18n translate function (see `createPaginationT`). */
+		t?: TranslateFn;
+		/** Override the "Page X of Y" info content. */
+		renderInfo?: Snippet<[PagingCalcResult]>;
+		/** Skip all default styling (inner Buttons keep their own Button styling) */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for every inner button */
+		classButton?: string;
+		/** Extra class for the current-page button (numbers variant) */
+		classButtonCurrent?: string;
+		/** Class for the "Page X of Y" info */
+		classInfo?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { calculatePaging } from "@marianmeres/paging-store";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import { t_default } from "./i18n.js";
+	import { paginationRange } from "./pagination-range.js";
+
+	let {
+		paging,
+		total,
+		limit,
+		offset,
+		onPageChange,
+		variant = "compact",
+		siblingCount = 1,
+		boundaryCount = 1,
+		showFirstLast = false,
+		showInfo,
+		hideSinglePage = true,
+		disabled = false,
+		size = "sm",
+		t = t_default,
+		renderInfo,
+		unstyled = false,
+		class: classProp,
+		classButton: classButtonProp,
+		classButtonCurrent: classButtonCurrentProp,
+		classInfo: classInfoProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let _paging: PagingCalcResult | undefined = $derived(
+		paging ??
+			(total != null || limit != null || offset != null
+				? calculatePaging({ total, limit, offset })
+				: undefined)
+	);
+
+	let _render = $derived(!!_paging && (_paging.pageCount > 1 || !hideSinglePage));
+	let _showInfo = $derived(showInfo ?? variant === "compact");
+
+	let _pages = $derived(
+		variant === "numbers" && _paging
+			? paginationRange(_paging.currentPage, _paging.pageCount, {
+					siblingCount,
+					boundaryCount,
+				})
+			: []
+	);
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-pagination", classProp));
+	let _classButton = $derived(
+		unstyled ? classButtonProp : twMerge("stuic-pagination-button", classButtonProp)
+	);
+	let _classInfo = $derived(
+		unstyled ? classInfoProp : twMerge("stuic-pagination-info", classInfoProp)
+	);
+
+	function goToPage(page: number) {
+		if (!_paging || disabled) return;
+		if (page < 1 || page > _paging.pageCount || page === _paging.currentPage) return;
+		onPageChange?.((page - 1) * _paging.limit, page);
+	}
+</script>
+
+{#if _paging && _render}
+	<nav
+		bind:this={el}
+		class={_class}
+		data-variant={!unstyled ? variant : undefined}
+		aria-label={t("pagination", null, "Pagination")}
+		{...rest}
+	>
+		{#if showFirstLast}
+			<Button
+				variant="ghost"
+				{size}
+				class={_classButton}
+				disabled={disabled || !_paging.hasPrevious}
+				onclick={() => goToPage(1)}
+				aria-label={t("first_page")}
+			>
+				&laquo;
+			</Button>
+		{/if}
+
+		<Button
+			variant="ghost"
+			{size}
+			class={_classButton}
+			disabled={disabled || !_paging.hasPrevious}
+			onclick={() => goToPage(_paging!.currentPage - 1)}
+			aria-label={t("previous_page")}
+		>
+			{#if variant === "compact"}
+				&lsaquo; {t("previous_page")}
+			{:else}
+				&lsaquo;
+			{/if}
+		</Button>
+
+		{#if variant === "numbers"}
+			{#each _pages as item, i (item === "ellipsis" ? `ellipsis-${i}` : item)}
+				{#if item === "ellipsis"}
+					<span
+						class={!unstyled ? "stuic-pagination-ellipsis" : undefined}
+						aria-hidden="true"
+					>
+						&hellip;
+					</span>
+				{:else}
+					{@const isCurrent = item === _paging.currentPage}
+					<Button
+						variant={isCurrent ? "solid" : "ghost"}
+						intent={isCurrent ? "primary" : undefined}
+						{size}
+						class={isCurrent
+							? twMerge(_classButton, classButtonCurrentProp)
+							: _classButton}
+						{disabled}
+						aria-label={t("go_to_page_x", { page: item })}
+						aria-current={isCurrent ? "page" : undefined}
+						data-current={isCurrent ? "true" : undefined}
+						onclick={() => goToPage(item)}
+					>
+						{item}
+					</Button>
+				{/if}
+			{/each}
+		{:else if _showInfo}
+			<span class={_classInfo}>
+				{#if renderInfo}
+					{@render renderInfo(_paging)}
+				{:else}
+					{t("page_x_of_y", { page: _paging.currentPage, pageCount: _paging.pageCount })}
+				{/if}
+			</span>
+		{/if}
+
+		<Button
+			variant="ghost"
+			{size}
+			class={_classButton}
+			disabled={disabled || !_paging.hasNext}
+			onclick={() => goToPage(_paging!.currentPage + 1)}
+			aria-label={t("next_page")}
+		>
+			{#if variant === "compact"}
+				{t("next_page")} &rsaquo;
+			{:else}
+				&rsaquo;
+			{/if}
+		</Button>
+
+		{#if showFirstLast}
+			<Button
+				variant="ghost"
+				{size}
+				class={_classButton}
+				disabled={disabled || !_paging.hasNext}
+				onclick={() => goToPage(_paging!.pageCount)}
+				aria-label={t("last_page")}
+			>
+				&raquo;
+			</Button>
+		{/if}
+
+		{#if variant === "numbers" && _showInfo}
+			<span class={_classInfo}>
+				{#if renderInfo}
+					{@render renderInfo(_paging)}
+				{:else}
+					{t("page_x_of_y", { page: _paging.currentPage, pageCount: _paging.pageCount })}
+				{/if}
+			</span>
+		{/if}
+	</nav>
+{/if}

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

@@ -0,0 +1,69 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { PagingCalcResult } from "@marianmeres/paging-store";
+import type { TranslateFn } from "../../types.js";
+import type { ButtonSize } from "../Button/Button.svelte";
+export type PaginationVariant = "compact" | "numbers";
+export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Paging calculation result from `@marianmeres/paging-store` — the exact shape
+     * `DataTable` consumes, so both can be fed from the same store or `calculatePaging`
+     * call. Takes precedence over the `total`/`limit`/`offset` convenience props.
+     */
+    paging?: PagingCalcResult;
+    /** Convenience alternative to `paging`: total number of items in the dataset. */
+    total?: number;
+    /** Convenience alternative to `paging`: items per page (default 10). */
+    limit?: number;
+    /** Convenience alternative to `paging`: current offset (default 0). */
+    offset?: number;
+    /**
+     * Callback when the user navigates to a different page. First argument is the new
+     * offset (`DataTable`'s `onPageChange` signature), second is the 1-based target page.
+     */
+    onPageChange?: (offset: number, page: number) => void;
+    /**
+     * `"compact"` (default): prev / "Page X of Y" / next — the `DataTable` pager.
+     * `"numbers"`: windowed page-number buttons with ellipsis gaps.
+     */
+    variant?: PaginationVariant;
+    /** Numbers variant: pages always shown around the current page (default 1). */
+    siblingCount?: number;
+    /** Numbers variant: pages always shown at the start and at the end (default 1). */
+    boundaryCount?: number;
+    /** Render first/last jump buttons (default false). */
+    showFirstLast?: boolean;
+    /**
+     * Render the "Page X of Y" info. Defaults per variant: `true` for compact (between
+     * prev/next), `false` for numbers (after the buttons when enabled).
+     */
+    showInfo?: boolean;
+    /**
+     * Render nothing when there is at most one page (default true — the `DataTable`
+     * rule: one page of results needs no pager). Set `false` to keep it visible.
+     */
+    hideSinglePage?: boolean;
+    /** Disable all controls (e.g. while a page of data is loading). */
+    disabled?: boolean;
+    /** Size preset passed to the inner Buttons (default "sm", as in `DataTable`). */
+    size?: ButtonSize;
+    /** i18n translate function (see `createPaginationT`). */
+    t?: TranslateFn;
+    /** Override the "Page X of Y" info content. */
+    renderInfo?: Snippet<[PagingCalcResult]>;
+    /** Skip all default styling (inner Buttons keep their own Button styling) */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for every inner button */
+    classButton?: string;
+    /** Extra class for the current-page button (numbers variant) */
+    classButtonCurrent?: string;
+    /** Class for the "Page X of Y" info */
+    classInfo?: string;
+    /** Bindable element reference */
+    el?: HTMLElement;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "el">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;