@aphrody/m3-motion 3.2.5 → 3.3.0

package/dist/index.js

@@ -0,0 +1,754 @@
+'use client';
+import * as React5 from 'react';
+import { motion, AnimatePresence, useAnimate } from 'motion/react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/springs.ts
+var m3Springs = {
+  fast: {
+    spatial: {
+      type: "spring",
+      stiffness: 400,
+      damping: 24,
+      mass: 0.8
+    },
+    effects: {
+      type: "spring",
+      stiffness: 350,
+      damping: 37,
+      mass: 0.8
+    }
+  },
+  default: {
+    spatial: {
+      type: "spring",
+      stiffness: 220,
+      damping: 17,
+      mass: 1
+    },
+    effects: {
+      type: "spring",
+      stiffness: 180,
+      damping: 26,
+      mass: 1
+    }
+  },
+  slow: {
+    spatial: {
+      type: "spring",
+      stiffness: 80,
+      damping: 12,
+      mass: 1.2
+    },
+    effects: {
+      type: "spring",
+      stiffness: 70,
+      damping: 16,
+      mass: 1.2
+    }
+  }
+};
+
+// 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],
+  standard: [0.2, 0, 0, 1],
+  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]
+};
+var m3Durations = {
+  short1: 0.05,
+  short2: 0.1,
+  short3: 0.15,
+  short4: 0.2,
+  medium1: 0.25,
+  medium2: 0.3,
+  medium3: 0.35,
+  medium4: 0.4,
+  long1: 0.45,
+  long2: 0.5,
+  long3: 0.55,
+  long4: 0.6,
+  extraLong1: 0.7,
+  extraLong2: 0.8,
+  extraLong3: 0.9,
+  extraLong4: 1
+};
+
+// src/spring-interpolation.ts
+var MIN_DURATION_MS = 50;
+var MAX_DURATION_MS = 2e3;
+var SETTLE_THRESHOLD = 5e-3;
+var DEFAULT_MASS = 1;
+var DEFAULT_STEPS = 60;
+function clamp(value, min, max) {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+function normalize(params) {
+  const m = params.mass != null && params.mass > 0 ? params.mass : DEFAULT_MASS;
+  const k = params.stiffness > 0 ? params.stiffness : 1;
+  const c = params.damping >= 0 ? params.damping : 0;
+  return { k, c, m };
+}
+function naturalFrequency(k, m) {
+  return Math.sqrt(k / m);
+}
+function dampingRatio(k, c, m) {
+  const denom = 2 * Math.sqrt(k * m);
+  return denom > 0 ? c / denom : 0;
+}
+function springDurationMs(params) {
+  const { k, c, m } = normalize(params);
+  const w0 = naturalFrequency(k, m);
+  const zeta = dampingRatio(k, c, m);
+  let decayRate;
+  if (zeta > 1) {
+    const root = Math.sqrt(zeta * zeta - 1);
+    decayRate = w0 * (zeta - root);
+  } else {
+    decayRate = zeta * w0;
+  }
+  if (!(decayRate > 0) || !Number.isFinite(decayRate)) {
+    return MAX_DURATION_MS;
+  }
+  const settleSeconds = -Math.log(SETTLE_THRESHOLD) / decayRate;
+  const settleMs = settleSeconds * 1e3;
+  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 t = clamp((zeta - 0.85) / (1.6 - 0.85), 0, 1);
+  const x1 = lerp(0.1, 0, t);
+  const y1 = lerp(0.65, 0, t);
+  const x2 = lerp(0.2, 0, t);
+  const y2 = 1;
+  return `cubic-bezier(${round(x1)}, ${round(y1)}, ${round(x2)}, ${round(y2)})`;
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function round(n) {
+  return Math.round(n * 1e3) / 1e3;
+}
+function springPosition(t, w0, zeta) {
+  if (t <= 0) return 0;
+  if (zeta < 1 - 1e-6) {
+    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) {
+    const envelope = Math.exp(-w0 * t);
+    return 1 - envelope * (1 + w0 * t);
+  }
+  const root = Math.sqrt(zeta * zeta - 1);
+  const s1 = -w0 * (zeta - root);
+  const s2 = -w0 * (zeta + root);
+  const e1 = Math.exp(s1 * t);
+  const e2 = Math.exp(s2 * t);
+  return 1 - (s2 * e1 - s1 * e2) / (s2 - s1);
+}
+function springToWaapiKeyframes(params, opts) {
+  const { k, c, m } = normalize(params);
+  const w0 = naturalFrequency(k, m);
+  const zeta = dampingRatio(k, c, m);
+  const steps = Math.max(2, Math.floor(opts?.steps ?? DEFAULT_STEPS));
+  const from = opts?.from ?? 0;
+  const to = opts?.to ?? 1;
+  const span = to - from;
+  const duration = springDurationMs(params);
+  const durationSeconds = duration / 1e3;
+  const samples = [];
+  for (let i = 0; i < steps; i++) {
+    const offset = i / (steps - 1);
+    let value;
+    if (i === 0) {
+      value = from;
+    } else if (i === steps - 1) {
+      value = to;
+    } else {
+      const t = offset * durationSeconds;
+      const progress = springPosition(t, w0, zeta);
+      value = from + span * progress;
+    }
+    samples.push({ offset, value });
+  }
+  const keyframes = opts?.property ? buildKeyframes(samples, opts.property, opts.format, opts.unit) : samples.map((s) => ({ offset: s.offset }));
+  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" }
+  };
+}
+function springKeyframesForProperty(samples, property, format, unit) {
+  return buildKeyframes(samples, property, format, unit);
+}
+function buildKeyframes(samples, property, format, unit) {
+  const suffix = unit ?? "";
+  return samples.map((s) => {
+    const css = format ? format(s.value) : `${s.value}${suffix}`;
+    return { offset: s.offset, [property]: css };
+  });
+}
+function springFromPreset(preset) {
+  return {
+    stiffness: preset.stiffness != null && preset.stiffness > 0 ? preset.stiffness : 220,
+    damping: preset.damping != null && preset.damping >= 0 ? preset.damping : 17,
+    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
+        }
+      }
+    };
+    const content = /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref,
+        variants,
+        initial: appear ? "initial" : false,
+        animate: "animate",
+        exit: "exit",
+        style: { willChange: "opacity" },
+        ...props,
+        children
+      }
+    );
+    if (inProp !== void 0) {
+      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 }
+        }
+      }
+    };
+    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
+      }
+    );
+    if (inProp !== void 0) {
+      return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: inProp ? content : null });
+    }
+    return content;
+  }
+);
+M3SharedAxis.displayName = "M3SharedAxis";
+var M3FadeThrough = ({ stateKey, transition: customTransition, variants: customVariants, children, ...props }) => {
+  const defaultVariants = {
+    initial: {
+      opacity: 0,
+      scale: 0.92
+    },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      transition: customTransition || {
+        opacity: {
+          ease: m3Easings.emphasizedDecelerate,
+          duration: 0.21
+        },
+        scale: {
+          ease: m3Easings.emphasizedDecelerate,
+          duration: 0.21
+        }
+      }
+    },
+    exit: {
+      opacity: 0,
+      transition: customTransition || {
+        opacity: {
+          ease: m3Easings.emphasizedAccelerate,
+          duration: 0.09
+        }
+      }
+    }
+  };
+  const resolvedVariants = customVariants || defaultVariants;
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      variants: resolvedVariants,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      style: { willChange: "opacity, transform" },
+      ...props,
+      children
+    },
+    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
+          }
+        }
+      }
+    };
+    const content = /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref,
+        variants,
+        initial: appear ? "initial" : false,
+        animate: "animate",
+        exit: "exit",
+        style: { overflow: "hidden", willChange: "height, opacity" },
+        ...props,
+        children
+      }
+    );
+    if (inProp !== void 0) {
+      return /* @__PURE__ */ jsx(AnimatePresence, { initial: appear, children: inProp ? content : null });
+    }
+    return content;
+  }
+);
+M3Collapse.displayName = "M3Collapse";
+var M3ContainerTransformContext = React5.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 };
+  }
+  if (speed === "slow") {
+    return isActive ? { delay: 0.2, duration: 0.6, ease: m3Easings.emphasizedDecelerate } : { duration: 0.25, ease: m3Easings.emphasizedAccelerate };
+  }
+  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
+      },
+      ...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
+      }
+    );
+  }
+);
+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
+      }
+    );
+  }
+);
+M3ContainerTransformEnd.displayName = "M3ContainerTransformEnd";
+var OFFSET = 30;
+var SCALE_OFFSET = 0.08;
+function buildVariants(pattern, forward) {
+  const enterTransition = {
+    ease: m3Easings.emphasizedDecelerate,
+    duration: m3Durations.medium2
+  };
+  const exitTransition = {
+    ease: m3Easings.emphasizedAccelerate,
+    duration: m3Durations.short4
+  };
+  switch (pattern) {
+    case "fade-through":
+      return {
+        initial: { opacity: 0, scale: 0.92 },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          transition: {
+            opacity: { ease: m3Easings.emphasizedDecelerate, duration: 0.21 },
+            scale: { ease: m3Easings.emphasizedDecelerate, duration: 0.21 }
+          }
+        },
+        exit: {
+          opacity: 0,
+          transition: { opacity: { ease: m3Easings.emphasizedAccelerate, duration: 0.09 } }
+        }
+      };
+    case "shared-axis-x":
+      return {
+        initial: { opacity: 0, x: forward ? OFFSET : -OFFSET },
+        animate: {
+          opacity: 1,
+          x: 0,
+          transition: {
+            x: enterTransition,
+            opacity: { ease: m3Easings.standard, duration: m3Durations.medium2 }
+          }
+        },
+        exit: {
+          opacity: 0,
+          x: forward ? -OFFSET : OFFSET,
+          transition: {
+            x: exitTransition,
+            opacity: { ease: m3Easings.standard, duration: m3Durations.short4 }
+          }
+        }
+      };
+    case "shared-axis-y":
+      return {
+        initial: { opacity: 0, y: forward ? OFFSET : -OFFSET },
+        animate: {
+          opacity: 1,
+          y: 0,
+          transition: {
+            y: enterTransition,
+            opacity: { ease: m3Easings.standard, duration: m3Durations.medium2 }
+          }
+        },
+        exit: {
+          opacity: 0,
+          y: forward ? -OFFSET : OFFSET,
+          transition: {
+            y: exitTransition,
+            opacity: { ease: m3Easings.standard, duration: m3Durations.short4 }
+          }
+        }
+      };
+    case "shared-axis-z":
+      return {
+        initial: { opacity: 0, scale: forward ? 1 - SCALE_OFFSET : 1 + SCALE_OFFSET },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          transition: {
+            scale: enterTransition,
+            opacity: { ease: m3Easings.standard, duration: m3Durations.medium2 }
+          }
+        },
+        exit: {
+          opacity: 0,
+          scale: forward ? 1 + SCALE_OFFSET : 1 - SCALE_OFFSET,
+          transition: {
+            scale: exitTransition,
+            opacity: { ease: m3Easings.standard, duration: m3Durations.short4 }
+          }
+        }
+      };
+    case "collapse":
+      return {
+        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 }
+          }
+        }
+      };
+    case "fade":
+    default:
+      return {
+        initial: { opacity: 0 },
+        animate: { opacity: 1, transition: enterTransition },
+        exit: { opacity: 0, transition: exitTransition }
+      };
+  }
+}
+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
+    ) });
+  }
+);
+M3Transition.displayName = "M3Transition";
+var containerVariants = {
+  hidden: {},
+  visible: (_custom) => ({
+    transition: {
+      staggerChildren: _custom.staggerDelay,
+      delayChildren: _custom.delayChildren
+    }
+  }),
+  exit: {}
+};
+var itemVariants = {
+  hidden: { opacity: 0, y: 8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      ease: m3Easings.emphasizedDecelerate,
+      duration: m3Durations.medium2
+    }
+  },
+  exit: {
+    opacity: 0,
+    y: 4,
+    transition: {
+      ease: m3Easings.emphasizedAccelerate,
+      duration: m3Durations.short3
+    }
+  }
+};
+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
+      }
+    ) });
+  }
+);
+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
+      }
+    );
+  }
+);
+M3ListStaggerItem.displayName = "M3ListStaggerItem";
+function useM3Animate() {
+  const [scope, animate] = useAnimate();
+  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 : {}
+      });
+    }
+    return animate(elementOrSelector, keyframes, {
+      ease: m3Easings.emphasized,
+      duration: m3Durations.medium2,
+      ...typeof options === "object" && options !== null ? options : {}
+    });
+  };
+  return [scope, m3Animate];
+}
+
+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