@lobehub/ui 2.13.8 → 2.14.0

package/es/Avatar/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref) {
     filled: stylish.variantFilledWithoutHover,
     loading: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      color: #fff;\n      background: ", ";\n    "])), token.colorBgMask),
     outlined: stylish.variantOutlinedWithoutHover,
-    root: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: transparent;\n      &.", "-avatar {\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: none;\n\n        .", "-avatar-string {\n          transform: none !important;\n\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 100%;\n          height: 100%;\n          padding: 0;\n\n          font-size: inherit;\n          font-weight: bolder;\n          line-height: 1;\n          color: inherit;\n        }\n      }\n    "])), prefixCls, prefixCls),
+    root: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex: none;\n      background: transparent;\n      &.", "-avatar {\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: none;\n\n        .", "-avatar-string {\n          transform: none !important;\n\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 100%;\n          height: 100%;\n          padding: 0;\n\n          font-size: inherit;\n          font-weight: bolder;\n          line-height: 1;\n          color: inherit;\n        }\n      }\n    "])), prefixCls, prefixCls),
     shadow: stylish.shadow
   };
 });

package/es/DraggablePanel/DraggablePanel.js

@@ -49,6 +49,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
     resize = _ref.resize,
     style = _ref.style,
+    _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
+    _ref$showHandleHighli = _ref.showHandleHighlight,
+    showHandleHighlight = _ref$showHandleHighli === void 0 ? false : _ref$showHandleHighli,
     _ref$showHandleWideAr = _ref.showHandleWideArea,
     showHandleWideArea = _ref$showHandleWideAr === void 0 ? DEFAULT_SHOW_HANDLE_WIDE_AREA : _ref$showHandleWideAr,
     size = _ref.size,
@@ -85,6 +89,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   }, [direction, placement]);
   var _useStyles = useStyles({
       headerHeight: headerHeight,
+      showBorder: showBorder,
       showHandleWideArea: showHandleWideArea
     }),
     styles = _useStyles.styles,
@@ -307,9 +312,9 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var inner = /*#__PURE__*/_jsx(Resizable, _objectSpread(_objectSpread({}, sizeProps), {}, {
     className: cx(styles.panel, classNames === null || classNames === void 0 ? void 0 : classNames.content),
     enable: canResizing ? resizing : undefined,
-    handleClasses: canResizing ? _defineProperty({}, reversePlacement(internalPlacement), handleVariants({
+    handleClasses: canResizing ? _defineProperty({}, reversePlacement(internalPlacement), cx(handleVariants({
       placement: reversePlacement(internalPlacement)
-    })) : {},
+    }), showHandleHighlight && styles.handleHighlight)) : {},
     onResize: handleResize,
     onResizeStart: handleResizeStart,
     onResizeStop: handleResizeStop,

package/es/DraggablePanel/style.d.ts

@@ -1,5 +1,6 @@
 export declare const useStyles: (props?: {
     headerHeight: number;
+    showBorder: boolean;
     showHandleWideArea: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
     fixed: import("antd-style").SerializedStyles;
@@ -12,6 +13,7 @@ export declare const useStyles: (props?: {
     toggleRight: string;
     toggleRoot: string;
     toggleTop: string;
+    handleHighlight: import("antd-style").SerializedStyles;
     handleBottom: string;
     handleLeft: string;
     handleRight: string;

package/es/DraggablePanel/style.js

@@ -1,5 +1,5 @@
 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 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; }
@@ -19,15 +19,16 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     token = _ref.token,
     stylish = _ref.stylish;
   var headerHeight = _ref2.headerHeight,
+    showBorder = _ref2.showBorder,
     showHandleWideArea = _ref2.showHandleWideArea;
   var prefix = "".concat(prefixCls, "-draggable-panel");
 
   // Base styles
   var borderStyles = {
-    borderBottom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        border-block-end-width: 1px;\n      "]))),
-    borderLeft: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        border-inline-start-width: 1px;\n      "]))),
-    borderRight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        border-inline-end-width: 1px;\n      "]))),
-    borderTop: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        border-block-start-width: 1px;\n      "])))
+    borderBottom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        border-block-end-width: ", ";\n      "])), showBorder ? '1px' : '0'),
+    borderLeft: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        border-inline-start-width: ", ";\n      "])), showBorder ? '1px' : '0'),
+    borderRight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        border-inline-end-width: ", ";\n      "])), showBorder ? '1px' : '0'),
+    borderTop: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        border-block-start-width: ", ";\n      "])), showBorder ? '1px' : '0')
   };
 
   // Position styles
@@ -40,32 +41,35 @@ 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\n      &:hover,\n      &:active {\n        &::before {\n          background: ", " !important;\n        }\n      }\n    "])), token.motionEaseOut, token.colorPrimary);
+  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 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(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          &::before {\n            inset-block-end: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])))),
-    handleLeft: cx("".concat(prefix, "-left-handle"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          &::before {\n            inset-inline-start: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])))),
-    handleRight: cx("".concat(prefix, "-right-handle"), css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          &::before {\n            inset-inline-end: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])))),
+    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        "])))),
+    handleLeft: cx("".concat(prefix, "-left-handle"), css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          &::before {\n            inset-inline-start: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])))),
+    handleRight: cx("".concat(prefix, "-right-handle"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          &::before {\n            inset-inline-end: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])))),
     handleRoot: handleBaseStyle,
