@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-uix-motion.mjs

@@ -1,304 +1,214 @@
-import { isPrefersReducedMotion, toMs, getHiddenElementDimensions, setCSSProperty, addClass, removeClass } from '@gravionlabs/helix-core/uix/utils';
-
-const ANIMATION = 'animation';
-const TRANSITION = 'transition';
-/**
- * Determines whether motion effects should be skipped based on the provided options.
- * @param options - The motion options to evaluate.
- * @returns A boolean indicating whether motion should be skipped.
- */
+import { addClass, getHiddenElementDimensions, isPrefersReducedMotion, removeClass, setCSSProperty, toMs } from "@gravionlabs/helix-core/uix/utils";
+const ANIMATION = "animation";
+const TRANSITION = "transition";
 function shouldSkipMotion(options) {
-    if (!options) {
-        return false;
-    }
-    return options.disabled || !!(options.safe && isPrefersReducedMotion());
+	if (!options) return false;
+	return options.disabled || !!(options.safe && isPrefersReducedMotion());
 }
-/**
- * Merges the provided motion options with the default options.
- * @param inOptions - The motion options to merge.
- * @param defaultOptions - The default motion options.
- * @returns The merged motion options.
- */
 function mergeOptions(inOptions, defaultOptions) {
-    if (!inOptions) {
-        return defaultOptions;
-    }
-    return {
-        ...inOptions,
-        ...Object.entries(defaultOptions).reduce((acc, [key, value]) => {
-            acc[key] = inOptions[key] ?? value;
-            return acc;
-        }, {})
-    };
+	if (!inOptions) return defaultOptions;
+	return {
+		...inOptions,
+		...Object.entries(defaultOptions).reduce((acc, [key, value]) => {
+			acc[key] = inOptions[key] ?? value;
+			return acc;
+		}, {})
+	};
 }
-/**
- * Resolves class names for motion phases based on the provided options.
- * @param options - The motion options containing class names and base name.
- * @returns The resolved class names organized by motion phase.
- */
 function resolveClassNames(options) {
-    const { name, enterClass, leaveClass } = options || {};
-    return {
-        enter: {
-            from: enterClass?.from || `${name}-enter-from`,
-            to: enterClass?.to || `${name}-enter-to`,
-            active: enterClass?.active || `${name}-enter-active`
-        },
-        leave: {
-            from: leaveClass?.from || `${name}-leave-from`,
-            to: leaveClass?.to || `${name}-leave-to`,
-            active: leaveClass?.active || `${name}-leave-active`
-        }
-    };
+	const { name, enterClass, leaveClass } = options || {};
+	return {
+		enter: {
+			from: enterClass?.from || `${name}-enter-from`,
+			to: enterClass?.to || `${name}-enter-to`,
+			active: enterClass?.active || `${name}-enter-active`
+		},
+		leave: {
+			from: leaveClass?.from || `${name}-leave-from`,
+			to: leaveClass?.to || `${name}-leave-to`,
+			active: leaveClass?.active || `${name}-leave-active`
+		}
+	};
 }
-/**
- * Retrieves the motion hooks organized by phase based on the provided options.
- * @param options - The motion options containing hooks.
- * @returns The motion hooks organized by phase.
- */
 function getMotionHooks(options) {
-    return {
-        enter: {
-            onBefore: options?.onBeforeEnter,
-            onStart: options?.onEnter,
-            onAfter: options?.onAfterEnter,
-            onCancelled: options?.onEnterCancelled
-        },
-        leave: {
-            onBefore: options?.onBeforeLeave,
-            onStart: options?.onLeave,
-            onAfter: options?.onAfterLeave,
-            onCancelled: options?.onLeaveCancelled
-        }
-    };
+	return {
+		enter: {
+			onBefore: options?.onBeforeEnter,
+			onStart: options?.onEnter,
+			onAfter: options?.onAfterEnter,
+			onCancelled: options?.onEnterCancelled
+		},
+		leave: {
+			onBefore: options?.onBeforeLeave,
+			onStart: options?.onLeave,
+			onAfter: options?.onAfterLeave,
+			onCancelled: options?.onLeaveCancelled
+		}
+	};
 }
