---
name: sheet
kind: component
lang: ts
domain: ui
version: "1.0.0"
purity: impure
signature: "Sheet(props: SheetProps): JSX.Element"
description: "Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Base-UI Dialog con posicionamiento lateral via CVA."
tags: [sheet, drawer, panel, component, ui, interactive, overlay, base-ui, cva]
uses_functions: [cn_ts_core]
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: ["@base-ui/react/dialog", "class-variance-authority", "lucide-react"]
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/ui/sheet.tsx"
props:
  - name: side
    type: "'top' | 'bottom' | 'left' | 'right'"
    required: false
    description: "Lado desde el que aparece el panel (default: right)"
  - name: showCloseButton
    type: "boolean"
    required: false
    description: "Muestra el boton de cierre (default: true)"
  - name: open
    type: "boolean"
    required: false
    description: "Estado controlado de apertura"
  - name: onOpenChange
    type: "(open: boolean) => void"
    required: false
    description: "Callback cuando cambia el estado"
emits: [onOpenChange]
has_state: false
framework: react
variant: [top, bottom, left, right]
---

## Ejemplo

```tsx
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Abrir panel</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Editar perfil</SheetTitle>
      <SheetDescription>Realiza cambios en tu perfil.</SheetDescription>
    </SheetHeader>
    <div className="py-4">
      {/* contenido del panel */}
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancelar</Button>
      </SheetClose>
      <Button>Guardar</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

## Notas

Reutiliza Base-UI Dialog para el comportamiento modal. Las animaciones de deslizamiento usan slide-in-from-* de Tailwind. CVA gestiona las variantes de lado. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.