@lobehub/ui 4.33.4 → 4.34.0

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, ResizeCallback } from 're-resizable';\nimport { CSSProperties, memo, useCallback, useEffect, useMemo, useReducer, useRef } 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            className={cx(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n            style={handleRootStyle}\n          >\n            <Center className={classNames?.handle} onClick={toggleExpand} style={handleCenterStyle}>\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          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n          style={containerStyle}\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","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":";;;;;;;;;;;;;;;AAuBA,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AAGjC,MAAM,kBAAkB;CACtB,QAAQ;CACR,YAAY;CACZ,aAAa;CACb,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,UAAU;CACX;AAsBD,SAAS,eAAe,OAAqB,QAAqC;AAChF,SAAQ,OAAO,MAAf;EACE,KAAK,eACH,QAAO;GAAE,GAAG;GAAO,YAAY;GAAM;EAEvC,KAAK,cACH,QAAO;GAAE,GAAG;GAAO,YAAY;GAAO;EAExC,KAAK,kBACH,QAAO;GAAE,GAAG;GAAO,aAAa;GAAM;EAExC,KAAK,iBACH,QAAO;GAAE,GAAG;GAAO,aAAa;GAAO;EAEzC,KAAK,YACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS;EAEpD,KAAK,qBACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS;EAEpD,KAAK,oBACH,QAAO;GAAE,GAAG;GAAO,cAAc,OAAO;GAAS;EAEnD,KAAK,iBACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS,cAAc;GAAM;EAExE,KAAK,mBACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS;EAEpD,QACE,QAAO;;;AAKb,MAAM,mBAAmB,MACtB,EACC,MACA,WACA,YACA,gBAAgB,gBAChB,cACA,QACA,aAAa,MACb,QACA,QACA,UACA,WAAW,mBACX,gBACA,eACA,iBACA,YAAY,QACZ,YAAY,MACZ,aAAa,MACb,aAAa,MACb,0BAA0B,OAC1B,sBAAsB,OACtB,iBACA,QAAQ,cACR,OACA,GAAG,WACC;CACJ,MAAM,eAAe,eACZ,EACL,2BAA2B,mBAAmB,IAC/C,GACD,CAAC,gBAAgB,CAClB;CACD,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,aAAa,SAAS,IAAI;CAGhC,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAM,sBAAsB,OAAY,OAAU;CAClD,MAAM,qBAAqB,OAAY,OAAU;CAGjD,MAAM,+BAA+B,cAC7B,gBAAgB,wBACtB,CAAC,aAAa,CACf;CAWD,MAAM,CAAC,OAAO,YAAY,WAAW,gBARF;EACjC,eAAe,SAAS;EACxB,eAAe,WAAY,SAAS,+BAAgC;EACpE,aAAa;EACb,YAAY;EACZ,cAAc;EACf,CAEiE;CAGlE,MAAM,oBAAoB,cAAc;AACtC,SAAO,YAAY,MAAM,gBAAgB,YAAY;IACpD,CAAC,UAAU,MAAM,cAAc,CAAC;CAGnC,MAAM,eAAe,kBAAkB;AACrC,MAAI,CAAC,WAAY;AAGjB,MAAI,MAAM,eAAe,MAAM,WAAY;AAG3C,MAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAI3C,WAAS,EAAE,MAAM,mBAAmB,CAAC;AACrC,cAAY,CAAC,SAAS;AAGtB,sBAAoB,UAAU,iBAAiB;AAC7C,YAAS,EAAE,MAAM,kBAAkB,CAAC;KACnC,mBAAmB;IACrB;EAAC;EAAY;EAAU;EAAa,MAAM;EAAa,MAAM;EAAW,CAAC;CAG5E,MAAM,gBAAgB,OAAO,SAAS;AAGtC,iBAAgB;AAEd,MAAI,cAAc,YAAY,YAAY,CAAC,MAAM,cAAc,CAAC,MAAM,aAAa;AACjF,OAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAI3C,YAAS,EAAE,MAAM,mBAAmB,CAAC;AAErC,uBAAoB,UAAU,iBAAiB;AAC7C,aAAS,EAAE,MAAM,kBAAkB,CAAC;MACnC,mBAAmB;AAEtB,iBAAc,UAAU;;IAEzB;EAAC;EAAU,MAAM;EAAY,MAAM;EAAY,CAAC;AAGnD,iBAAgB;AACd,MAAI,MAAM,aAAa;GAErB,MAAM,QAAQ,4BAA4B;AACxC,QAAI,SAEF,UAAS;KAAE,SAAS,MAAM;KAAe,MAAM;KAAkB,CAAC;SAC7D;AAEL,cAAS;MAAE,SAAS;MAAU,MAAM;MAAoB,CAAC;AAEzD,SAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,wBAAmB,UAAU,iBAAiB;AAC5C,eAAS;OAAE,SAAS;OAAO,MAAM;OAAqB,CAAC;QACtD,yBAAyB;;KAE9B;AAEF,gBAAa;AACX,yBAAqB,MAAM;;;IAG9B;EAAC;EAAU,MAAM;EAAa;EAAU,MAAM;EAAc,CAAC;CAIhE,MAAM,oBAAoB,OAAO,MAAM,WAAW;AAClD,iBAAgB;EACd,MAAM,cAAc,kBAAkB;AACtC,oBAAkB,UAAU,MAAM;AAGlC,MAAI,eAAe,CAAC,MAAM,cAAc,CAAC,MAAM,YAC7C,UAAS;GAAE,SAAS;GAAU,MAAM;GAAqB,CAAC;IAE3D;EAAC;EAAU,MAAM;EAAa,MAAM;EAAW,CAAC;AAInD,iBAAgB;AACd,MAAI,UAAU,UAAa,CAAC,MAAM,cAAc,CAAC,MAAM,aAAa;AAElE,YAAS;IAAE,SAAS;IAAO,MAAM;IAAsB,CAAC;AAExD,OAAI,SACF,UAAS;IAAE,SAAS;IAAO,MAAM;IAAa,CAAC;;IAIlD;EAAC;EAAO,MAAM;EAAY,MAAM;EAAa;EAAS,CAAC;CAG1D,MAAM,cAAc,cAAc;AAChC,SAAO,KAAK,MAAM,aAAa;IAC9B,CAAC,MAAM,MAAM,aAAa,CAAC;CAG9B,MAAM,gBAAgB,cAAc;AAClC,SAAO,OAAO,WAAW,aAAa,OAAO,MAAM,aAAa,GAAG;IAClE,CAAC,QAAQ,MAAM,aAAa,CAAC;CAGhC,MAAM,gBAAgB,cAAc;AAClC,SAAO,OAAO,WAAW,aAAa,OAAO,MAAM,aAAa,GAAG;IAClE,CAAC,QAAQ,MAAM,aAAa,CAAC;CAGhC,MAAMC,eAA+B,aAClC,GAAG,IAAI,OAAK,UAAU;EACrB,MAAM,eAAeC,MAAI;AACzB,WAAS;GAAE,SAAS;GAAc,MAAM;GAAa,CAAC;AAEtD,oBAAkB,OAAO,aAAa;IAExC,CAAC,gBAAgB,CAClB;CAED,MAAM,oBAAoB,kBAAkB;AAC1C,WAAS,EAAE,MAAM,gBAAgB,CAAC;IACjC,EAAE,CAAC;CAEN,MAAMC,mBAAmC,aACtC,GAAG,IAAI,OAAK,UAAU;AACrB,WAAS,EAAE,MAAM,eAAe,CAAC;EAEjC,MAAM,eAAeD,MAAI;AAGzB,MAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAI3C,MAAI,YAAY;GACd,MAAM,iBAAiB,gBAAgB,YAAY,eAAe;AAIlE,OAAI,kBAFF,CAAC,YAAY,eAAe,YAAY,gBAAgB,mBAEtB;AAElC,aAAS,EAAE,MAAM,mBAAmB,CAAC;AAErC,QAAI,gBAAgB;AAClB,iBAAY,MAAM;AAClB,cAAS;MAAE,SAAS;MAAU,MAAM;MAAa,CAAC;WAC7C;AACL,iBAAY,KAAK;AACjB,cAAS;MAAE,SAAS;MAAc,MAAM;MAAsB,CAAC;AAC/D,cAAS;MAAE,SAAS;MAAc,MAAM;MAAa,CAAC;;AAGxD,wBAAoB,UAAU,iBAAiB;AAC7C,cAAS,EAAE,MAAM,kBAAkB,CAAC;OACnC,mBAAmB;cACb,UAAU;AAEnB,aAAS;KAAE,SAAS;KAAc,MAAM;KAAsB,CAAC;AAC/D,aAAS;KAAE,SAAS;KAAc,MAAM;KAAa,CAAC;;SAEnD;AAEL,YAAS;IAAE,SAAS;IAAc,MAAM;IAAsB,CAAC;AAC/D,YAAS;IAAE,SAAS;IAAc,MAAM;IAAa,CAAC;;AAGxD,kBAAgB,OAAO,aAAa;IAEtC;EAAC;EAAY;EAAU;EAAmB;EAAU;EAAe;EAAY,CAChF;CAGD,MAAM,YAAY,cAAc;AAC9B,MAAI,cAAc,OAEhB,QAAO;AAGT,SAAO;IACN,CAAC,UAAU,CAAC;CAGf,MAAM,kBAAkB,eACf;EACL,SAAS;EACT,SAAS,CAAC,YAAY,0BAA0B,IAAI,aAAa,IAAI;EACrE,YAAY;EACb,GACD;EAAC;EAAU;EAAyB;EAAW,CAChD;CAED,MAAM,oBAAoB,eACjB;EACL,GAAG,cAAc;EACjB,QAAQ;EACT,GACD,CAAC,cAAc,OAAO,CACvB;CAED,MAAM,yBAAyB,eACtB;EACL,YAAY,cAAc,UAAU,IAAI;EACxC,aAAa,cAAc,SAAS,IAAI;EACxC,WAAW,WAAW,iBAAiB;EACvC,YAAY,aAAa,yBAAyB;EACnD,GACD,CAAC,WAAW,SAAS,CACtB;CAGD,MAAM,SAAS,cAEX,cACA,cACE,oBAAC;EACC,OAAO;EACP,WAAW,GACT,OAAO,YACP,cAAc,SAAS,OAAO,aAAa,OAAO,YACnD;YAED,oBAACE;GAAO,WAAW,YAAY;GAAQ,OAAO;GAAmB,SAAS;aACxE,oBAAC;IAAI,OAAO;cACV,oBAACC;KAAK,WAAW,OAAO;KAAa,MAAM;KAAW,MAAM;MAAM;KAC9D;IACC;GACL,EAEV;EACE;EACA;EACA,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,aAAa,cAAc;AAC/B,SAAO;GACK;GACA;GACV,MAAM;IAAE,QAAQ;IAAQ,OAAO,MAAM;IAAe;GACrD;IACA;EAAC,MAAM;EAAe;EAAU;EAAS,CAAC;CAG7C,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,UACH,QAAO;AAET,SAAO;GACL,QAAQ;GACR,YAAY;GACZ,aAAa;GACb,MAAM,cAAc;GACpB,OAAO,cAAc;GACrB,KAAK;GACL,SAAS;GACT,UAAU;GACX;IACA,CAAC,WAAW,UAAU,CAAC;CAG1B,MAAM,gBAAgB,eACb,GACJ,cAAc,SAAS,UAAU,SAAS,GACzC,OAAO,cACP,uBAAuB,OAAO,uBAC9B,cAAc,SAAS,OAAO,mBAAmB,OAAO,kBACzD,EACF,GACD;EAAC;EAAW;EAAQ;EAAqB;EAAG,CAC7C;CAGD,MAAM,iBAAiB,eACd;EACL,GAAG,cAAc;EACjB,GAAG,KAAK;EAER,YAAY,MAAM,aACd,SACA,MAAM,cACJ,SAAS,mBAAmB,qCAC5B;EACP,GACD;EAAC,cAAc;EAAW,KAAK;EAAO,MAAM;EAAY,MAAM;EAAY,CAC3E;CAGD,MAAM,qBAAqB,cACnB,GAAG,OAAO,WAAW,YAAY,WAAW,UAAU,EAC5D;EAAC;EAAI,OAAO;EAAW,YAAY;EAAW;EAAU,CACzD;CAED,MAAM,mBAAmB,cAErB,GACE,aAAa,OAAO,mBAAmB,OAAO,0BAC9C,OAAO,cACP,YAAY,QACb,EACH;EACE;EACA,OAAO;EACP,OAAO;EACP,OAAO;EACP,YAAY;EACZ;EACD,CACF;CAED,MAAM,kBAAkB,cAChB,GAAG,OAAO,QAAQ,YAAY,OAAO,EAC3C;EAAC;EAAI,OAAO;EAAQ,YAAY;EAAO,CACxC;CAED,MAAM,gBAAgB,cACd,GAAG,OAAO,MAAM,YAAY,KAAK,EACvC;EAAC;EAAI,OAAO;EAAM,YAAY;EAAK,CACpC;CAED,MAAM,kBAAkB,cAChB,GAAG,OAAO,QAAQ,YAAY,OAAO,EAC3C;EAAC;EAAI,OAAO;EAAQ,YAAY;EAAO,CACxC;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAE3C,OAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;;IAG3C,EAAE,CAAC;AAEN,QACE,oBAAC;EAAW;YACV,qBAAC;GACC,GAAI;GACJ,WAAW;GACX,QAAQ;GACO;GACf,OAAO;GACP,UAAU;GACV,eAAe;GACf,cAAc;cAEb,QACD,qBAACC;IACC,WAAW;IACX,OAAO;KACL,GAAG;KACH,GAAG,cAAc;KAClB;;KAEA,iBACC,oBAAC;MAAI,WAAW;MAAiB,OAAO,cAAc;gBACnD;OACG;KAER,oBAAC;MAAI,WAAW;MAAe,OAAO,cAAc;gBACjD;OACG;KACL,iBACC,oBAAC;MAAI,WAAW;MAAiB,OAAO,cAAc;gBACnD;OACG;;KAEA;IACA;GACN;EAGb;AAED,iBAAiB,cAAc;AAE/B,+BAAe"}

package/es/Drawer/Drawer.d.mts

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

package/es/Drawer/Drawer.mjs

@@ -25,10 +25,10 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 		width
 	]);
 	const extraNode = /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
 		align: "center",
 		className: classNames?.extra,
 		gap: 4,