-/**
- * Retrieves motion metadata including type, timeout, and count for the given element.
- * @param element - The target element to retrieve motion metadata from.
- * @param expectedType - The expected type of motion ('transition' or 'animation').
- * @returns The motion metadata including type, timeout, and count.
- */
 function getMotionMetadata(element, expectedType) {
-    const styles = window.getComputedStyle(element);
-    const getDelaysAndDurations = (type) => {
-        const delays = styles[`${type}Delay`];
-        const durations = styles[`${type}Duration`];
-        return [delays.split(', ').map(toMs), durations.split(', ').map(toMs)];
-    };
-    const [transitionDelays, transitionDurations] = getDelaysAndDurations(TRANSITION);
-    const [animationDelays, animationDurations] = getDelaysAndDurations(ANIMATION);
-    const transitionTimeout = Math.max(...transitionDurations.map((d, i) => d + transitionDelays[i]));
-    const animationTimeout = Math.max(...animationDurations.map((d, i) => d + animationDelays[i]));
-    let type = undefined;
-    let timeout = 0;
-    let count = 0;
-    if (expectedType === TRANSITION) {
-        if (transitionTimeout > 0) {
-            type = TRANSITION;
-            timeout = transitionTimeout;
-            count = transitionDurations.length;
-        }
-    }
-    else if (expectedType === ANIMATION) {
-        if (animationTimeout > 0) {
-            type = ANIMATION;
-            timeout = animationTimeout;
-            count = animationDurations.length;
-        }
-    }
-    else {
-        timeout = Math.max(transitionTimeout, animationTimeout);
-        type = timeout > 0 ? (transitionTimeout > animationTimeout ? TRANSITION : ANIMATION) : undefined;
-        count = type ? (type === TRANSITION ? transitionDurations.length : animationDurations.length) : 0;
-    }
-    return {
-        type,
-        timeout,
-        count
-    };
+	const styles = window.getComputedStyle(element);
+	const getDelaysAndDurations = (type) => {
+		const delays = styles[`${type}Delay`];
+		const durations = styles[`${type}Duration`];
+		return [delays.split(", ").map(toMs), durations.split(", ").map(toMs)];
+	};
+	const [transitionDelays, transitionDurations] = getDelaysAndDurations(TRANSITION);
+	const [animationDelays, animationDurations] = getDelaysAndDurations(ANIMATION);
+	const transitionTimeout = Math.max(...transitionDurations.map((d, i) => d + transitionDelays[i]));
+	const animationTimeout = Math.max(...animationDurations.map((d, i) => d + animationDelays[i]));
+	let type = void 0;
+	let timeout = 0;
+	let count = 0;
+	if (expectedType === "transition") {
+		if (transitionTimeout > 0) {
+			type = TRANSITION;
+			timeout = transitionTimeout;
+			count = transitionDurations.length;
+		}
+	} else if (expectedType === "animation") {
+		if (animationTimeout > 0) {
+			type = ANIMATION;
+			timeout = animationTimeout;
+			count = animationDurations.length;
+		}
+	} else {
+		timeout = Math.max(transitionTimeout, animationTimeout);
+		type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : void 0;
+		count = type ? type === "transition" ? transitionDurations.length : animationDurations.length : 0;
+	}
+	return {
+		type,
+		timeout,
+		count
+	};
 }
-/**
- * Resolves the duration for a given animation phase.
- * @param duration - The duration can be a number or an object with `enter` and `leave` properties.
- * @param phase - The phase of the transition/animation, either 'enter' or 'leave'.
- * @returns The resolved duration in milliseconds or null if not specified.
- */
 function resolveDuration(duration, phase) {
-    if (typeof duration === 'number') {
-        return duration;
-    }
-    else if (typeof duration === 'object' && duration[phase] != null) {
-        return duration[phase];
-    }
-    return null;
+	if (typeof duration === "number") return duration;
+	else if (typeof duration === "object" && duration[phase] != null) return duration[phase];
+	return null;
 }
-/**
- * Sets CSS custom properties for auto height and/or width on the given element.
- * @param element - The target HTML element.
- * @param autoHeight - Whether to set the auto height CSS variable.
- * @param autoWidth - Whether to set the auto width CSS variable.
- * @returns
- */
 function setAutoDimensionVariables(element, autoHeight = true, autoWidth = false) {
-    if (!autoHeight && !autoWidth)
-        return;
-    const dimensions = getHiddenElementDimensions(element);
-    if (autoHeight) {
-        setCSSProperty(element, '--pui-motion-height', dimensions.height + 'px');
-    }
-    if (autoWidth) {
-        setCSSProperty(element, '--pui-motion-width', dimensions.width + 'px');
-    }
+	if (!autoHeight && !autoWidth) return;
+	const dimensions = getHiddenElementDimensions(element);
+	if (autoHeight) setCSSProperty(element, "--pui-motion-height", dimensions.height + "px");
+	if (autoWidth) setCSSProperty(element, "--pui-motion-width", dimensions.width + "px");
 }
-
 const DEFAULT_MOTION_OPTIONS = {
-    name: 'p',
-    safe: true,
-    disabled: false,
-    enter: true,
-    leave: true,
-    autoHeight: true,
-    autoWidth: false
+	name: "p",
+	safe: true,
+	disabled: false,
+	enter: true,
+	leave: true,
+	autoHeight: true,
+	autoWidth: false
 };
