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

package/dist/esm/index.mjs

@@ -0,0 +1,680 @@
+// src/transformation-helpers/interpolate-styles/index.tsx
+import { interpolate, interpolateColors } from "remotion";
+
+// src/transformation-helpers/interpolate-styles/utils.ts
+import { NoReactInternals } from "remotion/no-react";
+
+// src/transformation-helpers/interpolate-styles/constants.ts
+var NUMBER = "[-+]?\\d*\\.?\\d+";
+var PERCENTAGE = NUMBER + "%";
+
+// src/transformation-helpers/interpolate-styles/utils.ts
+function call(...args) {
+  return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
+}
+var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
+function modernColorCall(name) {
+  return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
+}
+function getColorMatchers() {
+  const cachedMatchers = {
+    rgb: undefined,
+    rgba: undefined,
+    hsl: undefined,
+    hsla: undefined,
+    hex3: undefined,
+    hex4: undefined,
+    hex5: undefined,
+    hex6: undefined,
+    hex8: undefined,
+    oklch: undefined,
+    oklab: undefined,
+    lab: undefined,
+    lch: undefined,
+    hwb: 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})$/;
+    cachedMatchers.oklch = modernColorCall("oklch");
+    cachedMatchers.oklab = modernColorCall("oklab");
+    cachedMatchers.lab = modernColorCall("lab");
+    cachedMatchers.lch = modernColorCall("lch");
+    cachedMatchers.hwb = modernColorCall("hwb");
+  }
+  return cachedMatchers;
+}
+var extractOrderedPartsOfValue = (value) => {
+  const parts = [];
+  let remainingValue = value;
+  while (remainingValue.length > 0) {
+    const functionMatch = remainingValue.match(/([a-zA-Z-]+)\(([^)]+)\)/);
+    if (functionMatch) {
+      const { index } = functionMatch;
+      const matchedFunction = functionMatch[0];
+      if ((index || 0) > 0) {
+        parts.push(...remainingValue.substring(0, index).trim().split(/\s+/));
+      }
+      parts.push(matchedFunction);
+      remainingValue = remainingValue.substring((index || 0) + matchedFunction.length);
+    } else {
+      parts.push(...remainingValue.trim().split(/\s+/));
+      break;
+    }
+  }
+  return parts.filter((part) => part !== "");
+};
+var 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());
+  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 };
+  });
+};
+var isColorValue = (value) => {
+  if (Object.keys(NoReactInternals.colorNames).includes(value)) {
+    return true;
+  }
+  const matchers = getColorMatchers();
+  return matchers.rgb?.test(value) || matchers.rgba?.test(value) || matchers.hsl?.test(value) || matchers.hsla?.test(value) || matchers.hex3?.test(value) || matchers.hex4?.test(value) || matchers.hex5?.test(value) || matchers.hex6?.test(value) || matchers.hex8?.test(value) || matchers.oklch?.test(value) || matchers.oklab?.test(value) || matchers.lab?.test(value) || matchers.lch?.test(value) || matchers.hwb?.test(value);
+};
+var classifyParts = (parts) => {
+  return parts.map((part) => {
+    if (isColorValue(part)) {
+      return { color: part };
+    }
+    const functionMatch = part.match(/([a-zA-Z-]+)\(([^)]+)\)/);
+    if (functionMatch) {
+      const functionName = functionMatch[1];
+      const functionValues = classifyArgsOfFunction(functionMatch[2]);
+      return { function: { name: functionName, values: functionValues } };
+    }
+    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 };
+    }
+    const numberMatch = part.match(/^(-?\d+(?:\.\d+)?)$/);
+    if (numberMatch) {
+      const number = parseFloat(numberMatch[1]);
+      return { number };
+    }
+    return { unit: part };
+  });
+};
+var breakDownValueIntoUnitNumberAndFunctions = (value) => {
+  if (typeof value === "number") {
+    return [{ number: value }];
+  }
+  if (typeof value !== "string") {
+    return [];
+  }
+  const valueParts = extractOrderedPartsOfValue(value);
+  return classifyParts(valueParts);
+};
+
+// src/transformation-helpers/interpolate-styles/index.tsx
+var interpolatedPropertyPart = ({
+  inputValue,
+  inputRange,
+  initialStylePropertyPart,
+  finalStylePropertyPart,
+  initialStyleProperty,
+  finalStyleProperty,
+  options
+}) => {
+  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?.function || initialStylePropertyPart.function.name !== finalStylePropertyPart.function?.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}`;
+};
+var 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);
+};
+var interpolateStylesFunction = ({
+  inputValue,
+  inputRange,
+  initialStyle,
+  finalStyle,
+  options
+}) => {
+  const [startingValue, endingValue] = inputRange;
+  return Object.keys(initialStyle).reduce((acc, key) => {
+    const value = finalStyle[key];
+    if (value === undefined || value === null) {
+      return {
+        ...acc,
+        [key]: initialStyle[key]
+      };
+    }
+    const finalStyleValue = interpolateProperty({
+      inputValue,
+      inputRange: [startingValue, endingValue],
+      initialStyleProperty: initialStyle[key],
+      finalStyleProperty: finalStyle[key],
+      options
+    });
+    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");
+    }
+  }
+}
+var interpolateStyles = (input, inputRange, outputStylesRange, options) => {
+  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 === -1) {
+    startIndex = 0;
+  }
+  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 = options?.easing ?? ((num) => num);
+  const extrapolateLeft = options?.extrapolateLeft ?? "extend";
+  const extrapolateRight = options?.extrapolateRight ?? "extend";
+  return interpolateStylesFunction({
+    inputValue: input,
+    inputRange: [startingValue, endingValue],
+    initialStyle,
+    finalStyle,
+    options: {
+      easing,
+      extrapolateLeft,
+      extrapolateRight
+    }
+  });
+};
+// src/type.ts
+var 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"
+];
+var angleUnits = ["rad", "deg", "grad", "turn"];
+var lengthPercentageUnits = ["%", ...lengthUnits];
+
+// src/transformation-helpers/make-transform/is-unit-with-string.ts
+var 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;
+};
+
+// src/transformation-helpers/make-transform/transform-functions.ts
+var 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})`;
+}
+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) {
+    if (isUnitWithString(arg1, angleUnits)) {
+      return `skew(${arg1}, ${arg1})`;
+    }
+    checkNumber({ num: arg1, param: "angle", api: "skew" });
+    return `skew(${arg1}deg, ${arg1}deg)`;
+  }
+  if (arguments.length === 2) {
+    if (isUnitWithString(arg1, angleUnits) && isUnitWithString(arg2, angleUnits)) {
+      return `skew(${arg1}, ${arg2})`;
+    }
+    if (typeof arg1 === "number" && typeof arg2 !== "number") {
+      checkNumber({ num: arg1, param: "angle", api: "skew" });
+      return `skew(${arg1}${arg2}, ${arg1}${arg2})`;
+    }
+    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) {
+    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(`
+`));
+}
+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) {
+    if (isUnitWithString(arg1, lengthPercentageUnits)) {
+      return `translate(${arg1})`;
+    }
+    checkNumber({ num: arg1, param: "x", api: "translate" });
+    return `translate(${arg1}px)`;
+  }
+  if (arguments.length === 2) {
+    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)`;
+    }
+    if (isUnitWithString(arg1, lengthPercentageUnits) && isUnitWithString(arg2, lengthPercentageUnits)) {
+      return `translate(${arg1}, ${arg2})`;
+    }
+    if (typeof arg1 === "number" && typeof arg2 !== "number") {
+      checkNumber({ num: arg1, param: "x", api: "translate" });
+      return `translate(${arg1}${arg2})`;
+    }
+  }
+  if (arguments.length === 4) {
+    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(`
+`));
+}
+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(`
+`));
+}
+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})`;
+}
+
+// src/transformation-helpers/make-transform/index.ts
+var makeTransform = (transforms) => {
+  return transforms.join(" ");
+};
+export {
+  translateZ,
+  translateY,
+  translateX,
+  translate3d,
+  translate,
+  skewY,
+  skewX,
+  skew,
+  scaleZ,
+  scaleY,
+  scaleX,
+  scale3d,
+  scale,
+  rotateZ,
+  rotateY,
+  rotateX,
+  rotate3d,
+  rotate,
+  perspective,
+  matrix3d,
+  matrix,
+  makeTransform,
+  interpolateStyles
+};

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);