Aspect Ratio

1import * as React from 'react';
2 
3// @interlace/aspect-ratio v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/aspect-ratio
5// What changed since: https://ds.interlace.tools/c/aspect-ratio#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — AspectRatio
10 *
11 * A single block-level wrapper that reserves space by ratio (CSS
12 * `aspect-ratio`) and stretches to the parent's width. Use it as the *frame*
13 * for media that arrives async — images, video, embeds, charts — so the
14 * surrounding layout never shifts (DESIGN_PRINCIPLES #7, "CLS = 0 from
15 * layout").
16 *
17 * Anatomy: one `div`. Children fill the frame absolutely, or with
18 * `object-cover` on `<img>` / `<video>`.
19 *
20 * | Rule | Concept                          | Where in this file                                   |
21 * | ---- | -------------------------------- | ---------------------------------------------------- |
22 * | R4   | Extends native el                | `React.ComponentProps<'div'>`                        |
23 * | R6   | data-slot on the part            | `data-slot="aspect-ratio"`                           |
24 * | R7   | className merged + ...rest + ref | `cn('relative w-full', className)` + `{...props}` + `forwardRef` |
25 * | R11  | One variable                     | One layout variable: `ratio` (number)                |
26 * | R18  | Tailwind only — except aspect-ratio | Inline `style={{ aspectRatio: ratio }}` is unavoidable here — Tailwind has no class for an arbitrary runtime ratio short of `aspect-[w/h]` JIT, which can't accept a runtime number. This is the documented carve-out. |
27 * | R19  | Tokens only                      | No color/spacing/radius/type — pure layout primitive  |
28 * | R25  | Server component                 | No hooks; safe inside any RSC tree                   |
29 *
30 * MIN_VIEWPORT = 320 — pure CSS aspect-ratio works at every viewport; the
31 * frame just scales to whatever width the parent offers. The 320px floor is
32 * the design-system baseline for "smallest viable viewport" (iPhone SE
33 * portrait); below it, preflight's `body[data-interlace-dev]` outline warns.
34 *
35 * API parity: Radix / shadcn `AspectRatio` (`ratio` number). Native CSS
36 * `aspect-ratio` has 95%+ global support (caniuse, 2026), so this primitive
37 * is a single `<div>` — no padding-bottom hack, no extra wrapper.
38 */
39 
40import { cn } from '@/lib/utils';
41 
42// … truncated