@lobehub/ui 2.15.1 → 2.15.3

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", "defaultExpand", "defaultWidth", "expand", "expandable", "footer", "header", "maxWidth", "minWidth", "onExpandChange", "onWidthChange", "onWidthDragging", "placement", "resizable", "showBorder", "showHandle", "showHandleWhenCollapsed", "showHandleHighlight", "styles", "width"];
+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; }
@@ -113,10 +113,12 @@ 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,
+    backgroundColor = _ref2.backgroundColor,
     customStyles = _ref2.styles,
     width = _ref2.width,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles({
+      backgroundColor: backgroundColor,
       showBorder: showBorder
     }),
     styles = _useStyles.styles,
@@ -179,6 +181,21 @@ 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) {
@@ -207,12 +224,16 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
   }, [isExpand, isAnimating, isResizing]);
 
   // 处理外部 width prop 变化
+  // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定
   useEffect(function () {
     if (width !== undefined && !isResizing && !isAnimating) {
-      setInternalWidth(width);
+      // 更新展开宽度记录
+      setExpandedWidth(width);
+      // 根据当前状态设置实际宽度
       if (isExpand) {
-        setExpandedWidth(width);
+        setInternalWidth(width);
       }
+      // 如果是折叠状态，保持 minWidth，不改变 internalWidth
     }
   }, [width, isResizing, isAnimating, isExpand]);
 
@@ -319,6 +340,10 @@ var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
         animate: {
           rotate: isExpand ? 0 : 180
         },
+        style: {
+          marginLeft: placement === 'right' ? 4 : 0,
+          marginRight: placement === 'left' ? 4 : 0
+        },
         transition: {
           duration: 0.3,
           ease: [0.22, 1, 0.36, 1]

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      /* 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),
+    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: 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    "]))),
+    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

@@ -34,6 +34,7 @@ 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 expand state
@@ -141,7 +142,9 @@ export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSe
         header?: CSSProperties;
     };
     /**
-     * Current width (controlled)
+     * Expanded width (controlled)
+     * This represents the width when expanded, not the current displayed width
+     * The actual displayed width will be `width` when expanded, or `minWidth` when collapsed
      */
     width?: number;
 }

package/package.json

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