From 6fe7e852f9468504c8f8ed6a89dc7908ab351c85 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 18 Apr 2024 21:47:50 -0400
Subject: [PATCH] add transitions to popover

---
 .../floating-layer/floating-layer.svelte.ts          | 12 ++++++------
 .../src/lib/components/demos/popover-demo.svelte     |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
index 8bfee05c1..c30867e24 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
@@ -30,12 +30,12 @@ import type { StyleProperties, TextDirection } from "$lib/shared/index.js";
 export const SIDE_OPTIONS = ["top", "right", "bottom", "left"] as const;
 export const ALIGN_OPTIONS = ["start", "center", "end"] as const;
 
-const ARROW_TRANSFORM = {
-	bottom: "rotate(45deg)",
-	left: "rotate(135deg)",
-	top: "rotate(225deg)",
-	right: "rotate(315deg)",
-};
+// const ARROW_TRANSFORM = {
+// 	bottom: "rotate(45deg)",
+// 	left: "rotate(135deg)",
+// 	top: "rotate(225deg)",
+// 	right: "rotate(315deg)",
+// };
 
 export type Side = (typeof SIDE_OPTIONS)[number];
 export type Align = (typeof ALIGN_OPTIONS)[number];
diff --git a/sites/docs/src/lib/components/demos/popover-demo.svelte b/sites/docs/src/lib/components/demos/popover-demo.svelte
index 624a2b47f..caefc2c41 100644
--- a/sites/docs/src/lib/components/demos/popover-demo.svelte
+++ b/sites/docs/src/lib/components/demos/popover-demo.svelte
@@ -14,7 +14,7 @@
 		Resize
 	</Popover.Trigger>
 	<Popover.Content
-		class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover"
+		class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
 		sideOffset={8}
 	>
 		<div class="flex items-center">