# Sheet

## Overview

An edge-anchored slide-in panel that overlays the current page from one side — top, right, bottom, or left. Like `Dialog` but more suitable for forms or detail views that benefit from more vertical space, or for secondary navigation and controls on mobile.

---

## When to Use

- Wide create/edit forms that need more room than a Dialog
- Detail/preview panels for selected records (record details sidebar)
- Filter panels that slide in from the right
- Mobile navigation drawers (slide from left)

## When NOT to Use

- Simple short confirmations — use `Dialog` instead.
- Destructive confirmations — use `AlertDialog` instead.
- Mobile bottom panels — use `Drawer` instead.

---

## Anatomy

```
<Sheet>
  <SheetTrigger asChild>
    <Button />
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle />
      <SheetDescription />
    </SheetHeader>
    {/* Content */}
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="ghost">Cancel</Button>
      </SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

---

## Props

### Sheet

| Prop           | Type                      | Description           |
| -------------- | ------------------------- | --------------------- |
| `open`         | `boolean`                 | Controlled open state |
| `onOpenChange` | `(open: boolean) => void` | State handler         |

### SheetContent

| Prop        | Type                                     | Default   | Description                          |
| ----------- | ---------------------------------------- | --------- | ------------------------------------ |
| `side`      | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Which edge the panel slides from     |
| `className` | `string`                                 | —         | Width override (e.g., `sm:max-w-md`) |

---

## Examples

### Edit Record Side Panel

```tsx
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetClose,
  Button,
} from 'xertica-ui/ui';

<Sheet>
  <SheetTrigger asChild>
    <Button variant="ghost" size="sm">
      Edit
    </Button>
  </SheetTrigger>
  <SheetContent className="sm:max-w-md">
    <SheetHeader>
      <SheetTitle>Edit Member</SheetTitle>
      <SheetDescription>Update member information below.</SheetDescription>
    </SheetHeader>
    <div className="py-6">{/* Form fields */}</div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="ghost">Cancel</Button>
      </SheetClose>
      <Button onClick={handleSave}>Save Changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>;
```

---

## AI Rules

- `SheetTitle` is **required** for accessibility.
- Use `side="right"` for record edit panels and filter drawers. Use `side="left"` for navigation drawers.
- Override width with `className="sm:max-w-md"` or `sm:max-w-lg` on `<SheetContent>` — the default is narrow.
- Use `<SheetClose asChild>` wrapping a `<Button>` for the cancel action — this auto-closes the sheet.
- Always use `<SheetTrigger asChild>` wrapping a `<Button>` — never a raw button element.

---

## Related Components

- [`Dialog`](./dialog.md) — Centered modal alternative
- [`Drawer`](./drawer.md) — Mobile bottom panel
- [`Form`](./form.md) — Commonly rendered inside Sheet