Sheet

Painel lateral deslizante. Usado extensivamente no SYSGO para criar, editar e visualizar detalhes de registros. Construído sobre Radix UI Dialog com sticky header/footer e backdrop blur.

import {
  Sheet, SheetTrigger, SheetContent,
  SheetHeader, SheetTitle, SheetDescription,
  SheetFooter,
} from "@workspace/ui/components/sheet";

<Sheet open={open} onOpenChange={setOpen}>
  <SheetContent className="overflow-y-auto sm:max-w-[540px]">
    <SheetHeader className="sticky top-0 z-40 flex h-12 w-full flex-row items-center justify-between border-b bg-background/40 px-6 backdrop-blur-md">
      <SheetTitle>Título</SheetTitle>
    </SheetHeader>

    <div className="space-y-6 px-6 py-6">
      {/* conteúdo */}
    </div>

    <SheetFooter className="sticky bottom-0 flex h-14 w-full flex-row items-center justify-end gap-2 border-t bg-background/10 px-6 backdrop-blur-md">
      <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
      <Button type="submit">Salvar</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Formulário de edição

Sheet padrão do SYSGO para editar registros. Sticky header com backdrop-blur, formulário com seções e sticky footer com ações.

Visualização de detalhes

Sheet para exibir detalhes de registros. Header com botão de fechar (ChevronsRight) e ações (editar/excluir). Avatar, badges, seções com ícones e título sr-only.

Larguras por contexto

Convenção de larguras no SYSGO.

Contexto	Largura	Exemplo
Formulário complexo	`sm:max-w-3xl`	Criar/editar produto
Detalhes de registro	`sm:max-w-[600px]`	Detalhes do pedido
Formulário simples	`sm:max-w-[540px]`	Editar consultora
Drawer compacto	`sm:max-w-md`	Carrinho de compras

API Reference

Prop	Type	Default	Descrição
`open`	`boolean`	—	Controla o estado aberto/fechado (controlado)
`onOpenChange`	`(open: boolean) => void`	—	Callback quando o estado muda
`SheetContent.side`	`'right' \| 'left' \| 'top' \| 'bottom'`	'right'	Lado de abertura do painel
`SheetContent.className`	`string`	—	Use overflow-y-auto e sm:max-w-[Npx] para controlar rolagem e largura
`SheetTitle`	`HTMLHeadingElement`	—	Título do sheet (obrigatório para acessibilidade, use sr-only se oculto)
`SheetDescription`	`HTMLParagraphElement`	—	Descrição contextual
`SheetFooter`	`HTMLDivElement`	—	Rodapé com ações (use sticky bottom-0 para fixar)

Padrão de modais no SYSGO

Sheet (right) — Criar, editar e visualizar detalhes (consultoras, pedidos, produtos, cupons)
Dialog — Novidades e lembretes que requerem atenção
AlertDialog — Confirmações de ações destrutivas (excluir, cancelar)

Regra: Sheet para CRUD e navegação. Dialog para anúncios. AlertDialog apenas para confirmações destrutivas.