Box

1import * as React from 'react';
2 
3// @interlace/box v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/box
5// What changed since: https://ds.interlace.tools/c/box#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Box
10 *
11 * The lowest-altitude layout primitive: surface + box-model on one element.
12 * Mirrors MUI `<Box>` (a polymorphic, unopinionated wrapper) minus the `sx`
13 * CSS-in-JS prop — Interlace uses a curated, tokenized cva variant set instead,
14 * so it cannot reopen the magic-number problem LAYOUT_PHILOSOPHY closes.
15 * `<Card>` composes `<Box>`, never the reverse; reach for `<Section>` /
16 * `<Container>` for page rhythm.
17 *
18 * | Rule | Concept                          | Where in this file                                   |
19 * | ---- | -------------------------------- | ---------------------------------------------------- |
20 * | R4   | Extends native el + VariantProps | `React.ComponentProps<'div'> & VariantProps<...>`    |
21 * | R6   | data-slot                        | `data-slot="box"` + data-surface                     |
22 * | R7   | className merged + ...rest + ref  | `cn(boxVariants(...), className)` + `{...props}`     |
23 * | R8   | boolean default-false, no isXxx  | `border` boolean variant; surface/padding/radius enums |
24 * | R18  | Tailwind only                    | zero inline style                                    |
25 * | R19  | Tokens only                      | surface→bg-card/muted/accent; padding→p-{--spacing}; radius→rounded-{sm,md,lg} (foundation) |
26 * | R20  | AA contrast                      | every surface ships its paired `text-*-foreground`   |
27 * | R25  | Server component                 | no hooks → no 'use client'                           |
28 *
29 * API parity: MUI `component=` → `as`; MUI `sx` (CSS-in-JS) → tokenized cva +
30 * className (no runtime). No open-ended system props (`mt`/`px`/`bgcolor`).
31 */
32 
33import { cva, type VariantProps } from 'class-variance-authority';
34 
35import { cn } from '@/lib/utils';
36 
37const boxVariants = cva('', {
38  variants: {
39    /** Background + paired foreground (AA token pairs). */
40    surface: {
41      none: '',
42      card: 'bg-card text-card-foreground',
43      muted: 'bg-muted text-muted-foreground',
44      accent: 'bg-accent text-accent-foreground',
45    },
46    /** Padding from the foundation --spacing scale (8/16/24/40/64px). */
47    padding: {
48      none: '',
49      xs: 'p-xs',
50// … truncated