# Sheet

## Example

```svelte
<script lang="ts">
	import { Button, Sheet, Input, Label } from '@foxui/all';

	let open = $state(false);
	let side: 'top' | 'right' | 'bottom' | 'left' = $state('right');

	const sides = ['top', 'right', 'bottom', 'left'] as const;
</script>

<div class="flex flex-wrap gap-2">
	{#each sides as s (s)}
		<Button
			variant="secondary"
			onclick={() => {
				side = s;
				open = true;
			}}
		>
			Open {s}
		</Button>
	{/each}
</div>

<Sheet
	bind:open
	{side}
	title="Edit profile"
	description="Make changes to your profile here. Click save when you're done."
>
	<div class="flex flex-col gap-4 py-2">
		<div class="flex flex-col gap-2">
			<Label for="sheet-name">Name</Label>
			<Input id="sheet-name" value="Pedro Duarte" />
		</div>
		<div class="flex flex-col gap-2">
			<Label for="sheet-username">Username</Label>
			<Input id="sheet-username" value="@peduarte" />
		</div>
	</div>

	{#snippet footer()}
		<Button variant="secondary" onclick={() => (open = false)}>Cancel</Button>
		<Button onclick={() => (open = false)}>Save changes</Button>
	{/snippet}
</Sheet>
```

## Documentation

## Usage

A `Sheet` slides in from any edge of the screen — useful for forms, filters, or navigation that complements the main content.

The API mirrors `Modal`: one component, `bind:open`, plus optional `title`, `description`, and a `footer` snippet for action buttons.

```svelte
<Button onclick={() => (open = true)} variant="secondary">Open</Button>

<Sheet
	bind:open
	side="right"
	title="Edit profile"
	description="Make changes to your profile here."
>
	<!-- main content -->

	{#snippet footer()}
		<Button variant="secondary" onclick={() => (open = false)}>Cancel</Button>
		<Button onclick={() => (open = false)}>Save changes</Button>
	{/snippet}
</Sheet>
```

## Side

Use the `side` prop to pick which edge the sheet slides in from. Values: `top`, `right` (default), `bottom`, `left`.

## Width / height

Override the default size with the `class` prop:

```svelte
<Sheet bind:open class="sm:max-w-lg">
	<!-- wider sheet on larger screens -->
</Sheet>
```

## Sources

This component uses the bits-ui component: Dialog, see here for the documentation for that: https://bits-ui.com/docs/components/dialog/llms.txt

## API Reference

### Sheet
A dialog that slides in from the edge of the screen. Built on top of the bits-ui Dialog primitive.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| open | `boolean` | `false` | Whether the sheet is open. (bindable) |
| side | `'top' | 'right' | 'bottom' | 'left'` | `'right'` | Which edge of the screen the sheet slides in from. |
| title | `string` | `-` | Optional title rendered in the sheet header. |
| description | `string` | `-` | Optional description rendered in the sheet header. |
| children | `Snippet` | `-` | The main content of the sheet. (required) |
| footer | `Snippet` | `-` | Optional footer snippet, typically containing action buttons. |
| closeButton | `boolean` | `true` | Whether to show the close button in the top-right corner. |
| interactOutsideBehavior | `'close' | 'ignore'` | `'close'` | How the sheet responds to clicks outside its content. |
| onOpenAutoFocus | `(event: Event) => void` | `-` | Callback when focus is moved into the sheet on open. Call event.preventDefault() to prevent default focus behavior. |
| contentProps | `Dialog.ContentProps` | `-` | Additional props to pass to the underlying Dialog.Content component. |
| onOpenChange | `(open: boolean) => void` | `-` | A callback invoked when the open state changes. |
| onOpenChangeComplete | `(open: boolean) => void` | `-` | A callback invoked after the open/close transition completes. |
| class | `string` | `-` | Additional CSS classes to apply to the sheet content. |