@lobehub/ui 3.1.2 → 3.3.0

package/es/Flex/Center.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { CenterProps } from './type';
+declare const Center: FC<CenterProps>;
+export default Center;

package/es/Flex/Center.js

@@ -0,0 +1,23 @@
+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 = ["children", "ref"];
+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 FlexBasic from "./FlexBasic";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Center = function Center(_ref) {
+  var children = _ref.children,
+    ref = _ref.ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(FlexBasic, _objectSpread(_objectSpread({}, props), {}, {
+    align: "center",
+    justify: "center",
+    ref: ref,
+    children: children
+  }));
+};
+export default Center;

package/es/Flex/FlexBasic.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import './style.css';
+import type { FlexBasicProps } from './type';
+declare const _default: import("react").NamedExoticComponent<FlexBasicProps>;
+export default _default;

package/es/Flex/FlexBasic.js

@@ -0,0 +1,79 @@
+'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 = ["visible", "flex", "gap", "direction", "horizontal", "align", "justify", "distribution", "height", "width", "padding", "paddingInline", "paddingBlock", "prefixCls", "as", "className", "style", "children", "wrap", "ref"];
+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 { memo } from 'react';
+import "./style.css";
+import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var FlexBasic = function FlexBasic(_ref) {
+  var visible = _ref.visible,
+    flex = _ref.flex,
+    gap = _ref.gap,
+    direction = _ref.direction,
+    horizontal = _ref.horizontal,
+    align = _ref.align,
+    justify = _ref.justify,
+    distribution = _ref.distribution,
+    height = _ref.height,
+    width = _ref.width,
+    padding = _ref.padding,
+    paddingInline = _ref.paddingInline,
+    paddingBlock = _ref.paddingBlock,
+    prefixCls = _ref.prefixCls,
+    _ref$as = _ref.as,
+    Container = _ref$as === void 0 ? 'div' : _ref$as,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    wrap = _ref.wrap,
+    ref = _ref.ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var justifyContent = justify || distribution;
+  var calcWidth = function calcWidth() {
+    if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent)) return '100%';
+    return getCssValue(width);
+  };
+  var finalWidth = calcWidth();
+  var cssVars = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, flex !== undefined ? {
+    '--lobe-flex': String(flex)
+  } : {}), direction || horizontal ? {
+    '--lobe-flex-direction': getFlexDirection(direction, horizontal)
+  } : {}), wrap !== undefined ? {
+    '--lobe-flex-wrap': wrap
+  } : {}), justifyContent !== undefined ? {
+    '--lobe-flex-justify': justifyContent
+  } : {}), align !== undefined ? {
+    '--lobe-flex-align': align
+  } : {}), finalWidth !== undefined ? {
+    '--lobe-flex-width': finalWidth
+  } : {}), height !== undefined ? {
+    '--lobe-flex-height': getCssValue(height)
+  } : {}), padding !== undefined ? {
+    '--lobe-flex-padding': getCssValue(padding)
+  } : {}), paddingInline !== undefined ? {
+    '--lobe-flex-padding-inline': getCssValue(paddingInline)
+  } : {}), paddingBlock !== undefined ? {
+    '--lobe-flex-padding-block': getCssValue(paddingBlock)
+  } : {}), gap !== undefined ? {
+    '--lobe-flex-gap': getCssValue(gap)
+  } : {});
+  var mergedStyle = _objectSpread(_objectSpread({}, cssVars), style);
+  var baseClassName = 'lobe-flex';
+  var mergedClassName = [baseClassName, visible === false ? "".concat(baseClassName, "--hidden") : undefined, prefixCls ? "".concat(prefixCls, "-flex") : undefined, className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    className: mergedClassName,
+    style: mergedStyle,
+    children: children
+  }));
+};
+export default /*#__PURE__*/memo(FlexBasic);

package/es/Flex/Flexbox.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FlexBasic';
+export { default as Flexbox } from './FlexBasic';

package/es/Flex/Flexbox.js

@@ -0,0 +1,2 @@
+export { default } from "./FlexBasic";
+export { default as Flexbox } from "./FlexBasic";

package/es/Flex/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Center } from './Center';
+export { default as FlexBasic } from './FlexBasic';
+export { default as Flexbox } from './Flexbox';
+export type { CenterProps, ContentPosition, FlexBasicProps, FlexboxProps, FlexDirection, } from './type';

package/es/Flex/index.js

@@ -0,0 +1,3 @@
+export { default as Center } from "./Center";
+export { default as FlexBasic } from "./FlexBasic";
+export { default as Flexbox } from "./Flexbox";

package/es/Flex/style.css

