ivt/dist/aspect-ratio/index.mjs

Ivt Components Library

import * as React from 'react';
import 'react-dom';
import { createSlot } from '@radix-ui/react-slot';
import { jsx } from 'react/jsx-runtime';

// src/primitive.tsx
var NODES = [
    "a",
    "button",
    "div",
    "form",
    "h2",
    "h3",
    "img",
    "input",
    "label",
    "li",
    "nav",
    "ol",
    "p",
    "select",
    "span",
    "svg",
    "ul"
];
var Primitive = NODES.reduce((primitive, node)=>{
    const Slot = createSlot(`Primitive.${node}`);
    const Node = React.forwardRef((props, forwardedRef)=>{
        const { asChild, ...primitiveProps } = props;
        const Comp = asChild ? Slot : node;
        if (typeof window !== "undefined") {
            window[Symbol.for("radix-ui")] = true;
        }
        return /* @__PURE__ */ jsx(Comp, {
            ...primitiveProps,
            ref: forwardedRef
        });
    });
    Node.displayName = `Primitive.${node}`;
    return {
        ...primitive,
        [node]: Node
    };
}, {});

// 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