@lobehub/ui 2.15.0 → 2.15.2

package/es/DraggablePanel/DraggablePanel.js

@@ -55,6 +55,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     showHandleHighlight = _ref$showHandleHighli === void 0 ? false : _ref$showHandleHighli,
     _ref$showHandleWideAr = _ref.showHandleWideArea,
     showHandleWideArea = _ref$showHandleWideAr === void 0 ? DEFAULT_SHOW_HANDLE_WIDE_AREA : _ref$showHandleWideAr,
+    backgroundColor = _ref.backgroundColor,
     size = _ref.size,
     customizeDefaultSize = _ref.defaultSize,
     minWidth = _ref.minWidth,
@@ -88,6 +89,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     return direction === 'rtl' && ['left', 'right'].includes(placement) ? placement === 'left' ? 'right' : 'left' : placement;
   }, [direction, placement]);
   var _useStyles = useStyles({
+      backgroundColor: backgroundColor,
       headerHeight: headerHeight,
       showBorder: showBorder,
       showHandleWideArea: showHandleWideArea
@@ -282,6 +284,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
         icon: Arrow,
         size: 16,
         style: {
+          marginBottom: internalPlacement === 'top' ? 4 : 0,
+          marginLeft: internalPlacement === 'right' ? 4 : 0,
+          marginRight: internalPlacement === 'left' ? 4 : 0,
+          marginTop: internalPlacement === 'bottom' ? 4 : 0,
           transform: "rotate(".concat(isExpand ? 180 : 0, "deg)")
         }
       })

package/es/DraggablePanel/style.d.ts

@@ -1,4 +1,5 @@
 export declare const useStyles: (props?: {
+    backgroundColor?: string | undefined;
     headerHeight: number;
     showBorder: boolean;
     showHandleWideArea: boolean;

package/es/DraggablePanel/style.js

@@ -11,14 +11,14 @@ import { createStyles, css, cx } from 'antd-style';
 // Layout constants
 var LAYOUT = {
   offset: 16,
-  toggleLength: 40,
+  toggleLength: 54,
   toggleShort: 16
 };
 export var useStyles = createStyles(function (_ref, _ref2) {
   var prefixCls = _ref.prefixCls,
-    token = _ref.token,
-    stylish = _ref.stylish;
-  var headerHeight = _ref2.headerHeight,
+    token = _ref.token;
+  var backgroundColor = _ref2.backgroundColor,
+    headerHeight = _ref2.headerHeight,
     showBorder = _ref2.showBorder,
     showHandleWideArea = _ref2.showHandleWideArea;
   var prefix = "".concat(prefixCls, "-draggable-panel");
@@ -41,7 +41,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   };
 
   // Handle styles
-  var handleBaseStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        z-index: 50;\n        transition: all 0.2s ", ";\n      }\n    "])), token.motionEaseOut);
+  var handleBaseStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        transition: all 0.2s ", ";\n      }\n    "])), token.motionEaseOut);
   var handleHighlightStyle = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      &:hover {\n        &::before {\n          background: ", ";\n          box-shadow: 0 0 8px ", "40;\n        }\n      }\n\n      &:active {\n        &::before {\n          background: ", " !important;\n        }\n      }\n    "])), token.colorPrimary, token.colorPrimary, token.colorPrimary);
   var handleStyles = {
     handleBottom: cx("".concat(prefix, "-bottom-handle"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          &::before {\n            inset-block-end: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])))),
@@ -52,13 +52,13 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   };
 
   // Toggle styles
