main repo

node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs

@@ -0,0 +1,19 @@
+import { isBrowser } from '../is-browser.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
+
+function initPrefersReducedMotion() {
+    hasReducedMotionListener.current = true;
+    if (!isBrowser)
+        return;
+    if (window.matchMedia) {
+        const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+        const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
+        motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
+        setReducedMotionPreferences();
+    }
+    else {
+        prefersReducedMotion.current = false;
+    }
+}
+
+export { initPrefersReducedMotion };

node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs

@@ -0,0 +1,5 @@
+// Does this device prefer reduced motion? Returns `null` server-side.
+const prefersReducedMotion = { current: null };
+const hasReducedMotionListener = { current: false };
+
+export { hasReducedMotionListener, prefersReducedMotion };

node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { useContext } from 'react';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+import { useReducedMotion } from './use-reduced-motion.mjs';
+
+function useReducedMotionConfig() {
+    const reducedMotionPreference = useReducedMotion();
+    const { reducedMotion } = useContext(MotionConfigContext);
+    if (reducedMotion === "never") {
+        return false;
+    }
+    else if (reducedMotion === "always") {
+        return true;
+    }
+    else {
+        return reducedMotionPreference;
+    }
+}
+
+export { useReducedMotionConfig };

node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { warnOnce } from 'motion-utils';
+import { useState } from 'react';
+import { initPrefersReducedMotion } from './index.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';
+
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```jsx
+ * export function Sidebar({ isOpen }) {
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const closedX = shouldReduceMotion ? 0 : "-100%"
+ *
+ *   return (
+ *     <motion.div animate={{
+ *       opacity: isOpen ? 1 : 0,
+ *       x: isOpen ? 0 : closedX
+ *     }} />
+ *   )
+ * }
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */
+function useReducedMotion() {
+    /**
+     * Lazy initialisation of prefersReducedMotion
+     */
+    !hasReducedMotionListener.current && initPrefersReducedMotion();
+    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
+    if (process.env.NODE_ENV !== "production") {
+        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
+    }
+    /**
+     * TODO See if people miss automatically updating shouldReduceMotion setting
+     */
+    return shouldReduceMotion;
+}
+
+export { useReducedMotion };