@remotion/transitions 4.0.423 → 4.0.424

package/dist/TransitionSeries.d.ts

@@ -14,7 +14,7 @@ type SeriesSequenceProps = PropsWithChildren<{
      */
     readonly stack?: string;
 } & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name'>>;
-declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: typeof SeriesSequence;
     Transition: typeof TransitionSeriesTransition;

package/dist/TransitionSeries.js

@@ -17,7 +17,7 @@ const SeriesOverlay = () => {
 };
 const SeriesSequence = ({ children }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: children });
 };
 const TransitionSeriesChildren = ({ children, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
@@ -206,37 +206,37 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const prevPresentation = (_d = prev.props.presentation) !== null && _d !== void 0 ? _d : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
                 const UppercasePrevPresentation = prevPresentation.component;
-                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+                return (jsx_runtime_1.jsx(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_e = nextPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
+                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_e = nextPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_g = prev.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
                 const UppercasePrevPresentation = prevPresentation.component;
-                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+                return (jsx_runtime_1.jsx(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_h = prevPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
+                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_h = prevPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_j = next.props.presentation) !== null && _j !== void 0 ? _j : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
-                return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+                return (jsx_runtime_1.jsx(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_k = nextPresentation.props) !== null && _k !== void 0 ? _k : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
+                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_k = nextPresentation.props) !== null && _k !== void 0 ? _k : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
             }
-            return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
+            return (jsx_runtime_1.jsx(remotion_1.Sequence
             // eslint-disable-next-line react/no-array-index-key
             , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: child }, i));
         });
         // Now render overlay sequences
         const overlayElements = overlayRenders.map((overlayInfo) => {
             const info = overlayInfo;
-            return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
+            return (jsx_runtime_1.jsx(remotion_1.Sequence, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
         });
         return [...(mainChildren || []), ...overlayElements];
     }, [children, fps, frame]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: childrenValue });
 };
 /*
  * @description Manages a series of transitions and sequences for advanced animation controls in Remotion projects, handling cases with varying timings and presentations.
@@ -249,7 +249,7 @@ const TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps
         layout !== 'absolute-fill') {
         throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
     }
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { name: displayName, layout: layout, ...otherProps, children: (0, jsx_runtime_1.jsx)(TransitionSeriesChildren, { children: children }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { name: displayName, layout: layout, ...otherProps, children: jsx_runtime_1.jsx(TransitionSeriesChildren, { children: children }) }));
 };
 exports.TransitionSeries = TransitionSeries;
 exports.TransitionSeries.Sequence = SeriesSequence;

package/dist/context.js

@@ -44,7 +44,7 @@ const WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
             enteringProgress: presentationProgress,
         };
     }, [presentationProgress]);
-    return ((0, jsx_runtime_1.jsx)(exports.EnteringContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(exports.EnteringContext.Provider, { value: value, children: children }));
 };
 exports.WrapInEnteringProgressContext = WrapInEnteringProgressContext;
 const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
@@ -53,6 +53,6 @@ const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
             exitingProgress: presentationProgress,
         };
     }, [presentationProgress]);
-    return ((0, jsx_runtime_1.jsx)(exports.ExitingContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(exports.ExitingContext.Provider, { value: value, children: children }));
 };
 exports.WrapInExitingProgressContext = WrapInExitingProgressContext;

package/dist/flatten-children.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-type ReactChildArray = ReturnType<typeof React.Children.toArray>;
-export declare const flattenChildren: (children: React.ReactNode) => ReactChildArray;
-export {};
+export declare const flattenChildren: (children: React.ReactNode) => (string | number | bigint | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal)[];

package/dist/index.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
 // Timings
-var linear_timing_js_1 = require("./timings/linear-timing.js");
+const linear_timing_js_1 = require("./timings/linear-timing.js");
 Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
-var spring_timing_js_1 = require("./timings/spring-timing.js");
+const spring_timing_js_1 = require("./timings/spring-timing.js");
 Object.defineProperty(exports, "springTiming", { enumerable: true, get: function () { return spring_timing_js_1.springTiming; } });
 // Component
-var TransitionSeries_js_1 = require("./TransitionSeries.js");
+const TransitionSeries_js_1 = require("./TransitionSeries.js");
 Object.defineProperty(exports, "TransitionSeries", { enumerable: true, get: function () { return TransitionSeries_js_1.TransitionSeries; } });
 // Hooks
-var use_transition_progress_js_1 = require("./use-transition-progress.js");
+const use_transition_progress_js_1 = require("./use-transition-progress.js");
 Object.defineProperty(exports, "useTransitionProgress", { enumerable: true, get: function () { return use_transition_progress_js_1.useTransitionProgress; } });

package/dist/presentations/clock-wipe.js

@@ -38,7 +38,8 @@ const ClockWipePresentation = ({ children, presentationDirection, presentationPr
         passedProps.outerExitStyle,
         presentationDirection,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: outerStyle, children: [
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("svg", { children: jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", { id: clipId, children: jsx_runtime_1.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
 /*
  * @description Creates a clock wipe transition that uses a circular wipe to reveal the underlying scene as the current scene exits.

package/dist/presentations/fade.d.ts

@@ -4,4 +4,4 @@ export type FadeProps = {
     exitStyle?: React.CSSProperties;
     shouldFadeOutExitingScene?: boolean;
 };
-export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;
+export declare const fade: (props?: FadeProps | undefined) => TransitionPresentation<FadeProps>;

package/dist/presentations/fade.js

@@ -25,7 +25,7 @@ const FadePresentation = ({ children, presentationDirection, presentationProgres
         presentationDirection,
         presentationProgress,
     ]);
-    return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
+    return jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children });
 };
 /*
  * @description Provides a simple fade transition component for sliding elements in and out.

package/dist/presentations/flip.d.ts

@@ -9,4 +9,4 @@ export type FlipProps = {
     innerEnterStyle?: React.CSSProperties;
     innerExitStyle?: React.CSSProperties;
 };
-export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;
+export declare const flip: (props?: FlipProps | undefined) => TransitionPresentation<FlipProps>;

package/dist/presentations/flip.js

@@ -41,7 +41,7 @@ const Flip = ({ children, presentationDirection, presentationProgress, passedPro
                 : outerExitStyle),
         };
     }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: outer, children: (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }) }));
+    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: outer, children: jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }) }));
 };
 /*
  * @description A presentation where the exiting slide flips by 180 degrees, revealing the next slide on the back side.

package/dist/presentations/iris.js

@@ -45,7 +45,8 @@ const IrisPresentation = ({ children, presentationDirection, presentationProgres
         passedProps.outerExitStyle,
         presentationDirection,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: outerStyle, children: [
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("svg", { children: jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", { id: clipId, children: jsx_runtime_1.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
 };
 /*
  * @description Creates an iris transition that uses a circular mask starting from the center to reveal the underlying scene.

package/dist/presentations/none.d.ts

@@ -4,4 +4,4 @@ export type NoneProps = {
     enterStyle?: React.CSSProperties;
     exitStyle?: React.CSSProperties;
 };
-export declare const none: (props?: NoneProps) => TransitionPresentation<NoneProps>;
+export declare const none: (props?: NoneProps | undefined) => TransitionPresentation<NoneProps>;

package/dist/presentations/none.js

@@ -12,7 +12,7 @@ const NonePresentation = ({ children, presentationDirection, passedProps }) => {
                 : passedProps.exitStyle),
         };
     }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
-    return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
+    return jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children });
 };
 /*
  * @description A presentation that has no visual effect on its own. Instead, you control the visual effect by using the useTransitionProgress() hook.

package/dist/presentations/slide.d.ts

@@ -6,4 +6,4 @@ export type SlideProps = {
     exitStyle?: React.CSSProperties;
     enterStyle?: React.CSSProperties;
 };
-export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;
+export declare const slide: (props?: SlideProps | undefined) => TransitionPresentation<SlideProps>;

package/dist/presentations/slide.js

@@ -65,7 +65,7 @@ const SlidePresentation = ({ children, presentationProgress, presentationDirecti
             ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
         };
     }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
-    return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
+    return jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children });
 };
 /*
  * @description Implements a sliding transition for presentation components where the entering slide pushes the outgoing slide in a specified direction.

package/dist/presentations/wipe.d.ts

@@ -8,4 +8,4 @@ export type WipeProps = {
     innerEnterStyle?: React.CSSProperties;
     innerExitStyle?: React.CSSProperties;
 };
-export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;
+export declare const wipe: (props?: WipeProps | undefined) => TransitionPresentation<WipeProps>;

package/dist/presentations/wipe.js

@@ -152,7 +152,9 @@ const WipePresentation = ({ children, presentationProgress, presentationDirectio
             pointerEvents: 'none',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: outerStyle, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 1 1", style: svgStyle, children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: (0, jsx_runtime_1.jsx)("path", { d: path, fill: "black" }) }) }) }) })] }));
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: outerStyle, children: [
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: style, children: children }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx_runtime_1.jsx("path", { d: path, fill: "black" }) }) }) }) })
+        ] }));
 };
 /*
  * @description A presentation where the entering slide slides over the exiting slide.

package/dist/timings/spring-timing.d.ts

@@ -1,8 +1,8 @@
 import type { SpringConfig } from 'remotion';
 import type { TransitionTiming } from '../types.js';
 export declare const springTiming: (options?: {
-    config?: Partial<SpringConfig>;
-    durationInFrames?: number;
-    durationRestThreshold?: number;
-    reverse?: boolean;
+    config?: Partial<SpringConfig> | undefined;
+    durationInFrames?: number | undefined;
+    durationRestThreshold?: number | undefined;
+    reverse?: boolean | undefined;
 }) => TransitionTiming;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.423",
+	"version": "4.0.424",
 	"description": "Library for creating transitions in Remotion",
 	"sideEffects": false,
 	"main": "dist/esm/index.mjs",
@@ -13,7 +13,7 @@
 		"test": "bun test src",
 		"lint": "eslint src",
 		"formatting": "prettier --experimental-cli src --check",
-		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+		"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"author": "Jonny Burger",
 	"contributors": [],
@@ -22,19 +22,20 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.423",
-		"@remotion/shapes": "4.0.423",
-		"@remotion/paths": "4.0.423"
+		"remotion": "4.0.424",
+		"@remotion/shapes": "4.0.424",
+		"@remotion/paths": "4.0.424"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.423",
+		"remotion": "4.0.424",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.423",
-		"@remotion/player": "4.0.423",
-		"@remotion/eslint-config-internal": "4.0.423",
-		"eslint": "9.19.0"
+		"@remotion/test-utils": "4.0.424",
+		"@remotion/player": "4.0.424",
+		"@remotion/eslint-config-internal": "4.0.424",
+		"eslint": "9.19.0",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",