Separator

Separator é uma divisória visual leve. Use para separar seções relacionadas dentro de uma mesma superfície — dentro de um card, entre itens de um menu, ou como delimitador inline numa toolbar.

import { Separator } from '@uranus-workspace/design-system';

export default function SeparatorDefault() {
  return (
    <div className="w-[360px]">
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Uranus Design System</h4>
        <p className="text-sm text-muted-foreground">
          Componentes reutilizáveis para produtos Uranus.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Documentação</div>
        <Separator orientation="vertical" />
        <div>Storybook</div>
        <Separator orientation="vertical" />
        <div>GitHub</div>
      </div>
    </div>
  );
}

Anatomia

• Separator — um único componente. Aceita orientation="horizontal" (padrão) ou "vertical" e a prop decorative.

Uso

import { Separator } from '@uranus-workspace/design-system';

<Separator className="my-4" />

<div className="flex h-5 items-center space-x-4">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>GitHub</span>
</div>

Separadores verticais precisam de um pai com altura definida — normalmente um flex com altura explícita ou items-center.

Faça

• Use decorative={false} quando a linha separa genuinamente dois grupos semânticos (ex.: entre campos obrigatórios e opcionais de um formulário). Por padrão o Separator é decorativo.
• Prefira espaçamento (margin/padding) para hierarquia de conteúdo — a linha entra apenas quando o espaço já está tenso.

Não faça

• Não use separadores múltiplos empilhados como "linha mais grossa" — ajuste a cor via token.
• Não substitua headings por separadores. Separador não é hierarquia.

Acessibilidade

• Quando decorative é true (padrão), o componente recebe role="none" — não aparece no rascunho de acessibilidade.
• Quando decorative={false}, vira role="separator" com a orientação correta.