@praxisjs/motion 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @praxisjs/motion
+
+## 0.1.0
+
+### Minor Changes
+
+- aaf7dab: Initial beta release
+
+### Patch Changes
+
+- Updated dependencies [aaf7dab]
+  - @praxisjs/core@0.1.0
+  - @praxisjs/shared@0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present Mateus Martins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/decorators.d.ts

@@ -0,0 +1,3 @@
+import { type TweenOptions } from "./tween";
+export declare function Animate(options?: TweenOptions): (target: object, propertyKey: string) => void;
+//# sourceMappingURL=decorators.d.ts.map

package/dist/decorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../src/decorators.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAc,MAAM,SAAS,CAAC;AAE/D,wBAAgB,OAAO,CAAC,OAAO,GAAE,YAAiB,IAC/B,QAAQ,MAAM,EAAE,aAAa,MAAM,KAAG,IAAI,CAiB5D"}

package/dist/decorators.js

@@ -0,0 +1,21 @@
+import { tween } from "./tween";
+export function Animate(options = {}) {
+    return function (target, propertyKey) {
+        const tweens = new WeakMap();
+        const original = Object.getOwnPropertyDescriptor(target, propertyKey);
+        Object.defineProperty(target, propertyKey, {
+            get() {
+                return tweens.get(this)?.value() ?? 0;
+            },
+            set(value) {
+                if (!tweens.has(this))
+                    tweens.set(this, tween(value, value, options));
+                tweens.get(this)?.target.set(value);
+                original?.set?.call(this, value);
+            },
+            enumerable: true,
+            configurable: true,
+        });
+    };
+}
+//# sourceMappingURL=decorators.js.map

package/dist/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../src/decorators.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAiC,MAAM,SAAS,CAAC;AAE/D,MAAM,UAAU,OAAO,CAAC,UAAwB,EAAE;IAChD,OAAO,UAAU,MAAc,EAAE,WAAmB;QAClD,MAAM,MAAM,GAAG,IAAI,OAAO,EAAiB,CAAC;QAC5C,MAAM,QAAQ,GAAG,MAAM,CAAC,wBAAwB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QAEtE,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE;YACzC,GAAG;gBACD,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;YACxC,CAAC;YACD,GAAG,CAAe,KAAa;gBAC7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;oBAAE,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;gBACtE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACpC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACnC,CAAC;YACD,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI;SACnB,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/dist/easings.d.ts

@@ -0,0 +1,12 @@
+export declare const easings: {
+    linear: (t: number) => number;
+    easeIn: (t: number) => number;
+    easeOut: (t: number) => number;
+    easeInOut: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    bounce: (t: number) => number;
+    elastic: (t: number) => number;
+};
+export type Easing = keyof typeof easings | ((t: number) => number);
+export declare function resolveEasing(easing: Easing): (t: number) => number;
+//# sourceMappingURL=easings.d.ts.map

package/dist/easings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"easings.d.ts","sourceRoot":"","sources":["../src/easings.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;gBACN,MAAM;gBACN,MAAM;iBACL,MAAM;mBACJ,MAAM;qBACJ,MAAM;gBACX,MAAM;iBAQL,MAAM;CAM4B,CAAC;AAElD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAEpE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAEnE"}

package/dist/easings.js

@@ -0,0 +1,26 @@
+export const easings = {
+    linear: (t) => t,
+    easeIn: (t) => t * t,
+    easeOut: (t) => 1 - (1 - t) ** 2,
+    easeInOut: (t) => (t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2),
+    easeInCubic: (t) => t * t * t,
+    bounce: (t) => {
+        const n1 = 7.5625, d1 = 2.75;
+        if (t < 1 / d1)
+            return n1 * t * t;
+        if (t < 2 / d1)
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        if (t < 2.5 / d1)
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    },
+    elastic: (t) => {
+        if (t === 0 || t === 1)
+            return t;
+        return (-(2 ** (10 * t - 10)) * Math.sin((t * 10 - 10.75) * ((2 * Math.PI) / 3)));
+    },
+};
+export function resolveEasing(easing) {
+    return typeof easing === "function" ? easing : easings[easing];
+}
+//# sourceMappingURL=easings.js.map

