@remotion/animation-utils 4.0.90

package/dist/esm/transformation-helpers/interpolate-styles/constants.d.ts

@@ -0,0 +1,3 @@
+declare const NUMBER = "[-+]?\\d*\\.?\\d+";
+declare const PERCENTAGE: string;
+export { NUMBER, PERCENTAGE };

package/dist/esm/transformation-helpers/interpolate-styles/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { InterpolateOptions } from 'remotion';
+import type { Style } from '../../type';
+/**
+ * @description A function that interpolates between two styles based on an input range.
+ * @see [Documentation](https://www.remotion.dev/docs/animation-utils/interpolate-styles)
+ */
+export declare const interpolateStyles: (input: number, inputRange: number[], outputStylesRange: Style[], options?: InterpolateOptions) => import("react").CSSProperties;

package/dist/esm/transformation-helpers/interpolate-styles/utils.d.ts

@@ -0,0 +1,41 @@
+import type { ColorMatchers, CSSPropertiesValue } from '../../type';
+declare function getColorMatchers(): ColorMatchers;
+declare const breakDownValueIntoUnitNumberAndFunctions: (value: CSSPropertiesValue) => ({
+    color: string;
+    function?: undefined;
+    number?: undefined;
+    unit?: undefined;
+} | {
+    function: {
+        name: string;
+        values: ({
+            number: number;
+            unit: string;
+        } | {
+            number: number;
+            unit?: undefined;
+        } | {
+            unit: string;
+            number?: undefined;
+        })[];
+    };
+    color?: undefined;
+    number?: undefined;
+    unit?: undefined;
+} | {
+    number: number;
+    unit: string;
+    color?: undefined;
+    function?: undefined;
+} | {
+    number: number;
+    color?: undefined;
+    function?: undefined;
+    unit?: undefined;
+} | {
+    unit: string;
+    color?: undefined;
+    function?: undefined;
+    number?: undefined;
+})[];
+export { getColorMatchers, breakDownValueIntoUnitNumberAndFunctions };

package/dist/esm/transformation-helpers/make-transform/index.d.ts

@@ -0,0 +1,4 @@
+import type { TransformFunctionReturnType } from '../../type';
+import { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ } from './transform-functions';
+export declare function makeTransform(transforms: TransformFunctionReturnType[]): string;
+export { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ, };

package/dist/esm/transformation-helpers/make-transform/is-unit-with-string.d.ts

@@ -0,0 +1 @@
+export declare const isUnitWithString: (input: unknown, units: readonly string[]) => boolean;

package/dist/esm/transformation-helpers/make-transform/transform-functions.d.ts

@@ -0,0 +1,46 @@
+import type { AngleUnit, AngleUnitString, LengthPercentageUnit, LengthPercentageUnitString, LengthUnit, LengthUnitString } from '../../type';
+declare function matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): string;
+declare function matrix3d(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): string;
+declare function perspective(length: LengthPercentageUnitString): string;
+declare function perspective(length: number, unit?: LengthUnit): string;
+declare function rotate(angle: AngleUnitString): string;
+declare function rotate(angle: number, unit?: AngleUnit): string;
+declare function rotate3d(x: number, y: number, z: number, angle: number): string;
+declare function rotate3d(x: number, y: number, z: number, angle: AngleUnitString): string;
+declare function rotate3d(x: number, y: number, z: number, angle: number, unit?: AngleUnit): string;
+declare function rotateX(angle: AngleUnitString): string;
+declare function rotateX(angle: number, unit?: AngleUnit): string;
+declare function rotateY(angle: AngleUnitString): string;
+declare function rotateY(angle: number, unit?: AngleUnit): string;
+declare function rotateZ(angle: AngleUnitString): string;
+declare function rotateZ(angle: number, unit?: AngleUnit): string;
+declare function scale(x: number, y?: number): string;
+declare function scale3d(x: number, y: number, z: number): string;
+declare function scaleX(x: number): string;
+declare function scaleY(y: number): string;
+declare function scaleZ(z: number): string;
+declare function skew(angle: number): string;
+declare function skew(angle: AngleUnitString): string;
+declare function skew(angle: AngleUnitString, angle2: AngleUnitString): string;
+declare function skew(angle: number, unit: AngleUnit): string;
+declare function skew(angleX: number, angleY: number): string;
+declare function skew(angleX: number, unitX: AngleUnit, angleY: number, unitY: AngleUnit): string;
+declare function skewX(angle: AngleUnitString): string;
+declare function skewX(angle: number, unit?: AngleUnit): string;
+declare function skewY(angle: AngleUnitString): string;
+declare function skewY(angle: number, unit?: AngleUnit): string;
+declare function translate(x: LengthPercentageUnitString): string;
+declare function translate(x: number): string;
+declare function translate(x: number, y: number): string;
+declare function translate(x: LengthPercentageUnitString, y: LengthPercentageUnitString): string;
+declare function translate(translation: number, unit: LengthPercentageUnit): string;
+declare function translate(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit): string;
+declare function translate3d(x: LengthPercentageUnitString | number, y: LengthPercentageUnitString | number, z: LengthPercentageUnitString | number): string;
+declare function translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit): string;
+declare function translateX(x: LengthPercentageUnitString): string;
+declare function translateX(x: number, unit?: LengthPercentageUnit): string;
+declare function translateY(y: LengthPercentageUnitString): string;
+declare function translateY(y: number, unit?: LengthPercentageUnit): string;
+declare function translateZ(z: LengthUnitString): string;
+declare function translateZ(z: number, unit?: LengthUnit): string;
+export { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ, };

