Container

Layout wrapper with horizontal/vertical rules and diamond (four Connectors) or single Connector at vertices.

Contentor estilo diagrama técnico/retro: linhas horizontais de ponta a ponta, verticais nas bordas do container, e nos cantos um losango feito com quatro Connector em grelha 2×2, ou um único triângulo com cornerDecoration="connector". A decoração em cada canto fica centrada no cruzamento das linhas. Cor por defeito: text-border.

Importação

import {
	Container,
	type ContainerProps,
} from "@zexon/ui/components/container";

Losango (4 conectores)

Padrão

Losango = quatro triângulos Connector nos cantos do bloco

Só um triângulo por canto

connector

Um Connector por vértice (sem losango composto)

Sem verticais

Só horizontais

Linhas horizontais e marcas nos cantos

Separador central

Linha ao meio do contentor interno: separator="horizontal" (largura total) ou separator="vertical" (altura total). Com conectores, em cada extremo da linha há dois triângulos espelhados (acima/abaixo no horizontal; esquerda/direita no vertical). separatorConnectors={false} remove todos.

horizontal + conectores

Conteúdo; a linha fica por cima ao centro

Vértice personalizado

vertices

Canto com Badge; os outros mantêm o losango

Props

Prop	Tipo	Predefinição	Notas
`corners`	`boolean` ou mapa por canto	`true`	Desliga cantos com `false` ou `{ topLeft: false, … }`.
`vertices`	mapa por canto → `ReactNode \| null`	—	Substitui decoração nesse canto; `null` força canto vazio.
`cornerDecoration`	`"diamond"` \| `"connector"` \| `"none"`	`"diamond"`	`diamond` = grelha 2×2 de `Connector`; `connector` = um triângulo por canto.
`cornerClassName`	`string`	—	Cor e tamanho (`text-`, `size-` no losango ou no connector).
`ruleTop`	`boolean`	`true`	Linha horizontal superior (ponta a ponta).
`ruleBottom`	`boolean`	`true`	Linha horizontal inferior (ponta a ponta).
`ruleLeft`	`boolean`	`true`	Linha vertical à esquerda do `container` interno.
`ruleRight`	`boolean`	`true`	Linha vertical à direita do `container` interno.
`ruleClassName`	`string`	—	Cor/espessura das linhas (`bg-*`, `h-px`).
`innerClassName`	`string`	—	Classe do `div` com `container mx-auto`.
`separator`	`"horizontal"` \| `"vertical"` \| `false`	`false`	Linha divisória ao centro (largura ou altura).
`separatorConnectors`	`boolean`	`true`	Quatro `Connector` (dois em cada extremo, fechando os dois lados da linha).
`separatorClassName`	`string`	—	Cor/espessura só da linha do separador (sobrepõe parte de `ruleClassName`).

Demais props repassam-se ao div raiz.

Connector

Context Menu