@lobehub/ui 5.6.2 → 5.6.4

package/es/DraggablePanel/style.mjs

@@ -1,6 +1,5 @@
 import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
-
 //#region src/DraggablePanel/style.ts
 const LAYOUT = {
 	offset: 16,
@@ -8,98 +7,98 @@ const LAYOUT = {
 	toggleShort: 16
 };
 const prefix = `ant-draggable-panel`;
-const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
 	const borderStyles = {
-		borderBottom: css$1`
-      border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
+		borderBottom: css`
+      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
     `,
-		borderBottomNone: css$1`
+		borderBottomNone: css`
       border-block-end-width: 0;
     `,
-		borderLeft: css$1`
-      border-inline-start: 1px solid ${cssVar$1.colorBorderSecondary};
+		borderLeft: css`
+      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};
     `,
-		borderLeftNone: css$1`
+		borderLeftNone: css`
       border-inline-start-width: 0;
     `,
-		borderRight: css$1`
-      border-inline-end: 1px solid ${cssVar$1.colorBorderSecondary};
+		borderRight: css`
+      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
     `,
-		borderRightNone: css$1`
+		borderRightNone: css`
       border-inline-end-width: 0;
     `,
-		borderTop: css$1`
-      border-block-start: 1px solid ${cssVar$1.colorBorderSecondary};
+		borderTop: css`
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
     `,
-		borderTopNone: css$1`
+		borderTopNone: css`
       border-block-start-width: 0;
     `
 	};
-	const float = css$1`
+	const float = css`
     position: absolute;
     z-index: 200;
   `;
 	const floatPositions = {
-		bottomFloat: cx(float, css$1`
+		bottomFloat: cx(float, css`
         inset-block-end: 0;
         inset-inline: 0 0;
         width: 100%;
       `),
-		leftFloat: cx(float, css$1`
+		leftFloat: cx(float, css`
         inset-block: var(--draggable-panel-header-height, 0) 0;
         inset-inline-start: 0;
         height: calc(100% - var(--draggable-panel-header-height, 0px));
       `),
-		rightFloat: cx(float, css$1`
+		rightFloat: cx(float, css`
         inset-block: var(--draggable-panel-header-height, 0) 0;
         inset-inline-end: 0;
         height: calc(100% - var(--draggable-panel-header-height, 0px));
       `),
-		topFloat: cx(float, css$1`
+		topFloat: cx(float, css`
         inset-block-start: var(--draggable-panel-header-height, 0);
         inset-inline: 0 0;
         width: 100%;
       `)
 	};
-	const handleBaseStyle = css$1`
+	const handleBaseStyle = css`
     position: relative;
 
     &::before {
       content: '';
       position: absolute;
-      transition: all 0.2s ${cssVar$1.motionEaseOut};
+      transition: all 0.2s ${cssVar.motionEaseOut};
     }
   `;
-	const handleHighlightStyle = css$1`
+	const handleHighlightStyle = css`
     &:hover {
       &::before {
-        background: ${cssVar$1.colorPrimaryBorder};
-        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar$1.colorPrimary} 25%, transparent);
+        background: ${cssVar.colorPrimaryBorder};
+        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);
       }
     }
 
     &:active {
       &::before {
-        background: ${cssVar$1.colorPrimary} !important;
+        background: ${cssVar.colorPrimary} !important;
       }
     }
   `;
 	const handleStyles = {
-		handleBottom: cx(`${prefix}-bottom-handle`, css$1`
+		handleBottom: cx(`${prefix}-bottom-handle`, css`
         &::before {
           inset-block-end: 50%;
           width: 100%;
           height: 2px;
         }
       `),
