Aspect Ratio

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cloneElement, isValidElement } from "hono/jsx"
4import { cn, type ClassValue } from "@/registry/lib/cn"
5 
6// Aspect Ratio — shadcn-htmx, htmx v4 + Tailwind v4.
7//
8// A ratio-box wrapper that locks a child (image / video / iframe / embed /
9// chart slot) to a fixed width-to-height ratio while it resizes fluidly,
10// eliminating layout shift. One CSS declaration does all the work — there
11// is no JavaScript here.
12//
13// shadcn/ui's upstream AspectRatio wraps Radix's primitive, which predates
14// native browser support and emulates the ratio with a padding-bottom hack
15// + absolute positioning. We do NOT copy that: the platform now ships the
16// real thing, so we use the native CSS `aspect-ratio` property instead. No
17// hacks (see AGENTS.md rule 4).
18//   Upstream (anatomy only):
19//     repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/aspect-ratio.tsx
20//
21// Built on:
22//   - CSS `aspect-ratio` — defines the desired width-to-height ratio of the
23//     box; the browser keeps it as the box resizes. At least one of the
24//     box's sizes must be automatic for it to take effect (we leave height
25//     auto, width fluid).
26//       repos/mdn/files/en-us/web/css/reference/properties/aspect-ratio/index.md
27//   - CSS `object-fit` — how a replaced element (img/video) fills the box:
28//     `cover` crops to fill, `contain` letterboxes to fit. Note object-fit
29//     has no effect on <iframe>/<embed>, which already stretch to the box.
30//       repos/mdn/files/en-us/web/css/reference/properties/object-fit/index.md
31//   - web.dev "Aspect ratio image card" pattern (`aspect-ratio: 16 / 9`,
32//     no padding-top hack):
33//       repos/web.dev/src/site/content/en/patterns/layout/aspect-ratio-image-card/index.md
34//
35// Tailwind v4: `aspect-video` = 16/9, `aspect-square` = 1/1; any other
36// ratio is the arbitrary `aspect-[w/h]` utility. `object-cover` /
37// `object-contain` map to the object-fit keywords.
38 
39export type AspectRatioFit = "cover" | "contain"
40 
41// Named ratios mapped to Tailwind's stock aspect utilities; everything else
42// falls through to the arbitrary `aspect-[w/h]` form below.
43const NAMED_RATIO: Record<string, string> = {
44  "1/1": "aspect-square",
45  "16/9": "aspect-video",
46}
47 
48const fitClasses: Record<AspectRatioFit, string> = {
49  cover: "object-cover",
50  contain: "object-contain",
51}
52 
53// Turn a ratio prop into a Tailwind class. Accepts:
54//   - a number   → 1.78        → aspect-[1.78]
55// … truncated