Drawer

Painel deslizante ancorado à borda da tela. Construído sobre Vaul. Alternativa ao Sheet para dispositivos móveis com interação de arraste (swipe).

import {
  Drawer, DrawerClose, DrawerContent,
  DrawerDescription, DrawerFooter, DrawerHeader,
  DrawerTitle, DrawerTrigger,
} from "@workspace/ui/components/drawer";

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Abrir</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Título</DrawerTitle>
      <DrawerDescription>Descrição do conteúdo.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Confirmar</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancelar</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Inferior (bottom)

Drawer padrão deslizando de baixo para cima.

Sheet vs Drawer

Quando usar cada um no SYSGO.

Critério	Sheet	Drawer
Dispositivo	Desktop	Mobile
Interação de arraste	Não	Sim (swipe)
Direção padrão	Direita	Inferior
Caso de uso SYSGO	Edição, visualização	Filtros mobile, ações rápidas

API Reference

Prop	Type	Default	Descrição
`open`	`boolean`	—	Controla o estado aberto/fechado
`onOpenChange`	`(open: boolean) => void`	—	Callback quando o estado muda
`direction`	`'top' \| 'bottom' \| 'left' \| 'right'`	'bottom'	Direção de onde o drawer aparece
`DrawerContent`	`ReactNode`	—	Conteúdo do drawer com overlay e animação
`DrawerTitle`	`ReactNode`	—	Título do drawer (obrigatório para acessibilidade)
`DrawerDescription`	`ReactNode`	—	Descrição do drawer