@lobehub/ui 2.15.0 → 2.15.1

package/es/DraggableSideNav/DraggableSideNav.js

@@ -1,7 +1,7 @@
 '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 = ["animation", "children", "className", "classNames", "collapsed", "defaultCollapsed", "defaultSize", "footer", "header", "maxWidth", "minWidth", "onCollapsedChange", "onSizeChange", "onSizeDragging", "placement", "resizable", "showBorder", "showHandle", "showHandleWhenCollapsed", "showHandleHighlight", "size", "styles"];
+var _excluded = ["animation", "children", "className", "classNames", "defaultExpand", "defaultWidth", "expand", "expandable", "footer", "header", "maxWidth", "minWidth", "onExpandChange", "onWidthChange", "onWidthDragging", "placement", "resizable", "showBorder", "showHandle", "showHandleWhenCollapsed", "showHandleHighlight", "styles", "width"];
 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; }
@@ -27,7 +27,7 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度
-var DEFAULT_COLLAPSED = false;
+var DEFAULT_EXPAND = true;
 var DEFAULT_EXPANDED_WIDTH = 280;
 
 // Animation variants generator based on fade and blur settings
@@ -62,8 +62,8 @@ var getAnimationVariants = function getAnimationVariants(fade, blur) {
 var AnimationWrapper = /*#__PURE__*/memo(function (_ref) {
   var blur = _ref.blur,
     children = _ref.children,
-    collapsed = _ref.collapsed,
     enabled = _ref.enabled,
+    expand = _ref.expand,
     fade = _ref.fade,
     id = _ref.id;
   if (!enabled) return children;
@@ -77,7 +77,7 @@ var AnimationWrapper = /*#__PURE__*/memo(function (_ref) {
       initial: "exit",
       variants: variants,
       children: children
-    }, "".concat(id, "-").concat(collapsed ? 'collapsed' : 'expanded'))
+    }, "".concat(id, "-").concat(expand ? 'expanded' : 'collapsed'))
   });
 });
 AnimationWrapper.displayName = 'AnimationWrapper';
@@ -87,18 +87,20 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     children = _ref2.children,
     className = _ref2.className,
     classNames = _ref2.classNames,
-    collapsed = _ref2.collapsed,
-    _ref2$defaultCollapse = _ref2.defaultCollapsed,
-    defaultCollapsed = _ref2$defaultCollapse === void 0 ? DEFAULT_COLLAPSED : _ref2$defaultCollapse,
-    defaultSize = _ref2.defaultSize,
+    _ref2$defaultExpand = _ref2.defaultExpand,
+    defaultExpand = _ref2$defaultExpand === void 0 ? DEFAULT_EXPAND : _ref2$defaultExpand,
+    defaultWidth = _ref2.defaultWidth,
+    expand = _ref2.expand,
+    _ref2$expandable = _ref2.expandable,
+    expandable = _ref2$expandable === void 0 ? true : _ref2$expandable,
     footer = _ref2.footer,
     header = _ref2.header,
     maxWidth = _ref2.maxWidth,
     _ref2$minWidth = _ref2.minWidth,
     minWidth = _ref2$minWidth === void 0 ? DEFAULT_MIN_WIDTH : _ref2$minWidth,
-    onCollapsedChange = _ref2.onCollapsedChange,
-    onSizeChange = _ref2.onSizeChange,
-    onSizeDragging = _ref2.onSizeDragging,
+    onExpandChange = _ref2.onExpandChange,
+    onWidthChange = _ref2.onWidthChange,
+    onWidthDragging = _ref2.onWidthDragging,
     _ref2$placement = _ref2.placement,
     placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
     _ref2$resizable = _ref2.resizable,
@@ -111,8 +113,8 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     showHandleWhenCollapsed = _ref2$showHandleWhenC === void 0 ? false : _ref2$showHandleWhenC,
     _ref2$showHandleHighl = _ref2.showHandleHighlight,
     showHandleHighlight = _ref2$showHandleHighl === void 0 ? false : _ref2$showHandleHighl,
-    size = _ref2.size,
     customStyles = _ref2.styles,
