From 8433a7169b51b9b7e232d7cc4f875327ad8a2a78 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 6 Dec 2024 10:03:17 -0500
Subject: [PATCH] fix: reinstate `prefersReducedMotion` (#14586)

* reinstate prefersReducedMotion

* changeset
---
 .changeset/large-humans-report.md      |  5 +++++
 packages/svelte/src/motion/public.d.ts |  2 +-
 packages/svelte/types/index.d.ts       | 25 +++++++++++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/large-humans-report.md

diff --git a/.changeset/large-humans-report.md b/.changeset/large-humans-report.md
new file mode 100644
index 0000000000..6ba09ef148
--- /dev/null
+++ b/.changeset/large-humans-report.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reinstate missing prefersReducedMotion export
diff --git a/packages/svelte/src/motion/public.d.ts b/packages/svelte/src/motion/public.d.ts
index 5a6a7e0fae..4e74d4b76f 100644
--- a/packages/svelte/src/motion/public.d.ts
+++ b/packages/svelte/src/motion/public.d.ts
@@ -85,4 +85,4 @@ export interface Tweened<T> extends Readable<T> {
 	update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
 }
 
-export { spring, tweened, Tween } from './index.js';
+export { prefersReducedMotion, spring, tweened, Tween } from './index.js';
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index f3f9580dc6..f6b5b21f80 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1637,6 +1637,7 @@ declare module 'svelte/legacy' {
 }
 
 declare module 'svelte/motion' {
+	import type { MediaQuery } from 'svelte/reactivity';
 	// TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
 	// this means both the Spring class and the Spring interface are merged into one with some things only
 	// existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
@@ -1767,6 +1768,30 @@ declare module 'svelte/motion' {
 		easing?: (t: number) => number;
 		interpolate?: (a: T, b: T) => (t: number) => T;
 	}
+	/**
+	 * A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { prefersReducedMotion } from 'svelte/motion';
+	 * 	import { fly } from 'svelte/transition';
+	 *
+	 * 	let visible = $state(false);
+	 * </script>
+	 *
+	 * <button onclick={() => visible = !visible}>
+	 * 	toggle
+	 * </button>
+	 *
+	 * {#if visible}
+	 * 	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
+	 * 		flies in, unless the user prefers reduced motion
+	 * 	</p>
+	 * {/if}
+	 * ```
+	 * @since 5.7.0
+	 */
+	export const prefersReducedMotion: MediaQuery;
 	/**
 	 * The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
 	 *