"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { getMotionVar } from "../../css-tokens/dist/index.js";
import { SPRING_MOTION_DEFAULTS, motion } from "../../motion-tokens/dist/index.js";
import { useAvoidMotionLibrary } from "../experimental/client/AvoidMotionLibraryProvider.js";
import { useEffect, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { LazyMotion, MotionConfig } from "motion/react";

//#region src/components/client/SpringMotionConfig.tsx
const LAYOUT_VARIANT = SPRING_MOTION_DEFAULTS.layoutVariant;
const LAYOUT_SPEED = SPRING_MOTION_DEFAULTS.layoutSpeed;
const COLOR_VARIANT = SPRING_MOTION_DEFAULTS.colorVariant;
const COLOR_SPEED = SPRING_MOTION_DEFAULTS.colorSpeed;
const defaultLoadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domAnimation").then(({ domAnimation }) => domAnimation);
/**
* **🎬 Spring Motion Config to define motion animations for all UDS components**
*
* @componentType Client component
*
* @description
* The SpringConfig component provides a way to configure the spring animations for the entire application.
* This component provides a way to use uds motion configs with Framer Motion.
*/
function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = defaultLoadFeatures, layoutVariant = LAYOUT_VARIANT, layoutSpeed = LAYOUT_SPEED, colorVariant = COLOR_VARIANT, colorSpeed = COLOR_SPEED }) {
	const initialLayoutConfig = motion[layoutVariant][layoutSpeed];
	const initialColorConfig = motion[colorVariant][colorSpeed];
	const [layoutConfig, setLayoutConfig] = useState(initialLayoutConfig);
	const [colorConfig, setColorConfig] = useState(initialColorConfig);
	const colorVarConfig = {
		variant: colorVariant,
		speed: colorSpeed
	};
	const colorStiffnessVar = getMotionVar({
		...colorVarConfig,
		control: "stiffness"
	});
	const colorDampingVar = getMotionVar({
		...colorVarConfig,
		control: "damping"
	});
	const layoutVarConfig = {
		variant: layoutVariant,
		speed: layoutSpeed
	};
	const layoutStiffnessVar = getMotionVar({
		...layoutVarConfig,
		control: "stiffness"
	});
	const layoutDampingVar = getMotionVar({
		...layoutVarConfig,
		control: "damping"
	});
	useEffect(() => {
		const globalComputedStyles = getComputedStyle(document.documentElement);
		const layoutValues = {
			type: "spring",
			damping: Number(globalComputedStyles.getPropertyValue(layoutDampingVar)),
			stiffness: Number(globalComputedStyles.getPropertyValue(layoutStiffnessVar))
		};
		const colorValues = {
			type: "spring",
			damping: Number(globalComputedStyles.getPropertyValue(colorDampingVar)),
			stiffness: Number(globalComputedStyles.getPropertyValue(colorStiffnessVar))
		};
		setLayoutConfig(layoutValues);
		setColorConfig(colorValues);
	}, [
		colorDampingVar,
		colorStiffnessVar,
		layoutDampingVar,
		layoutStiffnessVar
	]);
	const transition = useMemo(() => ({
		type: "spring",
		mass: 1,
		...layoutConfig,
		layout: layoutConfig,
		opacity: colorConfig,
		color: colorConfig,
		borderColor: colorConfig,
		backgroundColor: colorConfig
	}), [colorConfig, layoutConfig]);
	if (useAvoidMotionLibrary()) return children;
	return /* @__PURE__ */ jsx(LazyMotion, {
		features: loadFeatures,
		strict: true,
		children: /* @__PURE__ */ jsx(MotionConfig, {
			transition,
			reducedMotion,
			children
		})
	});
}
SpringMotionConfig.displayName = "SpringMotionConfig";

//#endregion
export { SpringMotionConfig };