@cliquify.me/transitions 0.11.9 → 0.11.10

package/dist/presentations/circle.d.ts

@@ -1,4 +1,4 @@
-import { TransitionPresentation } from '@remotion/transitions';
+import { TransitionPresentation } from '../types';
 
 export type CustomPresentationProps = {
     width: number;

package/dist/presentations/index.d.ts

@@ -2,3 +2,9 @@ export { circle } from './circle';
 export { rectangle } from './rectangle';
 export { star } from './star';
 export { slidingDoors } from './sliding-doors';
+export { linearTiming } from '../';
+export { fade } from '@remotion/transitions/fade';
+export { slide, type SlideDirection } from '@remotion/transitions/slide';
+export { wipe } from '@remotion/transitions/wipe';
+export { flip } from '@remotion/transitions/flip';
+export { clockWipe } from '@remotion/transitions/clock-wipe';

package/dist/presentations/rectangle.d.ts

@@ -1,4 +1,4 @@
-import { TransitionPresentation } from '@remotion/transitions';
+import { TransitionPresentation } from '../types';
 
 export type CustomPresentationProps = {
     width: number;

package/dist/presentations/slide.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { TransitionPresentation } from '../types';
+
+export type SlideDirection = "from-left" | "from-top" | "from-right" | "from-bottom";
+export type SlideProps = {
+    direction?: SlideDirection;
+    exitStyle?: React.CSSProperties;
+    enterStyle?: React.CSSProperties;
+};
+/**
+ * Implements a sliding transition for presentation components where the entering slide pushes out the exiting slide based on the specified direction.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/slide)
+ * @param {SlideProps} [props] Configuration options for the slide transition: includes direction, enterStyle, and exitStyle.
+ * @returns {TransitionPresentation<SlideProps>} Returns a transition configuration object including the component and its props.
+ */
+export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;

package/dist/presentations/sliding-doors.d.ts

@@ -1,4 +1,4 @@
-import { TransitionPresentation } from '@remotion/transitions';
+import { TransitionPresentation } from '../types';
 
 export type CustomPresentationProps = {
     width: number;

package/dist/presentations/star.d.ts

@@ -1,4 +1,4 @@
-import { TransitionPresentation } from '@remotion/transitions';
+import { TransitionPresentation } from '../types';
 
 export type CustomPresentationProps = {
     width: number;

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

@@ -0,0 +1,15 @@
+import { TransitionTiming } from '../types';
+
+/**
+ * Creates a linear timing object for managing animations in frame units.
+ * @description Provides a mechanism to handle frame-based transitions linearly, optionally incorporating easing functions.
+ * @see [Documentation](https://remotion.dev/docs/transitions/timings/lineartiming)
+ * @param {Object} fieldsToFetch Configuration options for the linear timing
+ * @param {number} fieldsToFetch.durationInFrames Specifies the total duration of the transition in frames
+ * @param {((input: number) => number)=} fieldsToFetch.easing Optional easing function to modify the interpolation of values
+ * @returns {TransitionTiming} An object representing the timing of the transition, including methods to get duration and progress
+ */
+export declare const linearTiming: (options: {
+    durationInFrames: number;
+    easing?: ((input: number) => number) | undefined;
+}) => TransitionTiming;

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

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

package/dist/transition-presentations.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { SlideDirection } from './presentations';
+
+interface TransitionOptions {
+    width: number;
+    height: number;
+    durationInFrames: number;
+    id: string;
+    direction?: SlideDirection;
+}
+export declare const Transitions: Record<string, (options: TransitionOptions) => JSX.Element>;
+export {};

package/dist/transition-series.d.ts

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren } from 'react';
+import { AbsoluteFillLayout, LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
+import { NoReactInternals } from 'remotion/no-react';
+import { TransitionSeriesTransitionProps } from './types';
+
+declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
+type LayoutBasedProps = true extends typeof NoReactInternals.ENABLE_V5_BREAKING_CHANGES ? AbsoluteFillLayout : LayoutAndStyle;
+type SeriesSequenceProps = PropsWithChildren<{
+    readonly durationInFrames: number;
+    readonly offset?: number;
+    readonly className?: string;
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, "name">>;
+declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react").JSX.Element;
+export declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
+    Sequence: typeof SeriesSequence;
+    Transition: typeof TransitionSeriesTransition;
+};
+export {};

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { TransitionPresentation as RemotionPresentation, TransitionPresentationComponentProps as RemotionProps } from '@remotion/transitions';
+
+export type PresentationDirection = "entering" | "exiting";
+export type TransitionTiming = {
+    getDurationInFrames: (options: {
+        fps: number;
+    }) => number;
+    getProgress: (options: {
+        frame: number;
+        fps: number;
+    }) => number;
+};
+export type TransitionSeriesTransitionProps<PresentationProps extends Record<string, unknown>> = {
+    timing: TransitionTiming;
+    presentation?: TransitionPresentation<PresentationProps>;
+};
+export type TransitionPresentation<PresentationProps extends Record<string, unknown>> = RemotionPresentation<PresentationProps>;
+export type TransitionPresentationComponentProps<PresentationProps extends Record<string, unknown>> = Partial<RemotionProps<PresentationProps>> & {
+    presentationProgress: number;
+    children: ReactNode;
+    presentationDirection: PresentationDirection;
+    passedProps: PresentationProps;
+    presentationDurationInFrames: number;
+};

package/dist/use-transition-progress.d.ts

@@ -0,0 +1,9 @@
+export type TransitionState = {
+    entering: number;
+    exiting: number;
+    isInTransitionSeries: boolean;
+};
+/**
+ * Gets the progress and direction of a transition with a context() presentation.
+ */
+export declare const useTransitionProgress: () => TransitionState;

package/dist/validate.d.ts

@@ -0,0 +1,3 @@
+import { NoReactInternals } from 'remotion/no-react';
+
+export declare const validateDurationInFrames: typeof NoReactInternals.validateDurationInFrames;

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "@cliquify.me/transitions",
-  "version": "0.11.9",
+  "version": "0.11.10",
   "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist"
   ],
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
     }
   },
   "devDependencies": {
@@ -30,7 +33,7 @@
     "@remotion/shapes": "4.0.221"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || 17.x || 18.x",
+    "react": "^16.8.0 || 17.x || 18.x || 19.x",
     "remotion": "4.0.221",
     "@remotion/transitions": "4.0.221"
   },

package/src/index.ts

@@ -0,0 +1,15 @@
+// Timings
+export { linearTiming } from "./timings/linear-timing";
+export { springTiming } from "./timings/spring-timing";
+// Component
+export { TransitionSeries } from "./transition-series";
+export type {
+  TransitionPresentation,
+  TransitionPresentationComponentProps,
+  TransitionTiming
+} from "./types";
+// Hooks
+export { useTransitionProgress } from "./use-transition-progress";
+export type { TransitionState } from "./use-transition-progress";
+export * from "./presentations";
+export * from "./transition-presentations";