framer-motion 12.7.3 → 12.7.5-alpha.0

package/dist/es/utils/hsla-to-rgba.mjs

@@ -1,42 +0,0 @@
-// Adapted from https://gist.github.com/mjackson/5311256
-function hueToRgb(p, q, t) {
-    if (t < 0)
-        t += 1;
-    if (t > 1)
-        t -= 1;
-    if (t < 1 / 6)
-        return p + (q - p) * 6 * t;
-    if (t < 1 / 2)
-        return q;
-    if (t < 2 / 3)
-        return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-}
-function hslaToRgba({ hue, saturation, lightness, alpha }) {
-    hue /= 360;
-    saturation /= 100;
-    lightness /= 100;
-    let red = 0;
-    let green = 0;
-    let blue = 0;
-    if (!saturation) {
-        red = green = blue = lightness;
-    }
-    else {
-        const q = lightness < 0.5
-            ? lightness * (1 + saturation)
-            : lightness + saturation - lightness * saturation;
-        const p = 2 * lightness - q;
-        red = hueToRgb(p, q, hue + 1 / 3);
-        green = hueToRgb(p, q, hue);
-        blue = hueToRgb(p, q, hue - 1 / 3);
-    }
-    return {
-        red: Math.round(red * 255),
-        green: Math.round(green * 255),
-        blue: Math.round(blue * 255),
-        alpha,
-    };
-}
-
-export { hslaToRgba };

package/dist/es/utils/interpolate.mjs

@@ -1,76 +0,0 @@
-import { invariant, noop, progress } from 'motion-utils';
-import { clamp } from './clamp.mjs';
-import { mix } from './mix/index.mjs';
-import { pipe } from './pipe.mjs';
-
-function createMixers(output, ease, customMixer) {
-    const mixers = [];
-    const mixerFactory = customMixer || mix;
-    const numMixers = output.length - 1;
-    for (let i = 0; i < numMixers; i++) {
-        let mixer = mixerFactory(output[i], output[i + 1]);
-        if (ease) {
-            const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
-            mixer = pipe(easingFunction, mixer);
-        }
-        mixers.push(mixer);
-    }
-    return mixers;
-}
-/**
- * Create a function that maps from a numerical input array to a generic output array.
- *
- * Accepts:
- *   - Numbers
- *   - Colors (hex, hsl, hsla, rgb, rgba)
- *   - Complex (combinations of one or more numbers or strings)
- *
- * ```jsx
- * const mixColor = interpolate([0, 1], ['#fff', '#000'])
- *
- * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
- * ```
- *
- * TODO Revist this approach once we've moved to data models for values,
- * probably not needed to pregenerate mixer functions.
- *
- * @public
- */
-function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
-    const inputLength = input.length;
-    invariant(inputLength === output.length, "Both input and output ranges must be the same length");
-    /**
-     * If we're only provided a single input, we can just make a function
-     * that returns the output.
-     */
-    if (inputLength === 1)
-        return () => output[0];
-    if (inputLength === 2 && output[0] === output[1])
-        return () => output[1];
-    const isZeroDeltaRange = input[0] === input[1];
-    // If input runs highest -> lowest, reverse both arrays
-    if (input[0] > input[inputLength - 1]) {
-        input = [...input].reverse();
-        output = [...output].reverse();
-    }
-    const mixers = createMixers(output, ease, mixer);
-    const numMixers = mixers.length;
-    const interpolator = (v) => {
-        if (isZeroDeltaRange && v < input[0])
-            return output[0];
-        let i = 0;
-        if (numMixers > 1) {
-            for (; i < input.length - 2; i++) {
-                if (v < input[i + 1])
-                    break;
-            }
-        }
-        const progressInRange = progress(input[i], input[i + 1], v);
-        return mixers[i](progressInRange);
-    };
-    return isClamp
-        ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
-        : interpolator;
-}
-
-export { interpolate };

package/dist/es/utils/is-numerical-string.mjs

@@ -1,6 +0,0 @@
-/**
- * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
- */
-const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
-
-export { isNumericalString };

package/dist/es/utils/is-zero-value-string.mjs

@@ -1,6 +0,0 @@
-/**
- * Check if the value is a zero value string like "0px" or "0%"
- */
-const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
-
-export { isZeroValueString };

package/dist/es/utils/mix/color.mjs

