@delightstack/components 0.1.0

package/dist/navigation/Pagination.svelte

@@ -0,0 +1,641 @@
+<script lang="ts">
+	import { ripple } from '@delightstack/utilities';
+
+	const propId = $props.id();
+	let {
+		/** Current page number (1-based) */
+		page = $bindable(1),
+
+		/** Total number of pages */
+		total_pages,
+
+		/** Total number of items (used for info display) */
+		total_items = undefined as number | undefined,
+
+		/** Number of items per page */
+		page_size = $bindable(10),
+
+		/** Options for the page size selector */
+		page_size_options = [10, 25, 50, 100],
+
+		/** Simple mode: prev/next with "Page X of Y" */
+		simple = false,
+
+		/** Compact mode: minimal prev/next with "X / Y" */
+		compact = false,
+
+		/** Show a page size selector */
+		show_page_size = false,
+
+		/** Show item range info ("Showing X-Y of Z") */
+		show_info = false,
+
+		/** Number of sibling pages to show around the current page */
+		sibling_count = 1,
+
+		/** Number of pages to always show at the start and end */
+		boundary_count = 1,
+
+		/** Size of the pagination buttons */
+		size = '1' as '0' | '1' | '2' | '3',
+
+		/** Show skeleton placeholder */
+		skeleton = false,
+
+		/** Element ID */
+		id = propId,
+
+		/** Additional CSS classes */
+		class: class_name = '',
+
+		/** Callback when the page changes */
+		onchange = undefined as ((detail: { page: number }) => void) | undefined,
+
+		/** Callback when the page size changes */
+		onpagesizechange = undefined as ((detail: { page_size: number }) => void) | undefined,
+	}: {
+		page?: number;
+		total_pages: number;
+		total_items?: number;
+		page_size?: number;
+		page_size_options?: number[];
+		simple?: boolean;
+		compact?: boolean;
+		show_page_size?: boolean;
+		show_info?: boolean;
+		sibling_count?: number;
+		boundary_count?: number;
+		size?: '0' | '1' | '2' | '3';
+		skeleton?: boolean;
+		id?: string;
+		class?: string;
+		onchange?: (detail: { page: number }) => void;
+		onpagesizechange?: (detail: { page_size: number }) => void;
+	} = $props();
+
+	const SIZE_MAP: Record<
+		string,
+		{ min_width: string; height: string; font_size: string }
+	> = {
+		'0': {
+			min_width: '1.5rem',
+			height: '1.5rem',
+			font_size: 'var(--text-sm, 0.75rem)',
+		},
+		'1': { min_width: '2rem', height: '2rem', font_size: 'var(--text-base, 0.875rem)' },
+		'2': { min_width: '2.5rem', height: '2.5rem', font_size: 'var(--text-lg, 1rem)' },
+		'3': { min_width: '3rem', height: '3rem', font_size: 'var(--text-xl, 1.125rem)' },
+	};
+
+	const sizeConfig = $derived(SIZE_MAP[size] || SIZE_MAP['1']);
+
+	const isFirstPage = $derived(page <= 1);
+	const isLastPage = $derived(page >= total_pages);
+
+	/**
+	 * Ellipsis algorithm: compute the list of page numbers and ellipsis markers.
+	 * Returns an array of numbers (page numbers) and strings ('...') for gaps.
+	 */
+	const pageRange = $derived.by(() => {
+		if (total_pages <= 0) return [];
+
+		const range: (number | '...')[] = [];
+
+		// Compute boundary sets
+		const startBoundary = Math.min(boundary_count, total_pages);
+		const endBoundaryStart = Math.max(
+			total_pages - boundary_count + 1,
+			startBoundary + 1,
+		);
+
+		// Compute sibling range around current page
+		const siblingStart = Math.max(page - sibling_count, 1);
+		const siblingEnd = Math.min(page + sibling_count, total_pages);
+
+		// Collect all page numbers that should appear
+		const pages = new Set<number>();
+
+		// Add start boundary pages
+		for (let i = 1; i <= startBoundary; i++) {
+			pages.add(i);
+		}
+
+		// Add end boundary pages
+		for (let i = endBoundaryStart; i <= total_pages; i++) {
+			pages.add(i);
+		}
+
+		// Add sibling pages (and current page)
+		for (let i = siblingStart; i <= siblingEnd; i++) {
+			pages.add(i);
+		}
+
+		// Convert to sorted array and insert ellipses for gaps
+		const sorted = [...pages].sort((a, b) => a - b);
+
+		for (let i = 0; i < sorted.length; i++) {
+			if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
+				range.push('...');
+			}
+			range.push(sorted[i]);
+		}
+
+		return range;
+	});
+
+	const infoText = $derived.by(() => {
+		if (!show_info || total_items === undefined) return '';
+		const start = (page - 1) * page_size + 1;
+		const end = Math.min(page * page_size, total_items);
+		return `Showing ${start}\u2013${end} of ${total_items}`;
+	});
+
+	function goToPage(newPage: number) {
+		if (newPage < 1 || newPage > total_pages || newPage === page) return;
+		page = newPage;
+		onchange?.({ page: newPage });
+	}
+
+	function handlePrev() {
+		goToPage(page - 1);
+	}
+
+	function handleNext() {
+		goToPage(page + 1);
+	}
+
+	function handlePageSizeChange(e: Event) {
+		const target = e.target as HTMLSelectElement;
+		const newSize = Number(target.value);
+		page_size = newSize;
+		page = 1;
+		onpagesizechange?.({ page_size: newSize });
+		onchange?.({ page: 1 });
+	}
+
+	// Skeleton page placeholders mirror the real pageRange when total_pages is
+	// already known, so skeleton ↔ loaded swaps without layout shift; otherwise
+	// fall back to a typical "1 … 5 [6] 7 … 11" run (7 cells).
+	const skeletonPageCount = $derived(total_pages > 0 ? pageRange.length : 7);
+</script>
+
+<nav
+	{id}
+	class={['pagination', class_name].filter(Boolean).join(' ')}
+	class:skeleton
+	aria-label="Pagination"
+	aria-hidden={skeleton || undefined}
+	style:--pg-min-width={sizeConfig.min_width}
+	style:--pg-height={sizeConfig.height}
+	style:--pg-font-size={sizeConfig.font_size}>
+	{#if skeleton}
+		<!-- Placeholders mirror the real layout per mode (and the optional
+		     page-size / info slots) so the swap to live controls never shifts. -->
+		{@const delay_base = (show_page_size ? 1 : 0) + (show_info ? 1 : 0)}
+		{#if show_page_size}
+			<span class="page-size">
+				<span class="skeleton-bar" style:width="2em" style:--shimmer-delay="0ms"></span>
+				<span class="skeleton-select" style:--shimmer-delay="0ms"></span>
+			</span>
+		{/if}
+		{#if show_info}
+			<span class="info">
+				<span
+					class="skeleton-bar"
+					style:width="9em"
+					style:--shimmer-delay="{(show_page_size ? 1 : 0) * 120}ms">
+				</span>
+			</span>
+		{/if}
+		<div class="pagination-controls">
+			{#if compact}
+				<span class="skeleton-page" style:--shimmer-delay="{delay_base * 120}ms"></span>
+				<span class="compact-info">
+					<span
+						class="skeleton-bar"
+						style:width="2.5em"
+						style:--shimmer-delay="{(delay_base + 1) * 120}ms">
+					</span>
+				</span>
+				<span class="skeleton-page" style:--shimmer-delay="{(delay_base + 2) * 120}ms">
+				</span>
+			{:else if simple}
+				<span class="skeleton-nav" style:--shimmer-delay="{delay_base * 120}ms"></span>
+				<span class="simple-info">
+					<span
+						class="skeleton-bar"
+						style:width="5.5em"
+						style:--shimmer-delay="{(delay_base + 1) * 120}ms">
+					</span>
+				</span>
+				<span class="skeleton-nav" style:--shimmer-delay="{(delay_base + 2) * 120}ms">
+				</span>
+			{:else}
+				<span class="skeleton-nav" style:--shimmer-delay="{delay_base * 120}ms"></span>
+				{#each { length: skeletonPageCount } as _, i}
+					<span
+						class="skeleton-page"
+						style:--shimmer-delay="{(delay_base + 1 + i) * 120}ms">
+					</span>
+				{/each}
+				<span
+					class="skeleton-nav"
+					style:--shimmer-delay="{(delay_base + 1 + skeletonPageCount) * 120}ms">
+				</span>
+			{/if}
+		</div>
+	{:else}
+		{#if show_page_size}
+			<label class="page-size">
+				<span>Rows</span>
+				<select value={String(page_size)} onchange={handlePageSizeChange}>
+					{#each page_size_options as opt}
+						<option value={String(opt)} selected={opt === page_size}>{opt}</option>
+					{/each}
+				</select>
+			</label>
+		{/if}
+
+		{#if show_info && infoText}
+			<span class="info">{infoText}</span>
+		{/if}
+
+		<div class="pagination-controls">
+			{#if compact}
+				<!-- Compact mode: < 6 / 11 > -->
+				<button
+					type="button"
+					disabled={isFirstPage}
+					aria-disabled={isFirstPage}
+					aria-label="Go to previous page"
+					{@attach ripple({ zIndex: 1 })}
+					onclick={handlePrev}>
+					<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M15 18l-6-6 6-6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							fill="none" />
+					</svg>
+				</button>
+				<span class="compact-info">{page} / {total_pages}</span>
+				<button
+					type="button"
+					disabled={isLastPage}
+					aria-disabled={isLastPage}
+					aria-label="Go to next page"
+					{@attach ripple({ zIndex: 1 })}
+					onclick={handleNext}>
+					<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M9 18l6-6-6-6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							fill="none" />
+					</svg>
+				</button>
+			{:else if simple}
+				<!-- Simple mode: < Prev   Page 6 of 11   Next > -->
+				<button
+					type="button"
+					disabled={isFirstPage}
+					aria-disabled={isFirstPage}
+					aria-label="Go to previous page"
+					{@attach ripple({ zIndex: 1 })}
+					onclick={handlePrev}>
+					<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M15 18l-6-6 6-6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							fill="none" />
+					</svg>
+					<span>Prev</span>
+				</button>
+				<span class="simple-info">Page {page} of {total_pages}</span>
+				<button
+					type="button"
+					disabled={isLastPage}
+					aria-disabled={isLastPage}
+					aria-label="Go to next page"
+					{@attach ripple({ zIndex: 1 })}
+					onclick={handleNext}>
+					<span>Next</span>
+					<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M9 18l6-6-6-6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							fill="none" />
+					</svg>
+				</button>
+			{:else}
+				<!-- Default mode: < Prev  1  2  ...  5  [6]  7  ...  10  11  Next > -->
+				<button
+					type="button"
+					disabled={isFirstPage}
+					aria-disabled={isFirstPage}
+					aria-label="Go to previous page"
+					{@attach ripple({ zIndex: 1 })}
+					onclick={handlePrev}>
+					<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M15 18l-6-6 6-6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							fill="none" />
+					</svg>
+					<span>Prev</span>
+				</button>
+
+				{#each pageRange as item}
+					{#if item === '...'}
+						<span class="ellipsis" aria-hidden="true">&hellip;</span>
+					{:else}
+						<button
+							type="button"
+							class:current={item === page}
+							aria-current={item === page ? 'page' : undefined}
+							aria-label="Go to page {item}"
+							{@attach ripple({ zIndex: 1 })}
+							onclick={() => goToPage(item)}>
+							{item}
+						</button>
+					{/if}
+				{/each}
+
+				<button
+					type="button"
+					disabled={isLastPage}
+					aria-disabled={isLastPage}
+					aria-label="Go to next page"
+					{@attach ripple({ zIndex: 1 })}
+					onclick={handleNext}>
+					<span>Next</span>
+					<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M9 18l6-6-6-6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							fill="none" />
+					</svg>
+				</button>
+			{/if}
+		</div>
+	{/if}
+</nav>
+
+<style>
+	.pagination {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		font-size: var(--pg-font-size);
+		perspective: 100px;
+	}
+
+	/* ========== Skeleton ========== */
+	.pagination.skeleton {
+		pointer-events: none;
+	}
+
+	/* Every placeholder shape shares the token-driven shimmer surface. */
+	.skeleton-nav,
+	.skeleton-page,
+	.skeleton-select,
+	.skeleton-bar {
+		position: relative;
+		overflow: hidden;
+		background: var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / 0.1));
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			transform: translateX(-100%);
+			background-image: linear-gradient(
+				105deg,
+				transparent 25%,
+				var(--skeleton-sheen, rgb(from var(--color-text, #888) r g b / 0.12)) 50%,
+				transparent 75%
+			);
+			animation: delight-skeleton-shimmer var(--skeleton-duration, 2.4s) ease-in-out
+				infinite;
+			animation-delay: var(--shimmer-delay, 0s);
+		}
+	}
+
+	/* Mirrors the real button's box: --pg-min-width × --pg-height for page
+	   numbers (and compact icon-only prev/next); the wider prev/next variant
+	   approximates icon + label + padding. Same radius (+ squircle) as the
+	   real buttons. */
+	.skeleton-nav,
+	.skeleton-page,
+	.skeleton-select {
+		flex-shrink: 0;
+		height: var(--pg-height);
+		border-radius: var(--radius-md, 0.375rem);
+		@supports (corner-shape: squircle) {
+			corner-shape: squircle;
+			border-radius: calc(var(--radius-md, 0.375rem) * var(--squircle-ratio, 2));
+		}
+	}
+
+	.skeleton-page {
+		width: var(--pg-min-width);
+	}
+
+	.skeleton-nav {
+		width: 4.25em;
+	}
+
+	.skeleton-select {
+		width: 3.25em;
+	}
+
+	/* Text placeholder: a text-height pill standing in for the info strings. */
+	.skeleton-bar {
+		display: inline-block;
+		vertical-align: middle;
+		height: 0.7em;
+		border-radius: var(--radius-full, 1e5px);
+	}
+
+	.pagination-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--pg-min-width);
+		height: var(--pg-height);
+		border-radius: var(--radius-md, 0.375rem);
+		@supports (corner-shape: squircle) {
+			corner-shape: squircle;
+			border-radius: calc(var(--radius-md, 0.375rem) * var(--squircle-ratio, 2));
+		}
+		border: none;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		margin: 0;
+		padding: 0 0.375em;
+		font: inherit;
+		font-size: inherit;
+		line-height: 1;
+		gap: 0.25em;
+		/* Positioned + clipped so the click ripple anchors to (and rounds with) the
+		   button, matching Button.svelte. */
+		position: relative;
+		overflow: hidden;
+		/* Base governs the OUT transition — the hover background eases away on leave.
+		   `:hover` below re-declares `transition` without `background`, so the tint
+		   snaps in instantly (see packages/components/CLAUDE.md). */
+		transition:
+			background 300ms,
+			transform 200ms ease;
+		white-space: nowrap;
+
+		/* Hover tint matches the Table's row-hover wash so it reads clearly on any
+		   surface. Excludes `.current`: the active page button does nothing on click,
+		   so it gets no hover affordance. Snaps in (transition drops `background`),
+		   eases out via the base rule. */
+		&:hover:not(:disabled):not(.current) {
+			background: light-dark(
+				rgb(from var(--color-text, #000) r g b / 0.06),
+				rgb(from var(--color-text, #fff) r g b / 0.08)
+			);
+			transition: transform 200ms ease;
+		}
+		/* Press: a perspective Z-push that reads as a scale-down toward the button's
+		   OWN centre. The `perspective()` lives in the button's own transform (not on
+		   a shared parent), so each button's vanishing point is its own centre rather
+		   than the container's — same feel as Button.svelte's press. */
+		&:active:not(:disabled) {
+			transform: perspective(100px)
+				translate3d(0, 1px, clamp(-10px, calc(0.2em - 12px), -2px));
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--color-action, #2563eb);
+			outline-offset: 1px;
+		}
+
+		/* The active page button is non-interactive (clicking it is a no-op), so it
+		   keeps its solid background with no hover change. It still presses + ripples
+		   for tactile feedback. */
+		&.current {
+			background: var(--color-action, #2563eb);
+			color: var(--color-action-text, white);
+		}
+
+		&:disabled {
+			opacity: 0.4;
+			cursor: not-allowed;
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+	}
+
+	.ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--pg-min-width);
+		height: var(--pg-height);
+		line-height: 1;
+		color: var(--color-text-muted, #6b7280);
+		user-select: none;
+	}
+
+	.simple-info {
+		padding: 0 0.75em;
+		white-space: nowrap;
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	.compact-info {
+		padding: 0 0.25em;
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.info {
+		white-space: nowrap;
+		color: var(--color-text-muted, #6b7280);
+		font-size: 0.875em;
+	}
+
+	.page-size {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		white-space: nowrap;
+		font-size: 0.875em;
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	select {
+		appearance: auto;
+		border: 1px solid
+			light-dark(var(--color-border, #d1d5db), var(--color-border, #4b5563));
+		border-radius: var(--radius-md, 0.375rem);
+		@supports (corner-shape: squircle) {
+			corner-shape: squircle;
+			border-radius: calc(var(--radius-md, 0.375rem) * var(--squircle-ratio, 2));
+		}
+		background: light-dark(var(--color-bg, white), var(--color-bg, #0a0a0a));
+		color: inherit;
+		font-size: inherit;
+		font-family: inherit;
+		padding: 0.25em 0.5em;
+		height: var(--pg-height);
+		cursor: pointer;
+
+		&:focus-visible {
+			outline: 2px solid var(--color-action, #2563eb);
+			outline-offset: 1px;
+		}
+	}
+
+	@keyframes -global-delight-skeleton-shimmer {
+		0% {
+			transform: translateX(-100%);
+		}
+		55%,
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton-nav::after,
+		.skeleton-page::after,
+		.skeleton-select::after,
+		.skeleton-bar::after {
+			animation: none;
+		}
+
+		button {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,27 @@
+type $$ComponentProps = {
+    page?: number;
+    total_pages: number;
+    total_items?: number;
+    page_size?: number;
+    page_size_options?: number[];
+    simple?: boolean;
+    compact?: boolean;
+    show_page_size?: boolean;
+    show_info?: boolean;
+    sibling_count?: number;
+    boundary_count?: number;
+    size?: '0' | '1' | '2' | '3';
+    skeleton?: boolean;
+    id?: string;
+    class?: string;
+    onchange?: (detail: {
+        page: number;
+    }) => void;
+    onpagesizechange?: (detail: {
+        page_size: number;
+    }) => void;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page" | "page_size">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

package/dist/navigation/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../src/navigation/Pagination.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3D,CAAC;AA8RH,QAAA,MAAM,UAAU,wEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}