Bugfix: reinstate Pagination count property (#3026)

.changeset/blue-moles-swim.md

@@ -0,0 +1,6 @@
+---
+'@skeletonlabs/skeleton-svelte': patch
+'@skeletonlabs/skeleton-react': patch
+---
+
+bugfix: Reinstate Pagination `count` prop.

packages/skeleton-react/src/lib/components/Pagination/Pagination.tsx

@@ -44,7 +44,8 @@ export const Pagination: FC<PaginationProps> = ({
 	const [state, send] = useMachine(
 		pagination.machine({
 			id: useId(),
-			count: data.length
+			// Use 'count' if specified; required for server-side pagination.
+			count: zagProps.count ?? data.length
 		}),
 		{ context: zagProps }
 	);

packages/skeleton-react/src/lib/components/Pagination/types.ts

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
 import * as pagination from '@zag-js/pagination';
 
-export interface PaginationProps extends Omit<pagination.Context, 'id'> {
+export interface PaginationProps extends Omit<pagination.Context, 'id' | 'count'> {
 	// Provide source data as an array.
 	data: unknown[];
+	/** Total number of data items. Required for server-side pagination. */
+	count?: number;
+
 	// Enables alternative display with stats and first/last buttons.
 	alternative?: boolean;
 	/** Set the separator text or character, such as "of" in "X of Y". */

packages/skeleton-svelte/src/lib/components/Pagination/Pagination.svelte

@@ -64,7 +64,8 @@
 					return pageSize;
 				},
 				get count() {
-					return data.length;
+					// Use 'count' if specified; required for server-side pagination.
+					return zagProps.count ?? data.length;
 				}
 			}
 		}

packages/skeleton-svelte/src/lib/components/Pagination/types.ts

@@ -2,13 +2,15 @@ import type { Snippet } from 'svelte';
 import * as pagination from '@zag-js/pagination';
 
 export interface PaginationProps extends Omit<pagination.Context, 'id' | 'page' | 'pageSize' | 'count'> {
+	// Provide source data as an array.
+	data: unknown[];
+	/** Total number of data items. Required for server-side pagination. */
+	count?: number;
 	/** Bind the current page. */
 	page: number;
 	/** Bind the number of data items to display. */
 	pageSize: number;
 
-	// Provide source data as an array.
-	data: unknown[];
 	// Enables alternative display with stats and first/last buttons.
 	alternative?: boolean;
 	/** Set the separator text or character, such as "of" in "X of Y". */

packages/skeleton-svelte/tailwind.config.js

@@ -4,6 +4,8 @@
 import { skeleton } from '@skeletonlabs/skeleton/plugin';
 import * as themes from '@skeletonlabs/skeleton/themes';
 
+import forms from '@tailwindcss/forms';
+
 /** @type {import('tailwindcss').Config}*/
 export default {
 	darkMode: 'class',
@@ -12,7 +14,7 @@ export default {
 		extend: {}
 	},
 	plugins: [
-		require('@tailwindcss/forms'),
+		forms,
 		skeleton({
 			themes: [themes.cerberus, themes.catppuccin, themes.pine, themes.rose]
 		})