@lobehub/ui 5.20.3 → 5.22.0

package/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"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,\n        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.d.mts

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

package/es/DraggableSideNav/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggableSideNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n// Layout constants (aligned with DraggablePanel)\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    /* Smooth scroll behavior */\n    scroll-behavior: smooth;\n    overflow: hidden auto;\n    flex: 1;\n\n    /* Better scrollbar styling */\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 3px;\n      background: ${cssVar.colorBorderSecondary};\n\n      &:hover {\n        background: ${cssVar.colorBorder};\n      }\n    }\n  `,\n  container: css`\n    /* Width transition controlled by inline style */\n\n    /* Ensure smooth animations */\n    will-change: width;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n  `,\n  contentContainer: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  contentContainerNoBorder: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 0 solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  footer: css`\n    flex-shrink: 0;\n  `,\n  handlerIcon: css`\n    /* Icon transitions are now handled by motion */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  header: css`\n    flex-shrink: 0;\n  `,\n  menuOverride: css`\n    .${prefixCls}-menu {\n      .${prefixCls}-menu-item {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n\n        height: unset;\n        min-height: 36px;\n        padding-block: 4px;\n        padding-inline: 8px !important;\n      }\n\n      .${prefixCls}-menu-item-group-title {\n        overflow: hidden;\n        padding-inline: 8px;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .${prefixCls}-menu-item-icon {\n        position: absolute;\n        inset-inline-start: 0;\n\n        display: flex !important;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        width: 36px;\n        height: 36px;\n      }\n\n      .${prefixCls}-menu-title-content {\n        overflow: hidden;\n        flex: 1;\n\n        margin: 0 !important;\n        padding-inline-start: 36px;\n\n        line-height: 1.5;\n      }\n\n      &.${prefixCls}-menu-inline-collapsed {\n        .ant-menu-title-content {\n          display: none;\n          width: 0;\n          opacity: 0;\n        }\n\n        .${prefixCls}-menu-item {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px !important;\n          height: 36px !important;\n        }\n      }\n    }\n  `,\n  resizeHandle: css`\n    cursor: col-resize;\n\n    position: absolute;\n    inset-block: 0 0;\n\n    width: 8px;\n\n    transition: background-color 0.2s ease;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 2px;\n\n      background: transparent;\n\n      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n  `,\n  resizeHandleHighlight: css`\n    &:hover {\n      &::after {\n        width: 3px;\n        background: ${cssVar.colorPrimary};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::after {\n        background: ${cssVar.colorPrimaryActive};\n      }\n    }\n  `,\n  resizeHandleLeft: css`\n    inset-inline-end: -4px;\n  `,\n  resizeHandleRight: css`\n    inset-inline-start: -4px;\n  `,\n  toggleLeft: 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: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-start: -1px;\n      border-inline-start-width: 0;\n      border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n    }\n  `,\n  toggleRight: 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: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-end: -1px;\n      border-inline-end-width: 0;\n      border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG}; /* 右侧面板，handle 在左边，左侧圆角 */\n    }\n  `,\n  toggleRoot: css`\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n\n    /* Smooth transitions for all states */\n    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n    &:has(> div) {\n      pointer-events: all;\n    }\n\n    > div {\n      pointer-events: all;\n      cursor: pointer;\n\n      position: absolute;\n\n      border: 1px solid ${cssVar.colorBorder};\n\n      color: ${cssVar.colorTextTertiary};\n\n      background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n      backdrop-filter: blur(8px);\n\n      /* Enhanced transitions with backdrop blur */\n      transition:\n        color 0.2s ${cssVar.motionEaseOut},\n        transform 0.2s ${cssVar.motionEaseOut},\n        box-shadow 0.2s ${cssVar.motionEaseOut};\n\n      &:hover {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &:active {\n        transform: scale(0.95);\n        color: ${cssVar.colorText};\n      }\n    }\n  `,\n}));\n"],"mappings":";;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;CACd;AAED,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;oBAiBS,OAAO,qBAAqB;;;sBAG1B,OAAO,YAAY;;;;CAIvC,WAAW,GAAG;;;;;;;;;;;;;CAad,kBAAkB,GAAG;;;;;;mCAMY,OAAO,qBAAqB;;+CAEhB,OAAO,cAAc;;CAElE,0BAA0B,GAAG;;;;;;iCAME,OAAO,qBAAqB;;+CAEd,OAAO,cAAc;;CAElE,QAAQ,GAAG;;;CAGX,aAAa,GAAG;;;;;;CAMhB,QAAQ,GAAG;;;CAGX,cAAc,GAAG;OACZ,UAAU;SACR,UAAU;;;;;;;;;;;;SAYV,UAAU;;;;;;;SAOV,UAAU;;;;;;;;;;;;;SAaV,UAAU;;;;;;;;;;UAUT,UAAU;;;;;;;WAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,GAAG;;;;sBAIN,OAAO,aAAa;iDACO,OAAO,aAAa;;;;;;sBAM/C,OAAO,mBAAmB;;;;CAI9C,kBAAkB,GAAG;;;CAGrB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;yBACQ,OAAO,OAAO;aAC1B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;yBAG5B,OAAO,eAAe,GAAG,OAAO,eAAe;;;CAGtE,aAAa,GAAG;2BACS,OAAO,OAAO;aAC5B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;uBAG9B,OAAO,eAAe,OAAO,OAAO,eAAe;;;CAGxE,YAAY,GAAG;;;;;;;;;;;;;;;;;;0BAkBS,OAAO,YAAY;;eAE9B,OAAO,kBAAkB;;iDAES,OAAO,cAAc;;;;;qBAKjD,OAAO,cAAc;yBACjB,OAAO,cAAc;0BACpB,OAAO,cAAc;;;iBAG9B,OAAO,mBAAmB;;;;;iBAK1B,OAAO,UAAU;;;;CAIjC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggableSideNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n// Layout constants (aligned with DraggablePanel)\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    /* Smooth scroll behavior */\n    scroll-behavior: smooth;\n    overflow: hidden auto;\n    flex: 1;\n\n    /* Better scrollbar styling */\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 3px;\n      background: ${cssVar.colorBorderSecondary};\n\n      &:hover {\n        background: ${cssVar.colorBorder};\n      }\n    }\n  `,\n  container: css`\n    /* Width transition controlled by inline style */\n\n    /* Ensure smooth animations */\n    will-change: width;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n  `,\n  contentContainer: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  contentContainerNoBorder: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 0 solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  footer: css`\n    flex-shrink: 0;\n  `,\n  handlerIcon: css`\n    /* Icon transitions are now handled by motion */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  header: css`\n    flex-shrink: 0;\n  `,\n  menuOverride: css`\n    .${prefixCls}-menu {\n      .${prefixCls}-menu-item {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n\n        height: unset;\n        min-height: 36px;\n        padding-block: 4px;\n        padding-inline: 8px !important;\n      }\n\n      .${prefixCls}-menu-item-group-title {\n        overflow: hidden;\n        padding-inline: 8px;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .${prefixCls}-menu-item-icon {\n        position: absolute;\n        inset-inline-start: 0;\n\n        display: flex !important;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        width: 36px;\n        height: 36px;\n      }\n\n      .${prefixCls}-menu-title-content {\n        overflow: hidden;\n        flex: 1;\n\n        margin: 0 !important;\n        padding-inline-start: 36px;\n\n        line-height: 1.5;\n      }\n\n      &.${prefixCls}-menu-inline-collapsed {\n        .ant-menu-title-content {\n          display: none;\n          width: 0;\n          opacity: 0;\n        }\n\n        .${prefixCls}-menu-item {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px !important;\n          height: 36px !important;\n        }\n      }\n    }\n  `,\n  resizeHandle: css`\n    cursor: col-resize;\n\n    position: absolute;\n    inset-block: 0 0;\n\n    width: 8px;\n\n    transition: background-color 0.2s ease;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 2px;\n\n      background: transparent;\n\n      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n  `,\n  resizeHandleHighlight: css`\n    &:hover {\n      &::after {\n        width: 3px;\n        background: ${cssVar.colorPrimary};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::after {\n        background: ${cssVar.colorPrimaryActive};\n      }\n    }\n  `,\n  resizeHandleLeft: css`\n    inset-inline-end: -4px;\n  `,\n  resizeHandleRight: css`\n    inset-inline-start: -4px;\n  `,\n  toggleLeft: 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: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-start: -1px;\n      border-inline-start-width: 0;\n      border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n    }\n  `,\n  toggleRight: 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: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-end: -1px;\n      border-inline-end-width: 0;\n      border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG}; /* 右侧面板，handle 在左边，左侧圆角 */\n    }\n  `,\n  toggleRoot: css`\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n\n    /* Smooth transitions for all states */\n    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n    &:has(> div) {\n      pointer-events: all;\n    }\n\n    > div {\n      pointer-events: all;\n      cursor: pointer;\n\n      position: absolute;\n\n      border: 1px solid ${cssVar.colorBorder};\n\n      color: ${cssVar.colorTextTertiary};\n\n      background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n      backdrop-filter: blur(8px);\n\n      /* Enhanced transitions with backdrop blur */\n      transition:\n        color 0.2s ${cssVar.motionEaseOut},\n        transform 0.2s ${cssVar.motionEaseOut},\n        box-shadow 0.2s ${cssVar.motionEaseOut};\n\n      &:hover {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &:active {\n        transform: scale(0.95);\n        color: ${cssVar.colorText};\n      }\n    }\n  `,\n}));\n"],"mappings":";;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;AACf;AAEA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;oBAiBS,OAAO,qBAAqB;;;sBAG1B,OAAO,YAAY;;;;CAIvC,WAAW,GAAG;;;;;;;;;;;;;CAad,kBAAkB,GAAG;;;;;;mCAMY,OAAO,qBAAqB;;+CAEhB,OAAO,cAAc;;CAElE,0BAA0B,GAAG;;;;;;iCAME,OAAO,qBAAqB;;+CAEd,OAAO,cAAc;;CAElE,QAAQ,GAAG;;;CAGX,aAAa,GAAG;;;;;;CAMhB,QAAQ,GAAG;;;CAGX,cAAc,GAAG;OACZ,UAAU;SACR,UAAU;;;;;;;;;;;;SAYV,UAAU;;;;;;;SAOV,UAAU;;;;;;;;;;;;;SAaV,UAAU;;;;;;;;;;UAUT,UAAU;;;;;;;WAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,GAAG;;;;sBAIN,OAAO,aAAa;iDACO,OAAO,aAAa;;;;;;sBAM/C,OAAO,mBAAmB;;;;CAI9C,kBAAkB,GAAG;;;CAGrB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;yBACQ,OAAO,OAAO;aAC1B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;yBAG5B,OAAO,eAAe,GAAG,OAAO,eAAe;;;CAGtE,aAAa,GAAG;2BACS,OAAO,OAAO;aAC5B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;uBAG9B,OAAO,eAAe,OAAO,OAAO,eAAe;;;CAGxE,YAAY,GAAG;;;;;;;;;;;;;;;;;;0BAkBS,OAAO,YAAY;;eAE9B,OAAO,kBAAkB;;iDAES,OAAO,cAAc;;;;;qBAKjD,OAAO,cAAc;yBACjB,OAAO,cAAc;0BACpB,OAAO,cAAc;;;iBAG9B,OAAO,mBAAmB;;;;;iBAK1B,OAAO,UAAU;;;;AAIlC,EAAE"}

