Registry Item Template

1import * as React from 'react';
2 
3// @interlace/registry-item-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/registry-item-template
5// What changed since: https://ds.interlace.tools/c/registry-item-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — RegistryItemTemplate
10 *
11 * Full-page surface for a single registry item's documentation
12 * (`/c/[name]` on ds.interlace.tools). Composes the header (item name +
13 * description + install snippet), the anatomy diagram, the variants
14 * matrix, related-components grid, and a CTA back to the registry —
15 * each in its own `<SectionBoundary>` so the page streams
16 * section-by-section.
17 *
18 * The DS eats its own dog food here: the registry app's `/c/[name]/page.tsx`
19 * uses this template instead of hand-rolling the layout per-item.
20 *
21 * ## Anatomy
22 *
23 *   <article data-slot="registry-item-template" data-min-viewport="320">
24 *     <Container size="content">
25 *       <SectionBoundary name="registry-item-header">
26 *         Header: name + description + install command
27 *       </SectionBoundary>
28 *       <SectionBoundary name="registry-item-anatomy">
29 *         Anatomy / API surface
30 *       </SectionBoundary>
31 *       <SectionBoundary name="registry-item-variants">
32 *         Variant matrix (CVA-driven)
33 *       </SectionBoundary>
34 *       <SectionBoundary name="registry-item-related">
35 *         Related components
36 *       </SectionBoundary>
37 *     </Container>
38 *   </article>
39 *
40 * ## MIN_VIEWPORT — 320
41 *
42 * Container.content collapses to full width below 1024; the template
43 * layout is fluid down to 320 CSS-px.
44 *
45 * | Rule | Concept                          | Where in this file                                          |
46 * | ---- | -------------------------------- | ----------------------------------------------------------- |
47 * | R4   | Extends native el                | `React.ComponentProps<'article'>` + template props          |
48 * | R6   | data-slot on root                | `data-slot="registry-item-template"`                        |
49 * | R7   | className merged + ...rest       | `cn(className)` + `{...props}` on <article>                 |
50 * | R10  | Composition seam (slots)         | `header` / `anatomy` / `variants` / `related` ReactNode props |
51 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}`                  |
52// … truncated