-		handleLeft: cx(`${prefix}-left-handle`, css$1`
+		handleLeft: cx(`${prefix}-left-handle`, css`
         &::before {
           inset-inline-start: 50%;
           width: 2px;
           height: 100%;
         }
       `),
-		handleRight: cx(`${prefix}-right-handle`, css$1`
+		handleRight: cx(`${prefix}-right-handle`, css`
         &::before {
           inset-inline-end: 50%;
           width: 2px;
@@ -107,7 +106,7 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
         }
       `),
 		handleRoot: handleBaseStyle,
-		handleTop: cx(`${prefix}-top-handle`, css$1`
+		handleTop: cx(`${prefix}-top-handle`, css`
         &::before {
           inset-block-start: 50%;
           width: 100%;
@@ -115,11 +114,11 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
         }
       `)
 	};
-	const toggleRoot = cx(`${prefix}-toggle`, css$1`
+	const toggleRoot = cx(`${prefix}-toggle`, css`
       position: absolute;
       z-index: 50;
       opacity: 0;
-      transition: all 0.2s ${cssVar$1.motionEaseOut};
+      transition: all 0.2s ${cssVar.motionEaseOut};
 
       &:hover,
       &:active {
@@ -132,32 +131,32 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 
         position: absolute;
 
-        border: 1px solid ${cssVar$1.colorBorder};
+        border: 1px solid ${cssVar.colorBorder};
 
-        color: ${cssVar$1.colorTextTertiary};
+        color: ${cssVar.colorTextTertiary};
 
-        background: var(--draggable-panel-bg, ${cssVar$1.colorBgLayout});
+        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});
         backdrop-filter: blur(8px);
 
-        transition: all 0.2s ${cssVar$1.motionEaseOut};
+        transition: all 0.2s ${cssVar.motionEaseOut};
 
         &:hover {
-          color: ${cssVar$1.colorTextSecondary};
+          color: ${cssVar.colorTextSecondary};
         }
 
         &:active {
-          color: ${cssVar$1.colorText};
+          color: ${cssVar.colorText};
         }
       }
     `);
-	const toggleRootWithWideArea = css$1`
+	const toggleRootWithWideArea = css`
     pointer-events: all;
   `;
-	const toggleRootWithoutWideArea = css$1`
+	const toggleRootWithoutWideArea = css`
     pointer-events: none;
   `;
 	const toggleStyles = {
-		toggleBottom: cx(`${prefix}-toggle-bottom`, css$1`
+		toggleBottom: cx(`${prefix}-toggle-bottom`, css`
         inset-block-end: -${LAYOUT.offset}px;
         width: 100%;
         height: ${LAYOUT.toggleShort}px;
@@ -169,10 +168,10 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
           height: ${LAYOUT.toggleShort}px;
           margin-inline-start: -27px;
           border-block-start-width: 0;
-          border-radius: 0 0 ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG};
+          border-radius: 0 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};
         }
       `),
-		toggleLeft: cx(`${prefix}-toggle-left`, css$1`
+		toggleLeft: cx(`${prefix}-toggle-left`, css`
         inset-inline-start: -${LAYOUT.offset}px;
         width: ${LAYOUT.toggleShort}px;
         height: 100%;
@@ -184,10 +183,10 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
           height: ${LAYOUT.toggleLength}px;
           margin-block-start: -27px;
           border-inline-end-width: 0;
-          border-radius: ${cssVar$1.borderRadiusLG} 0 0 ${cssVar$1.borderRadiusLG};
+          border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};
         }
       `),
-		toggleRight: cx(`${prefix}-toggle-right`, css$1`
+		toggleRight: cx(`${prefix}-toggle-right`, css`
         inset-inline-end: -${LAYOUT.offset}px;
         width: ${LAYOUT.toggleShort}px;
         height: 100%;
@@ -199,13 +198,13 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
           height: ${LAYOUT.toggleLength}px;
           margin-block-start: -27px;
           border-inline-start-width: 0;
-          border-radius: 0 ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG} 0;
+          border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;
         }
       `),
 		toggleRoot,
 		toggleRootWithWideArea,
 		toggleRootWithoutWideArea,
-		toggleTop: cx(`${prefix}-toggle-top`, css$1`
+		toggleTop: cx(`${prefix}-toggle-top`, css`
         inset-block-start: -${LAYOUT.offset}px;
         width: 100%;
         height: ${LAYOUT.toggleShort}px;
@@ -217,15 +216,15 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
           height: ${LAYOUT.toggleShort}px;
           margin-inline-start: -27px;
           border-block-end-width: 0;
-          border-radius: ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG} 0 0;
+          border-radius: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0 0;
         }
       `)
 	};
 	const componentStyles = {
-		fixed: css$1`
+		fixed: css`
       position: relative;
     `,
-		fullscreen: css$1`
+		fullscreen: css`
       position: absolute;
       inset-block: var(--draggable-panel-header-height, 0) 0;
       inset-inline: 0;
@@ -233,17 +232,17 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
       width: 100%;
       height: calc(100% - var(--draggable-panel-header-height, 0px));
 
-      background: ${cssVar$1.colorBgContainer};
+      background: ${cssVar.colorBgContainer};
     `,
-		handlerIcon: css$1`
-      transition: all 0.2s ${cssVar$1.motionEaseOut};
+		handlerIcon: css`
+      transition: all 0.2s ${cssVar.motionEaseOut};
     `,
-		panel: cx(`${prefix}-fixed`, css$1`
+		panel: cx(`${prefix}-fixed`, css`
         overflow: hidden;
-        background: var(--draggable-panel-bg, ${cssVar$1.colorBgLayout});
-        transition: all 0.2s ${cssVar$1.motionEaseOut};
+        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});
+        transition: all 0.2s ${cssVar.motionEaseOut};
       `),
-		root: cx(prefix, css$1`
+		root: cx(prefix, css`
         flex-shrink: 0;
 
         &:hover {
@@ -388,7 +387,7 @@ const toggleVariants = cva(styles.toggleRoot, {
 		}
 	}
 });
-
 //#endregion
 export { handleVariants, panelVariants, styles, toggleVariants };
+
 //# sourceMappingURL=style.mjs.map

package/es/DraggablePanel/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\n// Layout constants\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nconst prefix = `${prefixCls}-draggable-panel`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Base styles - border styles split by showBorder\n  const borderStyles = {\n    borderBottom: css`\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderBottomNone: css`\n      border-block-end-width: 0;\n    `,\n    borderLeft: css`\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderLeftNone: css`\n      border-inline-start-width: 0;\n    `,\n    borderRight: css`\n      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderRightNone: css`\n      border-inline-end-width: 0;\n    `,\n    borderTop: css`\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderTopNone: css`\n      border-block-start-width: 0;\n    `,\n  };\n\n  // Position styles\n  const float = css`\n    position: absolute;\n    z-index: 200;\n  `;\n\n  const floatPositions = {\n    bottomFloat: cx(\n      float,\n      css`\n        inset-block-end: 0;\n        inset-inline: 0 0;\n        width: 100%;\n      `,\n    ),\n    leftFloat: cx(\n      float,\n      css`\n        inset-block: var(--draggable-panel-header-height, 0) 0;\n        inset-inline-start: 0;\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\n      `,\n    ),\n    rightFloat: cx(\n      float,\n      css`\n        inset-block: var(--draggable-panel-header-height, 0) 0;\n        inset-inline-end: 0;\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\n      `,\n    ),\n    topFloat: cx(\n      float,\n      css`\n        inset-block-start: var(--draggable-panel-header-height, 0);\n        inset-inline: 0 0;\n        width: 100%;\n      `,\n    ),\n  };\n\n  // Handle styles\n  const handleBaseStyle = css`\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    }\n  `;\n\n  const handleHighlightStyle = css`\n    &:hover {\n      &::before {\n        background: ${cssVar.colorPrimaryBorder};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::before {\n        background: ${cssVar.colorPrimary} !important;\n      }\n    }\n  `;\n\n  const handleStyles = {\n    handleBottom: cx(\n      `${prefix}-bottom-handle`,\n      css`\n        &::before {\n          inset-block-end: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      `,\n    ),\n    handleLeft: cx(\n      `${prefix}-left-handle`,\n      css`\n        &::before {\n          inset-inline-start: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      `,\n    ),\n    handleRight: cx(\n      `${prefix}-right-handle`,\n      css`\n        &::before {\n          inset-inline-end: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      `,\n    ),\n    handleRoot: handleBaseStyle,\n    handleTop: cx(\n      `${prefix}-top-handle`,\n      css`\n        &::before {\n          inset-block-start: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      `,\n    ),\n  };\n\n  // Toggle styles - base class with variant for showHandleWideArea\n  const toggleRoot = cx(\n    `${prefix}-toggle`,\n    css`\n      position: absolute;\n      z-index: 50;\n      opacity: 0;\n      transition: all 0.2s ${cssVar.motionEaseOut};\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 ${cssVar.colorBorder};\n\n        color: ${cssVar.colorTextTertiary};\n\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n        backdrop-filter: blur(8px);\n\n        transition: all 0.2s ${cssVar.motionEaseOut};\n\n        &:hover {\n          color: ${cssVar.colorTextSecondary};\n        }\n\n        &:active {\n          color: ${cssVar.colorText};\n        }\n      }\n    `,\n  );\n\n  const toggleRootWithWideArea = css`\n    pointer-events: all;\n  `;\n\n  const toggleRootWithoutWideArea = css`\n    pointer-events: none;\n  `;\n\n  const toggleStyles = {\n    toggleBottom: cx(\n      `${prefix}-toggle-bottom`,\n      css`\n        inset-block-end: -${LAYOUT.offset}px;\n        width: 100%;\n        height: ${LAYOUT.toggleShort}px;\n\n        > div {\n          inset-inline-start: 50%;\n\n          width: ${LAYOUT.toggleLength}px;\n          height: ${LAYOUT.toggleShort}px;\n          margin-inline-start: -27px;\n          border-block-start-width: 0;\n          border-radius: 0 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};\n        }\n      `,\n    ),\n    toggleLeft: cx(\n      `${prefix}-toggle-left`,\n      css`\n        inset-inline-start: -${LAYOUT.offset}px;\n        width: ${LAYOUT.toggleShort}px;\n        height: 100%;\n\n        > div {\n          inset-block-start: 50%;\n\n          width: ${LAYOUT.toggleShort}px;\n          height: ${LAYOUT.toggleLength}px;\n          margin-block-start: -27px;\n          border-inline-end-width: 0;\n          border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};\n        }\n      `,\n    ),\n    toggleRight: cx(\n      `${prefix}-toggle-right`,\n      css`\n        inset-inline-end: -${LAYOUT.offset}px;\n        width: ${LAYOUT.toggleShort}px;\n        height: 100%;\n\n        > div {\n          inset-block-start: 50%;\n\n          width: ${LAYOUT.toggleShort}px;\n          height: ${LAYOUT.toggleLength}px;\n          margin-block-start: -27px;\n          border-inline-start-width: 0;\n          border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n        }\n      `,\n    ),\n    toggleRoot,\n    toggleRootWithWideArea,\n    toggleRootWithoutWideArea,\n    toggleTop: cx(\n      `${prefix}-toggle-top`,\n      css`\n        inset-block-start: -${LAYOUT.offset}px;\n        width: 100%;\n        height: ${LAYOUT.toggleShort}px;\n\n        > div {\n          inset-inline-start: 50%;\n\n          width: ${LAYOUT.toggleLength}px;\n          height: ${LAYOUT.toggleShort}px;\n          margin-inline-start: -27px;\n          border-block-end-width: 0;\n          border-radius: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0 0;\n        }\n      `,\n    ),\n  };\n\n  // Additional component styles\n  const componentStyles = {\n    fixed: css`\n      position: relative;\n    `,\n    fullscreen: css`\n      position: absolute;\n      inset-block: var(--draggable-panel-header-height, 0) 0;\n      inset-inline: 0;\n\n      width: 100%;\n      height: calc(100% - var(--draggable-panel-header-height, 0px));\n\n      background: ${cssVar.colorBgContainer};\n    `,\n    handlerIcon: css`\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    `,\n    panel: cx(\n      `${prefix}-fixed`,\n      css`\n        overflow: hidden;\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n        transition: all 0.2s ${cssVar.motionEaseOut};\n      `,\n    ),\n    root: cx(\n      prefix,\n      css`\n        flex-shrink: 0;\n\n        &:hover {\n          > .${prefix}-toggle {\n            opacity: 1;\n          }\n        }\n      `,\n    ),\n  };\n\n  return {\n    ...borderStyles,\n    ...floatPositions,\n    ...handleStyles,\n    handleHighlight: handleHighlightStyle,\n    ...toggleStyles,\n    ...componentStyles,\n  };\n});\n\nexport const handleVariants = cva(styles.handleRoot, {\n  variants: {\n    placement: {\n      bottom: styles.handleBottom,\n      left: styles.handleLeft,\n      right: styles.handleRight,\n      top: styles.handleTop,\n    },\n  },\n});\n\nexport const panelVariants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.bottomFloat,\n      mode: 'float',\n      placement: 'bottom',\n    },\n    {\n      class: styles.topFloat,\n      mode: 'float',\n      placement: 'top',\n    },\n    {\n      class: styles.leftFloat,\n      mode: 'float',\n      placement: 'left',\n    },\n    {\n      class: styles.rightFloat,\n      mode: 'float',\n      placement: 'right',\n    },\n    // Border styles based on placement, isExpand, and showBorder\n    // Note: border is on the opposite side of placement\n    // placement 'top' -> borderBottom, placement 'right' -> borderLeft, etc.\n    {\n      class: styles.borderBottom,\n      isExpand: true,\n      placement: 'top',\n      showBorder: true,\n    },\n    {\n      class: styles.borderBottomNone,\n      isExpand: true,\n      placement: 'top',\n      showBorder: false,\n    },\n    {\n      class: styles.borderLeft,\n      isExpand: true,\n      placement: 'right',\n      showBorder: true,\n    },\n    {\n      class: styles.borderLeftNone,\n      isExpand: true,\n      placement: 'right',\n      showBorder: false,\n    },\n    {\n      class: styles.borderTop,\n      isExpand: true,\n      placement: 'bottom',\n      showBorder: true,\n    },\n    {\n      class: styles.borderTopNone,\n      isExpand: true,\n      placement: 'bottom',\n      showBorder: false,\n    },\n    {\n      class: styles.borderRight,\n      isExpand: true,\n      placement: 'left',\n      showBorder: true,\n    },\n    {\n      class: styles.borderRightNone,\n      isExpand: true,\n      placement: 'left',\n      showBorder: false,\n    },\n  ],\n  defaultVariants: {\n    isExpand: false,\n    mode: 'fixed',\n    placement: 'right',\n    showBorder: true,\n  },\n\n  variants: {\n    isExpand: {\n      false: null,\n      true: null,\n    },\n    mode: {\n      fixed: styles.fixed,\n      float: null,\n    },\n    placement: {\n      bottom: null,\n      left: null,\n      right: null,\n      top: null,\n    },\n    showBorder: {\n      false: null,\n      true: null,\n    },\n  },\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n  compoundVariants: [\n    {\n      class: styles.toggleRootWithWideArea,\n      showHandleWideArea: true,\n    },\n    {\n      class: styles.toggleRootWithoutWideArea,\n      showHandleWideArea: false,\n    },\n  ],\n  defaultVariants: {\n    showHandleWideArea: false,\n  },\n  variants: {\n    placement: {\n      bottom: styles.toggleTop,\n      left: styles.toggleRight,\n      right: styles.toggleLeft,\n      top: styles.toggleBottom,\n    },\n    showHandleWideArea: {\n      false: null,\n      true: null,\n    },\n  },\n});\n"],"mappings":"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AAW;GACZ;EACD;GACE,OAAO,OAAO;GACd,MAAM;GACN,WAAW;GACZ;EAID;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACF;CACD,iBAAiB;EACf,UAAU;EACV,MAAM;EACN,WAAW;EACX,YAAY;EACb;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,MAAM;GACJ,OAAO,OAAO;GACd,OAAO;GACR;EACD,WAAW;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,EACD;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,CACF;CACD,iBAAiB,EACf,oBAAoB,OACrB;CACD,UAAU;EACR,WAAW;GACT,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,OAAO,OAAO;GACd,KAAK,OAAO;GACb;EACD,oBAAoB;GAClB,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\n// Layout constants\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nconst prefix = `${prefixCls}-draggable-panel`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Base styles - border styles split by showBorder\n  const borderStyles = {\n    borderBottom: css`\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderBottomNone: css`\n      border-block-end-width: 0;\n    `,\n    borderLeft: css`\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderLeftNone: css`\n      border-inline-start-width: 0;\n    `,\n    borderRight: css`\n      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderRightNone: css`\n      border-inline-end-width: 0;\n    `,\n    borderTop: css`\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    borderTopNone: css`\n      border-block-start-width: 0;\n    `,\n  };\n\n  // Position styles\n  const float = css`\n    position: absolute;\n    z-index: 200;\n  `;\n\n  const floatPositions = {\n    bottomFloat: cx(\n      float,\n      css`\n        inset-block-end: 0;\n        inset-inline: 0 0;\n        width: 100%;\n      `,\n    ),\n    leftFloat: cx(\n      float,\n      css`\n        inset-block: var(--draggable-panel-header-height, 0) 0;\n        inset-inline-start: 0;\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\n      `,\n    ),\n    rightFloat: cx(\n      float,\n      css`\n        inset-block: var(--draggable-panel-header-height, 0) 0;\n        inset-inline-end: 0;\n        height: calc(100% - var(--draggable-panel-header-height, 0px));\n      `,\n    ),\n    topFloat: cx(\n      float,\n      css`\n        inset-block-start: var(--draggable-panel-header-height, 0);\n        inset-inline: 0 0;\n        width: 100%;\n      `,\n    ),\n  };\n\n  // Handle styles\n  const handleBaseStyle = css`\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    }\n  `;\n\n  const handleHighlightStyle = css`\n    &:hover {\n      &::before {\n        background: ${cssVar.colorPrimaryBorder};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::before {\n        background: ${cssVar.colorPrimary} !important;\n      }\n    }\n  `;\n\n  const handleStyles = {\n    handleBottom: cx(\n      `${prefix}-bottom-handle`,\n      css`\n        &::before {\n          inset-block-end: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      `,\n    ),\n    handleLeft: cx(\n      `${prefix}-left-handle`,\n      css`\n        &::before {\n          inset-inline-start: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      `,\n    ),\n    handleRight: cx(\n      `${prefix}-right-handle`,\n      css`\n        &::before {\n          inset-inline-end: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      `,\n    ),\n    handleRoot: handleBaseStyle,\n    handleTop: cx(\n      `${prefix}-top-handle`,\n      css`\n        &::before {\n          inset-block-start: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      `,\n    ),\n  };\n\n  // Toggle styles - base class with variant for showHandleWideArea\n  const toggleRoot = cx(\n    `${prefix}-toggle`,\n    css`\n      position: absolute;\n      z-index: 50;\n      opacity: 0;\n      transition: all 0.2s ${cssVar.motionEaseOut};\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 ${cssVar.colorBorder};\n\n        color: ${cssVar.colorTextTertiary};\n\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n        backdrop-filter: blur(8px);\n\n        transition: all 0.2s ${cssVar.motionEaseOut};\n\n        &:hover {\n          color: ${cssVar.colorTextSecondary};\n        }\n\n        &:active {\n          color: ${cssVar.colorText};\n        }\n      }\n    `,\n  );\n\n  const toggleRootWithWideArea = css`\n    pointer-events: all;\n  `;\n\n  const toggleRootWithoutWideArea = css`\n    pointer-events: none;\n  `;\n\n  const toggleStyles = {\n    toggleBottom: cx(\n      `${prefix}-toggle-bottom`,\n      css`\n        inset-block-end: -${LAYOUT.offset}px;\n        width: 100%;\n        height: ${LAYOUT.toggleShort}px;\n\n        > div {\n          inset-inline-start: 50%;\n\n          width: ${LAYOUT.toggleLength}px;\n          height: ${LAYOUT.toggleShort}px;\n          margin-inline-start: -27px;\n          border-block-start-width: 0;\n          border-radius: 0 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};\n        }\n      `,\n    ),\n    toggleLeft: cx(\n      `${prefix}-toggle-left`,\n      css`\n        inset-inline-start: -${LAYOUT.offset}px;\n        width: ${LAYOUT.toggleShort}px;\n        height: 100%;\n\n        > div {\n          inset-block-start: 50%;\n\n          width: ${LAYOUT.toggleShort}px;\n          height: ${LAYOUT.toggleLength}px;\n          margin-block-start: -27px;\n          border-inline-end-width: 0;\n          border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};\n        }\n      `,\n    ),\n    toggleRight: cx(\n      `${prefix}-toggle-right`,\n      css`\n        inset-inline-end: -${LAYOUT.offset}px;\n        width: ${LAYOUT.toggleShort}px;\n        height: 100%;\n\n        > div {\n          inset-block-start: 50%;\n\n          width: ${LAYOUT.toggleShort}px;\n          height: ${LAYOUT.toggleLength}px;\n          margin-block-start: -27px;\n          border-inline-start-width: 0;\n          border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n        }\n      `,\n    ),\n    toggleRoot,\n    toggleRootWithWideArea,\n    toggleRootWithoutWideArea,\n    toggleTop: cx(\n      `${prefix}-toggle-top`,\n      css`\n        inset-block-start: -${LAYOUT.offset}px;\n        width: 100%;\n        height: ${LAYOUT.toggleShort}px;\n\n        > div {\n          inset-inline-start: 50%;\n\n          width: ${LAYOUT.toggleLength}px;\n          height: ${LAYOUT.toggleShort}px;\n          margin-inline-start: -27px;\n          border-block-end-width: 0;\n          border-radius: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0 0;\n        }\n      `,\n    ),\n  };\n\n  // Additional component styles\n  const componentStyles = {\n    fixed: css`\n      position: relative;\n    `,\n    fullscreen: css`\n      position: absolute;\n      inset-block: var(--draggable-panel-header-height, 0) 0;\n      inset-inline: 0;\n\n      width: 100%;\n      height: calc(100% - var(--draggable-panel-header-height, 0px));\n\n      background: ${cssVar.colorBgContainer};\n    `,\n    handlerIcon: css`\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    `,\n    panel: cx(\n      `${prefix}-fixed`,\n      css`\n        overflow: hidden;\n        background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n        transition: all 0.2s ${cssVar.motionEaseOut};\n      `,\n    ),\n    root: cx(\n      prefix,\n      css`\n        flex-shrink: 0;\n\n        &:hover {\n          > .${prefix}-toggle {\n            opacity: 1;\n          }\n        }\n      `,\n    ),\n  };\n\n  return {\n    ...borderStyles,\n    ...floatPositions,\n    ...handleStyles,\n    handleHighlight: handleHighlightStyle,\n    ...toggleStyles,\n    ...componentStyles,\n  };\n});\n\nexport const handleVariants = cva(styles.handleRoot, {\n  variants: {\n    placement: {\n      bottom: styles.handleBottom,\n      left: styles.handleLeft,\n      right: styles.handleRight,\n      top: styles.handleTop,\n    },\n  },\n});\n\nexport const panelVariants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.bottomFloat,\n      mode: 'float',\n      placement: 'bottom',\n    },\n    {\n      class: styles.topFloat,\n      mode: 'float',\n      placement: 'top',\n    },\n    {\n      class: styles.leftFloat,\n      mode: 'float',\n      placement: 'left',\n    },\n    {\n      class: styles.rightFloat,\n      mode: 'float',\n      placement: 'right',\n    },\n    // Border styles based on placement, isExpand, and showBorder\n    // Note: border is on the opposite side of placement\n    // placement 'top' -> borderBottom, placement 'right' -> borderLeft, etc.\n    {\n      class: styles.borderBottom,\n      isExpand: true,\n      placement: 'top',\n      showBorder: true,\n    },\n    {\n      class: styles.borderBottomNone,\n      isExpand: true,\n      placement: 'top',\n      showBorder: false,\n    },\n    {\n      class: styles.borderLeft,\n      isExpand: true,\n      placement: 'right',\n      showBorder: true,\n    },\n    {\n      class: styles.borderLeftNone,\n      isExpand: true,\n      placement: 'right',\n      showBorder: false,\n    },\n    {\n      class: styles.borderTop,\n      isExpand: true,\n      placement: 'bottom',\n      showBorder: true,\n    },\n    {\n      class: styles.borderTopNone,\n      isExpand: true,\n      placement: 'bottom',\n      showBorder: false,\n    },\n    {\n      class: styles.borderRight,\n      isExpand: true,\n      placement: 'left',\n      showBorder: true,\n    },\n    {\n      class: styles.borderRightNone,\n      isExpand: true,\n      placement: 'left',\n      showBorder: false,\n    },\n  ],\n  defaultVariants: {\n    isExpand: false,\n    mode: 'fixed',\n    placement: 'right',\n    showBorder: true,\n  },\n\n  variants: {\n    isExpand: {\n      false: null,\n      true: null,\n    },\n    mode: {\n      fixed: styles.fixed,\n      float: null,\n    },\n    placement: {\n      bottom: null,\n      left: null,\n      right: null,\n      top: null,\n    },\n    showBorder: {\n      false: null,\n      true: null,\n    },\n  },\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n  compoundVariants: [\n    {\n      class: styles.toggleRootWithWideArea,\n      showHandleWideArea: true,\n    },\n    {\n      class: styles.toggleRootWithoutWideArea,\n      showHandleWideArea: false,\n    },\n  ],\n  defaultVariants: {\n    showHandleWideArea: false,\n  },\n  variants: {\n    placement: {\n      bottom: styles.toggleTop,\n      left: styles.toggleRight,\n      right: styles.toggleLeft,\n      top: styles.toggleBottom,\n    },\n    showHandleWideArea: {\n      false: null,\n      true: null,\n    },\n  },\n});\n"],"mappings":"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GACd,MAAM;GACN,WAAW;GACZ;EAID;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACF;CACD,iBAAiB;EACf,UAAU;EACV,MAAM;EACN,WAAW;EACX,YAAY;EACb;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,MAAM;GACJ,OAAO,OAAO;GACd,OAAO;GACR;EACD,WAAW;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,EACD;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,CACF;CACD,iBAAiB,EACf,oBAAoB,OACrB;CACD,UAAU;EACR,WAAW;GACT,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,OAAO,OAAO;GACd,KAAK,OAAO;GACb;EACD,oBAAoB;GAClB,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC"}

package/es/DraggablePanel/utils.mjs

@@ -7,7 +7,7 @@ const reversePlacement = (placement) => {
 		case "left": return "right";
 	}
 };
