index.mjs
1.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// packages/react/aspect-ratio/src/aspect-ratio.tsx
import * as React from "react";
import { Primitive } from "@radix-ui/react-primitive";
import { jsx } from "react/jsx-runtime";
var NAME = "AspectRatio";
var AspectRatio = 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.displayName = NAME;
var Root = AspectRatio;
export {
AspectRatio,
Root
};
//# sourceMappingURL=index.mjs.map