@mui/material 9.0.0 → 9.1.0

package/styles/shouldSkipGeneratingVar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = shouldSkipGeneratingVar;
 function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return keys[0] === 'motion' || !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/styles/shouldSkipGeneratingVar.mjs

@@ -1,5 +1,5 @@
 export default function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return keys[0] === 'motion' || !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/styles/stringifyTheme.js

@@ -55,6 +55,7 @@ function stringifyTheme(baseTheme = {}) {
 const theme = ${JSON.stringify(serializableTheme, null, 2)};
 
 theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.motion = { reducedMotion: 'never', ...theme.motion };
 theme.transitions = createTransitions(theme.transitions || {});
 
 export default theme;`;

package/styles/stringifyTheme.mjs

@@ -48,6 +48,7 @@ export function stringifyTheme(baseTheme = {}) {
 const theme = ${JSON.stringify(serializableTheme, null, 2)};
 
 theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.motion = { reducedMotion: 'never', ...theme.motion };
 theme.transitions = createTransitions(theme.transitions || {});
 
 export default theme;`;

package/styles/useThemeProps.d.mts

@@ -3,7 +3,7 @@ import { Components } from "./components.mjs";
 export interface ThemeWithProps {
   components?: Components<Omit<Theme, 'components'>> | undefined;
 }
-export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+export type ThemedProps<ThemeInput, Name extends keyof any> = ThemeInput extends {
   components: Record<Name, {
     defaultProps: infer Props;
   }>;
@@ -36,7 +36,7 @@ export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
  * @param params.props The input props
  * @param params.name The name of the component as defined in the theme
  */
-export default function useThemeProps<Theme extends ThemeWithProps, Props, Name extends keyof any>(params: {
+export default function useThemeProps<ThemeInput extends ThemeWithProps, Props, Name extends keyof any>(params: {
   props: Props;
   name: Name;
-}): Props & ThemedProps<Theme, Name>;
+}): Props & ThemedProps<ThemeInput, Name>;

package/styles/useThemeProps.d.ts

@@ -3,7 +3,7 @@ import { Components } from "./components.js";
 export interface ThemeWithProps {
   components?: Components<Omit<Theme, 'components'>> | undefined;
 }
-export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+export type ThemedProps<ThemeInput, Name extends keyof any> = ThemeInput extends {
   components: Record<Name, {
     defaultProps: infer Props;
   }>;
@@ -36,7 +36,7 @@ export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
  * @param params.props The input props
  * @param params.name The name of the component as defined in the theme
  */
-export default function useThemeProps<Theme extends ThemeWithProps, Props, Name extends keyof any>(params: {
+export default function useThemeProps<ThemeInput extends ThemeWithProps, Props, Name extends keyof any>(params: {
   props: Props;
   name: Name;
-}): Props & ThemedProps<Theme, Name>;
+}): Props & ThemedProps<ThemeInput, Name>;

package/transitions/index.d.mts

@@ -1 +1 @@
-export * from "./transition.mjs";
+export type { EasingProps, TransitionHandlerKeys, TransitionHandlerProps, TransitionKeys, TransitionProps } from "./types.mjs";

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from "./transition.js";
+export type { EasingProps, TransitionHandlerKeys, TransitionHandlerProps, TransitionKeys, TransitionProps } from "./types.js";

package/transitions/index.js

@@ -2,15 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-var _transition = require("./transition");
-Object.keys(_transition).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _transition[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _transition[key];
-    }
-  });
 });

package/transitions/index.mjs

@@ -1 +1 @@
-export * from "./transition.mjs";
+export {};

package/transitions/transition.d.mts

@@ -1,12 +1 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-  easing: string | {
-    enter?: string | undefined;
-    exit?: string | undefined;
-  };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export type { EasingProps, EnterHandler, ExitHandler, TransitionActions, TransitionHandlerKeys, TransitionHandlerProps, TransitionKeys, TransitionProps, TransitionStatus } from "./types.mjs";

package/transitions/transition.d.ts