package/dist/easings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"easings.js","sourceRoot":"","sources":["../src/easings.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC;IACxB,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC;IAC5B,OAAO,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3E,WAAW,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;IACrC,MAAM,EAAE,CAAC,CAAS,EAAE,EAAE;QACpB,MAAM,EAAE,GAAG,MAAM,EACf,EAAE,GAAG,IAAI,CAAC;QACZ,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE;YAAE,OAAO,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE;YAAE,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;QACvD,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;YAAE,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;QAC5D,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,CAAC,CAAS,EAAE,EAAE;QACrB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QACjC,OAAO,CACL,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CACzE,CAAC;IACJ,CAAC;CAC8C,CAAC;AAIlD,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,OAAO,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AACjE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { easings, resolveEasing } from "./easings";
+export type { Easing } from "./easings";
+export { tween } from "./tween";
+export type { Tween, TweenOptions } from "./tween";
+export { spring } from "./spring";
+export type { SpringOptions } from "./spring";
+export { useMotion } from "./use-motion";
+export type { MotionKeyframes } from "./use-motion";
+export { createTransition } from "./transition";
+export type { TransitionOptions } from "./transition";
+export { Animate } from "./decorators";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACnD,YAAY,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export { easings, resolveEasing } from "./easings";
+export { tween } from "./tween";
+export { spring } from "./spring";
+export { useMotion } from "./use-motion";
+export { createTransition } from "./transition";
+export { Animate } from "./decorators";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAGnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/spring.d.ts

@@ -0,0 +1,12 @@
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    precision?: number;
+}
+export declare function spring(initial: number, options?: SpringOptions): {
+    value: import("@praxisjs/shared").Computed<number>;
+    target: import("@praxisjs/shared").Signal<number>;
+    stop(): void;
+};
+//# sourceMappingURL=spring.d.ts.map

package/dist/spring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;;;;EA2ClE"}

package/dist/spring.js

@@ -0,0 +1,38 @@
+import { signal, computed, effect } from "@praxisjs/core";
+export function spring(initial, options = {}) {
+    const { stiffness = 0.15, damping = 0.8, mass = 1, precision = 0.001, } = options;
+    const _value = signal(initial);
+    const _target = signal(initial);
+    let velocity = 0;
+    let raf;
+    function tick() {
+        const current = _value();
+        const target = _target();
+        const force = (target - current) * stiffness;
+        velocity = (velocity + force / mass) * damping;
+        const next = current + velocity;
+        _value.set(next);
+        if (Math.abs(target - next) > precision || Math.abs(velocity) > precision) {
+            raf = requestAnimationFrame(tick);
+        }
+        else {
+            _value.set(target);
+            velocity = 0;
+        }
+    }
+    effect(() => {
+        void _target();
+        if (raf)
+            cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(tick);
+    });
+    return {
+        value: computed(() => _value()),
+        target: _target,
+        stop() {
+            if (raf)
+                cancelAnimationFrame(raf);
+        },
+    };
+}
+//# sourceMappingURL=spring.js.map

package/dist/spring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring.js","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAS1D,MAAM,UAAU,MAAM,CAAC,OAAe,EAAE,UAAyB,EAAE;IACjE,MAAM,EACJ,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,GAAG,EACb,IAAI,GAAG,CAAC,EACR,SAAS,GAAG,KAAK,GAClB,GAAG,OAAO,CAAC;IAEZ,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,GAAuB,CAAC;IAE5B,SAAS,IAAI;QACX,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,GAAG,SAAS,CAAC;QAC7C,QAAQ,GAAG,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,OAAO,CAAC;QAE/C,MAAM,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;QAChC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAEjB,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,EAAE,CAAC;YAC1E,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACnB,QAAQ,GAAG,CAAC,CAAC;QACf,CAAC;IACH,CAAC;IAED,MAAM,CAAC,GAAG,EAAE;QACV,KAAK,OAAO,EAAE,CAAC;QACf,IAAI,GAAG;YAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC;QACnC,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;QAC/B,MAAM,EAAE,OAAO;QACf,IAAI;YACF,IAAI,GAAG;gBAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC;QACrC,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/transition.d.ts

