<!-- source-hash: b12df94d463c0d388bcb0c53bac39207 -->
A slide-out panel component built on top of Radix UI's Dialog primitive, supporting four directional variants (top, bottom, left, right) with animated open/close transitions.

## Key Components

| Export | Description |
|--------|-------------|
| `Sheet` | Root component wrapping Radix Dialog root |
| `SheetTrigger` | Button/element that opens the sheet |
| `SheetClose` | Element that closes the sheet |
| `SheetPortal` | Renders sheet outside DOM hierarchy |
| `SheetOverlay` | Semi-transparent backdrop (`z-[9997]`) |
| `SheetContent` | Main panel container with side variants (`top`, `bottom`, `left`, `right`), defaults to `right` |
| `SheetHeader` | Flex column wrapper for title/description |
| `SheetFooter` | Flex row wrapper for action buttons |
| `SheetTitle` | Styled heading (`text-lg font-semibold`) |
| `SheetDescription` | Styled subtitle (`text-sm text-muted-foreground`) |

## Usage Example

```typescript
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "./sheet"

export function SettingsPanel() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <button>Open Settings</button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Settings</SheetTitle>
          <SheetDescription>Manage your preferences.</SheetDescription>
        </SheetHeader>
        {/* content */}
        <SheetFooter>
          <SheetClose asChild>
            <button>Close</button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

> The `side` prop on `SheetContent` accepts `"top" | "bottom" | "left" | "right"` and drives both positioning and slide animation direction. The close button (`X` icon) is automatically rendered inside `SheetContent`.