-    handleTop: cx("".concat(prefix, "-top-handle"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          &::before {\n            inset-block-start: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "]))))
+    handleTop: cx("".concat(prefix, "-top-handle"), css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          &::before {\n            inset-block-start: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "]))))
   };
 
   // Toggle styles
-  var toggleBaseStyle = cx("".concat(prefix, "-toggle"), css(_templateObject15 || (_templateObject15 = _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: 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 toggleStyles = {
-    toggleBottom: cx("".concat(prefix, "-toggle-bottom"), css(_templateObject16 || (_templateObject16 = _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(_templateObject17 || (_templateObject17 = _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(_templateObject18 || (_templateObject18 = _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: -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)),
     toggleRoot: toggleBaseStyle,
-    toggleTop: cx("".concat(prefix, "-toggle-top"), css(_templateObject19 || (_templateObject19 = _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: -20px;\n            border-radius: 4px 4px 0 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort))
   };
 
   // Additional component styles
   var componentStyles = {
-    fixed: css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n        position: relative;\n      "]))),
-    fullscreen: css(_templateObject21 || (_templateObject21 = _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(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut),
-    panel: cx("".concat(prefix, "-fixed"), css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          transition: all 0.2s ", ";\n        "])), token.motionEaseOut)),
-    root: cx(prefix, css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n          flex-shrink: 0;\n          border: 0 solid ", ";\n\n          &:hover {\n            > .", "-toggle {\n              opacity: 1;\n            }\n          }\n        "])), token.colorBorderSecondary, prefix))
+    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)),
+    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), toggleStyles), componentStyles);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, borderStyles), floatPositions), handleStyles), {}, {
+    handleHighlight: handleHighlightStyle
+  }, toggleStyles), componentStyles);
 });

package/es/DraggablePanel/type.d.ts

@@ -26,6 +26,12 @@ export interface DraggablePanelProps extends DivProps {
     pin?: boolean;
     placement: PlacementType;
     resize?: RndProps['enableResizing'];
+    /**
+     * Whether to show border
+     * @default true
+     */
+    showBorder?: boolean;
+    showHandleHighlight?: boolean;
     showHandleWhenCollapsed?: boolean;
     showHandleWideArea?: boolean;
     size?: Partial<Size>;

package/es/DraggableSideNav/DraggableSideNav.d.ts

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

package/es/DraggableSideNav/DraggableSideNav.js

@@ -0,0 +1,420 @@
+'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"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { useHover } from 'ahooks';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Resizable } from 're-resizable';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+import Icon from "../Icon";
+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_EXPANDED_WIDTH = 280;
+
+// Animation variants generator based on fade and blur settings
+var getAnimationVariants = function getAnimationVariants(fade, blur) {
+  var enterProps = {
+    transition: {
+      duration: 0.3,
+      ease: [0.22, 1, 0.36, 1]
+    }
+  };
+  var exitProps = {
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 1, 1]
+    }
+  };
+  if (fade) {
+    enterProps.opacity = 1;
+    exitProps.opacity = 0;
+  }
+  if (blur) {
+    enterProps.filter = 'blur(0px)';
+    exitProps.filter = 'blur(4px)';
+  }
+  return {
+    enter: enterProps,
+    exit: exitProps
+  };
+};
+
+// Wrapper component for content animation
+var AnimationWrapper = /*#__PURE__*/memo(function (_ref) {
+  var blur = _ref.blur,
+    children = _ref.children,
+    collapsed = _ref.collapsed,
+    enabled = _ref.enabled,
+    fade = _ref.fade,
+    id = _ref.id;
+  if (!enabled) return children;
+  var variants = getAnimationVariants(fade, blur);
+  return /*#__PURE__*/_jsx(AnimatePresence, {
+    initial: false,
+    mode: "wait",
+    children: /*#__PURE__*/_jsx(motion.div, {
+      animate: "enter",
+      exit: "exit",
+      initial: "exit",
+      variants: variants,
+      children: children
+    }, "".concat(id, "-").concat(collapsed ? 'collapsed' : 'expanded'))
+  });
+});
+AnimationWrapper.displayName = 'AnimationWrapper';
+var DraggableSideNav = /*#__PURE__*/memo(function (_ref2) {
+  var _animation$blur, _animation$fade, _animation$blur2, _animation$fade2, _animation$blur3, _animation$fade3;
+  var animation = _ref2.animation,
+    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,
+    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,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'left' : _ref2$placement,
+    _ref2$resizable = _ref2.resizable,
+    resizable = _ref2$resizable === void 0 ? true : _ref2$resizable,
+    _ref2$showBorder = _ref2.showBorder,
+    showBorder = _ref2$showBorder === void 0 ? true : _ref2$showBorder,
+    _ref2$showHandle = _ref2.showHandle,
+    showHandle = _ref2$showHandle === void 0 ? true : _ref2$showHandle,
+    _ref2$showHandleWhenC = _ref2.showHandleWhenCollapsed,
+    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,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles({
+      showBorder: showBorder
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var ref = useRef(null);
+  var isHovering = useHover(ref);
+  var _useControlledState = useControlledState(defaultCollapsed, {
+      onChange: onCollapsedChange,
+      value: collapsed
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    isCollapsed = _useControlledState2[0],
+    setIsCollapsed = _useControlledState2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAnimating = _useState4[0],
+    setIsAnimating = _useState4[1];
+
+  // 内部宽度状态，用于平滑动画
+  var _useState5 = useState(isCollapsed ? minWidth : (defaultSize === null || defaultSize === void 0 ? void 0 : defaultSize.width) || DEFAULT_EXPANDED_WIDTH),
+    _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),
+    _useState8 = _slicedToArray(_useState7, 2),
+    expandedWidth = _useState8[0],
+    setExpandedWidth = _useState8[1];
+
+  // 用于渲染的 collapsed 状态 - 延迟切换以匹配动画时机
+  var _useState9 = useState(isCollapsed),
+    _useState10 = _slicedToArray(_useState9, 2),
+    renderCollapsed = _useState10[0],
+    setRenderCollapsed = _useState10[1];
+
+  // 计算折叠阈值：展开最小宽度和折叠宽度的中间值
+  var collapseThreshold = useMemo(function () {
+    return minWidth + (expandedWidth - minWidth) / 3;
+  }, [minWidth, expandedWidth]);
+
+  // Toggle collapse state with smooth animation
+  var toggleCollapse = function toggleCollapse() {
+    setIsAnimating(true);
+    setIsCollapsed(!isCollapsed);
+
+    // 动画完成后重置状态 - 与宽度动画时长一致
+    setTimeout(function () {
+      setIsAnimating(false);
+    }, 400);
+  };
+
+  // 处理折叠状态变化时的宽度动画和内容切换时机
+  useEffect(function () {
+    if (isAnimating) {
+      // 使用 requestAnimationFrame 确保动画平滑
+      requestAnimationFrame(function () {
+        if (isCollapsed) {
+          setInternalWidth(minWidth);
+          // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）
+          setTimeout(function () {
+            setRenderCollapsed(true);
+          }, 300);
+        } else {
+          // 展开动画：立即切换内容（先切换内容，再开始宽度动画）
+          setRenderCollapsed(false);
+          setInternalWidth(expandedWidth);
+        }
+      });
+    }
+  }, [isCollapsed, isAnimating, minWidth, expandedWidth]);
+
+  // 同步非动画期间的 renderCollapsed 状态（如拖拽）
+  useEffect(function () {
+    if (!isAnimating && !isResizing) {
+      setRenderCollapsed(isCollapsed);
+    }
+  }, [isCollapsed, isAnimating, isResizing]);
+
+  // 处理外部 size prop 变化
+  useEffect(function () {
+    if (size !== null && size !== void 0 && size.width && !isResizing && !isAnimating) {
+      var width = typeof size.width === 'string' ? parseInt(size.width) : size.width;
+      setInternalWidth(width);
+      if (!isCollapsed) {
+        setExpandedWidth(width);
+      }
+    }
+  }, [size === null || size === void 0 ? void 0 : size.width, isResizing, isAnimating, isCollapsed]);
+
+  // 计算当前的 children（支持函数和静态值）- 使用 renderCollapsed 而不是 isCollapsed
+  var currentChildren = useMemo(function () {
+    return typeof children === 'function' ? children(renderCollapsed) : children;
+  }, [children, renderCollapsed]);
+
+  // 计算当前的 header（支持函数和静态值）- 使用 renderCollapsed 而不是 isCollapsed
+  var currentHeader = useMemo(function () {
+    return typeof header === 'function' ? header(renderCollapsed) : header;
+  }, [header, renderCollapsed]);
+
+  // 计算当前的 footer（支持函数和静态值）- 使用 renderCollapsed 而不是 isCollapsed
+  var currentFooter = useMemo(function () {
+    return typeof footer === 'function' ? footer(renderCollapsed) : footer;
+  }, [footer, renderCollapsed]);
+
+  // 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
+    });
+  };
+  var handleResizeStart = function handleResizeStart() {
+    setIsResizing(true);
+  };
+  var handleResizeStop = function handleResizeStop(_, _direction, reference_, delta) {
+    setIsResizing(false);
+    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) {
+      // 展开状态下正常拖拽，记住宽度
+      setExpandedWidth(currentWidth);
+      setInternalWidth(currentWidth);
+    }
+    onSizeChange === null || onSizeChange === void 0 || onSizeChange(delta, {
+      height: reference_.style.height,
+      width: reference_.style.width
+    });
+  };
+
+  // Arrow icon based on placement and collapse 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, {
+    animate: {
+      opacity: isCollapsed && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,
+      scale: isHovering ? 1.05 : 1
+    },
+    className: cx(styles.toggleRoot, placement === 'left' ? styles.toggleLeft : styles.toggleRight),
+    style: {
+      display: 'flex'
+    },
+    transition: {
+      duration: 0.25,
+      ease: [0.22, 1, 0.36, 1]
+    },
+    children: /*#__PURE__*/_jsx(Center, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
+      onClick: toggleCollapse,
+      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
+        },
+        transition: {
+          duration: 0.3,
+          ease: [0.22, 1, 0.36, 1]
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: styles.handlerIcon,
+          icon: ArrowIcon,
+          size: 16
+        })
+      })
+    })
+  });
+
+  // Size configuration - 使用内部宽度状态
+  var sizeConfig = useMemo(function () {
+    return {
+      maxWidth: maxWidth,
+      minWidth: minWidth,
+      size: {
+        height: '100%',
+        width: internalWidth
+      }
+    };
+  }, [internalWidth, minWidth, maxWidth]);
+
+  // Resize enable configuration - 始终允许拖拽
+  var resizeEnable = useMemo(function () {
+    if (!resizable) {
+      return {
+        bottom: false,
+        bottomLeft: false,
+        bottomRight: false,
+        left: false,
+        right: false,
+        top: false,
+        topLeft: false,
+        topRight: false
+      };
+    }
+    return {
+      bottom: false,
+      bottomLeft: false,
+      bottomRight: false,
+      left: placement === 'right',
+      right: placement === 'left',
+      top: false,
+      topLeft: false,
+      topRight: false
+    };
+  }, [resizable, placement]);
+  return /*#__PURE__*/_jsx("aside", {
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(Resizable, _objectSpread(_objectSpread({}, sizeConfig), {}, {
+      className: cx(styles.container, classNames === null || classNames === void 0 ? void 0 : classNames.container, className),
+      enable: resizeEnable,
+      handleClasses: _defineProperty({}, placement === 'left' ? 'right' : 'left', cx(styles.resizeHandle, showHandleHighlight && styles.resizeHandleHighlight, placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight)),
+      onResize: handleResize,
+      onResizeStart: handleResizeStart,
+      onResizeStop: handleResizeStop,
+      style: _objectSpread(_objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container), rest.style), {}, {
+        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画
+        transition: isResizing ? 'none' : isAnimating ? 'width 0.4s cubic-bezier(0.22, 1, 0.36, 1)' : 'none'
+      }),
+      children: [handle, /*#__PURE__*/_jsxs(Flexbox, {
+        className: cx(styles.contentContainer, styles.menuOverride, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+        style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
+        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,
+            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,
+            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,
+            id: "footer",
+            children: currentFooter
+          })
+        })]
+      })]
+    }))
+  });
+});
+DraggableSideNav.displayName = 'DraggableSideNav';
+export default DraggableSideNav;