@@ -0,0 +1,11 @@
+export interface TransitionOptions {
+    name?: string;
+    duration?: number;
+    onEnter?: (el: HTMLElement) => void;
+    onLeave?: (el: HTMLElement) => void;
+}
+export declare function createTransition(options?: TransitionOptions): {
+    enter(el: HTMLElement): Promise<void>;
+    leave(el: HTMLElement): Promise<void>;
+};
+//# sourceMappingURL=transition.d.ts.map

package/dist/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../src/transition.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,iBAAsB;cAIlD,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;cAc3B,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;EAexC"}

package/dist/transition.js

@@ -0,0 +1,30 @@
+export function createTransition(options = {}) {
+    const { name = "transition", duration = 300, onEnter, onLeave } = options;
+    return {
+        enter(el) {
+            onEnter?.(el);
+            el.classList.add(`${name}-enter-from`);
+            requestAnimationFrame(() => {
+                el.classList.remove(`${name}-enter-from`);
+                el.classList.add(`${name}-enter-to`);
+            });
+            return new Promise((res) => setTimeout(() => {
+                el.classList.remove(`${name}-enter-to`);
+                res();
+            }, duration));
+        },
+        leave(el) {
+            onLeave?.(el);
+            el.classList.add(`${name}-leave-from`);
+            requestAnimationFrame(() => {
+                el.classList.remove(`${name}-leave-from`);
+                el.classList.add(`${name}-leave-to`);
+            });
+            return new Promise((res) => setTimeout(() => {
+                el.classList.remove(`${name}-leave-to`);
+                res();
+            }, duration));
+        },
+    };
+}
+//# sourceMappingURL=transition.js.map

package/dist/transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.js","sourceRoot":"","sources":["../src/transition.ts"],"names":[],"mappings":"AAOA,MAAM,UAAU,gBAAgB,CAAC,UAA6B,EAAE;IAC9D,MAAM,EAAE,IAAI,GAAG,YAAY,EAAE,QAAQ,GAAG,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAE1E,OAAO;QACL,KAAK,CAAC,EAAe;YACnB,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACd,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC;YACvC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC;gBAC1C,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;YACH,OAAO,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CACzB,UAAU,CAAC,GAAG,EAAE;gBACd,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC;gBACxC,GAAG,EAAE,CAAC;YACR,CAAC,EAAE,QAAQ,CAAC,CACb,CAAC;QACJ,CAAC;QACD,KAAK,CAAC,EAAe;YACnB,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACd,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC;YACvC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC;gBAC1C,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;YACH,OAAO,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CACzB,UAAU,CAAC,GAAG,EAAE;gBACd,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,WAAW,CAAC,CAAC;gBACxC,GAAG,EAAE,CAAC;YACR,CAAC,EAAE,QAAQ,CAAC,CACb,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/tween.d.ts

@@ -0,0 +1,17 @@
+import type { Computed, Signal } from "@praxisjs/shared";
+import { type Easing } from "./easings";
+export interface TweenOptions {
+    duration?: number;
+    easing?: Easing;
+    delay?: number;
+}
+export interface Tween {
+    value: Computed<number>;
+    target: Signal<number>;
+    playing: Computed<boolean>;
+    progress: Computed<number>;
+    stop(): void;
+    reset(): void;
+}
+export declare function tween(from: number, to: number, options?: TweenOptions): Tween;
+//# sourceMappingURL=tween.d.ts.map

package/dist/tween.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tween.d.ts","sourceRoot":"","sources":["../src/tween.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACvB,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,KAAK,CACnB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,YAAiB,GACzB,KAAK,CAyDP"}

package/dist/tween.js

