main repo

node_modules/motion-dom/dist/es/utils/interpolate.mjs

@@ -0,0 +1,74 @@
+import { invariant, clamp, MotionGlobalConfig, noop, pipe, progress } from 'motion-utils';
+import { mix } from './mix/index.mjs';
+
+function createMixers(output, ease, customMixer) {
+    const mixers = [];
+    const mixerFactory = customMixer || MotionGlobalConfig.mix || 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 Revisit 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", "range-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 };

node_modules/motion-dom/dist/es/utils/is-html-element.mjs

@@ -0,0 +1,11 @@
+import { isObject } from 'motion-utils';
+
+/**
+ * Checks if an element is an HTML element in a way
+ * that works across iframes
+ */
+function isHTMLElement(element) {
+    return isObject(element) && "offsetHeight" in element;
+}
+
+export { isHTMLElement };

node_modules/motion-dom/dist/es/utils/is-svg-element.mjs

@@ -0,0 +1,11 @@
+import { isObject } from 'motion-utils';
+
+/**
+ * Checks if an element is an SVG element in a way
+ * that works across iframes
+ */
+function isSVGElement(element) {
+    return isObject(element) && "ownerSVGElement" in element;
+}
+
+export { isSVGElement };

node_modules/motion-dom/dist/es/utils/is-svg-svg-element.mjs

@@ -0,0 +1,11 @@
+import { isSVGElement } from './is-svg-element.mjs';
+
+/**
+ * Checks if an element is specifically an SVGSVGElement (the root SVG element)
+ * in a way that works across iframes
+ */
+function isSVGSVGElement(element) {
+    return isSVGElement(element) && element.tagName === "svg";
+}
+
+export { isSVGSVGElement };

node_modules/motion-dom/dist/es/utils/mix/color.mjs

@@ -0,0 +1,47 @@
+import { warning } from 'motion-utils';
+import { hex } from '../../value/types/color/hex.mjs';
+import { hsla } from '../../value/types/color/hsla.mjs';
+import { hslaToRgba } from '../../value/types/color/hsla-to-rgba.mjs';
+import { rgba } from '../../value/types/color/rgba.mjs';
+import { mixImmediate } from './immediate.mjs';
+import { mixNumber } from './number.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.`, "color-not-animatable");
+    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 };

node_modules/motion-dom/dist/es/utils/mix/complex.mjs

@@ -0,0 +1,92 @@
+import { pipe, warning } from 'motion-utils';
+import { isCSSVariableToken } from '../../animation/utils/is-css-variable.mjs';
+import { color } from '../../value/types/color/index.mjs';
+import { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';
+import { mixColor } from './color.mjs';
+import { mixImmediate } from './immediate.mjs';
+import { mixNumber as mixNumber$1 } from './number.mjs';
+import { invisibleValues, mixVisibility } from './visibility.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.`, "complex-values-different");
+        return mixImmediate(origin, target);
+    }
+};
+
+export { getMixer, mixArray, mixComplex, mixObject };

node_modules/motion-dom/dist/es/utils/mix/immediate.mjs

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

node_modules/motion-dom/dist/es/utils/mix/index.mjs

@@ -0,0 +1,14 @@
+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 };

node_modules/motion-dom/dist/es/utils/mix/number.mjs

@@ -0,0 +1,26 @@
+/*
+  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 };

node_modules/motion-dom/dist/es/utils/mix/visibility.mjs

@@ -0,0 +1,16 @@
+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 };

node_modules/motion-dom/dist/es/utils/resolve-elements.mjs

@@ -0,0 +1,17 @@
+function resolveElements(elementOrSelector, scope, selectorCache) {
+    if (elementOrSelector instanceof EventTarget) {
+        return [elementOrSelector];
+    }
+    else if (typeof elementOrSelector === "string") {
+        let root = document;
+        if (scope) {
+            root = scope.current;
+        }
+        const elements = selectorCache?.[elementOrSelector] ??
+            root.querySelectorAll(elementOrSelector);
+        return elements ? Array.from(elements) : [];
+    }
+    return Array.from(elementOrSelector);
+}
+
+export { resolveElements };

node_modules/motion-dom/dist/es/utils/stagger.mjs

@@ -0,0 +1,26 @@
+import { easingDefinitionToFunction } from 'motion-utils';
+
+function getOriginIndex(from, total) {
+    if (from === "first") {
+        return 0;
+    }
+    else {
+        const lastIndex = total - 1;
+        return from === "last" ? lastIndex : lastIndex / 2;
+    }
+}
+function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+    return (i, total) => {
+        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
+        const distance = Math.abs(fromIndex - i);
+        let delay = duration * distance;
+        if (ease) {
+            const maxDelay = total * duration;
+            const easingFunction = easingDefinitionToFunction(ease);
+            delay = easingFunction(delay / maxDelay) * maxDelay;
+        }
+        return startDelay + delay;
+    };
+}
+
+export { getOriginIndex, stagger };

node_modules/motion-dom/dist/es/utils/supports/flags.mjs

@@ -0,0 +1,7 @@
+/**
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
+ */
+const supportsFlags = {};
+
+export { supportsFlags };

node_modules/motion-dom/dist/es/utils/supports/linear-easing.mjs

@@ -0,0 +1,15 @@
+import { memoSupports } from './memo.mjs';
+
+const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+    try {
+        document
+            .createElement("div")
+            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}, "linearEasing");
+
+export { supportsLinearEasing };

node_modules/motion-dom/dist/es/utils/supports/memo.mjs

@@ -0,0 +1,9 @@
+import { memo } from 'motion-utils';
+import { supportsFlags } from './flags.mjs';
+
+function memoSupports(callback, supportsFlag) {
+    const memoized = memo(callback);
+    return () => supportsFlags[supportsFlag] ?? memoized();
+}
+
+export { memoSupports };

node_modules/motion-dom/dist/es/utils/supports/scroll-timeline.mjs

@@ -0,0 +1,5 @@
+import { memo } from 'motion-utils';
+
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
+
+export { supportsScrollTimeline };

node_modules/motion-dom/dist/es/utils/transform.mjs

@@ -0,0 +1,14 @@
+import { interpolate } from './interpolate.mjs';
+
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, options);
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
+export { transform };