Box

Full-area frame with optional left/right borders only; diamond or Connector corners like Container, no full-width horizontal rules.

O Box é uma moldura para preencher o espaço disponível (h-full min-h-0, tipicamente dentro de um flex): sem linhas horizontais de ponta a ponta; apenas bordas verticais nos lados que escolheres (sides). Nos cantos que tocam esses lados, a mesma lógica do Container: losango (diamond), um Connector por canto (connector) ou vertices personalizados.

Importação

import { Box, type BoxProps, type BoxSides } from "@zexon/ui/components/box";

Dois lados (predefinição)

Losango

Conteúdo; moldura só com verticais esquerda e direita

Só borda esquerda + connector

Só esquerda

Apenas traço à esquerda; cantos só nesse lado.

Props

Prop	Tipo	Predefinição	Notas
`sides`	`{ left?: boolean; right?: boolean }`	ambos `true`	Mescla com predefinição; `false` desliga o lado.
`corners`	`boolean` ou mapa por canto	`true`	Só afeta cantos que já têm lado ativo.
`vertices`	mapa por canto → `ReactNode \| null`	—	Igual ao `Container`.
`cornerDecoration`	`"diamond"` \| `"connector"` \| `"none"`	`"diamond"`
`cornerClassName`	`string`	—	Cor/tamanho da decoração.
`ruleClassName`	`string`	—	Classes extra nas bordas verticais (ex.: `border-primary/40`).
`innerClassName`	`string`	—	Padding ou outras classes no contentor interior.

Demais props repassam-se ao div exterior.

Badge

Breadcrumb