package/es/DraggableSideNav/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DraggableSideNav';
+export type * from './type';

package/es/DraggableSideNav/index.js

@@ -0,0 +1 @@
+export { default } from "./DraggableSideNav";

package/es/DraggableSideNav/style.d.ts

@@ -0,0 +1,18 @@
+export declare const useStyles: (props?: {
+    showBorder: boolean;
+} | undefined) => import("antd-style").ReturnStyles<{
+    body: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    contentContainer: import("antd-style").SerializedStyles;
+    footer: import("antd-style").SerializedStyles;
+    handlerIcon: import("antd-style").SerializedStyles;
+    header: import("antd-style").SerializedStyles;
+    menuOverride: import("antd-style").SerializedStyles;
+    resizeHandle: import("antd-style").SerializedStyles;
+    resizeHandleHighlight: import("antd-style").SerializedStyles;
+    resizeHandleLeft: import("antd-style").SerializedStyles;
+    resizeHandleRight: import("antd-style").SerializedStyles;
+    toggleLeft: import("antd-style").SerializedStyles;
+    toggleRight: import("antd-style").SerializedStyles;
+    toggleRoot: import("antd-style").SerializedStyles;
+}>;

package/es/DraggableSideNav/style.js

@@ -0,0 +1,33 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+
+// Layout constants (aligned with DraggablePanel)
+var LAYOUT = {
+  offset: 16,
+  toggleLength: 40,
+  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;
+  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),
+    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    "]))),
+    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)
+  };
+});