@@ -0,0 +1,57 @@
+import { signal, computed, effect } from "@praxisjs/core";
+import { resolveEasing } from "./easings";
+export function tween(from, to, options = {}) {
+    const { duration = 300, easing = "easeOut", delay = 0 } = options;
+    const easeFn = resolveEasing(easing);
+    const _value = signal(from);
+    const _target = signal(to);
+    const _progress = signal(0);
+    const _playing = signal(false);
+    let raf;
+    let startTime;
+    let startValue = from;
+    function animate(timestamp) {
+        startTime ??= timestamp + delay;
+        const elapsed = Math.max(0, timestamp - startTime);
+        const t = Math.min(elapsed / duration, 1);
+        _progress.set(t);
+        _value.set(startValue + (_target() - startValue) * easeFn(t));
+        if (t < 1) {
+            raf = requestAnimationFrame(animate);
+        }
+        else {
+            _value.set(_target());
+            _playing.set(false);
+        }
+    }
+    function start() {
+        if (raf)
+            cancelAnimationFrame(raf);
+        startValue = _value();
+        startTime = undefined;
+        _playing.set(true);
+        raf = requestAnimationFrame(animate);
+    }
+    effect(() => {
+        void _target();
+        start();
+    });
+    return {
+        value: computed(() => _value()),
+        target: _target,
+        playing: computed(() => _playing()),
+        progress: computed(() => _progress()),
+        stop() {
+            if (raf)
+                cancelAnimationFrame(raf);
+            _playing.set(false);
+        },
+        reset() {
+            if (raf)
+                cancelAnimationFrame(raf);
+            _value.set(from);
+            _progress.set(0);
+        },
+    };
+}
+//# sourceMappingURL=tween.js.map

package/dist/tween.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tween.js","sourceRoot":"","sources":["../src/tween.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAE,aAAa,EAAe,MAAM,WAAW,CAAC;AAiBvD,MAAM,UAAU,KAAK,CACnB,IAAY,EACZ,EAAU,EACV,UAAwB,EAAE;IAE1B,MAAM,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC;IAClE,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAErC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,GAAuB,CAAC;IAC5B,IAAI,SAA6B,CAAC;IAClC,IAAI,UAAU,GAAG,IAAI,CAAC;IAEtB,SAAS,OAAO,CAAC,SAAiB;QAChC,SAAS,KAAK,SAAS,GAAG,KAAK,CAAC;QAChC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;QACnD,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;QAE1C,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjB,MAAM,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAE9D,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACV,GAAG,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;YACtB,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,SAAS,KAAK;QACZ,IAAI,GAAG;YAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC;QACnC,UAAU,GAAG,MAAM,EAAE,CAAC;QACtB,SAAS,GAAG,SAAS,CAAC;QACtB,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACnB,GAAG,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,GAAG,EAAE;QACV,KAAK,OAAO,EAAE,CAAC;QACf,KAAK,EAAE,CAAC;IACV,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;QAC/B,MAAM,EAAE,OAAO;QACf,OAAO,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;QACnC,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;QACrC,IAAI;YACF,IAAI,GAAG;gBAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC;YACnC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QACD,KAAK;YACH,IAAI,GAAG;gBAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC;YACnC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACjB,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/use-motion.d.ts

@@ -0,0 +1,20 @@
+import { type Easing } from "./easings";
+export interface MotionKeyframes {
+    opacity?: [number, number];
+    x?: [number, number];
+    y?: [number, number];
+    scale?: [number, number];
+    rotate?: [number, number];
+    duration?: number;
+    easing?: Easing;
+    delay?: number;
+    onComplete?: () => void;
+}
+export declare function useMotion(ref: {
+    current: HTMLElement | null;
+}): {
+    animate: (keyframes: MotionKeyframes) => () => void;
+    enter: (kf: MotionKeyframes) => () => void;
+    exit: (kf: MotionKeyframes) => () => void;
+};
+//# sourceMappingURL=use-motion.d.ts.map

package/dist/use-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion.d.ts","sourceRoot":"","sources":["../src/use-motion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE;IAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE;yBAChC,eAAe,KAAG,MAAM,IAAI;gBAgE1C,eAAe,WAhEuB,IAAI;eAiE3C,eAAe,WAjEwB,IAAI;EAyEzD"}

package/dist/use-motion.js

