chore: switch to use of svelte native prefersReducedMotion media

src/shared/lib/accessibility/motion.svelte.ts

@@ -1,32 +0,0 @@
-// Check if we are in a browser environment
-const isBrowser = typeof window !== 'undefined';
-
-// A class to manage motion preference and provide a single instance for use everywhere
-class MotionPreference {
-    // Reactive state
-    #reduced = $state(false);
-
-    constructor() {
-        if (isBrowser) {
-            const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-
-            // Set initial value immediately
-            this.#reduced = mediaQuery.matches;
-
-            // Simple listener that updates the reactive state
-            const handleChange = (e: MediaQueryListEvent) => {
-                this.#reduced = e.matches;
-            };
-
-            mediaQuery.addEventListener('change', handleChange);
-        }
-    }
-
-    // Getter allows us to use 'motion.reduced' reactively in components
-    get reduced() {
-        return this.#reduced;
-    }
-}
-
-// Export a single instance to be used everywhere
-export const motion = new MotionPreference();

src/shared/lib/index.ts

@@ -19,5 +19,4 @@ export {
     type VirtualizerOptions,
 } from './helpers';
 
-export { motion } from './accessibility/motion.svelte';
 export { splitArray } from './utils';

src/shared/ui/CheckboxFilter/CheckboxFilter.svelte

@@ -9,7 +9,6 @@
 -->
 <script lang="ts">
 import type { Filter } from '$shared/lib';
-import { motion } from '$shared/lib';
 import { Badge } from '$shared/shadcn/ui/badge';
 import { buttonVariants } from '$shared/shadcn/ui/button';
 import { Checkbox } from '$shared/shadcn/ui/checkbox';
@@ -20,6 +19,7 @@ import {
 import { Label } from '$shared/shadcn/ui/label';
 import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 import { cubicOut } from 'svelte/easing';
+import { prefersReducedMotion } from 'svelte/motion';
 import { slide } from 'svelte/transition';
 
 interface PropertyFilterProps {
@@ -37,7 +37,7 @@ let isOpen = $state(true);
 // Animation config respects user preferences - zero duration if reduced motion enabled
 // Local modifier prevents animation on initial render, only animates user interactions
 const slideConfig = $derived({
-    duration: motion.reduced ? 0 : 250,
+    duration: prefersReducedMotion.current ? 0 : 250,
     easing: cubicOut,
 });