-
 //#endregion
 export { reversePlacement };
+
 //# sourceMappingURL=utils.mjs.map

package/es/DraggableSideNav/DraggableSideNav.d.mts

@@ -1,8 +1,8 @@
 import { DraggableSideNavProps } from "./type.mjs";
-import * as react40 from "react";
+import * as _$react from "react";
 
 //#region src/DraggableSideNav/DraggableSideNav.d.ts
-declare const DraggableSideNav: react40.NamedExoticComponent<DraggableSideNavProps>;
+declare const DraggableSideNav: _$react.NamedExoticComponent<DraggableSideNavProps>;
 //#endregion
 export { DraggableSideNav };
 //# sourceMappingURL=DraggableSideNav.d.mts.map

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -1,8 +1,7 @@
-'use client';
-
+"use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Center_default from "../Flex/Center.mjs";
-import Icon_default from "../Icon/Icon.mjs";
+import Center from "../Flex/Center.mjs";
+import Icon from "../Icon/Icon.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +10,6 @@ import useMergeState from "use-merge-value";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
-
 //#region src/DraggableSideNav/DraggableSideNav.tsx
 const DEFAULT_MIN_WIDTH = 64;
 const DEFAULT_EXPAND = true;
@@ -192,8 +190,8 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	const currentFooter = useMemo(() => {
 		return typeof footer === "function" ? footer(state.renderExpand) : footer;
 	}, [footer, state.renderExpand]);