@@ -0,0 +1,20 @@
+.lobe-flex {
+  display: flex;
+  flex: var(--lobe-flex, 0 1 auto);
+  flex-direction: var(--lobe-flex-direction, column);
+  flex-wrap: var(--lobe-flex-wrap, nowrap);
+  justify-content: var(--lobe-flex-justify, flex-start);
+  align-items: var(--lobe-flex-align, stretch);
+  width: var(--lobe-flex-width, auto);
+  height: var(--lobe-flex-height, auto);
+  padding: var(--lobe-flex-padding, 0);
+  padding-inline: var(--lobe-flex-padding-inline, initial);
+  padding-block: var(--lobe-flex-padding-block, initial);
+  gap: var(--lobe-flex-gap, 0);
+}
+
+.lobe-flex--hidden {
+  display: none;
+}
+
+

package/es/Flex/type.d.ts

@@ -0,0 +1,105 @@
+import type { CSSProperties, ElementType, HTMLAttributes, ReactNode, Ref } from 'react';
+import { DOMAttributes } from 'react';
+export type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch' | 'baseline';
+export type FlexDirection = 'vertical' | 'vertical-reverse' | 'horizontal' | 'horizontal-reverse';
+export type DivProps = DOMAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>;
+export type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
+/**
+ * Flexbox 布局组件的接口
+ */
+export interface IFlexbox {
+    /**
+     * 交叉轴对齐方式
+     * @default "stretch"
+     */
+    align?: ContentPosition;
+    /**
+     * 渲染的 HTML 元素类型
+     * @default "div"
+     */
+    as?: ElementType;
+    /**
+     * 子元素
+     */
+    children?: ReactNode;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 主轴方向
+     * @default "horizontal"
+     */
+    direction?: FlexDirection;
+    /**
+     * 内容分布
+     */
+    distribution?: CSSProperties['justifyContent'];
+    /**
+     * flex 值
+     * @default "0 1 auto"
+     */
+    flex?: number | string;
+    /**
+     * 主轴方向上的间距
+     * @default 0
+     */
+    gap?: CommonSpaceNumber | number | string;
+    /**
+     * 高度
+     * @default "auto"
+     */
+    height?: number | string;
+    /**
+     * 是否横向
+     * @default false
+     */
+    horizontal?: boolean;
+    /**
+     * 主轴对齐方式
+     */
+    justify?: CSSProperties['justifyContent'];
+    /**
+     * 内边距
+     * @default 0
+     */
+    padding?: string | number | CommonSpaceNumber;
+    /**
+     * 块内边距
+     */
+    paddingBlock?: string | number;
+    /**
+     * 内联内边距
+     */
+    paddingInline?: string | number;
+    /**
+     * 类名前缀
+     */
+    prefixCls?: string;
+    /**
+     * ref 引用
+     */
+    ref?: Ref<HTMLElement>;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 是否显示
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * 宽度
+     * @default "auto"
+     */
+    width?: number | string;
+    /**
+     * 换行方式
+     */
+    wrap?: CSSProperties['flexWrap'];
+}
+export interface FlexBasicProps extends IFlexbox, DivProps {
+}
+export type FlexboxProps = FlexBasicProps;
+export type CenterProps = Omit<FlexBasicProps, 'distribution' | 'direction' | 'align'>;

package/es/Flex/type.js

@@ -0,0 +1 @@
+export {};

package/es/Flex/utils.d.ts

@@ -0,0 +1,7 @@
+import type { FlexDirection } from './type';
+export declare const getPrefix: (prefixCls?: string) => string;
+export declare const getFlexDirection: (direction?: FlexDirection, isHorizontal?: boolean) => "column" | "column-reverse" | "row" | "row-reverse";
+export declare const isSpaceDistribution: (distribution?: string) => boolean | undefined;
+export declare const isHorizontal: (direction?: FlexDirection, isHorizontal?: boolean) => boolean;
+export declare const isVertical: (direction?: FlexDirection, isHorizontal?: boolean) => boolean;
+export declare const getCssValue: (value: string | number | undefined) => string | undefined;

package/es/Flex/utils.js

@@ -0,0 +1,39 @@
+export var getPrefix = function getPrefix(prefixCls) {
+  if (prefixCls) return prefixCls;
+  return 'lobe';
+};
+export var getFlexDirection = function getFlexDirection(direction, isHorizontal) {
+  if (isHorizontal) return 'row';
+  switch (direction) {
+    case 'horizontal':
+      {
+        return 'row';
+      }
+    case 'horizontal-reverse':
+      {
+        return 'row-reverse';
+      }
+    case 'vertical':
+    default:
+      {
+        return 'column';
+      }
+    case 'vertical-reverse':
+      {
+        return 'column-reverse';
+      }
+  }
+};
+export var isSpaceDistribution = function isSpaceDistribution(distribution) {
+  if (!distribution) return;
+  return ['space-between', 'space-around', 'space-evenly'].includes(distribution);
+};
+export var isHorizontal = function isHorizontal(direction, _isHorizontal) {
+  return getFlexDirection(direction, _isHorizontal) === 'row';
+};
+export var isVertical = function isVertical(direction, isHorizontal) {
+  return getFlexDirection(direction, isHorizontal) === 'column';
+};
+export var getCssValue = function getCssValue(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+};