+    width = _ref2.width,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles({
       showBorder: showBorder
@@ -121,13 +123,15 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     cx = _useStyles.cx;
   var ref = useRef(null);
   var isHovering = useHover(ref);
-  var _useControlledState = useControlledState(defaultCollapsed, {
-      onChange: onCollapsedChange,
-      value: collapsed
+
+  // Expand state management
+  var _useControlledState = useControlledState(defaultExpand, {
+      onChange: onExpandChange,
+      value: expand
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    isCollapsed = _useControlledState2[0],
-    setIsCollapsed = _useControlledState2[1];
+    isExpand = _useControlledState2[0],
+    setIsExpand = _useControlledState2[1];
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isResizing = _useState2[0],
@@ -137,33 +141,37 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     isAnimating = _useState4[0],
     setIsAnimating = _useState4[1];
 
+  // Compute default expanded width
+  var computedDefaultExpandedWidth = defaultWidth || DEFAULT_EXPANDED_WIDTH;
+
   // 内部宽度状态，用于平滑动画
-  var _useState5 = useState(isCollapsed ? minWidth : (defaultSize === null || defaultSize === void 0 ? void 0 : defaultSize.width) || DEFAULT_EXPANDED_WIDTH),
+  var _useState5 = useState(isExpand ? width !== null && width !== void 0 ? width : computedDefaultExpandedWidth : minWidth),
     _useState6 = _slicedToArray(_useState5, 2),
     internalWidth = _useState6[0],
     setInternalWidth = _useState6[1];
 
   // 记住展开时的宽度
-  var _useState7 = useState((defaultSize === null || defaultSize === void 0 ? void 0 : defaultSize.width) || DEFAULT_EXPANDED_WIDTH),
+  var _useState7 = useState(width !== null && width !== void 0 ? width : computedDefaultExpandedWidth),
     _useState8 = _slicedToArray(_useState7, 2),
     expandedWidth = _useState8[0],
     setExpandedWidth = _useState8[1];
 
-  // 用于渲染的 collapsed 状态 - 延迟切换以匹配动画时机
-  var _useState9 = useState(isCollapsed),
+  // 用于渲染的 expand 状态 - 延迟切换以匹配动画时机
+  var _useState9 = useState(isExpand),
     _useState10 = _slicedToArray(_useState9, 2),
-    renderCollapsed = _useState10[0],
-    setRenderCollapsed = _useState10[1];
+    renderExpand = _useState10[0],
+    setRenderExpand = _useState10[1];
 
   // 计算折叠阈值：展开最小宽度和折叠宽度的中间值
   var collapseThreshold = useMemo(function () {
     return minWidth + (expandedWidth - minWidth) / 3;
   }, [minWidth, expandedWidth]);
 
-  // Toggle collapse state with smooth animation
-  var toggleCollapse = function toggleCollapse() {
+  // Toggle expand state with smooth animation
+  var toggleExpand = function toggleExpand() {
+    if (!expandable) return;
     setIsAnimating(true);
-    setIsCollapsed(!isCollapsed);
+    setIsExpand(!isExpand);
 
     // 动画完成后重置状态 - 与宽度动画时长一致
     setTimeout(function () {
@@ -171,67 +179,63 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     }, 400);
   };
 
-  // 处理折叠状态变化时的宽度动画和内容切换时机
+  // 处理展开/折叠状态变化时的宽度动画和内容切换时机
   useEffect(function () {
     if (isAnimating) {
       // 使用 requestAnimationFrame 确保动画平滑
       requestAnimationFrame(function () {
-        if (isCollapsed) {
-          setInternalWidth(minWidth);
+        if (isExpand) {
+          // 展开动画：立即切换内容（先切换内容，再开始宽度动画）
+          setRenderExpand(true);
+          setInternalWidth(expandedWidth);
+        } else {
           // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）
+          setInternalWidth(minWidth);
           setTimeout(function () {
-            setRenderCollapsed(true);
+            setRenderExpand(false);
           }, 300);
-        } else {
-          // 展开动画：立即切换内容（先切换内容，再开始宽度动画）
-          setRenderCollapsed(false);
-          setInternalWidth(expandedWidth);
         }
       });
     }
-  }, [isCollapsed, isAnimating, minWidth, expandedWidth]);
+  }, [isExpand, isAnimating, minWidth, expandedWidth]);
 
-  // 同步非动画期间的 renderCollapsed 状态（如拖拽）
+  // 同步非动画期间的 renderExpand 状态（如拖拽）
   useEffect(function () {
     if (!isAnimating && !isResizing) {
-      setRenderCollapsed(isCollapsed);
+      setRenderExpand(isExpand);
     }
-  }, [isCollapsed, isAnimating, isResizing]);
+  }, [isExpand, isAnimating, isResizing]);
 
-  // 处理外部 size prop 变化
+  // 处理外部 width prop 变化
   useEffect(function () {
-    if (size !== null && size !== void 0 && size.width && !isResizing && !isAnimating) {
-      var width = typeof size.width === 'string' ? parseInt(size.width) : size.width;
+    if (width !== undefined && !isResizing && !isAnimating) {
       setInternalWidth(width);
-      if (!isCollapsed) {
+      if (isExpand) {
         setExpandedWidth(width);
       }
     }
-  }, [size === null || size === void 0 ? void 0 : size.width, isResizing, isAnimating, isCollapsed]);
+  }, [width, isResizing, isAnimating, isExpand]);
 
-  // 计算当前的 children（支持函数和静态值）- 使用 renderCollapsed 而不是 isCollapsed
+  // 计算当前的 children（支持函数和静态值）- 使用 renderExpand
   var currentChildren = useMemo(function () {
-    return typeof children === 'function' ? children(renderCollapsed) : children;
-  }, [children, renderCollapsed]);
+    return typeof children === 'function' ? children(renderExpand) : children;
+  }, [children, renderExpand]);
 
-  // 计算当前的 header（支持函数和静态值）- 使用 renderCollapsed 而不是 isCollapsed
+  // 计算当前的 header（支持函数和静态值）- 使用 renderExpand
   var currentHeader = useMemo(function () {
-    return typeof header === 'function' ? header(renderCollapsed) : header;
-  }, [header, renderCollapsed]);
+    return typeof header === 'function' ? header(renderExpand) : header;
+  }, [header, renderExpand]);
 