package/es/DraggableSideNav/type.d.mts

@@ -1,7 +1,6 @@
 import { DivProps } from "../types/index.mjs";
 import { CSSProperties, ReactNode } from "react";
 import { NumberSize } from "re-resizable";
-
 //#region src/DraggableSideNav/type.d.ts
 interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSelect'> {
   backgroundColor?: string;

package/es/Drawer/Drawer.d.mts

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

package/es/Drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","names":["Drawer","Flexbox","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,MAAM,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,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;GACZ;YAXH,CAaG,OACA,aAAa,oBAAC,YAAD;GAAY,MAAM;GAAO,SAAS;GAAS,GAAI;GAAkB,CAAA,CACvE;;CAGZ,MAAM,iBACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAACA,mBAAD;EACE,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;EACO,CAAA,EACV,oBAACA,mBAAD;EACE,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;GACZ;EAEA;EACO,CAAA,CACT,EAAA,CAAA;AAGL,QACE,oBAACC,QAAD;EACc;EACZ,UAAU;EACV,OAAO,WAAW,KAAA,IAAY;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,KAAA;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,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,YAAY;GACvB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;IACZ;aAEA;GACO,CAAA;EAEH;EACT,GAAI;YAEJ,qBAACA,mBAAD;GACE,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY,KAAA;IAChC,OAAO;IACP,GAAG,QAAQ;IACZ;aAVH,CAYG,YAAY,WACZ,UAAU,iBAAiB,SACpB;;EACC,CAAA;EAGlB;AAED,SAAO,cAAc"}
+{"version":3,"file":"Drawer.mjs","names":["Drawer","Flexbox","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,MAAM,eAA8B,cAAc;EAChD,IAAI,WAAW,UAAU,UAAU,UAAU,WAAW,WAAW,UAAU,SAC3E,OAAO,CAAC;EAEV,QAAQ,WAAR;GACE,KAAK,OACH,OAAO,EACL,cAAc,aAAa,OAAO,cACpC;GAEF,KAAK,UACH,OAAO,EACL,WAAW,aAAa,OAAO,cACjC;GAEF,KAAK,QACH,OAAO,EACL,aAAa,aAAa,OAAO,cACnC;GAEF,KAAK,SACH,OAAO,EACL,YAAY,aAAa,OAAO,cAClC;GAEF,SACE,OAAO,CAAC;EAEZ;CACF,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,MAAM,YACJ,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK;EACL,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,GAAG,QAAQ;EACb;YAXF,CAaG,OACA,aAAa,oBAAC,YAAD;GAAY,MAAM;GAAO,SAAS;GAAS,GAAI;EAAiB,CAAA,CACvE;;CAGX,MAAM,iBACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAACA,mBAAD;EACE,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;EACb;YAEC;CACM,CAAA,GACT,oBAACA,mBAAD;EACE,WAAW,YAAY;EACvB,MAAM;EACN,cAAc;EACd,eAAe;EACf,OAAO;GACL,YAAY,OAAO;GACnB,WAAW;GACX,WAAW;GACX,GAAG,QAAQ;EACb;EAEC;CACM,CAAA,CACT,EAAA,CAAA;CAGJ,OACE,oBAACC,QAAD;EACc;EACZ,UAAU;EACV,OAAO,WAAW,KAAA,IAAY;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;GACb;GACA,QAAQ;IACN,YAAY;IACZ,SAAS,WAAW,SAAS,KAAA;IAC7B,SAAS;IACT,GAAG,QAAQ;GACb;GACA,SAAS;IACP,YAAY,UACR,6BAA6B,OAAO,cAAc,UAAU,OAAO,iBAAiB,SACpF,OAAO;IACX,GAAG,QAAQ;GACb;GACA,SAAS;IACP,YAAY,OAAO;IACnB,GAAG;IACH,GAAG,QAAQ;GACb;EACF;EAEN,OACE,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,YAAY;GACvB,SAAS;GACT,cAAc;GACd,eAAe;GACf,OAAO;IACL,aAAa;IACb,UAAU;IACV,OAAO;IACP,GAAG,QAAQ;GACb;aAEC;EACM,CAAA;EAEF;EACT,GAAI;YAEJ,qBAACA,mBAAD;GACE,WAAW,YAAY;GACvB,YAAY,CAAC,CAAC;GACd,OAAO;IACL,aAAa;IACb,UAAU;IACV,WAAW;IACX,UAAU,UAAU,YAAY,KAAA;IAChC,OAAO;IACP,GAAG,QAAQ;GACb;aAVF,CAYG,YAAY,WACZ,UAAU,iBAAiB,QACrB;;CACC,CAAA;AAEhB,CACF;AAEA,SAAO,cAAc"}

package/es/Drawer/index.d.mts

@@ -1,3 +1,3 @@
 import { DrawerProps } from "./type.mjs";
-import { Drawer } from "./Drawer.mjs";
-export { DrawerProps, Drawer as default };
+import Drawer from "./Drawer.mjs";
+export { type DrawerProps, Drawer as default };

package/es/Drawer/type.d.mts

@@ -1,7 +1,7 @@
 import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
 import { DrawerProps } from "antd";
-
 //#region src/Drawer/type.d.ts
 interface DrawerProps$1 extends Omit<DrawerProps, 'styles' | 'classNames'> {
   classNames?: DrawerProps['classNames'] & {

package/es/Dropdown/Dropdown.d.mts

@@ -1,6 +1,4 @@
 import { DropdownProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Dropdown/Dropdown.d.ts
 /**
  * @deprecated
@@ -8,7 +6,7 @@ import * as _$react from "react";
  * @see https://ui.lobehub.com/components/context-menu
  * @see https://ui.lobehub.com/components/dropdown-menu
  */
-declare const Dropdown: _$react.NamedExoticComponent<DropdownProps>;
+declare const Dropdown: import("react").NamedExoticComponent<DropdownProps>;
 //#endregion
-export { Dropdown };
+export { Dropdown as default };
 //# sourceMappingURL=Dropdown.d.mts.map

package/es/Dropdown/Dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","names":["Dropdown","AntdDropdown"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { Dropdown as AntdDropdown } from 'antd';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu';\n\nimport type { DropdownProps } from './type';\n\n/**\n * @deprecated\n * Use `DropdownMenu` or `ContextMenu` instead\n * @see https://ui.lobehub.com/components/context-menu\n * @see https://ui.lobehub.com/components/dropdown-menu\n */\nconst Dropdown = memo<DropdownProps>(({ children, iconProps, menu, ...rest }) => {\n  const { items, ...menuProps } = menu;\n\n  const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n  return (\n    <IconProvider\n      config={{\n        size: 'small',\n        ...iconProps,\n      }}\n    >\n      <AntdDropdown\n        menu={{\n          ...menuProps,\n          items: antdItems,\n        }}\n        {...rest}\n      >\n        {children}\n      </AntdDropdown>\n    </IconProvider>\n  );\n});\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,aAAW,MAAqB,EAAE,UAAU,WAAW,MAAM,GAAG,WAAW;CAC/E,MAAM,EAAE,OAAO,GAAG,cAAc;CAEhC,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC;AAE7E,QACE,oBAAC,cAAD;EACE,QAAQ;GACN,MAAM;GACN,GAAG;GACJ;YAED,oBAACC,UAAD;GACE,MAAM;IACJ,GAAG;IACH,OAAO;IACR;GACD,GAAI;GAEH;GACY,CAAA;EACF,CAAA;EAEjB;AAEF,WAAS,cAAc"}
+{"version":3,"file":"Dropdown.mjs","names":["Dropdown","AntdDropdown"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { Dropdown as AntdDropdown } from 'antd';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu';\n\nimport type { DropdownProps } from './type';\n\n/**\n * @deprecated\n * Use `DropdownMenu` or `ContextMenu` instead\n * @see https://ui.lobehub.com/components/context-menu\n * @see https://ui.lobehub.com/components/dropdown-menu\n */\nconst Dropdown = memo<DropdownProps>(({ children, iconProps, menu, ...rest }) => {\n  const { items, ...menuProps } = menu;\n\n  const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n  return (\n    <IconProvider\n      config={{\n        size: 'small',\n        ...iconProps,\n      }}\n    >\n      <AntdDropdown\n        menu={{\n          ...menuProps,\n          items: antdItems,\n        }}\n        {...rest}\n      >\n        {children}\n      </AntdDropdown>\n    </IconProvider>\n  );\n});\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,aAAW,MAAqB,EAAE,UAAU,WAAW,MAAM,GAAG,WAAW;CAC/E,MAAM,EAAE,OAAO,GAAG,cAAc;CAEhC,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;CAE5E,OACE,oBAAC,cAAD;EACE,QAAQ;GACN,MAAM;GACN,GAAG;EACL;YAEA,oBAACC,UAAD;GACE,MAAM;IACJ,GAAG;IACH,OAAO;GACT;GACA,GAAI;GAEH;EACW,CAAA;CACF,CAAA;AAElB,CAAC;AAED,WAAS,cAAc"}

package/es/Dropdown/index.d.mts

@@ -1,4 +1,4 @@
 import { MenuItemType } from "../Menu/type.mjs";
 import { DropdownProps } from "./type.mjs";
-import { Dropdown } from "./Dropdown.mjs";
-export { MenuItemType as DropdownMenuItemType, DropdownProps, Dropdown as default };
+import Dropdown from "./Dropdown.mjs";
+export { type MenuItemType as DropdownMenuItemType, type DropdownProps, Dropdown as default };

package/es/Dropdown/type.d.mts

@@ -1,12 +1,13 @@
 import { IconContentConfig } from "../Icon/components/IconProvider.mjs";
+import "../Icon/index.mjs";
 import { MenuItemType, MenuProps } from "../Menu/type.mjs";
+import "../Menu/index.mjs";
 import { DropdownProps } from "antd/es/index.js";
-
 //#region src/Dropdown/type.d.ts
 interface DropdownProps$1 extends Omit<DropdownProps, 'menu'> {
   iconProps?: IconContentConfig;
   menu: MenuProps;
 }
 //#endregion
-export { DropdownProps$1 as DropdownProps };
+export { type MenuItemType as DropdownMenuItemType, DropdownProps$1 as DropdownProps };
 //# sourceMappingURL=type.d.mts.map

package/es/DropdownMenu/index.d.mts

@@ -2,5 +2,6 @@ import { IconSpaceMode } from "../Menu/renderUtils.mjs";
 import { renderDropdownMenuItems } from "../base-ui/DropdownMenu/renderItems.mjs";
 import { DropdownItem, DropdownMenuCheckboxItem, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuSwitchItem as DropdownMenuSwitchItem$1 } from "../base-ui/DropdownMenu/type.mjs";
 import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "../base-ui/DropdownMenu/atoms.mjs";
-import { DropdownMenu } from "../base-ui/DropdownMenu/DropdownMenu.mjs";
-export { DropdownItem, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuCheckboxItemProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuGroupLabelProps, DropdownMenuHeader, DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemContentProps, DropdownMenuItemDesc, DropdownMenuItemDescProps, DropdownMenuItemExtra, DropdownMenuItemExtraProps, DropdownMenuItemIcon, DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuItemLabelGroupProps, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuPositioner, DropdownMenuPositionerProps, DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuScrollViewportProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, DropdownMenuSwitchItemProps, DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, DropdownMenuTriggerProps, IconSpaceMode, DropdownMenu as default, renderDropdownMenuItems };
+import DropdownMenu from "../base-ui/DropdownMenu/DropdownMenu.mjs";
+import "../base-ui/DropdownMenu/index.mjs";
+export { type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, type IconSpaceMode, DropdownMenu as default, renderDropdownMenuItems };

package/es/EditableText/ControlInput.d.mts

@@ -1,5 +1,7 @@
 import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
 import { InputProps } from "../Input/type.mjs";
+import "../Input/index.mjs";
 //#region src/EditableText/ControlInput.d.ts
 interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
   onChange?: (value: string) => void;

package/es/EditableText/ControlInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ControlInput.mjs","names":["Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<InputRef>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,KAAK;CAClC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,GAAG;CAEvD,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,MAAI,UAAU,KAAA,EAAW,UAAS,MAAM;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB;AACzB,aAAW,MAAM;AACjB,OAAK,SAAS,MAAM;AACpB,gBAAc,MAAM;;AAGtB,QACE,oBAAC,OAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;GACJ;EACD,QACE,UAAU,QACR,oBAAC,QAAD,EAAQ,CAAA,GAER,qBAACA,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;IACT;aANH,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,cAAS,SAAS,GAAG;;IAEvB,CAAA,EACF,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;AACd,OAAE,gBAAgB;AAClB,mBAAc;;IAEhB,CAAA,CACM;;EAGL;EACT,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,MAAM;AACxB,qBAAkB,EAAE,OAAO,MAAM;;EAEnC,mBAAmB,MAAM;AACvB,kBAAe,UAAU;AACzB,sBAAmB,EAAE;;EAEvB,qBAAqB,MAAM;AACzB,kBAAe,UAAU;AACzB,wBAAqB,EAAE;;EAEzB,eAAe,MAAM;AACnB,OAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;AAC1C,MAAE,gBAAgB;AAClB,kBAAc;AACd,mBAAe,EAAE;;;EAGrB,GAAI;EACJ,CAAA;EAGP;AAED,aAAa,cAAc"}
+{"version":3,"file":"ControlInput.mjs","names":["Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<InputRef>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,IAAI;CACjC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAAC,OAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACA,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;aANF,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}

package/es/EditableText/EditableText.d.mts

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

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;AAEF,YACE,aACM;AACJ,YAAU,MAAM;IAElB;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CACF;CAED,MAAM,SAAS,cAAc;AAC3B,MAAI,CAAC,KAAM,QAAO;AAClB,UAAQ,MAAR;GACE,KAAK,QACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,QACH,QAAO;;IAGV,CAAC,KAAK,CAAC;CAEV,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,MAAM;EACrC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;GACZ;EACO;EACE;EACD;EACQ;EACjB,cAAc,MAAM;AAClB,iBAAc,EAAE;AAChB,aAAU,MAAM;;EAElB,GAAI;EACJ,CAAA;CAGJ,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EACnB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,CAAA,CAEH,EAAA,CAAA;AAGL,QACE,oBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,UAAU;EAC1C;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;GACZ;EACD,GAAI;YAEH,SAAS,QAAQ;EACV,CAAA;EAGf;AAED,aAAa,cAAc"}
+{"version":3,"file":"EditableText.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;YAEH,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/EditableText/index.d.mts

@@ -1,3 +1,3 @@
 import { EditableTextProps } from "./type.mjs";
-import { EditableText } from "./EditableText.mjs";
-export { EditableTextProps, EditableText as default };
+import EditableText from "./EditableText.mjs";
+export { type EditableTextProps, EditableText as default };

package/es/EditableText/type.d.mts

@@ -1,7 +1,7 @@
 import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
 import { ControlInputProps } from "./ControlInput.mjs";
 import { CSSProperties } from "react";
-
 //#region src/EditableText/type.d.ts
 interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | 'onFocus'>, Pick<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'variant' | 'onBlur' | 'onFocus' | 'size'> {
   className?: string;
@@ -10,6 +10,10 @@ interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | '
     input?: string;
   };
   editing?: boolean;
+  /**
+   * @default 8
+   */
+  gap?: number;
   inputProps?: Omit<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'className' | 'style' | 'onBlur' | 'onFocus' | 'size'>;
   onEditingChange?: (editing: boolean) => void;
   showEditIcon?: boolean;
@@ -18,6 +22,10 @@ interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | '
     container?: CSSProperties;
     input?: CSSProperties;
   };
+  /**
+   * @default 'borderless'
+   */
+  variant?: ControlInputProps['variant'];
 }
 //#endregion
 export { EditableTextProps };

package/es/EditorSlashMenu/EditorSlashMenu.d.mts

@@ -2,31 +2,41 @@ import { EditorSlashMenuHiddenInput, EditorSlashMenuList, EditorSlashMenuPopup,
 import { EditorSlashMenuItems, EditorSlashMenuOption } from "./type.mjs";
 import React from "react";
 import { AutocompleteRootChangeEventDetails, AutocompleteRootProps } from "@base-ui/react/autocomplete";
-
 //#region src/EditorSlashMenu/EditorSlashMenu.d.ts
 type Props = {
-  /** Anchor for positioning (caret virtual element, dom element, ref, etc.) */anchor?: React.ComponentProps<typeof EditorSlashMenuPositioner>['anchor'];
-  defaultOpen?: boolean; /** Initial query string (uncontrolled) */
-  defaultValue?: string; /** Optional custom empty state */
+  /** Anchor for positioning (caret virtual element, dom element, ref, etc.) */
+  anchor?: React.ComponentProps<typeof EditorSlashMenuPositioner>['anchor'];
+  defaultOpen?: boolean;
+  /** Initial query string (uncontrolled) */
+  defaultValue?: string;
+  /** Optional custom empty state */
   empty?: React.ReactNode;
   hiddenInputProps?: React.ComponentProps<typeof EditorSlashMenuHiddenInput>;
   items: EditorSlashMenuItems;
   listProps?: React.ComponentProps<typeof EditorSlashMenuList>;
   onOpenChange?: (open: boolean, details: AutocompleteRootChangeEventDetails) => void;
-  onOpenChangeComplete?: (open: boolean) => void; /** Called when a command is selected. */
-  onSelect?: (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void; /** Called when query changes. By default, changes caused by item selection are ignored. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /** Called when a command is selected. */
+  onSelect?: (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;
+  /** Called when query changes. By default, changes caused by item selection are ignored. */
   onValueChange?: (value: string, details: AutocompleteRootChangeEventDetails) => void;
   open?: boolean;
   popupProps?: React.ComponentProps<typeof EditorSlashMenuPopup>;
   portalProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPortal>, 'container'> & {
     container?: HTMLElement | null;
   };
-  positionerProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPositioner>, 'anchor'>; /** Optional custom group label renderer */
-  renderGroupLabel?: (label: string) => React.ReactNode; /** Optional custom item renderer */
-  renderItem?: (item: EditorSlashMenuOption) => React.ReactNode; /** Reserve icon space even when icon is missing */
-  reserveIconSpace?: boolean; /** Pass-through props */
-  rootProps?: Omit<AutocompleteRootProps<EditorSlashMenuOption>, 'items' | 'value' | 'defaultValue' | 'onValueChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete' | 'itemToStringValue'>; /** Whether selecting an item should propagate its filled value via `onValueChange`. */
-  updateValueOnSelect?: boolean; /** Current query string (controlled) */
+  positionerProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPositioner>, 'anchor'>;
+  /** Optional custom group label renderer */
+  renderGroupLabel?: (label: string) => React.ReactNode;
+  /** Optional custom item renderer */
+  renderItem?: (item: EditorSlashMenuOption) => React.ReactNode;
+  /** Reserve icon space even when icon is missing */
+  reserveIconSpace?: boolean;
+  /** Pass-through props */
+  rootProps?: Omit<AutocompleteRootProps<EditorSlashMenuOption>, 'items' | 'value' | 'defaultValue' | 'onValueChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete' | 'itemToStringValue'>;
+  /** Whether selecting an item should propagate its filled value via `onValueChange`. */
+  updateValueOnSelect?: boolean;
+  /** Current query string (controlled) */
   value?: string;
   /**
    * Render a visually-hidden input element for keyboard navigation / screen readers.
@@ -36,5 +46,5 @@ type Props = {
 };
 declare const EditorSlashMenu: React.NamedExoticComponent<Props>;
 //#endregion
-export { EditorSlashMenu };
+export { EditorSlashMenu as default };
 //# sourceMappingURL=EditorSlashMenu.d.mts.map

package/es/EditorSlashMenu/EditorSlashMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSlashMenu.mjs","names":[],"sources":["../../src/EditorSlashMenu/EditorSlashMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AutocompleteRootChangeEventDetails,\n  type AutocompleteRootProps,\n} from '@base-ui/react/autocomplete';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n  EditorSlashMenuEmpty,\n  EditorSlashMenuGroup,\n  EditorSlashMenuGroupLabel,\n  EditorSlashMenuHiddenInput,\n  EditorSlashMenuList,\n  EditorSlashMenuPopup,\n  EditorSlashMenuPortal,\n  EditorSlashMenuPositioner,\n  EditorSlashMenuRoot,\n} from './atoms';\nimport { MenuItemRenderer } from './MenuItemRenderer';\nimport { type EditorSlashMenuItems, type EditorSlashMenuOption as ItemType } from './type';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useNormalizedItems } from './useNormalizedItems';\nimport { isGroup } from './utils';\n\ntype Props = {\n  /** Anchor for positioning (caret virtual element, dom element, ref, etc.) */\n  anchor?: React.ComponentProps<typeof EditorSlashMenuPositioner>['anchor'];\n  defaultOpen?: boolean;\n\n  /** Initial query string (uncontrolled) */\n  defaultValue?: string;\n  /** Optional custom empty state */\n  empty?: React.ReactNode;\n  hiddenInputProps?: React.ComponentProps<typeof EditorSlashMenuHiddenInput>;\n  items: EditorSlashMenuItems;\n\n  listProps?: React.ComponentProps<typeof EditorSlashMenuList>;\n  onOpenChange?: (open: boolean, details: AutocompleteRootChangeEventDetails) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  /** Called when a command is selected. */\n  onSelect?: (item: ItemType, details: AutocompleteRootChangeEventDetails) => void;\n\n  /** Called when query changes. By default, changes caused by item selection are ignored. */\n  onValueChange?: (value: string, details: AutocompleteRootChangeEventDetails) => void;\n\n  open?: boolean;\n  popupProps?: React.ComponentProps<typeof EditorSlashMenuPopup>;\n  portalProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPortal>, 'container'> & {\n    container?: HTMLElement | null;\n  };\n  positionerProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPositioner>, 'anchor'>;\n\n  /** Optional custom group label renderer */\n  renderGroupLabel?: (label: string) => React.ReactNode;\n  /** Optional custom item renderer */\n  renderItem?: (item: ItemType) => React.ReactNode;\n  /** Reserve icon space even when icon is missing */\n  reserveIconSpace?: boolean;\n  /** Pass-through props */\n  rootProps?: Omit<\n    AutocompleteRootProps<ItemType>,\n    | 'items'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'open'\n    | 'defaultOpen'\n    | 'onOpenChange'\n    | 'onOpenChangeComplete'\n    | 'itemToStringValue'\n  >;\n  /** Whether selecting an item should propagate its filled value via `onValueChange`. */\n  updateValueOnSelect?: boolean;\n\n  /** Current query string (controlled) */\n  value?: string;\n  /**\n   * Render a visually-hidden input element for keyboard navigation / screen readers.\n   * Default is `false` because slash menus usually live inside an editor input.\n   */\n  withHiddenInput?: boolean;\n};\n\nconst EditorSlashMenu = memo<Props>(\n  ({\n    items,\n    anchor,\n\n    open,\n    defaultOpen,\n    onOpenChange,\n    onOpenChangeComplete,\n\n    value,\n    defaultValue,\n    onValueChange,\n    updateValueOnSelect = false,\n\n    onSelect,\n\n    empty = 'No results',\n    renderGroupLabel,\n    renderItem,\n    reserveIconSpace = true,\n\n    rootProps,\n    portalProps,\n    positionerProps,\n    popupProps,\n    listProps,\n\n    withHiddenInput = false,\n    hiddenInputProps,\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const resolvedOpen = open ?? uncontrolledOpen;\n\n    const { resolvedItems, hasAnyIcon } = useNormalizedItems(items);\n    const { listRef } = useKeyboardNavigation({ isOpen: resolvedOpen });\n\n    const itemToStringValue = useCallback((item: ItemType) => {\n      const kws = item.keywords?.length ? ` ${item.keywords.join(' ')}` : '';\n      return `${item.label}${kws}`;\n    }, []);\n\n    const handleValueChange = useCallback(\n      (nextValue: string, details: AutocompleteRootChangeEventDetails) => {\n        if (!updateValueOnSelect && details.reason === 'item-press') return;\n        onValueChange?.(nextValue, details);\n      },\n      [onValueChange, updateValueOnSelect],\n    );\n\n    const handleSelect = useCallback(\n      (item: ItemType, details: AutocompleteRootChangeEventDetails) => {\n        onSelect?.(item, details);\n      },\n      [onSelect],\n    );\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: AutocompleteRootChangeEventDetails) => {\n        setUncontrolledOpen(nextOpen);\n        onOpenChange?.(nextOpen, details);\n      },\n      [onOpenChange],\n    );\n\n    // Stable ref callback that doesn't depend on listProps object\n    const setListRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        listRef.current = node;\n        const externalRef = (listProps as any)?.ref;\n        if (!externalRef) return;\n        if (typeof externalRef === 'function') {\n          externalRef(node);\n        } else {\n          (externalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n      },\n      [listRef, listProps],\n    );\n\n    // Memoize render props to prevent recreating on every render\n    const menuItemProps = useMemo(\n      () => ({\n        hasAnyIcon,\n        onSelect: handleSelect,\n        renderItem,\n        reserveIconSpace,\n      }),\n      [hasAnyIcon, handleSelect, renderItem, reserveIconSpace],\n    );\n\n    return (\n      <EditorSlashMenuRoot<ItemType>\n        {...(rootProps as any)}\n        defaultOpen={defaultOpen}\n        defaultValue={defaultValue}\n        itemToStringValue={itemToStringValue as any}\n        items={resolvedItems as any}\n        open={open}\n        value={value}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={onOpenChangeComplete}\n        onValueChange={handleValueChange}\n      >\n        {withHiddenInput ? <EditorSlashMenuHiddenInput {...(hiddenInputProps as any)} /> : null}\n\n        <EditorSlashMenuPortal {...(portalProps as any)}>\n          <EditorSlashMenuPositioner {...(positionerProps as any)} anchor={anchor}>\n            <EditorSlashMenuPopup {...(popupProps as any)}>\n              <EditorSlashMenuList {...(listProps as any)} ref={setListRef as any}>\n                {(entry: any) => {\n                  if (isGroup(entry)) {\n                    return (\n                      <EditorSlashMenuGroup\n                        key={entry.label ?? entry.items.map((i: any) => i.value).join('|')}\n                      >\n                        {entry.label\n                          ? (renderGroupLabel?.(entry.label) ?? (\n                              <EditorSlashMenuGroupLabel>{entry.label}</EditorSlashMenuGroupLabel>\n                            ))\n                          : null}\n                        {entry.items.map((item: ItemType) => (\n                          <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />\n                        ))}\n                      </EditorSlashMenuGroup>\n                    );\n                  }\n\n                  const item = entry as ItemType;\n                  return <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />;\n                }}\n              </EditorSlashMenuList>\n\n              <EditorSlashMenuEmpty>{empty}</EditorSlashMenuEmpty>\n            </EditorSlashMenuPopup>\n          </EditorSlashMenuPositioner>\n        </EditorSlashMenuPortal>\n      </EditorSlashMenuRoot>\n    );\n  },\n);\n\nEditorSlashMenu.displayName = 'EditorSlashMenu';\n\nexport default EditorSlashMenu;\n"],"mappings":";;;;;;;;;AAqFA,MAAM,kBAAkB,MACrB,EACC,OACA,QAEA,MACA,aACA,cACA,sBAEA,OACA,cACA,eACA,sBAAsB,OAEtB,UAEA,QAAQ,cACR,kBACA,YACA,mBAAmB,MAEnB,WACA,aACA,iBACA,YACA,WAEA,kBAAkB,OAClB,uBACI;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,eAAe,MAAM;AAE9E,iBAAgB;AACd,MAAI,SAAS,KAAA,EAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,QAAQ;CAE7B,MAAM,EAAE,eAAe,eAAe,mBAAmB,MAAM;CAC/D,MAAM,EAAE,YAAY,sBAAsB,EAAE,QAAQ,cAAc,CAAC;CAEnE,MAAM,oBAAoB,aAAa,SAAmB;EACxD,MAAM,MAAM,KAAK,UAAU,SAAS,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK;AACpE,SAAO,GAAG,KAAK,QAAQ;IACtB,EAAE,CAAC;CAEN,MAAM,oBAAoB,aACvB,WAAmB,YAAgD;AAClE,MAAI,CAAC,uBAAuB,QAAQ,WAAW,aAAc;AAC7D,kBAAgB,WAAW,QAAQ;IAErC,CAAC,eAAe,oBAAoB,CACrC;CAED,MAAM,eAAe,aAClB,MAAgB,YAAgD;AAC/D,aAAW,MAAM,QAAQ;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,mBAAmB,aACtB,UAAmB,YAAgD;AAClE,sBAAoB,SAAS;AAC7B,iBAAe,UAAU,QAAQ;IAEnC,CAAC,aAAa,CACf;CAGD,MAAM,aAAa,aAChB,SAAgC;AAC/B,UAAQ,UAAU;EAClB,MAAM,cAAe,WAAmB;AACxC,MAAI,CAAC,YAAa;AAClB,MAAI,OAAO,gBAAgB,WACzB,aAAY,KAAK;MAEhB,aAA8D,UAAU;IAG7E,CAAC,SAAS,UAAU,CACrB;CAGD,MAAM,gBAAgB,eACb;EACL;EACA,UAAU;EACV;EACA;EACD,GACD;EAAC;EAAY;EAAc;EAAY;EAAiB,CACzD;AAED,QACE,qBAAC,qBAAD;EACE,GAAK;EACQ;EACC;EACK;EACnB,OAAO;EACD;EACC;EACP,cAAc;EACQ;EACtB,eAAe;YAVjB,CAYG,kBAAkB,oBAAC,4BAAD,EAA4B,GAAK,kBAA4B,CAAA,GAAG,MAEnF,oBAAC,uBAAD;GAAuB,GAAK;aAC1B,oBAAC,2BAAD;IAA2B,GAAK;IAAiC;cAC/D,qBAAC,sBAAD;KAAsB,GAAK;eAA3B,CACE,oBAAC,qBAAD;MAAqB,GAAK;MAAmB,KAAK;iBAC9C,UAAe;AACf,WAAI,QAAQ,MAAM,CAChB,QACE,qBAAC,sBAAD,EAAA,UAAA,CAGG,MAAM,QACF,mBAAmB,MAAM,MAAM,IAC9B,oBAAC,2BAAD,EAAA,UAA4B,MAAM,OAAkC,CAAA,GAEtE,MACH,MAAM,MAAM,KAAK,SAChB,8BAAC,kBAAD;QAAkB,GAAI;QAAqB;QAAM,KAAK,KAAK;QAAS,CAAA,CACpE,CACmB,EAAA,EAVhB,MAAM,SAAS,MAAM,MAAM,KAAK,MAAW,EAAE,MAAM,CAAC,KAAK,IAAI,CAU7C;OAI3B,MAAM,OAAO;AACb,cAAO,8BAAC,kBAAD;QAAkB,GAAI;QAAqB;QAAM,KAAK,KAAK;QAAS,CAAA;;MAEzD,CAAA,EAEtB,oBAAC,sBAAD,EAAA,UAAuB,OAA6B,CAAA,CAC/B;;IACG,CAAA;GACN,CAAA,CACJ;;EAG3B;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"EditorSlashMenu.mjs","names":[],"sources":["../../src/EditorSlashMenu/EditorSlashMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AutocompleteRootChangeEventDetails,\n  type AutocompleteRootProps,\n} from '@base-ui/react/autocomplete';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n  EditorSlashMenuEmpty,\n  EditorSlashMenuGroup,\n  EditorSlashMenuGroupLabel,\n  EditorSlashMenuHiddenInput,\n  EditorSlashMenuList,\n  EditorSlashMenuPopup,\n  EditorSlashMenuPortal,\n  EditorSlashMenuPositioner,\n  EditorSlashMenuRoot,\n} from './atoms';\nimport { MenuItemRenderer } from './MenuItemRenderer';\nimport { type EditorSlashMenuItems, type EditorSlashMenuOption as ItemType } from './type';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useNormalizedItems } from './useNormalizedItems';\nimport { isGroup } from './utils';\n\ntype Props = {\n  /** Anchor for positioning (caret virtual element, dom element, ref, etc.) */\n  anchor?: React.ComponentProps<typeof EditorSlashMenuPositioner>['anchor'];\n  defaultOpen?: boolean;\n\n  /** Initial query string (uncontrolled) */\n  defaultValue?: string;\n  /** Optional custom empty state */\n  empty?: React.ReactNode;\n  hiddenInputProps?: React.ComponentProps<typeof EditorSlashMenuHiddenInput>;\n  items: EditorSlashMenuItems;\n\n  listProps?: React.ComponentProps<typeof EditorSlashMenuList>;\n  onOpenChange?: (open: boolean, details: AutocompleteRootChangeEventDetails) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  /** Called when a command is selected. */\n  onSelect?: (item: ItemType, details: AutocompleteRootChangeEventDetails) => void;\n\n  /** Called when query changes. By default, changes caused by item selection are ignored. */\n  onValueChange?: (value: string, details: AutocompleteRootChangeEventDetails) => void;\n\n  open?: boolean;\n  popupProps?: React.ComponentProps<typeof EditorSlashMenuPopup>;\n  portalProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPortal>, 'container'> & {\n    container?: HTMLElement | null;\n  };\n  positionerProps?: Omit<React.ComponentProps<typeof EditorSlashMenuPositioner>, 'anchor'>;\n\n  /** Optional custom group label renderer */\n  renderGroupLabel?: (label: string) => React.ReactNode;\n  /** Optional custom item renderer */\n  renderItem?: (item: ItemType) => React.ReactNode;\n  /** Reserve icon space even when icon is missing */\n  reserveIconSpace?: boolean;\n  /** Pass-through props */\n  rootProps?: Omit<\n    AutocompleteRootProps<ItemType>,\n    | 'items'\n    | 'value'\n    | 'defaultValue'\n    | 'onValueChange'\n    | 'open'\n    | 'defaultOpen'\n    | 'onOpenChange'\n    | 'onOpenChangeComplete'\n    | 'itemToStringValue'\n  >;\n  /** Whether selecting an item should propagate its filled value via `onValueChange`. */\n  updateValueOnSelect?: boolean;\n\n  /** Current query string (controlled) */\n  value?: string;\n  /**\n   * Render a visually-hidden input element for keyboard navigation / screen readers.\n   * Default is `false` because slash menus usually live inside an editor input.\n   */\n  withHiddenInput?: boolean;\n};\n\nconst EditorSlashMenu = memo<Props>(\n  ({\n    items,\n    anchor,\n\n    open,\n    defaultOpen,\n    onOpenChange,\n    onOpenChangeComplete,\n\n    value,\n    defaultValue,\n    onValueChange,\n    updateValueOnSelect = false,\n\n    onSelect,\n\n    empty = 'No results',\n    renderGroupLabel,\n    renderItem,\n    reserveIconSpace = true,\n\n    rootProps,\n    portalProps,\n    positionerProps,\n    popupProps,\n    listProps,\n\n    withHiddenInput = false,\n    hiddenInputProps,\n  }) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const resolvedOpen = open ?? uncontrolledOpen;\n\n    const { resolvedItems, hasAnyIcon } = useNormalizedItems(items);\n    const { listRef } = useKeyboardNavigation({ isOpen: resolvedOpen });\n\n    const itemToStringValue = useCallback((item: ItemType) => {\n      const kws = item.keywords?.length ? ` ${item.keywords.join(' ')}` : '';\n      return `${item.label}${kws}`;\n    }, []);\n\n    const handleValueChange = useCallback(\n      (nextValue: string, details: AutocompleteRootChangeEventDetails) => {\n        if (!updateValueOnSelect && details.reason === 'item-press') return;\n        onValueChange?.(nextValue, details);\n      },\n      [onValueChange, updateValueOnSelect],\n    );\n\n    const handleSelect = useCallback(\n      (item: ItemType, details: AutocompleteRootChangeEventDetails) => {\n        onSelect?.(item, details);\n      },\n      [onSelect],\n    );\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, details: AutocompleteRootChangeEventDetails) => {\n        setUncontrolledOpen(nextOpen);\n        onOpenChange?.(nextOpen, details);\n      },\n      [onOpenChange],\n    );\n\n    // Stable ref callback that doesn't depend on listProps object\n    const setListRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        listRef.current = node;\n        const externalRef = (listProps as any)?.ref;\n        if (!externalRef) return;\n        if (typeof externalRef === 'function') {\n          externalRef(node);\n        } else {\n          (externalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n      },\n      [listRef, listProps],\n    );\n\n    // Memoize render props to prevent recreating on every render\n    const menuItemProps = useMemo(\n      () => ({\n        hasAnyIcon,\n        onSelect: handleSelect,\n        renderItem,\n        reserveIconSpace,\n      }),\n      [hasAnyIcon, handleSelect, renderItem, reserveIconSpace],\n    );\n\n    return (\n      <EditorSlashMenuRoot<ItemType>\n        {...(rootProps as any)}\n        defaultOpen={defaultOpen}\n        defaultValue={defaultValue}\n        itemToStringValue={itemToStringValue as any}\n        items={resolvedItems as any}\n        open={open}\n        value={value}\n        onOpenChange={handleOpenChange}\n        onOpenChangeComplete={onOpenChangeComplete}\n        onValueChange={handleValueChange}\n      >\n        {withHiddenInput ? <EditorSlashMenuHiddenInput {...(hiddenInputProps as any)} /> : null}\n\n        <EditorSlashMenuPortal {...(portalProps as any)}>\n          <EditorSlashMenuPositioner {...(positionerProps as any)} anchor={anchor}>\n            <EditorSlashMenuPopup {...(popupProps as any)}>\n              <EditorSlashMenuList {...(listProps as any)} ref={setListRef as any}>\n                {(entry: any) => {\n                  if (isGroup(entry)) {\n                    return (\n                      <EditorSlashMenuGroup\n                        key={entry.label ?? entry.items.map((i: any) => i.value).join('|')}\n                      >\n                        {entry.label\n                          ? (renderGroupLabel?.(entry.label) ?? (\n                              <EditorSlashMenuGroupLabel>{entry.label}</EditorSlashMenuGroupLabel>\n                            ))\n                          : null}\n                        {entry.items.map((item: ItemType) => (\n                          <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />\n                        ))}\n                      </EditorSlashMenuGroup>\n                    );\n                  }\n\n                  const item = entry as ItemType;\n                  return <MenuItemRenderer {...menuItemProps} item={item} key={item.value} />;\n                }}\n              </EditorSlashMenuList>\n\n              <EditorSlashMenuEmpty>{empty}</EditorSlashMenuEmpty>\n            </EditorSlashMenuPopup>\n          </EditorSlashMenuPositioner>\n        </EditorSlashMenuPortal>\n      </EditorSlashMenuRoot>\n    );\n  },\n);\n\nEditorSlashMenu.displayName = 'EditorSlashMenu';\n\nexport default EditorSlashMenu;\n"],"mappings":";;;;;;;;;AAqFA,MAAM,kBAAkB,MACrB,EACC,OACA,QAEA,MACA,aACA,cACA,sBAEA,OACA,cACA,eACA,sBAAsB,OAEtB,UAEA,QAAQ,cACR,kBACA,YACA,mBAAmB,MAEnB,WACA,aACA,iBACA,YACA,WAEA,kBAAkB,OAClB,uBACI;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,eAAe,KAAK;CAE7E,gBAAgB;EACd,IAAI,SAAS,KAAA,GAAW;EACxB,oBAAoB,IAAI;CAC1B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,eAAe,QAAQ;CAE7B,MAAM,EAAE,eAAe,eAAe,mBAAmB,KAAK;CAC9D,MAAM,EAAE,YAAY,sBAAsB,EAAE,QAAQ,aAAa,CAAC;CAElE,MAAM,oBAAoB,aAAa,SAAmB;EACxD,MAAM,MAAM,KAAK,UAAU,SAAS,IAAI,KAAK,SAAS,KAAK,GAAG,MAAM;EACpE,OAAO,GAAG,KAAK,QAAQ;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB,aACvB,WAAmB,YAAgD;EAClE,IAAI,CAAC,uBAAuB,QAAQ,WAAW,cAAc;EAC7D,gBAAgB,WAAW,OAAO;CACpC,GACA,CAAC,eAAe,mBAAmB,CACrC;CAEA,MAAM,eAAe,aAClB,MAAgB,YAAgD;EAC/D,WAAW,MAAM,OAAO;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,mBAAmB,aACtB,UAAmB,YAAgD;EAClE,oBAAoB,QAAQ;EAC5B,eAAe,UAAU,OAAO;CAClC,GACA,CAAC,YAAY,CACf;CAGA,MAAM,aAAa,aAChB,SAAgC;EAC/B,QAAQ,UAAU;EAClB,MAAM,cAAe,WAAmB;EACxC,IAAI,CAAC,aAAa;EAClB,IAAI,OAAO,gBAAgB,YACzB,YAAY,IAAI;OAEhB,YAA+D,UAAU;CAE7E,GACA,CAAC,SAAS,SAAS,CACrB;CAGA,MAAM,gBAAgB,eACb;EACL;EACA,UAAU;EACV;EACA;CACF,IACA;EAAC;EAAY;EAAc;EAAY;CAAgB,CACzD;CAEA,OACE,qBAAC,qBAAD;EACE,GAAK;EACQ;EACC;EACK;EACnB,OAAO;EACD;EACC;EACP,cAAc;EACQ;EACtB,eAAe;YAVjB,CAYG,kBAAkB,oBAAC,4BAAD,EAA4B,GAAK,iBAA2B,CAAA,IAAI,MAEnF,oBAAC,uBAAD;GAAuB,GAAK;aAC1B,oBAAC,2BAAD;IAA2B,GAAK;IAAiC;cAC/D,qBAAC,sBAAD;KAAsB,GAAK;eAA3B,CACE,oBAAC,qBAAD;MAAqB,GAAK;MAAmB,KAAK;iBAC9C,UAAe;OACf,IAAI,QAAQ,KAAK,GACf,OACE,qBAAC,sBAAD,EAAA,UAAA,CAGG,MAAM,QACF,mBAAmB,MAAM,KAAK,KAC7B,oBAAC,2BAAD,EAAA,UAA4B,MAAM,MAAiC,CAAA,IAErE,MACH,MAAM,MAAM,KAAK,SAChB,8BAAC,kBAAD;QAAkB,GAAI;QAAqB;QAAM,KAAK,KAAK;OAAQ,CAAA,CACpE,CACmB,EAAA,GAVf,MAAM,SAAS,MAAM,MAAM,KAAK,MAAW,EAAE,KAAK,CAAC,CAAC,KAAK,GAAG,CAU7C;OAI1B,MAAM,OAAO;OACb,OAAO,8BAAC,kBAAD;QAAkB,GAAI;QAAqB;QAAM,KAAK,KAAK;OAAQ,CAAA;MAC5E;KACmB,CAAA,GAErB,oBAAC,sBAAD,EAAA,UAAuB,MAA4B,CAAA,CAC/B;;GACG,CAAA;EACN,CAAA,CACJ;;AAEzB,CACF;AAEA,gBAAgB,cAAc"}

package/es/EditorSlashMenu/MenuItemRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemRenderer.mjs","names":[],"sources":["../../src/EditorSlashMenu/MenuItemRenderer.tsx"],"sourcesContent":["import type { AutocompleteRootChangeEventDetails } from '@base-ui/react/autocomplete';\nimport { memo } from 'react';\n\nimport {\n  EditorSlashMenuItem,\n  EditorSlashMenuItemContent,\n  EditorSlashMenuItemExtra,\n  EditorSlashMenuItemIcon,\n  EditorSlashMenuItemLabel,\n} from './atoms';\nimport type { EditorSlashMenuOption } from './type';\n\ninterface MenuItemRendererProps {\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  onSelect: (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;\n  renderItem?: (item: EditorSlashMenuOption) => React.ReactNode;\n  reserveIconSpace: boolean;\n}\n\nconst DefaultItemContent = memo<{\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  reserveIconSpace: boolean;\n}>(({ item, hasAnyIcon, reserveIconSpace }) => (\n  <EditorSlashMenuItemContent>\n    <EditorSlashMenuItemIcon aria-hidden={!hasAnyIcon && !reserveIconSpace}>\n      {item.icon ?? (reserveIconSpace && hasAnyIcon ? <span /> : null)}\n    </EditorSlashMenuItemIcon>\n    <EditorSlashMenuItemLabel>{item.label}</EditorSlashMenuItemLabel>\n    {item.extra ? <EditorSlashMenuItemExtra>{item.extra}</EditorSlashMenuItemExtra> : null}\n  </EditorSlashMenuItemContent>\n));\n\nDefaultItemContent.displayName = 'DefaultItemContent';\n\nexport const MenuItemRenderer = memo<MenuItemRendererProps>(\n  ({ hasAnyIcon, item, onSelect, renderItem, reserveIconSpace }) => {\n    const content = renderItem?.(item) ?? (\n      <DefaultItemContent hasAnyIcon={hasAnyIcon} item={item} reserveIconSpace={reserveIconSpace} />\n    );\n\n    return (\n      <EditorSlashMenuItem\n        danger={item.danger}\n        disabled={item.disabled}\n        key={item.value}\n        value={item as any}\n        onClick={(e) => {\n          if (item.disabled) {\n            e.preventDefault();\n            return;\n          }\n          onSelect(item, { event: e as any, reason: 'item-press' } as any);\n        }}\n      >\n        {content}\n      </EditorSlashMenuItem>\n    );\n  },\n);\n\nMenuItemRenderer.displayName = 'MenuItemRenderer';\n"],"mappings":";;;;AAoBA,MAAM,qBAAqB,MAIvB,EAAE,MAAM,YAAY,uBACtB,qBAAC,4BAAD,EAAA,UAAA;CACE,oBAAC,yBAAD;EAAyB,eAAa,CAAC,cAAc,CAAC;YACnD,KAAK,SAAS,oBAAoB,aAAa,oBAAC,QAAD,EAAQ,CAAA,GAAG;EACnC,CAAA;CAC1B,oBAAC,0BAAD,EAAA,UAA2B,KAAK,OAAiC,CAAA;CAChE,KAAK,QAAQ,oBAAC,0BAAD,EAAA,UAA2B,KAAK,OAAiC,CAAA,GAAG;CACvD,EAAA,CAAA,CAC7B;AAEF,mBAAmB,cAAc;AAEjC,MAAa,mBAAmB,MAC7B,EAAE,YAAY,MAAM,UAAU,YAAY,uBAAuB;CAChE,MAAM,UAAU,aAAa,KAAK,IAChC,oBAAC,oBAAD;EAAgC;EAAkB;EAAwB;EAAoB,CAAA;AAGhG,QACE,oBAAC,qBAAD;EACE,QAAQ,KAAK;EACb,UAAU,KAAK;EAEf,OAAO;EACP,UAAU,MAAM;AACd,OAAI,KAAK,UAAU;AACjB,MAAE,gBAAgB;AAClB;;AAEF,YAAS,MAAM;IAAE,OAAO;IAAU,QAAQ;IAAc,CAAQ;;YAGjE;EACmB,EAXf,KAAK,MAWU;EAG3B;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"MenuItemRenderer.mjs","names":[],"sources":["../../src/EditorSlashMenu/MenuItemRenderer.tsx"],"sourcesContent":["import type { AutocompleteRootChangeEventDetails } from '@base-ui/react/autocomplete';\nimport { memo } from 'react';\n\nimport {\n  EditorSlashMenuItem,\n  EditorSlashMenuItemContent,\n  EditorSlashMenuItemExtra,\n  EditorSlashMenuItemIcon,\n  EditorSlashMenuItemLabel,\n} from './atoms';\nimport type { EditorSlashMenuOption } from './type';\n\ninterface MenuItemRendererProps {\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  onSelect: (item: EditorSlashMenuOption, details: AutocompleteRootChangeEventDetails) => void;\n  renderItem?: (item: EditorSlashMenuOption) => React.ReactNode;\n  reserveIconSpace: boolean;\n}\n\nconst DefaultItemContent = memo<{\n  hasAnyIcon: boolean;\n  item: EditorSlashMenuOption;\n  reserveIconSpace: boolean;\n}>(({ item, hasAnyIcon, reserveIconSpace }) => (\n  <EditorSlashMenuItemContent>\n    <EditorSlashMenuItemIcon aria-hidden={!hasAnyIcon && !reserveIconSpace}>\n      {item.icon ?? (reserveIconSpace && hasAnyIcon ? <span /> : null)}\n    </EditorSlashMenuItemIcon>\n    <EditorSlashMenuItemLabel>{item.label}</EditorSlashMenuItemLabel>\n    {item.extra ? <EditorSlashMenuItemExtra>{item.extra}</EditorSlashMenuItemExtra> : null}\n  </EditorSlashMenuItemContent>\n));\n\nDefaultItemContent.displayName = 'DefaultItemContent';\n\nexport const MenuItemRenderer = memo<MenuItemRendererProps>(\n  ({ hasAnyIcon, item, onSelect, renderItem, reserveIconSpace }) => {\n    const content = renderItem?.(item) ?? (\n      <DefaultItemContent hasAnyIcon={hasAnyIcon} item={item} reserveIconSpace={reserveIconSpace} />\n    );\n\n    return (\n      <EditorSlashMenuItem\n        danger={item.danger}\n        disabled={item.disabled}\n        key={item.value}\n        value={item as any}\n        onClick={(e) => {\n          if (item.disabled) {\n            e.preventDefault();\n            return;\n          }\n          onSelect(item, { event: e as any, reason: 'item-press' } as any);\n        }}\n      >\n        {content}\n      </EditorSlashMenuItem>\n    );\n  },\n);\n\nMenuItemRenderer.displayName = 'MenuItemRenderer';\n"],"mappings":";;;;AAoBA,MAAM,qBAAqB,MAIvB,EAAE,MAAM,YAAY,uBACtB,qBAAC,4BAAD,EAAA,UAAA;CACE,oBAAC,yBAAD;EAAyB,eAAa,CAAC,cAAc,CAAC;YACnD,KAAK,SAAS,oBAAoB,aAAa,oBAAC,QAAD,CAAO,CAAA,IAAI;CACpC,CAAA;CACzB,oBAAC,0BAAD,EAAA,UAA2B,KAAK,MAAgC,CAAA;CAC/D,KAAK,QAAQ,oBAAC,0BAAD,EAAA,UAA2B,KAAK,MAAgC,CAAA,IAAI;AACxD,EAAA,CAAA,CAC7B;AAED,mBAAmB,cAAc;AAEjC,MAAa,mBAAmB,MAC7B,EAAE,YAAY,MAAM,UAAU,YAAY,uBAAuB;CAChE,MAAM,UAAU,aAAa,IAAI,KAC/B,oBAAC,oBAAD;EAAgC;EAAkB;EAAwB;CAAmB,CAAA;CAG/F,OACE,oBAAC,qBAAD;EACE,QAAQ,KAAK;EACb,UAAU,KAAK;EAEf,OAAO;EACP,UAAU,MAAM;GACd,IAAI,KAAK,UAAU;IACjB,EAAE,eAAe;IACjB;GACF;GACA,SAAS,MAAM;IAAE,OAAO;IAAU,QAAQ;GAAa,CAAQ;EACjE;YAEC;CACkB,GAXd,KAAK,KAWS;AAEzB,CACF;AAEA,iBAAiB,cAAc"}