motion 12.18.0 → 12.18.2

package/dist/es/motion-dom/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/motion-dom/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/motion-dom/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 : color.test(v) ? color.getAnimatableNone(v) : 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 };

package/dist/es/motion-dom/dist/es/value/types/dimensions.mjs

@@ -1,15 +0,0 @@
-import { auto } from './auto.mjs';
-import { number } from './numbers/index.mjs';
-import { px, percent, degrees, vw, vh } from './numbers/units.mjs';
-import { testValueType } from './test.mjs';
-
-/**
- * A list of value types commonly used for dimensions
- */
-const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
-/**
- * Tests a dimensional value against the list of dimension ValueTypes
- */
-const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
-
-export { dimensionValueTypes, findDimensionValueType };

package/dist/es/motion-dom/dist/es/value/types/int.mjs

@@ -1,8 +0,0 @@
-import { number } from './numbers/index.mjs';
-
-const int = {
-    ...number,
-    transform: Math.round,
-};
-
-export { int };

package/dist/es/motion-dom/dist/es/value/types/maps/defaults.mjs

@@ -1,30 +0,0 @@
-import { color } from '../color/index.mjs';
-import { filter } from '../complex/filter.mjs';
-import { numberValueTypes } from './number.mjs';
-
-/**
- * A map of default value types for common values
- */
-const defaultValueTypes = {
-    ...numberValueTypes,
-    // Color props
-    color,
-    backgroundColor: color,
-    outlineColor: color,
-    fill: color,
-    stroke: color,
-    // Border props
-    borderColor: color,
-    borderTopColor: color,
-    borderRightColor: color,
-    borderBottomColor: color,
-    borderLeftColor: color,
-    filter,
-    WebkitFilter: filter,
-};
-/**
- * Gets the default ValueType for the provided value key
- */
-const getDefaultValueType = (key) => defaultValueTypes[key];
-
-export { defaultValueTypes, getDefaultValueType };

package/dist/es/motion-dom/dist/es/value/types/maps/number.mjs

@@ -1,50 +0,0 @@
-import { int } from '../int.mjs';
-import { alpha } from '../numbers/index.mjs';
-import { px } from '../numbers/units.mjs';
-import { transformValueTypes } from './transform.mjs';
-
-const numberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Misc
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-    ...transformValueTypes,
-    zIndex: int,
-    // SVG
-    fillOpacity: alpha,
-    strokeOpacity: alpha,
-    numOctaves: int,
-};
-
-export { numberValueTypes };

package/dist/es/motion-dom/dist/es/value/types/maps/transform.mjs

@@ -1,31 +0,0 @@
-import { scale, alpha } from '../numbers/index.mjs';
-import { degrees, px, progressPercentage } from '../numbers/units.mjs';
-
-const transformValueTypes = {
-    rotate: degrees,
-    rotateX: degrees,
-    rotateY: degrees,
-    rotateZ: degrees,
-    scale,
-    scaleX: scale,
-    scaleY: scale,
-    scaleZ: scale,
-    skew: degrees,
-    skewX: degrees,
-    skewY: degrees,
-    distance: px,
-    translateX: px,
-    translateY: px,
-    translateZ: px,
-    x: px,
-    y: px,
-    z: px,
-    perspective: px,
-    transformPerspective: px,
-    opacity: alpha,
-    originX: progressPercentage,
-    originY: progressPercentage,
-    originZ: px,
-};
-
-export { transformValueTypes };

package/dist/es/motion-dom/dist/es/value/types/numbers/index.mjs

@@ -1,17 +0,0 @@
-import { clamp } from '../../../../../../motion-utils/dist/es/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/motion-dom/dist/es/value/types/numbers/units.mjs