@@ -0,0 +1,58 @@
+import { resolveEasing } from "./easings";
+export function useMotion(ref) {
+    function animate(keyframes) {
+        const el = ref.current;
+        if (!el)
+            return () => undefined;
+        const safeEl = el;
+        const { opacity, x, y, scale, rotate, duration = 300, easing = "easeOut", delay = 0, onComplete, } = keyframes;
+        const easeFn = resolveEasing(easing);
+        let raf;
+        let startTime;
+        let cancelled = false;
+        function frame(ts) {
+            if (cancelled)
+                return;
+            startTime ??= ts + delay;
+            const elapsed = Math.max(0, ts - startTime);
+            const t = Math.min(elapsed / duration, 1);
+            const e = easeFn(t);
+            const transforms = [];
+            if (x)
+                transforms.push(`translateX(${String(x[0] + (x[1] - x[0]) * e)}px)`);
+            if (y)
+                transforms.push(`translateY(${String(y[0] + (y[1] - y[0]) * e)}px)`);
+            if (scale)
+                transforms.push(`scale(${String(scale[0] + (scale[1] - scale[0]) * e)})`);
+            if (rotate)
+                transforms.push(`rotate(${String(rotate[0] + (rotate[1] - rotate[0]) * e)}deg)`);
+            if (transforms.length)
+                safeEl.style.transform = transforms.join(" ");
+            if (opacity)
+                safeEl.style.opacity = String(opacity[0] + (opacity[1] - opacity[0]) * e);
+            if (t < 1) {
+                raf = requestAnimationFrame(frame);
+            }
+            else {
+                onComplete?.();
+            }
+        }
+        raf = requestAnimationFrame(frame);
+        return () => {
+            cancelled = true;
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    }
+    return {
+        animate,
+        enter: (kf) => animate(kf),
+        exit: (kf) => animate({
+            ...kf,
+            opacity: kf.opacity ? [kf.opacity[1], kf.opacity[0]] : undefined,
+            x: kf.x ? [kf.x[1], kf.x[0]] : undefined,
+            y: kf.y ? [kf.y[1], kf.y[0]] : undefined,
+        }),
+    };
+}
+//# sourceMappingURL=use-motion.js.map

package/dist/use-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion.js","sourceRoot":"","sources":["../src/use-motion.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@praxisjs/motion",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@praxisjs/core": "0.1.0",
+    "@praxisjs/shared": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}

package/src/decorators.ts

@@ -0,0 +1,21 @@
+import { tween, type TweenOptions, type Tween } from "./tween";
+
+export function Animate(options: TweenOptions = {}) {
+  return function (target: object, propertyKey: string): void {
+    const tweens = new WeakMap<object, Tween>();
+    const original = Object.getOwnPropertyDescriptor(target, propertyKey);
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: object): number {
+        return tweens.get(this)?.value() ?? 0;
+      },
+      set(this: object, value: number): void {
+        if (!tweens.has(this)) tweens.set(this, tween(value, value, options));
+        tweens.get(this)?.target.set(value);
+        original?.set?.call(this, value);
+      },
+      enumerable: true,
+      configurable: true,
+    });
+  };
+}

package/src/easings.ts