-  var toggleBaseStyle = cx("".concat(prefix, "-toggle"), css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        pointer-events: ", ";\n\n        position: absolute;\n        z-index: 10;\n\n        opacity: 0;\n\n        transition: all 0.2s ", ";\n\n        &:hover,\n        &:active {\n          opacity: 1 !important;\n        }\n\n        > div {\n          ", ";\n          pointer-events: all;\n          cursor: pointer;\n\n          position: absolute;\n\n          color: ", ";\n\n          transition: all 0.2s ", ";\n\n          &:hover {\n            color: ", ";\n          }\n\n          &:active {\n            color: ", ";\n          }\n        }\n      "])), showHandleWideArea ? 'all' : 'none', token.motionEaseOut, stylish.variantFilled, token.colorTextTertiary, token.motionEaseOut, token.colorTextSecondary, token.colorText));
+  var toggleBaseStyle = cx("".concat(prefix, "-toggle"), css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        pointer-events: ", ";\n\n        position: absolute;\n        z-index: 50;\n\n        opacity: 0;\n\n        transition: all 0.2s ", ";\n\n        &:hover,\n        &:active {\n          opacity: 1 !important;\n        }\n\n        > div {\n          pointer-events: all;\n          cursor: pointer;\n\n          position: absolute;\n\n          border: 1px solid ", ";\n\n          color: ", ";\n\n          background: ", ";\n          backdrop-filter: blur(8px);\n\n          transition: all 0.2s ", ";\n\n          &:hover {\n            color: ", ";\n          }\n\n          &:active {\n            color: ", ";\n          }\n        }\n      "])), showHandleWideArea ? 'all' : 'none', token.motionEaseOut, token.colorBorder, token.colorTextTertiary, backgroundColor || token.colorBgLayout, token.motionEaseOut, token.colorTextSecondary, token.colorText));
   var toggleStyles = {
-    toggleBottom: cx("".concat(prefix, "-toggle-bottom"), css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          inset-block-end: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -20px;\n            border-radius: 0 0 4px 4px;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort)),
-    toggleLeft: cx("".concat(prefix, "-toggle-left"), css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          inset-inline-start: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n            border-radius: 4px 0 0 4px;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength)),
-    toggleRight: cx("".concat(prefix, "-toggle-right"), css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          inset-inline-end: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n            border-radius: 0 4px 4px 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength)),
+    toggleBottom: cx("".concat(prefix, "-toggle-bottom"), css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          inset-block-end: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -27px;\n            border-block-start-width: 0;\n            border-radius: 0 0 ", "px ", "px;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort, token.borderRadiusLG, token.borderRadiusLG)),
+    toggleLeft: cx("".concat(prefix, "-toggle-left"), css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          inset-inline-start: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -27px;\n            border-inline-end-width: 0;\n            border-radius: ", "px 0 0 ", "px;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, token.borderRadiusLG, token.borderRadiusLG)),
+    toggleRight: cx("".concat(prefix, "-toggle-right"), css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          inset-inline-end: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -27px;\n            border-inline-start-width: 0;\n            border-radius: 0 ", "px ", "px 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, token.borderRadiusLG, token.borderRadiusLG)),
     toggleRoot: toggleBaseStyle,
-    toggleTop: cx("".concat(prefix, "-toggle-top"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          inset-block-start: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -20px;\n            border-radius: 4px 4px 0 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort))
+    toggleTop: cx("".concat(prefix, "-toggle-top"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          inset-block-start: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -27px;\n            border-block-end-width: 0;\n            border-radius: ", "px ", "px 0 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort, token.borderRadiusLG, token.borderRadiusLG))
   };
 
   // Additional component styles
@@ -66,7 +66,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     fixed: css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n        position: relative;\n      "]))),
     fullscreen: css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block: ", "px 0;\n        inset-inline: 0;\n\n        width: 100%;\n        height: calc(100% - ", "px);\n\n        background: ", ";\n      "])), headerHeight, headerHeight, token.colorBgContainerSecondary),
     handlerIcon: css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut),
-    panel: cx("".concat(prefix, "-fixed"), css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          transition: all 0.2s ", ";\n        "])), token.motionEaseOut)),
+    panel: cx("".concat(prefix, "-fixed"), css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          background: ", ";\n          transition: all 0.2s ", ";\n        "])), backgroundColor || token.colorBgLayout, token.motionEaseOut)),
     root: cx(prefix, css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n          flex-shrink: 0;\n          border: 0 solid ", ";\n\n          &:hover {\n            > .", "-toggle {\n              opacity: 1;\n            }\n          }\n        "])), token.colorBorderSecondary, prefix))
   };
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, borderStyles), floatPositions), handleStyles), {}, {

package/es/DraggablePanel/type.d.ts

@@ -4,6 +4,7 @@ import type { Props as RndProps } from 'react-rnd';
 import type { DivProps } from "../types";
 type PlacementType = 'right' | 'left' | 'top' | 'bottom';
 export interface DraggablePanelProps extends DivProps {
+    backgroundColor?: string;
     classNames?: {
         content?: string;
         handle?: string;

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", "backgroundColor", "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,23 +113,27 @@ 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,
+    backgroundColor = _ref2.backgroundColor,
     customStyles = _ref2.styles,
+    width = _ref2.width,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles({
+      backgroundColor: backgroundColor,
       showBorder: showBorder
     }),
     styles = _useStyles.styles,
     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 +143,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 +181,78 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
     }, 400);
   };
 
-  // 处理折叠状态变化时的宽度动画和内容切换时机
+  // 用于跟踪上一次的 expand 状态，以检测外部变化
+  var prevExpandRef = useRef(isExpand);
+
+  // 监听外部 expand prop 变化，触发动画
+  useEffect(function () {
+    // 检测到 expand 状态变化，且不在拖拽和动画中
+    if (prevExpandRef.current !== isExpand && !isResizing && !isAnimating) {
+      setIsAnimating(true);
+      setTimeout(function () {
+        setIsAnimating(false);
+      }, 400);
+    }
+    prevExpandRef.current = isExpand;
+  }, [isExpand, isResizing, isAnimating]);
+
+  // 处理展开/折叠状态变化时的宽度动画和内容切换时机
   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 +262,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 +327,18 @@ 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
