svelte-kit-vice/web/routes/uix/components/box/+page.svelte

<script lang="ts">
	import { Box } from '$uix/eidos/components/box';
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Layout · Box</div>
		<h1 data-uix-page-title>Box</h1>
		<p data-uix-page-lede>
			Universal box-model utility. Every prop maps to a CSS custom property; unset
			props fall through to the normal cascade.
		</p>
	</header>

	<section>
		<h2>Live example</h2>
		<Box
			padding={4}
			maxWidth={480}
			display="flex"
			gap={3}
			style="background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px"
		>
			<Box padding={2} style="background: var(--color-surface-2); border-radius: 4px">
				Cell A
			</Box>
			<Box padding={2} style="background: var(--color-surface-2); border-radius: 4px">
				Cell B
			</Box>
			<Box padding={2} style="background: var(--color-surface-2); border-radius: 4px">
				Cell C
			</Box>
		</Box>
	</section>

	<section>
		<h2>Props</h2>
		<table>
			<thead>
				<tr>
					<th>Prop</th>
					<th>Type</th>
					<th>Notes</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>display</code></td>
					<td>LayoutDisplay</td>
					<td>block · inline · flex · grid · …</td>
				</tr>
				<tr>
					<td><code>width</code> / <code>minWidth</code> / <code>maxWidth</code></td>
					<td>number | string</td>
					<td>number → px, string passes through</td>
				</tr>
				<tr>
					<td><code>height</code> / <code>minHeight</code> / <code>maxHeight</code></td>
					<td>number | string</td>
					<td>same as above</td>
				</tr>
				<tr>
					<td><code>padding</code> / <code>paddingX</code> / <code>paddingY</code></td>
					<td>number | string</td>
					<td>number → <code>var(--space-N)</code></td>
				</tr>
				<tr>
					<td>
						<code>paddingTop</code> / <code>paddingRight</code> /
						<code>paddingBottom</code> / <code>paddingLeft</code>
					</td>
					<td>number | string</td>
					<td>per-side overrides</td>
				</tr>
				<tr>
					<td><code>margin</code> / <code>marginX</code> / <code>marginY</code> / sides</td>
					<td>number | string</td>
					<td>same mapping as padding</td>
				</tr>
				<tr>
					<td><code>gap</code></td>
					<td>number | string</td>
					<td>for flex/grid containers</td>
				</tr>
				<tr>
					<td>
						<code>position</code> / <code>top</code> / <code>right</code> /
						<code>bottom</code> / <code>left</code>
					</td>
					<td>various</td>
					<td>position + insets</td>
				</tr>
				<tr>
					<td><code>inset</code> / <code>insetX</code> / <code>insetY</code></td>
					<td>number | string</td>
					<td>shorthand insets</td>
				</tr>
				<tr>
					<td><code>overflow</code> / <code>overflowX</code> / <code>overflowY</code></td>
					<td>LayoutOverflow</td>
					<td>visible · hidden · clip · scroll · auto</td>
				</tr>
				<tr>
					<td>
						<code>flex</code> / <code>grow</code> / <code>shrink</code> / <code>basis</code> /
						<code>order</code> / <code>alignSelf</code> / <code>justifySelf</code>
					</td>
					<td>various</td>
					<td>item-side flex/grid props</td>
				</tr>
				<tr>
					<td><code>style</code></td>
					<td>string</td>
					<td>extra inline style; merged after Box vars</td>
				</tr>
			</tbody>
		</table>
	</section>

	<section>
		<h2>Reference</h2>
		<ul>
			<li>
				<strong>radix-themes Box</strong> — same idea: token-driven shorthand for the
				box model; we mirror the responsive prop shape.
			</li>
			<li>
				<strong>chakra-ui Box</strong> — origin of the per-side / shorthand prop split
				(<code>paddingX</code>, <code>paddingY</code>, …).
			</li>
		</ul>
	</section>
</div>