next fix sheet

huntabyte · Oct 27, 2024 · c5d8653 · c5d8653
1 parent ea535b6
commit c5d8653
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 147 deletions.
diff --git a/sites/docs/src/lib/registry/default/ui/sheet/index.ts b/sites/docs/src/lib/registry/default/ui/sheet/index.ts
@@ -1,6 +1,4 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
-import { type VariantProps, tv } from "tailwind-variants";
-
 import Overlay from "./sheet-overlay.svelte";
 import Content from "./sheet-content.svelte";
 import Header from "./sheet-header.svelte";
@@ -36,71 +34,3 @@ export {
 	Title as SheetTitle,
 	Description as SheetDescription,
 };
-
-export const sheetVariants = tv({
-	base: "bg-background fixed z-50 gap-4 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"];
diff --git a/sites/docs/src/lib/registry/default/ui/sheet/sheet-content.svelte b/sites/docs/src/lib/registry/default/ui/sheet/sheet-content.svelte
@@ -1,8 +1,28 @@
+<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 gap-4 p-6 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 border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 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, type WithoutChildrenOrChild } from "bits-ui";
 	import X from "lucide-svelte/icons/x";
 	import type { Snippet } from "svelte";
-	import { SheetOverlay, SheetPortal, type Side, sheetVariants } from "./index.js";
+	import SheetOverlay from "./sheet-overlay.svelte";
 	import { cn } from "$lib/utils.js";
 
 	let {
@@ -17,7 +37,7 @@
 	} = $props();
 </script>
 
-<SheetPortal>
+<SheetPrimitive.Portal>
 	<SheetOverlay />
 	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
 		{@render children?.()}
@@ -28,4 +48,4 @@
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>
-</SheetPortal>
+</SheetPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/default/ui/sheet/sheet-overlay.svelte b/sites/docs/src/lib/registry/default/ui/sheet/sheet-overlay.svelte
@@ -13,6 +13,9 @@
 
 <SheetPrimitive.Overlay
 	bind:ref
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/new-york/ui/sheet/index.ts b/sites/docs/src/lib/registry/new-york/ui/sheet/index.ts
@@ -1,5 +1,4 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
-import { type VariantProps, tv } from "tailwind-variants";
 
 import Overlay from "./sheet-overlay.svelte";
 import Content from "./sheet-content.svelte";
@@ -36,71 +35,3 @@ export {
 	Title as SheetTitle,
 	Description as SheetDescription,
 };
-
-export const sheetVariants = tv({
-	base: "bg-background fixed z-50 gap-4 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"];
diff --git a/sites/docs/src/lib/registry/new-york/ui/sheet/sheet-content.svelte b/sites/docs/src/lib/registry/new-york/ui/sheet/sheet-content.svelte
@@ -1,8 +1,29 @@
+<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 gap-4 p-6 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 border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 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, type WithoutChildrenOrChild } from "bits-ui";
 	import Cross2 from "svelte-radix/Cross2.svelte";
 	import type { Snippet } from "svelte";
-	import { SheetOverlay, SheetPortal, type Side, sheetVariants } from "./index.js";
+	import SheetOverlay from "./sheet-overlay.svelte";
 	import { cn } from "$lib/utils.js";
 
 	let {
@@ -17,7 +38,7 @@
 	} = $props();
 </script>
 
-<SheetPortal>
+<SheetPrimitive.Portal>
 	<SheetOverlay />
 	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
 		{@render children?.()}
@@ -28,4 +49,4 @@
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>
-</SheetPortal>
+</SheetPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/new-york/ui/sheet/sheet-overlay.svelte b/sites/docs/src/lib/registry/new-york/ui/sheet/sheet-overlay.svelte
@@ -11,6 +11,9 @@
 
 <SheetPrimitive.Overlay
 	bind:ref
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
 	{...restProps}
 />