package/dist/esm/type.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { breakDownValueIntoUnitNumberAndFunctions } from './transformation-helpers/interpolate-styles/utils';
+import type { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ } from './transformation-helpers/make-transform';
+export declare const lengthUnits: readonly ["px", "em", "rem", "pt", "cap", "ch", "ex", "ic", "lh", "rlh", "vmax", "vmin", "vb", "vi", "cqw", "vh", "vw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "cm", "mm", "Q", "in", "pc"];
+export declare const angleUnits: readonly ["rad", "deg", "grad", "turn"];
+export declare const lengthPercentageUnits: readonly ["%", "px", "em", "rem", "pt", "cap", "ch", "ex", "ic", "lh", "rlh", "vmax", "vmin", "vb", "vi", "cqw", "vh", "vw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "cm", "mm", "Q", "in", "pc"];
+type LengthUnit = (typeof lengthUnits)[number];
+type AngleUnit = (typeof angleUnits)[number];
+type LengthPercentageUnit = (typeof lengthPercentageUnits)[number];
+export type LengthUnitString = `${number}${LengthUnit}`;
+export type LengthPercentageUnitString = `${number}${LengthPercentageUnit}`;
+export type AngleUnitString = `${number}${AngleUnit}`;
+type TransformFunctionReturnType = ReturnType<typeof matrix | typeof matrix3d | typeof perspective | typeof rotate | typeof rotate3d | typeof rotateX | typeof rotateY | typeof rotateZ | typeof scale | typeof scale3d | typeof scaleX | typeof scaleY | typeof scaleZ | typeof skew | typeof skewX | typeof skewY | typeof translate | typeof translate3d | typeof translateX | typeof translateY | typeof translateZ>;
+type MatcherType = RegExp | undefined;
+type ColorMatchers = {
+    rgb: MatcherType;
+    rgba: MatcherType;
+    hsl: MatcherType;
+    hsla: MatcherType;
+    hex3: MatcherType;
+    hex4: MatcherType;
+    hex5: MatcherType;
+    hex6: MatcherType;
+    hex8: MatcherType;
+};
+type Style = React.CSSProperties;
+type CSSPropertiesKey = keyof Style;
+type CSSPropertiesValue = Style[CSSPropertiesKey];
+type UnitNumberAndFunctions = ReturnType<typeof breakDownValueIntoUnitNumberAndFunctions>;
+type UnitNumberAndFunction = UnitNumberAndFunctions[0];
+export type { LengthUnit, LengthPercentageUnit, AngleUnit, TransformFunctionReturnType, ColorMatchers, Style, CSSPropertiesKey, CSSPropertiesValue, UnitNumberAndFunction, };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './transformation-helpers/interpolate-styles/index.js';
+export * from './transformation-helpers/make-transform';
+export type { AngleUnit, LengthPercentageUnit, LengthUnit, TransformFunctionReturnType, } from './type';

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./transformation-helpers/interpolate-styles/index.js"), exports);
+__exportStar(require("./transformation-helpers/make-transform"), exports);

package/dist/transformation-helpers/interpolate-styles/constants.d.ts

@@ -0,0 +1,3 @@
+declare const NUMBER = "[-+]?\\d*\\.?\\d+";
+declare const PERCENTAGE: string;
+export { NUMBER, PERCENTAGE };

package/dist/transformation-helpers/interpolate-styles/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PERCENTAGE = exports.NUMBER = void 0;
+const NUMBER = '[-+]?\\d*\\.?\\d+';
+exports.NUMBER = NUMBER;
+const PERCENTAGE = NUMBER + '%';
+exports.PERCENTAGE = PERCENTAGE;

package/dist/transformation-helpers/interpolate-styles/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { InterpolateOptions } from 'remotion';
+import type { Style } from '../../type';
+/**
+ * @description A function that interpolates between two styles based on an input range.
+ * @see [Documentation](https://www.remotion.dev/docs/animation-utils/interpolate-styles)
+ */
+export declare const interpolateStyles: (input: number, inputRange: number[], outputStylesRange: Style[], options?: InterpolateOptions) => import("react").CSSProperties;

package/dist/transformation-helpers/interpolate-styles/index.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateStyles = void 0;
+const remotion_1 = require("remotion");
+const utils_1 = require("./utils");
+const interpolatedPropertyPart = ({ inputValue, inputRange, initialStylePropertyPart, finalStylePropertyPart, initialStyleProperty, finalStyleProperty, options, }) => {
+    var _a;
+    if (finalStylePropertyPart === undefined) {
+        throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    if (initialStylePropertyPart.color) {
+        if (!finalStylePropertyPart.color) {
+            throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+        }
+        const interpolatedColor = (0, remotion_1.interpolateColors)(inputValue, inputRange, [
+            initialStylePropertyPart.color,
+            finalStylePropertyPart.color,
+        ]);
+        return `${interpolatedColor}`;
+    }
+    if (initialStylePropertyPart.function) {
+        if (!(finalStylePropertyPart === null || finalStylePropertyPart === void 0 ? void 0 : finalStylePropertyPart.function) ||
+            initialStylePropertyPart.function.name !==
+                ((_a = finalStylePropertyPart.function) === null || _a === void 0 ? void 0 : _a.name)) {
+            throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+        }
+        const endValuePartFunction = finalStylePropertyPart.function;
+        const endValuePartFunctionArgs = endValuePartFunction.values || [];
+        const interpolatedFunctionArgs = initialStylePropertyPart.function.values.reduce((acc, startValuePartFunctionArg, index) => {
+            const endValuePartFunctionArg = endValuePartFunctionArgs[index];
+            const interpolatedArg = interpolatedPropertyPart({
+                inputValue,
+                inputRange,
+                initialStylePropertyPart: startValuePartFunctionArg,
+                finalStylePropertyPart: endValuePartFunctionArg,
+                initialStyleProperty,
+                finalStyleProperty,
+                options,
+            });
+            return `${acc}, ${interpolatedArg}`;
+        }, '');
+        return `${initialStylePropertyPart.function.name}(${interpolatedFunctionArgs.slice(2)})`;
+    }
+    if (typeof initialStylePropertyPart.number === 'undefined') {
+        if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit) {
+            throw new TypeError(`Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+        }
+        return `${initialStylePropertyPart.unit}`;
+    }
+    if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit &&
+        initialStylePropertyPart.number !== 0 &&
+        finalStylePropertyPart.number !== 0) {
+        throw new TypeError(`The units of the start and end values must match. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    const startNumber = initialStylePropertyPart.number;
+    const endNumber = finalStylePropertyPart.number || 0;
+    const interpolatedNumber = (0, remotion_1.interpolate)(inputValue, inputRange, [startNumber, endNumber], options);
+    const interpolatedUnit = initialStylePropertyPart.unit || finalStylePropertyPart.unit || '';
+    if (!interpolatedUnit) {
+        return interpolatedNumber;
+    }
+    return `${interpolatedNumber}${interpolatedUnit}`;
+};
+const interpolateProperty = ({ inputValue, inputRange, initialStyleProperty, finalStyleProperty, options, }) => {
+    if (typeof initialStyleProperty !== typeof finalStyleProperty &&
+        initialStyleProperty !== 0 &&
+        finalStyleProperty !== 0) {
+        throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    const initialStylePropertyParts = (0, utils_1.breakDownValueIntoUnitNumberAndFunctions)(initialStyleProperty);
+    const finalStylePropertyParts = (0, utils_1.breakDownValueIntoUnitNumberAndFunctions)(finalStyleProperty);
+    if (initialStylePropertyParts.length !== finalStylePropertyParts.length) {
+        throw new TypeError(`The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    const interpolatedValue = initialStylePropertyParts.reduce((acc, initialStylePropertyPart, index) => {
+        return `${acc} ${interpolatedPropertyPart({
+            inputValue,
+            inputRange,
+            initialStylePropertyPart,
+            finalStylePropertyPart: finalStylePropertyParts[index],
+            initialStyleProperty,
+            finalStyleProperty,
+            options,
+        })}`;
+    }, '');
+    return interpolatedValue.slice(1);
+};
+const interpolateStylesFunction = ({ inputValue, inputRange, initialStyle, finalStyle, options, }) => {
+    const [startingValue, endingValue] = inputRange;
+    return Object.keys(initialStyle).reduce((acc, key) => {
+        if (!finalStyle[key]) {
+            return {
+                ...acc,
+                [key]: initialStyle[key],
+            };
+        }
+        const finalStyleValue = interpolateProperty({
+            inputValue,
+            inputRange: [startingValue, endingValue],
+            initialStyleProperty: initialStyle[key],
+            finalStyleProperty: finalStyle[key],
+            options,
+        });
+        // Avoid number to be a string
+        if (!isNaN(Number(finalStyleValue))) {
+            return {
+                ...acc,
+                [key]: Number(finalStyleValue),
+            };
+        }
+        return {
+            ...acc,
+            [key]: finalStyleValue,
+        };
+    }, {});
+};
+function checkInputRange(arr) {
+    if (arr.length < 2) {
+        throw new Error('inputRange must have at least 2 elements');
+    }
+    for (let index = 0; index < arr.length; index++) {
+        if (typeof arr[index] !== 'number') {
+            throw new Error(`inputRange must contain only numbers`);
+        }
+        if (arr[index] === -Infinity || arr[index] === Infinity) {
+            throw new Error(`inputRange must contain only finite numbers, but got [${arr.join(',')}]`);
+        }
+        if (index > 0 && !(arr[index] > arr[index - 1])) {
+            throw new Error(`inputRange must be strictly monotonically non-decreasing but got [${arr.join(',')}]`);
+        }
+    }
+}
+function checkStylesRange(arr) {
+    if (arr.length < 2) {
+        throw new Error('outputStyles must have at least 2 elements');
+    }
+    for (const index in arr) {
+        if (typeof arr[index] !== 'object') {
+            throw new Error('outputStyles must contain only objects');
+        }
+    }
+}
+/**
+ * @description A function that interpolates between two styles based on an input range.
+ * @see [Documentation](https://www.remotion.dev/docs/animation-utils/interpolate-styles)
+ */
+const interpolateStyles = (input, inputRange, outputStylesRange, options) => {
+    var _a, _b, _c;
+    if (typeof input === 'undefined') {
+        throw new Error('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new Error('inputRange can not be undefined');
+    }
+    if (typeof outputStylesRange === 'undefined') {
+        throw new Error('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputStylesRange.length) {
+        throw new Error('inputRange (' +
+            inputRange.length +
+            ') and outputStylesRange (' +
+            outputStylesRange.length +
+            ') must have the same length');
+    }
+    checkInputRange(inputRange);
+    checkStylesRange(outputStylesRange);
+    let startIndex = inputRange.findIndex((step) => input < step) - 1;
+    if (startIndex === -2) {
+        startIndex = inputRange.length - 2;
+    }
+    const endIndex = startIndex + 1;
+    const startingValue = inputRange[startIndex];
+    const endingValue = inputRange[endIndex];
+    const initialStyle = outputStylesRange[startIndex];
+    const finalStyle = outputStylesRange[endIndex];
+    const easing = (_a = options === null || options === void 0 ? void 0 : options.easing) !== null && _a !== void 0 ? _a : ((num) => num);
+    const extrapolateLeft = (_b = options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== null && _b !== void 0 ? _b : 'extend';
+    const extrapolateRight = (_c = options === null || options === void 0 ? void 0 : options.extrapolateRight) !== null && _c !== void 0 ? _c : 'extend';
+    return interpolateStylesFunction({
+        inputValue: input,
+        inputRange: [startingValue, endingValue],
+        initialStyle,
+        finalStyle,
+        options: {
+            easing,
+            extrapolateLeft,
+            extrapolateRight,
+        },
+    });
+};
+exports.interpolateStyles = interpolateStyles;

package/dist/transformation-helpers/interpolate-styles/utils.d.ts

@@ -0,0 +1,41 @@
+import type { ColorMatchers, CSSPropertiesValue } from '../../type';
+declare function getColorMatchers(): ColorMatchers;
+declare const breakDownValueIntoUnitNumberAndFunctions: (value: CSSPropertiesValue) => ({
+    color: string;
+    function?: undefined;
+    number?: undefined;
+    unit?: undefined;
+} | {
+    function: {
+        name: string;
+        values: ({
+            number: number;
+            unit: string;
+        } | {
+            number: number;
+            unit?: undefined;
+        } | {
+            unit: string;
+            number?: undefined;
+        })[];
+    };
+    color?: undefined;
+    number?: undefined;
+    unit?: undefined;
+} | {
+    number: number;
+    unit: string;
+    color?: undefined;
+    function?: undefined;
+} | {
+    number: number;
+    color?: undefined;
+    function?: undefined;
+    unit?: undefined;
+} | {
+    unit: string;
+    color?: undefined;
+    function?: undefined;
+    number?: undefined;
+})[];
+export { getColorMatchers, breakDownValueIntoUnitNumberAndFunctions };

package/dist/transformation-helpers/interpolate-styles/utils.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakDownValueIntoUnitNumberAndFunctions = exports.getColorMatchers = void 0;
+const remotion_1 = require("remotion");
+const constants_1 = require("./constants");
+function call(...args) {
+    return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
+}
+function getColorMatchers() {
+    const cachedMatchers = {
+        rgb: undefined,
+        rgba: undefined,
+        hsl: undefined,
+        hsla: undefined,
+        hex3: undefined,
+        hex4: undefined,
+        hex5: undefined,
+        hex6: undefined,
+        hex8: undefined,
+    };
+    if (cachedMatchers.rgb === undefined) {
+        cachedMatchers.rgb = new RegExp('rgb' + call(constants_1.NUMBER, constants_1.NUMBER, constants_1.NUMBER));
+        cachedMatchers.rgba = new RegExp('rgba' + call(constants_1.NUMBER, constants_1.NUMBER, constants_1.NUMBER, constants_1.NUMBER));
+        cachedMatchers.hsl = new RegExp('hsl' + call(constants_1.NUMBER, constants_1.PERCENTAGE, constants_1.PERCENTAGE));
+        cachedMatchers.hsla = new RegExp('hsla' + call(constants_1.NUMBER, constants_1.PERCENTAGE, constants_1.PERCENTAGE, constants_1.NUMBER));
+        cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+        cachedMatchers.hex4 =
+            /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+        cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
+        cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+    }
+    return cachedMatchers;
+}
+exports.getColorMatchers = getColorMatchers;
+const extractOrderedPartsOfValue = (value) => {
+    const parts = [];
+    let remainingValue = value;
+    while (remainingValue.length > 0) {
+        const functionMatch = remainingValue.match(/([a-zA-Z-]+)\(([^)]+)\)/);
+        // If there's a function, add it to the parts and remove it from the remaining value
+        if (functionMatch) {
+            const { index } = functionMatch;
+            const matchedFunction = functionMatch[0];
+            // Add any parts before the function
+            if ((index || 0) > 0) {
+                parts.push(...remainingValue.substring(0, index).trim().split(/\s+/));
+            }
+            parts.push(matchedFunction);
+            remainingValue = remainingValue.substring((index || 0) + matchedFunction.length);
+        }
+        else {
+            // If there's no function, add the remaining value to the parts
+            parts.push(...remainingValue.trim().split(/\s+/));
+            break;
+        }
+    }
+    return parts.filter((part) => part !== ''); // Filter out any empty strings
+};
+const classifyArgsOfFunction = (value) => {
+    let nestedLevel = 0;
+    const values = [];
+    let currentValue = '';
+    for (const char of value) {
+        if (char === '(')
+            nestedLevel++;
+        else if (char === ')')
+            nestedLevel--;
+        if (char === ',' && nestedLevel === 0) {
+            values.push(currentValue.trim());
+            currentValue = '';
+        }
+        else {
+            currentValue += char;
+        }
+    }
+    if (currentValue)
+        values.push(currentValue.trim());
+    // Classify each value
+    return values.map((val) => {
+        const numberUnitMatch = val.match(/^(\d+(?:\.\d+)?)([a-zA-Z%]*)$/);
+        if (numberUnitMatch) {
+            const number = parseFloat(numberUnitMatch[1]);
+            const unit = numberUnitMatch[2];
+            return unit ? { number, unit } : { number };
+        }
+        const numberMatch = val.match(/^(\d+(?:\.\d+)?)$/);
+        if (numberMatch) {
+            const number = parseFloat(numberMatch[1]);
+            return { number };
+        }
+        return { unit: val };
+    });
+};
+const isColorValue = (value) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (Object.keys(remotion_1.Internals.colorNames).includes(value)) {
+        return true;
+    }
+    const matchers = getColorMatchers();
+    return (((_a = matchers.rgb) === null || _a === void 0 ? void 0 : _a.test(value)) ||
+        ((_b = matchers.rgba) === null || _b === void 0 ? void 0 : _b.test(value)) ||
+        ((_c = matchers.hsl) === null || _c === void 0 ? void 0 : _c.test(value)) ||
+        ((_d = matchers.hsla) === null || _d === void 0 ? void 0 : _d.test(value)) ||
+        ((_e = matchers.hex3) === null || _e === void 0 ? void 0 : _e.test(value)) ||
+        ((_f = matchers.hex4) === null || _f === void 0 ? void 0 : _f.test(value)) ||
+        ((_g = matchers.hex5) === null || _g === void 0 ? void 0 : _g.test(value)) ||
+        ((_h = matchers.hex6) === null || _h === void 0 ? void 0 : _h.test(value)) ||
+        ((_j = matchers.hex8) === null || _j === void 0 ? void 0 : _j.test(value)));
+};
+const classifyParts = (parts) => {
+    return parts.map((part) => {
+        // Check for a color value like 'red', 'rgba(0, 0, 0, 0)', '#fff', etc.
+        if (isColorValue(part)) {
+            return { color: part };
+        }
+        // Check for a function like 'translateX(10px)' or 'rotate(90deg)'
+        const functionMatch = part.match(/([a-zA-Z-]+)\(([^)]+)\)/);
+        if (functionMatch) {
+            const functionName = functionMatch[1];
+            const functionValues = classifyArgsOfFunction(functionMatch[2]);
+            return { function: { name: functionName, values: functionValues } };
+        }
+        // Check for a number possibly followed by a unit
+        const numberUnitMatch = part.match(/^(\d+(?:\.\d+)?)([a-zA-Z%]*)$/);
+        if (numberUnitMatch) {
+            const number = parseFloat(numberUnitMatch[1]);
+            const unit = numberUnitMatch[2];
+            return unit ? { number, unit } : { number };
+        }
+        // Check for a number without a unit
+        const numberMatch = part.match(/^(\d+(?:\.\d+)?)$/);
+        if (numberMatch) {
+            const number = parseFloat(numberMatch[1]);
+            return { number };
+        }
+        // If neither, treat as a unit (like 'solid', 'none', etc.)
+        return { unit: part };
+    });
+};
+const breakDownValueIntoUnitNumberAndFunctions = (value) => {
+    if (typeof value === 'number') {
+        return [{ number: value }];
+    }
+    if (typeof value !== 'string') {
+        return [];
+    }
+    const valueParts = extractOrderedPartsOfValue(value);
+    return classifyParts(valueParts);
+};
+exports.breakDownValueIntoUnitNumberAndFunctions = breakDownValueIntoUnitNumberAndFunctions;

package/dist/transformation-helpers/make-transform/index.d.ts

@@ -0,0 +1,4 @@
+import type { TransformFunctionReturnType } from '../../type';
+import { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ } from './transform-functions';
+export declare function makeTransform(transforms: TransformFunctionReturnType[]): string;
+export { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ, };

package/dist/transformation-helpers/make-transform/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateZ = exports.translateY = exports.translateX = exports.translate3d = exports.translate = exports.skewY = exports.skewX = exports.skew = exports.scaleZ = exports.scaleY = exports.scaleX = exports.scale3d = exports.scale = exports.rotateZ = exports.rotateY = exports.rotateX = exports.rotate3d = exports.rotate = exports.perspective = exports.matrix3d = exports.matrix = exports.makeTransform = void 0;
+const transform_functions_1 = require("./transform-functions");
+Object.defineProperty(exports, "matrix", { enumerable: true, get: function () { return transform_functions_1.matrix; } });
+Object.defineProperty(exports, "matrix3d", { enumerable: true, get: function () { return transform_functions_1.matrix3d; } });
+Object.defineProperty(exports, "perspective", { enumerable: true, get: function () { return transform_functions_1.perspective; } });
+Object.defineProperty(exports, "rotate", { enumerable: true, get: function () { return transform_functions_1.rotate; } });
+Object.defineProperty(exports, "rotate3d", { enumerable: true, get: function () { return transform_functions_1.rotate3d; } });
+Object.defineProperty(exports, "rotateX", { enumerable: true, get: function () { return transform_functions_1.rotateX; } });
+Object.defineProperty(exports, "rotateY", { enumerable: true, get: function () { return transform_functions_1.rotateY; } });
+Object.defineProperty(exports, "rotateZ", { enumerable: true, get: function () { return transform_functions_1.rotateZ; } });
+Object.defineProperty(exports, "scale", { enumerable: true, get: function () { return transform_functions_1.scale; } });
+Object.defineProperty(exports, "scale3d", { enumerable: true, get: function () { return transform_functions_1.scale3d; } });
+Object.defineProperty(exports, "scaleX", { enumerable: true, get: function () { return transform_functions_1.scaleX; } });
+Object.defineProperty(exports, "scaleY", { enumerable: true, get: function () { return transform_functions_1.scaleY; } });
+Object.defineProperty(exports, "scaleZ", { enumerable: true, get: function () { return transform_functions_1.scaleZ; } });
+Object.defineProperty(exports, "skew", { enumerable: true, get: function () { return transform_functions_1.skew; } });
+Object.defineProperty(exports, "skewX", { enumerable: true, get: function () { return transform_functions_1.skewX; } });
+Object.defineProperty(exports, "skewY", { enumerable: true, get: function () { return transform_functions_1.skewY; } });
+Object.defineProperty(exports, "translate", { enumerable: true, get: function () { return transform_functions_1.translate; } });
+Object.defineProperty(exports, "translate3d", { enumerable: true, get: function () { return transform_functions_1.translate3d; } });
+Object.defineProperty(exports, "translateX", { enumerable: true, get: function () { return transform_functions_1.translateX; } });
+Object.defineProperty(exports, "translateY", { enumerable: true, get: function () { return transform_functions_1.translateY; } });
+Object.defineProperty(exports, "translateZ", { enumerable: true, get: function () { return transform_functions_1.translateZ; } });
+function makeTransform(transforms) {
+    return transforms.join(' ');
+}
+exports.makeTransform = makeTransform;

package/dist/transformation-helpers/make-transform/is-unit-with-string.d.ts

@@ -0,0 +1 @@
+export declare const isUnitWithString: (input: unknown, units: readonly string[]) => boolean;

package/dist/transformation-helpers/make-transform/is-unit-with-string.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isUnitWithString = void 0;
+const type_1 = require("../../type");
+const isUnitWithString = (input, units) => {
+    if (typeof input !== 'string') {
+        return false;
+    }
+    if (!units.find((u) => input.endsWith(u))) {
+        throw new Error(`input ${input} does not end with a valid unit. Valid units are: ${units.join(', ')}`);
+    }
+    const match = input.match(/([0-9.]+)([a-z%]+)/);
+    if (!match) {
+        throw new Error(`input ${input} is not a valid transform. Must be a number or a string ending in one of the following units: ${type_1.lengthUnits.join(', ')}`);
+    }
+    return true;
+};
+exports.isUnitWithString = isUnitWithString;