@@ -1,47 +0,0 @@
-import { mixNumber } from './number.mjs';
-import { warning } from 'motion-utils';
-import { hslaToRgba } from '../hsla-to-rgba.mjs';
-import { hex } from '../../value/types/color/hex.mjs';
-import { rgba } from '../../value/types/color/rgba.mjs';
-import { hsla } from '../../value/types/color/hsla.mjs';
-import { mixImmediate } from './immediate.mjs';
-
-// Linear color space blending
-// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
-// Demonstrated http://codepen.io/osublake/pen/xGVVaN
-const mixLinearColor = (from, to, v) => {
-    const fromExpo = from * from;
-    const expo = v * (to * to - fromExpo) + fromExpo;
-    return expo < 0 ? 0 : Math.sqrt(expo);
-};
-const colorTypes = [hex, rgba, hsla];
-const getColorType = (v) => colorTypes.find((type) => type.test(v));
-function asRGBA(color) {
-    const type = getColorType(color);
-    warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
-    if (!Boolean(type))
-        return false;
-    let model = type.parse(color);
-    if (type === hsla) {
-        // TODO Remove this cast - needed since Motion's stricter typing
-        model = hslaToRgba(model);
-    }
-    return model;
-}
-const mixColor = (from, to) => {
-    const fromRGBA = asRGBA(from);
-    const toRGBA = asRGBA(to);
-    if (!fromRGBA || !toRGBA) {
-        return mixImmediate(from, to);
-    }
-    const blended = { ...fromRGBA };
-    return (v) => {
-        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
-        blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
-        blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-        blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v);
-        return rgba.transform(blended);
-    };
-};
-
-export { mixColor, mixLinearColor };

package/dist/es/utils/mix/complex.mjs

