correcting animations

orchestrator/src/components/ui/alert-dialog.tsx

@@ -1,128 +1,146 @@
+"use client"
+
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 
-const AlertDialog = AlertDialogPrimitive.Root
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
 
-const AlertDialogOverlay = React.forwardRef<
+function AlertDialogOverlay({
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  <AlertDialogPrimitive.Overlay
+  return (
-    className={cn(
+    <AlertDialogPrimitive.Overlay
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      data-slot="alert-dialog-overlay"
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "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/50",
         className
       )}
       {...props}
     />
-  </AlertDialogPortal>
+  )
-))
+}
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
-const AlertDialogHeader = ({
+function AlertDialogContent({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  <div
+  return (
-    className={cn(
+    <AlertDialogPortal>
-      "flex flex-col space-y-2 text-center sm:text-left",
+      <AlertDialogOverlay />
-      className
+      <AlertDialogPrimitive.Content
-    )}
+        data-slot="alert-dialog-content"
-    {...props}
+        className={cn(
-  />
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-)
+          className
-AlertDialogHeader.displayName = "AlertDialogHeader"
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
 
-const AlertDialogFooter = ({
+function AlertDialogHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.ComponentProps<"div">) {
-  <div
+  return (
-    className={cn(
+    <div
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      data-slot="alert-dialog-header"
-      className
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-    )}
+      {...props}
-    {...props}
+    />
-  />
+  )
-)
+}
-AlertDialogFooter.displayName = "AlertDialogFooter"
 
-const AlertDialogTitle = React.forwardRef<
+function AlertDialogFooter({
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<"div">) {
-  <AlertDialogPrimitive.Title
+  return (
-    ref={ref}
+    <div
-    className={cn("text-lg font-semibold", className)}
+      data-slot="alert-dialog-footer"
-    {...props}
+      className={cn(
-  />
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-))
+        className
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+      )}
+      {...props}
+    />
+  )
+}
 
-const AlertDialogDescription = React.forwardRef<
+function AlertDialogTitle({
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  <AlertDialogPrimitive.Description
+  return (
-    ref={ref}
+    <AlertDialogPrimitive.Title
-    className={cn("text-sm text-muted-foreground", className)}
+      data-slot="alert-dialog-title"
-    {...props}
+      className={cn("text-lg font-semibold", className)}
-  />
+      {...props}
-))
+    />
-AlertDialogDescription.displayName =
+  )
-  AlertDialogPrimitive.Description.displayName
+}
 
-const AlertDialogAction = React.forwardRef<
+function AlertDialogDescription({
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  <AlertDialogPrimitive.Action
+  return (
-    ref={ref}
+    <AlertDialogPrimitive.Description
-    className={cn(buttonVariants(), className)}
+      data-slot="alert-dialog-description"
-    {...props}
+      className={cn("text-muted-foreground text-sm", className)}
-  />
+      {...props}
-))
+    />
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+  )
+}
 
-const AlertDialogCancel = React.forwardRef<
+function AlertDialogAction({
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  <AlertDialogPrimitive.Cancel
+  return (
-    ref={ref}
+    <AlertDialogPrimitive.Action
-    className={cn(
+      className={cn(buttonVariants(), className)}
-      buttonVariants({ variant: "outline" }),
+      {...props}
-      "mt-2 sm:mt-0",
+    />
-      className
+  )
-    )}
+}
-    {...props}
+
-  />
+function AlertDialogCancel({
-))
+  className,
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
 
 export {
   AlertDialog,