Container

1import * as React from 'react';
2 
3// @interlace/container v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/container
5// What changed since: https://ds.interlace.tools/c/container#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Container
10 *
11 * The width contract from LAYOUT_PHILOSOPHY.md §2: four sizes only, each
12 * mapped to one fixed max-width, plus the responsive horizontal padding scale
13 * `px-4 sm:px-6 lg:px-8` (§5).
14 *
15 * It is what every page section is measured by — the ad-hoc widths that would
16 * otherwise accumulate in app code are the thing it exists to retire.
17 *
18 * ## The four sizes
19 *
20 *   | size      | max-width | Use                                  |
21 *   | --------- | --------- | ------------------------------------ |
22 *   | `prose`   | 65ch      | Long-form text (rule docs, articles) |
23 *   | `content` | 1024px    | Default for landing sections         |
24 *   | `wide`    | 1280px    | Card-grid heavy sections             |
25 *   | `full`    | none      | Full-bleed hero, decorative bands    |
26 *
27 * `full` also zeroes the padding at every breakpoint, so a full-bleed band is
28 * genuinely edge-to-edge rather than a wide box with gutters.
29 *
30 * ## Anatomy
31 *
32 *   Container                        (div by default, or the `render` element)
33 *     └─ children                    (data-size carries the chosen size)
34 *
35 * ## Two things worth knowing
36 *
37 *   - Named Tailwind widths are BROKEN in this codebase: `foundation.css`
38 *     defines `--spacing-xs…2xl`, and Tailwind v4 resolves a named max-width
39 *     against the spacing namespace first — so the one that should be 42rem
40 *     renders 96 pixels instead. That is why the sizes here are literal
41 *     values, and why `spacing-token-shadowing-lock` fails any source line
42 *     that names one (including this comment, which is why it does not).
43 *   - No `'use client'`, and that is the point rather than an oversight. A
44 *     doc pass flagged it against `badge.tsx`, which calls the same
45 *     `useRender` and does declare the directive — but `useRender` is
46 *     server-safe: `@base-ui/react/use-render` ships no `'use client'` of its
47 *     own, and `useRenderElement` guards its single hook behind
48 *     `typeof document !== 'undefined'` ("skips the `useMergedRefs` call on
49 *     the server"). DESIGN_PRINCIPLES #11 names the layout primitives as
50// … truncated