@@ -0,0 +1,27 @@
+export const easings = {
+  linear: (t: number) => t,
+  easeIn: (t: number) => t * t,
+  easeOut: (t: number) => 1 - (1 - t) ** 2,
+  easeInOut: (t: number) => (t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2),
+  easeInCubic: (t: number) => t * t * t,
+  bounce: (t: number) => {
+    const n1 = 7.5625,
+      d1 = 2.75;
+    if (t < 1 / d1) return n1 * t * t;
+    if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
+    if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    return n1 * (t -= 2.625 / d1) * t + 0.984375;
+  },
+  elastic: (t: number) => {
+    if (t === 0 || t === 1) return t;
+    return (
+      -(2 ** (10 * t - 10)) * Math.sin((t * 10 - 10.75) * ((2 * Math.PI) / 3))
+    );
+  },
+} satisfies Record<string, (t: number) => number>;
+
+export type Easing = keyof typeof easings | ((t: number) => number);
+
+export function resolveEasing(easing: Easing): (t: number) => number {
+  return typeof easing === "function" ? easing : easings[easing];
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export { easings, resolveEasing } from "./easings";
+export type { Easing } from "./easings";
+
+export { tween } from "./tween";
+export type { Tween, TweenOptions } from "./tween";
+
+export { spring } from "./spring";
+export type { SpringOptions } from "./spring";
+
+export { useMotion } from "./use-motion";
+export type { MotionKeyframes } from "./use-motion";
+
+export { createTransition } from "./transition";
+export type { TransitionOptions } from "./transition";
+
+export { Animate } from "./decorators";

package/src/spring.ts

@@ -0,0 +1,53 @@
+import { signal, computed, effect } from "@praxisjs/core";
+
+export interface SpringOptions {
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+  precision?: number;
+}
+
+export function spring(initial: number, options: SpringOptions = {}) {
+  const {
+    stiffness = 0.15,
+    damping = 0.8,
+    mass = 1,
+    precision = 0.001,
+  } = options;
+
+  const _value = signal(initial);
+  const _target = signal(initial);
+  let velocity = 0;
+  let raf: number | undefined;
+
+  function tick() {
+    const current = _value();
+    const target = _target();
+    const force = (target - current) * stiffness;
+    velocity = (velocity + force / mass) * damping;
+
+    const next = current + velocity;
+    _value.set(next);
+
+    if (Math.abs(target - next) > precision || Math.abs(velocity) > precision) {
+      raf = requestAnimationFrame(tick);
+    } else {
+      _value.set(target);
+      velocity = 0;
+    }
+  }
+
+  effect(() => {
+    void _target();
+    if (raf) cancelAnimationFrame(raf);
+    raf = requestAnimationFrame(tick);
+  });
+
+  return {
+    value: computed(() => _value()),
+    target: _target,
+    stop() {
+      if (raf) cancelAnimationFrame(raf);
+    },
+  };
+}

package/src/transition.ts

@@ -0,0 +1,41 @@
+export interface TransitionOptions {
+  name?: string;
+  duration?: number;
+  onEnter?: (el: HTMLElement) => void;
+  onLeave?: (el: HTMLElement) => void;
+}
+
+export function createTransition(options: TransitionOptions = {}) {
+  const { name = "transition", duration = 300, onEnter, onLeave } = options;
+
+  return {
+    enter(el: HTMLElement): Promise<void> {
+      onEnter?.(el);
+      el.classList.add(`${name}-enter-from`);
+      requestAnimationFrame(() => {
+        el.classList.remove(`${name}-enter-from`);
+        el.classList.add(`${name}-enter-to`);
+      });
+      return new Promise((res) =>
+        setTimeout(() => {
+          el.classList.remove(`${name}-enter-to`);
+          res();
+        }, duration),
+      );
+    },
+    leave(el: HTMLElement): Promise<void> {
+      onLeave?.(el);
+      el.classList.add(`${name}-leave-from`);
+      requestAnimationFrame(() => {
+        el.classList.remove(`${name}-leave-from`);
+        el.classList.add(`${name}-leave-to`);
+      });
+      return new Promise((res) =>
+        setTimeout(() => {
+          el.classList.remove(`${name}-leave-to`);
+          res();
+        }, duration),
+      );
+    },
+  };
+}

package/src/tween.ts

@@ -0,0 +1,82 @@
+import { signal, computed, effect } from "@praxisjs/core";
+import type { Computed, Signal } from "@praxisjs/shared";
+
+import { resolveEasing, type Easing } from "./easings";
+
+export interface TweenOptions {
+  duration?: number;
+  easing?: Easing;
+  delay?: number;
+}
+
+export interface Tween {
+  value: Computed<number>;
+  target: Signal<number>;
+  playing: Computed<boolean>;
+  progress: Computed<number>;
+  stop(): void;
+  reset(): void;
+}
+
+export function tween(
+  from: number,
+  to: number,
+  options: TweenOptions = {},
+): Tween {
+  const { duration = 300, easing = "easeOut", delay = 0 } = options;
+  const easeFn = resolveEasing(easing);
+
+  const _value = signal(from);
+  const _target = signal(to);
+  const _progress = signal(0);
+  const _playing = signal(false);
+
+  let raf: number | undefined;
+  let startTime: number | undefined;
+  let startValue = from;
+
+  function animate(timestamp: number) {
+    startTime ??= timestamp + delay;
+    const elapsed = Math.max(0, timestamp - startTime);
+    const t = Math.min(elapsed / duration, 1);
+
+    _progress.set(t);
+    _value.set(startValue + (_target() - startValue) * easeFn(t));
+
+    if (t < 1) {
+      raf = requestAnimationFrame(animate);
+    } else {
+      _value.set(_target());
+      _playing.set(false);
+    }
+  }
+
+  function start() {
+    if (raf) cancelAnimationFrame(raf);
+    startValue = _value();
+    startTime = undefined;
+    _playing.set(true);
+    raf = requestAnimationFrame(animate);
+  }
+
+  effect(() => {
+    void _target();
+    start();
+  });
+
+  return {
+    value: computed(() => _value()),
+    target: _target,
+    playing: computed(() => _playing()),
+    progress: computed(() => _progress()),
+    stop() {
+      if (raf) cancelAnimationFrame(raf);
+      _playing.set(false);
+    },
+    reset() {
+      if (raf) cancelAnimationFrame(raf);
+      _value.set(from);
+      _progress.set(0);
+    },
+  };
+}

package/src/use-motion.ts

@@ -0,0 +1,89 @@
+import { resolveEasing, type Easing } from "./easings";
+
+export interface MotionKeyframes {
+  opacity?: [number, number];
+  x?: [number, number];
+  y?: [number, number];
+  scale?: [number, number];
+  rotate?: [number, number];
+  duration?: number;
+  easing?: Easing;
+  delay?: number;
+  onComplete?: () => void;
+}
+
+export function useMotion(ref: { current: HTMLElement | null }) {
+  function animate(keyframes: MotionKeyframes): () => void {
+    const el: HTMLElement | null = ref.current;
+    if (!el) return () => undefined;
+    const safeEl = el;
+
+    const {
+      opacity,
+      x,
+      y,
+      scale,
+      rotate,
+      duration = 300,
+      easing = "easeOut",
+      delay = 0,
+      onComplete,
+    } = keyframes;
+    const easeFn = resolveEasing(easing);
+    let raf: number | undefined;
+    let startTime: number | undefined;
+    let cancelled = false;
+
+    function frame(ts: number) {
+      if (cancelled) return;
+      startTime ??= ts + delay;
+      const elapsed = Math.max(0, ts - startTime);
+      const t = Math.min(elapsed / duration, 1);
+      const e = easeFn(t);
+
+      const transforms: string[] = [];
+      if (x)
+        transforms.push(`translateX(${String(x[0] + (x[1] - x[0]) * e)}px)`);
+      if (y)
+        transforms.push(`translateY(${String(y[0] + (y[1] - y[0]) * e)}px)`);
+      if (scale)
+        transforms.push(
+          `scale(${String(scale[0] + (scale[1] - scale[0]) * e)})`,
+        );
+      if (rotate)
+        transforms.push(
+          `rotate(${String(rotate[0] + (rotate[1] - rotate[0]) * e)}deg)`,
+        );
+
+      if (transforms.length) safeEl.style.transform = transforms.join(" ");
+      if (opacity)
+        safeEl.style.opacity = String(
+          opacity[0] + (opacity[1] - opacity[0]) * e,
+        );
+
+      if (t < 1) {
+        raf = requestAnimationFrame(frame);
+      } else {
+        onComplete?.();
+      }
+    }
+
+    raf = requestAnimationFrame(frame);
+    return () => {
+      cancelled = true;
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }
+
+  return {
+    animate,
+    enter: (kf: MotionKeyframes) => animate(kf),
+    exit: (kf: MotionKeyframes) =>
+      animate({
+        ...kf,
+        opacity: kf.opacity ? [kf.opacity[1], kf.opacity[0]] : undefined,
+        x: kf.x ? [kf.x[1], kf.x[0]] : undefined,
+        y: kf.y ? [kf.y[1], kf.y[0]] : undefined,
+      }),
+  };
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}