ivt/dist/aspect-ratio/index.mjs

Ivt Components Library

import * as React from 'react';
import { P as Primitive } from '../chunks/index-DgKlJYZP.mjs';
import { jsx } from 'react/jsx-runtime';
import 'react-dom';
import '@radix-ui/react-slot';

// src/aspect-ratio.tsx
var NAME = "AspectRatio";
var AspectRatio$1 = 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$1.displayName = NAME;
var Root = AspectRatio$1;

function AspectRatio({ ...props }) {
    return /*#__PURE__*/ React.createElement(Root, {
        "data-slot": "aspect-ratio",
        ...props
    });
}

export { AspectRatio };
//# sourceMappingURL=index.mjs.map