import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { P as Primitive } from '../index-DhnfW8wQ.js';
import 'react-dom';
import '../index-BtkPdosV.js';

// src/aspect-ratio.tsx
var NAME = "AspectRatio";
var AspectRatio$2 = React.forwardRef(
  (props, forwardedRef) => {
    const { ratio = 1 / 1, style, ...aspectRatioProps } = props;
    return /* @__PURE__ */ jsx(
      "div",
      {
        style: {
          // ensures inner element is contained
          position: "relative",
          // ensures padding bottom trick maths works
          width: "100%",
          paddingBottom: `${100 / ratio}%`
        },
        "data-radix-aspect-ratio-wrapper": "",
        children: /* @__PURE__ */ jsx(
          Primitive.div,
          {
            ...aspectRatioProps,
            ref: forwardedRef,
            style: {
              ...style,
              // ensures children expand in ratio
              position: "absolute",
              top: 0,
              right: 0,
              bottom: 0,
              left: 0
            }
          }
        )
      }
    );
  }
);
AspectRatio$2.displayName = NAME;
var Root = AspectRatio$2;

function AspectRatio$1({ ...props }) {
    return jsx(Root, { "data-slot": "aspect-ratio", ...props });
}

const AspectRatio = (props) => (jsx(AspectRatio$1, { ...props }));

export { AspectRatio };
//# sourceMappingURL=AspectRatio.js.map
