@aphrody/m3-motion 3.3.1 → 3.3.3

package/dist/index.js

@@ -1,9 +1,5 @@
 'use client';
-import * as React5 from 'react';
-import { motion, AnimatePresence, useAnimate } from 'motion/react';
-import { jsx } from 'react/jsx-runtime';
-
-// src/springs.ts
+// packages/m3-motion/src/springs.ts
 var m3Springs = {
   fast: {
     spatial: {
@@ -48,10 +44,8 @@ var m3Springs = {
     }
   }
 };
-
-// src/easings.ts
+// packages/m3-motion/src/easings.ts
 var m3Easings = {
-  /** Closest single-bezier approximation. Use emphasizedDecelerate/Accelerate for transitions. */
   emphasized: [0.2, 0, 0, 1],
   emphasizedDecelerate: [0.05, 0.7, 0.1, 1],
   emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
@@ -59,7 +53,6 @@ var m3Easings = {
   standardDecelerate: [0, 0, 0, 1],
   standardAccelerate: [0.3, 0, 1, 1],
   linear: [0, 0, 1, 1],
-  /** Legacy (M2 default) — kept for migration compatibility. */
   legacy: [0.4, 0, 0.2, 1],
   legacyDecelerate: [0, 0, 0.2, 1],
   legacyAccelerate: [0.4, 0, 1, 1]
@@ -82,16 +75,17 @@ var m3Durations = {
   extraLong3: 0.9,
   extraLong4: 1
 };
-
-// src/spring-interpolation.ts
+// packages/m3-motion/src/spring-interpolation.ts
 var MIN_DURATION_MS = 50;
-var MAX_DURATION_MS = 2e3;
-var SETTLE_THRESHOLD = 5e-3;
+var MAX_DURATION_MS = 2000;
+var SETTLE_THRESHOLD = 0.005;
 var DEFAULT_MASS = 1;
 var DEFAULT_STEPS = 60;
 function clamp(value, min, max) {
-  if (value < min) return min;
-  if (value > max) return max;
+  if (value < min)
+    return min;
+  if (value > max)
+    return max;
   return value;
 }
 function normalize(params) {
@@ -122,15 +116,15 @@ function springDurationMs(params) {
     return MAX_DURATION_MS;
   }
   const settleSeconds = -Math.log(SETTLE_THRESHOLD) / decayRate;
-  const settleMs = settleSeconds * 1e3;
+  const settleMs = settleSeconds * 1000;
   return clamp(settleMs, MIN_DURATION_MS, MAX_DURATION_MS);
 }
 function springToCssEasing(params) {
   const { k, c, m } = normalize(params);
   const zeta = dampingRatio(k, c, m);
   if (zeta < 0.85) {
-    const [x12, y12, x22, y22] = [0.05, 0.7, 0.1, 1];
-    return `cubic-bezier(${x12}, ${y12}, ${x22}, ${y22})`;
+    const [x1, y1, x2, y2] = [0.05, 0.7, 0.1, 1];
+    return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
   }
   const t = clamp((zeta - 0.85) / (1.6 - 0.85), 0, 1);
   const x1 = lerp(0.1, 0, t);
@@ -143,17 +137,18 @@ function lerp(a, b, t) {
   return a + (b - a) * t;
 }
 function round(n) {
-  return Math.round(n * 1e3) / 1e3;
+  return Math.round(n * 1000) / 1000;
 }
 function springPosition(t, w0, zeta) {
-  if (t <= 0) return 0;
-  if (zeta < 1 - 1e-6) {
+  if (t <= 0)
+    return 0;
+  if (zeta < 1 - 0.000001) {
     const wd = w0 * Math.sqrt(1 - zeta * zeta);
     const envelope = Math.exp(-zeta * w0 * t);
     const osc = Math.cos(wd * t) + zeta * w0 / wd * Math.sin(wd * t);
     return 1 - envelope * osc;
   }
-  if (zeta <= 1 + 1e-6) {
+  if (zeta <= 1 + 0.000001) {
     const envelope = Math.exp(-w0 * t);
     return 1 - envelope * (1 + w0 * t);
   }
@@ -173,9 +168,9 @@ function springToWaapiKeyframes(params, opts) {
   const to = opts?.to ?? 1;
   const span = to - from;
   const duration = springDurationMs(params);
-  const durationSeconds = duration / 1e3;
+  const durationSeconds = duration / 1000;
   const samples = [];
-  for (let i = 0; i < steps; i++) {
+  for (let i = 0;i < steps; i++) {
     const offset = i / (steps - 1);
     let value;
     if (i === 0) {
@@ -193,8 +188,6 @@ function springToWaapiKeyframes(params, opts) {
   return {
     samples,
     keyframes,
-    // Easing is linear: the spring's shape is encoded in the samples
-    // themselves, so the browser must interpolate them at constant rate.
     options: { duration, easing: "linear" }
   };
 }
@@ -215,103 +208,157 @@ function springFromPreset(preset) {
     mass: preset.mass != null && preset.mass > 0 ? preset.mass : DEFAULT_MASS
   };
 }
-var M3Fade = React5.forwardRef(
-  ({ in: inProp, appear = true, children, ...props }, ref) => {
-    const variants = {
-      initial: { opacity: 0 },
-      animate: {
-        opacity: 1,
-        transition: {
-          ease: m3Easings.emphasizedDecelerate,
-          duration: m3Durations.medium2
-        }
-      },
-      exit: {
-        opacity: 0,
-        transition: {
-          ease: m3Easings.emphasizedAccelerate,
-          duration: m3Durations.short4
-        }
+// packages/m3-motion/src/components/M3Fade.tsx
+import * as React from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+// packages/m3-motion/src/hooks/useM3ReducedMotion.ts
+import { useSyncExternalStore } from "react";
+"use client";
+var QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia)
+    return () => {};
+  const media = window.matchMedia(QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+function useM3ReducedMotion() {
+  return useSyncExternalStore(subscribe, () => typeof window !== "undefined" && !!window.matchMedia?.(QUERY).matches, () => false);
+}
+function immediate(target) {
+  if (typeof target === "string")
+    return target;
+  return { ...target, transition: { type: "tween", duration: 0, delay: 0 } };
+}
+function motionVariants(variants, reduced) {
+  if (!reduced)
+    return variants;
+  return Object.fromEntries(Object.entries(variants).map(([key, variant]) => [
+    key,
+    typeof variant === "function" ? (...args) => immediate(variant(...args)) : immediate(variant)
+  ]));
+}
+
+// packages/m3-motion/src/components/M3Fade.tsx
+import { jsx } from "react/jsx-runtime";
+var M3Fade = React.forwardRef(({ in: inProp, appear = true, children, variants: customVariants, ...props }, ref) => {
+  const reduced = useM3ReducedMotion();
+  const variants = {
+    initial: { opacity: 0 },
+    animate: {
+      opacity: 1,
+      transition: {
+        ease: m3Easings.emphasizedDecelerate,
+        duration: m3Durations.medium2
       }
-    };
-    const content = /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        variants,
-        initial: appear ? "initial" : false,
-        animate: "animate",
-        exit: "exit",
-        style: { willChange: "opacity" },
-        ...props,
-        children
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        ease: m3Easings.emphasizedAccelerate,
+        duration: m3Durations.short4
       }
-    );
-    if (inProp !== void 0) {
-      return /* @__PURE__ */ jsx(AnimatePresence, { children: inProp ? content : null });
     }
-    return content;
+  };
+  const content = /* @__PURE__ */ jsx(motion.div, {
+    ref,
+    variants: motionVariants(customVariants ?? variants, reduced),
+    initial: appear && !reduced ? "initial" : false,
+    animate: "animate",
+    exit: "exit",
+    style: { willChange: "opacity" },
+    ...props,
+    children
+  });
+  if (inProp !== undefined) {
+    return /* @__PURE__ */ jsx(AnimatePresence, {
+      children: inProp ? content : null
+    });
   }
-);
+  return content;
+});
 M3Fade.displayName = "M3Fade";
-var M3SharedAxis = React5.forwardRef(
-  ({ in: inProp, axis = "x", forward = true, appear = true, transition: customTransition, variants: customVariants, children, ...props }, ref) => {
-    const translateOffset = 30;
-    const scaleOffset = 0.08;
-    const defaultVariants = {
-      initial: {
-        opacity: 0,
-        x: axis === "x" ? forward ? translateOffset : -translateOffset : 0,
-        y: axis === "y" ? forward ? translateOffset : -translateOffset : 0,
-        scale: axis === "z" ? forward ? 1 - scaleOffset : 1 + scaleOffset : 1
-      },
-      animate: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        scale: 1,
-        transition: customTransition || {
-          x: { ease: m3Easings.emphasizedDecelerate, duration: m3Durations.medium2 },
-          y: { ease: m3Easings.emphasizedDecelerate, duration: m3Durations.medium2 },
-          scale: { ease: m3Easings.emphasizedDecelerate, duration: m3Durations.medium2 },
-          opacity: { ease: m3Easings.standard, duration: m3Durations.medium2 }
-        }
-      },
-      exit: {
-        opacity: 0,
-        x: axis === "x" ? forward ? -translateOffset : translateOffset : 0,
-        y: axis === "y" ? forward ? -translateOffset : translateOffset : 0,
-        scale: axis === "z" ? forward ? 1 + scaleOffset : 1 - scaleOffset : 1,
-        transition: customTransition || {
-          x: { ease: m3Easings.emphasizedAccelerate, duration: m3Durations.short4 },
-          y: { ease: m3Easings.emphasizedAccelerate, duration: m3Durations.short4 },
-          scale: { ease: m3Easings.emphasizedAccelerate, duration: m3Durations.short4 },
-          opacity: { ease: m3Easings.standard, duration: m3Durations.short4 }
-        }
+// packages/m3-motion/src/components/M3SharedAxis.tsx
+import * as React2 from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var M3SharedAxis = React2.forwardRef(({
+  in: inProp,
+  axis = "x",
+  forward = true,
+  appear = true,
+  transition: customTransition,
+  variants: customVariants,
+  children,
+  ...props
+}, ref) => {
+  const reduced = useM3ReducedMotion();
+  const translateOffset = 30;
+  const scaleOffset = 0.08;
+  const defaultVariants = {
+    initial: {
+      opacity: 0,
+      x: axis === "x" ? forward ? translateOffset : -translateOffset : 0,
+      y: axis === "y" ? forward ? translateOffset : -translateOffset : 0,
+      scale: axis === "z" ? forward ? 1 - scaleOffset : 1 + scaleOffset : 1
+    },
+    animate: {
+      opacity: 1,
+      x: 0,
+      y: 0,
+      scale: 1,
+      transition: customTransition || {
+        x: { ease: m3Easings.emphasizedDecelerate, duration: m3Durations.medium2 },
+        y: { ease: m3Easings.emphasizedDecelerate, duration: m3Durations.medium2 },
+        scale: { ease: m3Easings.emphasizedDecelerate, duration: m3Durations.medium2 },
+        opacity: { ease: m3Easings.standard, duration: m3Durations.medium2 }
       }
-    };
-    const resolvedVariants = customVariants || defaultVariants;
-    const content = /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        variants: resolvedVariants,
-        initial: appear ? "initial" : false,
-        animate: "animate",
-        exit: "exit",
-        style: { willChange: "opacity, transform" },
-        ...props,
-        children
+    },
+    exit: {
+      opacity: 0,
+      x: axis === "x" ? forward ? -translateOffset : translateOffset : 0,
+      y: axis === "y" ? forward ? -translateOffset : translateOffset : 0,
+      scale: axis === "z" ? forward ? 1 + scaleOffset : 1 - scaleOffset : 1,
+      transition: customTransition || {
+        x: { ease: m3Easings.emphasizedAccelerate, duration: m3Durations.short4 },
+        y: { ease: m3Easings.emphasizedAccelerate, duration: m3Durations.short4 },
+        scale: { ease: m3Easings.emphasizedAccelerate, duration: m3Durations.short4 },
+        opacity: { ease: m3Easings.standard, duration: m3Durations.short4 }
       }
-    );
-    if (inProp !== void 0) {
-      return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: inProp ? content : null });
     }
-    return content;
+  };
+  const resolvedVariants = motionVariants(customVariants ?? defaultVariants, reduced);
+  const content = /* @__PURE__ */ jsx2(motion2.div, {
+    ref,
+    variants: resolvedVariants,
+    initial: appear && !reduced ? "initial" : false,
+    animate: "animate",
+    exit: "exit",
+    style: { willChange: "opacity, transform" },
+    ...props,
+    children
+  });
+  if (inProp !== undefined) {
+    return /* @__PURE__ */ jsx2(AnimatePresence2, {
+      mode: "wait",
+      children: inProp ? content : null
+    });
   }
-);
+  return content;
+});
 M3SharedAxis.displayName = "M3SharedAxis";
-var M3FadeThrough = ({ stateKey, transition: customTransition, variants: customVariants, children, ...props }) => {
+// packages/m3-motion/src/components/M3FadeThrough.tsx
+import { motion as motion3, AnimatePresence as AnimatePresence3 } from "motion/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var M3FadeThrough = ({
+  stateKey,
+  transition: customTransition,
+  variants: customVariants,
+  children,
+  ...props
+}) => {
+  const reduced = useM3ReducedMotion();
   const defaultVariants = {
     initial: {
       opacity: 0,
@@ -341,76 +388,82 @@ var M3FadeThrough = ({ stateKey, transition: customTransition, variants: customV
       }
     }
   };
-  const resolvedVariants = customVariants || defaultVariants;
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
-    motion.div,
-    {
+  const resolvedVariants = motionVariants(customVariants ?? defaultVariants, reduced);
+  return /* @__PURE__ */ jsx3(AnimatePresence3, {
+    mode: "wait",
+    children: /* @__PURE__ */ jsx3(motion3.div, {
       variants: resolvedVariants,
-      initial: "initial",
+      initial: reduced ? false : "initial",
       animate: "animate",
       exit: "exit",
       style: { willChange: "opacity, transform" },
       ...props,
       children
-    },
-    stateKey
-  ) });
+    }, stateKey)
+  });
 };
 M3FadeThrough.displayName = "M3FadeThrough";
-var M3Collapse = React5.forwardRef(
-  ({ in: inProp, appear = false, children, ...props }, ref) => {
-    const variants = {
-      initial: { height: 0, opacity: 0 },
-      animate: {
-        height: "auto",
-        opacity: 1,
-        transition: {
-          height: {
-            ease: m3Easings.emphasized,
-            duration: m3Durations.medium4
-          },
-          opacity: {
-            ease: m3Easings.standard,
-            duration: m3Durations.medium2
-          }
-        }
-      },
-      exit: {
-        height: 0,
-        opacity: 0,
-        transition: {
-          height: {
-            ease: m3Easings.emphasized,
-            duration: m3Durations.medium4
-          },
-          opacity: {
-            ease: m3Easings.standard,
-            duration: m3Durations.medium2
-          }
+// packages/m3-motion/src/components/M3Collapse.tsx
+import * as React3 from "react";
+import { motion as motion4, AnimatePresence as AnimatePresence4 } from "motion/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var M3Collapse = React3.forwardRef(({ in: inProp, appear = false, children, variants: customVariants, ...props }, ref) => {
+  const reduced = useM3ReducedMotion();
+  const variants = {
+    initial: { height: 0, opacity: 0 },
+    animate: {
+      height: "auto",
+      opacity: 1,
+      transition: {
+        height: {
+          ease: m3Easings.emphasized,
+          duration: m3Durations.medium4
+        },
+        opacity: {
+          ease: m3Easings.standard,
+          duration: m3Durations.medium2
         }
       }
-    };
-    const content = /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        variants,
-        initial: appear ? "initial" : false,
-        animate: "animate",
-        exit: "exit",
-        style: { overflow: "hidden", willChange: "height, opacity" },
-        ...props,
-        children
+    },
+    exit: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        height: {
+          ease: m3Easings.emphasized,
+          duration: m3Durations.medium4
+        },
+        opacity: {
+          ease: m3Easings.standard,
+          duration: m3Durations.medium2
+        }
       }
-    );
-    if (inProp !== void 0) {
-      return /* @__PURE__ */ jsx(AnimatePresence, { initial: appear, children: inProp ? content : null });
     }
-    return content;
+  };
+  const content = /* @__PURE__ */ jsx4(motion4.div, {
+    ref,
+    variants: motionVariants(customVariants ?? variants, reduced),
+    initial: appear && !reduced ? "initial" : false,
+    animate: "animate",
+    exit: "exit",
+    style: { overflow: "hidden", willChange: "height, opacity" },
+    ...props,
+    children
+  });
+  if (inProp !== undefined) {
+    return /* @__PURE__ */ jsx4(AnimatePresence4, {
+      initial: appear,
+      children: inProp ? content : null
+    });
   }
-);
+  return content;
+});
 M3Collapse.displayName = "M3Collapse";
-var M3ContainerTransformContext = React5.createContext(null);
+// packages/m3-motion/src/components/M3ContainerTransform.tsx
+import * as React4 from "react";
+import { motion as motion5 } from "motion/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var M3ContainerTransformContext = React4.createContext(null);
 function getDefaultTransition(isActive, speed) {
   if (speed === "fast") {
     return isActive ? { delay: 0.05, duration: 0.15, ease: m3Easings.emphasizedDecelerate } : { duration: 0.08, ease: m3Easings.emphasizedAccelerate };
@@ -420,99 +473,84 @@ function getDefaultTransition(isActive, speed) {
   }
   return isActive ? { delay: 0.1, duration: 0.35, ease: m3Easings.emphasizedDecelerate } : { duration: 0.15, ease: m3Easings.emphasizedAccelerate };
 }
-var M3ContainerTransform = React5.forwardRef(
-  ({ layoutId, speed = "default", isExpanded = false, children, transition, style, ...props }, ref) => {
-    const springConfig = m3Springs[speed].spatial;
-    const contextValue = React5.useMemo(
-      () => ({ isExpanded, speed }),
-      [isExpanded, speed]
-    );
-    return /* @__PURE__ */ jsx(M3ContainerTransformContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        layoutId,
-        layout: true,
-        transition: transition || springConfig,
-        style: {
-          willChange: "transform, border-radius",
-          overflow: "hidden",
-          ...style
-        },
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-M3ContainerTransform.displayName = "M3ContainerTransform";
-var M3ContainerTransformStart = React5.forwardRef(
-  ({ active, children, style, transition, layout = "position", ...props }, ref) => {
-    const context = React5.useContext(M3ContainerTransformContext);
-    const isActive = active ?? (context ? !context.isExpanded : true);
-    const speed = context?.speed ?? "default";
-    const baseStyle = {
-      width: "100%",
-      height: "100%",
-      boxSizing: "border-box",
-      pointerEvents: isActive ? "auto" : "none",
-      ...!isActive && {
-        position: "absolute",
-        top: 0,
-        left: 0
+var M3ContainerTransform = React4.forwardRef(({
+  layoutId,
+  speed = "default",
+  isExpanded = false,
+  children,
+  transition,
+  style,
+  ...props
+}, ref) => {
+  const reduced = useM3ReducedMotion();
+  const springConfig = m3Springs[speed].spatial;
+  const contextValue = React4.useMemo(() => ({ isExpanded, speed }), [isExpanded, speed]);
+  return /* @__PURE__ */ jsx5(M3ContainerTransformContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx5(motion5.div, {
+      ref,
+      layoutId: reduced ? undefined : layoutId,
+      layout: !reduced,
+      transition: reduced ? { type: "tween", duration: 0, delay: 0 } : transition || springConfig,
+      style: {
+        position: "relative",
+        willChange: "transform, border-radius",
+        overflow: "hidden",
+        ...style
       },
-      ...style
-    };
-    const resolvedTransition = transition || getDefaultTransition(isActive, speed);
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        layout,
-        animate: { opacity: isActive ? 1 : 0 },
-        transition: resolvedTransition,
-        style: baseStyle,
-        ...props,
-        children
-      }
-    );
-  }
-);
+      ...props,
+      children
+    })
+  });
+});
+M3ContainerTransform.displayName = "M3ContainerTransform";
+var ContainerTransformLayer = React4.forwardRef(({ layer, active, children, style, transition, layout = "position", ...props }, ref) => {
+  const reduced = useM3ReducedMotion();
+  const context = React4.useContext(M3ContainerTransformContext);
+  const isActive = active ?? (context ? context.isExpanded === (layer === "end") : true);
+  const speed = context?.speed ?? "default";
+  const baseStyle = {
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    pointerEvents: isActive ? "auto" : "none",
+    ...!isActive && {
+      position: "absolute",
+      top: 0,
+      left: 0
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsx5(motion5.div, {
+    ref,
+    layout: reduced ? false : layout,
+    ...layer === "end" ? { initial: reduced ? false : { opacity: 0 } } : {},
+    animate: { opacity: isActive ? 1 : 0 },
+    transition: reduced ? { type: "tween", duration: 0, delay: 0 } : transition || getDefaultTransition(isActive, speed),
+    style: baseStyle,
+    ...props,
+    inert: !isActive || props.inert,
+    "aria-hidden": !isActive || props["aria-hidden"],
+    children
+  });
+});
+var M3ContainerTransformStart = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx5(ContainerTransformLayer, {
+  layer: "start",
+  ref,
+  ...props
+}));
 M3ContainerTransformStart.displayName = "M3ContainerTransformStart";
-var M3ContainerTransformEnd = React5.forwardRef(
-  ({ active, children, style, transition, layout = "position", ...props }, ref) => {
-    const context = React5.useContext(M3ContainerTransformContext);
-    const isActive = active ?? (context ? context.isExpanded : true);
-    const speed = context?.speed ?? "default";
-    const baseStyle = {
-      width: "100%",
-      height: "100%",
-      boxSizing: "border-box",
-      pointerEvents: isActive ? "auto" : "none",
-      ...!isActive && {
-        position: "absolute",
-        top: 0,
-        left: 0
-      },
-      ...style
-    };
-    const resolvedTransition = transition || getDefaultTransition(isActive, speed);
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        layout,
-        initial: { opacity: 0 },
-        animate: { opacity: isActive ? 1 : 0 },
-        transition: resolvedTransition,
-        style: baseStyle,
-        ...props,
-        children
-      }
-    );
-  }
-);
+var M3ContainerTransformEnd = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx5(ContainerTransformLayer, {
+  layer: "end",
+  ref,
+  ...props
+}));
 M3ContainerTransformEnd.displayName = "M3ContainerTransformEnd";
+// packages/m3-motion/src/components/M3Transition.tsx
+import * as React5 from "react";
+import { AnimatePresence as AnimatePresence5, motion as motion6 } from "motion/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+"use client";
 var OFFSET = 30;
 var SCALE_OFFSET = 0.08;
 function buildVariants(pattern, forward) {
@@ -630,37 +668,40 @@ function buildVariants(pattern, forward) {
       };
   }
 }
-var M3Transition = React5.forwardRef(
-  ({
-    stateKey,
-    pattern = "fade",
-    forward = true,
-    mode = "wait",
-    variants,
-    children,
-    style,
-    ...props
-  }, ref) => {
-    const resolvedVariants = variants ?? buildVariants(pattern, forward);
-    const baseStyle = pattern === "collapse" ? { overflow: "hidden" } : { willChange: "opacity, transform" };
-    const resolvedStyle = { ...baseStyle, ...style };
-    return /* @__PURE__ */ jsx(AnimatePresence, { mode, children: /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        variants: resolvedVariants,
-        initial: "initial",
-        animate: "animate",
-        exit: "exit",
-        style: resolvedStyle,
-        ...props,
-        children
-      },
-      stateKey
-    ) });
-  }
-);
+var M3Transition = React5.forwardRef(({
+  stateKey,
+  pattern = "fade",
+  forward = true,
+  mode = "wait",
+  variants,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const reduced = useM3ReducedMotion();
+  const resolvedVariants = motionVariants(variants ?? buildVariants(pattern, forward), reduced);
+  const baseStyle = pattern === "collapse" ? { overflow: "hidden" } : { willChange: "opacity, transform" };
+  const resolvedStyle = { ...baseStyle, ...style };
+  return /* @__PURE__ */ jsx6(AnimatePresence5, {
+    mode,
+    children: /* @__PURE__ */ jsx6(motion6.div, {
+      ref,
+      variants: resolvedVariants,
+      initial: reduced ? false : "initial",
+      animate: "animate",
+      exit: "exit",
+      style: resolvedStyle,
+      ...props,
+      children
+    }, stateKey)
+  });
+});
 M3Transition.displayName = "M3Transition";
+// packages/m3-motion/src/components/M3ListStagger.tsx
+import * as React6 from "react";
+import { AnimatePresence as AnimatePresence6, motion as motion7, useIsPresent } from "motion/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+"use client";
 var containerVariants = {
   hidden: {},
   visible: (_custom) => ({
@@ -690,65 +731,84 @@ var itemVariants = {
     }
   }
 };
-var M3ListStagger = React5.forwardRef(
-  ({ staggerDelay = 0.05, delayChildren = 0, appear = true, children, className, style }, ref) => {
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        className,
-        style,
-        variants: containerVariants,
-        initial: appear ? "hidden" : false,
-        animate: "visible",
-        exit: "exit",
-        custom: { staggerDelay, delayChildren },
-        children
-      }
-    ) });
-  }
-);
+var M3ListStagger = React6.forwardRef(({ staggerDelay = 0.05, delayChildren = 0, appear = true, children, className, style }, ref) => {
+  const reduced = useM3ReducedMotion();
+  return /* @__PURE__ */ jsx7(motion7.div, {
+    ref,
+    className,
+    style,
+    variants: motionVariants(containerVariants, reduced),
+    initial: appear && !reduced ? "hidden" : false,
+    animate: "visible",
+    exit: "exit",
+    custom: { staggerDelay, delayChildren },
+    children: /* @__PURE__ */ jsx7(AnimatePresence6, {
+      initial: appear && !reduced,
+      children
+    })
+  });
+});
 M3ListStagger.displayName = "M3ListStagger";
-var M3ListStaggerItem = React5.forwardRef(
-  ({ children, style, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        variants: itemVariants,
-        style: { willChange: "opacity, transform", ...style },
-        ...props,
-        children
-      }
-    );
-  }
-);
+var M3ListStaggerItem = React6.forwardRef(({ children, style, ...props }, ref) => {
+  const present = useIsPresent();
+  const reduced = useM3ReducedMotion();
+  return /* @__PURE__ */ jsx7(motion7.div, {
+    ref,
+    variants: motionVariants(itemVariants, reduced),
+    style: { willChange: "opacity, transform", ...style },
+    ...props,
+    inert: !present || props.inert,
+    "aria-hidden": !present || props["aria-hidden"],
+    children
+  });
+});
 M3ListStaggerItem.displayName = "M3ListStaggerItem";
