# Sheet

> A panel from the edge of the screen, to create or edit something without losing the list, the filters and the scroll behind it. From the right on a desktop, from the bottom below 640px. The title is required and names it. With unsaved changes, closing asks first, inside the sheet, with focus on keeping them.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/sheet

## Install

```bash
npx @entrepta/cli@latest add sheet
```

Files: `primitives/sheet.tsx`, `content/diamond.tsx`, `lib/overlay.ts`, `lib/icon.tsx`, `primitives/dialog.tsx`, `primitives/button.tsx`, `primitives/button-variants.ts`.
npm packages: `@phosphor-icons/react`, `@radix-ui/react-dialog`, `class-variance-authority`, `@radix-ui/react-slot`.
Comes with: `diamond`, `overlay-lib`, `icon-lib`, `dialog`, `button`.

## Usage

```tsx
import { Sheet, SheetClose, SheetContent, SheetTrigger } from "@/components/entrepta/sheet"

<Sheet dirty={form.formState.isDirty}>
  <SheetTrigger asChild>
    <Button>new entry</Button>
  </SheetTrigger>
  <SheetContent
    title="New entry"
    description="It lands at the top of the list."
    footer={
      <>
        <SheetClose asChild><Button variant="ghost">cancel</Button></SheetClose>
        <Button type="submit" form="entry">save</Button>
      </>
    }
  >
    <form id="entry">…</form>
  </SheetContent>
</Sheet>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dirty` | `boolean` | false | Unsaved changes: Esc, a click outside and the × ask before closing |
| `side` | `"right" \| "bottom"` | "right" | right becomes a bottom sheet below 640px (SheetContent) |
| `size` | `"sm" \| "md" \| "lg"` | "md" | 360, 480 or 640px wide on a desktop (SheetContent) |
| `title` | `ReactNode` | - | The heading and the sheet's name. Required (SheetContent) |
| `footer` | `ReactNode` | - | Actions pinned to the bottom while the body scrolls (SheetContent) |
| `discardPrompt, keepLabel, discardLabel` | `ReactNode, string, string` | - | The words of the question, for another language (SheetContent) |
| `container` | `HTMLElement \| null` | - | Where it renders (SheetContent), such as a device frame. Give that element a transform |