import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';

/**
 * AspectRatio component maintains a specific width-to-height ratio for its children.
 *
 * @component
 * @example
 * ```tsx
 * <AspectRatio ratio={16 / 9}>
 *   <img src="photo.jpg" alt="Landscape" className="object-cover w-full h-full" />
 * </AspectRatio>
 * ```
 */
const AspectRatio = React__default.forwardRef(({ ratio = 1, children, className, style, ...props }, ref) => {
    return (jsx("div", { ref: ref, className: cn("relative w-full", className), style: {
            paddingBottom: `${100 / ratio}%`,
            ...style,
        }, ...props, children: jsx("div", { className: "absolute inset-0", children: children }) }));
});
AspectRatio.displayName = "AspectRatio";

export { AspectRatio };
