From 5c0d8bb8b3978cbad39b0ac7a874d4af2cd4a736 Mon Sep 17 00:00:00 2001
From: RealDiligent <nft.gold.eth@gmail.com>
Date: Fri, 24 Jul 2026 18:59:51 +0800
Subject: [PATCH] fix(ui-kit): respect prefers-reduced-motion across animated
 ui-kit and miner-ui components

13 ui-kit components (accordion, alert-dialog, context-menu, dialog,
dropdown-menu, hover-card, input-otp, menubar, navigation-menu, popover,
select, sheet, tooltip) and 2 miner-ui components (streaming-text,
chat/typing-indicator) animated unconditionally, so a user with the OS
reduce-motion preference still got full fade/zoom/slide/bounce/blink/caret
motion. Pairs each animate-* utility with motion-reduce:animate-none, the same
guard skeleton.tsx/state-views.tsx/button.tsx/tabs.tsx already apply, inline at
each call site (no new abstraction). Adds regression tests asserting the guard
on a Radix content component (AccordionContent) and on TypingIndicator, plus a
class-list assertion on StreamingText's caret.

Closes #8303
---
 .../components/chat/typing-indicator.test.tsx | 23 +++++++++++++
 .../src/components/chat/typing-indicator.tsx  |  9 +++--
 .../src/components/streaming-text.tsx         |  2 +-
 .../src/streaming-text.test.tsx               |  3 ++
 .../src/components/accordion.test.tsx         | 33 +++++++++++++++++++
 .../src/components/accordion.tsx              |  2 +-
 .../src/components/alert-dialog.tsx           |  4 +--
 .../src/components/context-menu.tsx           |  4 +--
 .../loopover-ui-kit/src/components/dialog.tsx |  4 +--
 .../src/components/dropdown-menu.tsx          |  4 +--
 .../src/components/hover-card.tsx             |  2 +-
 .../src/components/input-otp.tsx              |  2 +-
 .../src/components/menubar.tsx                |  4 +--
 .../src/components/navigation-menu.tsx        |  6 ++--
 .../src/components/popover.tsx                |  2 +-
 .../loopover-ui-kit/src/components/select.tsx |  2 +-
 .../loopover-ui-kit/src/components/sheet.tsx  |  4 +--
 .../src/components/tooltip.tsx                |  2 +-
 18 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 apps/loopover-miner-ui/src/components/chat/typing-indicator.test.tsx
 create mode 100644 packages/loopover-ui-kit/src/components/accordion.test.tsx

diff --git a/apps/loopover-miner-ui/src/components/chat/typing-indicator.test.tsx b/apps/loopover-miner-ui/src/components/chat/typing-indicator.test.tsx
new file mode 100644
index 0000000000..97b6024b35
--- /dev/null
+++ b/apps/loopover-miner-ui/src/components/chat/typing-indicator.test.tsx
@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { TypingIndicator } from "./typing-indicator";
+
+// Regression for #8303: the three animate-bounce dots must each pair their animation with
+// motion-reduce:animate-none so a user with the OS "reduce motion" preference set sees a static indicator
+// instead of a bouncing one -- matching the guard skeleton.tsx / Spinner already provide.
+describe("TypingIndicator respects prefers-reduced-motion (#8303)", () => {
+  it("renders three bouncing dots that each carry motion-reduce:animate-none", () => {
+    const { container } = render(<TypingIndicator authorName="Assistant" />);
+    const dots = container.querySelectorAll(".animate-bounce");
+    expect(dots.length).toBe(3);
+    for (const dot of dots) {
+      expect(dot.className).toContain("motion-reduce:animate-none");
+    }
+  });
+
+  it("renders nothing when not composing (unchanged behavior)", () => {
+    const { container } = render(<TypingIndicator composing={false} />);
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/apps/loopover-miner-ui/src/components/chat/typing-indicator.tsx b/apps/loopover-miner-ui/src/components/chat/typing-indicator.tsx
index 53d33e65ac..5cecec1b09 100644
--- a/apps/loopover-miner-ui/src/components/chat/typing-indicator.tsx
+++ b/apps/loopover-miner-ui/src/components/chat/typing-indicator.tsx
@@ -16,13 +16,16 @@ export function TypingIndicator({
       <span className="sr-only">{label}</span>
       <span
         aria-hidden="true"
-        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.3s]"
+        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.3s] motion-reduce:animate-none"
       />
       <span
         aria-hidden="true"
-        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.15s]"
+        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.15s] motion-reduce:animate-none"
+      />
+      <span
+        aria-hidden="true"
+        className="size-1.5 animate-bounce rounded-full bg-muted-foreground motion-reduce:animate-none"
       />
-      <span aria-hidden="true" className="size-1.5 animate-bounce rounded-full bg-muted-foreground" />
     </div>
   );
 }
