feat: rewrite all to use shadcn-svelte

src/lib/components/ui/sheet/index.ts

@@ -0,0 +1,106 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+import Portal from './sheet-portal.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 Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+
+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
+};
+
+export const sheetVariants = tv({
+	base: 'fixed z-50 gap-4 bg-background p-6 shadow-lg',
+	variants: {
+		side: {
+			top: 'inset-x-0 top-0 border-b',
+			bottom: 'inset-x-0 bottom-0 border-t',
+			left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+			right: 'inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm'
+		}
+	},
+	defaultVariants: {
+		side: 'right'
+	}
+});
+
+export const sheetTransitions = {
+	top: {
+		in: {
+			y: '-100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			y: '-100%',
+			duration: 300,
+			opacity: 1
+		}
+	},
+	bottom: {
+		in: {
+			y: '100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			y: '100%',
+			duration: 300,
+			opacity: 1
+		}
+	},
+	left: {
+		in: {
+			x: '-100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			x: '-100%',
+			duration: 300,
+			opacity: 1
+		}
+	},
+	right: {
+		in: {
+			x: '100%',
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			x: '100%',
+			duration: 300,
+			opacity: 1
+		}
+	}
+};
+
+export type Side = VariantProps<typeof sheetVariants>['side'];

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { SheetOverlay, SheetPortal, sheetTransitions, sheetVariants, type Side } from '.';
+	import { X } from 'lucide-svelte';
+	import { cn } from '$lib/utils';
+	import { fly } from 'svelte/transition';
+
+	type $$Props = SheetPrimitive.ContentProps & {
+		side?: Side;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let side: $$Props['side'] = 'right';
+	export { className as class };
+	export let inTransition: $$Props['inTransition'] = fly;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] =
+		sheetTransitions[side ? side : 'right']['in'];
+	export let outTransition: $$Props['outTransition'] = fly;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] =
+		sheetTransitions[side ? side : 'right']['out'];
+</script>
+
+<SheetPortal>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		{inTransition}
+		{inTransitionConfig}
+		{outTransition}
+		{outTransitionConfig}
+		class={cn(sheetVariants({ side }), className)}
+		{...$$restProps}
+	>
+		<slot />
+		<SheetPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SheetPrimitive.DescriptionProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Description>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
+	<slot />
+</div>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { fade } from 'svelte/transition';
+
+	type $$Props = SheetPrimitive.OverlayProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
+	{...$$restProps}
+/>

src/lib/components/ui/sheet/sheet-portal.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SheetPrimitive.PortalProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Portal>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SheetPrimitive.TitleProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Title
+	class={cn('text-lg font-semibold text-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Title>