framer-motion 7.7.0 → 7.7.2

package/dist/es/value/index.mjs

@@ -1,4 +1,5 @@
-import sync, { getFrameData } from 'framesync';
+import { sync } from '../frameloop/index.mjs';
+import { frameData } from '../frameloop/data.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
 import { velocityPerSecond } from '../utils/velocity-per-second.mjs';
 
@@ -24,7 +25,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.7.0";
+        this.version = "7.7.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -67,7 +68,7 @@ class MotionValue {
             this.prev = this.current;
             this.current = v;
             // Update timestamp
-            const { delta, timestamp } = getFrameData();
+            const { delta, timestamp } = frameData;
             if (this.lastUpdated !== timestamp) {
                 this.timeDelta = delta;
                 this.lastUpdated = timestamp;

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

@@ -0,0 +1,40 @@
+import { rgba } from './rgba.mjs';
+import { isColorString } from './utils.mjs';
+
+function parseHex(v) {
+    let r = "";
+    let g = "";
+    let b = "";
+    let a = "";
+    // If we have 6 characters, ie #FF0000
+    if (v.length > 5) {
+        r = v.substring(1, 3);
+        g = v.substring(3, 5);
+        b = v.substring(5, 7);
+        a = v.substring(7, 9);
+        // Or we have 3 characters, ie #F00
+    }
+    else {
+        r = v.substring(1, 2);
+        g = v.substring(2, 3);
+        b = v.substring(3, 4);
+        a = v.substring(4, 5);
+        r += r;
+        g += g;
+        b += b;
+        a += a;
+    }
+    return {
+        red: parseInt(r, 16),
+        green: parseInt(g, 16),
+        blue: parseInt(b, 16),
+        alpha: a ? parseInt(a, 16) / 255 : 1,
+    };
+}
+const hex = {
+    test: isColorString("#"),
+    parse: parseHex,
+    transform: rgba.transform,
+};
+
+export { hex };

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

@@ -0,0 +1,22 @@
+import { alpha } from '../numbers/index.mjs';
+import { percent } from '../numbers/units.mjs';
+import { sanitize } from '../utils.mjs';
+import { isColorString, splitColor } from './utils.mjs';
+
+const hsla = {
+    test: isColorString("hsl", "hue"),
+    parse: splitColor("hue", "saturation", "lightness"),
+    transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+        return ("hsla(" +
+            Math.round(hue) +
+            ", " +
+            percent.transform(sanitize(saturation)) +
+            ", " +
+            percent.transform(sanitize(lightness)) +
+            ", " +
+            sanitize(alpha.transform(alpha$1)) +
+            ")");
+    },
+};
+
+export { hsla };

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

@@ -0,0 +1,28 @@
+import { isString } from '../utils.mjs';
+import { hex } from './hex.mjs';
+import { hsla } from './hsla.mjs';
+import { rgba } from './rgba.mjs';
+
+const color = {
+    test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+    parse: (v) => {
+        if (rgba.test(v)) {
+            return rgba.parse(v);
+        }
+        else if (hsla.test(v)) {
+            return hsla.parse(v);
+        }
+        else {
+            return hex.parse(v);
+        }
+    },
+    transform: (v) => {
+        return isString(v)
+            ? v
+            : v.hasOwnProperty("red")
+                ? rgba.transform(v)
+                : hsla.transform(v);
+    },
+};
+
+export { color };

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;
+    return (isNaN(v) &&
+        isString(v) &&
+        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
+            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 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) {
     /**