@@ -1,12 +1 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-  easing: string | {
-    enter?: string | undefined;
-    exit?: string | undefined;
-  };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export type { EasingProps, EnterHandler, ExitHandler, TransitionActions, TransitionHandlerKeys, TransitionHandlerProps, TransitionKeys, TransitionProps, TransitionStatus } from "./types.js";

package/transitions/types.d.mts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
+export interface TransitionActions {
+  appear?: boolean | undefined;
+  enter?: boolean | undefined;
+  exit?: boolean | undefined;
+}
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type ExitHandler = (node: HTMLElement) => void;
+export interface TransitionHandlerProps {
+  /**
+   * @ignore
+   */
+  onEnter?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntering?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntered?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExit?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExiting?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExited?: ExitHandler | undefined;
+}
+export interface EasingProps {
+  easing: string | {
+    enter?: string | undefined;
+    exit?: string | undefined;
+  };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | 'disablePrefersReducedMotion' | TransitionHandlerKeys;
+interface ConsumerTransitionProps extends TransitionHandlerProps {
+  in?: boolean | undefined;
+  mountOnEnter?: boolean | undefined;
+  unmountOnExit?: boolean | undefined;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  timeout?: number | {
+    appear?: number | undefined;
+    enter?: number | undefined;
+    exit?: number | undefined;
+  } | undefined;
+  /**
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
+   */
+  addEndListener?: ((node: HTMLElement, done: () => void) => void) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
+}
+export interface TransitionProps extends TransitionActions, Partial<Pick<ConsumerTransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export {};

package/transitions/types.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
+export interface TransitionActions {
+  appear?: boolean | undefined;
+  enter?: boolean | undefined;
+  exit?: boolean | undefined;
+}
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type ExitHandler = (node: HTMLElement) => void;
+export interface TransitionHandlerProps {
+  /**
+   * @ignore
+   */
+  onEnter?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntering?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntered?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExit?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExiting?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExited?: ExitHandler | undefined;
+}
+export interface EasingProps {
+  easing: string | {
+    enter?: string | undefined;
+    exit?: string | undefined;
+  };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | 'disablePrefersReducedMotion' | TransitionHandlerKeys;
+interface ConsumerTransitionProps extends TransitionHandlerProps {
+  in?: boolean | undefined;
+  mountOnEnter?: boolean | undefined;
+  unmountOnExit?: boolean | undefined;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  timeout?: number | {
+    appear?: number | undefined;
+    enter?: number | undefined;
+    exit?: number | undefined;
+  } | undefined;
+  /**
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
+   */
+  addEndListener?: ((node: HTMLElement, done: () => void) => void) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
+}
+export interface TransitionProps extends TransitionActions, Partial<Pick<ConsumerTransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export {};

package/transitions/useReducedMotion.d.mts

@@ -0,0 +1,14 @@
+import type { ReducedMotionMode } from "../styles/createMotion.mjs";
+interface TransitionTiming {
+  duration: string | number;
+  delay: string | undefined;
+}
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+export default function useReducedMotion(mode: ReducedMotionMode, disablePrefersReducedMotion: boolean | undefined): {
+  shouldReduceMotion: boolean;
+  getTransitionTiming(timing: TransitionTiming): TransitionTiming;
+};
+export {};

package/transitions/useReducedMotion.d.ts

@@ -0,0 +1,14 @@
+import type { ReducedMotionMode } from "../styles/createMotion.js";
+interface TransitionTiming {
+  duration: string | number;
+  delay: string | undefined;
+}
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+export default function useReducedMotion(mode: ReducedMotionMode, disablePrefersReducedMotion: boolean | undefined): {
+  shouldReduceMotion: boolean;
+  getTransitionTiming(timing: TransitionTiming): TransitionTiming;
+};
+export {};

package/transitions/useReducedMotion.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useReducedMotion;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+const MEDIA_QUERY = '(prefers-reduced-motion: reduce)';
+const REDUCED_MOTION_DURATION = 0;
+const REDUCED_MOTION_DELAY = '0ms';
+const NOOP = () => {};
+const getDefaultSnapshot = () => false;
+const getReducedMotionSnapshot = () => true;
+const subscribeNoop = () => NOOP;
+/**
+ * Subscribes to the OS reduced-motion media query only when the theme mode needs it.
+ * React 17 reads the media query after mount, matching useMediaQuery's fallback path.
+ */
+function useReducedMotionMediaQueryOld(enabled) {
+  const [queryState, setQueryState] = React.useState(() => ({
+    enabled,
+    matches: enabled ? null : false
+  }));
+  let matches = queryState.matches;
+  if (queryState.enabled !== enabled) {
+    matches = null;
+    if (!enabled) {
+      matches = false;
+    }
+  }
+  (0, _useEnhancedEffect.default)(() => {
+    const setResolvedMatches = nextMatches => {
+      setQueryState(previousState => {
+        if (previousState.enabled === enabled && previousState.matches === nextMatches) {
+          return previousState;
+        }
+        return {
+          enabled,
+          matches: nextMatches
+        };
+      });
+    };
+    if (!enabled) {
+      if (queryState.enabled) {
+        setResolvedMatches(false);
+      }
+      return undefined;
+    }
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      setResolvedMatches(false);
+      return undefined;
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    const update = () => {
+      setResolvedMatches(mediaQueryList.matches);
+    };
+    update();
+    mediaQueryList.addEventListener('change', update);
+    return () => {
+      mediaQueryList.removeEventListener('change', update);
+    };
+  }, [enabled, queryState.enabled]);
+  return matches;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
+
+/**
+ * React 18+ can read the media query during client renders, so newly mounted
+ * transitions do not start from the SSR-safe reduced-motion default.
+ */
+function useReducedMotionMediaQueryNew(enabled) {
+  const getServerSnapshot = enabled ? getReducedMotionSnapshot : getDefaultSnapshot;
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (!enabled || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return [getDefaultSnapshot, subscribeNoop];
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    return [() => mediaQueryList.matches, notify => {
+      mediaQueryList.addEventListener('change', notify);
+      return () => {
+        mediaQueryList.removeEventListener('change', notify);
+      };
+    }];
+  }, [enabled]);
+  return maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+const useReducedMotionMediaQuery = maybeReactUseSyncExternalStore !== undefined ? useReducedMotionMediaQueryNew : useReducedMotionMediaQueryOld;
+
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+function useReducedMotion(mode, disablePrefersReducedMotion) {
+  const prefersReducedMotion = useReducedMotionMediaQuery(!disablePrefersReducedMotion && mode === 'system');
+  const shouldReduceMotion = !disablePrefersReducedMotion && (mode === 'always' || mode === 'system' && prefersReducedMotion !== false);
+  return React.useMemo(() => ({
+    shouldReduceMotion,
+    getTransitionTiming(timing) {
+      if (!shouldReduceMotion) {
+        return timing;
+      }
+      return {
+        duration: REDUCED_MOTION_DURATION,
+        delay: REDUCED_MOTION_DELAY
+      };
+    }
+  }), [shouldReduceMotion]);
+}

package/transitions/useReducedMotion.mjs

@@ -0,0 +1,110 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+const MEDIA_QUERY = '(prefers-reduced-motion: reduce)';
+const REDUCED_MOTION_DURATION = 0;
+const REDUCED_MOTION_DELAY = '0ms';
+const NOOP = () => {};
+const getDefaultSnapshot = () => false;
+const getReducedMotionSnapshot = () => true;
+const subscribeNoop = () => NOOP;
+/**
+ * Subscribes to the OS reduced-motion media query only when the theme mode needs it.
+ * React 17 reads the media query after mount, matching useMediaQuery's fallback path.
+ */
+function useReducedMotionMediaQueryOld(enabled) {
+  const [queryState, setQueryState] = React.useState(() => ({
+    enabled,
+    matches: enabled ? null : false
+  }));
+  let matches = queryState.matches;
+  if (queryState.enabled !== enabled) {
+    matches = null;
+    if (!enabled) {
+      matches = false;
+    }
+  }
+  useEnhancedEffect(() => {
+    const setResolvedMatches = nextMatches => {
+      setQueryState(previousState => {
+        if (previousState.enabled === enabled && previousState.matches === nextMatches) {
+          return previousState;
+        }
+        return {
+          enabled,
+          matches: nextMatches
+        };
+      });
+    };
+    if (!enabled) {
+      if (queryState.enabled) {
+        setResolvedMatches(false);
+      }
+      return undefined;
+    }
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      setResolvedMatches(false);
+      return undefined;
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    const update = () => {
+      setResolvedMatches(mediaQueryList.matches);
+    };
+    update();
+    mediaQueryList.addEventListener('change', update);
+    return () => {
+      mediaQueryList.removeEventListener('change', update);
+    };
+  }, [enabled, queryState.enabled]);
+  return matches;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
+
+/**
+ * React 18+ can read the media query during client renders, so newly mounted
+ * transitions do not start from the SSR-safe reduced-motion default.
+ */
+function useReducedMotionMediaQueryNew(enabled) {
+  const getServerSnapshot = enabled ? getReducedMotionSnapshot : getDefaultSnapshot;
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (!enabled || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return [getDefaultSnapshot, subscribeNoop];
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    return [() => mediaQueryList.matches, notify => {
+      mediaQueryList.addEventListener('change', notify);
+      return () => {
+        mediaQueryList.removeEventListener('change', notify);
+      };
+    }];
+  }, [enabled]);
+  return maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+const useReducedMotionMediaQuery = maybeReactUseSyncExternalStore !== undefined ? useReducedMotionMediaQueryNew : useReducedMotionMediaQueryOld;
+
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+export default function useReducedMotion(mode, disablePrefersReducedMotion) {
+  const prefersReducedMotion = useReducedMotionMediaQuery(!disablePrefersReducedMotion && mode === 'system');
+  const shouldReduceMotion = !disablePrefersReducedMotion && (mode === 'always' || mode === 'system' && prefersReducedMotion !== false);
+  return React.useMemo(() => ({
+    shouldReduceMotion,
+    getTransitionTiming(timing) {
+      if (!shouldReduceMotion) {
+        return timing;
+      }
+      return {
+        duration: REDUCED_MOTION_DURATION,
+        delay: REDUCED_MOTION_DELAY
+      };
+    }
+  }), [shouldReduceMotion]);
+}

package/transitions/utils.d.mts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { defaultStyles } from "../styles/reducedMotion.mjs";
+import type { ReducedMotionMode } from "../styles/createMotion.mjs";
 export declare const reflow: (node: Element) => number;
 interface ComponentProps {
   easing: string | {
@@ -19,12 +21,59 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+interface TransitionCreateOptions {
+  duration: number | string;
+  easing: string;
+  delay: number | string;
+}
+interface TranslateOffset {
+  offsetX: number;
+  offsetY: number;
+}
+/**
+ * Extracts the x/y translation from a CSS transform string.
+ *
+ * Transition components use these offsets when calculating off-screen positions:
+ * if an element is already translated, the distance needed to hide it must start
+ * from that visual position instead of its untransformed layout position.
+ *
+ * CSSOM commonly serializes translations as matrix() or matrix3d(), while inline
+ * gesture styles may use translate(), translate3d(), translateX(), or
+ * translateY(). This helper normalizes those supported forms into numeric pixel
+ * offsets and returns zero offsets for empty, none, or unsupported transforms.
+ */
+export declare function getTranslateOffsets(transform: string | undefined): TranslateOffset;
 export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
 type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+export declare function getReducedMotionStyles<Styles extends object = typeof defaultStyles>(theme: {
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, styles?: Styles): Styles | {
+  '@media (prefers-reduced-motion: reduce)': Styles;
+} | null;
+export declare function getTransitionStyles(theme: {
+  transitions?: {
+    create: (props?: string | string[], options?: Partial<TransitionCreateOptions>) => string;
+  } | undefined;
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, props?: string | string[], options?: Partial<TransitionCreateOptions>): React.CSSProperties | {
+  transition: string;
+} | {
+  '@media (prefers-reduced-motion: reduce)': {
+    transition: string;
+  };
+};
 export {};