@yamada-ui/react/dist/esm/components/aspect-ratio/aspect-ratio.js

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

"use client";


import { utils_exports } from "../../utils/index.js";
import { createComponent } from "../../core/components/create-component.js";
import { aspectRatioStyle } from "./aspect-ratio.style.js";
import { Children } from "react";

//#region src/components/aspect-ratio/aspect-ratio.tsx
const { PropsContext: AspectRatioPropsContext, usePropsContext: useAspectRatioPropsContext, withContext } = createComponent("aspect-ratio", aspectRatioStyle);
/**
* `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
*
* @see https://yamada-ui.com/docs/components/aspect-ratio
*/
const AspectRatio = withContext("div")(void 0, ({ children, ratio = 4 / 3,...rest }) => {
	const child = Children.only(children);
	return {
		...rest,
		children: child,
		_before: {
			display: "block",
			h: 0,
			pb: (0, utils_exports.replaceObject)(ratio, (r) => `${1 / r * 100}%`)
		}
	};
});

//#endregion
export { AspectRatio, AspectRatioPropsContext, useAspectRatioPropsContext };
//# sourceMappingURL=aspect-ratio.js.map