Aspect Ratio

1// Base UI base aspect-ratio — presentational, no headless primitive in any base.
2//
3// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
4// from upstream's `bases/base-ui/ui/aspect-ratio.tsx`, which was not available at port time.
5// `alert` was confirmed byte-identical between the two bases, which is why this is plausible —
6// but it is not proof, and the bases DO diverge elsewhere. Diff the class strings against the
7// upstream source before treating this as ported.
8import { cn } from '@/lib/utils';
9import type { DivProps } from '@/lib/types';
10 
11export interface AspectRatioProps extends DivProps {
12	ratio: number;
13}
14 
15export function AspectRatio({ ratio, className, ...props }: AspectRatioProps) @{
16	<div
17		data-slot="aspect-ratio"
18		style={{
19			'--ratio': ratio,
20		} as Record<string, string | number>}
21		className={cn('relative aspect-(--ratio)', className)}
22		{...props}
23	/>
24}