@lobehub/ui 3.0.0 → 3.1.0

package/es/Accordion/AccordionItem.js

@@ -6,22 +6,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { LazyMotion, m } from 'motion/react';
 import { memo, useCallback, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Block from "../Block";
 import Text from "../Text";
+import { LazyMotion, m } from "../motion";
 import ArrowIcon from "./ArrowIcon";
 import { useAccordionContext } from "./context";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var loadFeatures = function loadFeatures() {
-  return import('motion/react').then(function (res) {
-    return res.domAnimation;
-  });
-};
 var AccordionItem = /*#__PURE__*/memo(function (_ref) {
   var _ref2, _ref3;
   var itemKey = _ref.itemKey,
@@ -163,7 +158,6 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
       });
     }
     return /*#__PURE__*/_jsx(LazyMotion, {
-      features: loadFeatures,
       children: /*#__PURE__*/_jsx(m.div, _objectSpread(_objectSpread({}, motionProps), {}, {
         style: {
           overflow: 'hidden'

package/es/ActionIcon/type.d.ts

@@ -19,7 +19,7 @@ export interface ActionIconProps extends Partial<LucideIconProps>, Omit<CenterPr
     size?: ActionIconSize;
     spin?: boolean;
     title?: TooltipProps['title'];
-    tooltipProps?: Omit<TooltipProps, 'title'>;
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
     variant?: 'borderless' | 'filled' | 'outlined';
 }
 export {};

package/es/Avatar/type.d.ts

@@ -16,7 +16,7 @@ export interface AvatarProps extends AntAvatarProps {
     size?: number;
     sliceText?: boolean;
     title?: string;
-    tooltipProps?: Omit<TooltipProps, 'title'>;
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
     unoptimized?: boolean;
     variant?: 'borderless' | 'filled' | 'outlined';
 }

package/es/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { TooltipProps } from './type';
-declare const Tooltip: import("react").NamedExoticComponent<TooltipProps>;
+export declare const Tooltip: FC<TooltipProps>;
 export default Tooltip;

package/es/Tooltip/Tooltip.js

@@ -1,22 +1,29 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["ref", "hotkey", "className", "arrow", "title", "hotkeyProps"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Tooltip as AntdTooltip } from 'antd';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import Hotkey from "../Hotkey";
-import { useStyles } from "./style";
+import { arrow as arrowMiddleware, autoUpdate, flip, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from '@floating-ui/react';
+import { cloneElement, isValidElement, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import { antdPlacementToFloating } from "./antdPlacementToFloating";
+import { composeEventHandlers } from "../utils/composeEventHandlers";
+import TooltipFloating from "./TooltipFloating";
+import TooltipPortal from "./TooltipPortal";
+import { TooltipGroupContext } from "./groupContext";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Tooltip = /*#__PURE__*/memo(function (_ref) {
+var TooltipInGroup = function TooltipInGroup(_ref) {
   var ref = _ref.ref,
     hotkey = _ref.hotkey,
     className = _ref.className,
@@ -24,29 +31,229 @@ var Tooltip = /*#__PURE__*/memo(function (_ref) {
     arrow = _ref$arrow === void 0 ? false : _ref$arrow,
     title = _ref.title,
     hotkeyProps = _ref.hotkeyProps,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx(AntdTooltip, _objectSpread({
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    openDelay = _ref.openDelay,
+    closeDelay = _ref.closeDelay,
+    _ref$mouseEnterDelay = _ref.mouseEnterDelay,
+    mouseEnterDelay = _ref$mouseEnterDelay === void 0 ? 0 : _ref$mouseEnterDelay,
+    _ref$mouseLeaveDelay = _ref.mouseLeaveDelay,
+    mouseLeaveDelay = _ref$mouseLeaveDelay === void 0 ? 0 : _ref$mouseLeaveDelay,
+    onOpenChange = _ref.onOpenChange,
+    disabled = _ref.disabled,
+    classNames = _ref.classNames,
+    styleProps = _ref.styles,
+    zIndex = _ref.zIndex,
+    _ref$portalled = _ref.portalled,
+    portalled = _ref$portalled === void 0 ? true : _ref$portalled,
+    getPopupContainer = _ref.getPopupContainer;
+  var group = useContext(TooltipGroupContext);
+  var triggerElRef = useRef(null);
+  var item = useMemo(function () {
+    return {
+      arrow: arrow,
+      className: className,
+      classNames: classNames,
+      closeDelay: closeDelay,
+      disabled: disabled,
+      getPopupContainer: getPopupContainer,
+      hotkey: hotkey,
+      hotkeyProps: hotkeyProps,
+      mouseEnterDelay: mouseEnterDelay,
+      mouseLeaveDelay: mouseLeaveDelay,
+      onOpenChange: onOpenChange,
+      openDelay: openDelay,
+      placement: placement,
+      portalled: portalled,
+      styles: styleProps,
+      title: title,
+      zIndex: zIndex
+    };
+  }, [arrow, className, classNames, closeDelay, disabled, getPopupContainer, hotkey, hotkeyProps, mouseEnterDelay, mouseLeaveDelay, onOpenChange, openDelay, placement, portalled, styleProps, title, zIndex]);
+  var trigger = useMemo(function () {
+    var _children$props;
+    if (! /*#__PURE__*/isValidElement(children)) return /*#__PURE__*/_jsx("span", {
+      children: children
+    });
+    var needsWrapper = typeof children.type === 'string' && Boolean((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.disabled);
+    if (needsWrapper) return /*#__PURE__*/_jsx("span", {
+      style: {
+        display: 'inline-flex'
+      },
+      children: children
+    });
+    return children;
+  }, [children]);
+  var referenceNode = useMemo(function () {
+    if (! /*#__PURE__*/isValidElement(trigger)) return trigger;
+    var originalRef = trigger.ref;
+    var triggerProps = trigger.props || {};
+    var setTriggerEl = function setTriggerEl(node) {
+      triggerElRef.current = node instanceof HTMLElement ? node : null;
+    };
+    return /*#__PURE__*/cloneElement(trigger, _objectSpread(_objectSpread({}, triggerProps), {}, {
+      onBlur: composeEventHandlers(triggerProps.onBlur, function (e) {
+        group === null || group === void 0 || group.closeFromTrigger(e.currentTarget, item);
+      }),
+      onFocus: composeEventHandlers(triggerProps.onFocus, function (e) {
+        group === null || group === void 0 || group.openFromTrigger(e.currentTarget, item);
+      }),
+      onKeyDown: composeEventHandlers(triggerProps.onKeyDown, function (e) {
+        if ((e === null || e === void 0 ? void 0 : e.key) === 'Escape') group === null || group === void 0 || group.closeImmediately();
+      }),
+      onPointerEnter: composeEventHandlers(triggerProps.onPointerEnter, function (e) {
+        group === null || group === void 0 || group.openFromTrigger(e.currentTarget, item);
+      }),
+      onPointerLeave: composeEventHandlers(triggerProps.onPointerLeave, function (e) {
+        group === null || group === void 0 || group.closeFromTrigger(e.currentTarget, item);
+      }),
+      ref: mergeRefs([originalRef, setTriggerEl, ref])
+    }));
+  }, [group, item, ref, trigger]);
+  useEffect(function () {
+    return function () {
+      if (!group) return;
+      var el = triggerElRef.current;
+      if (el && group.isActiveTrigger(el)) group.closeImmediately();
+    };
+  }, [group]);
+  return referenceNode;
+};
+TooltipInGroup.displayName = 'TooltipInGroup';
+var TooltipStandalone = function TooltipStandalone(_ref2) {
+  var ref = _ref2.ref,
+    hotkey = _ref2.hotkey,
+    className = _ref2.className,
+    _ref2$arrow = _ref2.arrow,
+    arrow = _ref2$arrow === void 0 ? false : _ref2$arrow,
+    title = _ref2.title,
+    hotkeyProps = _ref2.hotkeyProps,
+    children = _ref2.children,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
+    openDelay = _ref2.openDelay,
+    closeDelay = _ref2.closeDelay,
+    _ref2$mouseEnterDelay = _ref2.mouseEnterDelay,
+    mouseEnterDelay = _ref2$mouseEnterDelay === void 0 ? 0 : _ref2$mouseEnterDelay,
+    _ref2$mouseLeaveDelay = _ref2.mouseLeaveDelay,
+    mouseLeaveDelay = _ref2$mouseLeaveDelay === void 0 ? 0 : _ref2$mouseLeaveDelay,
+    open = _ref2.open,
+    defaultOpen = _ref2.defaultOpen,
+    onOpenChange = _ref2.onOpenChange,
+    disabled = _ref2.disabled,
+    classNames = _ref2.classNames,
+    styleProps = _ref2.styles,
+    zIndex = _ref2.zIndex,
+    _ref2$portalled = _ref2.portalled,
+    portalled = _ref2$portalled === void 0 ? true : _ref2$portalled,
+    getPopupContainer = _ref2.getPopupContainer;
+  var arrowRef = useRef(null);
+  var _useState = useState(Boolean(defaultOpen)),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledOpen = _useState2[0],
+    setUncontrolledOpen = _useState2[1];
+  var mergedOpen = open !== null && open !== void 0 ? open : uncontrolledOpen;
+  var setOpen = function setOpen(next) {
+    if (open === undefined) setUncontrolledOpen(next);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(next);
+  };
+  var floatingPlacement = useMemo(function () {
+    return antdPlacementToFloating(placement);
+  }, [placement]);
+  var middleware = useMemo(function () {
+    var base = [offset(8), flip(), shift({
+      padding: 8
+    })];
+    if (arrow) base.push(arrowMiddleware({
+      element: arrowRef
+    }));
+    return base;
+  }, [arrow]);
+  var _useFloating = useFloating({
+      middleware: middleware,
+      onOpenChange: setOpen,
+      open: disabled ? false : mergedOpen,
+      placement: floatingPlacement,
+      whileElementsMounted: autoUpdate
+    }),
+    context = _useFloating.context,
+    floatingStyles = _useFloating.floatingStyles,
+    refs = _useFloating.refs;
+  var resolvedDelay = useMemo(function () {
+    return {
+      close: closeDelay !== null && closeDelay !== void 0 ? closeDelay : mouseLeaveDelay * 1000,
+      open: openDelay !== null && openDelay !== void 0 ? openDelay : mouseEnterDelay * 1000
+    };
+  }, [closeDelay, mouseEnterDelay, mouseLeaveDelay, openDelay]);
+  var hover = useHover(context, {
+    delay: resolvedDelay,
+    enabled: !disabled,
+    move: false
+  });
+  var focus = useFocus(context, {
+    enabled: !disabled
+  });
+  var dismiss = useDismiss(context, {
+    enabled: !disabled
+  });
+  var role = useRole(context, {
+    role: 'tooltip'
+  });
+  var _useInteractions = useInteractions([hover, focus, dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getReferenceProps = _useInteractions.getReferenceProps;
+  var trigger = useMemo(function () {
+    var _children$props2;
+    if (! /*#__PURE__*/isValidElement(children)) return /*#__PURE__*/_jsx("span", {
+      children: children
+    });
+    var needsWrapper = typeof children.type === 'string' && Boolean((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.disabled);
+    if (needsWrapper) return /*#__PURE__*/_jsx("span", {
+      style: {
+        display: 'inline-flex'
+      },
+      children: children
+    });
+    return children;
+  }, [children]);
+  var referenceNode = useMemo(function () {
+    if (! /*#__PURE__*/isValidElement(trigger)) return trigger;
+    var originalRef = trigger.ref;
+    return /*#__PURE__*/cloneElement(trigger, getReferenceProps(_objectSpread(_objectSpread({}, trigger.props), {}, {
+      ref: mergeRefs([originalRef, refs.setReference, ref])
+    })));
+  }, [getReferenceProps, ref, refs.setReference, trigger]);
+  var portalRoot = getPopupContainer && refs.reference.current ? getPopupContainer(refs.reference.current) : undefined;
+  var floatingNode = /*#__PURE__*/_jsx(TooltipFloating, {
     arrow: arrow,
-    classNames: {
-      root: cx(styles.tooltip, className)
-    },
-    ref: ref,
-    title: hotkey ? /*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      gap: 8,
-      horizontal: true,
-      justify: 'space-between',
-      children: [/*#__PURE__*/_jsx("span", {
-        children: title
-      }), /*#__PURE__*/_jsx(Hotkey, _objectSpread({
-        inverseTheme: true,
-        keys: hotkey
-      }, hotkeyProps))]
-    }) : title
-  }, rest));
-});
-Tooltip.displayName = 'Tooltip';
+    arrowRef: arrowRef,
+    className: className,
+    classNames: classNames,
+    context: context,
+    floatingProps: getFloatingProps(),
+    floatingStyles: floatingStyles,
+    hotkey: hotkey,
+    hotkeyProps: hotkeyProps,
+    open: mergedOpen,
+    placement: floatingPlacement,
+    setFloating: refs.setFloating,
+    styles: styleProps,
+    title: title,
+    zIndex: zIndex
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [referenceNode, !disabled && title && (portalled ? /*#__PURE__*/_jsx(TooltipPortal, {
+      root: portalRoot,
+      children: floatingNode
+    }) : floatingNode)]
+  });
+};
+export var Tooltip = function Tooltip(props) {
+  var group = useContext(TooltipGroupContext);
+
+  // Group mode is intentionally hover/focus driven; keep standalone behavior for controlled cases.
+  var canUseGroup = Boolean(group) && props.open === undefined && props.defaultOpen === undefined;
+  return canUseGroup ? /*#__PURE__*/_jsx(TooltipInGroup, _objectSpread({}, props)) : /*#__PURE__*/_jsx(TooltipStandalone, _objectSpread({}, props));
+};
 export default Tooltip;

package/es/Tooltip/TooltipFloating.d.ts

@@ -0,0 +1,30 @@
+import type { FloatingContext, Placement } from '@floating-ui/react';
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type { TooltipProps } from './type';
+type TooltipFloatingProps = {
+    arrow?: boolean;
+    arrowRef?: RefObject<SVGSVGElement | null>;
+    className?: TooltipProps['className'];
+    classNames?: TooltipProps['classNames'];
+    context?: FloatingContext;
+    floatingProps?: Record<string, any>;
+    floatingStyles: CSSProperties;
+    hotkey?: TooltipProps['hotkey'];
+    hotkeyProps?: TooltipProps['hotkeyProps'];
+    /**
+     * Enable Framer Motion layout/position tweening when provided.
+     * Useful for TooltipGroup where the floating position changes frequently.
+     */
+    layoutId?: string;
+    open: boolean;
+    placement?: Placement;
+    setFloating: (node: HTMLElement | null) => void;
+    styles?: TooltipProps['styles'];
+    title?: ReactNode;
+    zIndex?: TooltipProps['zIndex'];
+};
+declare const TooltipFloating: {
+    ({ open, title, placement, floatingStyles, setFloating, floatingProps, arrow, arrowRef, context, hotkey, hotkeyProps, layoutId, className, classNames, styles: styleProps, zIndex, }: TooltipFloatingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TooltipFloating;

package/es/Tooltip/TooltipFloating.js

@@ -0,0 +1,135 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { FloatingArrow } from '@floating-ui/react';
+import { useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Hotkey from "../Hotkey";
+import { AnimatePresence, LazyMotion, m } from "../motion";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TooltipFloating = function TooltipFloating(_ref) {
+  var open = _ref.open,
+    title = _ref.title,
+    placement = _ref.placement,
+    floatingStyles = _ref.floatingStyles,
+    setFloating = _ref.setFloating,
+    floatingProps = _ref.floatingProps,
+    arrow = _ref.arrow,
+    arrowRef = _ref.arrowRef,
+    context = _ref.context,
+    hotkey = _ref.hotkey,
+    hotkeyProps = _ref.hotkeyProps,
+    layoutId = _ref.layoutId,
+    className = _ref.className,
+    classNames = _ref.classNames,
+    styleProps = _ref.styles,
+    zIndex = _ref.zIndex;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var transformOrigin = useMemo(function () {
+    var basePlacement = String(placement || 'top').split('-')[0];
+    switch (basePlacement) {
+      case 'top':
+        {
+          return 'bottom center';
+        }
+      case 'bottom':
+        {
+          return 'top center';
+        }
+      case 'left':
+        {
+          return 'center right';
+        }
+      case 'right':
+        {
+          return 'center left';
+        }
+      default:
+        {
+          return 'center';
+        }
+    }
+  }, [placement]);
+  return /*#__PURE__*/_jsx(LazyMotion, {
+    children: /*#__PURE__*/_jsx(AnimatePresence, {
+      children: open && title && /*#__PURE__*/_jsx(m.div, _objectSpread(_objectSpread({
+        animate: {
+          opacity: 1
+        },
+        className: cx(styles.tooltip, classNames === null || classNames === void 0 ? void 0 : classNames.container, classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
+        exit: {
+          opacity: 0
+        },
+        initial: {
+          opacity: 0
+        },
+        ref: setFloating,
+        role: "tooltip",
+        style: styleProps !== null && styleProps !== void 0 && styleProps.root ? _objectSpread(_objectSpread(_objectSpread({}, floatingStyles), {}, {
+          zIndex: zIndex
+        }, styleProps.container), styleProps.root) : _objectSpread(_objectSpread({}, floatingStyles), {}, {
+          zIndex: zIndex
+        }, styleProps === null || styleProps === void 0 ? void 0 : styleProps.container),
+        transition: {
+          duration: 0.12,
+          ease: [0.4, 0, 0.2, 1]
+        }
+      }, floatingProps), {}, {
+        children: /*#__PURE__*/_jsxs(m.div, {
+          animate: {
+            scale: 1
+          },
+          exit: {
+            scale: 0.98
+          },
+          initial: {
+            scale: 0.96
+          },
+          layout: layoutId ? 'position' : undefined,
+          layoutId: layoutId,
+          style: {
+            transformOrigin: transformOrigin
+          },
+          transition: {
+            duration: 0.12,
+            ease: [0.4, 0, 0.2, 1]
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            className: cx(styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+            style: styleProps === null || styleProps === void 0 ? void 0 : styleProps.content,
+            children: hotkey ? /*#__PURE__*/_jsxs(Flexbox, {
+              align: 'center',
+              gap: 8,
+              horizontal: true,
+              justify: 'space-between',
+              children: [/*#__PURE__*/_jsx("span", {
+                children: title
+              }), /*#__PURE__*/_jsx(Hotkey, _objectSpread({
+                inverseTheme: true,
+                keys: hotkey
+              }, hotkeyProps))]
+            }) : title
+          }), arrow && context && /*#__PURE__*/_jsx(FloatingArrow, {
+            className: cx(styles.arrow, classNames === null || classNames === void 0 ? void 0 : classNames.arrow),
+            context: context,
+            height: 6,
+            ref: arrowRef,
+            style: styleProps === null || styleProps === void 0 ? void 0 : styleProps.arrow,
+            width: 12
+          })]
+        })
+      }), "tooltip")
+    })
+  });
+};
+TooltipFloating.displayName = 'TooltipFloating';
+export default TooltipFloating;

package/es/Tooltip/TooltipGroup.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type TooltipGroupProps = {
+    children: ReactNode;
+};
+declare const TooltipGroup: import("react").NamedExoticComponent<TooltipGroupProps>;
+export default TooltipGroup;

package/es/Tooltip/TooltipGroup.js

@@ -0,0 +1,159 @@
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { arrow as arrowMiddleware, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react';
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { antdPlacementToFloating } from "./antdPlacementToFloating";
+import TooltipFloating from "./TooltipFloating";
+import TooltipPortal from "./TooltipPortal";
+import { TooltipGroupContext } from "./groupContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TooltipGroup = /*#__PURE__*/memo(function (_ref) {
+  var _active$item$portalle;
+  var children = _ref.children;
+  var arrowRef = useRef(null);
+  var openTimerRef = useRef(null);
+  var closeTimerRef = useRef(null);
+  var internalGroupId = useId();
+  var motionLayoutId = useMemo(function () {
+    return "lobe-ui-tooltip-group:".concat(internalGroupId);
+  }, [internalGroupId]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var activeRef = useRef(null);
+  useEffect(function () {
+    activeRef.current = active;
+  }, [active]);
+  var floatingPlacement = useMemo(function () {
+    return antdPlacementToFloating(active === null || active === void 0 ? void 0 : active.item.placement);
+  }, [active === null || active === void 0 ? void 0 : active.item.placement]);
+  var middleware = useMemo(function () {
+    var base = [offset(8), flip(), shift({
+      padding: 8
+    })];
+    if (active !== null && active !== void 0 && active.item.arrow) base.push(arrowMiddleware({
+      element: arrowRef
+    }));
+    return base;
+  }, [active === null || active === void 0 ? void 0 : active.item.arrow]);
+  var _useFloating = useFloating({
+      middleware: middleware,
+      open: open,
+      placement: floatingPlacement,
+      whileElementsMounted: autoUpdate
+    }),
+    context = _useFloating.context,
+    floatingStyles = _useFloating.floatingStyles,
+    refs = _useFloating.refs;
+  useEffect(function () {
+    if (!(active !== null && active !== void 0 && active.triggerEl)) return;
+    refs.setReference(active.triggerEl);
+  }, [active === null || active === void 0 ? void 0 : active.triggerEl, refs]);
+  var clearTimers = useCallback(function () {
+    if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+    if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+    openTimerRef.current = null;
+    closeTimerRef.current = null;
+  }, []);
+  var closeImmediately = useCallback(function () {
+    var _activeRef$current, _activeRef$current$it, _activeRef$current$it2;
+    clearTimers();
+    setOpen(false);
+    (_activeRef$current = activeRef.current) === null || _activeRef$current === void 0 || (_activeRef$current$it = (_activeRef$current$it2 = _activeRef$current.item).onOpenChange) === null || _activeRef$current$it === void 0 || _activeRef$current$it.call(_activeRef$current$it2, false);
+  }, [clearTimers]);
+  var isActiveTrigger = useCallback(function (triggerEl) {
+    return Boolean(activeRef.current && activeRef.current.triggerEl === triggerEl);
+  }, []);
+  var closeFromTrigger = useCallback(function (triggerEl, item) {
+    var _item$closeDelay, _item$mouseLeaveDelay;
+    if (!activeRef.current || activeRef.current.triggerEl !== triggerEl) return;
+    clearTimers();
+    var delayMs = (_item$closeDelay = item.closeDelay) !== null && _item$closeDelay !== void 0 ? _item$closeDelay : ((_item$mouseLeaveDelay = item.mouseLeaveDelay) !== null && _item$mouseLeaveDelay !== void 0 ? _item$mouseLeaveDelay : 0) * 1000;
+    if (delayMs <= 0) {
+      var _item$onOpenChange;
+      setOpen(false);
+      (_item$onOpenChange = item.onOpenChange) === null || _item$onOpenChange === void 0 || _item$onOpenChange.call(item, false);
+      return;
+    }
+    closeTimerRef.current = window.setTimeout(function () {
+      var _item$onOpenChange2;
+      setOpen(false);
+      (_item$onOpenChange2 = item.onOpenChange) === null || _item$onOpenChange2 === void 0 || _item$onOpenChange2.call(item, false);
+    }, delayMs);
+  }, [clearTimers]);
+  var openFromTrigger = useCallback(function (triggerEl, item) {
+    var _item$openDelay, _item$mouseEnterDelay;
+    if (!triggerEl) return;
+    if (!item.title) return;
+    if (item.disabled) return;
+    clearTimers();
+    setActive({
+      item: item,
+      triggerEl: triggerEl
+    });
+    var delayMs = (_item$openDelay = item.openDelay) !== null && _item$openDelay !== void 0 ? _item$openDelay : ((_item$mouseEnterDelay = item.mouseEnterDelay) !== null && _item$mouseEnterDelay !== void 0 ? _item$mouseEnterDelay : 0) * 1000;
+    if (delayMs <= 0) {
+      var _item$onOpenChange3;
+      setOpen(true);
+      (_item$onOpenChange3 = item.onOpenChange) === null || _item$onOpenChange3 === void 0 || _item$onOpenChange3.call(item, true);
+      return;
+    }
+    openTimerRef.current = window.setTimeout(function () {
+      var _item$onOpenChange4;
+      setOpen(true);
+      (_item$onOpenChange4 = item.onOpenChange) === null || _item$onOpenChange4 === void 0 || _item$onOpenChange4.call(item, true);
+    }, delayMs);
+  }, [clearTimers]);
+  var api = useMemo(function () {
+    return {
+      closeFromTrigger: closeFromTrigger,
+      closeImmediately: closeImmediately,
+      isActiveTrigger: isActiveTrigger,
+      openFromTrigger: openFromTrigger
+    };
+  }, [closeFromTrigger, closeImmediately, isActiveTrigger, openFromTrigger]);
+  useEffect(function () {
+    return function () {
+      clearTimers();
+    };
+  }, [clearTimers]);
+  var portalRoot = active !== null && active !== void 0 && active.item.getPopupContainer && active !== null && active !== void 0 && active.triggerEl ? active.item.getPopupContainer(active.triggerEl) : undefined;
+  var floatingNode = /*#__PURE__*/_jsx(TooltipFloating, {
+    arrow: active === null || active === void 0 ? void 0 : active.item.arrow,
+    arrowRef: arrowRef,
+    className: active === null || active === void 0 ? void 0 : active.item.className,
+    classNames: active === null || active === void 0 ? void 0 : active.item.classNames,
+    context: context,
+    floatingStyles: floatingStyles,
+    hotkey: active === null || active === void 0 ? void 0 : active.item.hotkey,
+    hotkeyProps: active === null || active === void 0 ? void 0 : active.item.hotkeyProps,
+    layoutId: motionLayoutId,
+    open: open,
+    placement: floatingPlacement,
+    setFloating: refs.setFloating,
+    styles: active === null || active === void 0 ? void 0 : active.item.styles,
+    title: active === null || active === void 0 ? void 0 : active.item.title,
+    zIndex: active === null || active === void 0 ? void 0 : active.item.zIndex
+  });
+  return /*#__PURE__*/_jsxs(TooltipGroupContext.Provider, {
+    value: api,
+    children: [children, (active === null || active === void 0 ? void 0 : active.item.title) && !active.item.disabled && (((_active$item$portalle = active.item.portalled) !== null && _active$item$portalle !== void 0 ? _active$item$portalle : true) ? /*#__PURE__*/_jsx(TooltipPortal, {
+      root: portalRoot,
+      children: floatingNode
+    }) : floatingNode)]
+  });
+});
+TooltipGroup.displayName = 'TooltipGroup';
+export default TooltipGroup;

package/es/Tooltip/TooltipPortal.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type TooltipPortalProps = {
+    children: ReactNode;
+    root?: HTMLElement | ShadowRoot | null;
+};
+declare const TooltipPortal: ({ children, root }: TooltipPortalProps) => import("react").ReactPortal | null;
+export default TooltipPortal;

package/es/Tooltip/TooltipPortal.js

@@ -0,0 +1,46 @@
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+var PORTAL_ATTR = 'data-lobe-ui-tooltip-portal';
+
+// Reuse one portal container per root (document.body by default).
+var containerMap = new WeakMap();
+var getOrCreateContainer = function getOrCreateContainer(root) {
+  var cached = containerMap.get(root);
+  if (cached && cached.isConnected) return cached;
+  var el = document.createElement('div');
+  el.setAttribute(PORTAL_ATTR, 'true');
+  root.append(el);
+  containerMap.set(root, el);
+  return el;
+};
+var resolveRoot = function resolveRoot(root) {
+  if (root) return root;
+  if (typeof document === 'undefined') return null;
+  return document.body;
+};
+var TooltipPortal = function TooltipPortal(_ref) {
+  var children = _ref.children,
+    root = _ref.root;
+  var _useState = useState(function () {
+      var resolved = resolveRoot(root);
+      if (!resolved) return null;
+      return getOrCreateContainer(resolved);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
+  if (!container && typeof document !== 'undefined') {
+    setContainer(getOrCreateContainer(document.body));
+  }
+  if (!container) return null;
+  return /*#__PURE__*/createPortal(children, container);
+};
+export default TooltipPortal;

package/es/Tooltip/antdPlacementToFloating.d.ts

@@ -0,0 +1,9 @@
+import type { Placement } from '@floating-ui/react';
+/**
+ * Convert Ant Design legacy placements to Floating UI placements.
+ *
+ * Notes:
+ * - Floating UI placements like `top-start` are passed through.
+ * - Ant Design legacy placements like `topLeft` are mapped to Floating UI.
+ */
+export declare const antdPlacementToFloating: (placement?: Placement | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'top' | 'bottom' | 'left' | 'right') => Placement;

package/es/Tooltip/antdPlacementToFloating.js

@@ -0,0 +1,51 @@
+/**
+ * Convert Ant Design legacy placements to Floating UI placements.
+ *
+ * Notes:
+ * - Floating UI placements like `top-start` are passed through.
+ * - Ant Design legacy placements like `topLeft` are mapped to Floating UI.
+ */
+export var antdPlacementToFloating = function antdPlacementToFloating(placement) {
+  if (!placement) return 'top';
+
+  // Floating UI placements are already compatible.
+  if (typeof placement === 'string' && placement.includes('-')) return placement;
+  switch (placement) {
+    case 'topLeft':
+      {
+        return 'top-start';
+      }
+    case 'topRight':
+      {
+        return 'top-end';
+      }
+    case 'bottomLeft':
+      {
+        return 'bottom-start';
+      }
+    case 'bottomRight':
+      {
+        return 'bottom-end';
+      }
+    case 'leftTop':
+      {
+        return 'left-start';
+      }
+    case 'leftBottom':
+      {
+        return 'left-end';
+      }
+    case 'rightTop':
+      {
+        return 'right-start';
+      }
+    case 'rightBottom':
+      {
+        return 'right-end';
+      }
+    default:
+      {
+        return placement;
+      }
+  }
+};

package/es/Tooltip/groupContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { TooltipProps } from './type';
+export type TooltipGroupItem = Omit<TooltipProps, 'children' | 'open' | 'defaultOpen'>;
+export type TooltipGroupApi = {
+    closeFromTrigger: (triggerEl: HTMLElement, item: TooltipGroupItem) => void;
+    closeImmediately: () => void;
+    isActiveTrigger: (triggerEl: HTMLElement) => boolean;
+    openFromTrigger: (triggerEl: HTMLElement, item: TooltipGroupItem) => void;
+};
+export declare const TooltipGroupContext: import("react").Context<TooltipGroupApi | null>;

package/es/Tooltip/groupContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var TooltipGroupContext = /*#__PURE__*/createContext(null);

package/es/Tooltip/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Tooltip';
+export { default as TooltipGroup } from './TooltipGroup';
 export type * from './type';

package/es/Tooltip/index.js

@@ -1 +1,2 @@
-export { default } from "./Tooltip";
+export { default } from "./Tooltip";
+export { default as TooltipGroup } from "./TooltipGroup";

package/es/Tooltip/style.d.ts

@@ -1,3 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    arrow: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
     tooltip: import("antd-style").SerializedStyles;
 }>;

package/es/Tooltip/style.js

@@ -1,11 +1,12 @@
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token,
-    prefixCls = _ref.prefixCls;
+    token = _ref.token;
   return {
-    tooltip: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .", "-tooltip-inner {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        min-height: unset;\n        padding-block: 4px;\n        padding-inline: 8px;\n\n        color: ", ";\n        word-break: normal;\n\n        background-color: ", ";\n        border-radius: ", "px;\n      }\n\n      .", "-tooltip-arrow {\n        &::before,\n        &::after {\n          background: ", ";\n        }\n      }\n    "])), prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, prefixCls, token.colorText)
+    arrow: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      fill: ", ";\n    "])), token.colorText),
+    content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding: 8px;\n      border-radius: ", "px;\n\n      color: ", ";\n      word-break: normal;\n\n      background-color: ", ";\n    "])), token.borderRadiusSM, token.colorBgLayout, token.colorText),
+    tooltip: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      /* Keep the class name for backwards compatibility and user overrides */\n      position: relative;\n      z-index: 114514;\n      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));\n    "])))
   };
 });

package/es/Tooltip/type.d.ts

@@ -1,10 +1,98 @@
-import type { TooltipProps as AntdTooltipProps } from 'antd';
-import type { TooltipRef } from 'antd/lib/tooltip';
-import type { ReactNode, Ref } from 'react';
+import type { Placement } from '@floating-ui/react';
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { HotkeyProps } from "../Hotkey";
-export type TooltipProps = Omit<AntdTooltipProps, 'title'> & {
+export type TooltipPlacement = Placement | 'topLeft' | 'top' | 'topRight' | 'leftTop' | 'left' | 'leftBottom' | 'rightTop' | 'right' | 'rightBottom' | 'bottomLeft' | 'bottom' | 'bottomRight';
+export type TooltipProps = {
+    /**
+     * Whether the tooltip has an arrow pointer.
+     */
+    arrow?: boolean;
+    /**
+     * Trigger element. Prefer a single React element.
+     */
+    children: ReactElement | ReactNode;
+    /**
+     * Custom className for the tooltip floating root.
+     */
+    className?: string;
+    /**
+     * Compatible with Ant Design `classNames` shape (subset).
+     */
+    classNames?: {
+        arrow?: string;
+        container?: string;
+        content?: string;
+        root?: string;
+    };
+    /**
+     * Delay (in milliseconds) before closing the tooltip.
+     * Takes precedence over `mouseLeaveDelay`.
+     */
+    closeDelay?: number;
+    /**
+     * Uncontrolled initial open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Disable tooltip behavior.
+     */
+    disabled?: boolean;
+    /**
+     * An Ant Design compatible escape hatch for portal container.
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     hotkey?: string;
     hotkeyProps?: Omit<HotkeyProps, 'keys'>;
-    ref?: Ref<TooltipRef>;
+    /**
+     * Delay (in seconds) before showing the tooltip on hover.
+     * Kept compatible with Ant Design `Tooltip`.
+     */
+    mouseEnterDelay?: number;
+    /**
+     * Delay (in seconds) before hiding the tooltip on hover out.
+     * Kept compatible with Ant Design `Tooltip`.
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * Callback when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controlled open state.
+     */
+    open?: boolean;
+    /**
+     * Delay (in milliseconds) before opening the tooltip.
+     * Takes precedence over `mouseEnterDelay`.
+     */
+    openDelay?: number;
+    /**
+     * Tooltip placement. Supports Floating UI placements and Ant Design legacy placements.
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Render tooltip in a portal attached to body.
+     */
+    portalled?: boolean;
+    ref?: Ref<HTMLElement>;
+    /**
+     * Compatible with Ant Design `styles` shape (subset).
+     */
+    styles?: {
+        arrow?: CSSProperties;
+        /**
+         * Backwards-compatible alias for the floating root style.
+         */
+        container?: CSSProperties;
+        content?: CSSProperties;
+        root?: CSSProperties;
+    };
+    /**
+     * Tooltip content.
+     */
     title: ReactNode;
+    /**
+     * z-index for tooltip floating root.
+     */
+    zIndex?: number;
 };

package/es/index.d.ts

@@ -72,7 +72,7 @@ export { default as Text, type TextProps } from './Text';
 export { Meta, type MetaProps, default as ThemeProvider, type ThemeProviderProps, } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Toc, type TocProps } from './Toc';
-export { default as Tooltip, type TooltipProps } from './Tooltip';
+export { default as Tooltip, TooltipGroup, type TooltipProps } from './Tooltip';
 export type * from './types';
 export { copyToClipboard } from './utils/copyToClipboard';
 export { type CDN, genCdnUrl } from './utils/genCdnUrl';

package/es/index.js

@@ -72,7 +72,7 @@ export { default as Text } from "./Text";
 export { Meta, default as ThemeProvider } from "./ThemeProvider";
 export { default as ThemeSwitch } from "./ThemeSwitch";
 export { default as Toc } from "./Toc";
-export { default as Tooltip } from "./Tooltip";
+export { default as Tooltip, TooltipGroup } from "./Tooltip";
 export { copyToClipboard } from "./utils/copyToClipboard";
 export { genCdnUrl } from "./utils/genCdnUrl";
 export { default as Video } from "./Video";

package/es/motion/LazyMotion.d.ts

@@ -0,0 +1,15 @@
+import { LazyMotion as MotionLazyMotion } from 'motion/react';
+import type { ComponentProps } from 'react';
+type MotionLazyMotionProps = ComponentProps<typeof MotionLazyMotion>;
+export type LobeLazyMotionProps = Omit<MotionLazyMotionProps, 'features'> & {
+    /**
+     * Optional override for Motion features.
+     * Defaults to the shared lazy-loaded `loadFeatures`.
+     */
+    features?: MotionLazyMotionProps['features'];
+};
+/**
+ * A project-wide `LazyMotion` wrapper that provides a shared default `features` loader.
+ */
+export declare const LazyMotion: import("react").NamedExoticComponent<LobeLazyMotionProps>;
+export {};

package/es/motion/LazyMotion.js

@@ -0,0 +1,26 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["features"];
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { LazyMotion as MotionLazyMotion } from 'motion/react';
+import { memo } from 'react';
+import { loadFeatures } from "./loadFeatures";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A project-wide `LazyMotion` wrapper that provides a shared default `features` loader.
+ */
+export var LazyMotion = /*#__PURE__*/memo(function (_ref) {
+  var features = _ref.features,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(MotionLazyMotion, _objectSpread({
+    features: features !== null && features !== void 0 ? features : loadFeatures
+  }, props));
+});
+LazyMotion.displayName = 'LazyMotion';

package/es/motion/index.d.ts

@@ -0,0 +1,3 @@
+export { LazyMotion, type LobeLazyMotionProps } from './LazyMotion';
+export { loadFeatures } from './loadFeatures';
+export { AnimatePresence, m } from 'motion/react';

package/es/motion/index.js

@@ -0,0 +1,3 @@
+export { LazyMotion } from "./LazyMotion";
+export { loadFeatures } from "./loadFeatures";
+export { AnimatePresence, m } from 'motion/react';

package/es/motion/loadFeatures.d.ts

@@ -0,0 +1,9 @@
+import { LazyMotion as MotionLazyMotion } from 'motion/react';
+import type { ComponentProps } from 'react';
+/**
+ * Shared lazy-loaded Motion features bundle.
+ * Using a dynamic import keeps the initial bundle lighter and avoids repeating this logic across components.
+ */
+type MotionLazyMotionProps = ComponentProps<typeof MotionLazyMotion>;
+export declare const loadFeatures: MotionLazyMotionProps['features'];
+export {};

package/es/motion/loadFeatures.js

@@ -0,0 +1,10 @@
+/**
+ * Shared lazy-loaded Motion features bundle.
+ * Using a dynamic import keeps the initial bundle lighter and avoids repeating this logic across components.
+ */
+
+export var loadFeatures = function loadFeatures() {
+  return import('motion/react').then(function (res) {
+    return res.domAnimation;
+  });
+};

package/es/utils/composeEventHandlers.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Composes two event handlers together, calling the external handler first,
+ * then the internal handler if the event hasn't been prevented.
+ *
+ * @template E - The event type
+ * @param theirHandler - The external event handler (may be undefined)
+ * @param ourHandler - The internal event handler
+ * @returns A composed event handler that calls both handlers in sequence
+ *
+ * @example
+ * ```tsx
+ * <button
+ *   onClick={composeEventHandlers(externalOnClick, (e) => {
+ *     // Internal handler logic
+ *   })}
+ * />
+ * ```
+ */
+export declare const composeEventHandlers: <E>(theirHandler: ((event: E) => void) | undefined, ourHandler: (event: E) => void) => (event: E) => void;

package/es/utils/composeEventHandlers.js

@@ -0,0 +1,26 @@
+/**
+ * Composes two event handlers together, calling the external handler first,
+ * then the internal handler if the event hasn't been prevented.
+ *
+ * @template E - The event type
+ * @param theirHandler - The external event handler (may be undefined)
+ * @param ourHandler - The internal event handler
+ * @returns A composed event handler that calls both handlers in sequence
+ *
+ * @example
+ * ```tsx
+ * <button
+ *   onClick={composeEventHandlers(externalOnClick, (e) => {
+ *     // Internal handler logic
+ *   })}
+ * />
+ * ```
+ */
+export var composeEventHandlers = function composeEventHandlers(theirHandler, ourHandler) {
+  return function (event) {
+    theirHandler === null || theirHandler === void 0 || theirHandler(event);
+    // @ts-ignore - compatible with React SyntheticEvent shape
+    if (event !== null && event !== void 0 && event.defaultPrevented) return;
+    ourHandler(event);
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",