diff --git a/apps/loopover-miner-ui/src/components/streaming-text.tsx b/apps/loopover-miner-ui/src/components/streaming-text.tsx
index f9398c60ae..4af577184e 100644
--- a/apps/loopover-miner-ui/src/components/streaming-text.tsx
+++ b/apps/loopover-miner-ui/src/components/streaming-text.tsx
@@ -32,7 +32,7 @@ export function StreamingText({ source, className }: { source: ChunkSource | nul
     <p className={className} data-status={status} aria-busy={status === "streaming"}>
       {text}
       {status === "streaming" && !reducedMotion ? (
-        <span aria-hidden="true" className="ml-0.5 inline-block animate-pulse">
+        <span aria-hidden="true" className="ml-0.5 inline-block animate-pulse motion-reduce:animate-none">
           ▍
         </span>
       ) : null}
diff --git a/apps/loopover-miner-ui/src/streaming-text.test.tsx b/apps/loopover-miner-ui/src/streaming-text.test.tsx
index ad84beb7d4..654d5960ec 100644
--- a/apps/loopover-miner-ui/src/streaming-text.test.tsx
+++ b/apps/loopover-miner-ui/src/streaming-text.test.tsx
@@ -61,6 +61,9 @@ describe("StreamingText (#6516)", () => {
     await src.push("typing…");
     await waitFor(() => expect(screen.getByText(/typing…/)).toBeTruthy());
     expect(caret()).not.toBeNull(); // still streaming → caret present under full motion
+    // #8303: the caret's animate-pulse is also paired with motion-reduce:animate-none as a CSS-level
+    // fallback, complementing the JS usePrefersReducedMotion guard that already omits it entirely.
+    expect(caret()?.className).toContain("motion-reduce:animate-none");
   });
 
   it("suppresses the caret under prefers-reduced-motion but still reaches the full text and done", async () => {
diff --git a/packages/loopover-ui-kit/src/components/accordion.test.tsx b/packages/loopover-ui-kit/src/components/accordion.test.tsx
new file mode 100644
index 0000000000..f9feee9786
--- /dev/null
+++ b/packages/loopover-ui-kit/src/components/accordion.test.tsx
@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+
+// Regression for #8303: the Radix content/transition components in @loopover/ui-kit must pair their
+// animate-* utilities with motion-reduce:animate-none, matching skeleton.tsx / state-views.tsx, so a user
+// with the OS "reduce motion" preference set does not get the fade/zoom/slide/accordion animation.
+// AccordionContent is a representative Radix content component (its animate-accordion-up/down utilities are
+// the ones the issue calls out) and renders inline when its item is open.
+describe("AccordionContent respects prefers-reduced-motion (#8303)", () => {
+  it("carries motion-reduce:animate-none alongside its animate-accordion utilities", () => {
+    const { getByText } = render(
+      <Accordion type="single" defaultValue="a" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>Trigger</AccordionTrigger>
+          <AccordionContent>Body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    // The Radix Content wraps the inner padding div that holds the text.
+    const content = getByText("Body").parentElement as HTMLElement;
+    expect(content.className).toContain(
+      "data-[state=open]:animate-accordion-down",
+    );
+    expect(content.className).toContain("motion-reduce:animate-none");
+  });
+});
diff --git a/packages/loopover-ui-kit/src/components/accordion.tsx b/packages/loopover-ui-kit/src/components/accordion.tsx
index aa196ab781..b17199a2a7 100644
--- a/packages/loopover-ui-kit/src/components/accordion.tsx
+++ b/packages/loopover-ui-kit/src/components/accordion.tsx
@@ -44,7 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:animate-none"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
diff --git a/packages/loopover-ui-kit/src/components/alert-dialog.tsx b/packages/loopover-ui-kit/src/components/alert-dialog.tsx
index c5d6547ae7..5427c29ef6 100644
--- a/packages/loopover-ui-kit/src/components/alert-dialog.tsx
+++ b/packages/loopover-ui-kit/src/components/alert-dialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "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",
+      "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 motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <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 sm:rounded-lg",
+        "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 sm:rounded-lg motion-reduce:animate-none",
         className,
       )}
       {...props}
diff --git a/packages/loopover-ui-kit/src/components/context-menu.tsx b/packages/loopover-ui-kit/src/components/context-menu.tsx
index 2b1f27e4af..91bf31eaee 100644
--- a/packages/loopover-ui-kit/src/components/context-menu.tsx
+++ b/packages/loopover-ui-kit/src/components/context-menu.tsx
@@ -44,7 +44,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-context-menu-content-transform-origin)",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-context-menu-content-transform-origin) motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -60,7 +60,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-(--radix-context-menu-content-transform-origin)",
+        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-(--radix-context-menu-content-transform-origin) motion-reduce:animate-none",
         className,
       )}
       {...props}
diff --git a/packages/loopover-ui-kit/src/components/dialog.tsx b/packages/loopover-ui-kit/src/components/dialog.tsx
index e6421777af..638a7ed94f 100644
--- a/packages/loopover-ui-kit/src/components/dialog.tsx
+++ b/packages/loopover-ui-kit/src/components/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "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",
+      "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 motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.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 sm:rounded-lg",
+        "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 sm:rounded-lg motion-reduce:animate-none",
         className,
       )}
       {...props}