-	const handleResize = useCallback((_, __, ref$1, delta) => {
-		const currentWidth = ref$1.offsetWidth;
+	const handleResize = useCallback((_, __, ref, delta) => {
+		const currentWidth = ref.offsetWidth;
 		dispatch({
 			payload: currentWidth,
 			type: "SET_WIDTH"
@@ -203,9 +201,9 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	const handleResizeStart = useCallback(() => {
 		dispatch({ type: "START_RESIZE" });
 	}, []);
-	const handleResizeStop = useCallback((_, __, ref$1, delta) => {
+	const handleResizeStop = useCallback((_, __, ref, delta) => {
 		dispatch({ type: "STOP_RESIZE" });
-		const currentWidth = ref$1.offsetWidth;
+		const currentWidth = ref.offsetWidth;
 		if (animationTimeoutRef.current) clearTimeout(animationTimeoutRef.current);
 		if (expandable) {
 			const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;
@@ -286,13 +284,13 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	const handle = useMemo(() => showHandle && expandable && /* @__PURE__ */ jsx("div", {
 		style: handleRootStyle,
 		className: cx(styles.toggleRoot, placement === "left" ? styles.toggleLeft : styles.toggleRight),
-		children: /* @__PURE__ */ jsx(Center_default, {
+		children: /* @__PURE__ */ jsx(Center, {
 			className: classNames?.handle,
 			style: handleCenterStyle,
 			onClick: toggleExpand,
 			children: /* @__PURE__ */ jsx("div", {
 				style: handleIconWrapperStyle,
-				children: /* @__PURE__ */ jsx(Icon_default, {
+				children: /* @__PURE__ */ jsx(Icon, {
 					className: styles.handlerIcon,
 					icon: ArrowIcon,
 					size: 16
@@ -432,8 +430,7 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	});
 });
 DraggableSideNav.displayName = "DraggableSideNav";
-var DraggableSideNav_default = DraggableSideNav;
-
 //#endregion
-export { DraggableSideNav_default as default };
+export { DraggableSideNav as default };
+
 //# sourceMappingURL=DraggableSideNav.mjs.map

package/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSideNav.mjs","names":["useControlledState","handleResize: ResizeCallback","ref","handleResizeStop: ResizeCallback","Center","Icon","Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            style={handleRootStyle}\n            className={cx(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n          >\n            <Center className={classNames?.handle} style={handleCenterStyle} onClick={toggleExpand}>\n              <div style={handleIconWrapperStyle}>\n                <Icon className={styles.handlerIcon} icon={ArrowIcon} size={16} />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        styles.toggleRoot,\n        styles.toggleLeft,\n        styles.toggleRight,\n        styles.handlerIcon,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n        cx,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: cx(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ),\n      }),\n      [placement, styles, showHandleHighlight, cx],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = useMemo(\n      () => cx(styles.container, classNames?.container, className),\n      [cx, styles.container, classNames?.container, className],\n    );\n\n    const contentClassName = useMemo(\n      () =>\n        cx(\n          showBorder ? styles.contentContainer : styles.contentContainerNoBorder,\n          styles.menuOverride,\n          classNames?.content,\n        ),\n      [\n        cx,\n        styles.contentContainer,\n        styles.contentContainerNoBorder,\n        styles.menuOverride,\n        classNames?.content,\n        showBorder,\n      ],\n    );\n\n    const headerClassName = useMemo(\n      () => cx(styles.header, classNames?.header),\n      [cx, styles.header, classNames?.header],\n    );\n\n    const bodyClassName = useMemo(\n      () => cx(styles.body, classNames?.body),\n      [cx, styles.body, classNames?.body],\n    );\n\n    const footerClassName = useMemo(\n      () => cx(styles.footer, classNames?.footer),\n      [cx, styles.footer, classNames?.footer],\n    );\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"DraggableSideNav.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            style={handleRootStyle}\n            className={cx(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n          >\n            <Center className={classNames?.handle} style={handleCenterStyle} onClick={toggleExpand}>\n              <div style={handleIconWrapperStyle}>\n                <Icon className={styles.handlerIcon} icon={ArrowIcon} size={16} />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        styles.toggleRoot,\n        styles.toggleLeft,\n        styles.toggleRight,\n        styles.handlerIcon,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n        cx,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: cx(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ),\n      }),\n      [placement, styles, showHandleHighlight, cx],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = useMemo(\n      () => cx(styles.container, classNames?.container, className),\n      [cx, styles.container, classNames?.container, className],\n    );\n\n    const contentClassName = useMemo(\n      () =>\n        cx(\n          showBorder ? styles.contentContainer : styles.contentContainerNoBorder,\n          styles.menuOverride,\n          classNames?.content,\n        ),\n      [\n        cx,\n        styles.contentContainer,\n        styles.contentContainerNoBorder,\n        styles.menuOverride,\n        classNames?.content,\n        showBorder,\n      ],\n    );\n\n    const headerClassName = useMemo(\n      () => cx(styles.header, classNames?.header),\n      [cx, styles.header, classNames?.header],\n    );\n\n    const bodyClassName = useMemo(\n      () => cx(styles.body, classNames?.body),\n      [cx, styles.body, classNames?.body],\n    );\n\n    const footerClassName = useMemo(\n      () => cx(styles.footer, classNames?.footer),\n      [cx, styles.footer, classNames?.footer],\n    );\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}

package/es/DraggableSideNav/index.mjs

@@ -1,3 +1,2 @@
-import DraggableSideNav_default from "./DraggableSideNav.mjs";
-
-export { DraggableSideNav_default as default };
+import DraggableSideNav from "./DraggableSideNav.mjs";
+export { DraggableSideNav as default };