@any-tdf/react-motion 0.0.0-alpha.0

package/dist/react.js

@@ -0,0 +1,132 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { runAnimationConfig } from './internal';
+import { transitionMap } from './transition';
+const resolveTransition = (transition, node, params, direction) => {
+    if (!transition)
+        return null;
+    if (typeof transition === 'string') {
+        const fn = transitionMap[transition];
+        if (!fn)
+            return null;
+        return fn(node, params, { direction });
+    }
+    return transition(node, params, { direction });
+};
+export const useTransition = (visible, options = {}) => {
+    const nodeRef = useRef(null);
+    const controllerRef = useRef(null);
+    const hasMountedRef = useRef(false);
+    const [shouldRender, setShouldRender] = useState(visible);
+    const [status, setStatus] = useState(visible ? 'entered' : 'exited');
+    useEffect(() => {
+        if (visible)
+            setShouldRender(true);
+    }, [visible]);
+    useLayoutEffect(() => {
+        const node = nodeRef.current;
+        if (!node || (!visible && !shouldRender))
+            return;
+        const initialMount = !hasMountedRef.current;
+        hasMountedRef.current = true;
+        const selectedMode = options.mode ?? (options.inTransition || options.outTransition ? 'separate' : 'bidirectional');
+        const direction = visible ? 'in' : 'out';
+        const transition = visible ? options.inTransition ?? options.transition : options.outTransition ?? options.transition;
+        const params = visible ? options.inParams ?? options.params : options.outParams ?? options.params;
+        const currentController = controllerRef.current;
+        const currentT = currentController?.t();
+        currentController?.cancel();
+        controllerRef.current = null;
+        const config = resolveTransition(transition, node, params, selectedMode === 'bidirectional' ? 'both' : direction);
+        if (!config) {
+            controllerRef.current = null;
+            if (visible) {
+                setStatus('entered');
+            }
+            else {
+                setStatus('exited');
+                setShouldRender(false);
+            }
+            return;
+        }
+        const targetT = visible ? 1 : 0;
+        const fromT = selectedMode === 'bidirectional' && currentT !== undefined ? currentT : visible ? 0 : 1;
+        if (initialMount && visible && options.intro === false) {
+            runAnimationConfig(node, config, 1, { fromT: 1, direction: selectedMode === 'bidirectional' ? 'both' : direction }).cancel();
+            setStatus('entered');
+            return;
+        }
+        const controller = runAnimationConfig(node, config, targetT, {
+            fromT,
+            direction: selectedMode === 'bidirectional' ? 'both' : direction,
+            onStart: () => {
+                if (visible) {
+                    setStatus('entering');
+                    options.onIntroStart?.();
+                }
+                else {
+                    setStatus('exiting');
+                    options.onOutroStart?.();
+                }
+            },
+            onEnd: () => {
+                if (visible) {
+                    setStatus('entered');
+                    options.onIntroEnd?.();
+                }
+                else {
+                    setStatus('exited');
+                    setShouldRender(false);
+                    options.onOutroEnd?.();
+                }
+            }
+        });
+        controllerRef.current = controller;
+        return () => {
+            controller.deactivate();
+        };
+    }, [
+        visible,
+        shouldRender,
+        options.transition,
+        options.params,
+        options.inTransition,
+        options.outTransition,
+        options.inParams,
+        options.outParams,
+        options.mode,
+        options.intro,
+        options.onIntroStart,
+        options.onIntroEnd,
+        options.onOutroStart,
+        options.onOutroEnd
+    ]);
+    useEffect(() => {
+        return () => {
+            controllerRef.current?.cancel();
+            controllerRef.current = null;
+        };
+    }, []);
+    return { ref: nodeRef, shouldRender, status };
+};
+export const Transition = ({ visible, as = 'div', children, transition = 'fade', params, inTransition, outTransition, inParams, outParams, mode, intro, onIntroStart, onIntroEnd, onOutroStart, onOutroEnd, ...rest }) => {
+    const { ref, shouldRender } = useTransition(visible, {
+        transition,
+        params,
+        inTransition,
+        outTransition,
+        inParams,
+        outParams,
+        mode,
+        intro,
+        onIntroStart,
+        onIntroEnd,
+        onOutroStart,
+        onOutroEnd
+    });
+    if (!shouldRender)
+        return null;
+    return React.createElement(as, {
+        ...rest,
+        ref
+    }, children);
+};

