@fluentui/react-motion-components-preview 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/CHANGELOG.md

@@ -1,19 +1,28 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Thu, 22 Jan 2026 16:12:40 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jul 2026 17:34:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.72.9-experimental.component-base-hooks.20260122-49fc330360.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 
-Thu, 22 Jan 2026 16:12:40 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.14.1..@fluentui/react-motion-components-preview_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+Thu, 09 Jul 2026 17:34:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.15.5..@fluentui/react-motion-components-preview_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 
 ### Changes
 
-- Release 9.72.9-experimental.component-base-hooks.20260122-49fc330360 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-motion to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-utilities to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-motion to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+
+## [0.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.15.0)
+
+Thu, 22 Jan 2026 17:06:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.14.1..@fluentui/react-motion-components-preview_v0.15.0)
+
+### Minor changes
+
+- refactor(motion-components): improve parameter naming from 'from/to' to 'out/in' ([PR #35592](https://github.com/microsoft/fluentui/pull/35592) by robertpenner@microsoft.com)
 
 ## [0.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.14.0)
 

package/README.md

@@ -1,5 +1,93 @@
 # @fluentui/react-motion-components-preview
 
-**React Motion Components for [Fluent UI React](https://react.fluentui.dev/)**
+**Pre-built Motion Components for [Fluent UI React](https://react.fluentui.dev/)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+> ⚠️ **Preview Package**: These components are in beta and APIs may change before stable release.
+
+Ready-to-use presence components for common UI animation patterns, built on top of `@fluentui/react-motion`.
+
+## Components
+
+| Component    | Description                                                |
+| ------------ | ---------------------------------------------------------- |
+| **Fade**     | Opacity transitions for tooltips, notifications, overlays  |
+| **Scale**    | Size animations for popovers, menus, emphasis              |
+| **Collapse** | Height/width expansion for accordions, expandable sections |
+| **Slide**    | Directional movement for drawers, panels, carousels        |
+| **Blur**     | Focus/defocus effects for backgrounds, depth               |
+| **Rotate**   | 3D rotation for card flips, reveals                        |
+| **Stagger**  | Choreography for sequential list animations                |
+
+Each component (except Blur and Rotate) comes with **Snappy** (150ms) and **Relaxed** (250ms) timing variants.
+
+## Installation
+
+```bash
+npm install @fluentui/react-motion-components-preview
+# or
+yarn add @fluentui/react-motion-components-preview
+```
+
+## Quick Start
+
+```tsx
+import { Fade, Scale, Slide, Collapse } from '@fluentui/react-motion-components-preview';
+
+// Simple fade
+function Tooltip({ visible, children }) {
+  return (
+    <Fade visible={visible}>
+      {children}
+    </Fade>
+  );
+}
+
+// Slide from the right
+function Drawer({ open, children }) {
+  return (
+    <Slide visible={open} outX="20px">
+      {children}
+    </Slide>
+  );
+}
+
+// Use timing variants
+import { FadeSnappy, ScaleRelaxed } from '@fluentui/react-motion-components-preview';
+
+<FadeSnappy visible={show}>Quick feedback</FadeSnappy>
+<ScaleRelaxed visible={show}>Smooth entrance</ScaleRelaxed>
+```
+
+### The `.In` and `.Out` Pattern
+
+Every presence component includes one-way sub-components:
+
+```tsx
+// One-way enter animation (plays on mount)
+<Fade.In>
+  <div>Fades in once</div>
+</Fade.In>
+
+// One-way exit animation (plays on mount)
+<Fade.Out>
+  <div>Fades out once</div>
+</Fade.Out>
+```
+
+## Documentation
+
+📚 **[Full documentation](https://react.fluentui.dev/?path=/docs/motion-components-preview-introduction--docs)**
+
+- [Introduction](https://react.fluentui.dev/?path=/docs/motion-components-preview-introduction--docs) — Overview of all components
+- [Fade](https://react.fluentui.dev/?path=/docs/motion-components-preview-fade--docs)
+- [Scale](https://react.fluentui.dev/?path=/docs/motion-components-preview-scale--docs)
+- [Collapse](https://react.fluentui.dev/?path=/docs/motion-components-preview-collapse--docs)
+- [Slide](https://react.fluentui.dev/?path=/docs/motion-components-preview-slide--docs)
+- [Blur](https://react.fluentui.dev/?path=/docs/motion-components-preview-blur--docs)
+- [Rotate](https://react.fluentui.dev/?path=/docs/motion-components-preview-rotate--docs)
+- [Stagger](https://react.fluentui.dev/?path=/docs/motion-choreography-preview-stagger--docs)
+- [Motion Atoms](https://react.fluentui.dev/?path=/docs/motion-components-preview-atoms--docs) — Building blocks for custom components
+
+## Related
+
+- **[@fluentui/react-motion](https://www.npmjs.com/package/@fluentui/react-motion)** — Core motion APIs for creating custom animations

package/dist/index.d.cts

@@ -0,0 +1,407 @@
+import type { AtomMotion } from '@fluentui/react-motion';
+import { PresenceComponent } from '@fluentui/react-motion';
+import type { PresenceComponentProps } from '@fluentui/react-motion';
+import type { PresenceDirection } from '@fluentui/react-motion';
+import * as React_2 from 'react';
+
+/**
+ * Common opacity animation parameter for motion components.
+ */
+declare type AnimateOpacity = {
+    /** Whether to animate the opacity. Defaults to `true`. */
+    animateOpacity?: boolean;
+};
+
+declare type Axis3D = 'x' | 'y' | 'z';
+
+declare type Axis3D_2 = NonNullable<RotateParams['axis']>;
+
+/**
+ * Common parameters shared by all atom functions.
+ */
+declare type BaseAtomParams = {
+    /** The functional direction of the motion: 'enter' or 'exit'. */
+    direction: PresenceDirection;
+    /** The duration of the motion in milliseconds. */
+    duration: number;
+    /** The easing curve for the motion. */
+    easing?: EffectTiming['easing'];
+    /** Time (ms) to delay the animation. */
+    delay?: EffectTiming['delay'];
+};
+
+/**
+ * Base presence parameters combining duration, easing, and delay for motion components.
+ */
+declare type BasePresenceParams = PresenceDuration & PresenceEasing & PresenceDelay;
+
+/** A React component that applies blur in/out transitions to its children. */
+export declare const Blur: PresenceComponent<BlurParams>;
+
+/**
+ * Generates a motion atom object for a blur-in or blur-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
+ * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
+ */
+export declare const blurAtom: ({ direction, duration, easing, delay, outRadius, inRadius, }: BlurAtomParams) => AtomMotion;
+
+declare interface BlurAtomParams extends BaseAtomParams {
+    /** Blur radius for the out state (exited). Defaults to '10px'. */
+    outRadius?: string;
+    /** Blur radius for the in state (entered). Defaults to '0px'. */
+    inRadius?: string;
+}
+
+export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
+    /** Blur radius for the out state (exited). Defaults to '10px'. */
+    outRadius?: string;
+    /** Blur radius for the in state (entered). Defaults to '0px'. */
+    inRadius?: string;
+};
+
+/** A React component that applies collapse/expand transitions to its children. */
+export declare const Collapse: PresenceComponent<CollapseParams>;
+
+/** A React component that applies collapse/expand transitions with delayed fade to its children. */
+export declare const CollapseDelayed: PresenceComponent<CollapseParams>;
+
+/**
+ * Duration properties for granular timing control in Collapse animations.
+ */
+export declare type CollapseDurations = {
+    /** Time (ms) for the size animation during enter. Defaults to `duration` for unified timing. */
+    sizeDuration?: number;
+    /** Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing. */
+    opacityDuration?: number;
+    /** Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing. */
+    exitSizeDuration?: number;
+    /** Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing. */
+    exitOpacityDuration?: number;
+};
+
+declare type CollapseOrientation = 'horizontal' | 'vertical';
+
+export declare type CollapseParams = BasePresenceParams & AnimateOpacity & CollapseDurations & {
+    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
+    orientation?: CollapseOrientation;
+    /** Size for the out state (collapsed). Defaults to `'0px'`. */
+    outSize?: string;
+    /**
+     * Time (ms) to delay the inner stagger between size and opacity animations.
+     * On enter this delays the opacity after size; on exit this delays the size after opacity.
+     * Defaults to 0.
+     */
+    staggerDelay?: number;
+    /**
+     * Time (ms) to delay the inner stagger during exit. Defaults to the `staggerDelay` param for symmetry.
+     */
+    exitStaggerDelay?: number;
+};
+
+export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
+
+export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
+
+/** A React component that applies fade in/out transitions to its children. */
+export declare const Fade: PresenceComponent<FadeParams>;
+
+/**
+ * Generates a motion atom object for a fade-in or fade-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param delay - The delay before the motion starts. Defaults to 0.
+ * @param outOpacity - Opacity for the out state (exited). Defaults to 0.
+ * @param inOpacity - Opacity for the in state (entered). Defaults to 1.
+ * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
+ */
+export declare const fadeAtom: ({ direction, duration, easing, delay, outOpacity, inOpacity, }: FadeAtomParams) => AtomMotion;
+
+declare interface FadeAtomParams extends BaseAtomParams {
+    /** Defines how values are applied before and after execution. Defaults to 'both'. */
+    fill?: FillMode;
+    /** Opacity for the out state (exited). Defaults to 0. */
+    outOpacity?: number;
+    /** Opacity for the in state (entered). Defaults to 1. */
+    inOpacity?: number;
+}
+
+export declare type FadeParams = BasePresenceParams & {
+    /** Opacity for the out state (exited). Defaults to 0. */
+    outOpacity?: number;
+    /** Opacity for the in state (entered). Defaults to 1. */
+    inOpacity?: number;
+};
+
+export declare const FadeRelaxed: PresenceComponent<FadeParams>;
+
+export declare const FadeSnappy: PresenceComponent<FadeParams>;
+
+/**
+ * Common delay parameters for presence motion components.
+ */
+declare type PresenceDelay = {
+    /** Time (ms) to delay the enter transition. */
+    delay?: EffectTiming['delay'];
+    /** Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry. */
+    exitDelay?: EffectTiming['delay'];
+};
+
+/**
+ * Common duration parameters for presence motion components.
+ */
+declare type PresenceDuration = {
+    /** Time (ms) for the enter transition. */
+    duration?: number;
+    /** Time (ms) for the exit transition. Defaults to the `duration` param for symmetry. */
+    exitDuration?: number;
+};
+
+/**
+ * Common easing parameters for presence motion components.
+ */
+declare type PresenceEasing = {
+    /** Easing curve for the enter transition. */
+    easing?: string;
+    /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */
+    exitEasing?: string;
+};
+
+export declare const Rotate: PresenceComponent<RotateParams>;
+
+/**
+ * Generates a motion atom object for a rotation around a single axis.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
+ */
+export declare const rotateAtom: ({ direction, duration, easing, delay, axis, outAngle, inAngle, }: RotateAtomParams) => AtomMotion;
+
+declare interface RotateAtomParams extends BaseAtomParams {
+    axis?: Axis3D_2;
+    /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */
+    outAngle?: number;
+    /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */
+    inAngle?: number;
+}
+
+export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
+    /**
+     * The axis of rotation: 'x', 'y', or 'z'.
+     * Defaults to 'z'.
+     */
+    axis?: Axis3D;
+    /**
+     * Rotation angle for the out state (exited) in degrees.
+     * Defaults to -90.
+     */
+    outAngle?: number;
+    /**
+     * Rotation angle for the in state (entered) in degrees.
+     * Defaults to 0.
+     */
+    inAngle?: number;
+};
+
+/** A React component that applies scale in/out transitions to its children. */
+export declare const Scale: PresenceComponent<ScaleParams>;
+
+/**
+ * Generates a motion atom object for a scale in or scale out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param outScale - Scale for the out state (exited). Defaults to 0.9.
+ * @param inScale - Scale for the in state (entered). Defaults to 1.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with scale keyframes and the supplied duration and easing.
+ */
+export declare const scaleAtom: ({ direction, duration, easing, delay, outScale, inScale, }: ScaleAtomParams) => AtomMotion;
+
+declare interface ScaleAtomParams extends BaseAtomParams {
+    /** Scale for the out state (exited). Defaults to 0.9. */
+    outScale?: number;
+    /** Scale for the in state (entered). Defaults to 1. */
+    inScale?: number;
+}
+
+export declare type ScaleParams = BasePresenceParams & AnimateOpacity & {
+    /** Scale for the out state (exited). Defaults to `0.9`. */
+    outScale?: number;
+    /** Scale for the in state (entered). Defaults to `1`. */
+    inScale?: number;
+};
+
+export declare const ScaleRelaxed: PresenceComponent<ScaleParams>;
+
+export declare const ScaleSnappy: PresenceComponent<ScaleParams>;
+
+/** A React component that applies slide in/out transitions to its children. */
+export declare const Slide: PresenceComponent<SlideParams>;
+
+/**
+ * Generates a motion atom object for a slide-in or slide-out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
+ * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
+ * @param delay - Time (ms) to delay the animation. Defaults to 0.
+ * @returns A motion atom object with translate keyframes and the supplied duration and easing.
+ */
+export declare const slideAtom: ({ direction, duration, easing, delay, outX, outY, inX, inY, }: SlideAtomParams) => AtomMotion;
+
+declare interface SlideAtomParams extends BaseAtomParams {
+    /** X translate for the out state (exited). Defaults to '0px'. */
+    outX?: string;
+    /** Y translate for the out state (exited). Defaults to '0px'. */
+    outY?: string;
+    /** X translate for the in state (entered). Defaults to '0px'. */
+    inX?: string;
+    /** Y translate for the in state (entered). Defaults to '0px'. */
+    inY?: string;
+}
+
+export declare type SlideParams = BasePresenceParams & AnimateOpacity & {
+    /** X translate for the out state (exited). Defaults to `'0px'`. */
+    outX?: string;
+    /** Y translate for the out state (exited). Defaults to `'0px'`. */
+    outY?: string;
+    /** X translate for the in state (entered). Defaults to `'0px'`. */
+    inX?: string;
+    /** Y translate for the in state (entered). Defaults to `'0px'`. */
+    inY?: string;
+};
+
+export declare const SlideRelaxed: PresenceComponent<SlideParams>;
+
+export declare const SlideSnappy: PresenceComponent<SlideParams>;
+
+/**
+ * Stagger is a component that manages the staggered entrance and exit of its children.
+ * Children are animated in sequence with configurable timing between each item.
+ * Stagger can be interactively toggled between entrance and exit animations using the `visible` prop.
+ *
+ * @param children - React elements to animate. Elements are cloned with animation props.
+ * @param visible - Controls animation direction. When `true`, the group is animating "enter" (items shown);
+ * when `false`, the group is animating "exit" (items hidden). Defaults to `false`.
+ * @param itemDelay - Milliseconds between each item's animation start.
+ * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).
+ * @param itemDuration - Milliseconds each item's animation lasts. Only used with `delayMode="timing"`.
+ * Defaults to the package's default item duration (see `DEFAULT_ITEM_DURATION`).
+ * @param reversed - Whether to reverse the stagger sequence (last item animates first). Defaults to `false`.
+ * @param hideMode - How children's visibility/mounting is managed. Auto-detects if not specified.
+ * @param delayMode - How staggering timing is implemented. Auto-detects if not specified.
+ * @param onMotionFinish - Callback invoked when the staggered animation sequence completes.
+ *
+ * **Auto-detection behavior:**
+ * - **hideMode**: Presence components use `'visibleProp'`, DOM elements use `'visibilityStyle'`
+ * - **delayMode**: Components with delay support use `'delayProp'` (most performant), others use `'timing'`
+ *
+ * **hideMode options:**
+ * - `'visibleProp'`: Children are presence components with `visible` prop (always rendered, visibility controlled via prop)
+ * - `'visibilityStyle'`: Children remain in DOM with inline style visibility: hidden/visible (preserves layout space)
+ * - `'unmount'`: Children are mounted/unmounted from DOM based on visibility
+ *
+ * **delayMode options:**
+ * - `'timing'`: Manages visibility over time using JavaScript timing
+ * - `'delayProp'`: Passes delay props to motion components to use native Web Animations API delays (most performant)
+ *
+ * **Static variants:**
+ * - `<Stagger.In>` - One-way stagger for entrance animations only (auto-detects optimal modes)
+ * - `<Stagger.Out>` - One-way stagger for exit animations only (auto-detects optimal modes)
+ *
+ * @example
+ * ```tsx
+ * import { Stagger, Fade, Scale, Rotate } from '@fluentui/react-motion-components-preview';
+ *
+ * // Auto-detects optimal modes for presence components (delayProp + visibleProp)
+ * <Stagger visible={isVisible} itemDelay={150}>
+ *   <Fade><div>Item 2</div></Fade>
+ *   <Scale><div>Item 1</div></Scale>
+ *   <Rotate><div>Item 3</div></Rotate>
+ * </Stagger>
+ *
+ * // Auto-detects optimal modes for motion components (delayProp + unmount)
+ * <Stagger.In itemDelay={100}>
+ *   <Scale.In><div>Item 1</div></Scale.In>
+ *   <Fade.In><div>Item 2</div></Fade.In>
+ * </Stagger.In>
+ *
+ * // Auto-detects timing mode for DOM elements (timing + visibilityStyle)
+ * <Stagger visible={isVisible} itemDelay={150} onMotionFinish={handleComplete}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stagger>
+ *
+ * // Override auto-detection when needed
+ * <Stagger visible={isVisible} delayMode="timing" hideMode="unmount">
+ *   <CustomComponent>Item 1</CustomComponent>
+ * </Stagger>
+ * ```
+ */
+export declare const Stagger: React_2.FC<StaggerProps> & {
+    In: React_2.FC<Omit<StaggerProps, "visible">>;
+    Out: React_2.FC<Omit<StaggerProps, "visible">>;
+};
+
+/**
+ * Defines how Stagger implements the timing of staggered animations.
+ * - 'timing': Manages visibility over time using JavaScript timing (current behavior)
+ * - 'delayProp': Passes delay props to motion components to use native Web Animations API delays
+ */
+declare type StaggerDelayMode = 'timing' | 'delayProp';
+
+/**
+ * Defines how Stagger manages its children's visibility/mounting.
+ * - 'visibleProp': Children are components with a `visible` prop (e.g. motion components)
+ * - 'visibilityStyle': Children remain in DOM with inline style `visibility: hidden | visible`
+ * - 'unmount': Children are mounted/unmounted from DOM based on visibility
+ */
+declare type StaggerHideMode = 'visibleProp' | 'visibilityStyle' | 'unmount';
+
+/**
+ * Props for the Stagger component that manages staggered entrance and exit animations.
+ */
+export declare interface StaggerProps {
+    /** React elements to animate. Elements are cloned with animation props. */
+    children: React_2.ReactNode;
+    /**
+     * Controls children animation direction. When `true`, the group is animating "enter" (items shown).
+     * When `false`, the group is animating "exit" (items hidden).
+     */
+    visible?: PresenceComponentProps['visible'];
+    /** Whether to reverse the stagger sequence (last item animates first). Defaults to `false`. */
+    reversed?: boolean;
+    /**
+     * Milliseconds between each child's animation start.
+     * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).
+     */
+    itemDelay?: number;
+    /**
+     * Milliseconds each child's animation lasts. Only used with `delayMode="timing"`.
+     * Defaults to the package's default duration (see `DEFAULT_ITEM_DURATION`).
+     */
+    itemDuration?: number;
+    /** How children's visibility/mounting is managed. Auto-detects if not specified. */
+    hideMode?: StaggerHideMode;
+    /** How staggering timing is implemented. Defaults to 'timing'. */
+    delayMode?: StaggerDelayMode;
+    /** Callback invoked when the staggered animation sequence completes. */
+    onMotionFinish?: () => void;
+}
+
+export { }

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { AtomMotion } from '@fluentui/react-motion';
+import type { AtomMotion } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
-import { PresenceComponentProps } from '@fluentui/react-motion';
+import type { PresenceComponentProps } from '@fluentui/react-motion';
 import type { PresenceDirection } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 

package/lib/atoms/blur-atom.js

@@ -1,4 +1,4 @@
-import { motionTokens } from '@fluentui/react-motion';
+import { motionTokens } from "@fluentui/react-motion";
 /**
  * Generates a motion atom object for a blur-in or blur-out.
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.

package/lib/atoms/blur-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n  /** Blur radius for the out state (exited). Defaults to '10px'. */\n  outRadius?: string;\n  /** Blur radius for the in state (entered). Defaults to '0px'. */\n  inRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.\n * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outRadius = '10px',\n  inRadius = '0px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${outRadius})` }, { filter: `blur(${inRadius})` }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","blurAtom","direction","duration","easing","curveLinear","delay","outRadius","inRadius","keyframes","filter","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAUlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,MAAM,EAClBC,WAAW,KAAK,EACD;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEH,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEG,QAAQ,CAAC,KAAK,EAAEF,SAAS,CAAC,CAAC;QAAC;KAAE;IACrF,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import type { AtomMotion } from '@fluentui/react-motion';\nimport { motionTokens } from '@fluentui/react-motion';\nimport type { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n  /** Blur radius for the out state (exited). Defaults to '10px'. */\n  outRadius?: string;\n  /** Blur radius for the in state (entered). Defaults to '0px'. */\n  inRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.\n * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outRadius = '10px',\n  inRadius = '0px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${outRadius})` }, { filter: `blur(${inRadius})` }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","blurAtom","direction","duration","easing","curveLinear","delay","outRadius","inRadius","keyframes","filter","reverse"],"mappings":"AACA,SAASA,YAAY,QAAQ,yBAAyB;AAUtD;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,MAAM,EAClBC,WAAW,KAAK,EACD;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEH,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEG,QAAQ,CAAC,KAAK,EAAEF,SAAS,CAAC,CAAC;QAAC;KAAE;IACrF,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/fade-atom.js

@@ -1,4 +1,4 @@
-import { motionTokens } from '@fluentui/react-motion';
+import { motionTokens } from "@fluentui/react-motion";
 /**
  * Generates a motion atom object for a fade-in or fade-out.
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.

package/lib/atoms/fade-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n  /** Defines how values are applied before and after execution. Defaults to 'both'. */\n  fill?: FillMode;\n\n  /** Opacity for the out state (exited). Defaults to 0. */\n  outOpacity?: number;\n\n  /** Opacity for the in state (entered). Defaults to 1. */\n  inOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outOpacity = 0,\n  inOpacity = 1,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: outOpacity }, { opacity: inOpacity }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    // Applying opacity backwards and forwards in time is important\n    // to avoid a bug where a delayed animation is not hidden when it should be.\n    fill: 'both',\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","delay","outOpacity","inOpacity","keyframes","opacity","reverse","fill"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,CAAC,EACdC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAW;QAAG;YAAEG,SAASF;QAAU;KAAE;IACnE,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import type { AtomMotion } from '@fluentui/react-motion';\nimport { motionTokens } from '@fluentui/react-motion';\nimport type { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n  /** Defines how values are applied before and after execution. Defaults to 'both'. */\n  fill?: FillMode;\n\n  /** Opacity for the out state (exited). Defaults to 0. */\n  outOpacity?: number;\n\n  /** Opacity for the in state (entered). Defaults to 1. */\n  inOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outOpacity = 0,\n  inOpacity = 1,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: outOpacity }, { opacity: inOpacity }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    // Applying opacity backwards and forwards in time is important\n    // to avoid a bug where a delayed animation is not hidden when it should be.\n    fill: 'both',\n  };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","delay","outOpacity","inOpacity","keyframes","opacity","reverse","fill"],"mappings":"AACA,SAASA,YAAY,QAAQ,yBAAyB;AActD;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,CAAC,EACdC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAW;QAAG;YAAEG,SAASF;QAAU;KAAE;IACnE,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF,EAAE"}

package/lib/atoms/rotate-atom.js

@@ -1,4 +1,4 @@
-import { motionTokens } from '@fluentui/react-motion';
+import { motionTokens } from "@fluentui/react-motion";
 const createRotateValue = (axis, angle)=>{
     return `${axis.toLowerCase()} ${angle}deg`;
 };

package/lib/atoms/rotate-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */\n  outAngle?: number;\n  /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */\n  inAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'z',\n  outAngle = -90,\n  inAngle = 0,\n}: RotateAtomParams): AtomMotion => {\n  const keyframes = [{ rotate: createRotateValue(axis, outAngle) }, { rotate: createRotateValue(axis, inAngle) }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","createRotateValue","axis","angle","toLowerCase","rotateAtom","direction","duration","easing","curveLinear","delay","outAngle","inAngle","keyframes","rotate","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVS,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACM;IACjB,MAAMC,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAU;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAC/G,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import type { AtomMotion } from '@fluentui/react-motion';\nimport { motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport type { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */\n  outAngle?: number;\n  /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */\n  inAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'z',\n  outAngle = -90,\n  inAngle = 0,\n}: RotateAtomParams): AtomMotion => {\n  const keyframes = [{ rotate: createRotateValue(axis, outAngle) }, { rotate: createRotateValue(axis, inAngle) }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","createRotateValue","axis","angle","toLowerCase","rotateAtom","direction","duration","easing","curveLinear","delay","outAngle","inAngle","keyframes","rotate","reverse"],"mappings":"AACA,SAASA,YAAY,QAAQ,yBAAyB;AActD,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVS,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACM;IACjB,MAAMC,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAU;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAC/G,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/scale-atom.js

@@ -1,4 +1,4 @@
-import { motionTokens } from '@fluentui/react-motion';
+import { motionTokens } from "@fluentui/react-motion";
 /**
  * Generates a motion atom object for a scale in or scale out.
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.

package/lib/atoms/scale-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface ScaleAtomParams extends BaseAtomParams {\n  /** Scale for the out state (exited). Defaults to 0.9. */\n  outScale?: number;\n  /** Scale for the in state (entered). Defaults to 1. */\n  inScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outScale - Scale for the out state (exited). Defaults to 0.9.\n * @param inScale - Scale for the in state (entered). Defaults to 1.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outScale = 0.9,\n  inScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: outScale }, { scale: inScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","delay","outScale","inScale","keyframes","scale","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAUlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,WAAW,GAAG,EACdC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAS;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC3D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import type { AtomMotion } from '@fluentui/react-motion';\nimport { motionTokens } from '@fluentui/react-motion';\nimport type { BaseAtomParams } from '../types';\n\ninterface ScaleAtomParams extends BaseAtomParams {\n  /** Scale for the out state (exited). Defaults to 0.9. */\n  outScale?: number;\n  /** Scale for the in state (entered). Defaults to 1. */\n  inScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param outScale - Scale for the out state (exited). Defaults to 0.9.\n * @param inScale - Scale for the in state (entered). Defaults to 1.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  outScale = 0.9,\n  inScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: outScale }, { scale: inScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","delay","outScale","inScale","keyframes","scale","reverse"],"mappings":"AACA,SAASA,YAAY,QAAQ,yBAAyB;AAUtD;;;;;;;;;CASC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,WAAW,GAAG,EACdC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAS;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC3D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/atoms/slide-atom.js

@@ -1,4 +1,4 @@
-import { motionTokens } from '@fluentui/react-motion';
+import { motionTokens } from "@fluentui/react-motion";
 /**
  * Generates a motion atom object for a slide-in or slide-out.
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.