framer-motion 7.7.0 → 7.7.1

package/dist/es/value/types/color/rgba.mjs

@@ -0,0 +1,25 @@
+import { clamp } from '../../../utils/clamp.mjs';
+import { number, alpha } from '../numbers/index.mjs';
+import { sanitize } from '../utils.mjs';
+import { isColorString, splitColor } from './utils.mjs';
+
+const clampRgbUnit = (v) => clamp(0, 255, v);
+const rgbUnit = {
+    ...number,
+    transform: (v) => Math.round(clampRgbUnit(v)),
+};
+const rgba = {
+    test: isColorString("rgb", "red"),
+    parse: splitColor("red", "green", "blue"),
+    transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
+        rgbUnit.transform(red) +
+        ", " +
+        rgbUnit.transform(green) +
+        ", " +
+        rgbUnit.transform(blue) +
+        ", " +
+        sanitize(alpha.transform(alpha$1)) +
+        ")",
+};
+
+export { rgbUnit, rgba };

package/dist/es/value/types/color/utils.mjs

@@ -0,0 +1,23 @@
+import { isString, singleColorRegex, floatRegex } from '../utils.mjs';
+
+/**
+ * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+ * but false if a number or multiple colors
+ */
+const isColorString = (type, testProp) => (v) => {
+    return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+        (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
+};
+const splitColor = (aName, bName, cName) => (v) => {
+    if (!isString(v))
+        return v;
+    const [a, b, c, alpha] = v.match(floatRegex);
+    return {
+        [aName]: parseFloat(a),
+        [bName]: parseFloat(b),
+        [cName]: parseFloat(c),
+        alpha: alpha !== undefined ? parseFloat(alpha) : 1,
+    };
+};
+
+export { isColorString, splitColor };

package/dist/es/value/types/complex/filter.mjs

@@ -0,0 +1,30 @@
+import { complex } from './index.mjs';
+import { floatRegex } from '../utils.mjs';
+
+/**
+ * Properties that should default to 1 or 100%
+ */
+const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+function applyDefaultFilter(v) {
+    const [name, value] = v.slice(0, -1).split("(");
+    if (name === "drop-shadow")
+        return v;
+    const [number] = value.match(floatRegex) || [];
+    if (!number)
+        return v;
+    const unit = value.replace(number, "");
+    let defaultValue = maxDefaults.has(name) ? 1 : 0;
+    if (number !== value)
+        defaultValue *= 100;
+    return name + "(" + defaultValue + unit + ")";
+}
+const functionRegex = /([a-z-]*)\(.*?\)/g;
+const filter = {
+    ...complex,
+    getAnimatableNone: (v) => {
+        const functions = v.match(functionRegex);
+        return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+    },
+};
+
+export { filter };

package/dist/es/value/types/complex/index.mjs

@@ -0,0 +1,61 @@
+import { color } from '../color/index.mjs';
+import { number } from '../numbers/index.mjs';
+import { isString, floatRegex, colorRegex, sanitize } from '../utils.mjs';
+
+const colorToken = "${c}";
+const numberToken = "${n}";
+function test(v) {
+    var _a, _b, _c, _d;
+    return (isNaN(v) &&
+        isString(v) &&
+        ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) +
+            ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) >
+            0);
+}
+function analyseComplexValue(v) {
+    if (typeof v === "number")
+        v = `${v}`;
+    const values = [];
+    let numColors = 0;
+    let numNumbers = 0;
+    const colors = v.match(colorRegex);
+    if (colors) {
+        numColors = colors.length;
+        // Strip colors from input so they're not picked up by number regex.
+        // There's a better way to combine these regex searches, but its beyond my regex skills
+        v = v.replace(colorRegex, colorToken);
+        values.push(...colors.map(color.parse));
+    }
+    const numbers = v.match(floatRegex);
+    if (numbers) {
+        numNumbers = numbers.length;
+        v = v.replace(floatRegex, numberToken);
+        values.push(...numbers.map(number.parse));
+    }
+    return { values, numColors, numNumbers, tokenised: v };
+}
+function parse(v) {
+    return analyseComplexValue(v).values;
+}
+function createTransformer(source) {
+    const { values, numColors, tokenised } = analyseComplexValue(source);
+    const numValues = values.length;
+    return (v) => {
+        let output = tokenised;
+        for (let i = 0; i < numValues; i++) {
+            output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
+                ? color.transform(v[i])
+                : sanitize(v[i]));
+        }
+        return output;
+    };
+}
+const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+function getAnimatableNone(v) {
+    const parsed = parse(v);
+    const transformer = createTransformer(v);
+    return transformer(parsed.map(convertNumbersToZero));
+}
+const complex = { test, parse, createTransformer, getAnimatableNone };
+
+export { analyseComplexValue, complex };

package/dist/es/value/types/numbers/index.mjs

@@ -0,0 +1,17 @@
+import { clamp } from '../../../utils/clamp.mjs';
+
+const number = {
+    test: (v) => typeof v === "number",
+    parse: parseFloat,
+    transform: (v) => v,
+};
+const alpha = {
+    ...number,
+    transform: (v) => clamp(0, 1, v),
+};
+const scale = {
+    ...number,
+    default: 1,
+};
+
+export { alpha, number, scale };

package/dist/es/value/types/numbers/units.mjs

@@ -0,0 +1,19 @@
+import { isString } from '../utils.mjs';
+
+const createUnitType = (unit) => ({
+    test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`,
+});
+const degrees = createUnitType("deg");
+const percent = createUnitType("%");
+const px = createUnitType("px");
+const vh = createUnitType("vh");
+const vw = createUnitType("vw");
+const progressPercentage = {
+    ...percent,
+    parse: (v) => percent.parse(v) / 100,
+    transform: (v) => percent.transform(v * 100),
+};
+
+export { degrees, percent, progressPercentage, px, vh, vw };

package/dist/es/value/types/utils.mjs

@@ -0,0 +1,15 @@
+/**
+ * TODO: When we move from string as a source of truth to data models
+ * everything in this folder should probably be referred to as models vs types
+ */
+// If this number is a decimal, make it just five decimal places
+// to avoid exponents
+const sanitize = (v) => Math.round(v * 100000) / 100000;
+const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
+const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
+function isString(v) {
+    return typeof v === "string";
+}
+
+export { colorRegex, floatRegex, isString, sanitize, singleColorRegex };

package/dist/es/value/use-combine-values.mjs

@@ -1,6 +1,6 @@
 import { useMotionValue } from './use-motion-value.mjs';
 import { useMultiOnChange } from './use-on-change.mjs';
-import sync, { cancelSync } from 'framesync';
+import { cancelSync, sync } from '../frameloop/index.mjs';
 
 function useCombineMotionValues(values, combineValues) {
     /**