@tinybigui/react 0.21.0 → 0.21.1

package/dist/index.d.cts

@@ -6796,13 +6796,19 @@ interface TooltipTriggerStyledProps {
  * machine so that tooltips fade/scale in on open and fade/scale out before
  * unmounting from the DOM, per MD3 motion specs.
  *
- * Animation state machine:
+ * When `prefers-reduced-motion: reduce` is active the overlay is unmounted
+ * immediately on close — no exit animation, no `animationend` dependency.
+ * This prevents the stuck-mount bug that occurs when the global CSS reset
+ * collapses animations and `animationend` never fires.
+ *
+ * Animation state machine (standard motion):
  * 1. RA fires `onOpenChange(true)`  → mount overlay, play entry animation
  * 2. RA fires `onOpenChange(false)` → keep mounted, play exit animation
  * 3. `animationend` fires          → unmount overlay
  *
- * The controlled `isOpen={isMounted}` prop passed to `TooltipTriggerHeadless`
- * is what keeps the overlay alive during the exit animation phase.
+ * Animation state machine (reduced motion):
+ * 1. RA fires `onOpenChange(true)`  → mount overlay, no animation
+ * 2. RA fires `onOpenChange(false)` → unmount overlay immediately
  *
  * @example
  * ```tsx
@@ -6971,15 +6977,18 @@ interface TooltipHeadlessProps {
  * Renders a single-line text label with MD3 inverse-surface styling.
  * Animation is driven by the `TooltipAnimationContext` provided by
  * `TooltipTrigger`:
- * - Entry: `animate-md-scale-in`  (scale 0.85 + fade → natural)
- * - Exit:  `animate-md-scale-out` (natural → scale 0.85 + fade)
+ * - Entry: `animate-md-scale-in`  (expressive-fast-spatial: 350ms, scale 0.85 → 1 + fade)
+ * - Exit:  `animate-md-scale-out` (emphasized-accelerate: 200ms, scale 1 → 0.85 + fade)
+ * - None:  no animation class when `prefers-reduced-motion: reduce` is active
  *
  * MD3 Tokens applied:
- * - `bg-inverse-surface`     — inverted surface for max contrast
- * - `text-inverse-on-surface` — content color on inverted surface
- * - `rounded-xs`             — 4dp corner radius
- * - `max-w-50`               — 200dp maximum width
- * - `text-body-small`        — MD3 body-small typography
+ * - `bg-inverse-surface`      — inverted surface for maximum contrast
+ * - `text-inverse-on-surface` — content colour on inverted surface
+ * - `rounded-xs`              — 4dp corner radius (CornerExtraSmall)
+ * - `text-body-small`         — BodySmall typescale (12sp)
+ * - `min-h-6`                 — 24dp minimum height
+ * - `max-w-50`                — 200dp maximum width
+ * - `px-2 py-1`               — 8dp × 4dp padding
  *
  * Must be used as the second child of `TooltipTrigger`.
  *
@@ -6996,19 +7005,29 @@ declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.
 /**
  * `RichTooltip` — Layer 3 MD3 Rich Tooltip styled component.
  *
- * Supports an optional title, multi-line supporting text, and an optional
- * action button per MD3 Rich Tooltip specification.
+ * Supports an optional title (subhead), multi-line supporting text, and an
+ * optional action button per MD3 Rich Tooltip specification.
  * Animation is driven by the `TooltipAnimationContext` provided by
  * `TooltipTrigger`:
- * - Entry: `animate-md-scale-in`  (scale 0.85 + fade → natural)
- * - Exit:  `animate-md-scale-out` (natural → scale 0.85 + fade)
- *
- * MD3 Tokens applied:
- * - `bg-surface-container`  — surface container background
- * - `text-on-surface`       — content color on surface
- * - `shadow-elevation-2`    — MD3 elevation level 2
- * - `rounded-md`            — medium corner radius
- * - `max-w-80`              — 320dp maximum width
+ * - Entry: `animate-md-scale-in`  (expressive-fast-spatial: 350ms)
+ * - Exit:  `animate-md-scale-out` (emphasized-accelerate: 200ms)
+ * - None:  no animation class when `prefers-reduced-motion: reduce` is active
+ *
+ * MD3 Tokens applied — container:
+ * - `bg-surface-container`   — surface container background
+ * - `text-on-surface`        — base content colour
+ * - `shadow-elevation-2`     — MD3 elevation level 2
+ * - `rounded-md`             — 12dp corner radius (CornerMedium)
+ * - `max-w-80`               — 320dp maximum width
+ * - `px-4 py-3`              — 16dp × 12dp padding
+ *
+ * MD3 Tokens applied — subhead (title):
+ * - `text-title-small`        — TitleSmall typescale
+ * - `text-on-surface-variant` — subhead colour role per MD3 spec
+ *
+ * MD3 Tokens applied — supporting text:
+ * - `text-body-medium`        — BodyMedium typescale
+ * - `text-on-surface-variant` — same colour role as subhead
  *
  * Must be used as the second child of `TooltipTrigger`.
  *
@@ -7091,46 +7110,50 @@ declare function TooltipTriggerHeadless({ children, delay, isDisabled, isOpen, d
 declare function TooltipOverlayHeadless({ tooltipProps: incomingTooltipProps, triggerRef, placement, offset, className, children, onPointerEnter, onPointerLeave, }: TooltipHeadlessProps): JSX$1.Element | null;
 
 /**
- * Material Design 3 Plain Tooltip Variants (CVA)
+ * Plain tooltip container.
  *
- * Base tokens per MD3 spec:
- * - bg-inverse-surface / text-inverse-on-surface — inverted surface for contrast
- * - rounded-xs — 4dp corner radius (CornerExtraSmall)
- * - min-h-6 — 24dp minimum height
- * - max-w-50 — 200dp maximum width
- * - w-fit — shrink-wrap to content width
- * - px-2 py-1 — 8dp horizontal, 4dp vertical padding
- * - text-body-small — MD3 BodySmall typography (12px)
+ * Renders an inline-flex pill that vertically centres a single-line text label
+ * against the 24dp minimum height.
  *
- * `isVisible` drives the entry/exit animation class:
- * - true  → animate-md-scale-in  (component entering with scale+fade)
- * - false → animate-md-scale-out (component exiting with scale+fade)
+ * MD3 Tokens:
+ * - `bg-inverse-surface`       — inverted surface for maximum contrast
+ * - `text-inverse-on-surface`  — content colour on inverted surface
+ * - `rounded-xs`               — 4dp corner radius (CornerExtraSmall)
+ * - `text-body-small`          — BodySmall typescale (12sp)
+ * - `min-h-6`                  — 24dp minimum height
+ * - `max-w-50`                 — 200dp maximum width
+ * - `px-2 py-1`                — 8dp × 4dp padding
+ * - `z-50`                     — above all page content
+ *
+ * Motion:
+ * - `enter` → `animate-md-scale-in`  (expressive-fast-spatial: 350ms, scale 0.85 → 1 + fade)
+ * - `exit`  → `animate-md-scale-out` (emphasized-accelerate: 200ms, scale 1 → 0.85 + fade)
+ * - `none`  → no animation class     (prefers-reduced-motion guard)
  */
 declare const tooltipVariants: (props?: ({
-    isVisible?: boolean | null | undefined;
+    animation?: "none" | "enter" | "exit" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * Material Design 3 Rich Tooltip Variants (CVA)
+ * Rich tooltip container.
+ *
+ * Wraps the title, supporting text, and optional action row in a flex column.
  *
- * Base tokens per MD3 spec:
- * - bg-surface-container / text-on-surface — surface container background
- * - shadow-elevation-2  — MD3 elevation level 2
- * - rounded-md          — 12dp corner radius (CornerMedium)
- * - min-h-6             — 24dp minimum height
- * - max-w-80            — 320dp maximum width
- * - w-fit               — shrink-wrap to content width
- * - px-4 py-3           — 16dp horizontal, 12dp vertical padding
+ * MD3 Tokens:
+ * - `bg-surface-container`   — surface container background
+ * - `text-on-surface`        — content colour on surface
+ * - `shadow-elevation-2`     — MD3 elevation level 2
+ * - `rounded-md`             — 12dp corner radius (CornerMedium)
+ * - `min-h-6`                — 24dp minimum height
+ * - `max-w-80`               — 320dp maximum width
+ * - `px-4 py-3`              — 16dp × 12dp padding
+ * - `z-50`                   — above all page content
  *
- * `isVisible` drives the entry/exit animation class:
- * - true  → animate-md-scale-in  (component entering with scale+fade)
- * - false → animate-md-scale-out (component exiting with scale+fade)
+ * Motion: same `animation` variant as plain tooltip.
  */
 declare const richTooltipVariants: (props?: ({
-    isVisible?: boolean | null | undefined;
+    animation?: "none" | "enter" | "exit" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-/** Variant prop types inferred from `tooltipVariants`. */
 type TooltipVariants = VariantProps<typeof tooltipVariants>;
-/** Variant prop types inferred from `richTooltipVariants`. */
 type RichTooltipVariants = VariantProps<typeof richTooltipVariants>;
 
 /**

package/dist/index.d.ts

@@ -6796,13 +6796,19 @@ interface TooltipTriggerStyledProps {
  * machine so that tooltips fade/scale in on open and fade/scale out before
  * unmounting from the DOM, per MD3 motion specs.
  *
- * Animation state machine:
+ * When `prefers-reduced-motion: reduce` is active the overlay is unmounted
+ * immediately on close — no exit animation, no `animationend` dependency.
+ * This prevents the stuck-mount bug that occurs when the global CSS reset
+ * collapses animations and `animationend` never fires.
+ *
+ * Animation state machine (standard motion):
  * 1. RA fires `onOpenChange(true)`  → mount overlay, play entry animation
  * 2. RA fires `onOpenChange(false)` → keep mounted, play exit animation
  * 3. `animationend` fires          → unmount overlay
  *
- * The controlled `isOpen={isMounted}` prop passed to `TooltipTriggerHeadless`
- * is what keeps the overlay alive during the exit animation phase.
+ * Animation state machine (reduced motion):
+ * 1. RA fires `onOpenChange(true)`  → mount overlay, no animation
+ * 2. RA fires `onOpenChange(false)` → unmount overlay immediately
  *
  * @example
  * ```tsx
@@ -6971,15 +6977,18 @@ interface TooltipHeadlessProps {
  * Renders a single-line text label with MD3 inverse-surface styling.
  * Animation is driven by the `TooltipAnimationContext` provided by
  * `TooltipTrigger`:
- * - Entry: `animate-md-scale-in`  (scale 0.85 + fade → natural)
- * - Exit:  `animate-md-scale-out` (natural → scale 0.85 + fade)
+ * - Entry: `animate-md-scale-in`  (expressive-fast-spatial: 350ms, scale 0.85 → 1 + fade)
+ * - Exit:  `animate-md-scale-out` (emphasized-accelerate: 200ms, scale 1 → 0.85 + fade)
+ * - None:  no animation class when `prefers-reduced-motion: reduce` is active
  *
  * MD3 Tokens applied:
- * - `bg-inverse-surface`     — inverted surface for max contrast
- * - `text-inverse-on-surface` — content color on inverted surface
- * - `rounded-xs`             — 4dp corner radius
- * - `max-w-50`               — 200dp maximum width
- * - `text-body-small`        — MD3 body-small typography
+ * - `bg-inverse-surface`      — inverted surface for maximum contrast
+ * - `text-inverse-on-surface` — content colour on inverted surface
+ * - `rounded-xs`              — 4dp corner radius (CornerExtraSmall)
+ * - `text-body-small`         — BodySmall typescale (12sp)
+ * - `min-h-6`                 — 24dp minimum height
+ * - `max-w-50`                — 200dp maximum width
+ * - `px-2 py-1`               — 8dp × 4dp padding
  *
  * Must be used as the second child of `TooltipTrigger`.
  *
@@ -6996,19 +7005,29 @@ declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.
 /**
  * `RichTooltip` — Layer 3 MD3 Rich Tooltip styled component.
  *
- * Supports an optional title, multi-line supporting text, and an optional
- * action button per MD3 Rich Tooltip specification.
+ * Supports an optional title (subhead), multi-line supporting text, and an
+ * optional action button per MD3 Rich Tooltip specification.
  * Animation is driven by the `TooltipAnimationContext` provided by
  * `TooltipTrigger`:
- * - Entry: `animate-md-scale-in`  (scale 0.85 + fade → natural)
- * - Exit:  `animate-md-scale-out` (natural → scale 0.85 + fade)
- *
- * MD3 Tokens applied:
- * - `bg-surface-container`  — surface container background
- * - `text-on-surface`       — content color on surface
- * - `shadow-elevation-2`    — MD3 elevation level 2
- * - `rounded-md`            — medium corner radius
- * - `max-w-80`              — 320dp maximum width
+ * - Entry: `animate-md-scale-in`  (expressive-fast-spatial: 350ms)
+ * - Exit:  `animate-md-scale-out` (emphasized-accelerate: 200ms)
+ * - None:  no animation class when `prefers-reduced-motion: reduce` is active
+ *
+ * MD3 Tokens applied — container:
+ * - `bg-surface-container`   — surface container background
+ * - `text-on-surface`        — base content colour
+ * - `shadow-elevation-2`     — MD3 elevation level 2
+ * - `rounded-md`             — 12dp corner radius (CornerMedium)
+ * - `max-w-80`               — 320dp maximum width
+ * - `px-4 py-3`              — 16dp × 12dp padding
+ *
+ * MD3 Tokens applied — subhead (title):
+ * - `text-title-small`        — TitleSmall typescale
+ * - `text-on-surface-variant` — subhead colour role per MD3 spec
+ *
+ * MD3 Tokens applied — supporting text:
+ * - `text-body-medium`        — BodyMedium typescale
+ * - `text-on-surface-variant` — same colour role as subhead
  *
  * Must be used as the second child of `TooltipTrigger`.
  *
@@ -7091,46 +7110,50 @@ declare function TooltipTriggerHeadless({ children, delay, isDisabled, isOpen, d
 declare function TooltipOverlayHeadless({ tooltipProps: incomingTooltipProps, triggerRef, placement, offset, className, children, onPointerEnter, onPointerLeave, }: TooltipHeadlessProps): JSX$1.Element | null;
 
 /**
- * Material Design 3 Plain Tooltip Variants (CVA)
+ * Plain tooltip container.
  *
- * Base tokens per MD3 spec:
- * - bg-inverse-surface / text-inverse-on-surface — inverted surface for contrast
- * - rounded-xs — 4dp corner radius (CornerExtraSmall)
- * - min-h-6 — 24dp minimum height
- * - max-w-50 — 200dp maximum width
- * - w-fit — shrink-wrap to content width
- * - px-2 py-1 — 8dp horizontal, 4dp vertical padding
- * - text-body-small — MD3 BodySmall typography (12px)
+ * Renders an inline-flex pill that vertically centres a single-line text label
+ * against the 24dp minimum height.
  *
- * `isVisible` drives the entry/exit animation class:
- * - true  → animate-md-scale-in  (component entering with scale+fade)
- * - false → animate-md-scale-out (component exiting with scale+fade)
+ * MD3 Tokens:
+ * - `bg-inverse-surface`       — inverted surface for maximum contrast
+ * - `text-inverse-on-surface`  — content colour on inverted surface
+ * - `rounded-xs`               — 4dp corner radius (CornerExtraSmall)
+ * - `text-body-small`          — BodySmall typescale (12sp)
+ * - `min-h-6`                  — 24dp minimum height
+ * - `max-w-50`                 — 200dp maximum width
+ * - `px-2 py-1`                — 8dp × 4dp padding
+ * - `z-50`                     — above all page content
+ *
+ * Motion:
+ * - `enter` → `animate-md-scale-in`  (expressive-fast-spatial: 350ms, scale 0.85 → 1 + fade)
+ * - `exit`  → `animate-md-scale-out` (emphasized-accelerate: 200ms, scale 1 → 0.85 + fade)
+ * - `none`  → no animation class     (prefers-reduced-motion guard)
  */
 declare const tooltipVariants: (props?: ({
-    isVisible?: boolean | null | undefined;
+    animation?: "none" | "enter" | "exit" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
- * Material Design 3 Rich Tooltip Variants (CVA)
+ * Rich tooltip container.
+ *
+ * Wraps the title, supporting text, and optional action row in a flex column.
  *
- * Base tokens per MD3 spec:
- * - bg-surface-container / text-on-surface — surface container background
- * - shadow-elevation-2  — MD3 elevation level 2
- * - rounded-md          — 12dp corner radius (CornerMedium)
- * - min-h-6             — 24dp minimum height
- * - max-w-80            — 320dp maximum width
- * - w-fit               — shrink-wrap to content width
- * - px-4 py-3           — 16dp horizontal, 12dp vertical padding
+ * MD3 Tokens:
+ * - `bg-surface-container`   — surface container background
+ * - `text-on-surface`        — content colour on surface
+ * - `shadow-elevation-2`     — MD3 elevation level 2
+ * - `rounded-md`             — 12dp corner radius (CornerMedium)
+ * - `min-h-6`                — 24dp minimum height
+ * - `max-w-80`               — 320dp maximum width
+ * - `px-4 py-3`              — 16dp × 12dp padding
+ * - `z-50`                   — above all page content
  *
- * `isVisible` drives the entry/exit animation class:
- * - true  → animate-md-scale-in  (component entering with scale+fade)
- * - false → animate-md-scale-out (component exiting with scale+fade)
+ * Motion: same `animation` variant as plain tooltip.
  */
 declare const richTooltipVariants: (props?: ({
-    isVisible?: boolean | null | undefined;
+    animation?: "none" | "enter" | "exit" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-/** Variant prop types inferred from `tooltipVariants`. */
 type TooltipVariants = VariantProps<typeof tooltipVariants>;
-/** Variant prop types inferred from `richTooltipVariants`. */
 type RichTooltipVariants = VariantProps<typeof richTooltipVariants>;
 
 /**

package/dist/index.js

@@ -8208,7 +8208,8 @@ function TooltipOverlayHeadless({
 }
 var TooltipAnimationContext = createContext({
   isExiting: false,
-  onAnimationEnd: () => void 0
+  onAnimationEnd: () => void 0,
+  reducedMotion: false
 });
 function useTooltipAnimation() {
   return useContext(TooltipAnimationContext);
@@ -8218,46 +8219,60 @@ function TooltipTrigger({
   delay = 300,
   isDisabled
 }) {
+  const reducedMotion = useReducedMotion();
   const [isMounted, setIsMounted] = useState(false);
   const [isExiting, setIsExiting] = useState(false);
   const isExitingRef = useRef(false);
   const isPointerOverTooltipRef = useRef(false);
   const pendingCloseRef = useRef(false);
-  const handleOpenChange = useCallback((open) => {
-    if (open) {
-      pendingCloseRef.current = false;
-      isExitingRef.current = false;
-      setIsMounted(true);
-      setIsExiting(false);
-    } else if (isPointerOverTooltipRef.current) {
-      pendingCloseRef.current = true;
-    } else if (!isExitingRef.current) {
-      isExitingRef.current = true;
-      setIsExiting(true);
-    }
-  }, []);
-  const handleAnimationEnd = useCallback(() => {
-    if (!isExitingRef.current) return;
+  const unmountImmediately = useCallback(() => {
     isExitingRef.current = false;
     pendingCloseRef.current = false;
     setIsMounted(false);
     setIsExiting(false);
   }, []);
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (open) {
+        pendingCloseRef.current = false;
+        isExitingRef.current = false;
+        setIsMounted(true);
+        setIsExiting(false);
+      } else if (isPointerOverTooltipRef.current) {
+        pendingCloseRef.current = true;
+      } else if (reducedMotion) {
+        unmountImmediately();
+      } else if (!isExitingRef.current) {
+        isExitingRef.current = true;
+        setIsExiting(true);
+      }
+    },
+    [reducedMotion, unmountImmediately]
+  );
+  const handleAnimationEnd = useCallback(() => {
+    if (!isExitingRef.current) return;
+    unmountImmediately();
+  }, [unmountImmediately]);
   const handleOverlayPointerEnter = useCallback(() => {
     isPointerOverTooltipRef.current = true;
     pendingCloseRef.current = false;
   }, []);
   const handleOverlayPointerLeave = useCallback(() => {
     isPointerOverTooltipRef.current = false;
-    if (pendingCloseRef.current && !isExitingRef.current) {
+    if (pendingCloseRef.current) {
       pendingCloseRef.current = false;
-      isExitingRef.current = true;
-      setIsExiting(true);
+      if (reducedMotion) {
+        unmountImmediately();
+      } else if (!isExitingRef.current) {
+        isExitingRef.current = true;
+        setIsExiting(true);
+      }
     }
-  }, []);
+  }, [reducedMotion, unmountImmediately]);
   const contextValue = {
     isExiting,
-    onAnimationEnd: handleAnimationEnd
+    onAnimationEnd: handleAnimationEnd,
+    reducedMotion
   };
   const [triggerChild, tooltipChild] = children;
   const placement = isValidElement(tooltipChild) ? tooltipChild.props.placement ?? "top" : "top";
@@ -8286,51 +8301,69 @@ function TooltipTrigger({
   ) });
 }
 var tooltipVariants = cva(
-  "z-50 w-fit min-h-6 rounded-xs px-2 py-1 text-body-small bg-inverse-surface text-inverse-on-surface max-w-50",
+  [
+    "z-50 inline-flex items-center w-fit",
+    "min-h-6 rounded-xs px-2 py-1",
+    "text-body-small bg-inverse-surface text-inverse-on-surface",
+    "max-w-50"
+  ],
   {
     variants: {
       /**
-       * Drives the MD3 enter/exit animation class.
+       * Controls the enter/exit animation class.
        * Managed by `TooltipTrigger`'s animation state machine.
-       * @default true
+       * Set to `"none"` when `prefers-reduced-motion: reduce` is active.
+       * @default "enter"
        */
-      isVisible: {
-        true: "animate-md-scale-in",
-        false: "animate-md-scale-out"
+      animation: {
+        enter: "animate-md-scale-in",
+        exit: "animate-md-scale-out",
+        none: ""
       }
     },
     defaultVariants: {
-      isVisible: true
+      animation: "enter"
     }
   }
 );
 var richTooltipVariants = cva(
-  "z-50 w-fit min-h-6 rounded-md px-4 py-3 bg-surface-container text-on-surface shadow-elevation-2 max-w-80",
+  [
+    "z-50 flex flex-col w-fit",
+    "min-h-6 rounded-md px-4 py-3",
+    "bg-surface-container text-on-surface shadow-elevation-2",
+    "max-w-80"
+  ],
   {
     variants: {
       /**
-       * Drives the MD3 enter/exit animation class.
+       * Controls the enter/exit animation class.
        * Managed by `TooltipTrigger`'s animation state machine.
-       * @default true
+       * Set to `"none"` when `prefers-reduced-motion: reduce` is active.
+       * @default "enter"
        */
-      isVisible: {
-        true: "animate-md-scale-in",
-        false: "animate-md-scale-out"
+      animation: {
+        enter: "animate-md-scale-in",
+        exit: "animate-md-scale-out",
+        none: ""
       }
     },
     defaultVariants: {
-      isVisible: true
+      animation: "enter"
     }
   }
 );
+var richTooltipTitleVariants = cva(["text-title-small text-on-surface-variant mb-1"]);
+var richTooltipSupportingTextVariants = cva(["text-body-medium text-on-surface-variant"]);
+var richTooltipActionsVariants = cva(["flex items-center justify-start mt-3 -ml-2"]);
 var Tooltip = forwardRef(
   ({ children, className, placement: _placement }, ref) => {
-    const { isExiting, onAnimationEnd } = useTooltipAnimation();
+    const { isExiting, onAnimationEnd, reducedMotion } = useTooltipAnimation();
+    const animation = reducedMotion ? "none" : isExiting ? "exit" : "enter";
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(tooltipVariants({ isVisible: !isExiting }), className),
+        className: cn(tooltipVariants({ animation }), className),
         onAnimationEnd,
         children
       }
@@ -8340,17 +8373,18 @@ var Tooltip = forwardRef(
 Tooltip.displayName = "Tooltip";
 var RichTooltip = forwardRef(
   ({ title, children, action, className, placement: _placement }, ref) => {
-    const { isExiting, onAnimationEnd } = useTooltipAnimation();
+    const { isExiting, onAnimationEnd, reducedMotion } = useTooltipAnimation();
+    const animation = reducedMotion ? "none" : isExiting ? "exit" : "enter";
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn(richTooltipVariants({ isVisible: !isExiting }), className),
+        className: cn(richTooltipVariants({ animation }), className),
         onAnimationEnd,
         children: [
-          title && /* @__PURE__ */ jsx("p", { className: "text-on-surface text-title-small mb-1", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-body-medium", children }),
-          action
+          title && /* @__PURE__ */ jsx("p", { className: richTooltipTitleVariants(), children: title }),
+          /* @__PURE__ */ jsx("p", { className: richTooltipSupportingTextVariants(), children }),
+          action && /* @__PURE__ */ jsx("div", { className: richTooltipActionsVariants(), children: action })
         ]
       }
     );