@humanspeak/svelte-motion 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { useMotionTemplate } from './utils/motionTemplate';
 export { useMotionValue } from './utils/motionValue';
 export type { MotionValue } from './utils/motionValue';
 export { useMotionValueEvent } from './utils/motionValueEvent';
+export { useReducedMotion } from './utils/reducedMotion';
 export { useScroll } from './utils/scroll';
 export { useSpring } from './utils/spring';
 export { useVelocity } from './utils/velocity';

package/dist/index.js

@@ -12,6 +12,7 @@ export { createDragControls } from './utils/dragControls';
 export { useMotionTemplate } from './utils/motionTemplate';
 export { useMotionValue } from './utils/motionValue';
 export { useMotionValueEvent } from './utils/motionValueEvent';
+export { useReducedMotion } from './utils/reducedMotion';
 export { useScroll } from './utils/scroll';
 export { useSpring } from './utils/spring';
 export { useVelocity } from './utils/velocity';

package/dist/utils/reducedMotion.d.ts

@@ -0,0 +1,20 @@
+import { type Readable } from 'svelte/store';
+/**
+ * Returns a readable store that reflects the user's `prefers-reduced-motion` setting.
+ *
+ * Defaults to `false` in SSR or when `matchMedia` is unavailable/throws.
+ *
+ * @returns {Readable<boolean>} `true` when the user prefers reduced motion.
+ * @see https://motion.dev/docs/react-reduced-motion
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useReducedMotion } from '@humanspeak/svelte-motion'
+ *   const reduced = useReducedMotion()
+ * </script>
+ *
+ * <div style:transform={$reduced ? 'none' : 'rotate(45deg)'}>...</div>
+ * ```
+ */
+export declare const useReducedMotion: () => Readable<boolean>;

package/dist/utils/reducedMotion.js

@@ -0,0 +1,42 @@
+import { readable } from 'svelte/store';
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+const SSR_FALLBACK = readable(false, () => { });
+/**
+ * Returns a readable store that reflects the user's `prefers-reduced-motion` setting.
+ *
+ * Defaults to `false` in SSR or when `matchMedia` is unavailable/throws.
+ *
+ * @returns {Readable<boolean>} `true` when the user prefers reduced motion.
+ * @see https://motion.dev/docs/react-reduced-motion
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useReducedMotion } from '@humanspeak/svelte-motion'
+ *   const reduced = useReducedMotion()
+ * </script>
+ *
+ * <div style:transform={$reduced ? 'none' : 'rotate(45deg)'}>...</div>
+ * ```
+ */
+export const useReducedMotion = () => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return SSR_FALLBACK;
+    }
+    let media;
+    try {
+        media = window.matchMedia(REDUCED_MOTION_QUERY);
+    }
+    catch {
+        return SSR_FALLBACK;
+    }
+    return readable(media.matches, (set) => {
+        const handler = (event) => set(event.matches);
+        if (typeof media.addEventListener === 'function') {
+            media.addEventListener('change', handler);
+            return () => media.removeEventListener('change', handler);
+        }
+        media.addListener(handler);
+        return () => media.removeListener(handler);
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A Framer Motion-compatible animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
   "keywords": [
     "svelte",