laif-ds/dist/agent-docs/components/Sheet.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Sheet

## Overview

Side sheet/dialog component with overlay, animated content, header/footer and close button. Built on Radix Dialog.

---

## Exports

- `Sheet`, `SheetTrigger`, `SheetClose`, `SheetContent`
- `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`

`SheetContent` prop `side` supports: `"top" | "right" | "bottom" | "left"` (default: `"right"`).

---

## Example

```tsx
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "laif-ds";
import { Button } from "laif-ds";

export function FiltersSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open filters</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Filters</SheetTitle>
          <SheetDescription>Select filters and apply</SheetDescription>
        </SheetHeader>
        {/* content */}
      </SheetContent>
    </Sheet>
  );
}
```