@react-fabric/core 1.0.0-beta.41 → 1.0.0-beta.43

package/dist/cjs/components/button/ConfirmButton.js

@@ -125,7 +125,9 @@ var ConfirmButton = function ConfirmButton(_ref) {
           "data-color": color,
           className: classNames("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base"),
           ref: refs.setFloating,
-          style: floatingStyles
+          style: _objectSpread({
+            zIndex: "var(--z-popover)"
+          }, floatingStyles)
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "font-medium ",

package/dist/cjs/core/page/Page.js

@@ -1,38 +1,21 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var Animations = require('../../components/animations/Animations.js');
 var Icon = require('../../components/icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
+var _excluded = ["ref", "children", "paper", "title", "titleClassName", "icon", "rtlFlip", "iconBg", "iconColor", "loading", "data-testid", "data-test-value"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
 var Page = function Page(_ref) {
-  var children = _ref.children,
+  var ref = _ref.ref,
+    children = _ref.children,
     paper = _ref.paper,
     title = _ref.title,
     titleClassName = _ref.titleClassName,
@@ -42,12 +25,15 @@ var Page = function Page(_ref) {
     iconColor = _ref.iconColor,
     loading = _ref.loading,
     testId = _ref["data-testid"],
-    testValue = _ref["data-test-value"];
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    testValue = _ref["data-test-value"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-testid": testId,
     "data-test-value": testValue,
     "data-loading": loading,
-    className: classNames("fabric-page", "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    ref: ref
+  }, rest), {}, {
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "pageTitle",
       className: classNames("fabric-pageTitle", "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center", titleClassName),
@@ -59,7 +45,7 @@ var Page = function Page(_ref) {
         color: iconColor
       }), title]
     }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
-  });
+  }));
 };
 
 exports.Page = Page;

package/dist/cjs/overlays/modal/Modal.js

