first commit

node_modules/motion-dom/dist/es/effects/style/index.mjs

@@ -0,0 +1,52 @@
+import { isCSSVar } from '../../render/dom/is-css-var.mjs';
+import { transformProps } from '../../render/utils/keys-transform.mjs';
+import { isHTMLElement } from '../../utils/is-html-element.mjs';
+import { MotionValue } from '../../value/index.mjs';
+import { createSelectorEffect } from '../utils/create-dom-effect.mjs';
+import { createEffect } from '../utils/create-effect.mjs';
+import { buildTransform } from './transform.mjs';
+
+const originProps = new Set(["originX", "originY", "originZ"]);
+const addStyleValue = (element, state, key, value) => {
+    let render = undefined;
+    let computed = undefined;
+    if (transformProps.has(key)) {
+        if (!state.get("transform")) {
+            // If this is an HTML element, we need to set the transform-box to fill-box
+            // to normalise the transform relative to the element's bounding box
+            if (!isHTMLElement(element) && !state.get("transformBox")) {
+                addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
+            }
+            state.set("transform", new MotionValue("none"), () => {
+                element.style.transform = buildTransform(state);
+            });
+        }
+        computed = state.get("transform");
+    }
+    else if (originProps.has(key)) {
+        if (!state.get("transformOrigin")) {
+            state.set("transformOrigin", new MotionValue(""), () => {
+                const originX = state.latest.originX ?? "50%";
+                const originY = state.latest.originY ?? "50%";
+                const originZ = state.latest.originZ ?? 0;
+                element.style.transformOrigin = `${originX} ${originY} ${originZ}`;
+            });
+        }
+        computed = state.get("transformOrigin");
+    }
+    else if (isCSSVar(key)) {
+        render = () => {
+            element.style.setProperty(key, state.latest[key]);
+        };
+    }
+    else {
+        render = () => {
+            element.style[key] = state.latest[key];
+        };
+    }
+    return state.set(key, value, render, computed);
+};
+const styleEffect = /*@__PURE__*/ createSelectorEffect(
+/*@__PURE__*/ createEffect(addStyleValue));
+
+export { addStyleValue, styleEffect };

node_modules/motion-dom/dist/es/effects/style/transform.mjs

@@ -0,0 +1,38 @@
+import { transformPropOrder } from '../../render/utils/keys-transform.mjs';
+
+const translateAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+    transformPerspective: "perspective",
+};
+function buildTransform(state) {
+    let transform = "";
+    let transformIsDefault = true;
+    /**
+     * Loop over all possible transforms in order, adding the ones that
+     * are present to the transform string.
+     */
+    for (let i = 0; i < transformPropOrder.length; i++) {
+        const key = transformPropOrder[i];
+        const value = state.latest[key];
+        if (value === undefined)
+            continue;
+        let valueIsDefault = true;
+        if (typeof value === "number") {
+            valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+        }
+        else {
+            valueIsDefault = parseFloat(value) === 0;
+        }
+        if (!valueIsDefault) {
+            transformIsDefault = false;
+            const transformName = translateAlias[key] || key;
+            const valueToRender = state.latest[key];
+            transform += `${transformName}(${valueToRender}) `;
+        }
+    }
+    return transformIsDefault ? "none" : transform.trim();
+}
+
+export { buildTransform };