feat: add reducedMotion setting to Provider

.changeset/pretty-parrots-guess.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/system": minor
+---
+
+Add reducedMotion setting to Provider (#3395)

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -116,12 +116,12 @@ interface AppProviderProps {
     import {GregorianCalendar} from '@internationalized/date';
 
     function createCalendar(identifier) {
-    switch (identifier) {
-      case 'gregory':
-        return new GregorianCalendar();
-      default:
-        throw new Error(`Unsupported calendar ${identifier}`);
-    }
+      switch (identifier) {
+        case 'gregory':
+          return new GregorianCalendar();
+        default:
+          throw new Error(`Unsupported calendar ${identifier}`);
+      }
     }
     ```
 
@@ -167,6 +167,15 @@ or mark the field as required or invalid via ARIA.
 - **Type**: `native | aria`
 - **Default**: `aria`
 
+`reducedMotion`
+
+- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. 
+The available options are:
+  - `"user"`: Adapts to the user's device settings for reduced motion.
+  - `"always"`: Disables all animations.
+  - `"never"`: Keeps all animations active.
+- **Type**: `"user" | "always" | "never"`
+- **Default**: `"never"`
 ---
 
 ## Types

packages/components/calendar/stories/calendar.stories.tsx

@@ -13,6 +13,7 @@ import {I18nProvider, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
 import {Radio, RadioGroup} from "@nextui-org/radio";
 import {cn} from "@nextui-org/theme";
+import {NextUIProvider, NextUIProviderProps} from "@nextui-org/system";
 
 import {Calendar, CalendarProps, DateValue} from "../src";
 
@@ -38,6 +39,11 @@ export default {
       },
       options: ["narrow", "short", "long"],
     },
+    disableAnimation: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 } as Meta<typeof Calendar>;
 
@@ -257,6 +263,30 @@ const CalendarWidthTemplate = (args: CalendarProps) => {
   );
 };
 
+const ReducedMotionTemplate = (args: CalendarProps) => {
+  const [reducedMotion, setReducedMotion] =
+    React.useState<NextUIProviderProps["reducedMotion"]>("never");
+
+  return (
+    <NextUIProvider reducedMotion={reducedMotion}>
+      <RadioGroup
+        className="mb-4"
+        defaultValue={reducedMotion}
+        label="Reduced motion"
+        orientation="horizontal"
+        onValueChange={(value) => {
+          setReducedMotion(value as NextUIProviderProps["reducedMotion"]);
+        }}
+      >
+        <Radio value="user">user</Radio>
+        <Radio value="always">always</Radio>
+        <Radio value="never">never</Radio>
+      </RadioGroup>
+      <Calendar {...args} />
+    </NextUIProvider>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
@@ -375,3 +405,9 @@ export const CalendarWidth = {
     ...defaultProps,
   },
 };
+export const ReducedMotion = {
+  render: ReducedMotionTemplate,
+  args: {
+    ...defaultProps,
+  },
+};

packages/core/system/src/provider.tsx

@@ -5,7 +5,7 @@ import {I18nProvider, I18nProviderProps} from "@react-aria/i18n";
 import {RouterProvider} from "@react-aria/utils";
 import {OverlayProvider} from "@react-aria/overlays";
 import {useMemo} from "react";
-import {MotionGlobalConfig} from "framer-motion";
+import {MotionConfig, MotionGlobalConfig} from "framer-motion";
 
 import {ProviderContext} from "./provider-context";
 
@@ -21,6 +21,12 @@ export interface NextUIProviderProps
    * animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
    */
   skipFramerMotionAnimations?: boolean;
+  /**
+   * Defines a new default transition for the entire tree.
+   * @default "never"
+   * See: https://www.framer.com/motion/motion-config/#props
+   */
+  reducedMotion?: "user" | "always" | "never";
   /**
    * The locale to apply to the children.
    * @default "en-US"
@@ -36,9 +42,10 @@ export interface NextUIProviderProps
 export const NextUIProvider: React.FC<NextUIProviderProps> = ({
   children,
   navigate,
-  disableAnimation = false,
+  disableAnimation,
   disableRipple = false,
   skipFramerMotionAnimations = disableAnimation,
+  reducedMotion = "never",
   validationBehavior = "aria",
   locale = "en-US",
   // if minDate / maxDate are not specified in `defaultDates`
@@ -77,7 +84,9 @@ export const NextUIProvider: React.FC<NextUIProviderProps> = ({
   return (
     <ProviderContext value={context}>
       <I18nProvider locale={locale}>
-        <OverlayProvider {...otherProps}>{contents}</OverlayProvider>
+        <MotionConfig reducedMotion={reducedMotion}>
+          <OverlayProvider {...otherProps}>{contents}</OverlayProvider>
+        </MotionConfig>
       </I18nProvider>
     </ProviderContext>
   );