@@ -1,93 +0,0 @@
-import { mixNumber as mixNumber$1 } from './number.mjs';
-import { mixColor } from './color.mjs';
-import { pipe } from '../pipe.mjs';
-import { warning } from 'motion-utils';
-import { color } from '../../value/types/color/index.mjs';
-import { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';
-import { isCSSVariableToken } from '../../render/dom/utils/is-css-variable.mjs';
-import { invisibleValues, mixVisibility } from './visibility.mjs';
-import { mixImmediate } from './immediate.mjs';
-
-function mixNumber(a, b) {
-    return (p) => mixNumber$1(a, b, p);
-}
-function getMixer(a) {
-    if (typeof a === "number") {
-        return mixNumber;
-    }
-    else if (typeof a === "string") {
-        return isCSSVariableToken(a)
-            ? mixImmediate
-            : color.test(a)
-                ? mixColor
-                : mixComplex;
-    }
-    else if (Array.isArray(a)) {
-        return mixArray;
-    }
-    else if (typeof a === "object") {
-        return color.test(a) ? mixColor : mixObject;
-    }
-    return mixImmediate;
-}
-function mixArray(a, b) {
-    const output = [...a];
-    const numValues = output.length;
-    const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
-    return (p) => {
-        for (let i = 0; i < numValues; i++) {
-            output[i] = blendValue[i](p);
-        }
-        return output;
-    };
-}
-function mixObject(a, b) {
-    const output = { ...a, ...b };
-    const blendValue = {};
-    for (const key in output) {
-        if (a[key] !== undefined && b[key] !== undefined) {
-            blendValue[key] = getMixer(a[key])(a[key], b[key]);
-        }
-    }
-    return (v) => {
-        for (const key in blendValue) {
-            output[key] = blendValue[key](v);
-        }
-        return output;
-    };
-}
-function matchOrder(origin, target) {
-    const orderedOrigin = [];
-    const pointers = { color: 0, var: 0, number: 0 };
-    for (let i = 0; i < target.values.length; i++) {
-        const type = target.types[i];
-        const originIndex = origin.indexes[type][pointers[type]];
-        const originValue = origin.values[originIndex] ?? 0;
-        orderedOrigin[i] = originValue;
-        pointers[type]++;
-    }
-    return orderedOrigin;
-}
-const mixComplex = (origin, target) => {
-    const template = complex.createTransformer(target);
-    const originStats = analyseComplexValue(origin);
-    const targetStats = analyseComplexValue(target);
-    const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&
-        originStats.indexes.color.length === targetStats.indexes.color.length &&
-        originStats.indexes.number.length >= targetStats.indexes.number.length;
-    if (canInterpolate) {
-        if ((invisibleValues.has(origin) &&
-            !targetStats.values.length) ||
-            (invisibleValues.has(target) &&
-                !originStats.values.length)) {
-            return mixVisibility(origin, target);
-        }
-        return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
-    }
-    else {
-        warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
-        return mixImmediate(origin, target);
-    }
-};
-
-export { getMixer, mixArray, mixComplex, mixObject };

package/dist/es/utils/mix/immediate.mjs

@@ -1,5 +0,0 @@
-function mixImmediate(a, b) {
-    return (p) => (p > 0 ? b : a);
-}
-
-export { mixImmediate };

package/dist/es/utils/mix/index.mjs

@@ -1,14 +0,0 @@
-import { getMixer } from './complex.mjs';
-import { mixNumber } from './number.mjs';
-
-function mix(from, to, p) {
-    if (typeof from === "number" &&
-        typeof to === "number" &&
-        typeof p === "number") {
-        return mixNumber(from, to, p);
-    }
-    const mixer = getMixer(from);
-    return mixer(from, to);
-}
-
-export { mix };

package/dist/es/utils/mix/number.mjs

@@ -1,26 +0,0 @@
-/*
-  Value in range from progress
-
-  Given a lower limit and an upper limit, we return the value within
-  that range as expressed by progress (usually a number from 0 to 1)
-
-  So progress = 0.5 would change
-
-  from -------- to
-
-  to
-
-  from ---- to
-
-  E.g. from = 10, to = 20, progress = 0.5 => 15
-
-  @param [number]: Lower limit of range
-  @param [number]: Upper limit of range
-  @param [number]: The progress between lower and upper limits expressed 0-1
-  @return [number]: Value as calculated from progress within range (not limited within range)
-*/
-const mixNumber = (from, to, progress) => {
-    return from + (to - from) * progress;
-};
-
-export { mixNumber };

package/dist/es/utils/mix/visibility.mjs

@@ -1,16 +0,0 @@
-const invisibleValues = new Set(["none", "hidden"]);
-/**
- * Returns a function that, when provided a progress value between 0 and 1,
- * will return the "none" or "hidden" string only when the progress is that of
- * the origin or target.
- */
-function mixVisibility(origin, target) {
-    if (invisibleValues.has(origin)) {
-        return (p) => (p <= 0 ? origin : target);
-    }
-    else {
-        return (p) => (p >= 1 ? target : origin);
-    }
-}
-
-export { invisibleValues, mixVisibility };

package/dist/es/utils/offsets/default.mjs

@@ -1,9 +0,0 @@
-import { fillOffset } from './fill.mjs';
-
-function defaultOffset(arr) {
-    const offset = [0];
-    fillOffset(offset, arr.length - 1);
-    return offset;
-}
-
-export { defaultOffset };

package/dist/es/utils/offsets/fill.mjs

@@ -1,12 +0,0 @@
-import { progress } from 'motion-utils';
-import { mixNumber } from '../mix/number.mjs';
-
-function fillOffset(offset, remaining) {
-    const min = offset[offset.length - 1];
-    for (let i = 1; i <= remaining; i++) {
-        const offsetProgress = progress(0, remaining, i);
-        offset.push(mixNumber(min, 1, offsetProgress));
-    }
-}
-
-export { fillOffset };

package/dist/es/utils/offsets/time.mjs

@@ -1,5 +0,0 @@
-function convertOffsetToTimes(offset, duration) {
-    return offset.map((o) => o * duration);
-}
-
-export { convertOffsetToTimes };

package/dist/es/utils/pipe.mjs

@@ -1,11 +0,0 @@
-/**
- * Pipe
- * Compose other transformers to run linearily
- * pipe(min(20), max(40))
- * @param  {...functions} transformers
- * @return {function}
- */
-const combineFunctions = (a, b) => (v) => b(a(v));
-const pipe = (...transformers) => transformers.reduce(combineFunctions);
-
-export { pipe };

package/dist/es/utils/use-instant-transition-state.mjs

@@ -1,5 +0,0 @@
-const instantAnimationState = {
-    current: false,
-};
-
-export { instantAnimationState };

package/dist/es/utils/wrap.mjs

@@ -1,6 +0,0 @@
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-export { wrap };

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

@@ -1,40 +0,0 @@
-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: /*@__PURE__*/ isColorString("#"),
-    parse: parseHex,
-    transform: rgba.transform,
-};
-
-export { hex };

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

