@tinybigui/react 0.21.0 → 0.22.0

package/dist/index.js

@@ -7716,13 +7716,14 @@ var DialogPanel = ({
   headlineId,
   contentId,
   onClose,
-  onTransitionEnd,
+  onAnimationEnd,
   variant,
   isDismissable,
   wrapperClassName,
   className,
   animationState,
   getAnimationClassName,
+  icon,
   children
 }) => {
   const panelRef = useRef(null);
@@ -7745,9 +7746,10 @@ var DialogPanel = ({
     panelRef
   );
   const panelClassName = cn(className, getAnimationClassName?.(animationState));
+  const hasIcon = icon !== void 0 && icon !== null && variant === "basic";
   return (
     // Centering/positioning wrapper — structural only, no ARIA role
-    /* @__PURE__ */ jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ...mergeProps(overlayProps, dialogProps),
@@ -7756,8 +7758,12 @@ var DialogPanel = ({
         className: panelClassName,
         "data-animation-state": animationState,
         "data-variant": variant,
-        onTransitionEnd,
-        children
+        "data-with-icon": hasIcon ? "" : void 0,
+        onAnimationEnd,
+        children: [
+          hasIcon && icon,
+          children
+        ]
       }
     ) })
   );
@@ -7770,9 +7776,11 @@ var DialogHeadless = forwardRef(
     defaultOpen = false,
     onOpenChange,
     "aria-label": ariaLabel,
+    icon,
     children,
     className,
-    scrimClassName,
+    wrapperClassName,
+    getScrimClassName,
     getAnimationClassName
   }, _ref) {
     const state = useOverlayTriggerState({
@@ -7806,7 +7814,7 @@ var DialogHeadless = forwardRef(
             closedRef.current = true;
             setAnimationState("exited");
           }
-        }, 150);
+        }, 250);
       }
     }, [isOpen, animationState]);
     useEffect(
@@ -7817,16 +7825,20 @@ var DialogHeadless = forwardRef(
       },
       []
     );
-    const handleTransitionEnd = useCallback(() => {
-      if (animationState === "exiting" && !closedRef.current) {
-        if (exitFallbackRef.current !== null) {
-          clearTimeout(exitFallbackRef.current);
-          exitFallbackRef.current = null;
+    const handleAnimationEnd = useCallback(
+      (e) => {
+        if (e.target !== e.currentTarget) return;
+        if (animationState === "exiting" && !closedRef.current) {
+          if (exitFallbackRef.current !== null) {
+            clearTimeout(exitFallbackRef.current);
+            exitFallbackRef.current = null;
+          }
+          closedRef.current = true;
+          setAnimationState("exited");
         }
-        closedRef.current = true;
-        setAnimationState("exited");
-      }
-    }, [animationState]);
+      },
+      [animationState]
+    );
     const baseId = useId();
     const headlineId = `${baseId}-dialog-headline`;
     const contentId = `${baseId}-dialog-content`;
@@ -7841,6 +7853,8 @@ var DialogHeadless = forwardRef(
         close();
       }
     }, [variant, close]);
+    const resolvedWrapperClass = wrapperClassName ?? (variant === "basic" ? "fixed inset-0 z-50 flex items-center justify-center px-4" : "fixed inset-0 z-50");
+    const resolvedScrimClass = getScrimClassName?.(animationState) ?? "fixed inset-0 z-40 bg-scrim/32";
     if (!isOpen && animationState === "exited") {
       return null;
     }
@@ -7849,7 +7863,7 @@ var DialogHeadless = forwardRef(
         "div",
         {
           "data-testid": "dialog-scrim",
-          className: scrimClassName,
+          className: resolvedScrimClass,
           onClick: handleScrimClick,
           "aria-hidden": "true"
         }
@@ -7861,13 +7875,14 @@ var DialogHeadless = forwardRef(
           headlineId,
           contentId,
           onClose: close,
-          onTransitionEnd: handleTransitionEnd,
+          onAnimationEnd: handleAnimationEnd,
           variant,
           isDismissable: variant === "basic",
-          wrapperClassName: variant === "basic" ? "fixed inset-0 z-50 flex items-center justify-center px-4" : "fixed inset-0 z-50",
+          wrapperClassName: resolvedWrapperClass,
           className,
           animationState,
           getAnimationClassName,
+          icon,
           children
         }
       ) })