diff --git a/packages/loopover-ui-kit/src/components/dropdown-menu.tsx b/packages/loopover-ui-kit/src/components/dropdown-menu.tsx
index d44b278255..d7aaad0cd1 100644
--- a/packages/loopover-ui-kit/src/components/dropdown-menu.tsx
+++ b/packages/loopover-ui-kit/src/components/dropdown-menu.tsx
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-dropdown-menu-content-transform-origin)",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-dropdown-menu-content-transform-origin) motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -66,7 +66,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "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 origin-(--radix-dropdown-menu-content-transform-origin)",
+        "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 origin-(--radix-dropdown-menu-content-transform-origin) motion-reduce:animate-none",
         className,
       )}
       {...props}
diff --git a/packages/loopover-ui-kit/src/components/hover-card.tsx b/packages/loopover-ui-kit/src/components/hover-card.tsx
index 5627bd310f..61c051b0ed 100644
--- a/packages/loopover-ui-kit/src/components/hover-card.tsx
+++ b/packages/loopover-ui-kit/src/components/hover-card.tsx
@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-(--radix-hover-card-content-transform-origin)",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-(--radix-hover-card-content-transform-origin) motion-reduce:animate-none",
       className,
     )}
     {...props}
diff --git a/packages/loopover-ui-kit/src/components/input-otp.tsx b/packages/loopover-ui-kit/src/components/input-otp.tsx
index 17a73fa2a3..b1e149016a 100644
--- a/packages/loopover-ui-kit/src/components/input-otp.tsx
+++ b/packages/loopover-ui-kit/src/components/input-otp.tsx
@@ -48,7 +48,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000 motion-reduce:animate-none" />
         </div>
       )}
     </div>
diff --git a/packages/loopover-ui-kit/src/components/menubar.tsx b/packages/loopover-ui-kit/src/components/menubar.tsx
index 4ac7a1320c..e977fd2d72 100644
--- a/packages/loopover-ui-kit/src/components/menubar.tsx
+++ b/packages/loopover-ui-kit/src/components/menubar.tsx
@@ -92,7 +92,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-menubar-content-transform-origin)",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-menubar-content-transform-origin) motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -115,7 +115,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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 origin-(--radix-menubar-content-transform-origin)",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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 origin-(--radix-menubar-content-transform-origin) motion-reduce:animate-none",
           className,
         )}
         {...props}
diff --git a/packages/loopover-ui-kit/src/components/navigation-menu.tsx b/packages/loopover-ui-kit/src/components/navigation-menu.tsx
index 045f66f4e1..eed9c88640 100644
--- a/packages/loopover-ui-kit/src/components/navigation-menu.tsx
+++ b/packages/loopover-ui-kit/src/components/navigation-menu.tsx
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] motion-reduce:animate-none",
         className,
       )}
       ref={ref}
@@ -104,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in motion-reduce:animate-none",
       className,
     )}
     {...props}
diff --git a/packages/loopover-ui-kit/src/components/popover.tsx b/packages/loopover-ui-kit/src/components/popover.tsx
index 292f888db7..a197efd9f3 100644
--- a/packages/loopover-ui-kit/src/components/popover.tsx
+++ b/packages/loopover-ui-kit/src/components/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-(--radix-popover-content-transform-origin)",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-(--radix-popover-content-transform-origin) motion-reduce:animate-none",
         className,
       )}
       {...props}
diff --git a/packages/loopover-ui-kit/src/components/select.tsx b/packages/loopover-ui-kit/src/components/select.tsx
index 016a77cd75..1eee066029 100644
--- a/packages/loopover-ui-kit/src/components/select.tsx
+++ b/packages/loopover-ui-kit/src/components/select.tsx
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-(--radix-select-content-transform-origin)",
+        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-(--radix-select-content-transform-origin) motion-reduce:animate-none",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
diff --git a/packages/loopover-ui-kit/src/components/sheet.tsx b/packages/loopover-ui-kit/src/components/sheet.tsx
index b32afabfef..e08a0c498e 100644
--- a/packages/loopover-ui-kit/src/components/sheet.tsx
+++ b/packages/loopover-ui-kit/src/components/sheet.tsx
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "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",
+      "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 motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
   {
     variants: {
       side: {
diff --git a/packages/loopover-ui-kit/src/components/tooltip.tsx b/packages/loopover-ui-kit/src/components/tooltip.tsx
index 17a345dfa9..53c5f488de 100644
--- a/packages/loopover-ui-kit/src/components/tooltip.tsx
+++ b/packages/loopover-ui-kit/src/components/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border border-strong bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-(--radix-tooltip-content-transform-origin)",
+        "z-50 overflow-hidden rounded-md border border-strong bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-(--radix-tooltip-content-transform-origin) motion-reduce:animate-none",
         className,
       )}
       {...props}