-/**
- * Creates a MotionInstance for the given element with the specified options.
- * @param element - The target element for motion effects.
- * @param options - Configuration options for the motion instance.
- * @returns A MotionInstance that can be used to control the motion.
- */
 function createMotion(element, options) {
-    if (!element)
-        throw new Error('Element is required.');
-    const opts = {};
-    let skipMotion = false;
-    let classNames = {};
-    let cancelCurrent = null;
-    let hooks = {};
-    const init = (newOpts) => {
-        Object.assign(opts, mergeOptions(newOpts, DEFAULT_MOTION_OPTIONS));
-        if (!opts.enter && !opts.leave)
-            throw new Error('Enter or leave must be true.');
-        hooks = getMotionHooks(opts);
-        skipMotion = shouldSkipMotion(opts);
-        classNames = resolveClassNames(opts);
-        cancelCurrent = null;
-    };
-    const run = async (phase) => {
-        cancelCurrent?.();
-        const { onBefore, onStart, onAfter, onCancelled } = hooks[phase] || {};
-        const event = { element };
-        if (skipMotion) {
-            onBefore?.(event);
-            onStart?.(event);
-            onAfter?.(event);
-            return;
-        }
-        const { from: fromClass, active: activeClass, to: toClass } = classNames[phase] || {};
-        setAutoDimensionVariables(element, opts.autoHeight, opts.autoWidth);
-        onBefore?.(event);
-        addClass(element, fromClass);
-        addClass(element, activeClass);
-        //await nextFrame();
-        void element.offsetHeight; // force reflow
-        removeClass(element, fromClass);
-        addClass(element, toClass);
-        onStart?.(event);
-        return new Promise((resolve) => {
-            const duration = resolveDuration(opts.duration, phase);
-            const cleanup = () => {
-                removeClass(element, [toClass, activeClass]);
-                cancelCurrent = null;
-            };
-            const onDone = () => {
-                cleanup();
-                onAfter?.(event);
-                resolve();
-            };
-            cancelCurrent = () => {
-                cleanup();
-                onCancelled?.(event);
-                resolve();
-            };
-            whenEnd(element, opts.type, duration, onDone);
-        });
-    };
-    init(options);
-    const instance = {
-        enter: () => {
-            if (!opts.enter)
-                return Promise.resolve();
-            return run('enter');
-        },
-        leave: () => {
-            if (!opts.leave)
-                return Promise.resolve();
-            return run('leave');
-        },
-        cancel: () => {
-            cancelCurrent?.();
-            cancelCurrent = null;
-        },
-        update: (newElement, newOptions) => {
-            if (!newElement)
-                throw new Error('Element is required.');
-            element = newElement;
-            instance.cancel();
-            init(newOptions);
-        }
-    };
-    if (opts.appear)
-        instance.enter();
-    return instance;
+	if (!element) throw new Error("Element is required.");
+	const opts = {};
+	let skipMotion = false;
+	let classNames = {};
+	let cancelCurrent = null;
+	let hooks = {};
+	const init = (newOpts) => {
+		Object.assign(opts, mergeOptions(newOpts, DEFAULT_MOTION_OPTIONS));
+		if (!opts.enter && !opts.leave) throw new Error("Enter or leave must be true.");
+		hooks = getMotionHooks(opts);
+		skipMotion = shouldSkipMotion(opts);
+		classNames = resolveClassNames(opts);
+		cancelCurrent = null;
+	};
+	const run = async (phase) => {
+		cancelCurrent?.();
+		const { onBefore, onStart, onAfter, onCancelled } = hooks[phase] || {};
+		const event = { element };
+		if (skipMotion) {
+			onBefore?.(event);
+			onStart?.(event);
+			onAfter?.(event);
+			return;
+		}
+		const { from: fromClass, active: activeClass, to: toClass } = classNames[phase] || {};
+		setAutoDimensionVariables(element, opts.autoHeight, opts.autoWidth);
+		onBefore?.(event);
+		addClass(element, fromClass);
+		addClass(element, activeClass);
+		element.offsetHeight;
+		removeClass(element, fromClass);
+		addClass(element, toClass);
+		onStart?.(event);
+		return new Promise((resolve) => {
+			const duration = resolveDuration(opts.duration, phase);
+			const cleanup = () => {
+				removeClass(element, [toClass, activeClass]);
+				cancelCurrent = null;
+			};
+			const onDone = () => {
+				cleanup();
+				onAfter?.(event);
+				resolve();
+			};
+			cancelCurrent = () => {
+				cleanup();
+				onCancelled?.(event);
+				resolve();
+			};
+			whenEnd(element, opts.type, duration, onDone);
+		});
+	};
+	init(options);
+	const instance = {
+		enter: () => {
+			if (!opts.enter) return Promise.resolve();
+			return run("enter");
+		},
+		leave: () => {
+			if (!opts.leave) return Promise.resolve();
+			return run("leave");
+		},
+		cancel: () => {
+			cancelCurrent?.();
+			cancelCurrent = null;
+		},
+		update: (newElement, newOptions) => {
+			if (!newElement) throw new Error("Element is required.");
+			element = newElement;
+			instance.cancel();
+			init(newOptions);
+		}
+	};
+	if (opts.appear) instance.enter();
+	return instance;
 }
 let endId = 0;