@@ -7877,16 +7892,28 @@ var DialogHeadless = forwardRef(
   }
 );
 DialogHeadless.displayName = "DialogHeadless";
-var dialogScrimVariants = cva([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-scrim",
-  "opacity-32",
-  "transition-opacity",
-  "duration-medium2",
-  "ease-standard"
-]);
+var dialogScrimVariants = cva(
+  [
+    "fixed",
+    "inset-0",
+    "z-40",
+    // MD3 scrim: bg-scrim at 32% opacity — always set so instant-show works in reduced-motion
+    "bg-scrim/32"
+  ],
+  {
+    variants: {
+      animationState: {
+        entering: ["opacity-0"],
+        visible: ["animate-md-fade-in"],
+        exiting: ["animate-md-fade-out"],
+        exited: ["opacity-0", "pointer-events-none"]
+      }
+    },
+    defaultVariants: {
+      animationState: "entering"
+    }
+  }
+);
 var dialogPanelVariants = cva(
   [
     // Stacking above scrim
@@ -7896,9 +7923,10 @@ var dialogPanelVariants = cva(
     // Flex column layout for slots
     "flex",
     "flex-col",
-    // Transition for animation state changes
-    "transition-[opacity,transform]",
-    "will-change-[opacity,transform]"
+    // Compositor hint for keyframe animation
+    "will-change-[opacity,transform]",
+    // group scope — lets child slots consume data-with-icon via group-data-[with-icon]/dialog:
+    "group/dialog"
   ],
   {
     variants: {
@@ -7912,11 +7940,11 @@ var dialogPanelVariants = cva(
           "min-w-70",
           "max-w-dialog-max",
           "w-full",
-          // Internal spacing
+          // Internal spacing: 24dp padding, headline mb-4, content mb-6, actions pt-3
           "pt-6",
           "pb-3",
           "px-6",
-          // Positioned in viewport center
+          // Positioning (centering wrapper handles the viewport centering)
           "relative"
         ],
         fullscreen: [
@@ -7927,7 +7955,6 @@ var dialogPanelVariants = cva(
           "rounded-none",
           // No elevation shadow on fullscreen
           "shadow-none",
-          // Positioned to fill portal
           "relative"
         ]
       }
@@ -7937,7 +7964,7 @@ var dialogPanelVariants = cva(
     }
   }
 );
-cva([], {
+var dialogWrapperVariants = cva([], {
   variants: {
     variant: {
       basic: ["fixed", "inset-0", "z-50", "flex", "items-center", "justify-center", "px-4"],
@@ -7951,9 +7978,13 @@ cva([], {
 var dialogAnimationVariants = cva("", {
   variants: {
     animationState: {
+      // initial mount frame before the animation starts — rendered invisible
       entering: [],
+      // entry animation active
       visible: [],
+      // exit animation active
       exiting: [],
+      // fully dismissed; portal gate will remove the element
       exited: []
     },
     variant: {
@@ -7962,53 +7993,55 @@ var dialogAnimationVariants = cva("", {
     }
   },
   compoundVariants: [
-    // Basic: entering — start scaled down + transparent
+    // ── Basic ────────────────────────────────────────────────────────────────
+    // entering: start invisible (animate-md-scale-in keyframe starts from scale(0.85)/opacity:0)
     {
       animationState: "entering",
       variant: "basic",
-      className: ["scale-90", "opacity-0"]
+      className: ["opacity-0"]
     },
-    // Basic: visible — scale to full + fade in
+    // visible: composite scale-in keyframe (expressive-fast-spatial 350ms)
     {
       animationState: "visible",
       variant: "basic",
-      className: ["scale-100", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+      className: ["animate-md-scale-in"]
     },
-    // Basic: exiting — fade out (scale stays at 1)
+    // exiting: composite scale-out keyframe (emphasized-accelerate 200ms)
     {
       animationState: "exiting",
       variant: "basic",
-      className: ["scale-100", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+      className: ["animate-md-scale-out"]
     },
-    // Basic: exited — fully transparent
+    // exited: keep hidden until portal gate removes it
     {
       animationState: "exited",
       variant: "basic",
-      className: ["scale-100", "opacity-0"]
+      className: ["opacity-0", "pointer-events-none"]
     },
-    // Fullscreen: entering — start below viewport + transparent
+    // ── Fullscreen ───────────────────────────────────────────────────────────
+    // entering: start off-screen below (slide-in-bottom starts from translateY(100%)/opacity:0)
     {
       animationState: "entering",
       variant: "fullscreen",
-      className: ["translate-y-full", "opacity-0"]
+      className: ["opacity-0"]
     },
-    // Fullscreen: visible — slide up + fade in
+    // visible: composite slide-in-bottom keyframe (standard-default-spatial 500ms)
     {
       animationState: "visible",
       variant: "fullscreen",
-      className: ["translate-y-0", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+      className: ["animate-md-slide-in-bottom"]
     },
-    // Fullscreen: exiting — slide down + fade out
+    // exiting: composite slide-out-bottom keyframe (emphasized-accelerate 200ms)
     {
       animationState: "exiting",
       variant: "fullscreen",
-      className: ["translate-y-full", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+      className: ["animate-md-slide-out-bottom"]
     },
-    // Fullscreen: exited — fully off-screen
+    // exited: keep hidden until portal gate removes it
     {
       animationState: "exited",
       variant: "fullscreen",
-      className: ["translate-y-full", "opacity-0"]
+      className: ["opacity-0", "pointer-events-none"]
     }
   ],
   defaultVariants: {
@@ -8016,10 +8049,26 @@ var dialogAnimationVariants = cva("", {
     variant: "basic"
   }
 });
+cva([
+  // Center the icon in the panel
+  "flex",
+  "items-center",
+  "justify-center",
+  // Bottom margin separating icon from headline
+  "mb-4",
+  // MD3 spec: icon color = secondary
+  "text-secondary",
+  // 24dp icon size (children — typically an SVG — should be 24×24)
+  "size-6"
+]);
 var dialogHeadlineVariants = cva(["text-headline-small", "text-on-surface"], {
   variants: {
     variant: {
-      basic: ["mb-4"],
+      basic: [
+        "mb-4",
+        // Center headline text when hero icon is present
+        "group-data-[with-icon]/dialog:text-center"
+      ],
       fullscreen: [
         // Top app bar row in fullscreen: flex, items-center, gap
         "flex",
@@ -8044,7 +8093,19 @@ var dialogHeadlineTitleVariants = cva([
   "truncate"
 ]);
 var dialogContentVariants = cva(
-  ["text-body-medium", "text-on-surface-variant", "overflow-y-auto", "flex-1"],
+  [
+    "text-body-medium",
+    "text-on-surface-variant",
+    "overflow-y-auto",
+    "flex-1",
+    // Center supporting text when hero icon is present
+    "group-data-[with-icon]/dialog:text-center",
+    // Scroll dividers — activated by DialogContent's scroll handler
+    "data-[scroll-divider-top]:border-t",
+    "data-[scroll-divider-top]:border-outline-variant",
+    "data-[scroll-divider-bottom]:border-b",
+    "data-[scroll-divider-bottom]:border-outline-variant"
+  ],
   {
     variants: {
       variant: {
@@ -8071,11 +8132,31 @@ var Dialog = forwardRef(function Dialog2({
   defaultOpen = false,
   onOpenChange,
   "aria-label": ariaLabel,
+  icon,
   children,
   className
 }, _ref) {
-  const panelClassName = cn(dialogPanelVariants({ variant }), className);
-  const scrimClass = dialogScrimVariants();
+  const reducedMotion = useReducedMotion();
+  const panelClassName = cn(
+    dialogPanelVariants({ variant }),
+    reducedMotion && "transition-none",
+    className
+  );
+  const wrapperClassName = dialogWrapperVariants({ variant });
+  const getScrimClassName = useCallback(
+    (state) => {
+      if (reducedMotion) return "fixed inset-0 z-40 bg-scrim/32";
+      return dialogScrimVariants({ animationState: state });
+    },
+    [reducedMotion]
+  );
+  const getAnimationClassName = useCallback(
+    (state) => {
+      if (reducedMotion) return "";
+      return dialogAnimationVariants({ animationState: state, variant });
+    },
+    [reducedMotion, variant]
+  );
   return /* @__PURE__ */ jsx(
     DialogHeadless,
     {
@@ -8084,9 +8165,11 @@ var Dialog = forwardRef(function Dialog2({
       ...defaultOpen !== void 0 ? { defaultOpen } : {},
       ...onOpenChange !== void 0 ? { onOpenChange } : {},
       ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      ...icon !== void 0 ? { icon } : {},
       className: panelClassName,
-      scrimClassName: scrimClass,
-      getAnimationClassName: (state) => dialogAnimationVariants({ animationState: state, variant }),
+      wrapperClassName,
+      getScrimClassName,
+      getAnimationClassName,
       children
     }
   );
@@ -8097,7 +8180,7 @@ var DialogHeadline = forwardRef(
     const { headlineId, variant } = useDialogContext();
     if (variant === "fullscreen") {
       return (
-        // Top app bar row for fullscreen variant
+        // Top app bar row for fullscreen variant — always has border-b border-outline-variant
         /* @__PURE__ */ jsxs("div", { className: cn(dialogHeadlineVariants({ variant: "fullscreen" }), className), children: [
           closeButton,
           /* @__PURE__ */ jsx("h2", { id: headlineId, className: dialogHeadlineTitleVariants(), children }),
@@ -8105,21 +8188,72 @@ var DialogHeadline = forwardRef(
         ] })
       );
     }
-    return /* @__PURE__ */ jsx(
-      "h2",
-      {
-        ref,
-        id: headlineId,
-        className: cn(dialogHeadlineVariants({ variant: "basic" }), className),
-        children
-      }
+    return (
+      // Basic variant: text-headline-small, text-on-surface, mb-4
+      // group-data-[with-icon]/dialog:text-center is applied via the CVA base classes
+      // when the parent panel root has data-with-icon set by DialogHeadless.
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          ref,
+          id: headlineId,
+          className: cn(dialogHeadlineVariants({ variant: "basic" }), className),
+          children
+        }
+      )
     );
   }
 );
 DialogHeadline.displayName = "DialogHeadline";
-var DialogContent = forwardRef(function DialogContent2({ children, className }, ref) {
+var DialogContent = forwardRef(function DialogContent2({ children, className }, forwardedRef) {
   const { contentId, variant } = useDialogContext();
-  return /* @__PURE__ */ jsx("div", { ref, id: contentId, className: cn(dialogContentVariants({ variant }), className), children });
+  const internalRef = useRef(null);
+  const setRef = useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef !== null && forwardedRef !== void 0) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const updateDividers = useCallback(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    const isScrollable = el.scrollHeight > el.clientHeight;
+    if (!isScrollable) {
+      el.removeAttribute("data-scroll-divider-top");
+      el.removeAttribute("data-scroll-divider-bottom");
+      return;
+    }
+    const scrolledFromTop = el.scrollTop > 1;
+    const scrolledToBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    if (scrolledFromTop) {
+      el.setAttribute("data-scroll-divider-top", "");
+    } else {
+      el.removeAttribute("data-scroll-divider-top");
+    }
+    if (!scrolledToBottom) {
+      el.setAttribute("data-scroll-divider-bottom", "");
+    } else {
+      el.removeAttribute("data-scroll-divider-bottom");
+    }
+  }, []);
+  useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    updateDividers();
+    el.addEventListener("scroll", updateDividers, { passive: true });
+    const observer = new ResizeObserver(updateDividers);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateDividers);
+      observer.disconnect();
+    };
+  }, [updateDividers]);
+  return /* @__PURE__ */ jsx("div", { ref: setRef, id: contentId, className: cn(dialogContentVariants({ variant }), className), children });
 });
 DialogContent.displayName = "DialogContent";
 var DialogActions = forwardRef(function DialogActions2({ children, className }, ref) {
@@ -8208,7 +8342,8 @@ function TooltipOverlayHeadless({
 }
 var TooltipAnimationContext = createContext({
   isExiting: false,
-  onAnimationEnd: () => void 0
+  onAnimationEnd: () => void 0,
+  reducedMotion: false
 });
 function useTooltipAnimation() {
   return useContext(TooltipAnimationContext);
@@ -8218,46 +8353,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 +8435,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 +8507,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 })
         ]
       }
     );