package/dist/transition.d.ts

@@ -0,0 +1,80 @@
+import { type EasingFunction } from './easing';
+import { runAnimationConfig, type AnimationConfig } from './internal';
+export { runAnimationConfig };
+export type { AnimationConfig as TransitionConfig, AnimationController, MaybeDeferredAnimationConfig } from './internal';
+export type { EasingFunction };
+export interface BlurParams {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+    amount?: number | string;
+    opacity?: number;
+}
+export interface FadeParams {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+}
+export interface FlyParams {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+    x?: number | string;
+    y?: number | string;
+    opacity?: number;
+}
+export interface SlideParams {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+    axis?: 'x' | 'y';
+}
+export interface ScaleParams {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+    start?: number;
+    opacity?: number;
+}
+export interface DrawParams {
+    delay?: number;
+    speed?: number;
+    duration?: number | ((len: number) => number);
+    easing?: EasingFunction;
+}
+export interface CrossfadeParams {
+    delay?: number;
+    duration?: number | ((len: number) => number);
+    easing?: EasingFunction;
+}
+export type TransitionName = 'fade' | 'fly' | 'slide' | 'scale' | 'blur' | 'draw';
+export type TransitionFunction<P = unknown> = (node: Element, params?: P, options?: {
+    direction: 'in' | 'out' | 'both';
+}) => AnimationConfig | ((options?: {
+    direction: 'in' | 'out' | 'both';
+}) => AnimationConfig);
+export declare const blur: (node: Element, { delay, duration, easing, amount, opacity }?: BlurParams) => AnimationConfig;
+export declare const fade: (node: Element, { delay, duration, easing }?: FadeParams) => AnimationConfig;
+export declare const fly: (node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams) => AnimationConfig;
+export declare const slide: (node: Element, { delay, duration, easing, axis }?: SlideParams) => AnimationConfig;
+export declare const scale: (node: Element, { delay, duration, easing, start, opacity }?: ScaleParams) => AnimationConfig;
+export declare const draw: (node: SVGElement & {
+    getTotalLength(): number;
+}, { delay, speed, duration, easing }?: DrawParams) => AnimationConfig;
+export declare const crossfade: ({ fallback, ...defaults }: CrossfadeParams & {
+    fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => AnimationConfig;
+}) => [(node: Element, params: CrossfadeParams & {
+    key: unknown;
+}) => () => AnimationConfig | undefined, (node: Element, params: CrossfadeParams & {
+    key: unknown;
+}) => () => AnimationConfig | undefined];
+export declare const transitionMap: {
+    readonly blur: (node: Element, { delay, duration, easing, amount, opacity }?: BlurParams) => AnimationConfig;
+    readonly fade: (node: Element, { delay, duration, easing }?: FadeParams) => AnimationConfig;
+    readonly fly: (node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams) => AnimationConfig;
+    readonly slide: (node: Element, { delay, duration, easing, axis }?: SlideParams) => AnimationConfig;
+    readonly scale: (node: Element, { delay, duration, easing, start, opacity }?: ScaleParams) => AnimationConfig;
+    readonly draw: (node: SVGElement & {
+        getTotalLength(): number;
+    }, { delay, speed, duration, easing }?: DrawParams) => AnimationConfig;
+};

package/dist/transition.js

