Figure

1import * as React from 'react';
2 
3// @interlace/figure v1.0.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/figure
5// What changed since: https://ds.interlace.tools/c/figure#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Figure + FigureCaption
10 *
11 * Semantic media block. `<figure>` is the right element for *self-contained*
12 * media (image, diagram, code screenshot, chart) with an optional caption
13 * that scrolls with it. Composes `AspectRatio` so the layout reserves space
14 * before the asset loads — preventing the cumulative-layout-shift class of
15 * bugs that the LOADING_PHILOSOPHY explicitly forbids.
16 *
17 * `alt` is **required** at the type level. There is no opt-out: a media block
18 * without alt text is an a11y bug per WCAG 1.1.1, and the type system makes
19 * it a compile error instead of a lint warning.
20 *
21 * ## Anatomy
22 *
23 *   Figure                              (figure — data-min-viewport=320)
24 *     ├─ AspectRatio ratio=16/9         (frame, prevents CLS)
25 *     │   └─ {children ?? <img src alt>}
26 *     └─ FigureCaption                  (figcaption — auto when `caption` set)
27 *
28 * ## MIN_VIEWPORT — 320
29 *
30 * Inline media must remain legible on the smallest supported viewport;
31 * AspectRatio scales to whatever width the parent offers, and the caption
32 * is a plain text node that flows naturally.
33 *
34 * | Rule | Concept                          | Where in this file                                          |
35 * | ---- | -------------------------------- | ----------------------------------------------------------- |
36 * | R4   | Extends native el                | `React.ComponentProps<'figure'>` / `'figcaption'`           |
37 * | R6   | data-slot on root                | `data-slot="figure"` / `data-slot="figure-caption"`         |
38 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}`                        |
39 * | R8   | No isXxx; enums only             | n/a — no boolean variants                                   |
40 * | R10  | Composition seam                 | `children` overrides default `<img>` for diagrams / embeds  |
41 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
42 * | R18  | Tailwind only                    | Zero inline style                                           |
43// … truncated