@yamada-ui/react/dist/cjs/hooks/use-animation/index.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_system_provider = require('../../core/system/system-provider.cjs');
const require_animation = require('../../core/css/animation.cjs');
const require_css = require('../../core/css/css.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/hooks/use-animation/index.ts
/**
* `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.
*
* @see https://yamada-ui.com/docs/hooks/use-animation
*/
const useAnimation = (cssObj) => {
	const system = require_system_provider.useSystem();
	if ((0, require_utils_index.utils_exports.isArray)(cssObj)) return cssObj.map((cssObj$1) => require_animation.animation(cssObj$1, {
		css: require_css.css,
		system
	})).join(", ");
	else return require_animation.animation(cssObj, {
		css: require_css.css,
		system
	});
};
/**
* `useDynamicAnimation` is a custom hook used to switch animations.
*
* @see https://yamada-ui.com/docs/hooks/use-dynamic-animation
*/
const useDynamicAnimation = (arrayOrObj, init) => {
	const system = require_system_provider.useSystem();
	const keys = (0, react.useRef)(!(0, require_utils_index.utils_exports.isUndefined)(init) ? (0, require_utils_index.utils_exports.isArray)(init) ? init.map(String) : String(init) : void 0);
	const cache = (0, react.useRef)(/* @__PURE__ */ new Map());
	const [animations, setAnimations] = (0, react.useState)(() => {
		for (const [key, styles] of Object.entries(arrayOrObj)) {
			if (cache.current.has(key)) return;
			if ((0, require_utils_index.utils_exports.isArray)(styles)) cache.current.set(key, styles.map((style) => require_animation.animation(style, {
				css: require_css.css,
				system
			})).join(", "));
			else cache.current.set(key, require_animation.animation(styles, {
				css: require_css.css,
				system
			}));
		}
		if ((0, require_utils_index.utils_exports.isArray)(keys.current)) return keys.current.map((key) => cache.current.get(key)).join(", ");
		else return cache.current.get(keys.current ?? "");
	});
	return [animations, (0, react.useCallback)((keysOrFunc) => {
		const keyOrArray = (0, require_utils_index.utils_exports.runIfFn)(keysOrFunc, (() => {
			if (!(0, require_utils_index.utils_exports.isUndefined)(keys.current) && (0, require_utils_index.utils_exports.isArray)(arrayOrObj)) return (0, require_utils_index.utils_exports.isArray)(keys.current) ? keys.current.map(Number) : Number(keys.current);
			else return keys.current;
		})());
		keys.current = (0, require_utils_index.utils_exports.isArray)(keyOrArray) ? keyOrArray.map(String) : String(keyOrArray);
		if ((0, require_utils_index.utils_exports.isArray)(keys.current)) setAnimations(keys.current.map((key) => cache.current.get(key)).join(", "));
		else setAnimations(cache.current.get(keys.current));
	}, [arrayOrObj])];
};

//#endregion
exports.useAnimation = useAnimation;
exports.useDynamicAnimation = useDynamicAnimation;
//# sourceMappingURL=index.cjs.map