@junwan666/remotion-animation-utils 4.0.448-zh.0

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

@@ -0,0 +1,301 @@
+"use strict";
+/* eslint-disable no-redeclare */
+/* eslint-disable max-params */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matrix = matrix;
+exports.matrix3d = matrix3d;
+exports.perspective = perspective;
+exports.rotate = rotate;
+exports.rotate3d = rotate3d;
+exports.rotateX = rotateX;
+exports.rotateY = rotateY;
+exports.rotateZ = rotateZ;
+exports.scale = scale;
+exports.scale3d = scale3d;
+exports.scaleX = scaleX;
+exports.scaleY = scaleY;
+exports.scaleZ = scaleZ;
+exports.skew = skew;
+exports.skewX = skewX;
+exports.skewY = skewY;
+exports.translate = translate;
+exports.translate3d = translate3d;
+exports.translateX = translateX;
+exports.translateY = translateY;
+exports.translateZ = translateZ;
+const type_1 = require("../../type");
+const is_unit_with_string_1 = require("./is-unit-with-string");
+/* 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 ((0, is_unit_with_string_1.isUnitWithString)(length, type_1.lengthUnits)) {
+        return `perspective(${length})`;
+    }
+    checkNumber({ num: length, param: 'length', api: 'perspective' });
+    return `perspective(${length}${unit})`;
+}
+function rotate(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotateX(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateX' });
+    return `rotateX(${angle}${unit})`;
+}
+function rotateY(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotateY(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateY' });
+    return `rotateY(${angle}${unit})`;
+}
+function rotateZ(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.angleUnits) &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg2, type_1.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' &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg2, type_1.angleUnits) &&
+            typeof arg3 === 'number' &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg4, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `skewX(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'skewX' });
+    return `skewX(${angle}${unit})`;
+}
+function skewY(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.lengthPercentageUnits) &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg2, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(arg, type_1.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 ((0, is_unit_with_string_1.isUnitWithString)(x, type_1.lengthPercentageUnits)) {
+        return `translateX(${x})`;
+    }
+    checkNumber({ num: x, param: 'x', api: 'translateX' });
+    return `translateX(${x}${unit})`;
+}
+function translateY(y, unit = 'px') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(y, type_1.lengthPercentageUnits)) {
+        return `translateY(${y})`;
+    }
+    checkNumber({ num: y, param: 'y', api: 'translateY' });
+    return `translateY(${y}${unit})`;
+}
+function translateZ(z, unit = 'px') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(z, type_1.lengthUnits)) {
+        return `translateZ(${z})`;
+    }
+    checkNumber({ num: z, param: 'z', api: 'translateZ' });
+    return `translateZ(${z}${unit})`;
+}

package/dist/type.d.ts

@@ -0,0 +1,35 @@
+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;
+    oklch: MatcherType;
+    oklab: MatcherType;
+    lab: MatcherType;
+    lch: MatcherType;
+    hwb: MatcherType;
+};
+type Style = React.CSSProperties;
+type CSSPropertiesKey = keyof Style;
+type CSSPropertiesValue = Style[CSSPropertiesKey];
+type UnitNumberAndFunctions = ReturnType<typeof breakDownValueIntoUnitNumberAndFunctions>;
+type UnitNumberAndFunction = UnitNumberAndFunctions[0];
+export type { AngleUnit, ColorMatchers, CSSPropertiesKey, CSSPropertiesValue, LengthPercentageUnit, LengthUnit, Style, TransformFunctionReturnType, UnitNumberAndFunction, };

package/dist/type.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lengthPercentageUnits = exports.angleUnits = exports.lengthUnits = void 0;
+exports.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',
+];
+exports.angleUnits = ['rad', 'deg', 'grad', 'turn'];
+exports.lengthPercentageUnits = ['%', ...exports.lengthUnits];

package/package.json

@@ -0,0 +1,55 @@
+{
+	"repository": {
+		"url": "https://github.com/JunWan666/remotion-zh/tree/main/packages/animation-utils"
+	},
+	"name": "@junwan666/remotion-animation-utils",
+	"author": {
+		"name": "Chetan Karwa",
+		"email": "cbkarwa@gmail.com"
+	},
+	"version": "4.0.448-zh.0",
+	"description": "Helpers for animating CSS properties",
+	"main": "./dist/index.js",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"formatting": "oxfmt src --check",
+		"format": "oxfmt src",
+		"lint": "eslint src",
+		"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts",
+		"test": "bun test src"
+	},
+	"dependencies": {
+		"remotion": "npm:@junwan666/remotion@4.0.448-zh.0"
+	},
+	"files": [
+		"dist",
+		"!dist/test"
+	],
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "npm:@junwan666/remotion-eslint-config-internal@4.0.448-zh.0",
+		"eslint": "9.19.0",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
+	},
+	"exports": {
+		"./package.json": "./package.json",
+		".": {
+			"types": "./dist/index.d.ts",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs",
+			"require": "./dist/index.js"
+		}
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"keywords": [
+		"remotion",
+		"animation-utils"
+	],
+	"homepage": "https://www.remotion.dev/docs/animation-utils/"
+}