@@ -13,7 +13,7 @@ var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
+var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "noMask", "width", "height", "minHeight", "minWidth"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Modal = function Modal(_ref) {
@@ -29,7 +29,9 @@ var Modal = function Modal(_ref) {
     onBeforeClose = _ref.onBeforeClose,
     children = _ref.children,
     loading = _ref.loading,
+    root = _ref.root,
     size = _ref.size,
+    noMask = _ref.noMask,
     width = _ref.width,
     height = _ref.height,
     minHeight = _ref.minHeight,
@@ -75,13 +77,15 @@ var Modal = function Modal(_ref) {
     }, 50);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+    root: root,
     children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
       lockScroll: true,
       style: {
         zIndex: "var(--z-overlay-mask)",
+        position: "absolute",
         overflow: "hidden"
       },
-      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16",
+      className: classNames("grid place-items-center p-16", !noMask && "bg-tint-100/20 backdrop-blur-sm"),
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -72,7 +72,7 @@ var Tooltip = function Tooltip(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
   var hover = react$1.useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: {
       open: 1000
     },
@@ -120,8 +120,8 @@ var Tooltip = function Tooltip(_ref) {
           backgroundColor: color ? getColor.getColor(color) : undefined
         }, floatingStyles)
       }, getFloatingProps()), {}, {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("font-medium flex-1 break-all", !textColor && "contrast", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
+        children: [/*#__PURE__*/react.isValidElement(content) && content, utilities.isString(content) && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: classNames("font-medium flex-1 break-all whitespace-pre-wrap mixed-lang", !textColor && "contrast"),
           style: {
             color: textColor ? undefined : color ? getColor.getColor(color) : "var(--bg-color-muted)"
           },

package/dist/esm/components/button/ConfirmButton.js

@@ -125,7 +125,9 @@ var ConfirmButton = function ConfirmButton(_ref) {
           "data-color": color,
           className: classNames("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base"),
           ref: refs.setFloating,
-          style: floatingStyles
+          style: _objectSpread({
+            zIndex: "var(--z-popover)"
+          }, floatingStyles)
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxs("div", {
             className: "font-medium ",

package/dist/esm/core/page/Page.js

@@ -1,38 +1,21 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { Loading } from '../../components/animations/Animations.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
+var _excluded = ["ref", "children", "paper", "title", "titleClassName", "icon", "rtlFlip", "iconBg", "iconColor", "loading", "data-testid", "data-test-value"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
 var Page = function Page(_ref) {
-  var children = _ref.children,
+  var ref = _ref.ref,
+    children = _ref.children,
     paper = _ref.paper,
     title = _ref.title,
     titleClassName = _ref.titleClassName,
@@ -42,12 +25,15 @@ var Page = function Page(_ref) {
     iconColor = _ref.iconColor,
     loading = _ref.loading,
     testId = _ref["data-testid"],
-    testValue = _ref["data-test-value"];
-  return /*#__PURE__*/jsxs("div", {
+    testValue = _ref["data-test-value"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-testid": testId,
     "data-test-value": testValue,
     "data-loading": loading,
-    className: classNames("fabric-page", "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    ref: ref
+  }, rest), {}, {
     children: [title && /*#__PURE__*/jsxs("div", {
       "data-ref": "pageTitle",
       className: classNames("fabric-pageTitle", "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center", titleClassName),
@@ -59,7 +45,7 @@ var Page = function Page(_ref) {
         color: iconColor
       }), title]
     }), loading && /*#__PURE__*/jsx(Loading, {}), children]
-  });
+  }));
 };
 
 export { Page };

package/dist/esm/overlays/modal/Modal.js

@@ -13,7 +13,7 @@ import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
+var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "noMask", "width", "height", "minHeight", "minWidth"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Modal = function Modal(_ref) {
@@ -29,7 +29,9 @@ var Modal = function Modal(_ref) {
     onBeforeClose = _ref.onBeforeClose,
     children = _ref.children,
     loading = _ref.loading,
+    root = _ref.root,
     size = _ref.size,
+    noMask = _ref.noMask,
     width = _ref.width,
     height = _ref.height,
     minHeight = _ref.minHeight,
@@ -75,13 +77,15 @@ var Modal = function Modal(_ref) {
     }, 50);
   }, []);
   return /*#__PURE__*/jsx(FloatingPortal, {
+    root: root,
     children: /*#__PURE__*/jsx(FloatingOverlay, {
       lockScroll: true,
       style: {
         zIndex: "var(--z-overlay-mask)",
+        position: "absolute",
         overflow: "hidden"
       },
-      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16",
+      className: classNames("grid place-items-center p-16", !noMask && "bg-tint-100/20 backdrop-blur-sm"),
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({

package/dist/esm/overlays/tooltip/Tooltip.js

@@ -72,7 +72,7 @@ var Tooltip = function Tooltip(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
   var hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: {
       open: 1000
     },
@@ -120,8 +120,8 @@ var Tooltip = function Tooltip(_ref) {
           backgroundColor: color ? getColor(color) : undefined
         }, floatingStyles)
       }, getFloatingProps()), {}, {
-        children: [/*#__PURE__*/jsx("span", {
-          className: classNames("font-medium flex-1 break-all", !textColor && "contrast", isString(content) && "whitespace-pre-wrap mixed-lang"),
+        children: [/*#__PURE__*/isValidElement(content) && content, isString(content) && /*#__PURE__*/jsx("span", {
+          className: classNames("font-medium flex-1 break-all whitespace-pre-wrap mixed-lang", !textColor && "contrast"),
           style: {
             color: textColor ? undefined : color ? getColor(color) : "var(--bg-color-muted)"
           },

package/dist/types/core/page/Page.d.ts

@@ -1,5 +1,5 @@
-import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
-export interface PageProps extends IconProps, ChildrenProp, TestProps {
+import { type ChildrenProp, type IconProps, type RefProp, type TestProps } from "../../types";
+export interface PageProps extends IconProps, ChildrenProp, TestProps, RefProp<HTMLDivElement> {
     /**
      * page title
      */
@@ -20,4 +20,4 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps {
 /**
  * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
-export declare const Page: ({ children, paper, title, titleClassName, icon, rtlFlip, iconBg, iconColor, loading, "data-testid": testId, "data-test-value": testValue, }: PageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Page: ({ ref, children, paper, title, titleClassName, icon, rtlFlip, iconBg, iconColor, loading, "data-testid": testId, "data-test-value": testValue, ...rest }: PageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/modal/Modal.d.ts

@@ -42,6 +42,14 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      * minimum width
      */
     minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
+    /**
+     * hide mask background
+     */
+    noMask?: boolean;
     /**
      * close handler
      */
@@ -51,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, size, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, noMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.41",
+  "version": "1.0.0-beta.43",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.41",
+    "@react-fabric/utilities": "^1.0.0-beta.43",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "bc737416d3c6a217a6b8c47291c3975a22722d80"
+  "gitHead": "92cd2fc5c71e3f0e00a9cff83ff924c51d7adb57"
 }

package/src/components/button/ConfirmButton.tsx

@@ -187,7 +187,10 @@ export const ConfirmButton = <Tag extends React.ElementType = "button">({
                 "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base",
               )}
               ref={refs.setFloating}
-              style={floatingStyles}
+              style={{
+                zIndex: "var(--z-popover)",
+                ...floatingStyles,
+              }}
               {...getFloatingProps()}
             >
               <div className="font-medium ">

package/src/core/page/Page.tsx

@@ -24,9 +24,18 @@
 import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
-import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
+import {
+  type ChildrenProp,
+  type IconProps,
+  type RefProp,
+  type TestProps,
+} from "../../types";
 
-export interface PageProps extends IconProps, ChildrenProp, TestProps {
+export interface PageProps
+  extends IconProps,
+    ChildrenProp,
+    TestProps,
+    RefProp<HTMLDivElement> {
   /**
    * page title
    */
@@ -49,6 +58,7 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps {
  * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
 export const Page = ({
+  ref,
   children,
   paper,
   title,
@@ -60,6 +70,7 @@ export const Page = ({
   loading,
   "data-testid": testId,
   "data-test-value": testValue,
+  ...rest
 }: PageProps) => {
   return (
     <div
@@ -67,10 +78,12 @@ export const Page = ({
       data-test-value={testValue}
       data-loading={loading}
       className={classNames(
-        "fabric-page",
+        "fabric-page relative",
         "overflow-hidden grid area-content",
         paper && "shadow-paper m-[6px] rounded-capped",
       )}
+      ref={ref}
+      {...rest}
     >
       {title && (
         <div

package/src/overlays/modal/Modal.tsx

@@ -98,6 +98,14 @@ export interface ModalProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
+  /**
+   * hide mask background
+   */
+  noMask?: boolean;
   /**
    * close handler
    */
@@ -121,7 +129,9 @@ export const Modal = ({
   onBeforeClose,
   children,
   loading,
+  root,
   size,
+  noMask,
   width,
   height,
   minHeight,
@@ -173,11 +183,18 @@ export const Modal = ({
   }, []);
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       <FloatingOverlay
         lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)", overflow: "hidden" }}
-        className="bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16"
+        style={{
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden",
+        }}
+        className={classNames(
+          "grid place-items-center p-16",
+          !noMask && "bg-tint-100/20 backdrop-blur-sm",
+        )}
       >
         <FloatingFocusManager context={context}>
           <dialog

package/src/overlays/tooltip/Tooltip.tsx

@@ -126,7 +126,7 @@ export const Tooltip = ({
   });
 
   const hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: { open: 1000 },
     handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
   });
@@ -186,22 +186,24 @@ export const Tooltip = ({
             }}
             {...getFloatingProps()}
           >
-            <span
-              className={classNames(
-                "font-medium flex-1 break-all",
-                !textColor && "contrast",
-                isString(content) && "whitespace-pre-wrap mixed-lang",
-              )}
-              style={{
-                color: textColor
-                  ? undefined
-                  : color
-                    ? getColor(color)
-                    : "var(--bg-color-muted)",
-              }}
-            >
-              {content}
-            </span>
+            {isValidElement(content) && content}
+            {isString(content) && (
+              <span
+                className={classNames(
+                  "font-medium flex-1 break-all whitespace-pre-wrap mixed-lang",
+                  !textColor && "contrast",
+                )}
+                style={{
+                  color: textColor
+                    ? undefined
+                    : color
+                      ? getColor(color)
+                      : "var(--bg-color-muted)",
+                }}
+              >
+                {content}
+              </span>
+            )}
             {copyEl}
             <FloatingArrow
               ref={arrowRef}