@@ -1,18 +0,0 @@
-/*#__NO_SIDE_EFFECTS__*/
-const createUnitType = (unit) => ({
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`,
-});
-const degrees = /*@__PURE__*/ createUnitType("deg");
-const percent = /*@__PURE__*/ createUnitType("%");
-const px = /*@__PURE__*/ createUnitType("px");
-const vh = /*@__PURE__*/ createUnitType("vh");
-const vw = /*@__PURE__*/ createUnitType("vw");
-const progressPercentage = /*@__PURE__*/ (() => ({
-    ...percent,
-    parse: (v) => percent.parse(v) / 100,
-    transform: (v) => percent.transform(v * 100),
-}))();
-
-export { degrees, percent, progressPercentage, px, vh, vw };

package/dist/es/motion-dom/dist/es/value/types/test.mjs

@@ -1,6 +0,0 @@
-/**
- * Tests a provided value against a ValueType
- */
-const testValueType = (v) => (type) => type.test(v);
-
-export { testValueType };

package/dist/es/motion-dom/dist/es/value/types/utils/animatable-none.mjs

@@ -1,15 +0,0 @@
-import { complex } from '../complex/index.mjs';
-import { filter } from '../complex/filter.mjs';
-import { getDefaultValueType } from '../maps/defaults.mjs';
-
-function getAnimatableNone(key, value) {
-    let defaultValueType = getDefaultValueType(key);
-    if (defaultValueType !== filter)
-        defaultValueType = complex;
-    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-    return defaultValueType.getAnimatableNone
-        ? defaultValueType.getAnimatableNone(value)
-        : undefined;
-}
-
-export { getAnimatableNone };

package/dist/es/motion-dom/dist/es/value/types/utils/color-regex.mjs

@@ -1,3 +0,0 @@
-const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
-
-export { colorRegex };

package/dist/es/motion-dom/dist/es/value/types/utils/find.mjs

@@ -1,15 +0,0 @@
-import { color } from '../color/index.mjs';
-import { complex } from '../complex/index.mjs';
-import { dimensionValueTypes } from '../dimensions.mjs';
-import { testValueType } from '../test.mjs';
-
-/**
- * A list of all ValueTypes
- */
-const valueTypes = [...dimensionValueTypes, color, complex];
-/**
- * Tests a value against the list of ValueTypes
- */
-const findValueType = (v) => valueTypes.find(testValueType(v));
-
-export { findValueType };

package/dist/es/motion-dom/dist/es/value/types/utils/float-regex.mjs

@@ -1,3 +0,0 @@
-const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
-
-export { floatRegex };

package/dist/es/motion-dom/dist/es/value/types/utils/get-as-type.mjs

@@ -1,10 +0,0 @@
-/**
- * Provided a value and a ValueType, returns the value as that value type.
- */
-const getValueAsType = (value, type) => {
-    return type && typeof value === "number"
-        ? type.transform(value)
-        : value;
-};
-
-export { getValueAsType };

package/dist/es/motion-dom/dist/es/value/types/utils/is-nullish.mjs

@@ -1,5 +0,0 @@
-function isNullish(v) {
-    return v == null;
-}
-
-export { isNullish };

package/dist/es/motion-dom/dist/es/value/types/utils/sanitize.mjs

@@ -1,5 +0,0 @@
-// If this number is a decimal, make it just five decimal places
-// to avoid exponents
-const sanitize = (v) => Math.round(v * 100000) / 100000;
-
-export { sanitize };

package/dist/es/motion-dom/dist/es/value/types/utils/single-color-regex.mjs

@@ -1,3 +0,0 @@
-const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
-
-export { singleColorRegex };

package/dist/es/motion-dom/dist/es/value/utils/is-motion-value.mjs

@@ -1,3 +0,0 @@
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-export { isMotionValue };

package/dist/es/motion-dom/dist/es/view/index.mjs

@@ -1,64 +0,0 @@
-import { addToQueue } from './queue.mjs';
-import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
-
-class ViewTransitionBuilder {
-    constructor(update, options = {}) {
-        this.currentTarget = "root";
-        this.targets = new Map();
-        this.notifyReady = noop;
-        this.readyPromise = new Promise((resolve) => {
-            this.notifyReady = resolve;
-        });
-        this.update = update;
-        this.options = {
-            interrupt: "wait",
-            ...options,
-        };
-        addToQueue(this);
-    }
-    get(selector) {
-        this.currentTarget = selector;
-        return this;
-    }
-    layout(keyframes, options) {
-        this.updateTarget("layout", keyframes, options);
-        return this;
-    }
-    new(keyframes, options) {
-        this.updateTarget("new", keyframes, options);
-        return this;
-    }
-    old(keyframes, options) {
-        this.updateTarget("old", keyframes, options);
-        return this;
-    }
-    enter(keyframes, options) {
-        this.updateTarget("enter", keyframes, options);
-        return this;
-    }
-    exit(keyframes, options) {
-        this.updateTarget("exit", keyframes, options);
-        return this;
-    }
-    crossfade(options) {
-        this.updateTarget("enter", { opacity: 1 }, options);
-        this.updateTarget("exit", { opacity: 0 }, options);
-        return this;
-    }
-    updateTarget(target, keyframes, options = {}) {
-        const { currentTarget, targets } = this;
-        if (!targets.has(currentTarget)) {
-            targets.set(currentTarget, {});
-        }
-        const targetData = targets.get(currentTarget);
-        targetData[target] = { keyframes, options };
-    }
-    then(resolve, reject) {
-        return this.readyPromise.then(resolve, reject);
-    }
-}
-function animateView(update, defaultOptions = {}) {
-    return new ViewTransitionBuilder(update, defaultOptions);
-}
-
-export { ViewTransitionBuilder, animateView };

package/dist/es/motion-dom/dist/es/view/queue.mjs

@@ -1,52 +0,0 @@
-import { microtask } from '../frameloop/microtask.mjs';
-import { startViewAnimation } from './start.mjs';
-import { removeItem } from '../../../../motion-utils/dist/es/array.mjs';
-
-let builders = [];
-let current = null;
-function next() {
-    current = null;
-    const [nextBuilder] = builders;
-    if (nextBuilder)
-        start(nextBuilder);
-}
-function start(builder) {
-    removeItem(builders, builder);
-    current = builder;
-    startViewAnimation(builder).then((animation) => {
-        builder.notifyReady(animation);
-        animation.finished.finally(next);
-    });
-}
-function processQueue() {
-    /**
-     * Iterate backwards over the builders array. We can ignore the
-     * "wait" animations. If we have an interrupting animation in the
-     * queue then we need to batch all preceeding animations into it.
-     * Currently this only batches the update functions but will also
-     * need to batch the targets.
-     */
-    for (let i = builders.length - 1; i >= 0; i--) {
-        const builder = builders[i];
-        const { interrupt } = builder.options;
-        if (interrupt === "immediate") {
-            const batchedUpdates = builders.slice(0, i + 1).map((b) => b.update);
-            const remaining = builders.slice(i + 1);
-            builder.update = () => {
-                batchedUpdates.forEach((update) => update());
-            };
-            // Put the current builder at the front, followed by any "wait" builders
-            builders = [builder, ...remaining];
-            break;
-        }
-    }
-    if (!current || builders[0]?.options.interrupt === "immediate") {
-        next();
-    }
-}
-function addToQueue(builder) {
-    builders.push(builder);
-    microtask.render(processQueue);
-}
-
-export { addToQueue };