package/es/DraggableSideNav/type.d.ts

@@ -0,0 +1,141 @@
+import type { NumberSize, Size } 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 }
+     */
+    animation?: {
+        /**
+         * Enable blur effect during transitions
+         * @default false
+         */
+        blur?: boolean;
+        /**
+         * Enable animation for body section
+         * @default false
+         */
+        body?: boolean;
+        /**
+         * Enable fade effect during transitions
+         * @default true
+         */
+        fade?: boolean;
+        /**
+         * Enable animation for footer section
+         * @default false
+         */
+        footer?: boolean;
+        /**
+         * Enable animation for header section
+         * @default false
+         */
+        header?: boolean;
+    };
+    /**
+     * Body content (main content area)
+     * Can be a static element or a function that receives collapsed state
+     */
+    children: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * Classnames for internal components
+     */
+    classNames?: {
+        body?: string;
+        container?: string;
+        content?: string;
+        footer?: string;
+        handle?: string;
+        header?: string;
+    };
+    /**
+     * Whether the panel is collapsed (controlled)
+     */
+    collapsed?: boolean;
+    /**
+     * Whether the panel is collapsed by default
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Default width when expanded
+     */
+    defaultSize?: Partial<Size>;
+    /**
+     * Footer content
+     * Can be a static element or a function that receives collapsed state
+     */
+    footer?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * Header content
+     * Can be a static element or a function that receives collapsed state
+     */
+    header?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /**
+     * Maximum width
+     */
+    maxWidth?: number;
+    /**
+     * Minimum width (also the collapsed width)
+     * @default 64
+     */
+    minWidth?: number;
+    /**
+     * Callback when collapse state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Callback when menu item is selected
+     */
+    onSelect?: (key: string) => void;
+    /**
+     * Callback when size changes
+     */
+    onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * Callback when actively resizing
+     */
+    onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * Placement of the side nav
+     * @default 'left'
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Whether to enable resizing
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Whether to show border
+     * @default true
+     */
+    showBorder?: boolean;
+    /**
+     * Whether to show handle for toggling
+     * @default true
+     */
+    showHandle?: boolean;
+    showHandleHighlight?: boolean;
+    /**
+     * Whether to show handle when collapsed
+     * @default false
+     */
+    showHandleWhenCollapsed?: boolean;
+    /**
+     * Current size (controlled)
+     */
+    size?: Partial<Size>;
+    /**
+     * Custom styles
+     */
+    styles?: {
+        body?: CSSProperties;
+        container?: CSSProperties;
+        content?: CSSProperties;
+        footer?: CSSProperties;
+        handle?: CSSProperties;
+        header?: CSSProperties;
+    };
+}

package/es/DraggableSideNav/type.js

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

package/es/index.d.ts

@@ -14,6 +14,7 @@ export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DatePicker, type DatePickerProps } from './DatePicker';
 export { default as DownloadButton, type DownloadButtonProps } from './DownloadButton';
 export { default as DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, } from './DraggablePanel';
+export { default as DraggableSideNav, type DraggableSideNavProps } from './DraggableSideNav';
 export { default as Drawer, type DrawerProps } from './Drawer';
 export { default as Dropdown, type DropdownMenuItemType, type DropdownProps } from './Dropdown';
 export { default as EditableText, type EditableTextProps } from './EditableText';

package/es/index.js

@@ -14,6 +14,7 @@ export { default as CopyButton } from "./CopyButton";
 export { default as DatePicker } from "./DatePicker";
 export { default as DownloadButton } from "./DownloadButton";
 export { default as DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader } from "./DraggablePanel";
+export { default as DraggableSideNav } from "./DraggableSideNav";
 export { default as Drawer } from "./Drawer";
 export { default as Dropdown } from "./Dropdown";
 export { default as EditableText } from "./EditableText";

package/package.json

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