A dialog on desktop, a bottom drawer on phones.

Usage

Example.svelte
<script lang="ts">
	import ResponsiveSheet from "@orochibraru/ui/blocks/responsive-sheet";
	import { Button } from "@orochibraru/ui/button";

	let open = $state(false);
</script>

<div>
	<Button variant="outline" onclick={() => (open = true)}>Edit profile</Button>
</div>
<ResponsiveSheet
	bind:open
	title="Edit profile"
	description="A dialog on desktop, a drawer on phones."
>
	<p class="pb-6 text-sm">Resize the window to see it switch.</p>
</ResponsiveSheet>