+        },
+        style: {
+          marginLeft: placement === 'right' ? 4 : 0,
+          marginRight: placement === 'left' ? 4 : 0
         },
         transition: {
           duration: 0.3,
@@ -381,33 +409,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.d.ts

@@ -1,4 +1,5 @@
 export declare const useStyles: (props?: {
+    backgroundColor?: string | undefined;
     showBorder: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
     body: import("antd-style").SerializedStyles;

package/es/DraggableSideNav/style.js

@@ -5,29 +5,29 @@ import { createStyles } from 'antd-style';
 // Layout constants (aligned with DraggablePanel)
 var LAYOUT = {
   offset: 16,
-  toggleLength: 40,
+  toggleLength: 54,
   toggleShort: 16
 };
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token,
-    stylish = _ref.stylish,
     prefixCls = _ref.prefixCls;
-  var showBorder = _ref2.showBorder;
+  var showBorder = _ref2.showBorder,
+    backgroundColor = _ref2.backgroundColor;
   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    "]))),
-    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),
+    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, backgroundColor || 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      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    "]))),
-    toggleLeft: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      inset-inline-end: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-radius: 0 4px 4px 0; /* \u5DE6\u4FA7\u9762\u677F\uFF0Chandle \u5728\u53F3\u8FB9\uFF0C\u53F3\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2),
-    toggleRight: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      inset-inline-start: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-radius: 4px 0 0 4px; /* \u53F3\u4FA7\u9762\u677F\uFF0Chandle \u5728\u5DE6\u8FB9\uFF0C\u5DE6\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2),
-    toggleRoot: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      pointer-events: none;\n      position: absolute;\n\n      /* Smooth transitions for all states */\n      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n      &:has(> div) {\n        pointer-events: all;\n      }\n\n      > div {\n        ", ";\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        color: ", ";\n\n        /* Enhanced transitions with backdrop blur */\n        transition:\n          color 0.2s ", ",\n          transform 0.2s ", ",\n          box-shadow 0.2s ", ";\n\n        backdrop-filter: blur(8px);\n\n        &:hover {\n          color: ", ";\n          box-shadow:\n            0 2px 8px rgba(0, 0, 0, 8%),\n            0 0 0 1px ", ";\n        }\n\n        &:active {\n          transform: scale(0.95);\n          color: ", ";\n        }\n      }\n    "])), stylish.variantFilled, token.colorTextTertiary, token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorTextSecondary, token.colorBorderSecondary, token.colorText)
+    toggleLeft: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      inset-inline-end: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-inline-start-width: 0;\n        border-radius: 0 ", "px ", "px 0;\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2, token.borderRadiusLG, token.borderRadiusLG),
+    toggleRight: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      inset-inline-start: -", "px;\n      width: ", "px;\n      height: 100%;\n\n      > div {\n        inset-block-start: 50%;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        border-inline-end-width: 0;\n        border-radius: ", "px 0 0 ", "px; /* \u53F3\u4FA7\u9762\u677F\uFF0Chandle \u5728\u5DE6\u8FB9\uFF0C\u5DE6\u4FA7\u5706\u89D2 */\n      }\n    "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleLength / 2, token.borderRadiusLG, token.borderRadiusLG),
+    toggleRoot: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      pointer-events: none;\n      position: absolute;\n      z-index: 50;\n\n      /* Smooth transitions for all states */\n      transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n      &:has(> div) {\n        pointer-events: all;\n      }\n\n      > div {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        border: 1px solid ", ";\n\n        color: ", ";\n\n        background: ", ";\n        backdrop-filter: blur(8px);\n\n        /* Enhanced transitions with backdrop blur */\n        transition:\n          color 0.2s ", ",\n          transform 0.2s ", ",\n          box-shadow 0.2s ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          transform: scale(0.95);\n          color: ", ";\n        }\n      }\n    "])), token.colorBorder, token.colorTextTertiary, backgroundColor || token.colorBgLayout, token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorTextSecondary, token.colorText)
   };
 });

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
@@ -33,11 +34,12 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
          */
         header?: boolean;
     };
+    backgroundColor?: string;
     /**
      * 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 +52,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 +89,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 +130,6 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
      * @default false
      */
     showHandleWhenCollapsed?: boolean;
-    /**
-     * Current size (controlled)
-     */
-    size?: Partial<Size>;
     /**
      * Custom styles
      */
@@ -138,4 +141,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.2",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",