@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
35 lines (31 loc) • 1.38 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_aspect_ratio_style = require('./aspect-ratio.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/aspect-ratio/aspect-ratio.tsx
const { PropsContext: AspectRatioPropsContext, usePropsContext: useAspectRatioPropsContext, withContext } = require_create_component.createComponent("aspect-ratio", require_aspect_ratio_style.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 = react.Children.only(children);
return {
...rest,
children: child,
_before: {
display: "block",
h: 0,
pb: (0, require_utils_index.utils_exports.replaceObject)(ratio, (r) => `${1 / r * 100}%`)
}
};
});
//#endregion
exports.AspectRatio = AspectRatio;
exports.AspectRatioPropsContext = AspectRatioPropsContext;
exports.useAspectRatioPropsContext = useAspectRatioPropsContext;
//# sourceMappingURL=aspect-ratio.cjs.map