add example to prefersReducedMotion

Author: Rich-Harris

packages/svelte/src/motion/index.js

@@ -5,6 +5,25 @@ export * from './tweened.js';
 
 /**
  * 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}
+ * ```
  * @type {MediaQuery}
  */
 export const prefersReducedMotion = /*@__PURE__*/ new MediaQuery(

packages/svelte/types/index.d.ts

@@ -1686,6 +1686,23 @@ declare module 'svelte/motion' {
 	}
 	/**
 	 * 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}
+	 * ```
 	 * */
 	export const prefersReducedMotion: MediaQuery;
 	/**