@aphrody/m3-motion 3.2.5 → 3.3.0

package/README.md

@@ -1,243 +1,243 @@
-# @aphrody/m3-motion
-
-High-fidelity React animation components for Material Design 3 (M3) motion specifications, powered by [Motion](https://motion.dev/) (formerly Framer Motion).
-
-This package implements the core Material Design 3 motion patterns—including **Container Transform**, **Shared Axis**, **Fade Through**, **Collapse**, and **Fade**—using Google's official spring, easing, and duration tokens.
-
----
-
-## Installation
-
-```bash
-bun add @aphrody/m3-motion motion
-```
-
-Ensure you have `react` (>= 18.0.0) and `motion` (>= 12.0.0) installed in your project.
-
----
-
-## 1. Container Transform (`M3ContainerTransform`)
-
-The container transform pattern transitions one UI element to another (e.g., morphing a small Card component into a full-page Detail view). 
-
-### Key Features
-* **Aspect Ratio Preservation**: Automatically prevents layout distortion (skewing/stretching) of children during container morphs using layout-position correction.
-* **Spec-Compliant Cross-Fade**: Fades out the starting content early (0% to 30% of transition) and delays the fade-in of target content (20% to 100% of transition) to avoid messy intermediate states.
-* **Pointer Event Management**: Prevents inactive, hidden content from intercepting pointer interactions.
-* **Flexibility**: Supports both the **Single-Container Toggle** approach (re-rendering within the same container) and the **Two-Container Shared Layout** approach (different source/target elements linked via `layoutId`).
-
-### Sub-Components
-* `M3ContainerTransform`: Parent morphing container.
-* `M3ContainerTransformStart`: Wrapper for starting content (e.g., collapsed card details).
-* `M3ContainerTransformEnd`: Wrapper for ending content (e.g., expanded page details).
-
----
-
-### Code Examples
-
-#### Single-Container Toggle Approach
-Best when morphing a single component instance in place using state.
-
-```tsx
-import React, { useState } from "react";
-import { 
-  M3ContainerTransform, 
-  M3ContainerTransformStart, 
-  M3ContainerTransformEnd 
-} from "@aphrody/m3-motion";
-
-export const MorphingCard = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    <M3ContainerTransform
-      isExpanded={isExpanded}
-      speed="default"
-      style={{
-        width: isExpanded ? 500 : 250,
-        height: isExpanded ? 400 : 150,
-        borderRadius: isExpanded ? 28 : 16,
-        backgroundColor: "var(--md-sys-color-surface-container)",
-        cursor: "pointer"
-      }}
-      onClick={() => setIsExpanded(!isExpanded)}
-    >
-      {/* Start state (collapsed content) */}
-      <M3ContainerTransformStart>
-        <div style={{ padding: 16 }}>
-          <h3>Collapsed Card</h3>
-          <p>Click me to expand...</p>
-        </div>
-      </M3ContainerTransformStart>
-
-      {/* End state (expanded detail content) */}
-      <M3ContainerTransformEnd>
-        <div style={{ padding: 24 }}>
-          <h2>Detailed View</h2>
-          <p>This is the expanded content showing the full detail surface.</p>
-          <button onClick={(e) => { e.stopPropagation(); setIsExpanded(false); }}>
-            Close
-          </button>
-        </div>
-      </M3ContainerTransformEnd>
-    </M3ContainerTransform>
-  );
-};
-```
-
-#### Two-Container Shared Layout Approach (linked via `layoutId`)
-Best for page/route transitions or separate DOM elements. Wrap the conditional render in `<AnimatePresence>` to enable the exit fade-out transition.
-
-```tsx
-import React, { useState } from "react";
-import { AnimatePresence } from "motion/react";
-import { 
-  M3ContainerTransform, 
-  M3ContainerTransformStart, 
-  M3ContainerTransformEnd 
-} from "@aphrody/m3-motion";
-
-export const ListView = () => {
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-
-  return (
-    <div>
-      {/* List of items */}
-      {!selectedId && (
-        <div className="grid">
-          <M3ContainerTransform 
-            layoutId="card-item-1" 
-            onClick={() => setSelectedId("1")}
-            style={{ borderRadius: 16, background: "#eee", width: 200, height: 120 }}
-          >
-            <M3ContainerTransformStart>
-              <div style={{ padding: 12 }}>Card Content 1</div>
-            </M3ContainerTransformStart>
-          </M3ContainerTransform>
-        </div>
-      )}
-
-      {/* Expanded detail page */}
-      <AnimatePresence>
-        {selectedId === "1" && (
-          <div className="backdrop">
-            <M3ContainerTransform 
-              layoutId="card-item-1" 
-              style={{ borderRadius: 24, background: "#fff", width: 600, height: 450 }}
-            >
-              <M3ContainerTransformEnd>
-                <div style={{ padding: 24 }}>
-                  <h2>Expanded Title 1</h2>
-                  <p>Long detail text...</p>
-                  <button onClick={() => setSelectedId(null)}>Back to List</button>
-                </div>
-              </M3ContainerTransformEnd>
-            </M3ContainerTransform>
-          </div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-```
-
----
-
-## 2. Shared Axis (`M3SharedAxis`)
-
-Used for transitions between UI elements that have a spatial or navigational relationship (e.g., page stepper, tab switching, or dialog overlays). Supports `x`, `y`, and `z` axes.
-
-* Default enter duration: **300ms** (`medium2`) with `emphasizedDecelerate` ease.
-* Default exit duration: **200ms** (`short4`) with `emphasizedAccelerate` ease.
-
-### Code Example
-
-```tsx
-import React, { useState } from "react";
-import { M3SharedAxis } from "@aphrody/m3-motion";
-
-export const StepWizard = () => {
-  const [step, setStep] = useState(0);
-
-  return (
-    <div>
-      <M3SharedAxis 
-        stateKey={step} 
-        axis="x" 
-        forward={step > 0} 
-        style={{ padding: 20 }}
-      >
-        {step === 0 && <div>Step 1: Enter details</div>}
-        {step === 1 && <div>Step 2: Review options</div>}
-        {step === 2 && <div>Step 3: Confirm purchase</div>}
-      </M3SharedAxis>
-      
-      <button onClick={() => setStep(prev => Math.max(0, prev - 1))}>Back</button>
-      <button onClick={() => setStep(prev => Math.min(2, prev + 1))}>Next</button>
-    </div>
-  );
-};
-```
-
----
-
-## 3. Fade Through (`M3FadeThrough`)
-
-Used for transitions between primary views that do not have a strong spatial relationship (e.g., bottom navigation switching, settings screens).
-
-* Default exit duration (fade-out): **90ms** with `emphasizedAccelerate` ease.
-* Default enter duration (fade-in & scale-up from 92%): **210ms** with `emphasizedDecelerate` ease.
-
-### Code Example
-
-```tsx
-import React, { useState } from "react";
-import { M3FadeThrough } from "@aphrody/m3-motion";
-
-export const AppNavigation = () => {
-  const [currentTab, setCurrentTab] = useState("home");
-
-  return (
-    <div>
-      <M3FadeThrough stateKey={currentTab} style={{ height: 400 }}>
-        {currentTab === "home" && <div>Home View Content</div>}
-        {currentTab === "search" && <div>Search Page Content</div>}
-        {currentTab === "profile" && <div>User Profile Settings</div>}
-      </M3FadeThrough>
-
-      <nav>
-        <button onClick={() => setCurrentTab("home")}>Home</button>
-        <button onClick={() => setCurrentTab("search")}>Search</button>
-        <button onClick={() => setCurrentTab("profile")}>Profile</button>
-      </nav>
-    </div>
-  );
-};
-```
-
----
-
-## 4. Duration and Easing Presets
-
-Developers have direct access to official Material Design 3 timings and curves:
-
-```tsx
-import { m3Easings, m3Durations, m3Springs } from "@aphrody/m3-motion";
-
-// Custom animation example using M3 tokens
-const myCustomTransition = {
-  ease: m3Easings.emphasizedDecelerate,
-  duration: m3Durations.medium4, // 400ms
-};
-```
-
-### Motion Presets Summary
-* **`m3Easings`**: Bezier curves for `emphasized` (approx), `emphasizedDecelerate` (enter), `emphasizedAccelerate` (exit), `standard`, `standardDecelerate`, and `standardAccelerate`.
-* **`m3Durations`**: Timing scales from `short1` (50ms) to `extraLong4` (1000ms).
-* **`m3Springs`**: Hand-tuned spring constants (`fast`, `default`, `slow`) split into `spatial` (bouncy) and `effects` (critically damped).
-
----
-
-## License
-
-Apache-2.0
+# @aphrody/m3-motion
+
+High-fidelity React animation components for Material Design 3 (M3) motion specifications, powered by [Motion](https://motion.dev/) (formerly Framer Motion).
+
+This package implements the core Material Design 3 motion patterns—including **Container Transform**, **Shared Axis**, **Fade Through**, **Collapse**, and **Fade**—using Google's official spring, easing, and duration tokens.
+
+---
+
+## Installation
+
+```bash
+bun add @aphrody/m3-motion motion
+```
+
+Ensure you have `react` (>= 18.0.0) and `motion` (>= 12.0.0) installed in your project.
+
+---
+
+## 1. Container Transform (`M3ContainerTransform`)
+
+The container transform pattern transitions one UI element to another (e.g., morphing a small Card component into a full-page Detail view). 
+
+### Key Features
+* **Aspect Ratio Preservation**: Automatically prevents layout distortion (skewing/stretching) of children during container morphs using layout-position correction.
+* **Spec-Compliant Cross-Fade**: Fades out the starting content early (0% to 30% of transition) and delays the fade-in of target content (20% to 100% of transition) to avoid messy intermediate states.
+* **Pointer Event Management**: Prevents inactive, hidden content from intercepting pointer interactions.
+* **Flexibility**: Supports both the **Single-Container Toggle** approach (re-rendering within the same container) and the **Two-Container Shared Layout** approach (different source/target elements linked via `layoutId`).
+
+### Sub-Components
+* `M3ContainerTransform`: Parent morphing container.
+* `M3ContainerTransformStart`: Wrapper for starting content (e.g., collapsed card details).
+* `M3ContainerTransformEnd`: Wrapper for ending content (e.g., expanded page details).
+
+---
+
+### Code Examples
+
+#### Single-Container Toggle Approach
+Best when morphing a single component instance in place using state.
+
+```tsx
+import React, { useState } from "react";
+import { 
+  M3ContainerTransform, 
+  M3ContainerTransformStart, 
+  M3ContainerTransformEnd 
+} from "@aphrody/m3-motion";
+
+export const MorphingCard = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <M3ContainerTransform
+      isExpanded={isExpanded}
+      speed="default"
+      style={{
+        width: isExpanded ? 500 : 250,
+        height: isExpanded ? 400 : 150,
+        borderRadius: isExpanded ? 28 : 16,
+        backgroundColor: "var(--md-sys-color-surface-container)",
+        cursor: "pointer"
+      }}
+      onClick={() => setIsExpanded(!isExpanded)}
+    >
+      {/* Start state (collapsed content) */}
+      <M3ContainerTransformStart>
+        <div style={{ padding: 16 }}>
+          <h3>Collapsed Card</h3>
+          <p>Click me to expand...</p>
+        </div>
+      </M3ContainerTransformStart>
+
+      {/* End state (expanded detail content) */}
+      <M3ContainerTransformEnd>
+        <div style={{ padding: 24 }}>
+          <h2>Detailed View</h2>
+          <p>This is the expanded content showing the full detail surface.</p>
+          <button onClick={(e) => { e.stopPropagation(); setIsExpanded(false); }}>
+            Close
+          </button>
+        </div>
+      </M3ContainerTransformEnd>
+    </M3ContainerTransform>
+  );
+};
+```
+
+#### Two-Container Shared Layout Approach (linked via `layoutId`)
+Best for page/route transitions or separate DOM elements. Wrap the conditional render in `<AnimatePresence>` to enable the exit fade-out transition.
+
+```tsx
+import React, { useState } from "react";
+import { AnimatePresence } from "motion/react";
+import { 
+  M3ContainerTransform, 
+  M3ContainerTransformStart, 
+  M3ContainerTransformEnd 
+} from "@aphrody/m3-motion";
+
+export const ListView = () => {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  return (
+    <div>
+      {/* List of items */}
+      {!selectedId && (
+        <div className="grid">
+          <M3ContainerTransform 
+            layoutId="card-item-1" 
+            onClick={() => setSelectedId("1")}
+            style={{ borderRadius: 16, background: "#eee", width: 200, height: 120 }}
+          >
+            <M3ContainerTransformStart>
+              <div style={{ padding: 12 }}>Card Content 1</div>
+            </M3ContainerTransformStart>
+          </M3ContainerTransform>
+        </div>
+      )}
+
+      {/* Expanded detail page */}
+      <AnimatePresence>
+        {selectedId === "1" && (
+          <div className="backdrop">
+            <M3ContainerTransform 
+              layoutId="card-item-1" 
+              style={{ borderRadius: 24, background: "#fff", width: 600, height: 450 }}
+            >
+              <M3ContainerTransformEnd>
+                <div style={{ padding: 24 }}>
+                  <h2>Expanded Title 1</h2>
+                  <p>Long detail text...</p>
+                  <button onClick={() => setSelectedId(null)}>Back to List</button>
+                </div>
+              </M3ContainerTransformEnd>
+            </M3ContainerTransform>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+```
+
+---
+
+## 2. Shared Axis (`M3SharedAxis`)
+
+Used for transitions between UI elements that have a spatial or navigational relationship (e.g., page stepper, tab switching, or dialog overlays). Supports `x`, `y`, and `z` axes.
+
+* Default enter duration: **300ms** (`medium2`) with `emphasizedDecelerate` ease.
+* Default exit duration: **200ms** (`short4`) with `emphasizedAccelerate` ease.
+
+### Code Example
+
+```tsx
+import React, { useState } from "react";
+import { M3SharedAxis } from "@aphrody/m3-motion";
+
+export const StepWizard = () => {
+  const [step, setStep] = useState(0);
+
+  return (
+    <div>
+      <M3SharedAxis 
+        stateKey={step} 
+        axis="x" 
+        forward={step > 0} 
+        style={{ padding: 20 }}
+      >
+        {step === 0 && <div>Step 1: Enter details</div>}
+        {step === 1 && <div>Step 2: Review options</div>}
+        {step === 2 && <div>Step 3: Confirm purchase</div>}
+      </M3SharedAxis>
+      
+      <button onClick={() => setStep(prev => Math.max(0, prev - 1))}>Back</button>
+      <button onClick={() => setStep(prev => Math.min(2, prev + 1))}>Next</button>
+    </div>
+  );
+};
+```
+
+---
+
+## 3. Fade Through (`M3FadeThrough`)
+
+Used for transitions between primary views that do not have a strong spatial relationship (e.g., bottom navigation switching, settings screens).
+
+* Default exit duration (fade-out): **90ms** with `emphasizedAccelerate` ease.
+* Default enter duration (fade-in & scale-up from 92%): **210ms** with `emphasizedDecelerate` ease.
+
+### Code Example
+
+```tsx
+import React, { useState } from "react";
+import { M3FadeThrough } from "@aphrody/m3-motion";
+
+export const AppNavigation = () => {
+  const [currentTab, setCurrentTab] = useState("home");
+
+  return (
+    <div>
+      <M3FadeThrough stateKey={currentTab} style={{ height: 400 }}>
+        {currentTab === "home" && <div>Home View Content</div>}
+        {currentTab === "search" && <div>Search Page Content</div>}
+        {currentTab === "profile" && <div>User Profile Settings</div>}
+      </M3FadeThrough>
+
+      <nav>
+        <button onClick={() => setCurrentTab("home")}>Home</button>
+        <button onClick={() => setCurrentTab("search")}>Search</button>
+        <button onClick={() => setCurrentTab("profile")}>Profile</button>
+      </nav>
+    </div>
+  );
+};
+```
+
+---
+
+## 4. Duration and Easing Presets
+
+Developers have direct access to official Material Design 3 timings and curves:
+
+```tsx
+import { m3Easings, m3Durations, m3Springs } from "@aphrody/m3-motion";
+
+// Custom animation example using M3 tokens
+const myCustomTransition = {
+  ease: m3Easings.emphasizedDecelerate,
+  duration: m3Durations.medium4, // 400ms
+};
+```
+
+### Motion Presets Summary
+* **`m3Easings`**: Bezier curves for `emphasized` (approx), `emphasizedDecelerate` (enter), `emphasizedAccelerate` (exit), `standard`, `standardDecelerate`, and `standardAccelerate`.
+* **`m3Durations`**: Timing scales from `short1` (50ms) to `extraLong4` (1000ms).
+* **`m3Springs`**: Hand-tuned spring constants (`fast`, `default`, `slow`) split into `spatial` (bouncy) and `effects` (critically damped).
+
+---
+
+## License
+
+Apache-2.0

package/dist/components/M3Collapse.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { HTMLMotionProps } from "motion/react";
+export interface M3CollapseProps extends HTMLMotionProps<"div"> {
+    /**
+     * If true, the component expands. If false, it collapses.
+     * If omitted, the component behaves as a standard motion element meant to be unmounted/mounted
+     * by an external <AnimatePresence>.
+     */
+    in?: boolean;
+    /**
+     * If true, animate the transition on initial mount.
+     * @default false
+     */
+    appear?: boolean;
+}
+/**
+ * M3Collapse transition component.
+ * Animates the height and opacity of its children, perfect for accordions, menus, or disclosures.
+ */
+export declare const M3Collapse: React.ForwardRefExoticComponent<Omit<M3CollapseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=M3Collapse.d.ts.map

package/dist/components/M3Collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"M3Collapse.d.ts","sourceRoot":"","sources":["../../src/components/M3Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,MAAM,WAAW,eAAgB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC7D;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}

package/dist/components/M3ContainerTransform.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import type { HTMLMotionProps } from "motion/react";
+export interface M3ContainerTransformProps extends HTMLMotionProps<"div"> {
+    /**
+     * Shared identifier linking the starting container (e.g., card) and ending container (e.g., detail page).
+     */
+    layoutId?: string;
+    /**
+     * Speed preset to use for the morphing animation.
+     * @default "default"
+     */
+    speed?: "fast" | "default" | "slow";
+    /**
+     * If true, renders the expanded container state.
+     * @default false
+     */
+    isExpanded?: boolean;
+}
+export interface M3ContainerTransformContextValue {
+    isExpanded: boolean;
+    speed: "fast" | "default" | "slow";
+}
+export declare const M3ContainerTransformContext: React.Context<M3ContainerTransformContextValue | null>;
+/**
+ * M3ContainerTransform component.
+ * Implements the Material 3 Container Transform motion pattern using shared element transitions.
+ * Use the same layoutId on both source and target containers to morph them smoothly.
+ */
+export declare const M3ContainerTransform: React.ForwardRefExoticComponent<Omit<M3ContainerTransformProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface M3ContainerTransformStartProps extends HTMLMotionProps<"div"> {
+    /**
+     * Overrides the active state. By default, active when isExpanded is false.
+     */
+    active?: boolean;
+}
+/**
+ * M3ContainerTransformStart component.
+ * Represents the starting content (e.g., Card content) inside M3ContainerTransform.
+ * Prevents aspect ratio distortion and fades out during the container transform morph.
+ */
+export declare const M3ContainerTransformStart: React.ForwardRefExoticComponent<Omit<M3ContainerTransformStartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface M3ContainerTransformEndProps extends HTMLMotionProps<"div"> {
+    /**
+     * Overrides the active state. By default, active when isExpanded is true.
+     */
+    active?: boolean;
+}
+/**
+ * M3ContainerTransformEnd component.
+ * Represents the target content (e.g., Detail page content) inside M3ContainerTransform.
+ * Prevents aspect ratio distortion and fades in during the container transform morph.
+ */
+export declare const M3ContainerTransformEnd: React.ForwardRefExoticComponent<Omit<M3ContainerTransformEndProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=M3ContainerTransform.d.ts.map

package/dist/components/M3ContainerTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"M3ContainerTransform.d.ts","sourceRoot":"","sources":["../../src/components/M3ContainerTransform.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAA2B,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,yBAA0B,SAAQ,eAAe,CAAC,KAAK,CAAC;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gCAAgC;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CACpC;AAED,eAAO,MAAM,2BAA2B,wDAAqE,CAAC;AAsB9G;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,+GA6BhC,CAAC;AAIF,MAAM,WAAW,8BAA+B,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC5E;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,oHAkCrC,CAAC;AAIF,MAAM,WAAW,4BAA6B,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC1E;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,kHAmCnC,CAAC"}

package/dist/components/M3Fade.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { HTMLMotionProps } from "motion/react";
+export interface M3FadeProps extends HTMLMotionProps<"div"> {
+    /**
+     * If true, the component will transition in. If false, it will transition out.
+     * If omitted, the component behaves as a standard motion element meant to be unmounted/mounted
+     * by an external <AnimatePresence>.
+     */
+    in?: boolean;
+    /**
+     * If true, animate the transition on initial mount.
+     * @default true
+     */
+    appear?: boolean;
+}
+/**
+ * M3Fade transition component.
+ * Fades elements in/out using Material 3 standard decelerate/accelerate curves.
+ */
+export declare const M3Fade: React.ForwardRefExoticComponent<Omit<M3FadeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=M3Fade.d.ts.map

package/dist/components/M3Fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"M3Fade.d.ts","sourceRoot":"","sources":["../../src/components/M3Fade.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,KAAK,CAAC;IACzD;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,iGAwClB,CAAC"}

package/dist/components/M3FadeThrough.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { HTMLMotionProps, Transition } from "motion/react";
+export interface M3FadeThroughProps extends HTMLMotionProps<"div"> {
+    /**
+     * Unique key representing the active view/content. Changing this key triggers the transition.
+     */
+    stateKey: React.Key;
+    /**
+     * Custom transition for the fade through animation.
+     */
+    transition?: Transition;
+}
+/**
+ * M3FadeThrough transition component.
+ * Implements the Material 3 Fade Through navigation pattern.
+ * The outgoing element fades out over 90ms, followed by the incoming element fading in and scaling up over 210ms.
+ */
+export declare const M3FadeThrough: React.FC<M3FadeThroughProps>;
+//# sourceMappingURL=M3FadeThrough.d.ts.map

package/dist/components/M3FadeThrough.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"M3FadeThrough.d.ts","sourceRoot":"","sources":["../../src/components/M3FadeThrough.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AAG1E,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAChE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgDtD,CAAC"}

package/dist/components/M3ListStagger.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { HTMLMotionProps } from "motion/react";
+export interface M3ListStaggerProps {
+    /**
+     * Delay between each child item entering the scene (seconds).
+     * @default 0.05
+     */
+    staggerDelay?: number;
+    /**
+     * Delay before the stagger sequence starts (seconds).
+     * @default 0
+     */
+    delayChildren?: number;
+    /**
+     * If true, items animate on initial render.
+     * @default true
+     */
+    appear?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export interface M3ListStaggerItemProps extends HTMLMotionProps<"div"> {
+    children?: React.ReactNode;
+}
+/**
+ * M3ListStagger — stagger container for list-item enter/exit animations.
+ *
+ * Usage:
+ *   <M3ListStagger>
+ *     {items.map(item => <M3ListStaggerItem key={item.id}>{item.label}</M3ListStaggerItem>)}
+ *   </M3ListStagger>
+ */
+export declare const M3ListStagger: React.ForwardRefExoticComponent<M3ListStaggerProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * M3ListStaggerItem — a single animated item inside M3ListStagger.
+ * Must be a direct or indirect descendant of M3ListStagger to inherit variants.
+ */
+export declare const M3ListStaggerItem: React.ForwardRefExoticComponent<Omit<M3ListStaggerItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=M3ListStagger.d.ts.map