@carbon/react/es/components/AspectRatio/AspectRatio.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { usePrefix } from "../../internal/usePrefix.js";
import classNames from "classnames";
import "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
//#region src/components/AspectRatio/AspectRatio.tsx
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* The AspectRatio component provides a `ratio` prop that will be used to
* specify the aspect ratio that the children you provide will be displayed in.
* This is often useful alongside our grid components, or for media assets like
* images or videos.
*/
const AspectRatio = ({ as: BaseComponent = "div", className: containerClassName, children, ratio = "1x1", ...rest }) => {
	const prefix = usePrefix();
	return /* @__PURE__ */ jsx(BaseComponent, {
		className: classNames(containerClassName, `${prefix}--aspect-ratio`, `${prefix}--aspect-ratio--${ratio}`),
		...rest,
		children
	});
};
AspectRatio.propTypes = {
	as: PropTypes.elementType,
	children: PropTypes.node,
	className: PropTypes.string,
	ratio: PropTypes.oneOf([
		"16x9",
		"9x16",
		"2x1",
		"1x2",
		"4x3",
		"3x4",
		"3x2",
		"2x3",
		"1x1"
	])
};
//#endregion
export { AspectRatio as default };