package/es/Tooltip/TooltipFloating.d.ts

@@ -11,11 +11,6 @@ type TooltipFloatingProps = {
     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;
@@ -23,8 +18,5 @@ type TooltipFloatingProps = {
     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;
-};
+declare const TooltipFloating: ({ open, title, placement, floatingStyles, setFloating, floatingProps, arrow, arrowRef, context, hotkey, hotkeyProps, className, classNames, styles: styleProps, zIndex, }: TooltipFloatingProps) => import("react/jsx-runtime").JSX.Element;
 export default TooltipFloating;

package/es/Tooltip/TooltipFloating.js

@@ -6,8 +6,14 @@ 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); }
+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 { FloatingArrow } from '@floating-ui/react';
-import { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Hotkey from "../Hotkey";
 import { AnimatePresence, LazyMotion, m } from "../motion";
@@ -26,7 +32,6 @@ var TooltipFloating = function TooltipFloating(_ref) {
     context = _ref.context,
     hotkey = _ref.hotkey,
     hotkeyProps = _ref.hotkeyProps,
-    layoutId = _ref.layoutId,
     className = _ref.className,
     classNames = _ref.classNames,
     styleProps = _ref.styles,
@@ -59,43 +64,47 @@ var TooltipFloating = function TooltipFloating(_ref) {
         }
     }
   }, [placement]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openNextTick = _useState2[0],
+    setOpenNextTick = _useState2[1];
+  useLayoutEffect(function () {
+    if (!open) {
+      setOpenNextTick(false);
+      return;
+    }
+    var rafId = requestAnimationFrame(function () {
+      setOpenNextTick(true);
+    });
+    return function () {
+      cancelAnimationFrame(rafId);
+    };
+  }, [open]);
   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
-        },
+      children: open && title && /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+        className: cx(styles.tooltip, openNextTick && styles.tooltipLayout, classNames === null || classNames === void 0 ? void 0 : classNames.container, classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
         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]
-        }
+        }, styleProps === null || styleProps === void 0 ? void 0 : styleProps.container)
       }, floatingProps), {}, {
         children: /*#__PURE__*/_jsxs(m.div, {
           animate: {
+            opacity: 1,
             scale: 1
           },
           exit: {
+            opacity: 0,
             scale: 0.98
           },
           initial: {
+            opacity: 0,
             scale: 0.96
           },
-          layout: layoutId ? 'position' : undefined,
-          layoutId: layoutId,
           style: {
             transformOrigin: transformOrigin
           },
@@ -131,5 +140,4 @@ var TooltipFloating = function TooltipFloating(_ref) {
     })
   });
 };
-TooltipFloating.displayName = 'TooltipFloating';
 export default TooltipFloating;

package/es/Tooltip/TooltipGroup.d.ts

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

package/es/Tooltip/TooltipGroup.js

@@ -7,23 +7,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { useCallback, useEffect, 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 TooltipGroup = function TooltipGroup(_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],
@@ -139,7 +135,6 @@ var TooltipGroup = /*#__PURE__*/memo(function (_ref) {
     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,
@@ -154,6 +149,5 @@ var TooltipGroup = /*#__PURE__*/memo(function (_ref) {
       children: floatingNode
     }) : floatingNode)]
   });
-});
-TooltipGroup.displayName = 'TooltipGroup';
+};
 export default TooltipGroup;

package/es/Tooltip/style.d.ts

@@ -2,4 +2,5 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     arrow: import("antd-style").SerializedStyles;
     content: import("antd-style").SerializedStyles;
     tooltip: import("antd-style").SerializedStyles;
+    tooltipLayout: import("antd-style").SerializedStyles;
 }>;

package/es/Tooltip/style.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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) {
@@ -7,6 +7,7 @@ export var useStyles = createStyles(function (_ref) {
   return {
     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    "])))
+    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    "]))),
+    tooltipLayout: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      transition: all 0.2s ease-in-out;\n    "])))
   };
 });

package/es/index.d.ts

@@ -22,6 +22,7 @@ export { default as EditableText, type EditableTextProps } from './EditableText'
 export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
 export { default as Empty, type EmptyProps } from './Empty';
 export { default as FileTypeIcon, type FileTypeIconProps } from './FileTypeIcon';
+export { Center, type CenterProps, FlexBasic, type FlexBasicProps, Flexbox, type FlexboxProps, } from './Flex';
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
 export { default as Footer, type FooterProps } from './Footer';

package/es/index.js

@@ -22,6 +22,7 @@ export { default as EditableText } from "./EditableText";
 export { default as EmojiPicker } from "./EmojiPicker";
 export { default as Empty } from "./Empty";
 export { default as FileTypeIcon } from "./FileTypeIcon";
+export { Center, FlexBasic, Flexbox } from "./Flex";
 export { default as FluentEmoji } from "./FluentEmoji";
 export { default as FontLoader } from "./FontLoader";
 export { default as Footer } from "./Footer";

package/package.json

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