AspectRatio Variants (cva config)

Purpose

aspectRatioVariants is the cva (class-variance-authority) configuration powering the <AspectRatio> outer wrapper. It is split from aspect-ratio.tsx into its own module so an ejected source copy under npx shadcn@latest add @suaveplan/aspect-ratio keeps the cva configuration in a dedicated file. Theme overrides flow through useThemedVariants("AspectRatio").

The cva is intentionally minimal — no axes, no parameters. Radix already constrains the inner box via inline padding-bottom, so the only chassis decision is the structural wrapper recipe (relative w-full overflow-hidden).

Features

Single class string: relative w-full overflow-hidden.
relative so embedded absolute inset-0 children (iframes) anchor correctly.
w-full so the wrapper fills the parent width by default; consumers can override.
overflow-hidden so rounded corners on the wrapper clip embedded media cleanly.
NEVER carries a numeric z-index (stacking is managed by the surrounding overlay primitive).

Usage: Basic Example

import { aspectRatioVariants } from "@suaveplan/react-ui";

const className = aspectRatioVariants();

Usage: Advanced Example

import { aspectRatioVariants, cn } from "@suaveplan/react-ui";

export function CustomMediaTile() {
    return (
        <div
            className={cn(
                aspectRatioVariants(),
                "rounded-2xl border-2 border-primary"
            )}
            style={{ aspectRatio: "16 / 9" }}
        >
            …
        </div>
    );
}

API Reference

`aspectRatioVariants(): string`

Returns the chassis wrapper class string. No arguments — the variant config has no axes.

Implementation Notes

The cva exists primarily so a ThemePlugin may declare an override via variantOverrides.AspectRatio to swap the recipe (e.g. add rounded-md by default in a "soft" theme variant). When no theme override is registered, the base recipe is returned verbatim.
Per the shadcn skill rule, the cva NEVER assigns a numeric z-index. Radix's primitive does not portal the box, so stacking remains under the consumer's surrounding layout.
The cva does not include block because Radix's primitive renders an inline-styled <div> that already lays out as a block element.

2.3 KiB Raw Blame History