@@ -1,22 +0,0 @@
-import { alpha } from '../numbers/index.mjs';
-import { percent } from '../numbers/units.mjs';
-import { sanitize } from '../utils/sanitize.mjs';
-import { isColorString, splitColor } from './utils.mjs';
-
-const hsla = {
-    test: /*@__PURE__*/ isColorString("hsl", "hue"),
-    parse: /*@__PURE__*/ 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

@@ -1,27 +0,0 @@
-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 typeof v === "string"
-            ? v
-            : v.hasOwnProperty("red")
-                ? rgba.transform(v)
-                : hsla.transform(v);
-    },
-};
-
-export { color };

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

@@ -1,25 +0,0 @@
-import { clamp } from '../../../utils/clamp.mjs';
-import { alpha, number } from '../numbers/index.mjs';
-import { sanitize } from '../utils/sanitize.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: /*@__PURE__*/ isColorString("rgb", "red"),
-    parse: /*@__PURE__*/ 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

@@ -1,29 +0,0 @@
-import { floatRegex } from '../utils/float-regex.mjs';
-import { isNullish } from '../utils/is-nullish.mjs';
-import { singleColorRegex } from '../utils/single-color-regex.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((typeof v === "string" &&
-        singleColorRegex.test(v) &&
-        v.startsWith(type)) ||
-        (testProp &&
-            !isNullish(v) &&
-            Object.prototype.hasOwnProperty.call(v, testProp)));
-};
-const splitColor = (aName, bName, cName) => (v) => {
-    if (typeof v !== "string")
-        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

@@ -1,30 +0,0 @@
-import { complex } from './index.mjs';
-import { floatRegex } from '../utils/float-regex.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 = /\b([a-z-]*)\(.*?\)/gu;
-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

@@ -1,91 +0,0 @@
-import { color } from '../color/index.mjs';
-import { colorRegex } from '../utils/color-regex.mjs';
-import { floatRegex } from '../utils/float-regex.mjs';
-import { sanitize } from '../utils/sanitize.mjs';
-
-function test(v) {
-    return (isNaN(v) &&
-        typeof v === "string" &&
-        (v.match(floatRegex)?.length || 0) +
-            (v.match(colorRegex)?.length || 0) >
-            0);
-}
-const NUMBER_TOKEN = "number";
-const COLOR_TOKEN = "color";
-const VAR_TOKEN = "var";
-const VAR_FUNCTION_TOKEN = "var(";
-const SPLIT_TOKEN = "${}";
-// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
-const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
-function analyseComplexValue(value) {
-    const originalValue = value.toString();
-    const values = [];
-    const indexes = {
-        color: [],
-        number: [],
-        var: [],
-    };
-    const types = [];
-    let i = 0;
-    const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
-        if (color.test(parsedValue)) {
-            indexes.color.push(i);
-            types.push(COLOR_TOKEN);
-            values.push(color.parse(parsedValue));
-        }
-        else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
-            indexes.var.push(i);
-            types.push(VAR_TOKEN);
-            values.push(parsedValue);
-        }
-        else {
-            indexes.number.push(i);
-            types.push(NUMBER_TOKEN);
-            values.push(parseFloat(parsedValue));
-        }
-        ++i;
-        return SPLIT_TOKEN;
-    });
-    const split = tokenised.split(SPLIT_TOKEN);
-    return { values, split, indexes, types };
-}
-function parseComplexValue(v) {
-    return analyseComplexValue(v).values;
-}
-function createTransformer(source) {
-    const { split, types } = analyseComplexValue(source);
-    const numSections = split.length;
-    return (v) => {
-        let output = "";
-        for (let i = 0; i < numSections; i++) {
-            output += split[i];
-            if (v[i] !== undefined) {
-                const type = types[i];
-                if (type === NUMBER_TOKEN) {
-                    output += sanitize(v[i]);
-                }
-                else if (type === COLOR_TOKEN) {
-                    output += color.transform(v[i]);
-                }
-                else {
-                    output += v[i];
-                }
-            }
-        }
-        return output;
-    };
-}
-const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
-function getAnimatableNone(v) {
-    const parsed = parseComplexValue(v);
-    const transformer = createTransformer(v);
-    return transformer(parsed.map(convertNumbersToZero));
-}
-const complex = {
-    test,
-    parse: parseComplexValue,
-    createTransformer,
-    getAnimatableNone,
-};
-
-export { analyseComplexValue, complex };