feat: sync codebase with latest radix pattern

src/components/ui/popover.tsx

@@ -1,35 +1,35 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { Popover as PopoverPrimitive } from 'radix-ui';
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
 function PopoverContent({
   className,
-  align = 'center',
-  sideOffset = 4,
   container,
+  align = "center",
+  sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
   container?:
-    | React.ComponentProps<typeof PopoverPrimitive.Portal>['container']
-    | React.RefObject<HTMLElement | null>;
+    | React.ComponentProps<typeof PopoverPrimitive.Portal>["container"]
+    | React.RefObject<Element | DocumentFragment | null>
 }) {
   const portalContainer =
-    container && 'current' in container ? container.current : container;
+    container && "current" in container ? container.current : container
 
   return (
     <PopoverPrimitive.Portal container={portalContainer}>
@@ -38,60 +38,60 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-          className,
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  );
+  )
 }
 
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="popover-header"
-      className={cn('flex flex-col gap-1 text-sm', className)}
+      className={cn("flex flex-col gap-1 text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
-function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
   return (
     <div
       data-slot="popover-title"
-      className={cn('font-medium', className)}
+      className={cn("font-medium", className)}
       {...props}
     />
-  );
+  )
 }
 
 function PopoverDescription({
   className,
   ...props
-}: React.ComponentProps<'p'>) {
+}: React.ComponentProps<"p">) {
   return (
     <p
       data-slot="popover-description"
-      className={cn('text-muted-foreground', className)}
+      className={cn("text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
   Popover,
-  PopoverTrigger,
-  PopoverContent,
   PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
   PopoverHeader,
   PopoverTitle,
-  PopoverDescription,
-};
+  PopoverTrigger,
+}