@remotion/animation-utils 4.0.90

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2023 Chetan Karwa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# `@remotion/animation-utils`
+
+Docs: https://remotion.dev/docs/animation-utils
+
+## License
+
+MIT

package/dist/esm/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/esm/index.mjs

@@ -0,0 +1,662 @@
+import { Internals, interpolateColors, interpolate } from 'remotion';
+
+const NUMBER = '[-+]?\\d*\\.?\\d+';
+const PERCENTAGE = NUMBER + '%';
+
+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(NUMBER, NUMBER, NUMBER));
+        cachedMatchers.rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
+        cachedMatchers.hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
+        cachedMatchers.hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, 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;
+}
+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(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);
+};
+
+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 = 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 = 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 = breakDownValueIntoUnitNumberAndFunctions(initialStyleProperty);
+    const finalStylePropertyParts = 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,
+        },
+    });
+};
+
+const lengthUnits = [
+    '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',
+];
+const angleUnits = ['rad', 'deg', 'grad', 'turn'];
+const lengthPercentageUnits = ['%', ...lengthUnits];
+
+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: ${lengthUnits.join(', ')}`);
+    }
+    return true;
+};
+
+/* eslint-disable no-redeclare */
+/* Matrix transformation */
+const checkNumber = ({ num, param, api, }) => {
+    if (typeof num === 'undefined') {
+        throw new TypeError(`Argument passed to "${api}" for param "${param}" is undefined`);
+    }
+    if (typeof num !== 'number') {
+        throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)}`);
+    }
+    if (!Number.isFinite(num)) {
+        throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)} (must be finite)`);
+    }
+};
+function matrix(a, b, c, d, tx, ty) {
+    checkNumber({ num: a, param: 'a', api: 'matrix' });
+    checkNumber({ num: b, param: 'b', api: 'matrix' });
+    checkNumber({ num: c, param: 'c', api: 'matrix' });
+    checkNumber({ num: d, param: 'd', api: 'matrix' });
+    checkNumber({ num: tx, param: 'tx', api: 'matrix' });
+    checkNumber({ num: ty, param: 'ty', api: 'matrix' });
+    return `matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`;
+}
+function matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
+    checkNumber({ num: a1, param: 'a1', api: 'matrix3d' });
+    checkNumber({ num: b1, param: 'b1', api: 'matrix3d' });
+    checkNumber({ num: c1, param: 'c1', api: 'matrix3d' });
+    checkNumber({ num: d1, param: 'd1', api: 'matrix3d' });
+    checkNumber({ num: a2, param: 'a2', api: 'matrix3d' });
+    checkNumber({ num: b2, param: 'b2', api: 'matrix3d' });
+    checkNumber({ num: c2, param: 'c2', api: 'matrix3d' });
+    checkNumber({ num: d2, param: 'd2', api: 'matrix3d' });
+    checkNumber({ num: a3, param: 'a3', api: 'matrix3d' });
+    checkNumber({ num: b3, param: 'b3', api: 'matrix3d' });
+    checkNumber({ num: c3, param: 'c3', api: 'matrix3d' });
+    checkNumber({ num: d3, param: 'd3', api: 'matrix3d' });
+    checkNumber({ num: a4, param: 'a4', api: 'matrix3d' });
+    checkNumber({ num: b4, param: 'b4', api: 'matrix3d' });
+    checkNumber({ num: c4, param: 'c4', api: 'matrix3d' });
+    checkNumber({ num: d4, param: 'd4', api: 'matrix3d' });
+    return `matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`;
+}
+function perspective(length, unit = 'px') {
+    if (isUnitWithString(length, lengthUnits)) {
+        return `perspective(${length})`;
+    }
+    checkNumber({ num: length, param: 'length', api: 'perspective' });
+    return `perspective(${length}${unit})`;
+}
+function rotate(angle, unit = 'deg') {
+    if (isUnitWithString(angle, angleUnits)) {
+        return `rotate(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotate' });
+    return `rotate(${angle}${unit})`;
+}
+function rotate3d(x, y, z, angle, unit = 'deg') {
+    checkNumber({ num: x, param: 'x', api: 'rotate3d' });
+    checkNumber({ num: y, param: 'y', api: 'rotate3d' });
+    checkNumber({ num: z, param: 'z', api: 'rotate3d' });
+    if (isUnitWithString(angle, angleUnits)) {
+        return `rotate3d(${x}, ${y}, ${z}, ${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotate3d' });
+    return `rotate3d(${x}, ${y}, ${z}, ${angle}${unit})`;
+}
+function rotateX(angle, unit = 'deg') {
+    if (isUnitWithString(angle, angleUnits)) {
+        return `rotateX(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateX' });
+    return `rotateX(${angle}${unit})`;
+}
+function rotateY(angle, unit = 'deg') {
+    if (isUnitWithString(angle, angleUnits)) {
+        return `rotateY(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateY' });
+    return `rotateY(${angle}${unit})`;
+}
+function rotateZ(angle, unit = 'deg') {
+    if (isUnitWithString(angle, angleUnits)) {
+        return `rotateZ(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateZ' });
+    return `rotateZ(${angle}${unit})`;
+}
+/* Scale */
+function scale(x, y = x) {
+    checkNumber({ num: x, param: 'x', api: 'scale' });
+    return `scale(${x}, ${y})`;
+}
+function scale3d(x, y, z) {
+    checkNumber({ num: x, param: 'x', api: 'scale3d' });
+    checkNumber({ num: y, param: 'y', api: 'scale3d' });
+    checkNumber({ num: z, param: 'z', api: 'scale3d' });
+    return `scale3d(${x}, ${y}, ${z})`;
+}
+function scaleX(x) {
+    checkNumber({ num: x, param: 'x', api: 'scaleX' });
+    return `scaleX(${x})`;
+}
+function scaleY(y) {
+    checkNumber({ num: y, param: 'y', api: 'scaleY' });
+    return `scaleY(${y})`;
+}
+function scaleZ(z) {
+    checkNumber({ num: z, param: 'z', api: 'scaleZ' });
+    return `scaleZ(${z})`;
+}
+function skew(...args) {
+    const [arg1, arg2, arg3, arg4] = args;
+    if (arguments.length === 1) {
+        // Case A
+        if (isUnitWithString(arg1, angleUnits)) {
+            return `skew(${arg1}, ${arg1})`;
+        }
+        // Case Z
+        checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+        return `skew(${arg1}deg, ${arg1}deg)`;
+    }
+    if (arguments.length === 2) {
+        // Case B
+        if (isUnitWithString(arg1, angleUnits) &&
+            isUnitWithString(arg2, angleUnits)) {
+            return `skew(${arg1}, ${arg2})`;
+        }
+        // Case C
+        if (typeof arg1 === 'number' && typeof arg2 !== 'number') {
+            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+            return `skew(${arg1}${arg2}, ${arg1}${arg2})`;
+        }
+        // Case D
+        if (typeof arg1 === 'number' && typeof arg2 === 'number') {
+            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+            checkNumber({ num: arg2, param: 'angle', api: 'skew' });
+            return `skew(${arg1}deg, ${arg2}deg)`;
+        }
+    }
+    if (arguments.length === 4) {
+        // Case E
+        if (typeof arg1 === 'number' &&
+            isUnitWithString(arg2, angleUnits) &&
+            typeof arg3 === 'number' &&
+            isUnitWithString(arg4, angleUnits)) {
+            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+            checkNumber({ num: arg3, param: 'angle', api: 'skew' });
+            return `skew(${arg1}${arg2}, ${arg3}${arg4})`;
+        }
+    }
+    throw new TypeError([
+        'skew() supports only the following signatures:',
+        'skew(angle: AngleUnitString): string;',
+        'skew(angle: AngleUnitString, angle2: AngleUnitString): string;',
+        'skew(angle: number, unit: AngleUnit): string;',
+        'skew(angleX: number, angleY: number): string;',
+        'skew(angleX: number, unitX: AngleUnit, angleY: number, unitY: AngleUnit): string;',
+    ].join('\n'));
+}
+function skewX(angle, unit = 'deg') {
+    if (isUnitWithString(angle, angleUnits)) {
+        return `skewX(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'skewX' });
+    return `skewX(${angle}${unit})`;
+}
+function skewY(angle, unit = 'deg') {
+    if (isUnitWithString(angle, angleUnits)) {
+        return `skewY(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'skewY' });
+    return `skewY(${angle}${unit})`;
+}
+function translate(...args) {
+    const [arg1, arg2, arg3, arg4] = args;
+    if (arguments.length === 1) {
+        // Case A
+        if (isUnitWithString(arg1, lengthPercentageUnits)) {
+            return `translate(${arg1})`;
+        }
+        // Case B
+        checkNumber({ num: arg1, param: 'x', api: 'translate' });
+        return `translate(${arg1}px)`;
+    }
+    if (arguments.length === 2) {
+        // Case C
+        if (typeof arg1 === 'number' && typeof arg2 === 'number') {
+            checkNumber({ num: arg1, param: 'x', api: 'translate' });
+            checkNumber({ num: arg2, param: 'y', api: 'translate' });
+            return `translate(${arg1}px, ${arg2}px)`;
+        }
+        // Case C.1
+        if (isUnitWithString(arg1, lengthPercentageUnits) &&
+            isUnitWithString(arg2, lengthPercentageUnits)) {
+            return `translate(${arg1}, ${arg2})`;
+        }
+        // Case D
+        if (typeof arg1 === 'number' && typeof arg2 !== 'number') {
+            checkNumber({ num: arg1, param: 'x', api: 'translate' });
+            return `translate(${arg1}${arg2})`;
+        }
+    }
+    if (arguments.length === 4) {
+        // Case E
+        if (typeof arg1 === 'number' && typeof arg3 === 'number') {
+            checkNumber({ num: arg1, param: 'x', api: 'translate' });
+            checkNumber({ num: arg3, param: 'y', api: 'translate' });
+            return `translate(${arg1}${arg2}, ${arg3}${arg4})`;
+        }
+    }
+    throw new TypeError([
+        `translate() supports only the following signatures:`,
+        `translate(x: LengthPercentageUnitString)`,
+        `translate(x: number)`,
+        `translate(x: number, y: number)`,
+        `translate(translation: number, unit: LengthPercentageUnit)`,
+        `translate(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit): string;`,
+    ].join('\n'));
+}
+function translate3d(...args) {
+    if (arguments.length === 3) {
+        const [x, y, z] = args;
+        const vars = [x, y, z].map((arg, i) => {
+            if (isUnitWithString(arg, lengthPercentageUnits)) {
+                return arg;
+            }
+            checkNumber({
+                num: arg,
+                param: i === 0 ? 'x' : i === 1 ? 'y' : 'z',
+                api: 'translate3d',
+            });
+            if (typeof arg === 'number') {
+                return `${arg}px`;
+            }
+            return arg;
+        });
+        return `translate3d(${vars.join(', ')})`;
+    }
+    if (arguments.length === 6) {
+        const [x, unitX, y, unitY, z, unitZ] = args;
+        if (typeof x === 'number' &&
+            typeof y === 'number' &&
+            typeof z === 'number') {
+            checkNumber({ num: x, param: 'x', api: 'translate3d' });
+            checkNumber({ num: y, param: 'y', api: 'translate3d' });
+            checkNumber({ num: z, param: 'z', api: 'translate3d' });
+            return `translate3d(${x}${unitX}, ${y}${unitY}, ${z}${unitZ})`;
+        }
+    }
+    throw new TypeError([
+        `translate3d() supports only the following signatures:`,
+        `translate3d(x: LengthPercentageUnitString, y: LengthPercentageUnitString, z: LengthPercentageUnitString)`,
+        `translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit)`,
+    ].join('\n'));
+}
+function translateX(x, unit = 'px') {
+    if (isUnitWithString(x, lengthPercentageUnits)) {
+        return `translateX(${x})`;
+    }
+    checkNumber({ num: x, param: 'x', api: 'translateX' });
+    return `translateX(${x}${unit})`;
+}
+function translateY(y, unit = 'px') {
+    if (isUnitWithString(y, lengthPercentageUnits)) {
+        return `translateY(${y})`;
+    }
+    checkNumber({ num: y, param: 'y', api: 'translateY' });
+    return `translateY(${y}${unit})`;
+}
+function translateZ(z, unit = 'px') {
+    if (isUnitWithString(z, lengthUnits)) {
+        return `translateZ(${z})`;
+    }
+    checkNumber({ num: z, param: 'z', api: 'translateZ' });
+    return `translateZ(${z}${unit})`;
+}
+
+function makeTransform(transforms) {
+    return transforms.join(' ');
+}
+
+export { interpolateStyles, makeTransform, matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ };

package/dist/esm/test/interpolate-styles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/make-transform.test.d.ts

@@ -0,0 +1 @@
+export {};