@tinybigui/react 0.21.0 → 0.21.1

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.21.0** (2026-06-10)
+> **Latest Release: v0.21.1** (2026-06-10)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -166,7 +166,7 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 | `Menu`        | ✅     | Dropdown, context menu, submenus                                                   |
 | `Progress`    | ✅     | MD3 expressive slot CVA, colorful tokens, wavy shape, thick track (v0.16.0)        |
 | `BottomSheet` | ✅     | MD3 expressive handle, variants-vs-states architecture (v0.11.0)                   |
-| `Tooltip`     | ✅     | Plain and rich tooltip with positioning                                            |
+| `Tooltip`     | ✅     | Slot-based MD3 styling, reduced-motion guard, rich tooltip token fixes (v0.21.1)   |
 
 ### Phase 4: Data Display ✅
 

package/dist/index.cjs

@@ -8213,7 +8213,8 @@ function TooltipOverlayHeadless({
 }
 var TooltipAnimationContext = React.createContext({
   isExiting: false,
-  onAnimationEnd: () => void 0
+  onAnimationEnd: () => void 0,
+  reducedMotion: false
 });
 function useTooltipAnimation() {
   return React.useContext(TooltipAnimationContext);
@@ -8223,46 +8224,60 @@ function TooltipTrigger({
   delay = 300,
   isDisabled
 }) {
+  const reducedMotion = useReducedMotion();
   const [isMounted, setIsMounted] = React.useState(false);
   const [isExiting, setIsExiting] = React.useState(false);
   const isExitingRef = React.useRef(false);
   const isPointerOverTooltipRef = React.useRef(false);
   const pendingCloseRef = React.useRef(false);
-  const handleOpenChange = React.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 = React.useCallback(() => {
-    if (!isExitingRef.current) return;
+  const unmountImmediately = React.useCallback(() => {
     isExitingRef.current = false;
     pendingCloseRef.current = false;
     setIsMounted(false);
     setIsExiting(false);
   }, []);
+  const handleOpenChange = React.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 = React.useCallback(() => {
+    if (!isExitingRef.current) return;
+    unmountImmediately();
+  }, [unmountImmediately]);
   const handleOverlayPointerEnter = React.useCallback(() => {
     isPointerOverTooltipRef.current = true;
     pendingCloseRef.current = false;
   }, []);
   const handleOverlayPointerLeave = React.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 = React.isValidElement(tooltipChild) ? tooltipChild.props.placement ?? "top" : "top";
@@ -8291,51 +8306,69 @@ function TooltipTrigger({
   ) });
 }
 var tooltipVariants = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.cva(["text-title-small text-on-surface-variant mb-1"]);
+var richTooltipSupportingTextVariants = classVarianceAuthority.cva(["text-body-medium text-on-surface-variant"]);
+var richTooltipActionsVariants = classVarianceAuthority.cva(["flex items-center justify-start mt-3 -ml-2"]);
 var Tooltip = React.forwardRef(
   ({ children, className, placement: _placement }, ref) => {
-    const { isExiting, onAnimationEnd } = useTooltipAnimation();
+    const { isExiting, onAnimationEnd, reducedMotion } = useTooltipAnimation();
+    const animation = reducedMotion ? "none" : isExiting ? "exit" : "enter";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn(tooltipVariants({ isVisible: !isExiting }), className),
+        className: cn(tooltipVariants({ animation }), className),
         onAnimationEnd,
         children
       }
@@ -8345,17 +8378,18 @@ var Tooltip = React.forwardRef(
 Tooltip.displayName = "Tooltip";
 var RichTooltip = React.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__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: cn(richTooltipVariants({ isVisible: !isExiting }), className),
+        className: cn(richTooltipVariants({ animation }), className),
         onAnimationEnd,
         children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface text-title-small mb-1", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface-variant text-body-medium", children }),
-          action
+          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: richTooltipTitleVariants(), children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: richTooltipSupportingTextVariants(), children }),
+          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: richTooltipActionsVariants(), children: action })
         ]
       }
     );