-  // 计算当前的 footer（支持函数和静态值）- 使用 renderCollapsed 而不是 isCollapsed
+  // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand
   var currentFooter = useMemo(function () {
-    return typeof footer === 'function' ? footer(renderCollapsed) : footer;
-  }, [footer, renderCollapsed]);
+    return typeof footer === 'function' ? footer(renderExpand) : footer;
+  }, [footer, renderExpand]);
 
   // Handle resize
   var handleResize = function handleResize(_, _direction, reference_, delta) {
     var currentWidth = reference_.offsetWidth;
     setInternalWidth(currentWidth);
-    onSizeDragging === null || onSizeDragging === void 0 || onSizeDragging(delta, {
-      height: reference_.style.height,
-      width: reference_.style.width
-    });
+    onWidthDragging === null || onWidthDragging === void 0 || onWidthDragging(delta, currentWidth);
   };
   var handleResizeStart = function handleResizeStart() {
     setIsResizing(true);
@@ -241,56 +245,59 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     var currentWidth = reference_.offsetWidth;
 
     // 根据拖拽后的宽度决定是折叠还是展开
-    if (currentWidth <= minWidth) {
-      // 拖拽到最小宽度，保持折叠
-      setIsAnimating(true);
-      setIsCollapsed(true);
-      setInternalWidth(minWidth);
-      setTimeout(function () {
-        return setIsAnimating(false);
-      }, 400);
-    } else if (currentWidth < collapseThreshold) {
-      // 拖拽到阈值以下，自动折叠
-      setIsAnimating(true);
-      setIsCollapsed(true);
-      setInternalWidth(minWidth);
-      setTimeout(function () {
-        return setIsAnimating(false);
-      }, 400);
-    } else if (isCollapsed && currentWidth > minWidth) {
-      // 从折叠状态拖拽出来，自动展开
-      setIsAnimating(true);
-      setIsCollapsed(false);
-      setExpandedWidth(currentWidth);
-      setInternalWidth(currentWidth);
-      setTimeout(function () {
-        return setIsAnimating(false);
-      }, 400);
-    } else if (!isCollapsed) {
-      // 展开状态下正常拖拽，记住宽度
+    if (expandable) {
+      if (currentWidth <= minWidth) {
+        // 拖拽到最小宽度，保持折叠
+        setIsAnimating(true);
+        setIsExpand(false);
+        setInternalWidth(minWidth);
+        setTimeout(function () {
+          return setIsAnimating(false);
+        }, 400);
+      } else if (currentWidth < collapseThreshold) {
+        // 拖拽到阈值以下，自动折叠
+        setIsAnimating(true);
+        setIsExpand(false);
+        setInternalWidth(minWidth);
+        setTimeout(function () {
+          return setIsAnimating(false);
+        }, 400);
+      } else if (!isExpand && currentWidth > minWidth) {
+        // 从折叠状态拖拽出来，自动展开
+        setIsAnimating(true);
+        setIsExpand(true);
+        setExpandedWidth(currentWidth);
+        setInternalWidth(currentWidth);
+        setTimeout(function () {
+          return setIsAnimating(false);
+        }, 400);
+      } else if (isExpand) {
+        // 展开状态下正常拖拽，记住宽度
+        setExpandedWidth(currentWidth);
+        setInternalWidth(currentWidth);
+      }
+    } else {
+      // 如果不可折叠，仅更新宽度
       setExpandedWidth(currentWidth);
       setInternalWidth(currentWidth);
     }
-    onSizeChange === null || onSizeChange === void 0 || onSizeChange(delta, {
-      height: reference_.style.height,
-      width: reference_.style.width
-    });
+    onWidthChange === null || onWidthChange === void 0 || onWidthChange(delta, currentWidth);
   };
 
-  // Arrow icon based on placement and collapse state
+  // Arrow icon based on placement and expand state
   var ArrowIcon = useMemo(function () {
     if (placement === 'left') {
-      // 左侧：折叠时箭头向右（展开方向），展开时箭头向左（折叠方向）
+      // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）
       return ChevronLeft;
     }
-    // 右侧：折叠时箭头向左（展开方向），展开时箭头向右（折叠方向）
+    // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）
     return ChevronRight;
   }, [placement]);
 
   // Toggle handle with smooth transitions
-  var handle = showHandle && /*#__PURE__*/_jsx(motion.div, {
+  var handle = showHandle && expandable && /*#__PURE__*/_jsx(motion.div, {
     animate: {
-      opacity: isCollapsed && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,
+      opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,
       scale: isHovering ? 1.05 : 1
     },
     className: cx(styles.toggleRoot, placement === 'left' ? styles.toggleLeft : styles.toggleRight),
@@ -303,14 +310,14 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     },
     children: /*#__PURE__*/_jsx(Center, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
-      onClick: toggleCollapse,
+      onClick: toggleExpand,
       style: _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle), {}, {
         cursor: 'pointer',
         transition: 'transform 0.2s ease-out'
       }),
       children: /*#__PURE__*/_jsx(motion.div, {
         animate: {
-          rotate: isCollapsed ? 180 : 0
+          rotate: isExpand ? 0 : 180
         },
         transition: {
           duration: 0.3,
@@ -381,33 +388,33 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
         children: [currentHeader && /*#__PURE__*/_jsx("div", {
           className: cx(styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
           style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
-          children: /*#__PURE__*/_jsx(AnimationWrapper, {
-            blur: (_animation$blur = animation === null || animation === void 0 ? void 0 : animation.blur) !== null && _animation$blur !== void 0 ? _animation$blur : false,
-            collapsed: renderCollapsed,
-            enabled: animation === null || animation === void 0 ? void 0 : animation.header,
-            fade: (_animation$fade = animation === null || animation === void 0 ? void 0 : animation.fade) !== null && _animation$fade !== void 0 ? _animation$fade : true,
+          children: animation === false || animation === undefined ? currentHeader : /*#__PURE__*/_jsx(AnimationWrapper, {
+            blur: (_animation$blur = animation.blur) !== null && _animation$blur !== void 0 ? _animation$blur : false,
+            enabled: animation.header,
+            expand: renderExpand,
+            fade: (_animation$fade = animation.fade) !== null && _animation$fade !== void 0 ? _animation$fade : true,
             id: "header",
             children: currentHeader
           })
         }), /*#__PURE__*/_jsx("div", {
           className: cx(styles.body, classNames === null || classNames === void 0 ? void 0 : classNames.body),
           style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
-          children: /*#__PURE__*/_jsx(AnimationWrapper, {
-            blur: (_animation$blur2 = animation === null || animation === void 0 ? void 0 : animation.blur) !== null && _animation$blur2 !== void 0 ? _animation$blur2 : false,
-            collapsed: renderCollapsed,
-            enabled: animation === null || animation === void 0 ? void 0 : animation.body,
-            fade: (_animation$fade2 = animation === null || animation === void 0 ? void 0 : animation.fade) !== null && _animation$fade2 !== void 0 ? _animation$fade2 : true,
+          children: animation === false || animation === undefined ? currentChildren : /*#__PURE__*/_jsx(AnimationWrapper, {
+            blur: (_animation$blur2 = animation.blur) !== null && _animation$blur2 !== void 0 ? _animation$blur2 : false,
+            enabled: animation.body,
+            expand: renderExpand,
+            fade: (_animation$fade2 = animation.fade) !== null && _animation$fade2 !== void 0 ? _animation$fade2 : true,
             id: "body",
             children: currentChildren
           })
         }), currentFooter && /*#__PURE__*/_jsx("div", {
           className: cx(styles.footer, classNames === null || classNames === void 0 ? void 0 : classNames.footer),
           style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.footer,
-          children: /*#__PURE__*/_jsx(AnimationWrapper, {
-            blur: (_animation$blur3 = animation === null || animation === void 0 ? void 0 : animation.blur) !== null && _animation$blur3 !== void 0 ? _animation$blur3 : false,
-            collapsed: renderCollapsed,
-            enabled: animation === null || animation === void 0 ? void 0 : animation.footer,
-            fade: (_animation$fade3 = animation === null || animation === void 0 ? void 0 : animation.fade) !== null && _animation$fade3 !== void 0 ? _animation$fade3 : true,
+          children: animation === false || animation === undefined ? currentFooter : /*#__PURE__*/_jsx(AnimationWrapper, {
+            blur: (_animation$blur3 = animation.blur) !== null && _animation$blur3 !== void 0 ? _animation$blur3 : false,
+            enabled: animation.footer,
+            expand: renderExpand,
+            fade: (_animation$fade3 = animation.fade) !== null && _animation$fade3 !== void 0 ? _animation$fade3 : true,
             id: "footer",
             children: currentFooter
           })

package/es/DraggableSideNav/style.js

@@ -15,14 +15,14 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     prefixCls = _ref.prefixCls;
   var showBorder = _ref2.showBorder;
   return {
-    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n      /* Smooth scroll behavior */\n      scroll-behavior: smooth;\n      overflow: hidden auto;\n      flex: 1;\n\n      /* Better scrollbar styling */\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        border-radius: 3px;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])), token.colorBorderSecondary, token.colorBorder),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n      /* Width transition controlled by inline style */\n\n      /* Ensure smooth animations */\n      will-change: width;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n    "]))),
+    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      /* Smooth scroll behavior */\n      scroll-behavior: smooth;\n      overflow: hidden auto;\n      flex: 1;\n\n      /* Better scrollbar styling */\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        border-radius: 3px;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])), token.colorBorderSecondary, token.colorBorder),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Width transition controlled by inline style */\n\n      /* Ensure smooth animations */\n      will-change: width;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n    "]))),
     contentContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n      border-inline-end: ", " solid ", ";\n\n      background: ", ";\n    "])), showBorder ? '1px' : '0', token.colorBorderSecondary, token.colorBgLayout),
     footer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
     handlerIcon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      /* Icon transitions are now handled by framer-motion */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
     header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
     menuOverride: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      .", "-menu {\n        .", "-menu-item {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n          justify-content: center;\n\n          height: unset;\n          min-height: 36px;\n          padding-block: 4px;\n          padding-inline: 8px !important;\n        }\n\n        .", "-menu-item-group-title {\n          overflow: hidden;\n          padding-inline: 8px;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        .", "-menu-item-icon {\n          position: absolute;\n          inset-inline-start: 0;\n\n          display: flex !important;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px;\n          height: 36px;\n        }\n\n        .", "-menu-title-content {\n          overflow: hidden;\n          flex: 1;\n\n          margin: 0 !important;\n          padding-inline-start: 36px;\n\n          line-height: 1.5;\n        }\n\n        &.", "-menu-inline-collapsed {\n          .ant-menu-title-content {\n            display: none;\n            width: 0;\n            opacity: 0;\n          }\n\n          .", "-menu-item {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 36px !important;\n            height: 36px !important;\n          }\n        }\n      }\n    "])), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls),
-    resizeHandle: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: col-resize;\n\n      position: absolute;\n      z-index: 1;\n      inset-block: 0 0;\n\n      width: 8px;\n\n      transition: background-color 0.2s ease;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        width: 2px;\n\n        background: transparent;\n\n        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n      }\n    "]))),
+    resizeHandle: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: col-resize;\n\n      position: absolute;\n      z-index: 50;\n      inset-block: 0 0;\n\n      width: 8px;\n\n      transition: background-color 0.2s ease;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        width: 2px;\n\n        background: transparent;\n\n        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n      }\n    "]))),
     resizeHandleHighlight: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      &:hover {\n        &::after {\n          width: 3px;\n          background: ", ";\n          box-shadow: 0 0 8px ", "40;\n        }\n      }\n\n      &:active {\n        &::after {\n          background: ", ";\n        }\n      }\n    "])), token.colorPrimary, token.colorPrimary, token.colorPrimaryActive),
     resizeHandleLeft: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      inset-inline-end: -4px;\n    "]))),
     resizeHandleRight: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      inset-inline-start: -4px;\n    "]))),

package/es/DraggableSideNav/type.d.ts

@@ -1,12 +1,13 @@
-import type { NumberSize, Size } from 're-resizable';
+import type { NumberSize } from 're-resizable';
 import type { CSSProperties, ReactNode } from 'react';
 import type { DivProps } from "../types";
 export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSelect'> {
     /**
      * Animation configuration for content transitions
-     * @default { fade: true, blur: false, header: false, body: false, footer: false }
+     * Set to false to disable all animations
+     * @default undefined
      */
-    animation?: {
+    animation?: false | {
         /**
          * Enable blur effect during transitions
          * @default false
@@ -35,9 +36,9 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
     };
     /**
      * Body content (main content area)
-     * Can be a static element or a function that receives collapsed state
+     * Can be a static element or a function that receives expand state
      */
-    children: ReactNode | ((collapsed: boolean) => ReactNode);
+    children: ReactNode | ((expand: boolean) => ReactNode);
     /**
      * Classnames for internal components
      */
@@ -50,28 +51,33 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
         header?: string;
     };
     /**
-     * Whether the panel is collapsed (controlled)
+     * Whether the panel is expanded by default
+     * @default true
      */
-    collapsed?: boolean;
+    defaultExpand?: boolean;
     /**
-     * Whether the panel is collapsed by default
-     * @default false
+     * Default width (number format)
      */
-    defaultCollapsed?: boolean;
+    defaultWidth?: number;
     /**
-     * Default width when expanded
+     * Whether the panel is expanded (controlled)
+     */
+    expand?: boolean;
+    /**
+     * Whether the panel can be expanded/collapsed
+     * @default true
      */
-    defaultSize?: Partial<Size>;
+    expandable?: boolean;
     /**
      * Footer content
-     * Can be a static element or a function that receives collapsed state
+     * Can be a static element or a function that receives expand state
      */
-    footer?: ReactNode | ((collapsed: boolean) => ReactNode);
+    footer?: ReactNode | ((expand: boolean) => ReactNode);
     /**
      * Header content
-     * Can be a static element or a function that receives collapsed state
+     * Can be a static element or a function that receives expand state
      */
-    header?: ReactNode | ((collapsed: boolean) => ReactNode);
+    header?: ReactNode | ((expand: boolean) => ReactNode);
     /**
      * Maximum width
      */
@@ -82,21 +88,21 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
      */
     minWidth?: number;
     /**
-     * Callback when collapse state changes
+     * Callback when expand state changes
      */
-    onCollapsedChange?: (collapsed: boolean) => void;
+    onExpandChange?: (expand: boolean) => void;
     /**
      * Callback when menu item is selected
      */
     onSelect?: (key: string) => void;
     /**
-     * Callback when size changes
+     * Callback when width changes
      */
-    onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    onWidthChange?: (delta: NumberSize, width: number) => void;
     /**
-     * Callback when actively resizing
+     * Callback when actively resizing width
      */
-    onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    onWidthDragging?: (delta: NumberSize, width: number) => void;
     /**
      * Placement of the side nav
      * @default 'left'
@@ -123,10 +129,6 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
      * @default false
      */
     showHandleWhenCollapsed?: boolean;
-    /**
-     * Current size (controlled)
-     */
-    size?: Partial<Size>;
     /**
      * Custom styles
      */
@@ -138,4 +140,8 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
         handle?: CSSProperties;
         header?: CSSProperties;
     };
+    /**
+     * Current width (controlled)
+     */
+    width?: number;
 }

package/package.json

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