feat:use dynamic sheet for findpreview

src/lib/components/FindPreview.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import Modal from '$lib/components/Modal.svelte';
+	import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/sheet';
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
+	import { Avatar, AvatarFallback } from '$lib/components/avatar';
 
 	interface Find {
 		id: string;
@@ -34,6 +35,21 @@
 
 	let showModal = $state(true);
 	let currentMediaIndex = $state(0);
+	let isMobile = $state(false);
+
+	// Detect screen size
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		const checkIsMobile = () => {
+			isMobile = window.innerWidth < 768;
+		};
+
+		checkIsMobile();
+		window.addEventListener('resize', checkIsMobile);
+
+		return () => window.removeEventListener('resize', checkIsMobile);
+	});
 
 	// Close modal when showModal changes to false
 	$effect(() => {
@@ -91,204 +107,304 @@
 </script>
 
 {#if find}
-	<Modal bind:showModal positioning="center">
+	<Sheet open={showModal} onOpenChange={(open) => (showModal = open)}>
-		{#snippet header()}
+		<SheetContent side={isMobile ? 'bottom' : 'right'} class="sheet-content">
-			<div class="find-header">
+			<SheetHeader class="sheet-header">
-				<div class="find-info">
+				<div class="user-section">
-					<h2 class="find-title">{find.title}</h2>
+					<Avatar class="user-avatar">
-					<div class="find-meta">
+						<AvatarFallback class="avatar-fallback">
-						<span class="username">@{find.user.username}</span>
+							{find.user.username.slice(0, 2).toUpperCase()}
-						<span class="separator">•</span>
+						</AvatarFallback>
-						<span class="date">{formatDate(find.createdAt)}</span>
+					</Avatar>
-						{#if find.category}
+					<div class="user-info">
+						<SheetTitle class="find-title">{find.title}</SheetTitle>
+						<div class="find-meta">
+							<span class="username">@{find.user.username}</span>
 							<span class="separator">•</span>
-							<span class="category">{find.category}</span>
+							<span class="date">{formatDate(find.createdAt)}</span>
-						{/if}
+							{#if find.category}
+								<span class="separator">•</span>
+								<span class="category">{find.category}</span>
+							{/if}
+						</div>
 					</div>
 				</div>
-			</div>
+			</SheetHeader>
-		{/snippet}
 
-		<div class="find-content">
+			<div class="sheet-body">
-			{#if find.media && find.media.length > 0}
+				{#if find.media && find.media.length > 0}
-				<div class="media-container">
+					<div class="media-container">
-					<div class="media-viewer">
+						<div class="media-viewer">
-						{#if find.media[currentMediaIndex].type === 'photo'}
+							{#if find.media[currentMediaIndex].type === 'photo'}
-							<img src={find.media[currentMediaIndex].url} alt={find.title} class="media-image" />
+								<img src={find.media[currentMediaIndex].url} alt={find.title} class="media-image" />
-						{:else}
+							{:else}
-							<VideoPlayer
+								<VideoPlayer
-								src={find.media[currentMediaIndex].url}
+									src={find.media[currentMediaIndex].url}
-								poster={find.media[currentMediaIndex].thumbnailUrl}
+									poster={find.media[currentMediaIndex].thumbnailUrl}
-								class="media-video"
+									class="media-video"
-							/>
+								/>
-						{/if}
+							{/if}
+
+							{#if find.media.length > 1}
+								<button class="media-nav prev" onclick={prevMedia} aria-label="Previous media">
+									<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+										<path
+											d="M15 18L9 12L15 6"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</button>
+								<button class="media-nav next" onclick={nextMedia} aria-label="Next media">
+									<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+										<path
+											d="M9 18L15 12L9 6"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</button>
+							{/if}
+						</div>
 
 						{#if find.media.length > 1}
-							<button class="media-nav prev" onclick={prevMedia} aria-label="Previous media">
+							<div class="media-indicators">
-								<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+								{#each find.media, index (index)}
-									<path
+									<button
-										d="M15 18L9 12L15 6"
+										class="indicator"
-										stroke="currentColor"
+										class:active={index === currentMediaIndex}
-										stroke-width="2"
+										onclick={() => (currentMediaIndex = index)}
-										stroke-linecap="round"
+										aria-label={`View media ${index + 1}`}
-										stroke-linejoin="round"
+									></button>
-									/>
+								{/each}
-								</svg>
+							</div>
-							</button>
-							<button class="media-nav next" onclick={nextMedia} aria-label="Next media">
-								<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-									<path
-										d="M9 18L15 12L9 6"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-							</button>
 						{/if}
 					</div>
+				{/if}
 
-					{#if find.media.length > 1}
+				<div class="content-section">
-						<div class="media-indicators">
+					{#if find.description}
-							{#each find.media, index (index)}
+						<p class="description">{find.description}</p>
-								<button
+					{/if}
-									class="indicator"
+
-									class:active={index === currentMediaIndex}
+					{#if find.locationName}
-									onclick={() => (currentMediaIndex = index)}
+						<div class="location-info">
-									aria-label={`View media ${index + 1}`}
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-								></button>
+								<path
-							{/each}
+									d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
+							</svg>
+							<span>{find.locationName}</span>
 						</div>
 					{/if}
-				</div>
-			{/if}
 
-			<div class="find-details">
+					<div class="actions">
-				{#if find.description}
+						<LikeButton
-					<p class="description">{find.description}</p>
+							findId={find.id}
-				{/if}
+							isLiked={find.isLiked || false}
+							likeCount={find.likeCount || 0}
+							size="default"
+							class="like-action"
+						/>
 
-				{#if find.locationName}
+						<button class="action-button primary" onclick={getDirections}>
-					<div class="location-info">
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+								<path
-							<path
+									d="M3 11L22 2L13 21L11 13L3 11Z"
-								d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
+									stroke="currentColor"
-								stroke="currentColor"
+									stroke-width="2"
-								stroke-width="2"
+									stroke-linecap="round"
-								stroke-linecap="round"
+									stroke-linejoin="round"
-								stroke-linejoin="round"
+								/>
-							/>
+							</svg>
-							<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
+							Directions
-						</svg>
+						</button>
-						<span>{find.locationName}</span>
+
+						<button class="action-button secondary" onclick={shareFindUrl}>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+								<path
+									d="M4 12V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V12"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<polyline
+									points="16,6 12,2 8,6"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+							Share
+						</button>
 					</div>
-				{/if}
-
-				<div class="actions">
-					<LikeButton
-						findId={find.id}
-						isLiked={find.isLiked || false}
-						likeCount={find.likeCount || 0}
-						size="default"
-						class="like-action"
-					/>
-
-					<button class="button primary" onclick={getDirections}>
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-							<path
-								d="M3 11L22 2L13 21L11 13L3 11Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-						Directions
-					</button>
-
-					<button class="button secondary" onclick={shareFindUrl}>
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-							<path
-								d="M4 12V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V12"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-							<polyline
-								points="16,6 12,2 8,6"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-						Share
-					</button>
 				</div>
 			</div>
-		</div>
+		</SheetContent>
-	</Modal>
+	</Sheet>
 {/if}
 
 <style>
-	.find-content {
+	/* Base styles for sheet content */
-		max-height: 80vh;
+	:global(.sheet-content) {
-		overflow-y: auto;
+		padding: 0 !important;
 	}
 
-	.find-header {
+	/* Desktop styles (side sheet) */
+	@media (min-width: 768px) {
+		:global(.sheet-content) {
+			width: 80vw !important;
+			max-width: 600px !important;
+			height: 100vh !important;
+			border-radius: 0 !important;
+		}
+	}
+
+	/* Mobile styles (bottom sheet) */
+	@media (max-width: 767px) {
+		:global(.sheet-content) {
+			height: 80vh !important;
+			border-radius: 16px 16px 0 0 !important;
+		}
+	}
+
+	:global(.sheet-header) {
+		padding: 1rem 1.5rem;
+		border-bottom: 1px solid hsl(var(--border));
+		flex-shrink: 0;
+	}
+
+	.user-section {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
 		width: 100%;
 	}
 
-	.find-title {
+	:global(.user-avatar) {
-		font-family: 'Washington', serif;
+		width: 48px;
-		font-size: 1.5rem;
+		height: 48px;
+		flex-shrink: 0;
+	}
+
+	:global(.avatar-fallback) {
+		background: hsl(var(--primary));
+		color: white;
+		font-size: 1rem;
 		font-weight: 600;
-		margin: 0;
+	}
-		color: #333;
+
-		line-height: 1.3;
+	.user-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	:global(.find-title) {
+		font-family: 'Washington', serif !important;
+		font-size: 1.25rem !important;
+		font-weight: 600 !important;
+		margin: 0 !important;
+		color: hsl(var(--foreground)) !important;
+		line-height: 1.3 !important;
 	}
 
 	.find-meta {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 0.5rem;
-		margin-top: 8px;
+		margin-top: 0.25rem;
-		font-size: 0.9rem;
+		font-size: 0.875rem;
-		color: #666;
+		color: hsl(var(--muted-foreground));
+		flex-wrap: wrap;
 	}
 
 	.username {
 		font-weight: 500;
-		color: #3b82f6;
+		color: hsl(var(--primary));
 	}
 
 	.separator {
-		color: #ccc;
+		color: hsl(var(--muted-foreground));
+		opacity: 0.5;
 	}
 
 	.category {
-		background: #f0f0f0;
+		background: hsl(var(--muted));
-		padding: 2px 8px;
+		padding: 0.125rem 0.5rem;
-		border-radius: 12px;
+		border-radius: 8px;
-		font-size: 0.8rem;
+		font-size: 0.75rem;
 		text-transform: capitalize;
 	}
 
+	.sheet-body {
+		flex: 1;
+		overflow: hidden;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
 	.media-container {
 		position: relative;
-		margin-bottom: 20px;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
 	}
 
 	.media-viewer {
 		position: relative;
 		width: 100%;
-		height: 300px;
+		background: hsl(var(--muted));
-		border-radius: 12px;
 		overflow: hidden;
-		background: #f5f5f5;
+		flex: 1;
+		min-height: 0;
+	}
+
+	/* Desktop media viewer - maximize available space */
+	@media (min-width: 768px) {
+		.sheet-body {
+			height: calc(100vh - 140px);
+		}
+
+		.media-container {
+			flex: 2;
+		}
+
+		.content-section {
+			flex: 1;
+			min-height: 160px;
+			max-height: 300px;
+		}
+	}
+
+	/* Mobile media viewer - maximize available space */
+	@media (max-width: 767px) {
+		.sheet-body {
+			height: calc(80vh - 140px);
+		}
+
+		.media-container {
+			flex: 2;
+		}
+
+		.content-section {
+			flex: 1;
+			min-height: 140px;
+			max-height: 250px;
+		}
 	}
 
 	.media-image {
@@ -306,7 +422,7 @@
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
-		background: rgba(0, 0, 0, 0.5);
+		background: rgba(0, 0, 0, 0.6);
 		color: white;
 		border: none;
 		border-radius: 50%;
@@ -317,25 +433,27 @@
 		justify-content: center;
 		cursor: pointer;
 		transition: background-color 0.2s ease;
+		z-index: 10;
 	}
 
 	.media-nav:hover {
-		background: rgba(0, 0, 0, 0.7);
+		background: rgba(0, 0, 0, 0.8);
 	}
 
 	.media-nav.prev {
-		left: 12px;
+		left: 1rem;
 	}
 
 	.media-nav.next {
-		right: 12px;
+		right: 1rem;
 	}
 
 	.media-indicators {
 		display: flex;
 		justify-content: center;
-		gap: 8px;
+		gap: 0.5rem;
-		margin-top: 12px;
+		padding: 0.75rem 1.5rem 0;
+		flex-shrink: 0;
 	}
 
 	.indicator {
@@ -343,67 +461,116 @@
 		height: 8px;
 		border-radius: 50%;
 		border: none;
-		background: #ddd;
+		background: hsl(var(--muted-foreground));
+		opacity: 0.3;
 		cursor: pointer;
-		transition: background-color 0.2s ease;
+		transition: all 0.2s ease;
 	}
 
 	.indicator.active {
-		background: #3b82f6;
+		background: hsl(var(--primary));
+		opacity: 1;
+		transform: scale(1.2);
 	}
 
-	.find-details {
+	.content-section {
-		padding: 0 24px 24px;
+		padding: 1rem 1.5rem 1.5rem;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.description {
 		font-size: 1rem;
 		line-height: 1.6;
-		color: #333;
+		color: hsl(var(--foreground));
-		margin: 0 0 20px 0;
+		margin: 0 0 1.25rem 0;
 	}
 
 	.location-info {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 0.5rem;
-		color: #666;
+		color: hsl(var(--muted-foreground));
-		font-size: 0.9rem;
+		font-size: 0.875rem;
-		margin-bottom: 24px;
+		margin-bottom: 1.5rem;
 	}
 
 	.actions {
 		display: flex;
-		gap: 12px;
+		gap: 0.75rem;
+		align-items: center;
+		margin-top: auto;
+		padding-top: 1rem;
 	}
 
-	.actions :global(.button) {
+	:global(.like-action) {
+		flex-shrink: 0;
+	}
+
+	.action-button {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 0.5rem;
 		flex: 1;
 		justify-content: center;
+		padding: 0.75rem 1rem;
+		border-radius: 8px;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		border: none;
 	}
 
-	.actions :global(.like-action) {
+	.action-button.primary {
-		flex: 0 0 auto;
+		background: hsl(var(--primary));
+		color: hsl(var(--primary-foreground));
 	}
 
+	.action-button.primary:hover {
+		background: hsl(var(--primary) / 0.9);
+	}
+
+	.action-button.secondary {
+		background: hsl(var(--secondary));
+		color: hsl(var(--secondary-foreground));
+	}
+
+	.action-button.secondary:hover {
+		background: hsl(var(--secondary) / 0.8);
+	}
+
+	/* Mobile specific adjustments */
 	@media (max-width: 640px) {
-		.find-title {
+		:global(.sheet-header) {
-			font-size: 1.3rem;
+			padding: 1rem;
 		}
 
-		.find-details {
+		.user-section {
-			padding: 0 16px 16px;
+			gap: 0.5rem;
 		}
 
-		.media-viewer {
+		:global(.user-avatar) {
-			height: 250px;
+			width: 40px;
+			height: 40px;
+		}
+
+		:global(.find-title) {
+			font-size: 1.125rem !important;
+		}
+
+		.content-section {
+			padding: 1rem;
 		}
 
 		.actions {
 			flex-direction: column;
+			gap: 0.5rem;
+		}
+
+		.action-button {
+			width: 100%;
 		}
 	}
 </style>

src/lib/components/sheet/index.ts

@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+
+const Root = SheetPrimitive.Root;
+const Portal = SheetPrimitive.Portal;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription
+};

src/lib/components/sheet/sheet-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />

src/lib/components/sheet/sheet-content.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const sheetVariants = tv({
+		base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+		variants: {
+			side: {
+				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+				bottom:
+					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+				left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+				right:
+					'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
+			}
+		},
+		defaultVariants: {
+			side: 'right'
+		}
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>

src/lib/components/sheet/sheet-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>

src/lib/components/sheet/sheet-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/sheet/sheet-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('flex flex-col gap-1.5 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/sheet/sheet-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn('font-semibold text-foreground', className)}
+	{...restProps}
+/>

src/lib/components/sheet/sheet-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />