import { cn } from "./cva.js";
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { jsx } from "react/jsx-runtime";
//#region src/AspectRatio.tsx
const AspectRatio = React.forwardRef(({ asChild, children, className, gap = "4", ratio = 16 / 9, style, ...props }, ref) => {
	const Comp = asChild ? Slot : "div";
	const aspectStyle = {
		"--aspect-gap": `var(--mod-space-${gap})`,
		aspectRatio: `${ratio}`,
		minWidth: 0,
		paddingBlock: "var(--aspect-gap)",
		...style
	};
	return /* @__PURE__ */ jsx(Comp, {
		ref,
		className: cn("@container grid min-w-0 overflow-hidden rounded-md bg-surface", className),
		style: aspectStyle,
		...props,
		children: /* @__PURE__ */ jsx("div", {
			className: "min-w-0",
			children
		})
	});
});
AspectRatio.displayName = "AspectRatio";
//#endregion
export { AspectRatio };
