refactor(styled popover): to use data-open data-closing

Author: maiieul

packages/kit-styled/src/components/popover/popover.tsx

@@ -1,4 +1,4 @@
-import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Popover as HeadlessPopover } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
@@ -13,26 +13,13 @@ const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) =>
 const Trigger = HeadlessPopover.Trigger;
 
 const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
-  useStyles$(`
-    .my-transition {
-      transition: opacity 150ms, display 150ms, overlay 150ms;
-      transition-behavior: allow-discrete;
-    }
-  
-    .popover-showing {
-      opacity: 1;
-    }
-  
-    .popover-closing {
-      opacity: 0;
-    }
-    `);
-
   return (
     <HeadlessPopover.Panel
       {...props}
       class={cn(
-        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none',
+        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[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',
         props.class,
       )}
     >