# Sheet

> Un panel que entra desde un borde. Los cuatro lados.

```tsx
import { Sheet, SheetClose, SheetContent, SheetDescription, … } from "sebs7n-ui/sheet"
```

## Ejemplos

### Panel lateral de filtros

```tsx
import { Button } from "sebs7n-ui/button"
import { Input } from "sebs7n-ui/input"
import { Label } from "sebs7n-ui/label"
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "sebs7n-ui/sheet"

function Basico() {
  return (
    <div className="flex flex-wrap gap-3">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>Filtros</SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Filtrar facturas</SheetTitle>
            <SheetDescription>Se aplican al listado sin recargar la página.</SheetDescription>
          </SheetHeader>
          <div className="flex flex-col gap-4 px-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="sheet-cliente">Cliente</Label>
              <Input id="sheet-cliente" placeholder="Acme S.A." />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="sheet-desde">Desde</Label>
              <Input id="sheet-desde" type="date" />
            </div>
          </div>
          <SheetFooter>
            <Button variant="accent">Aplicar</Button>
          </SheetFooter>
        </SheetContent>
      </Sheet>

      <Sheet>
        <SheetTrigger render={<Button variant="ghost" />}>Desde la izquierda</SheetTrigger>
        <SheetContent side="left">
          <SheetHeader>
            <SheetTitle>Navegación</SheetTitle>
            <SheetDescription>Es el lado que usa el `AppShell` en mobile.</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    </div>
  )
}
```

## Props

### Sheet

Hereda las props de `Sheet.Root`.

Sin props propias: pasa todo al primitivo.

### SheetClose

Hereda las props de `Sheet.Close`.

Sin props propias: pasa todo al primitivo.

### SheetContent

Hereda las props de `Sheet.Popup`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `showCloseButton` | `boolean` | `true` | — |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"right"` | — |
| `className` | `string` | — | — |

### SheetDescription

Hereda las props de `Sheet.Description`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SheetFooter

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SheetHeader

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SheetTitle

Hereda las props de `Sheet.Title`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SheetTrigger

Hereda las props de `Sheet.Trigger`.

Sin props propias: pasa todo al primitivo.

## Teclado

| Tecla | Qué hace |
|---|---|
| Escape | Cierra y devuelve el foco. |
| Tab | Atrapado adentro. |
| Click en el fondo | Cierra. |

## Accesibilidad

- Mismo contrato que `Dialog`: `SheetTitle` obligatorio, foco atrapado, fondo inerte.
- El movimiento de entrada pasa por `motion-reduce`.

## Reglas de uso

- Un formulario largo o una lista de filtros sin perder la tabla de atrás.
- `side="left"` es el del menú mobile —lo usa `AppShell`—; para contenido, `right`.
- En desktop, más de 640px de ancho es una página, no un panel.

## Relacionados

[dialog](/docs/components/dialog.md) · [app-shell](/docs/components/app-shell.md) · [sidebar](/docs/components/sidebar.md)