@@ -0,0 +1,164 @@
+import { cubicInOut, cubicOut, linear } from './easing';
+import { runAnimationConfig, splitCssUnit } from './internal';
+export { runAnimationConfig };
+const readOpacity = (node) => Number.parseFloat(getComputedStyle(node).opacity || '1');
+export const blur = (node, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}) => {
+    const style = getComputedStyle(node);
+    const targetOpacity = readOpacity(node);
+    const filter = style.filter === 'none' ? '' : style.filter;
+    const opacityDelta = targetOpacity * (1 - opacity);
+    const [value, unit] = splitCssUnit(amount);
+    return {
+        delay,
+        duration,
+        easing,
+        css: (_t, u) => `opacity: ${targetOpacity - opacityDelta * u}; filter: ${filter} blur(${u * value}${unit});`
+    };
+};
+export const fade = (node, { delay = 0, duration = 400, easing = linear } = {}) => {
+    const opacity = readOpacity(node);
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t) => `opacity: ${t * opacity};`
+    };
+};
+export const fly = (node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}) => {
+    const style = getComputedStyle(node);
+    const targetOpacity = readOpacity(node);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const opacityDelta = targetOpacity * (1 - opacity);
+    const [xValue, xUnit] = splitCssUnit(x);
+    const [yValue, yUnit] = splitCssUnit(y);
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t, u) => `
+			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
+			opacity: ${targetOpacity - opacityDelta * u};
+		`
+    };
+};
+export const slide = (node, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) => {
+    const style = getComputedStyle(node);
+    const opacity = readOpacity(node);
+    const primaryProperty = axis === 'y' ? 'height' : 'width';
+    const primaryPropertyValue = Number.parseFloat(style.getPropertyValue(primaryProperty));
+    const secondaryProperties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
+    const paddingStartValue = Number.parseFloat(style.getPropertyValue(`padding-${secondaryProperties[0]}`));
+    const paddingEndValue = Number.parseFloat(style.getPropertyValue(`padding-${secondaryProperties[1]}`));
+    const marginStartValue = Number.parseFloat(style.getPropertyValue(`margin-${secondaryProperties[0]}`));
+    const marginEndValue = Number.parseFloat(style.getPropertyValue(`margin-${secondaryProperties[1]}`));
+    const borderWidthStartValue = Number.parseFloat(style.getPropertyValue(`border-${secondaryProperties[0]}-width`));
+    const borderWidthEndValue = Number.parseFloat(style.getPropertyValue(`border-${secondaryProperties[1]}-width`));
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t) => 'overflow: hidden;' +
+            `opacity: ${Math.min(t * 20, 1) * opacity};` +
+            `${primaryProperty}: ${t * primaryPropertyValue}px;` +
+            `padding-${secondaryProperties[0]}: ${t * paddingStartValue}px;` +
+            `padding-${secondaryProperties[1]}: ${t * paddingEndValue}px;` +
+            `margin-${secondaryProperties[0]}: ${t * marginStartValue}px;` +
+            `margin-${secondaryProperties[1]}: ${t * marginEndValue}px;` +
+            `border-${secondaryProperties[0]}-width: ${t * borderWidthStartValue}px;` +
+            `border-${secondaryProperties[1]}-width: ${t * borderWidthEndValue}px;` +
+            `min-${primaryProperty}: 0;`
+    };
+};
+export const scale = (node, { delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}) => {
+    const style = getComputedStyle(node);
+    const targetOpacity = readOpacity(node);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const scaleDelta = 1 - start;
+    const opacityDelta = targetOpacity * (1 - opacity);
+    return {
+        delay,
+        duration,
+        easing,
+        css: (_t, u) => `
+			transform: ${transform} scale(${1 - scaleDelta * u});
+			opacity: ${targetOpacity - opacityDelta * u};
+		`
+    };
+};
+export const draw = (node, { delay = 0, speed, duration, easing = cubicInOut } = {}) => {
+    let len = node.getTotalLength();
+    const style = getComputedStyle(node);
+    if (style.strokeLinecap !== 'butt') {
+        len += Number.parseInt(style.strokeWidth, 10);
+    }
+    let resolvedDuration;
+    if (duration === undefined) {
+        resolvedDuration = speed === undefined ? 800 : len / speed;
+    }
+    else {
+        resolvedDuration = typeof duration === 'function' ? duration(len) : duration;
+    }
+    return {
+        delay,
+        duration: resolvedDuration,
+        easing,
+        css: (_t, u) => `
+			stroke-dasharray: ${len};
+			stroke-dashoffset: ${u * len};
+		`
+    };
+};
+const assign = (target, source) => Object.assign(target, source);
+export const crossfade = ({ fallback, ...defaults }) => {
+    const toReceive = new Map();
+    const toSend = new Map();
+    const makeCrossfade = (fromNode, node, params) => {
+        const merged = assign(assign({}, defaults), params);
+        const delay = merged.delay ?? 0;
+        const duration = merged.duration ?? ((distance) => Math.sqrt(distance) * 30);
+        const easing = merged.easing ?? cubicOut;
+        const from = fromNode.getBoundingClientRect();
+        const to = node.getBoundingClientRect();
+        const dx = from.left - to.left;
+        const dy = from.top - to.top;
+        const dw = from.width / to.width;
+        const dh = from.height / to.height;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const style = getComputedStyle(node);
+        const transform = style.transform === 'none' ? '' : style.transform;
+        const opacity = Number.parseFloat(style.opacity || '1');
+        return {
+            delay,
+            duration: typeof duration === 'function' ? duration(distance) : duration,
+            easing,
+            css: (t, u) => `
+				opacity: ${t * opacity};
+				transform-origin: top left;
+				transform: ${transform} translate(${u * dx}px, ${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
+			`
+        };
+    };
+    const transition = (items, counterparts, intro) => {
+        return (node, params) => {
+            items.set(params.key, node);
+            return () => {
+                if (counterparts.has(params.key)) {
+                    const otherNode = counterparts.get(params.key);
+                    counterparts.delete(params.key);
+                    return makeCrossfade(otherNode, node, params);
+                }
+                items.delete(params.key);
+                return fallback?.(node, params, intro);
+            };
+        };
+    };
+    return [transition(toSend, toReceive, false), transition(toReceive, toSend, true)];
+};
+export const transitionMap = {
+    blur,
+    fade,
+    fly,
+    slide,
+    scale,
+    draw
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+	"name": "@any-tdf/react-motion",
+	"version": "0.0.0-alpha.0",
+	"description": "React motion utilities compatible with Svelte transition, animate, easing, and motion APIs.",
+	"type": "module",
+	"license": "MIT",
+	"sideEffects": false,
+	"files": ["dist", "README.md", "LICENSE"],
+	"scripts": {
+		"build": "tsc -p tsconfig.json",
+		"docs:dev": "vite --config site/vite.config.ts --host 0.0.0.0",
+		"docs:build": "vite build --config site/vite.config.ts",
+		"docs:preview": "vite preview --config site/vite.config.ts --host 0.0.0.0",
+		"test": "bun test"
+	},
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./easing": {
+			"types": "./dist/easing.d.ts",
+			"import": "./dist/easing.js",
+			"default": "./dist/easing.js"
+		},
+		"./transition": {
+			"types": "./dist/transition.d.ts",
+			"import": "./dist/transition.js",
+			"default": "./dist/transition.js"
+		},
+		"./animate": {
+			"types": "./dist/animate.d.ts",
+			"import": "./dist/animate.js",
+			"default": "./dist/animate.js"
+		},
+		"./motion": {
+			"types": "./dist/motion.d.ts",
+			"import": "./dist/motion.js",
+			"default": "./dist/motion.js"
+		},
+		"./react": {
+			"types": "./dist/react.d.ts",
+			"import": "./dist/react.js",
+			"default": "./dist/react.js"
+		}
+	},
+	"peerDependencies": {
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@types/react": "^19.1.4",
+		"@types/react-dom": "^19.1.5",
+		"@vitejs/plugin-react": "^4.4.1",
+		"lucide-react": "^1.21.0",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5"
+	}
+}