-		horizontal: true,
 		justify: "flex-end",
 		style: {
 			position: "absolute",
@@ -46,6 +46,7 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 		className: classNames?.sidebar,
 		paddingBlock: 12,
 		paddingInline: 16,
+		width: sidebarWidth,
 		style: {
 			background: cssVar.colorBgLayout,
 			borderRight: `1px solid ${cssVar.colorBorderSecondary}`,
@@ -56,7 +57,6 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 			top: 0,
 			...styles?.sidebar
 		},
-		width: sidebarWidth,
 		children: sidebar
 	}), /* @__PURE__ */ jsx(FlexBasic_default, {
 		className: classNames?.sidebarContent,
@@ -77,9 +77,9 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 		extra: noHeader ? void 0 : extraNode,
 		height,
 		keyboard: true,
-		onClose,
 		panelRef: ref,
 		placement,
+		width,
 		styles: typeof styles === "function" ? styles : {
 			...styles,
 			body: {
@@ -105,9 +105,9 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 			}
 		},
 		title: /* @__PURE__ */ jsx(FlexBasic_default, {
+			horizontal: true,
 			align: "center",
 			className: classNames?.title,
-			horizontal: true,
 			justify: "flex-start",
 			paddingBlock: 8,
 			paddingInline: 16,
@@ -119,7 +119,7 @@ const Drawer$1 = memo(({ onClose, containerMaxWidth = 1024, classNames, title, p
 			},
 			children: title
 		}),
-		width,
+		onClose,
 		...rest,
 		children: /* @__PURE__ */ jsxs(FlexBasic_default, {
 			className: classNames?.bodyContent,

package/es/Drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","names":["Drawer","headerBorder: CSSProperties","Flexbox","ActionIcon","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer as AntdDrawer } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { CSSProperties, memo, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { DrawerProps } from './type';\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    onClose,\n    containerMaxWidth = 1024,\n    classNames,\n    title,\n    placement,\n    styles,\n    children,\n    height,\n    width,\n    extra,\n    closeIconProps,\n    noHeader,\n    sidebarWidth = 280,\n    sidebar,\n    closeIcon,\n    ref,\n    ...rest\n  }) => {\n    const headerBorder: CSSProperties = useMemo(() => {\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\n        return {};\n\n      switch (placement) {\n        case 'top': {\n          return {\n            borderBottom: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'bottom': {\n          return {\n            borderTop: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'left': {\n          return {\n            borderRight: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'right': {\n          return {\n            borderLeft: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        default: {\n          return {};\n        }\n      }\n    }, [placement, height, width]);\n\n    const extraNode = (\n      <Flexbox\n        align={'center'}\n        className={classNames?.extra}\n        gap={4}\n        horizontal\n        justify={'flex-end'}\n        style={{\n          position: 'absolute',\n          right: 4,\n          top: 4,\n          ...styles?.extra,\n        }}\n      >\n        {extra}\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\n      </Flexbox>\n    );\n\n    const sidebarContent = (\n      <>\n        <Flexbox\n          className={classNames?.sidebar}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: cssVar.colorBgLayout,\n            borderRight: `1px solid ${cssVar.colorBorderSecondary}`,\n            height: '100vh',\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            position: 'sticky',\n            top: 0,\n            ...styles?.sidebar,\n          }}\n          width={sidebarWidth}\n        >\n          {sidebar}\n        </Flexbox>\n        <Flexbox\n          className={classNames?.sidebarContent}\n          flex={1}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: cssVar.colorBgContainer,\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            ...styles?.sidebarContent,\n          }}\n        >\n          {children}\n        </Flexbox>\n      </>\n    );\n\n    return (\n      <AntdDrawer\n        classNames={classNames}\n        closable={false}\n        extra={noHeader ? undefined : extraNode}\n        height={height}\n        keyboard={true}\n        onClose={onClose}\n        panelRef={ref}\n        placement={placement}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...styles,\n                body: {\n                  background: 'transparent',\n                  paddingBlock: sidebar ? 0 : 12,\n                  paddingInline: sidebar ? 0 : 16,\n                  ...styles?.body,\n                },\n                header: {\n                  background: 'transparent',\n                  display: noHeader ? 'none' : undefined,\n                  padding: 4,\n                  ...styles?.header,\n                },\n                section: {\n                  background: sidebar\n                    ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)`\n                    : cssVar.colorBgContainer,\n                  ...styles?.section,\n                },\n                wrapper: {\n                  background: cssVar.colorBgContainer,\n                  ...headerBorder,\n                  ...styles?.wrapper,\n                },\n              }\n        }\n        title={\n          <Flexbox\n            align={'center'}\n            className={classNames?.title}\n            horizontal\n            justify={'flex-start'}\n            paddingBlock={8}\n            paddingInline={16}\n            style={{\n              justifySelf: 'center',\n              maxWidth: containerMaxWidth,\n              width: '100%',\n              ...styles?.title,\n            }}\n          >\n            {title}\n          </Flexbox>\n        }\n        width={width}\n        {...rest}\n      >\n        <Flexbox\n          className={classNames?.bodyContent}\n          horizontal={!!sidebar}\n          style={{\n            justifySelf: 'center',\n            maxWidth: containerMaxWidth,\n            minHeight: '100%',\n            overflow: sidebar ? 'visible' : undefined,\n            width: '100%',\n            ...styles?.bodyContent,\n          }}\n        >\n          {noHeader && extraNode}\n          {sidebar ? sidebarContent : children}\n        </Flexbox>\n      </AntdDrawer>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,WAAS,MACZ,EACC,SACA,oBAAoB,MACpB,YACA,OACA,WACA,QACA,UACA,QACA,OACA,OACA,gBACA,UACA,eAAe,KACf,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAMC,eAA8B,cAAc;AAChD,MAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,QAC3E,QAAO,EAAE;AAEX,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EACL,cAAc,aAAa,OAAO,eACnC;GAEH,KAAK,SACH,QAAO,EACL,WAAW,aAAa,OAAO,eAChC;GAEH,KAAK,OACH,QAAO,EACL,aAAa,aAAa,OAAO,eAClC;GAEH,KAAK,QACH,QAAO,EACL,YAAY,aAAa,OAAO,eACjC;GAEH,QACE,QAAO,EAAE;;IAGZ;EAAC;EAAW;EAAQ;EAAM,CAAC;CAE9B,MAAM,YACJ,qBAACC;EACC,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL;EACA,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;GACZ;aAEA,OACA,aAAa,oBAACC;GAAW,MAAM;GAAO,SAAS;GAAS,GAAI;IAAkB;GACvE;CAGZ,MAAM,iBACJ,8CACE,oBAACD;EACC,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,aAAa,OAAO;GACjC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;GACZ;EACD,OAAO;YAEN;GACO,EACV,oBAACA;EACC,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;GACZ;EAEA;GACO,IACT;AAGL,QACE,oBAACE;EACa;EACZ,UAAU;EACV,OAAO,WAAW,SAAY;EACtB;EACR,UAAU;EACD;EACT,UAAU;EACC;EACX,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;IACZ;GACD,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS;IAC7B,SAAS;IACT,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,UACR,6BAA6B,OAAO,cAAc,UAAU,OAAO,iBAAiB,SACpF,OAAO;IACX,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,OAAO;IACnB,GAAG;IACH,GAAG,QAAQ;IACZ;GACF;EAEP,OACE,oBAACF;GACC,OAAO;GACP,WAAW,YAAY;GACvB;GACA,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;IACZ;aAEA;IACO;EAEL;EACP,GAAI;YAEJ,qBAACA;GACC,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY;IAChC,OAAO;IACP,GAAG,QAAQ;IACZ;cAEA,YAAY,WACZ,UAAU,iBAAiB;IACpB;GACC;EAGlB;AAED,SAAO,cAAc;AAErB,qBAAeF"}
+{"version":3,"file":"Drawer.mjs","names":["Drawer","headerBorder: CSSProperties","Flexbox","ActionIcon","AntdDrawer"],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport { Drawer as AntdDrawer } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { DrawerProps } from './type';\n\nconst Drawer = memo<DrawerProps>(\n  ({\n    onClose,\n    containerMaxWidth = 1024,\n    classNames,\n    title,\n    placement,\n    styles,\n    children,\n    height,\n    width,\n    extra,\n    closeIconProps,\n    noHeader,\n    sidebarWidth = 280,\n    sidebar,\n    closeIcon,\n    ref,\n    ...rest\n  }) => {\n    const headerBorder: CSSProperties = useMemo(() => {\n      if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw')\n        return {};\n\n      switch (placement) {\n        case 'top': {\n          return {\n            borderBottom: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'bottom': {\n          return {\n            borderTop: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'left': {\n          return {\n            borderRight: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        case 'right': {\n          return {\n            borderLeft: `1px solid ${cssVar.colorBorder}`,\n          };\n        }\n        default: {\n          return {};\n        }\n      }\n    }, [placement, height, width]);\n\n    const extraNode = (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={classNames?.extra}\n        gap={4}\n        justify={'flex-end'}\n        style={{\n          position: 'absolute',\n          right: 4,\n          top: 4,\n          ...styles?.extra,\n        }}\n      >\n        {extra}\n        {closeIcon || <ActionIcon icon={XIcon} onClick={onClose} {...closeIconProps} />}\n      </Flexbox>\n    );\n\n    const sidebarContent = (\n      <>\n        <Flexbox\n          className={classNames?.sidebar}\n          paddingBlock={12}\n          paddingInline={16}\n          width={sidebarWidth}\n          style={{\n            background: cssVar.colorBgLayout,\n            borderRight: `1px solid ${cssVar.colorBorderSecondary}`,\n            height: '100vh',\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            position: 'sticky',\n            top: 0,\n            ...styles?.sidebar,\n          }}\n        >\n          {sidebar}\n        </Flexbox>\n        <Flexbox\n          className={classNames?.sidebarContent}\n          flex={1}\n          paddingBlock={12}\n          paddingInline={16}\n          style={{\n            background: cssVar.colorBgContainer,\n            overflowX: 'hidden',\n            overflowY: 'auto',\n            ...styles?.sidebarContent,\n          }}\n        >\n          {children}\n        </Flexbox>\n      </>\n    );\n\n    return (\n      <AntdDrawer\n        classNames={classNames}\n        closable={false}\n        extra={noHeader ? undefined : extraNode}\n        height={height}\n        keyboard={true}\n        panelRef={ref}\n        placement={placement}\n        width={width}\n        styles={\n          typeof styles === 'function'\n            ? styles\n            : {\n                ...styles,\n                body: {\n                  background: 'transparent',\n                  paddingBlock: sidebar ? 0 : 12,\n                  paddingInline: sidebar ? 0 : 16,\n                  ...styles?.body,\n                },\n                header: {\n                  background: 'transparent',\n                  display: noHeader ? 'none' : undefined,\n                  padding: 4,\n                  ...styles?.header,\n                },\n                section: {\n                  background: sidebar\n                    ? `linear-gradient(to right, ${cssVar.colorBgLayout} 49.9%, ${cssVar.colorBgContainer} 50%)`\n                    : cssVar.colorBgContainer,\n                  ...styles?.section,\n                },\n                wrapper: {\n                  background: cssVar.colorBgContainer,\n                  ...headerBorder,\n                  ...styles?.wrapper,\n                },\n              }\n        }\n        title={\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={classNames?.title}\n            justify={'flex-start'}\n            paddingBlock={8}\n            paddingInline={16}\n            style={{\n              justifySelf: 'center',\n              maxWidth: containerMaxWidth,\n              width: '100%',\n              ...styles?.title,\n            }}\n          >\n            {title}\n          </Flexbox>\n        }\n        onClose={onClose}\n        {...rest}\n      >\n        <Flexbox\n          className={classNames?.bodyContent}\n          horizontal={!!sidebar}\n          style={{\n            justifySelf: 'center',\n            maxWidth: containerMaxWidth,\n            minHeight: '100%',\n            overflow: sidebar ? 'visible' : undefined,\n            width: '100%',\n            ...styles?.bodyContent,\n          }}\n        >\n          {noHeader && extraNode}\n          {sidebar ? sidebarContent : children}\n        </Flexbox>\n      </AntdDrawer>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,WAAS,MACZ,EACC,SACA,oBAAoB,MACpB,YACA,OACA,WACA,QACA,UACA,QACA,OACA,OACA,gBACA,UACA,eAAe,KACf,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAMC,eAA8B,cAAc;AAChD,MAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,QAC3E,QAAO,EAAE;AAEX,UAAQ,WAAR;GACE,KAAK,MACH,QAAO,EACL,cAAc,aAAa,OAAO,eACnC;GAEH,KAAK,SACH,QAAO,EACL,WAAW,aAAa,OAAO,eAChC;GAEH,KAAK,OACH,QAAO,EACL,aAAa,aAAa,OAAO,eAClC;GAEH,KAAK,QACH,QAAO,EACL,YAAY,aAAa,OAAO,eACjC;GAEH,QACE,QAAO,EAAE;;IAGZ;EAAC;EAAW;EAAQ;EAAM,CAAC;CAE9B,MAAM,YACJ,qBAACC;EACC;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;GACZ;aAEA,OACA,aAAa,oBAACC;GAAW,MAAM;GAAO,SAAS;GAAS,GAAI;IAAkB;GACvE;CAGZ,MAAM,iBACJ,8CACE,oBAACD;EACC,WAAW,YAAY;EACvB,cAAc;EACd,eAAe;EACf,OAAO;EACP,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,aAAa,OAAO;GACjC,QAAQ;GACR,WAAW;GACX,WAAW;GACX,UAAU;GACV,KAAK;GACL,GAAG,QAAQ;GACZ;YAEA;GACO,EACV,oBAACA;EACC,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;GACZ;EAEA;GACO,IACT;AAGL,QACE,oBAACE;EACa;EACZ,UAAU;EACV,OAAO,WAAW,SAAY;EACtB;EACR,UAAU;EACV,UAAU;EACC;EACJ;EACP,QACE,OAAO,WAAW,aACd,SACA;GACE,GAAG;GACH,MAAM;IACJ,YAAY;IACZ,cAAc,UAAU,IAAI;IAC5B,eAAe,UAAU,IAAI;IAC7B,GAAG,QAAQ;IACZ;GACD,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS;IAC7B,SAAS;IACT,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,UACR,6BAA6B,OAAO,cAAc,UAAU,OAAO,iBAAiB,SACpF,OAAO;IACX,GAAG,QAAQ;IACZ;GACD,SAAS;IACP,YAAY,OAAO;IACnB,GAAG;IACH,GAAG,QAAQ;IACZ;GACF;EAEP,OACE,oBAACF;GACC;GACA,OAAO;GACP,WAAW,YAAY;GACvB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;IACZ;aAEA;IACO;EAEH;EACT,GAAI;YAEJ,qBAACA;GACC,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY;IAChC,OAAO;IACP,GAAG,QAAQ;IACZ;cAEA,YAAY,WACZ,UAAU,iBAAiB;IACpB;GACC;EAGlB;AAED,SAAO,cAAc;AAErB,qBAAeF"}

package/es/Dropdown/Dropdown.d.mts

@@ -1,5 +1,5 @@
 import { DropdownProps } from "./type.mjs";
-import * as react3 from "react";
+import * as react73 from "react";
 
 //#region src/Dropdown/Dropdown.d.ts
 
@@ -9,7 +9,7 @@ import * as react3 from "react";
  * @see https://ui.lobehub.com/components/context-menu
  * @see https://ui.lobehub.com/components/dropdown-menu
  */
-declare const Dropdown: react3.NamedExoticComponent<DropdownProps>;
+declare const Dropdown: react73.NamedExoticComponent<DropdownProps>;
 //#endregion
 export { Dropdown };
 //# sourceMappingURL=Dropdown.d.mts.map

package/es/DropdownMenu/DropdownMenu.d.mts

@@ -1,8 +1,8 @@
 import { DropdownMenuProps } from "./type.mjs";
-import * as react77 from "react";
+import * as react64 from "react";
 
 //#region src/DropdownMenu/DropdownMenu.d.ts
-declare const DropdownMenu: react77.NamedExoticComponent<DropdownMenuProps<unknown>>;
+declare const DropdownMenu: react64.NamedExoticComponent<DropdownMenuProps<unknown>>;
 //#endregion
 export { DropdownMenu };
 //# sourceMappingURL=DropdownMenu.d.mts.map

package/es/DropdownMenu/DropdownMenu.mjs

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 
 //#region src/DropdownMenu/DropdownMenu.tsx
-const DropdownMenu = memo(({ children, defaultOpen, iconSpaceMode, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, trigger = "click", triggerProps, ...rest }) => {
+const DropdownMenu = memo(({ children, defaultOpen, iconAlign, iconSpaceMode, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, trigger = "click", triggerProps, ...rest }) => {
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
 	const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);
 	useEffect(() => {
@@ -24,7 +24,10 @@ const DropdownMenu = memo(({ children, defaultOpen, iconSpaceMode, items, native
 	const isOpen = open ?? uncontrolledOpen;
 	const menuItems = useMemo(() => {
 		if (isOpen) {
-			const renderedItems = renderDropdownMenuItems(typeof items === "function" ? items() : items, [], { iconSpaceMode });
+			const renderedItems = renderDropdownMenuItems(typeof items === "function" ? items() : items, [], {
+				iconAlign,
+				iconSpaceMode
+			});
 			menuItemsRef.current = renderedItems;
 			return renderedItems;
 		}
@@ -32,6 +35,7 @@ const DropdownMenu = memo(({ children, defaultOpen, iconSpaceMode, items, native
 	}, [
 		isOpen,
 		items,
+		iconAlign,
 		iconSpaceMode
 	]);
 	const handleOpenChangeComplete = useCallback((nextOpen) => {
@@ -54,9 +58,9 @@ const DropdownMenu = memo(({ children, defaultOpen, iconSpaceMode, items, native
 		...rest,
 		defaultOpen,
 		modal: false,
+		open,
 		onOpenChange: handleOpenChange,
 		onOpenChangeComplete: handleOpenChangeComplete,
-		open,
 		children: [triggerElement, /* @__PURE__ */ jsx(DropdownMenuPortal, {
 			container: portalContainer,
 			...restPortalProps,

package/es/DropdownMenu/DropdownMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n  ({\n    children,\n    defaultOpen,\n    iconSpaceMode,\n    items,\n    nativeButton,\n    onOpenChange,\n    onOpenChangeComplete,\n    open,\n    placement = 'bottomLeft',\n    popupProps,\n    portalProps,\n    positionerProps,\n    trigger = 'click',\n    triggerProps,\n    ...rest\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n        onOpenChange?.(nextOpen, details);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open],\n    );\n\n    const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n    const isOpen = open ?? uncontrolledOpen;\n    const menuItems = useMemo(() => {\n      if (isOpen) {\n        const resolvedItems = typeof items === 'function' ? items() : items;\n        const renderedItems = renderDropdownMenuItems(resolvedItems, [], { iconSpaceMode });\n        menuItemsRef.current = renderedItems;\n        return renderedItems;\n      }\n      return menuItemsRef.current;\n    }, [isOpen, items, iconSpaceMode]);\n    const handleOpenChangeComplete = useCallback(\n      (nextOpen: boolean) => {\n        onOpenChangeComplete?.(nextOpen);\n        if (!nextOpen) {\n          menuItemsRef.current = null;\n        }\n      },\n      [onOpenChangeComplete],\n    );\n    const { container: portalContainer, ...restPortalProps } = (portalProps ?? {}) as any;\n\n    const { resolvedNativeButton } = useNativeButton({\n      children,\n      nativeButton,\n      triggerNativeButton: triggerProps?.nativeButton,\n    });\n\n    const triggerElement = (\n      <DropdownMenuTrigger\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        openOnHover={openOnHover}\n      >\n        {children}\n      </DropdownMenuTrigger>\n    );\n\n    return (\n      <Menu.Root\n        {...rest}\n        defaultOpen={defaultOpen}\n        modal={false}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={handleOpenChangeComplete}\n        open={open}\n      >\n        {triggerElement}\n        <DropdownMenuPortal container={portalContainer} {...restPortalProps}>\n          <DropdownMenuPositioner\n            {...positionerProps}\n            hoverTrigger={openOnHover}\n            placement={placement}\n          >\n            <DropdownMenuPopup {...popupProps}>{menuItems}</DropdownMenuPopup>\n          </DropdownMenuPositioner>\n        </DropdownMenuPortal>\n      </Menu.Root>\n    );\n  },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,eAAe,MAClB,EACC,UACA,aACA,eACA,OACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,UAAU,SACV,cACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,YAAY,CAAC;CAE9E,MAAM,EAAE,gBAAgB,cAAc,aAAa,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAEvE,iBAAgB;AACd,MAAI,SAAS,OAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;AAC/E,iBAAe,UAAU,QAAQ;AACjC,MAAI,SAAS,OACX,qBAAoB,SAAS;IAGjC,CAAC,cAAc,KAAK,CACrB;CAED,MAAM,eAAe,OAA0D,KAAK;CACpF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;AAC9B,MAAI,QAAQ;GAEV,MAAM,gBAAgB,wBADA,OAAO,UAAU,aAAa,OAAO,GAAG,OACD,EAAE,EAAE,EAAE,eAAe,CAAC;AACnF,gBAAa,UAAU;AACvB,UAAO;;AAET,SAAO,aAAa;IACnB;EAAC;EAAQ;EAAO;EAAc,CAAC;CAClC,MAAM,2BAA2B,aAC9B,aAAsB;AACrB,yBAAuB,SAAS;AAChC,MAAI,CAAC,SACH,cAAa,UAAU;IAG3B,CAAC,qBAAqB,CACvB;CACD,MAAM,EAAE,WAAW,iBAAiB,GAAG,oBAAqB,eAAe,EAAE;CAE7E,MAAM,EAAE,yBAAyB,gBAAgB;EAC/C;EACA;EACA,qBAAqB,cAAc;EACpC,CAAC;CAEF,MAAM,iBACJ,oBAAC;EACC,GAAI;EACJ,cAAc;EACD;EAEZ;GACmB;AAGxB,QACE,qBAAC,KAAK;EACJ,GAAI;EACS;EACb,OAAO;EACP,cAAc;EACd,sBAAsB;EAChB;aAEL,gBACD,oBAAC;GAAmB,WAAW;GAAiB,GAAI;aAClD,oBAAC;IACC,GAAI;IACJ,cAAc;IACH;cAEX,oBAAC;KAAkB,GAAI;eAAa;MAA8B;KAC3C;IACN;GACX;EAGjB;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"DropdownMenu.mjs","names":[],"sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport {\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuTrigger,\n} from './atoms';\nimport { renderDropdownMenuItems } from './renderItems';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n  ({\n    children,\n    defaultOpen,\n    iconAlign,\n    iconSpaceMode,\n    items,\n    nativeButton,\n    onOpenChange,\n    onOpenChangeComplete,\n    open,\n    placement = 'bottomLeft',\n    popupProps,\n    portalProps,\n    positionerProps,\n    trigger = 'click',\n    triggerProps,\n    ...rest\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n        onOpenChange?.(nextOpen, details);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open],\n    );\n\n    const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n    const isOpen = open ?? uncontrolledOpen;\n    const menuItems = useMemo(() => {\n      if (isOpen) {\n        const resolvedItems = typeof items === 'function' ? items() : items;\n        const renderedItems = renderDropdownMenuItems(resolvedItems, [], {\n          iconAlign,\n          iconSpaceMode,\n        });\n        menuItemsRef.current = renderedItems;\n        return renderedItems;\n      }\n      return menuItemsRef.current;\n    }, [isOpen, items, iconAlign, iconSpaceMode]);\n    const handleOpenChangeComplete = useCallback(\n      (nextOpen: boolean) => {\n        onOpenChangeComplete?.(nextOpen);\n        if (!nextOpen) {\n          menuItemsRef.current = null;\n        }\n      },\n      [onOpenChangeComplete],\n    );\n    const { container: portalContainer, ...restPortalProps } = (portalProps ?? {}) as any;\n\n    const { resolvedNativeButton } = useNativeButton({\n      children,\n      nativeButton,\n      triggerNativeButton: triggerProps?.nativeButton,\n    });\n\n    const triggerElement = (\n      <DropdownMenuTrigger\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        openOnHover={openOnHover}\n      >\n        {children}\n      </DropdownMenuTrigger>\n    );\n\n    return (\n      <Menu.Root\n        {...rest}\n        defaultOpen={defaultOpen}\n        modal={false}\n        open={open}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={handleOpenChangeComplete}\n      >\n        {triggerElement}\n        <DropdownMenuPortal container={portalContainer} {...restPortalProps}>\n          <DropdownMenuPositioner\n            {...positionerProps}\n            hoverTrigger={openOnHover}\n            placement={placement}\n          >\n            <DropdownMenuPopup {...popupProps}>{menuItems}</DropdownMenuPopup>\n          </DropdownMenuPositioner>\n        </DropdownMenuPortal>\n      </Menu.Root>\n    );\n  },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,eAAe,MAClB,EACC,UACA,aACA,WACA,eACA,OACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,UAAU,SACV,cACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,YAAY,CAAC;CAE9E,MAAM,EAAE,gBAAgB,cAAc,aAAa,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAEvE,iBAAgB;AACd,MAAI,SAAS,OAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;AAC/E,iBAAe,UAAU,QAAQ;AACjC,MAAI,SAAS,OACX,qBAAoB,SAAS;IAGjC,CAAC,cAAc,KAAK,CACrB;CAED,MAAM,eAAe,OAA0D,KAAK;CACpF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;AAC9B,MAAI,QAAQ;GAEV,MAAM,gBAAgB,wBADA,OAAO,UAAU,aAAa,OAAO,GAAG,OACD,EAAE,EAAE;IAC/D;IACA;IACD,CAAC;AACF,gBAAa,UAAU;AACvB,UAAO;;AAET,SAAO,aAAa;IACnB;EAAC;EAAQ;EAAO;EAAW;EAAc,CAAC;CAC7C,MAAM,2BAA2B,aAC9B,aAAsB;AACrB,yBAAuB,SAAS;AAChC,MAAI,CAAC,SACH,cAAa,UAAU;IAG3B,CAAC,qBAAqB,CACvB;CACD,MAAM,EAAE,WAAW,iBAAiB,GAAG,oBAAqB,eAAe,EAAE;CAE7E,MAAM,EAAE,yBAAyB,gBAAgB;EAC/C;EACA;EACA,qBAAqB,cAAc;EACpC,CAAC;CAEF,MAAM,iBACJ,oBAAC;EACC,GAAI;EACJ,cAAc;EACD;EAEZ;GACmB;AAGxB,QACE,qBAAC,KAAK;EACJ,GAAI;EACS;EACb,OAAO;EACD;EACN,cAAc;EACd,sBAAsB;aAErB,gBACD,oBAAC;GAAmB,WAAW;GAAiB,GAAI;aAClD,oBAAC;IACC,GAAI;IACJ,cAAc;IACH;cAEX,oBAAC;KAAkB,GAAI;eAAa;MAA8B;KAC3C;IACN;GACX;EAGjB;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/DropdownMenu/atoms.d.mts

@@ -1,6 +1,6 @@
 import { DropdownMenuPlacement } from "./type.mjs";
 import React from "react";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 import * as _base_ui_react_menu0 from "@base-ui/react/menu";
 import { Menu } from "@base-ui/react/menu";
 
@@ -19,7 +19,7 @@ declare const DropdownMenuTrigger: {
     nativeButton,
     ref: refProp,
     ...rest
-  }: DropdownMenuTriggerProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuTriggerProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {
@@ -32,7 +32,7 @@ declare const DropdownMenuPortal: {
   ({
     container,
     ...rest
-  }: DropdownMenuPortalProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuPortalProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {
@@ -49,7 +49,7 @@ declare const DropdownMenuPositioner: {
     sideOffset,
     children,
     ...rest
-  }: DropdownMenuPositionerProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuPositionerProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;
@@ -57,7 +57,7 @@ declare const DropdownMenuPopup: {
   ({
     className,
     ...rest
-  }: DropdownMenuPopupProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuPopupProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & {
@@ -68,7 +68,7 @@ declare const DropdownMenuItem: {
     className,
     danger,
     ...rest
-  }: DropdownMenuItemProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuItemProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {
@@ -79,7 +79,7 @@ declare const DropdownMenuCheckboxItemPrimitive: {
     className,
     danger,
     ...rest
-  }: DropdownMenuCheckboxItemProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuCheckboxItemProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;
@@ -87,7 +87,7 @@ declare const DropdownMenuSeparator: {
   ({
     className,
     ...rest
-  }: DropdownMenuSeparatorProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuSeparatorProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<_base_ui_react_menu0.MenuGroupProps & React.RefAttributes<Element>>;
@@ -96,7 +96,7 @@ declare const DropdownMenuGroupLabel: {
   ({
     className,
     ...rest
-  }: DropdownMenuGroupLabelProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuGroupLabelProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {
@@ -107,7 +107,7 @@ declare const DropdownMenuSubmenuTrigger: {
     className,
     danger,
     ...rest
-  }: DropdownMenuSubmenuTriggerProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuSubmenuTriggerProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;
@@ -115,7 +115,7 @@ declare const DropdownMenuItemContent: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemContentProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuItemContentProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -123,7 +123,15 @@ declare const DropdownMenuItemIcon: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemIconProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuItemIconProps): react_jsx_runtime30.JSX.Element;
+  displayName: string;
+};
+type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;
+declare const DropdownMenuItemLabelGroup: {
+  ({
+    className,
+    ...rest
+  }: DropdownMenuItemLabelGroupProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -131,7 +139,15 @@ declare const DropdownMenuItemLabel: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemLabelProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuItemLabelProps): react_jsx_runtime30.JSX.Element;
+  displayName: string;
+};
+type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const DropdownMenuItemDesc: {
+  ({
+    className,
+    ...rest
+  }: DropdownMenuItemDescProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -139,7 +155,7 @@ declare const DropdownMenuItemExtra: {
   ({
     className,
     ...rest
-  }: DropdownMenuItemExtraProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuItemExtraProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -147,7 +163,7 @@ declare const DropdownMenuSubmenuArrow: {
   ({
     className,
     ...rest
-  }: DropdownMenuSubmenuArrowProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuSubmenuArrowProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 type DropdownMenuSwitchItemProps = Omit<React.ComponentProps<typeof Menu.Item>, 'onClick'> & {
@@ -168,9 +184,9 @@ declare const DropdownMenuSwitchItem: {
     onCheckedChange,
     children,
     ...rest
-  }: DropdownMenuSwitchItemProps): react_jsx_runtime42.JSX.Element;
+  }: DropdownMenuSwitchItemProps): react_jsx_runtime30.JSX.Element;
   displayName: string;
 };
 //#endregion
-export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps };
+export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps };
 //# sourceMappingURL=atoms.d.mts.map

package/es/DropdownMenu/atoms.mjs

@@ -4,8 +4,8 @@ import { useNativeButton } from "../hooks/useNativeButton.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { placementMap } from "../utils/placement.mjs";
 import { CLASSNAMES } from "../styles/classNames.mjs";
-import { styles } from "../Menu/sharedStyle.mjs";
 import { usePortalContainer } from "../hooks/usePortalContainer.mjs";
+import { styles } from "../Menu/sharedStyle.mjs";
 import { cloneElement, isValidElement, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "antd";
@@ -147,6 +147,13 @@ const DropdownMenuItemIcon = ({ className, ...rest }) => {
 	});
 };
 DropdownMenuItemIcon.displayName = "DropdownMenuItemIcon";
+const DropdownMenuItemLabelGroup = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx(styles.labelGroup, className)
+	});
+};
+DropdownMenuItemLabelGroup.displayName = "DropdownMenuItemLabelGroup";
 const DropdownMenuItemLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
@@ -154,6 +161,13 @@ const DropdownMenuItemLabel = ({ className, ...rest }) => {
 	});
 };
 DropdownMenuItemLabel.displayName = "DropdownMenuItemLabel";
+const DropdownMenuItemDesc = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: cx(styles.desc, className)
+	});
+};
+DropdownMenuItemDesc.displayName = "DropdownMenuItemDesc";
 const DropdownMenuItemExtra = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
@@ -178,9 +192,9 @@ const DropdownMenuSwitchItem = ({ checked: checkedProp, className, closeOnClick
 	}, [isControlled, onCheckedChange]);
 	return /* @__PURE__ */ jsxs(Menu$1.Item, {
 		...rest,
-		className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className),
 		closeOnClick,
 		disabled,
+		className: (state) => cx(styles.item, danger && styles.danger, typeof className === "function" ? className(state) : className),
 		onClick: (e) => {
 			e.preventDefault();
 			if (!disabled) handleCheckedChange(!checked);
@@ -188,15 +202,15 @@ const DropdownMenuSwitchItem = ({ checked: checkedProp, className, closeOnClick
 		children: [children, /* @__PURE__ */ jsx(Switch, {
 			checked,
 			disabled,
-			onChange: handleCheckedChange,
-			onClick: (_, e) => e.stopPropagation(),
 			size: "small",
-			style: { marginInlineStart: 16 }
+			style: { marginInlineStart: 16 },
+			onChange: handleCheckedChange,
+			onClick: (_, e) => e.stopPropagation()
 		})]
 	});
 };
 DropdownMenuSwitchItem.displayName = "DropdownMenuSwitchItem";
 
 //#endregion
-export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger };
+export { DROPDOWN_MENU_CONTAINER_ATTR, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger };
 //# sourceMappingURL=atoms.mjs.map