@clerk/shared 4.0.0-canary.v20260107202600 → 4.0.0-canary.v20260108154421

package/dist/runtime/react/index.js

@@ -13,13 +13,8 @@ const require_telemetry = require('../telemetry-CXXDXYfo.js');
 const require_createDeferredPromise = require('../createDeferredPromise-CFgXzt9g.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
-let swr = require("swr");
-swr = require_chunk.__toESM(swr);
-let swr_infinite = require("swr/infinite");
-swr_infinite = require_chunk.__toESM(swr_infinite);
+let __tanstack_query_core = require("@tanstack/query-core");
 let dequal = require("dequal");
-let swr_mutation = require("swr/mutation");
-swr_mutation = require_chunk.__toESM(swr_mutation);
 
 //#region src/react/hooks/createContextAndHook.ts
 /**
@@ -59,15 +54,6 @@ const createContextAndHook = (displayName, options) => {
 	];
 };
 
-//#endregion
-//#region src/react/providers/SWRConfigCompat.swr.tsx
-/**
-* @internal
-*/
-function SWRConfigCompat({ swrConfig, children }) {
-	return /* @__PURE__ */ react.default.createElement(swr.SWRConfig, { value: swrConfig }, children);
-}
-
 //#endregion
 //#region src/react/contexts.tsx
 const [ClerkInstanceContext, useClerkInstanceContext] = createContextAndHook("ClerkInstanceContext");
@@ -88,8 +74,8 @@ function useOptionsContext() {
 	return context;
 }
 const [OrganizationContextInternal, useOrganizationContext] = createContextAndHook("OrganizationContext");
-const OrganizationProvider = ({ children, organization, swrConfig }) => {
-	return /* @__PURE__ */ react.default.createElement(SWRConfigCompat, { swrConfig }, /* @__PURE__ */ react.default.createElement(OrganizationContextInternal.Provider, { value: { value: { organization } } }, children));
+const OrganizationProvider = ({ children, organization }) => {
+	return /* @__PURE__ */ react.default.createElement(OrganizationContextInternal.Provider, { value: { value: { organization } } }, children);
 };
 /**
 * @internal
@@ -175,83 +161,123 @@ function createCacheKeys(params) {
 		authenticated: params.authenticated
 	};
 }
+
+//#endregion
+//#region src/react/clerk-rq/keep-previous-data.ts
 /**
 * @internal
 */
-function toSWRQuery(keys) {
-	const { queryKey } = keys;
-	return {
-		type: queryKey[0],
-		...queryKey[2],
-		...queryKey[3].args
+function defineKeepPreviousDataFn(enabled) {
+	if (enabled) return function KeepPreviousDataFn(previousData) {
+		return previousData;
 	};
 }
 
 //#endregion
-//#region src/react/hooks/usePagesOrInfinite.shared.ts
+//#region src/react/clerk-rq/use-clerk-query-client.ts
 /**
-* A hook that safely merges user-provided pagination options with default values.
-* It caches initial pagination values (page and size) until component unmount to prevent unwanted rerenders.
-*
-* @internal
-*
-* @example
-* ```typescript
-* // Example 1: With user-provided options
-* const userOptions = { initialPage: 2, pageSize: 20, infinite: true };
-* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
-* useWithSafeValues(userOptions, defaults);
-* // Returns { initialPage: 2, pageSize: 20, infinite: true }
-*
-* // Example 2: With boolean true (use defaults)
-* const params = true;
-* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
-* useWithSafeValues(params, defaults);
-* // Returns { initialPage: 1, pageSize: 10, infinite: false }
+* Creates a recursively self-referential Proxy that safely handles:
+* - Arbitrary property access (e.g., obj.any.prop.path)
+* - Function calls at any level (e.g., obj.a().b.c())
+* - Construction (e.g., new obj.a.b())
 *
-* // Example 3: With undefined options (fallback to defaults)
-* const params = undefined;
-* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
-* useWithSafeValues(params, defaults);
-* // Returns { initialPage: 1, pageSize: 10, infinite: false }
-* ```
+* Always returns itself to allow infinite chaining without throwing.
 */
-const useWithSafeValues = (params, defaultValues) => {
-	const shouldUseDefaults = typeof params === "boolean" && params;
-	const initialPageRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.initialPage : params?.initialPage ?? defaultValues.initialPage);
-	const pageSizeRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.pageSize : params?.pageSize ?? defaultValues.pageSize);
-	const newObj = {};
-	for (const key of Object.keys(defaultValues)) newObj[key] = shouldUseDefaults ? defaultValues[key] : params?.[key] ?? defaultValues[key];
-	return {
-		...newObj,
-		initialPage: initialPageRef.current,
-		pageSize: pageSizeRef.current
-	};
+function createRecursiveProxy(label) {
+	const callableTarget = function noop$1() {};
+	let self;
+	self = new Proxy(callableTarget, {
+		get(_target, prop) {
+			if (prop === "then") return;
+			if (prop === "toString") return () => `[${label}]`;
+			if (prop === Symbol.toPrimitive) return () => 0;
+			return self;
+		},
+		apply() {
+			return self;
+		},
+		construct() {
+			return self;
+		},
+		has() {
+			return false;
+		},
+		set() {
+			return false;
+		}
+	});
+	return self;
+}
+const mockQueryClient = createRecursiveProxy("ClerkMockQueryClient");
+const useClerkQueryClient = () => {
+	const clerk = useClerkInstanceContext();
+	const queryClient = clerk.__internal_queryClient;
+	const [, setQueryClientLoaded] = (0, react.useState)(typeof queryClient === "object" && "__tag" in queryClient && queryClient.__tag === "clerk-rq-client");
+	(0, react.useEffect)(() => {
+		const _setQueryClientLoaded = () => setQueryClientLoaded(true);
+		clerk.on("queryClientStatus", _setQueryClientLoaded);
+		return () => {
+			clerk.off("queryClientStatus", _setQueryClientLoaded);
+		};
+	}, [clerk, setQueryClientLoaded]);
+	const isLoaded = typeof queryClient === "object" && "__tag" in queryClient && queryClient.__tag === "clerk-rq-client";
+	return [queryClient?.client || mockQueryClient, isLoaded];
 };
+
+//#endregion
+//#region src/react/clerk-rq/useBaseQuery.ts
+/**
+* Stripped down version of useBaseQuery from @tanstack/query-core.
+* This implementation allows for an observer to be created every time a query client changes.
+*/
 /**
-* Returns an object containing only the keys from the first object that are not present in the second object.
-* Useful for extracting unique parameters that should be passed to a request while excluding common cache keys.
+* An alternative `useBaseQuery` implementation that allows for an observer to be created every time a query client changes.
 *
 * @internal
+*/
+function useBaseQuery(options, Observer) {
+	const [client, isQueryClientLoaded] = useClerkQueryClient();
+	const defaultedOptions = isQueryClientLoaded ? client.defaultQueryOptions(options) : options;
+	defaultedOptions._optimisticResults = "optimistic";
+	const observer = react.useMemo(() => {
+		return new Observer(client, defaultedOptions);
+	}, [client]);
+	const result = observer.getOptimisticResult(defaultedOptions);
+	const shouldSubscribe = options.subscribed !== false;
+	react.useSyncExternalStore(react.useCallback((onStoreChange) => {
+		const unsubscribe = shouldSubscribe ? observer.subscribe(__tanstack_query_core.notifyManager.batchCalls(onStoreChange)) : __tanstack_query_core.noop;
+		observer.updateResult();
+		return unsubscribe;
+	}, [observer, shouldSubscribe]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
+	react.useEffect(() => {
+		observer.setOptions(defaultedOptions);
+	}, [defaultedOptions, observer]);
+	if (!isQueryClientLoaded) return {
+		data: void 0,
+		error: null,
+		isLoading: false,
+		isFetching: false,
+		status: "pending"
+	};
+	return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;
+}
+
+//#endregion
+//#region src/react/clerk-rq/useInfiniteQuery.ts
+/**
+*
+*/
+function useClerkInfiniteQuery(options) {
+	return useBaseQuery(options, __tanstack_query_core.InfiniteQueryObserver);
+}
+
+//#endregion
+//#region src/react/clerk-rq/useQuery.ts
+/**
 *
-* @example
-* ```typescript
-* // Example 1: Basic usage
-* const obj1 = { name: 'John', age: 30, city: 'NY' };
-* const obj2 = { name: 'John', age: 30 };
-* getDifferentKeys(obj1, obj2); // Returns { city: 'NY' }
-*
-* // Example 2: With cache keys
-* const requestParams = { page: 1, limit: 10, userId: '123' };
-* const cacheKeys = { userId: '123' };
-* getDifferentKeys(requestParams, cacheKeys); // Returns { page: 1, limit: 10 }
-* ```
 */
-function getDifferentKeys(obj1, obj2) {
-	const keysSet = new Set(Object.keys(obj2));
-	const differentKeysObject = {};
-	for (const key1 of Object.keys(obj1)) if (!keysSet.has(key1)) differentKeysObject[key1] = obj1[key1];
-	return differentKeysObject;
+function useClerkQuery(options) {
+	return useBaseQuery(options, __tanstack_query_core.QueryObserver);
 }
 
 //#endregion
@@ -282,114 +308,249 @@ function usePreviousValue(value) {
 }
 
 //#endregion
-//#region src/react/hooks/usePagesOrInfinite.swr.tsx
-const cachingSWROptions = {
-	dedupingInterval: 1e3 * 60,
-	focusThrottleInterval: 1e3 * 60 * 2
-};
-const cachingSWRInfiniteOptions = {
-	...cachingSWROptions,
-	revalidateFirstPage: false
-};
+//#region src/react/hooks/useClearQueriesOnSignOut.ts
+const withInfiniteKey = (key) => [key, `${key}-inf`];
 /**
-* A flexible pagination hook that supports both traditional pagination and infinite loading.
-* It provides a unified API for handling paginated data fetching, with built-in caching through SWR.
-* The hook can operate in two modes:
-* - Traditional pagination: Fetches one page at a time with page navigation
-* - Infinite loading: Accumulates data as more pages are loaded.
-*
-* Features:
-* - Cache management with SWR
-* - Loading and error states
-* - Page navigation helpers
-* - Data revalidation and updates
-* - Support for keeping previous data while loading.
+* Clears React Query caches associated with the given stable prefixes when
+* the authenticated state transitions from signed-in to signed-out.
 *
 * @internal
 */
+function useClearQueriesOnSignOut(options) {
+	const { isSignedOut, stableKeys, authenticated = true, onCleanup } = options;
+	const stableKeysRef = (0, react.useRef)(stableKeys);
+	const [queryClient] = useClerkQueryClient();
+	const previousIsSignedIn = usePreviousValue(!isSignedOut);
+	if (authenticated !== true) return;
+	(0, react.useEffect)(() => {
+		if (previousIsSignedIn && isSignedOut === true) {
+			queryClient.removeQueries({ predicate: (query) => {
+				const [cachedStableKey, queryAuthenticated] = query.queryKey;
+				return queryAuthenticated === true && typeof cachedStableKey === "string" && (Array.isArray(stableKeysRef.current) ? stableKeysRef.current.includes(cachedStableKey) : stableKeysRef.current === cachedStableKey);
+			} });
+			onCleanup?.();
+		}
+	}, [
+		isSignedOut,
+		previousIsSignedIn,
+		queryClient
+	]);
+}
+
+//#endregion
+//#region src/react/hooks/usePagesOrInfinite.shared.ts
+/**
+* A hook that safely merges user-provided pagination options with default values.
+* It caches initial pagination values (page and size) until component unmount to prevent unwanted rerenders.
+*
+* @internal
+*
+* @example
+* ```typescript
+* // Example 1: With user-provided options
+* const userOptions = { initialPage: 2, pageSize: 20, infinite: true };
+* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
+* useWithSafeValues(userOptions, defaults);
+* // Returns { initialPage: 2, pageSize: 20, infinite: true }
+*
+* // Example 2: With boolean true (use defaults)
+* const params = true;
+* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
+* useWithSafeValues(params, defaults);
+* // Returns { initialPage: 1, pageSize: 10, infinite: false }
+*
+* // Example 3: With undefined options (fallback to defaults)
+* const params = undefined;
+* const defaults = { initialPage: 1, pageSize: 10, infinite: false };
+* useWithSafeValues(params, defaults);
+* // Returns { initialPage: 1, pageSize: 10, infinite: false }
+* ```
+*/
+const useWithSafeValues = (params, defaultValues) => {
+	const shouldUseDefaults = typeof params === "boolean" && params;
+	const initialPageRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.initialPage : params?.initialPage ?? defaultValues.initialPage);
+	const pageSizeRef = (0, react.useRef)(shouldUseDefaults ? defaultValues.pageSize : params?.pageSize ?? defaultValues.pageSize);
+	const newObj = {};
+	for (const key of Object.keys(defaultValues)) newObj[key] = shouldUseDefaults ? defaultValues[key] : params?.[key] ?? defaultValues[key];
+	return {
+		...newObj,
+		initialPage: initialPageRef.current,
+		pageSize: pageSizeRef.current
+	};
+};
+
+//#endregion
+//#region src/react/hooks/usePagesOrInfinite.tsx
 const usePagesOrInfinite = (params) => {
 	const { fetcher, config, keys } = params;
 	const [paginatedPage, setPaginatedPage] = (0, react.useState)(config.initialPage ?? 1);
 	const initialPageRef = (0, react.useRef)(config.initialPage ?? 1);
 	const pageSizeRef = (0, react.useRef)(config.pageSize ?? 10);
 	const enabled = config.enabled ?? true;
-	const cacheMode = config.__experimental_mode === "cache";
+	const isSignedIn = config.isSignedIn;
 	const triggerInfinite = config.infinite ?? false;
+	const cacheMode = config.__experimental_mode === "cache";
 	const keepPreviousData = config.keepPreviousData ?? false;
-	const isSignedIn = config.isSignedIn;
-	const pagesCacheKey = {
-		...toSWRQuery(keys),
-		initialPage: paginatedPage,
-		pageSize: pageSizeRef.current
-	};
-	const previousIsSignedIn = usePreviousValue(isSignedIn);
-	const shouldFetch = !triggerInfinite && enabled && (!cacheMode ? !!fetcher : true);
-	const { data: swrData, isValidating: swrIsValidating, isLoading: swrIsLoading, error: swrError, mutate: swrMutate } = (0, swr.default)(typeof isSignedIn === "boolean" ? previousIsSignedIn === true && isSignedIn === false ? pagesCacheKey : isSignedIn ? shouldFetch ? pagesCacheKey : null : null : shouldFetch ? pagesCacheKey : null, !cacheMode && !!fetcher ? (cacheKeyParams) => {
-		if (isSignedIn === false || shouldFetch === false) return null;
-		return fetcher(getDifferentKeys(cacheKeyParams, {
-			type: keys.queryKey[0],
-			...keys.queryKey[2]
-		}));
-	} : null, {
-		keepPreviousData,
-		...cachingSWROptions
+	const [queryClient] = useClerkQueryClient();
+	const queriesEnabled = enabled && Boolean(fetcher) && !cacheMode && isSignedIn !== false;
+	const [forceUpdateCounter, setForceUpdateCounter] = (0, react.useState)(0);
+	const forceUpdate = (0, react.useCallback)((updater) => {
+		setForceUpdateCounter(updater);
+	}, []);
+	const pagesQueryKey = (0, react.useMemo)(() => {
+		const [stablePrefix, authenticated, tracked, untracked] = keys.queryKey;
+		return [
+			stablePrefix,
+			authenticated,
+			tracked,
+			{
+				...untracked,
+				args: {
+					...untracked.args,
+					initialPage: paginatedPage,
+					pageSize: pageSizeRef.current
+				}
+			}
+		];
+	}, [keys.queryKey, paginatedPage]);
+	const singlePageQuery = useClerkQuery({
+		queryKey: pagesQueryKey,
+		queryFn: ({ queryKey }) => {
+			const { args } = queryKey[3];
+			if (!fetcher) return;
+			return fetcher(args);
+		},
+		staleTime: 6e4,
+		enabled: queriesEnabled && !triggerInfinite,
+		placeholderData: defineKeepPreviousDataFn(keepPreviousData)
 	});
-	const { data: swrInfiniteData, isLoading: swrInfiniteIsLoading, isValidating: swrInfiniteIsValidating, error: swrInfiniteError, size, setSize, mutate: swrInfiniteMutate } = (0, swr_infinite.default)((pageIndex) => {
-		if (!triggerInfinite || !enabled || isSignedIn === false) return null;
+	const infiniteQueryKey = (0, react.useMemo)(() => {
+		const [stablePrefix, authenticated, tracked, untracked] = keys.queryKey;
+		return [
+			stablePrefix + "-inf",
+			authenticated,
+			tracked,
+			untracked
+		];
+	}, [keys.queryKey]);
+	const infiniteQuery = useClerkInfiniteQuery({
+		queryKey: infiniteQueryKey,
+		initialPageParam: config.initialPage ?? 1,
+		getNextPageParam: (lastPage, allPages, lastPageParam) => {
+			const total = lastPage?.total_count ?? 0;
+			return (allPages.length + (config.initialPage ? config.initialPage - 1 : 0)) * (config.pageSize ?? 10) < total ? lastPageParam + 1 : void 0;
+		},
+		queryFn: ({ pageParam, queryKey }) => {
+			const { args } = queryKey[3];
+			if (!fetcher) return;
+			return fetcher({
+				...args,
+				initialPage: pageParam,
+				pageSize: pageSizeRef.current
+			});
+		},
+		staleTime: 6e4,
+		enabled: queriesEnabled && triggerInfinite
+	});
+	useClearQueriesOnSignOut({
+		isSignedOut: isSignedIn === false,
+		authenticated: keys.authenticated,
+		stableKeys: withInfiniteKey(keys.stableKey),
+		onCleanup: () => {
+			setPaginatedPage(initialPageRef.current);
+			Promise.resolve().then(() => forceUpdate((n) => n + 1));
+		}
+	});
+	const { data, count, page } = (0, react.useMemo)(() => {
+		if (triggerInfinite) {
+			const cachedData = queryClient.getQueryData(infiniteQueryKey);
+			const pages = queriesEnabled ? infiniteQuery.data?.pages ?? cachedData?.pages ?? [] : cachedData?.pages ?? [];
+			const validPages = Array.isArray(pages) ? pages.filter(Boolean) : [];
+			return {
+				data: validPages.map((a) => a?.data).flat().filter(Boolean) ?? [],
+				count: validPages[validPages.length - 1]?.total_count ?? 0,
+				page: validPages.length > 0 ? validPages.length : initialPageRef.current
+			};
+		}
+		const pageData = queriesEnabled ? singlePageQuery.data ?? queryClient.getQueryData(pagesQueryKey) : queryClient.getQueryData(pagesQueryKey);
 		return {
-			...toSWRQuery(keys),
-			initialPage: initialPageRef.current + pageIndex,
-			pageSize: pageSizeRef.current
+			data: Array.isArray(pageData?.data) ? pageData.data : [],
+			count: typeof pageData?.total_count === "number" ? pageData.total_count : 0,
+			page: paginatedPage
 		};
-	}, (cacheKeyParams) => {
-		const requestParams = getDifferentKeys(cacheKeyParams, {
-			type: keys.queryKey[0],
-			...keys.queryKey[2]
-		});
-		return fetcher?.(requestParams);
-	}, cachingSWRInfiniteOptions);
-	const page = (0, react.useMemo)(() => {
-		if (triggerInfinite) return size;
-		return paginatedPage;
 	}, [
+		queriesEnabled,
+		forceUpdateCounter,
 		triggerInfinite,
-		size,
+		infiniteQuery.data?.pages,
+		singlePageQuery.data,
+		queryClient,
+		infiniteQueryKey,
+		pagesQueryKey,
 		paginatedPage
 	]);
 	const fetchPage = (0, react.useCallback)((numberOrgFn) => {
 		if (triggerInfinite) {
-			setSize(numberOrgFn);
+			const next = typeof numberOrgFn === "function" ? numberOrgFn(page) : numberOrgFn;
+			const targetCount = Math.max(0, next);
+			const cachedData = queryClient.getQueryData(infiniteQueryKey);
+			if (targetCount - (infiniteQuery.data?.pages ?? cachedData?.pages ?? []).length > 0) infiniteQuery.fetchNextPage({ cancelRefetch: false });
 			return;
 		}
 		return setPaginatedPage(numberOrgFn);
-	}, [setSize, triggerInfinite]);
-	const data = (0, react.useMemo)(() => {
-		if (triggerInfinite) return swrInfiniteData?.map((a) => a?.data).flat() ?? [];
-		return swrData?.data ?? [];
-	}, [
-		triggerInfinite,
-		swrData,
-		swrInfiniteData
-	]);
-	const count = (0, react.useMemo)(() => {
-		if (triggerInfinite) return swrInfiniteData?.[swrInfiniteData?.length - 1]?.total_count || 0;
-		return swrData?.total_count ?? 0;
 	}, [
+		infiniteQuery,
+		page,
 		triggerInfinite,
-		swrData,
-		swrInfiniteData
+		queryClient,
+		infiniteQueryKey
 	]);
-	const isLoading = triggerInfinite ? swrInfiniteIsLoading : swrIsLoading;
-	const isFetching = triggerInfinite ? swrInfiniteIsValidating : swrIsValidating;
-	const error = (triggerInfinite ? swrInfiniteError : swrError) ?? null;
+	const isLoading = triggerInfinite ? infiniteQuery.isLoading : singlePageQuery.isLoading;
+	const isFetching = triggerInfinite ? infiniteQuery.isFetching : singlePageQuery.isFetching;
+	const error = (triggerInfinite ? infiniteQuery.error : singlePageQuery.error) ?? null;
 	const isError = !!error;
 	const fetchNext = (0, react.useCallback)(() => {
-		fetchPage((n) => Math.max(0, n + 1));
-	}, [fetchPage]);
+		if (triggerInfinite) {
+			infiniteQuery.fetchNextPage({ cancelRefetch: false });
+			return;
+		}
+		setPaginatedPage((n) => Math.max(0, n + 1));
+	}, [infiniteQuery, triggerInfinite]);
 	const fetchPrevious = (0, react.useCallback)(() => {
-		fetchPage((n) => Math.max(0, n - 1));
-	}, [fetchPage]);
+		if (triggerInfinite) return;
+		setPaginatedPage((n) => Math.max(0, n - 1));
+	}, [triggerInfinite]);
 	const offsetCount = (initialPageRef.current - 1) * pageSizeRef.current;
+	const pageCount = Math.ceil((count - offsetCount) / pageSizeRef.current);
+	const hasNextPage = triggerInfinite ? Boolean(infiniteQuery.hasNextPage) : count - offsetCount * pageSizeRef.current > page * pageSizeRef.current;
+	const hasPreviousPage = triggerInfinite ? Boolean(infiniteQuery.hasPreviousPage) : (page - 1) * pageSizeRef.current > offsetCount * pageSizeRef.current;
+	const setData = (value) => {
+		if (triggerInfinite) {
+			queryClient.setQueryData(infiniteQueryKey, (prevValue = {}) => {
+				const prevPages = Array.isArray(prevValue?.pages) ? prevValue.pages : [];
+				const nextPages = typeof value === "function" ? value(prevPages) : value;
+				return {
+					...prevValue,
+					pages: nextPages
+				};
+			});
+			forceUpdate((n) => n + 1);
+			return Promise.resolve();
+		}
+		queryClient.setQueryData(pagesQueryKey, (prevValue = {
+			data: [],
+			total_count: 0
+		}) => {
+			return typeof value === "function" ? value(prevValue) : value;
+		});
+		forceUpdate((n) => n + 1);
+		return Promise.resolve();
+	};
+	const revalidate = async () => {
+		await queryClient.invalidateQueries({ queryKey: keys.invalidationKey });
+		const [stablePrefix, ...rest] = keys.invalidationKey;
+		return queryClient.invalidateQueries({ queryKey: [stablePrefix + "-inf", ...rest] });
+	};
 	return {
 		data,
 		count,
@@ -398,19 +559,19 @@ const usePagesOrInfinite = (params) => {
 		isFetching,
 		isError,
 		page,
-		pageCount: Math.ceil((count - offsetCount) / pageSizeRef.current),
+		pageCount,
 		fetchPage,
 		fetchNext,
 		fetchPrevious,
-		hasNextPage: count - offsetCount * pageSizeRef.current > page * pageSizeRef.current,
-		hasPreviousPage: (page - 1) * pageSizeRef.current > offsetCount * pageSizeRef.current,
-		revalidate: triggerInfinite ? () => swrInfiniteMutate() : () => swrMutate(),
-		setData: triggerInfinite ? (value) => swrInfiniteMutate(value, { revalidate: false }) : (value) => swrMutate(value, { revalidate: false })
+		hasNextPage,
+		hasPreviousPage,
+		revalidate,
+		setData
 	};
 };
 
 //#endregion
-//#region src/react/hooks/useAPIKeys.swr.tsx
+//#region src/react/hooks/useAPIKeys.tsx
 /**
 * @internal
 *
@@ -471,7 +632,7 @@ function useAPIKeys(params) {
 		...safeValues.query ? { query: safeValues.query } : {}
 	};
 	const isEnabled = (safeValues.enabled ?? true) && clerk.loaded;
-	const result = usePagesOrInfinite({
+	return usePagesOrInfinite({
 		fetcher: clerk.apiKeys?.getAll ? (params$1) => clerk.apiKeys.getAll({
 			...params$1,
 			subject: safeValues.subject
@@ -491,17 +652,6 @@ function useAPIKeys(params) {
 			untracked: { args: hookParams }
 		})
 	});
-	const { mutate } = (0, swr.useSWRConfig)();
-	const invalidateAll = (0, react.useCallback)(() => {
-		return mutate((key) => {
-			if (!key || typeof key !== "object") return false;
-			return "type" in key && key.type === "apiKeys" && "subject" in key && key.subject === safeValues.subject;
-		});
-	}, [mutate, safeValues.subject]);
-	return {
-		...result,
-		revalidate: invalidateAll
-	};
 }
 
 //#endregion
@@ -1142,7 +1292,7 @@ const useSafeLayoutEffect = typeof window !== "undefined" ? react.default.useLay
 
 //#endregion
 //#region src/react/hooks/useSession.ts
-const hookName$3 = `useSession`;
+const hookName$2 = `useSession`;
 /**
 * The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/reference/javascript/session) object, as well as helpers for setting the active session.
 *
@@ -1192,10 +1342,10 @@ const hookName$3 = `useSession`;
 * </Tabs>
 */
 const useSession = () => {
-	useAssertWrappedByClerkProvider(hookName$3);
+	useAssertWrappedByClerkProvider(hookName$2);
 	const session = useSessionContext();
 	const clerk = useClerkInstanceContext();
-	clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$3));
+	clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$2));
 	if (session === void 0) return {
 		isLoaded: false,
 		isSignedIn: void 0,
@@ -1215,7 +1365,7 @@ const useSession = () => {
 
 //#endregion
 //#region src/react/hooks/useSessionList.ts
-const hookName$2 = "useSessionList";
+const hookName$1 = "useSessionList";
 /**
 * The `useSessionList()` hook returns an array of [`Session`](https://clerk.com/docs/reference/javascript/session) objects that have been registered on the client device.
 *
@@ -1260,10 +1410,10 @@ const hookName$2 = "useSessionList";
 * </Tabs>
 */
 const useSessionList = () => {
-	useAssertWrappedByClerkProvider(hookName$2);
+	useAssertWrappedByClerkProvider(hookName$1);
 	const isomorphicClerk = useClerkInstanceContext();
 	const client = useClientContext();
-	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName$2));
+	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName$1));
 	if (!client) return {
 		isLoaded: false,
 		sessions: void 0,
@@ -1278,7 +1428,7 @@ const useSessionList = () => {
 
 //#endregion
 //#region src/react/hooks/useUser.ts
-const hookName$1 = "useUser";
+const hookName = "useUser";
 /**
 * The `useUser()` hook provides access to the current user's [`User`](https://clerk.com/docs/reference/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
 *
@@ -1410,9 +1560,9 @@ const hookName$1 = "useUser";
 * </Tabs>
 */
 function useUser() {
-	useAssertWrappedByClerkProvider(hookName$1);
+	useAssertWrappedByClerkProvider(hookName);
 	const user = useUserContext();
-	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName$1));
+	useClerkInstanceContext().telemetry?.record(require_telemetry.eventMethodCalled(hookName));
 	if (user === void 0) return {
 		isLoaded: false,
 		isSignedIn: void 0,
@@ -1615,11 +1765,11 @@ function useBillingHookEnabled(params) {
 *
 * @internal
 */
-function createBillingPaginatedHook({ hookName: hookName$4, resourceType, useFetcher, options }) {
+function createBillingPaginatedHook({ hookName: hookName$3, resourceType, useFetcher, options }) {
 	return function useBillingHook(params) {
 		const { for: _for, enabled: externalEnabled,...paginationParams } = params || {};
 		const safeFor = _for || "user";
-		useAssertWrappedByClerkProvider(hookName$4);
+		useAssertWrappedByClerkProvider(hookName$3);
 		const fetchFn = useFetcher(safeFor);
 		const safeValues = useWithSafeValues(paginationParams, {
 			initialPage: 1,
@@ -1631,7 +1781,7 @@ function createBillingPaginatedHook({ hookName: hookName$4, resourceType, useFet
 		const clerk = useClerkInstanceContext();
 		const user = useUserContext();
 		const { organization } = useOrganizationContext();
-		clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$4));
+		clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName$3));
 		const isForOrganization = safeFor === "organization";
 		const billingEnabled = useBillingHookEnabled({
 			for: safeFor,
@@ -1660,7 +1810,7 @@ function createBillingPaginatedHook({ hookName: hookName$4, resourceType, useFet
 				authenticated: !options?.unauthenticated,
 				tracked: options?.unauthenticated ? { for: safeFor } : {
 					userId: user?.id,
-					...isForOrganization ? { ["_orgId"]: organization?.id } : {}
+					...isForOrganization ? { orgId: organization?.id } : {}
 				},
 				untracked: { args: hookParams }
 			})
@@ -1754,44 +1904,53 @@ function useSubscriptionCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/useSubscription.swr.tsx
-const hookName = "useSubscription";
+//#region src/react/hooks/useSubscription.tsx
+const HOOK_NAME = "useSubscription";
 /**
-* This is the existing implementation of useSubscription using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
 function useSubscription(params) {
-	useAssertWrappedByClerkProvider(hookName);
+	useAssertWrappedByClerkProvider(HOOK_NAME);
 	const clerk = useClerkInstanceContext();
 	const user = useUserContext();
 	const { organization } = useOrganizationContext();
-	const environment = clerk.__internal_environment;
-	clerk.telemetry?.record(require_telemetry.eventMethodCalled(hookName));
-	const billingEnabled = params?.for === "organization" ? environment?.commerceSettings.billing.organization.enabled : environment?.commerceSettings.billing.user.enabled;
-	const isEnabled = (params?.enabled ?? true) && billingEnabled;
-	const { queryKey } = useSubscriptionCacheKeys({
+	const billingEnabled = useBillingHookEnabled(params);
+	const recordedRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!recordedRef.current && clerk?.telemetry) {
+			clerk.telemetry.record(require_telemetry.eventMethodCalled(HOOK_NAME));
+			recordedRef.current = true;
+		}
+	}, [clerk]);
+	const keepPreviousData = params?.keepPreviousData ?? false;
+	const [queryClient] = useClerkQueryClient();
+	const { queryKey, invalidationKey, stableKey, authenticated } = useSubscriptionCacheKeys({
 		userId: user?.id,
 		orgId: organization?.id,
 		for: params?.for
 	});
-	const swr$1 = (0, swr.default)(isEnabled ? { queryKey } : null, ({ queryKey: queryKey$1 }) => {
-		const args = queryKey$1[3].args;
-		if (queryKey$1[2].userId) return clerk.billing.getSubscription(args);
-		return null;
-	}, {
-		dedupingInterval: 1e3 * 60,
-		keepPreviousData: params?.keepPreviousData
+	const queriesEnabled = Boolean(user?.id && billingEnabled);
+	useClearQueriesOnSignOut({
+		isSignedOut: user === null,
+		authenticated,
+		stableKeys: stableKey
+	});
+	const query = useClerkQuery({
+		queryKey,
+		queryFn: ({ queryKey: queryKey$1 }) => {
+			const obj = queryKey$1[3];
+			return clerk.billing.getSubscription(obj.args);
+		},
+		staleTime: 1e3 * 60,
+		enabled: queriesEnabled,
+		placeholderData: defineKeepPreviousDataFn(keepPreviousData && queriesEnabled)
 	});
-	const revalidate = (0, react.useCallback)(() => {
-		swr$1.mutate();
-	}, [swr$1]);
+	const revalidate = (0, react.useCallback)(() => queryClient.invalidateQueries({ queryKey: invalidationKey }), [queryClient, invalidationKey]);
 	return {
-		data: swr$1.data,
-		error: swr$1.error,
-		isLoading: swr$1.isLoading,
-		isFetching: swr$1.isValidating,
+		data: query.data,
+		error: query.error ?? void 0,
+		isLoading: query.isLoading,
+		isFetching: query.isFetching,
 		revalidate
 	};
 }
@@ -1871,40 +2030,47 @@ function useStatementQueryCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/useStatementQuery.swr.tsx
+//#region src/react/hooks/useStatementQuery.tsx
 /**
-* This is the existing implementation of useStatementQuery using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
-function __internal_useStatementQuery(params = {}) {
-	const { statementId = null, enabled = true, keepPreviousData = false, for: forType = "user" } = params;
+function useStatementQuery(params = {}) {
+	const { statementId = null, keepPreviousData = false, for: forType = "user" } = params;
 	const clerk = useClerkInstanceContext();
 	const user = useUserContext();
 	const { organization } = useOrganizationContext();
 	const organizationId = forType === "organization" ? organization?.id ?? null : null;
-	const { queryKey } = useStatementQueryCacheKeys({
+	const { queryKey, stableKey, authenticated } = useStatementQueryCacheKeys({
 		statementId,
 		userId: user?.id ?? null,
 		orgId: organizationId,
 		for: forType
 	});
-	const swr$1 = (0, swr.default)(Boolean(statementId) && enabled && (forType !== "organization" || Boolean(organizationId)) ? queryKey : null, () => {
-		if (!statementId) throw new Error("statementId is required to fetch a statement");
-		return clerk.billing.getStatement({
-			id: statementId,
-			orgId: organizationId ?? void 0
-		});
-	}, {
-		dedupingInterval: 1e3 * 60,
-		keepPreviousData
+	const billingEnabled = useBillingHookEnabled(params);
+	const queryEnabled = Boolean(statementId) && billingEnabled;
+	useClearQueriesOnSignOut({
+		isSignedOut: user === null,
+		authenticated,
+		stableKeys: stableKey
+	});
+	const query = useClerkQuery({
+		queryKey,
+		queryFn: () => {
+			if (!statementId) throw new Error("statementId is required to fetch a statement");
+			return clerk.billing.getStatement({
+				id: statementId,
+				orgId: organizationId ?? void 0
+			});
+		},
+		enabled: queryEnabled,
+		placeholderData: defineKeepPreviousDataFn(keepPreviousData),
+		staleTime: 1e3 * 60
 	});
 	return {
-		data: swr$1.data,
-		error: swr$1.error ?? null,
-		isLoading: swr$1.isLoading,
-		isFetching: swr$1.isValidating
+		data: query.data,
+		error: query.error ?? null,
+		isLoading: query.isLoading,
+		isFetching: query.isFetching
 	};
 }
 
@@ -1923,31 +2089,32 @@ function usePlanDetailsQueryCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/usePlanDetailsQuery.swr.tsx
+//#region src/react/hooks/usePlanDetailsQuery.tsx
 /**
-* This is the existing implementation of usePlanDetailsQuery using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
-function usePlanDetailsQuery(params = {}) {
-	const { planId, initialPlan = null, enabled = true, keepPreviousData = true } = params;
+function __internal_usePlanDetailsQuery(params = {}) {
+	const { planId, initialPlan = null, keepPreviousData = true } = params;
 	const clerk = useClerkInstanceContext();
 	const targetPlanId = planId ?? initialPlan?.id ?? null;
 	const { queryKey } = usePlanDetailsQueryCacheKeys({ planId: targetPlanId });
-	const swr$1 = (0, swr.default)(Boolean(targetPlanId) && enabled ? queryKey : null, () => {
-		if (!targetPlanId) throw new Error("planId is required to fetch plan details");
-		return clerk.billing.getPlan({ id: targetPlanId });
-	}, {
-		dedupingInterval: 1e3 * 60,
-		keepPreviousData,
-		fallbackData: initialPlan ?? void 0
+	const billingEnabled = useBillingHookEnabled({ authenticated: false });
+	const query = useClerkQuery({
+		queryKey,
+		queryFn: () => {
+			if (!targetPlanId) throw new Error("planId is required to fetch plan details");
+			return clerk.billing.getPlan({ id: targetPlanId });
+		},
+		enabled: Boolean(targetPlanId) && billingEnabled,
+		initialData: initialPlan ?? void 0,
+		placeholderData: defineKeepPreviousDataFn(keepPreviousData),
+		initialDataUpdatedAt: 0
 	});
 	return {
-		data: swr$1.data,
-		error: swr$1.error ?? null,
-		isLoading: swr$1.isLoading,
-		isFetching: swr$1.isValidating
+		data: query.data,
+		error: query.error ?? null,
+		isLoading: query.isLoading,
+		isFetching: query.isFetching
 	};
 }
 
@@ -1979,37 +2146,44 @@ function usePaymentAttemptQueryCacheKeys(params) {
 }
 
 //#endregion
-//#region src/react/hooks/usePaymentAttemptQuery.swr.tsx
+//#region src/react/hooks/usePaymentAttemptQuery.tsx
 /**
-* This is the existing implementation of usePaymentAttemptQuery using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
-function __internal_usePaymentAttemptQuery(params) {
-	const { paymentAttemptId, enabled = true, keepPreviousData = false, for: forType = "user" } = params;
+function usePaymentAttemptQuery(params) {
+	const { paymentAttemptId, keepPreviousData = false, for: forType = "user" } = params;
 	const clerk = useClerkInstanceContext();
 	const user = useUserContext();
 	const { organization } = useOrganizationContext();
 	const organizationId = forType === "organization" ? organization?.id ?? null : null;
-	const { queryKey } = usePaymentAttemptQueryCacheKeys({
+	const { queryKey, stableKey, authenticated } = usePaymentAttemptQueryCacheKeys({
 		paymentAttemptId,
 		userId: user?.id ?? null,
 		orgId: organizationId,
 		for: forType
 	});
-	const swr$1 = (0, swr.default)(Boolean(paymentAttemptId) && enabled && (forType !== "organization" || Boolean(organizationId)) ? { queryKey } : null, ({ queryKey: queryKey$1 }) => {
-		const args = queryKey$1[3].args;
-		return clerk.billing.getPaymentAttempt(args);
-	}, {
-		dedupingInterval: 1e3 * 60,
-		keepPreviousData
+	const billingEnabled = useBillingHookEnabled(params);
+	const queryEnabled = Boolean(paymentAttemptId) && billingEnabled;
+	useClearQueriesOnSignOut({
+		isSignedOut: user === null,
+		authenticated,
+		stableKeys: stableKey
+	});
+	const query = useClerkQuery({
+		queryKey,
+		queryFn: ({ queryKey: queryKey$1 }) => {
+			const args = queryKey$1[3].args;
+			return clerk.billing.getPaymentAttempt(args);
+		},
+		enabled: queryEnabled,
+		placeholderData: defineKeepPreviousDataFn(keepPreviousData),
+		staleTime: 1e3 * 60
 	});
 	return {
-		data: swr$1.data,
-		error: swr$1.error ?? null,
-		isLoading: swr$1.isLoading,
-		isFetching: swr$1.isValidating
+		data: query.data,
+		error: query.error ?? null,
+		isLoading: query.isLoading,
+		isFetching: query.isFetching
 	};
 }
 
@@ -2263,74 +2437,90 @@ const createElementComponent = (type, isServer) => {
 const PaymentElement$1 = createElementComponent("payment", typeof window === "undefined");
 
 //#endregion
-//#region src/react/billing/useInitializePaymentMethod.swr.tsx
+//#region src/react/billing/useInitializePaymentMethod.tsx
 /**
-* This is the existing implementation of the payment method initializer using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
 function useInitializePaymentMethod(options) {
-	const { for: forType = "user" } = options ?? {};
+	const { for: forType } = options ?? {};
 	const { organization } = useOrganizationContext();
 	const user = useUserContext();
 	const resource = forType === "organization" ? organization : user;
-	const { data, trigger } = (0, swr_mutation.default)(resource?.id ? {
-		key: "billing-payment-method-initialize",
-		resourceId: resource.id,
-		for: forType
-	} : null, () => {
-		return resource?.initializePaymentMethod({ gateway: "stripe" });
+	const billingEnabled = useBillingHookEnabled(options);
+	const queryKey = (0, react.useMemo)(() => {
+		return ["billing-payment-method-initialize", { resourceId: resource?.id }];
+	}, [resource?.id]);
+	const query = useClerkQuery({
+		queryKey,
+		queryFn: async () => {
+			if (!resource) return;
+			return resource.initializePaymentMethod({ gateway: "stripe" });
+		},
+		enabled: Boolean(resource?.id) && billingEnabled,
+		staleTime: 1e3 * 60,
+		refetchOnWindowFocus: false,
+		placeholderData: defineKeepPreviousDataFn(true)
 	});
-	(0, react.useEffect)(() => {
-		if (!resource?.id) return;
-		trigger().catch(() => {});
-	}, [resource?.id, trigger]);
+	const [queryClient] = useClerkQueryClient();
+	const initializePaymentMethod = (0, react.useCallback)(async () => {
+		if (!resource) return;
+		const result = await resource.initializePaymentMethod({ gateway: "stripe" });
+		queryClient.setQueryData(queryKey, result);
+		return result;
+	}, [
+		queryClient,
+		queryKey,
+		resource
+	]);
 	return {
-		initializedPaymentMethod: data,
-		initializePaymentMethod: trigger
+		initializedPaymentMethod: query.data ?? void 0,
+		initializePaymentMethod
 	};
 }
 
 //#endregion
-//#region src/react/billing/useStripeClerkLibs.swr.tsx
+//#region src/react/billing/useStripeClerkLibs.tsx
 /**
-* This is the existing implementation of the Stripe libraries loader using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
 function useStripeClerkLibs() {
 	const clerk = useClerk();
-	return (0, swr.default)("clerk-stripe-sdk", async () => {
-		return { loadStripe: await clerk.__internal_loadStripeJs() };
-	}, {
-		keepPreviousData: true,
-		revalidateOnFocus: false,
-		dedupingInterval: Infinity
+	return useClerkQuery({
+		queryKey: ["clerk-stripe-sdk"],
+		queryFn: async () => {
+			return { loadStripe: await clerk.__internal_loadStripeJs() };
+		},
+		enabled: useBillingHookEnabled(),
+		staleTime: Infinity,
+		refetchOnWindowFocus: false,
+		placeholderData: defineKeepPreviousDataFn(true)
 	}).data ?? null;
 }
 
 //#endregion
-//#region src/react/billing/useStripeLoader.swr.tsx
+//#region src/react/billing/useStripeLoader.tsx
 /**
-* This is the existing implementation of the Stripe instance loader using SWR.
-* It is kept here for backwards compatibility until our next major version.
-*
 * @internal
 */
 function useStripeLoader(options) {
 	const { stripeClerkLibs, externalGatewayId, stripePublishableKey } = options;
-	return (0, swr.default)(stripeClerkLibs && externalGatewayId && stripePublishableKey ? {
-		key: "stripe-sdk",
-		externalGatewayId,
-		stripePublishableKey
-	} : null, ({ stripePublishableKey: stripePublishableKey$1, externalGatewayId: externalGatewayId$1 }) => {
-		return stripeClerkLibs?.loadStripe(stripePublishableKey$1, { stripeAccount: externalGatewayId$1 });
-	}, {
-		keepPreviousData: true,
-		revalidateOnFocus: false,
-		dedupingInterval: 1e3 * 60
+	const queryKey = (0, react.useMemo)(() => {
+		return ["stripe-sdk", {
+			externalGatewayId,
+			stripePublishableKey
+		}];
+	}, [externalGatewayId, stripePublishableKey]);
+	const billingEnabled = useBillingHookEnabled({ authenticated: true });
+	return useClerkQuery({
+		queryKey,
+		queryFn: () => {
+			if (!stripeClerkLibs || !externalGatewayId || !stripePublishableKey) return null;
+			return stripeClerkLibs.loadStripe(stripePublishableKey, { stripeAccount: externalGatewayId });
+		},
+		enabled: Boolean(stripeClerkLibs && externalGatewayId && stripePublishableKey) && billingEnabled,
+		staleTime: 1e3 * 60,
+		refetchOnWindowFocus: false,
+		placeholderData: defineKeepPreviousDataFn(true)
 	}).data;
 }
 
@@ -2520,9 +2710,9 @@ exports.__experimental_usePaymentMethods = usePaymentMethods;
 exports.__experimental_usePlans = usePlans;
 exports.__experimental_useStatements = useStatements;
 exports.__experimental_useSubscription = useSubscription;
-exports.__internal_usePaymentAttemptQuery = __internal_usePaymentAttemptQuery;
-exports.__internal_usePlanDetailsQuery = usePlanDetailsQuery;
-exports.__internal_useStatementQuery = __internal_useStatementQuery;
+exports.__internal_usePaymentAttemptQuery = usePaymentAttemptQuery;
+exports.__internal_usePlanDetailsQuery = __internal_usePlanDetailsQuery;
+exports.__internal_useStatementQuery = useStatementQuery;
 exports.assertContextExists = assertContextExists;
 exports.createContextAndHook = createContextAndHook;
 exports.isDeeplyEqual = isDeeplyEqual;