-/**
- * Ported from Vue.js Transition Component;
- * @see https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/components/Transition.ts#L348
- *
- * When the transition is triggered, it waits for the end of the motion (transition or animation)
- * @param element - The element to wait for the motion end.
- * @param expectedType - The expected type of motion (transition or animation).
- * @param explicitTimeout - An optional explicit timeout in milliseconds.
- * @param resolve - A function to call when the motion ends.
- * @returns A timeout ID if an explicit timeout is provided, otherwise undefined.
- */
 function whenEnd(element, expectedType, explicitTimeout, resolve) {
-    const id = (element._motionEndId = ++endId);
-    const resolveIfNotStale = () => {
-        if (id === element._motionEndId) {
-            resolve();
-        }
-    };
-    if (explicitTimeout != null) {
-        return setTimeout(resolveIfNotStale, explicitTimeout);
-    }
-    const { type, timeout, count } = getMotionMetadata(element, expectedType);
-    if (!type) {
-        resolve();
-        return;
-    }
-    const endEvent = type + 'end';
-    let ended = 0;
-    const end = () => {
-        element.removeEventListener(endEvent, onEnd, true);
-        resolveIfNotStale();
-    };
-    const onEnd = (event) => {
-        if (event.target === element && ++ended >= count) {
-            end();
-        }
-    };
-    element.addEventListener(endEvent, onEnd, { capture: true, once: true });
-    setTimeout(() => {
-        if (ended < count) {
-            end();
-        }
-    }, timeout + 1);
+	const id = element._motionEndId = ++endId;
+	const resolveIfNotStale = () => {
+		if (id === element._motionEndId) resolve();
+	};
+	if (explicitTimeout != null) return setTimeout(resolveIfNotStale, explicitTimeout);
+	const { type, timeout, count } = getMotionMetadata(element, expectedType);
+	if (!type) {
+		resolve();
+		return;
+	}
+	const endEvent = type + "end";
+	let ended = 0;
+	const end = () => {
+		element.removeEventListener(endEvent, onEnd, true);
+		resolveIfNotStale();
+	};
+	const onEnd = (event) => {
+		if (event.target === element && ++ended >= count) end();
+	};
+	element.addEventListener(endEvent, onEnd, {
+		capture: true,
+		once: true
+	});
+	setTimeout(() => {
+		if (ended < count) end();
+	}, timeout + 1);
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { ANIMATION, DEFAULT_MOTION_OPTIONS, TRANSITION, createMotion, getMotionHooks, getMotionMetadata, mergeOptions, resolveClassNames, resolveDuration, setAutoDimensionVariables, shouldSkipMotion };
-//# sourceMappingURL=gravionlabs-helix-core-uix-motion.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-uix-motion.mjs.map

package/fesm2022/gravionlabs-helix-core-uix-motion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gravionlabs-helix-core-uix-motion.mjs","sources":["../../../projects/core/uix/motion/utils/index.ts","../../../projects/core/uix/motion/config/index.ts","../../../projects/core/uix/motion/gravionlabs-helix-core-uix-motion.ts"],"sourcesContent":["import { getHiddenElementDimensions, isPrefersReducedMotion, setCSSProperty, toMs } from '@gravionlabs/helix-core/uix/utils';\nimport type { MotionClassNamesWithPhase, MotionHooksWithPhase, MotionMetadata, MotionOptions, MotionPhase, MotionType } from '../types';\n\nexport const ANIMATION = 'animation';\nexport const TRANSITION = 'transition';\n\n/**\n * Determines whether motion effects should be skipped based on the provided options.\n * @param options - The motion options to evaluate.\n * @returns A boolean indicating whether motion should be skipped.\n */\nexport function shouldSkipMotion(options: MotionOptions | undefined): boolean {\n    if (!options) {\n        return false;\n    }\n\n    return options.disabled || !!(options.safe && isPrefersReducedMotion());\n}\n\n/**\n * Merges the provided motion options with the default options.\n * @param inOptions - The motion options to merge.\n * @param defaultOptions - The default motion options.\n * @returns The merged motion options.\n */\nexport function mergeOptions(inOptions: MotionOptions | undefined, defaultOptions: MotionOptions): MotionOptions {\n    if (!inOptions) {\n        return defaultOptions;\n    }\n\n    return {\n        ...inOptions,\n        ...(Object.entries(defaultOptions).reduce((acc: Record<string, unknown>, [key, value]) => {\n            acc[key] = (inOptions as Record<string, unknown>)[key] ?? value;\n\n            return acc;\n        }, {}) as MotionOptions)\n    };\n}\n\n/**\n * Resolves class names for motion phases based on the provided options.\n * @param options - The motion options containing class names and base name.\n * @returns The resolved class names organized by motion phase.\n */\nexport function resolveClassNames(options: MotionOptions | undefined): MotionClassNamesWithPhase {\n    const { name, enterClass, leaveClass } = options || {};\n\n    return {\n        enter: {\n            from: enterClass?.from || `${name}-enter-from`,\n            to: enterClass?.to || `${name}-enter-to`,\n            active: enterClass?.active || `${name}-enter-active`\n        },\n        leave: {\n            from: leaveClass?.from || `${name}-leave-from`,\n            to: leaveClass?.to || `${name}-leave-to`,\n            active: leaveClass?.active || `${name}-leave-active`\n        }\n    };\n}\n\n/**\n * Retrieves the motion hooks organized by phase based on the provided options.\n * @param options - The motion options containing hooks.\n * @returns The motion hooks organized by phase.\n */\nexport function getMotionHooks(options: MotionOptions | undefined): MotionHooksWithPhase {\n    return {\n        enter: {\n            onBefore: options?.onBeforeEnter,\n            onStart: options?.onEnter,\n            onAfter: options?.onAfterEnter,\n            onCancelled: options?.onEnterCancelled\n        },\n        leave: {\n            onBefore: options?.onBeforeLeave,\n            onStart: options?.onLeave,\n            onAfter: options?.onAfterLeave,\n            onCancelled: options?.onLeaveCancelled\n        }\n    };\n}\n\n/**\n * Retrieves motion metadata including type, timeout, and count for the given element.\n * @param element - The target element to retrieve motion metadata from.\n * @param expectedType - The expected type of motion ('transition' or 'animation').\n * @returns The motion metadata including type, timeout, and count.\n */\nexport function getMotionMetadata(element: Element, expectedType?: MotionMetadata['type']): MotionMetadata {\n    const styles = window.getComputedStyle(element);\n\n    const getDelaysAndDurations = (type: MotionType): [number[], number[]] => {\n        const delays = styles[`${type}Delay`];\n        const durations = styles[`${type}Duration`];\n\n        return [delays.split(', ').map(toMs), durations.split(', ').map(toMs)];\n    };\n\n    const [transitionDelays, transitionDurations] = getDelaysAndDurations(TRANSITION);\n    const [animationDelays, animationDurations] = getDelaysAndDurations(ANIMATION);\n\n    const transitionTimeout = Math.max(...transitionDurations.map((d, i) => d + transitionDelays[i]));\n    const animationTimeout = Math.max(...animationDurations.map((d, i) => d + animationDelays[i]));\n\n    let type: MotionMetadata['type'] = undefined;\n    let timeout = 0;\n    let count = 0;\n\n    if (expectedType === TRANSITION) {\n        if (transitionTimeout > 0) {\n            type = TRANSITION;\n            timeout = transitionTimeout;\n            count = transitionDurations.length;\n        }\n    } else if (expectedType === ANIMATION) {\n        if (animationTimeout > 0) {\n            type = ANIMATION;\n            timeout = animationTimeout;\n            count = animationDurations.length;\n        }\n    } else {\n        timeout = Math.max(transitionTimeout, animationTimeout);\n        type = timeout > 0 ? (transitionTimeout > animationTimeout ? TRANSITION : ANIMATION) : undefined;\n        count = type ? (type === TRANSITION ? transitionDurations.length : animationDurations.length) : 0;\n    }\n\n    return {\n        type,\n        timeout,\n        count\n    };\n}\n\n/**\n * Resolves the duration for a given animation phase.\n * @param duration - The duration can be a number or an object with `enter` and `leave` properties.\n * @param phase - The phase of the transition/animation, either 'enter' or 'leave'.\n * @returns The resolved duration in milliseconds or null if not specified.\n */\nexport function resolveDuration(duration: MotionOptions['duration'], phase: MotionPhase): number | null {\n    if (typeof duration === 'number') {\n        return duration;\n    } else if (typeof duration === 'object' && duration[phase] != null) {\n        return duration[phase];\n    }\n\n    return null;\n}\n\n/**\n * Sets CSS custom properties for auto height and/or width on the given element.\n * @param element - The target HTML element.\n * @param autoHeight - Whether to set the auto height CSS variable.\n * @param autoWidth - Whether to set the auto width CSS variable.\n * @returns\n */\nexport function setAutoDimensionVariables(element: HTMLElement, autoHeight: boolean = true, autoWidth: boolean = false): void {\n    if (!autoHeight && !autoWidth) return;\n\n    const dimensions = getHiddenElementDimensions(element);\n\n    if (autoHeight) {\n        setCSSProperty(element, '--pui-motion-height', dimensions.height + 'px');\n    }\n\n    if (autoWidth) {\n        setCSSProperty(element, '--pui-motion-width', dimensions.width + 'px');\n    }\n}\n","import { addClass, removeClass } from '@gravionlabs/helix-core/uix/utils';\nimport type { MotionClassNamesWithPhase, MotionHooksWithPhase, MotionInstance, MotionOptions, MotionPhase, MotionType } from '../types';\nimport { getMotionHooks, getMotionMetadata, mergeOptions, resolveClassNames, resolveDuration, setAutoDimensionVariables, shouldSkipMotion } from '../utils';\n\nexport const DEFAULT_MOTION_OPTIONS: MotionOptions = {\n    name: 'p',\n    safe: true,\n    disabled: false,\n    enter: true,\n    leave: true,\n    autoHeight: true,\n    autoWidth: false\n};\n\n/**\n * Creates a MotionInstance for the given element with the specified options.\n * @param element - The target element for motion effects.\n * @param options - Configuration options for the motion instance.\n * @returns A MotionInstance that can be used to control the motion.\n */\nexport function createMotion(element: Element, options?: MotionOptions): MotionInstance {\n    if (!element) throw new Error('Element is required.');\n\n    const opts: MotionOptions = {};\n    let skipMotion = false;\n    let classNames: MotionClassNamesWithPhase = {} as MotionClassNamesWithPhase;\n    let cancelCurrent: (() => void) | null = null;\n    let hooks: MotionHooksWithPhase = {};\n\n    const init = (newOpts?: MotionOptions) => {\n        Object.assign(opts, mergeOptions(newOpts, DEFAULT_MOTION_OPTIONS));\n        if (!opts.enter && !opts.leave) throw new Error('Enter or leave must be true.');\n\n        hooks = getMotionHooks(opts);\n        skipMotion = shouldSkipMotion(opts);\n        classNames = resolveClassNames(opts);\n        cancelCurrent = null;\n    };\n\n    const run = async (phase: MotionPhase): Promise<void> => {\n        cancelCurrent?.();\n\n        const { onBefore, onStart, onAfter, onCancelled } = hooks[phase] || {};\n        const event = { element };\n\n        if (skipMotion) {\n            onBefore?.(event);\n            onStart?.(event);\n            onAfter?.(event);\n\n            return;\n        }\n\n        const { from: fromClass, active: activeClass, to: toClass } = classNames[phase] || {};\n\n        setAutoDimensionVariables(element as HTMLElement, opts.autoHeight, opts.autoWidth);\n\n        onBefore?.(event);\n        addClass(element, fromClass);\n        addClass(element, activeClass);\n\n        //await nextFrame();\n        void (element as HTMLElement).offsetHeight; // force reflow\n\n        removeClass(element, fromClass);\n        addClass(element, toClass);\n        onStart?.(event);\n\n        return new Promise((resolve) => {\n            const duration = resolveDuration(opts.duration, phase);\n\n            const cleanup = () => {\n                removeClass(element, [toClass, activeClass]);\n                cancelCurrent = null;\n            };\n\n            const onDone = () => {\n                cleanup();\n                onAfter?.(event);\n                resolve();\n            };\n\n            cancelCurrent = () => {\n                cleanup();\n                onCancelled?.(event);\n                resolve();\n            };\n\n            whenEnd(element, opts.type, duration, onDone);\n        });\n    };\n\n    init(options);\n\n    const instance: MotionInstance = {\n        enter: () => {\n            if (!opts.enter) return Promise.resolve();\n\n            return run('enter');\n        },\n        leave: () => {\n            if (!opts.leave) return Promise.resolve();\n\n            return run('leave');\n        },\n        cancel: () => {\n            cancelCurrent?.();\n            cancelCurrent = null;\n        },\n        update: (newElement?: Element, newOptions?: MotionOptions) => {\n            if (!newElement) throw new Error('Element is required.');\n\n            element = newElement as HTMLElement;\n            instance.cancel();\n            init(newOptions);\n        }\n    };\n\n    if (opts.appear) instance.enter();\n\n    return instance;\n}\n\nlet endId = 0;\n\n/**\n * Ported from Vue.js Transition Component;\n * @see https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/components/Transition.ts#L348\n *\n * When the transition is triggered, it waits for the end of the motion (transition or animation)\n * @param element - The element to wait for the motion end.\n * @param expectedType - The expected type of motion (transition or animation).\n * @param explicitTimeout - An optional explicit timeout in milliseconds.\n * @param resolve - A function to call when the motion ends.\n * @returns A timeout ID if an explicit timeout is provided, otherwise undefined.\n */\nfunction whenEnd(element: Element & { _motionEndId?: number }, expectedType: MotionType | undefined, explicitTimeout: number | null, resolve: () => void) {\n    const id = (element._motionEndId = ++endId);\n\n    const resolveIfNotStale = () => {\n        if (id === element._motionEndId) {\n            resolve();\n        }\n    };\n\n    if (explicitTimeout != null) {\n        return setTimeout(resolveIfNotStale, explicitTimeout);\n    }\n\n    const { type, timeout, count } = getMotionMetadata(element, expectedType);\n\n    if (!type) {\n        resolve();\n\n        return;\n    }\n\n    const endEvent = type + 'end';\n    let ended = 0;\n\n    const end = () => {\n        element.removeEventListener(endEvent, onEnd, true);\n        resolveIfNotStale();\n    };\n\n    const onEnd = (event: Event) => {\n        if (event.target === element && ++ended >= count) {\n            end();\n        }\n    };\n\n    element.addEventListener(endEvent, onEnd, { capture: true, once: true });\n    setTimeout(() => {\n        if (ended < count) {\n            end();\n        }\n    }, timeout + 1);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"gravionlabs-helix-core-uix-motion.mjs","names":[],"sources":["../../../projects/core/uix/motion/utils/index.ts","../../../projects/core/uix/motion/config/index.ts"],"sourcesContent":["import { getHiddenElementDimensions, isPrefersReducedMotion, setCSSProperty, toMs } from '@gravionlabs/helix-core/uix/utils';\nimport type { MotionClassNamesWithPhase, MotionHooksWithPhase, MotionMetadata, MotionOptions, MotionPhase, MotionType } from '../types';\n\nexport const ANIMATION = 'animation';\nexport const TRANSITION = 'transition';\n\n/**\n * Determines whether motion effects should be skipped based on the provided options.\n * @param options - The motion options to evaluate.\n * @returns A boolean indicating whether motion should be skipped.\n */\nexport function shouldSkipMotion(options: MotionOptions | undefined): boolean {\n    if (!options) {\n        return false;\n    }\n\n    return options.disabled || !!(options.safe && isPrefersReducedMotion());\n}\n\n/**\n * Merges the provided motion options with the default options.\n * @param inOptions - The motion options to merge.\n * @param defaultOptions - The default motion options.\n * @returns The merged motion options.\n */\nexport function mergeOptions(inOptions: MotionOptions | undefined, defaultOptions: MotionOptions): MotionOptions {\n    if (!inOptions) {\n        return defaultOptions;\n    }\n\n    return {\n        ...inOptions,\n        ...(Object.entries(defaultOptions).reduce((acc: Record<string, unknown>, [key, value]) => {\n            acc[key] = (inOptions as Record<string, unknown>)[key] ?? value;\n\n            return acc;\n        }, {}) as MotionOptions)\n    };\n}\n\n/**\n * Resolves class names for motion phases based on the provided options.\n * @param options - The motion options containing class names and base name.\n * @returns The resolved class names organized by motion phase.\n */\nexport function resolveClassNames(options: MotionOptions | undefined): MotionClassNamesWithPhase {\n    const { name, enterClass, leaveClass } = options || {};\n\n    return {\n        enter: {\n            from: enterClass?.from || `${name}-enter-from`,\n            to: enterClass?.to || `${name}-enter-to`,\n            active: enterClass?.active || `${name}-enter-active`\n        },\n        leave: {\n            from: leaveClass?.from || `${name}-leave-from`,\n            to: leaveClass?.to || `${name}-leave-to`,\n            active: leaveClass?.active || `${name}-leave-active`\n        }\n    };\n}\n\n/**\n * Retrieves the motion hooks organized by phase based on the provided options.\n * @param options - The motion options containing hooks.\n * @returns The motion hooks organized by phase.\n */\nexport function getMotionHooks(options: MotionOptions | undefined): MotionHooksWithPhase {\n    return {\n        enter: {\n            onBefore: options?.onBeforeEnter,\n            onStart: options?.onEnter,\n            onAfter: options?.onAfterEnter,\n            onCancelled: options?.onEnterCancelled\n        },\n        leave: {\n            onBefore: options?.onBeforeLeave,\n            onStart: options?.onLeave,\n            onAfter: options?.onAfterLeave,\n            onCancelled: options?.onLeaveCancelled\n        }\n    };\n}\n\n/**\n * Retrieves motion metadata including type, timeout, and count for the given element.\n * @param element - The target element to retrieve motion metadata from.\n * @param expectedType - The expected type of motion ('transition' or 'animation').\n * @returns The motion metadata including type, timeout, and count.\n */\nexport function getMotionMetadata(element: Element, expectedType?: MotionMetadata['type']): MotionMetadata {\n    const styles = window.getComputedStyle(element);\n\n    const getDelaysAndDurations = (type: MotionType): [number[], number[]] => {\n        const delays = styles[`${type}Delay`];\n        const durations = styles[`${type}Duration`];\n\n        return [delays.split(', ').map(toMs), durations.split(', ').map(toMs)];\n    };\n\n    const [transitionDelays, transitionDurations] = getDelaysAndDurations(TRANSITION);\n    const [animationDelays, animationDurations] = getDelaysAndDurations(ANIMATION);\n\n    const transitionTimeout = Math.max(...transitionDurations.map((d, i) => d + transitionDelays[i]));\n    const animationTimeout = Math.max(...animationDurations.map((d, i) => d + animationDelays[i]));\n\n    let type: MotionMetadata['type'] = undefined;\n    let timeout = 0;\n    let count = 0;\n\n    if (expectedType === TRANSITION) {\n        if (transitionTimeout > 0) {\n            type = TRANSITION;\n            timeout = transitionTimeout;\n            count = transitionDurations.length;\n        }\n    } else if (expectedType === ANIMATION) {\n        if (animationTimeout > 0) {\n            type = ANIMATION;\n            timeout = animationTimeout;\n            count = animationDurations.length;\n        }\n    } else {\n        timeout = Math.max(transitionTimeout, animationTimeout);\n        type = timeout > 0 ? (transitionTimeout > animationTimeout ? TRANSITION : ANIMATION) : undefined;\n        count = type ? (type === TRANSITION ? transitionDurations.length : animationDurations.length) : 0;\n    }\n\n    return {\n        type,\n        timeout,\n        count\n    };\n}\n\n/**\n * Resolves the duration for a given animation phase.\n * @param duration - The duration can be a number or an object with `enter` and `leave` properties.\n * @param phase - The phase of the transition/animation, either 'enter' or 'leave'.\n * @returns The resolved duration in milliseconds or null if not specified.\n */\nexport function resolveDuration(duration: MotionOptions['duration'], phase: MotionPhase): number | null {\n    if (typeof duration === 'number') {\n        return duration;\n    } else if (typeof duration === 'object' && duration[phase] != null) {\n        return duration[phase];\n    }\n\n    return null;\n}\n\n/**\n * Sets CSS custom properties for auto height and/or width on the given element.\n * @param element - The target HTML element.\n * @param autoHeight - Whether to set the auto height CSS variable.\n * @param autoWidth - Whether to set the auto width CSS variable.\n * @returns\n */\nexport function setAutoDimensionVariables(element: HTMLElement, autoHeight: boolean = true, autoWidth: boolean = false): void {\n    if (!autoHeight && !autoWidth) return;\n\n    const dimensions = getHiddenElementDimensions(element);\n\n    if (autoHeight) {\n        setCSSProperty(element, '--pui-motion-height', dimensions.height + 'px');\n    }\n\n    if (autoWidth) {\n        setCSSProperty(element, '--pui-motion-width', dimensions.width + 'px');\n    }\n}\n","import { addClass, removeClass } from '@gravionlabs/helix-core/uix/utils';\nimport type { MotionClassNamesWithPhase, MotionHooksWithPhase, MotionInstance, MotionOptions, MotionPhase, MotionType } from '../types';\nimport { getMotionHooks, getMotionMetadata, mergeOptions, resolveClassNames, resolveDuration, setAutoDimensionVariables, shouldSkipMotion } from '../utils';\n\nexport const DEFAULT_MOTION_OPTIONS: MotionOptions = {\n    name: 'p',\n    safe: true,\n    disabled: false,\n    enter: true,\n    leave: true,\n    autoHeight: true,\n    autoWidth: false\n};\n\n/**\n * Creates a MotionInstance for the given element with the specified options.\n * @param element - The target element for motion effects.\n * @param options - Configuration options for the motion instance.\n * @returns A MotionInstance that can be used to control the motion.\n */\nexport function createMotion(element: Element, options?: MotionOptions): MotionInstance {\n    if (!element) throw new Error('Element is required.');\n\n    const opts: MotionOptions = {};\n    let skipMotion = false;\n    let classNames: MotionClassNamesWithPhase = {} as MotionClassNamesWithPhase;\n    let cancelCurrent: (() => void) | null = null;\n    let hooks: MotionHooksWithPhase = {};\n\n    const init = (newOpts?: MotionOptions) => {\n        Object.assign(opts, mergeOptions(newOpts, DEFAULT_MOTION_OPTIONS));\n        if (!opts.enter && !opts.leave) throw new Error('Enter or leave must be true.');\n\n        hooks = getMotionHooks(opts);\n        skipMotion = shouldSkipMotion(opts);\n        classNames = resolveClassNames(opts);\n        cancelCurrent = null;\n    };\n\n    const run = async (phase: MotionPhase): Promise<void> => {\n        cancelCurrent?.();\n\n        const { onBefore, onStart, onAfter, onCancelled } = hooks[phase] || {};\n        const event = { element };\n\n        if (skipMotion) {\n            onBefore?.(event);\n            onStart?.(event);\n            onAfter?.(event);\n\n            return;\n        }\n\n        const { from: fromClass, active: activeClass, to: toClass } = classNames[phase] || {};\n\n        setAutoDimensionVariables(element as HTMLElement, opts.autoHeight, opts.autoWidth);\n\n        onBefore?.(event);\n        addClass(element, fromClass);\n        addClass(element, activeClass);\n\n        //await nextFrame();\n        void (element as HTMLElement).offsetHeight; // force reflow\n\n        removeClass(element, fromClass);\n        addClass(element, toClass);\n        onStart?.(event);\n\n        return new Promise((resolve) => {\n            const duration = resolveDuration(opts.duration, phase);\n\n            const cleanup = () => {\n                removeClass(element, [toClass, activeClass]);\n                cancelCurrent = null;\n            };\n\n            const onDone = () => {\n                cleanup();\n                onAfter?.(event);\n                resolve();\n            };\n\n            cancelCurrent = () => {\n                cleanup();\n                onCancelled?.(event);\n                resolve();\n            };\n\n            whenEnd(element, opts.type, duration, onDone);\n        });\n    };\n\n    init(options);\n\n    const instance: MotionInstance = {\n        enter: () => {\n            if (!opts.enter) return Promise.resolve();\n\n            return run('enter');\n        },\n        leave: () => {\n            if (!opts.leave) return Promise.resolve();\n\n            return run('leave');\n        },\n        cancel: () => {\n            cancelCurrent?.();\n            cancelCurrent = null;\n        },\n        update: (newElement?: Element, newOptions?: MotionOptions) => {\n            if (!newElement) throw new Error('Element is required.');\n\n            element = newElement as HTMLElement;\n            instance.cancel();\n            init(newOptions);\n        }\n    };\n\n    if (opts.appear) instance.enter();\n\n    return instance;\n}\n\nlet endId = 0;\n\n/**\n * Ported from Vue.js Transition Component;\n * @see https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/components/Transition.ts#L348\n *\n * When the transition is triggered, it waits for the end of the motion (transition or animation)\n * @param element - The element to wait for the motion end.\n * @param expectedType - The expected type of motion (transition or animation).\n * @param explicitTimeout - An optional explicit timeout in milliseconds.\n * @param resolve - A function to call when the motion ends.\n * @returns A timeout ID if an explicit timeout is provided, otherwise undefined.\n */\nfunction whenEnd(element: Element & { _motionEndId?: number }, expectedType: MotionType | undefined, explicitTimeout: number | null, resolve: () => void) {\n    const id = (element._motionEndId = ++endId);\n\n    const resolveIfNotStale = () => {\n        if (id === element._motionEndId) {\n            resolve();\n        }\n    };\n\n    if (explicitTimeout != null) {\n        return setTimeout(resolveIfNotStale, explicitTimeout);\n    }\n\n    const { type, timeout, count } = getMotionMetadata(element, expectedType);\n\n    if (!type) {\n        resolve();\n\n        return;\n    }\n\n    const endEvent = type + 'end';\n    let ended = 0;\n\n    const end = () => {\n        element.removeEventListener(endEvent, onEnd, true);\n        resolveIfNotStale();\n    };\n\n    const onEnd = (event: Event) => {\n        if (event.target === element && ++ended >= count) {\n            end();\n        }\n    };\n\n    element.addEventListener(endEvent, onEnd, { capture: true, once: true });\n    setTimeout(() => {\n        if (ended < count) {\n            end();\n        }\n    }, timeout + 1);\n}\n"],"mappings":"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"}