+// packages/m3-motion/src/hooks/useM3Animate.ts
+import { useAnimate } from "motion/react";
 function useM3Animate() {
   const [scope, animate] = useAnimate();
+  const reduced = useM3ReducedMotion();
   const m3Animate = (elementOrSelector, keyframes, options) => {
-    if (Array.isArray(elementOrSelector)) {
-      return animate(
-        elementOrSelector,
-        keyframes
-      );
-    }
-    if (typeof elementOrSelector === "string" || elementOrSelector instanceof Element || typeof elementOrSelector === "object" && elementOrSelector !== null && "current" in elementOrSelector || typeof elementOrSelector === "number" || typeof elementOrSelector === "object" && elementOrSelector !== null && "get" in elementOrSelector) {
-      return animate(elementOrSelector, keyframes, {
-        ease: m3Easings.emphasized,
-        duration: m3Durations.medium2,
-        ...typeof options === "object" && options !== null ? options : {}
+    const defaults = { ease: m3Easings.emphasized, duration: m3Durations.medium2 };
+    const immediate = reduced ? { type: "tween", duration: 0, delay: 0, repeat: 0 } : {};
+    if (Array.isArray(elementOrSelector) && elementOrSelector.some(Array.isArray)) {
+      const sequenceOptions = typeof keyframes === "object" && keyframes !== null ? keyframes : {};
+      const sequence = reduced ? elementOrSelector.map((segment) => Array.isArray(segment) ? [segment[0], segment[1], { ...segment[2], ...immediate, at: 0 }] : segment) : elementOrSelector;
+      return animate(sequence, {
+        ...sequenceOptions,
+        defaultTransition: { ...defaults, ...sequenceOptions.defaultTransition, ...immediate }
       });
     }
     return animate(elementOrSelector, keyframes, {
-      ease: m3Easings.emphasized,
-      duration: m3Durations.medium2,
-      ...typeof options === "object" && options !== null ? options : {}
+      ...defaults,
+      ...typeof options === "object" && options !== null ? options : {},
+      ...immediate
     });
   };
   return [scope, m3Animate];
 }
+export {
+  M3Collapse,
+  M3ContainerTransform,
+  M3ContainerTransformContext,
+  M3ContainerTransformEnd,
+  M3ContainerTransformStart,
+  M3Fade,
+  M3FadeThrough,
+  M3ListStagger,
+  M3ListStaggerItem,
+  M3SharedAxis,
+  M3Transition,
+  m3Durations,
+  m3Easings,
+  m3Springs,
+  springDurationMs,
+  springFromPreset,
+  springKeyframesForProperty,
+  springToCssEasing,
+  springToWaapiKeyframes,
+  useM3Animate,
+  useM3ReducedMotion
+};
 
-export { M3Collapse, M3ContainerTransform, M3ContainerTransformContext, M3ContainerTransformEnd, M3ContainerTransformStart, M3Fade, M3FadeThrough, M3ListStagger, M3ListStaggerItem, M3SharedAxis, M3Transition, m3Durations, m3Easings, m3Springs, springDurationMs, springFromPreset, springKeyframesForProperty, springToCssEasing, springToWaapiKeyframes, useM3Animate };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+//# debugId=32BD74EF26CFB5FE64756E2164756E21