react-public-components 0.1.0

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../CollapseBox/index.tsx","../src/icons.tsx","../Splitter/index.tsx"],"sourcesContent":["// 统一入口\nexport { default as CollapseBox } from '../CollapseBox';\nexport type {\n  CollapseBoxProps,\n  CollapseBoxDirection,\n  CollapseBoxButtonPosition,\n} from '../CollapseBox';\n\nexport { default as Splitter } from '../Splitter';\nexport type {\n  SplitterProps,\n  SplitterPanelProps,\n  SplitterSize,\n  SplitterOrientation,\n} from '../Splitter';\n","import { useState, type CSSProperties, type ReactNode } from 'react';\nimport { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '../src/icons';\nimport './index.less';\n\nexport type CollapseBoxDirection = 'horizontal' | 'vertical';\nexport type CollapseBoxButtonPosition = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface CollapseBoxProps {\n  children?: ReactNode;\n  title?: string;\n  direction?: CollapseBoxDirection;\n  buttonPosition?: CollapseBoxButtonPosition;\n  defaultWidth?: number;\n  defaultHeight?: number;\n  contentPadding?: string;\n  headerHeight?: number;\n}\n\nconst isNumber = (value: unknown): value is number => typeof value === 'number' && !Number.isNaN(value);\n\nconst ChevronLeft = () => <LeftOutlined />;\n\nconst ChevronRight = () => <RightOutlined />;\n\nconst ChevronUp = () => <UpOutlined />;\n\nconst ChevronDown = () => <DownOutlined />;\n\nconst CollapsibleBox = ({\n  children,\n  title = '内容区域',\n  direction = 'horizontal',\n  buttonPosition = 'right',\n  defaultWidth = 600,\n  defaultHeight = 300,\n  contentPadding = '16px',\n  headerHeight = 16,\n}: CollapseBoxProps) => {\n  const [isExpanded, setIsExpanded] = useState(true);\n  const contentMaxHeight = isNumber(defaultHeight) ? defaultHeight - headerHeight : '100%';\n\n  const getIcon = () => {\n    if (direction === 'horizontal') {\n      if (buttonPosition === 'right') {\n        return isExpanded ? <ChevronRight /> : <ChevronLeft />;\n      } else {\n        return isExpanded ? <ChevronLeft /> : <ChevronRight />;\n      }\n    } else {\n      if (buttonPosition === 'bottom') {\n        return isExpanded ? <ChevronUp /> : <ChevronDown />;\n      } else {\n        return isExpanded ? <ChevronDown /> : <ChevronUp />;\n      }\n    }\n  };\n\n  const getButtonClass = () => {\n    if (direction === 'horizontal') {\n      return buttonPosition === 'right' ? 'button-right' : 'button-left';\n    } else {\n      return buttonPosition === 'bottom' ? 'button-bottom' : 'button-top';\n    }\n  };\n\n  const getContainerStyle = (): CSSProperties => {\n    const resolvedHeight = isNumber(defaultHeight) ? `${defaultHeight}px` : defaultHeight;\n    if (direction === 'horizontal') {\n      return {\n        width: isExpanded ? defaultWidth : '0px',\n        height: resolvedHeight,\n        minWidth: 0,\n      };\n    } else {\n      return {\n        height: isExpanded ? resolvedHeight : '0px',\n        width: defaultWidth,\n        minHeight: 0,\n      };\n    }\n  };\n\n  const wrapperClass =\n    direction === 'horizontal' ? 'collapsible-wrapper horizontal' : 'collapsible-wrapper vertical';\n\n  const containerClass =\n    direction === 'horizontal' && buttonPosition === 'right'\n      ? 'collapsible-container align-right'\n      : 'collapsible-container';\n  const height = isNumber(contentMaxHeight) ? contentMaxHeight + 'px' : '100%';\n  const contentStyle: CSSProperties = {\n    maxHeight: direction === 'vertical' ? (isExpanded ? `${height}` : '0px') : `${height}`,\n    overflowY: 'auto',\n    padding: direction === 'vertical' && !isExpanded ? '0px' : contentPadding,\n    boxSizing: 'border-box',\n  };\n\n  // 折叠时（纵向 + 底部按钮）：按钮需切换为 top:0 定位，使其显示在折叠线下方\n  const buttonStyle: CSSProperties =\n    direction === 'vertical' && buttonPosition === 'bottom' && !isExpanded\n      ? { top: '0px', bottom: 'auto' }\n      : {};\n\n  // 让 wrapper 高度跟随容器，确保 bottom:0 的按钮贴住容器底部\n  // 折叠时 wrapper 高度为 0，配合按钮的 translateY(-100%) 让按钮显示在折叠线上方\n  const wrapperStyle: CSSProperties | undefined =\n    direction === 'vertical'\n      ? isExpanded\n        ? {\n            height: isNumber(defaultHeight) ? `${defaultHeight}px` : undefined,\n            width: defaultWidth,\n          }\n        : { height: 0, width: defaultWidth }\n      : undefined;\n\n  return (\n    <div className={wrapperClass} style={wrapperStyle}>\n      <div style={getContainerStyle()} className={containerClass}>\n        {title && (\n          <div className=\"collapsible-header\" style={{ display: 'none' }}>\n            <h3>{title}</h3>\n          </div>\n        )}\n\n        <div className=\"collapsible-content\" style={contentStyle}>\n          {children}\n        </div>\n      </div>\n\n      <div\n        onClick={() => setIsExpanded(!isExpanded)}\n        className={`toggle-button ${getButtonClass()}`}\n        style={buttonStyle}\n        title={isExpanded ? '隐藏' : '展开'}\n      >\n        {getIcon()}\n      </div>\n    </div>\n  );\n};\n\nexport default CollapsibleBox;\n","import type { CSSProperties } from 'react';\n\ninterface IconProps {\n  style?: CSSProperties;\n  className?: string;\n}\n\nconst baseStyle: CSSProperties = {\n  display: 'inline-block',\n  width: '1em',\n  height: '1em',\n  verticalAlign: '-0.125em',\n};\n\nexport const LeftOutlined = ({ style, className }: IconProps) => (\n  <svg\n    viewBox=\"0 0 1024 1024\"\n    focusable=\"false\"\n    data-icon=\"left\"\n    width=\"1em\"\n    height=\"1em\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    style={{ ...baseStyle, ...style }}\n    className={className}\n  >\n    <path d=\"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z\" />\n  </svg>\n);\n\nexport const RightOutlined = ({ style, className }: IconProps) => (\n  <svg\n    viewBox=\"0 0 1024 1024\"\n    focusable=\"false\"\n    data-icon=\"right\"\n    width=\"1em\"\n    height=\"1em\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    style={{ ...baseStyle, ...style }}\n    className={className}\n  >\n    <path d=\"M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z\" />\n  </svg>\n);\n\nexport const UpOutlined = ({ style, className }: IconProps) => (\n  <svg\n    viewBox=\"0 0 1024 1024\"\n    focusable=\"false\"\n    data-icon=\"up\"\n    width=\"1em\"\n    height=\"1em\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    style={{ ...baseStyle, ...style }}\n    className={className}\n  >\n    <path d=\"M890.5 755.3L537.4 268a31.96 31.96 0 00-50.8 0L133.5 755.3a7.95 7.95 0 006.3 12.7h75.5c4.9 0 9.6-2.3 12.6-6.1l281-360 281 360c3 3.8 7.7 6.1 12.6 6.1h75.5c6.7 0 10.4-7.6 6.1-12.7z\" />\n  </svg>\n);\n\nexport const DownOutlined = ({ style, className }: IconProps) => (\n  <svg\n    viewBox=\"0 0 1024 1024\"\n    focusable=\"false\"\n    data-icon=\"down\"\n    width=\"1em\"\n    height=\"1em\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    style={{ ...baseStyle, ...style }}\n    className={className}\n  >\n    <path d=\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 37 17.6 49.8 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\" />\n  </svg>\n);\n","import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '../src/icons';\r\nimport type {\r\n  CSSProperties,\r\n  ReactElement,\r\n  ReactNode,\r\n  PointerEvent as ReactPointerEvent,\r\n} from 'react';\r\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nexport type SplitterSize = number | `${number}%`;\r\nexport type SplitterOrientation = 'horizontal' | 'vertical';\r\n\r\nexport type SplitterPanelProps = {\r\n  children?: ReactNode;\r\n  collapsible?: boolean;\r\n  defaultSize?: SplitterSize;\r\n  max?: SplitterSize;\r\n  min?: SplitterSize;\r\n  resizable?: boolean;\r\n  size?: SplitterSize;\r\n  style?: CSSProperties;\r\n};\r\n\r\nexport type SplitterProps = {\r\n  children: ReactNode;\r\n  className?: string;\r\n  lazy?: boolean;\r\n  onResize?: (sizes: number[]) => void;\r\n  onResizeEnd?: (sizes: number[]) => void;\r\n  onResizeStart?: (sizes: number[]) => void;\r\n  orientation?: SplitterOrientation;\r\n  style?: CSSProperties;\r\n  vertical?: boolean;\r\n};\r\n\r\ntype SplitterComponent = React.FC<SplitterProps> & {\r\n  Panel: React.FC<SplitterPanelProps>;\r\n};\r\n\r\nconst DRAGGER_SIZE = 8;\r\nconst MIN_PANEL_SIZE = 0;\r\n\r\nconst SplitterPanel: React.FC<SplitterPanelProps> = ({ children }) => <>{children}</>;\r\n\r\nconst isPercentSize = (value: SplitterSize): value is `${number}%` =>\r\n  typeof value === 'string' && value.endsWith('%');\r\n\r\nconst parseSize = (value: SplitterSize | undefined, total: number, fallback: number) => {\r\n  if (value === undefined) {\r\n    return fallback;\r\n  }\r\n\r\n  if (isPercentSize(value)) {\r\n    return (Number.parseFloat(value) / 100) * total;\r\n  }\r\n\r\n  return Number(value);\r\n};\r\n\r\nconst roundSizes = (sizes: number[]) => sizes.map((size) => Math.round(size));\r\n\r\nconst getPointerPosition = (\r\n  event: PointerEvent | ReactPointerEvent,\r\n  orientation: SplitterOrientation,\r\n) => (orientation === 'horizontal' ? event.clientX : event.clientY);\r\n\r\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\r\n\r\nconst CustomSplitter: SplitterComponent = ({\r\n  children,\r\n  className,\r\n  lazy = false,\r\n  onResize,\r\n  onResizeEnd,\r\n  onResizeStart,\r\n  orientation,\r\n  style,\r\n  vertical = false,\r\n}) => {\r\n  const resolvedOrientation = orientation ?? (vertical ? 'vertical' : 'horizontal');\r\n  const rootRef = useRef<HTMLDivElement>(null);\r\n  const sizesRef = useRef<number[]>([]);\r\n  const lastNonZeroSizesRef = useRef<number[]>([]);\r\n  const [containerSize, setContainerSize] = useState(0);\r\n  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);\r\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\r\n  const [sizes, setSizes] = useState<number[]>([]);\r\n\r\n  const panels = useMemo(\r\n    () =>\r\n      React.Children.toArray(children).filter(\r\n        React.isValidElement,\r\n      ) as ReactElement<SplitterPanelProps>[],\r\n    [children],\r\n  );\r\n\r\n  const trackSize = Math.max(0, containerSize - Math.max(0, panels.length - 1) * DRAGGER_SIZE);\r\n\r\n  const getPanelMin = useCallback(\r\n    (index: number) => parseSize(panels[index]?.props.min, trackSize, MIN_PANEL_SIZE),\r\n    [panels, trackSize],\r\n  );\r\n\r\n  const getPanelMax = useCallback(\r\n    (index: number) => parseSize(panels[index]?.props.max, trackSize, trackSize),\r\n    [panels, trackSize],\r\n  );\r\n\r\n  const normalizeToTrack = useCallback(\r\n    (nextSizes: number[]) => {\r\n      if (!trackSize || !nextSizes.length) {\r\n        return nextSizes;\r\n      }\r\n\r\n      const normalized = [...nextSizes];\r\n      const diff = trackSize - normalized.reduce((sum, size) => sum + size, 0);\r\n      const flexibleIndex = normalized.findIndex((size) => size > 0);\r\n      normalized[flexibleIndex === -1 ? 0 : flexibleIndex] += diff;\r\n      return normalized.map((size, index) => clamp(size, 0, getPanelMax(index)));\r\n    },\r\n    [getPanelMax, trackSize],\r\n  );\r\n\r\n  const buildInitialSizes = useCallback(\r\n    (previous?: number[]) => {\r\n      if (!trackSize || !panels.length) {\r\n        return [];\r\n      }\r\n\r\n      if (previous?.length === panels.length) {\r\n        const previousTotal = previous.reduce((sum, size) => sum + size, 0);\r\n        if (previousTotal > 0) {\r\n          return normalizeToTrack(previous.map((size) => (size / previousTotal) * trackSize));\r\n        }\r\n      }\r\n\r\n      const explicitSizes = panels.map((panel) =>\r\n        parseSize(panel.props.size ?? panel.props.defaultSize, trackSize, -1),\r\n      );\r\n      const usedSize = explicitSizes\r\n        .filter((size) => size >= 0)\r\n        .reduce((sum, size) => sum + size, 0);\r\n      const unsetCount = explicitSizes.filter((size) => size < 0).length;\r\n      const fallbackSize = unsetCount ? Math.max(0, (trackSize - usedSize) / unsetCount) : 0;\r\n\r\n      return normalizeToTrack(\r\n        explicitSizes.map((size, index) =>\r\n          clamp(size >= 0 ? size : fallbackSize, getPanelMin(index), getPanelMax(index)),\r\n        ),\r\n      );\r\n    },\r\n    [getPanelMax, getPanelMin, normalizeToTrack, panels, trackSize],\r\n  );\r\n\r\n  const updateSizes = useCallback(\r\n    (nextSizes: number[], notify = true) => {\r\n      const normalized = normalizeToTrack(nextSizes);\r\n      setSizes(normalized);\r\n      sizesRef.current = normalized;\r\n      normalized.forEach((size, index) => {\r\n        if (size > 1) {\r\n          lastNonZeroSizesRef.current[index] = size;\r\n        }\r\n      });\r\n      if (notify) {\r\n        onResize?.(roundSizes(normalized));\r\n      }\r\n    },\r\n    [normalizeToTrack, onResize],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const node = rootRef.current;\r\n    if (!node) {\r\n      return undefined;\r\n    }\r\n\r\n    const syncSize = () => {\r\n      const rect = node.getBoundingClientRect();\r\n      setContainerSize(resolvedOrientation === 'horizontal' ? rect.width : rect.height);\r\n    };\r\n    syncSize();\r\n\r\n    const observer = new ResizeObserver(syncSize);\r\n    observer.observe(node);\r\n    return () => observer.disconnect();\r\n  }, [resolvedOrientation]);\r\n\r\n  useEffect(() => {\r\n    setSizes((previous) => {\r\n      const nextSizes = buildInitialSizes(previous);\r\n      sizesRef.current = nextSizes;\r\n      lastNonZeroSizesRef.current = nextSizes.map((size) =>\r\n        Math.max(size, trackSize / Math.max(panels.length, 1)),\r\n      );\r\n      return nextSizes;\r\n    });\r\n  }, [buildInitialSizes, panels.length, trackSize]);\r\n\r\n  const getResizedPair = useCallback(\r\n    (sourceSizes: number[], index: number, delta: number) => {\r\n      const nextSizes = [...sourceSizes];\r\n      const leftSize = nextSizes[index];\r\n      const rightSize = nextSizes[index + 1];\r\n      const leftMin = getPanelMin(index);\r\n      const rightMin = getPanelMin(index + 1);\r\n      const leftMax = getPanelMax(index);\r\n      const rightMax = getPanelMax(index + 1);\r\n      const minDelta = Math.max(leftMin - leftSize, rightSize - rightMax);\r\n      const maxDelta = Math.min(leftMax - leftSize, rightSize - rightMin);\r\n      const safeDelta = clamp(delta, minDelta, maxDelta);\r\n\r\n      nextSizes[index] = leftSize + safeDelta;\r\n      nextSizes[index + 1] = rightSize - safeDelta;\r\n      return normalizeToTrack(nextSizes);\r\n    },\r\n    [getPanelMax, getPanelMin, normalizeToTrack],\r\n  );\r\n\r\n  const resizePair = useCallback(\r\n    (index: number, delta: number, notify = true) => {\r\n      updateSizes(getResizedPair(sizesRef.current, index, delta), notify);\r\n    },\r\n    [getResizedPair, updateSizes],\r\n  );\r\n\r\n  const startResize = (index: number, event: ReactPointerEvent<HTMLDivElement>) => {\r\n    if (panels[index].props.resizable === false || panels[index + 1].props.resizable === false) {\r\n      return;\r\n    }\r\n\r\n    event.preventDefault();\r\n    const startPosition = getPointerPosition(event, resolvedOrientation);\r\n    const startSizes = [...sizesRef.current];\r\n    let latestSizes = startSizes;\r\n\r\n    setDraggingIndex(index);\r\n    onResizeStart?.(roundSizes(startSizes));\r\n\r\n    const handlePointerMove = (moveEvent: PointerEvent) => {\r\n      const delta = getPointerPosition(moveEvent, resolvedOrientation) - startPosition;\r\n      latestSizes = getResizedPair(startSizes, index, delta);\r\n      if (!lazy) {\r\n        updateSizes(latestSizes, true);\r\n      }\r\n    };\r\n\r\n    const handlePointerUp = () => {\r\n      document.removeEventListener('pointermove', handlePointerMove);\r\n      document.removeEventListener('pointerup', handlePointerUp);\r\n      setDraggingIndex(null);\r\n      if (lazy) {\r\n        updateSizes(latestSizes, true);\r\n      }\r\n      onResizeEnd?.(roundSizes(sizesRef.current));\r\n    };\r\n\r\n    document.addEventListener('pointermove', handlePointerMove);\r\n    document.addEventListener('pointerup', handlePointerUp);\r\n  };\r\n\r\n  const toggleCollapse = (index: number, neighborIndex: number) => {\r\n    const nextSizes = [...sizesRef.current];\r\n\r\n    if (nextSizes[index] > 1) {\r\n      lastNonZeroSizesRef.current[index] = nextSizes[index];\r\n      nextSizes[neighborIndex] += nextSizes[index];\r\n      nextSizes[index] = 0;\r\n    } else {\r\n      const restoredSize =\r\n        lastNonZeroSizesRef.current[index] ||\r\n        parseSize(panels[index].props.defaultSize, trackSize, trackSize / panels.length);\r\n      nextSizes[index] = clamp(restoredSize, getPanelMin(index), getPanelMax(index));\r\n      nextSizes[neighborIndex] = Math.max(0, nextSizes[neighborIndex] - nextSizes[index]);\r\n    }\r\n\r\n    updateSizes(nextSizes);\r\n    onResizeEnd?.(roundSizes(sizesRef.current));\r\n  };\r\n\r\n  const resetSizes = () => {\r\n    const nextSizes = buildInitialSizes();\r\n    updateSizes(nextSizes);\r\n    onResizeEnd?.(roundSizes(nextSizes));\r\n  };\r\n\r\n  const rootStyle: CSSProperties = {\r\n    border: '1px solid #f0f0f0',\r\n    borderRadius: 8,\r\n    display: 'flex',\r\n    flexDirection: resolvedOrientation === 'horizontal' ? 'row' : 'column',\r\n    height: 360,\r\n    minHeight: 0,\r\n    overflow: 'hidden',\r\n    width: '100%',\r\n    ...style,\r\n  };\r\n\r\n  const renderCollapseButton = (\r\n    draggerIndex: number,\r\n    panelIndex: number,\r\n    direction: 'start' | 'end',\r\n  ) => {\r\n    const panel = panels[panelIndex];\r\n    if (!panel?.props.collapsible) {\r\n      return null;\r\n    }\r\n\r\n    const neighborIndex = direction === 'start' ? panelIndex + 1 : panelIndex - 1;\r\n    const isCollapsed = (sizes[panelIndex] ?? 0) <= 1;\r\n    const isNeighborCollapsed = (sizes[neighborIndex] ?? 0) <= 1;\r\n\r\n    // 自己折叠后隐藏；对侧面板折叠后也隐藏（避免与展开按钮重复/语义冲突）\r\n    if (isCollapsed || isNeighborCollapsed) {\r\n      return null;\r\n    }\r\n\r\n    // 展开时箭头指向面板将被折叠到的方向\r\n    const Icon =\r\n      resolvedOrientation === 'horizontal'\r\n        ? direction === 'start'\r\n          ? LeftOutlined\r\n          : RightOutlined\r\n        : direction === 'start'\r\n        ? UpOutlined\r\n        : DownOutlined;\r\n\r\n    return (\r\n      <button\r\n        aria-label=\"折叠面板\"\r\n        title=\"折叠面板\"\r\n        onClick={(event) => {\r\n          event.stopPropagation();\r\n          toggleCollapse(panelIndex, neighborIndex);\r\n        }}\r\n        style={{\r\n          alignItems: 'center',\r\n          background: '#fff',\r\n          border: '1px solid #d9d9d9',\r\n          borderRadius: 4,\r\n          color: '#595959',\r\n          cursor: 'pointer',\r\n          display: 'flex',\r\n          height: 20,\r\n          justifyContent: 'center',\r\n          padding: 0,\r\n          width: 20,\r\n          fontSize: 12,\r\n        }}\r\n        type=\"button\"\r\n      >\r\n        <Icon />\r\n      </button>\r\n    );\r\n  };\r\n\r\n  // 渲染\"展开\"按钮：当某个面板被折叠时显示在分隔条上，箭头指向展开方向\r\n  const renderExpandButton = (panelIndex: number, direction: 'start' | 'end') => {\r\n    const panel = panels[panelIndex];\r\n    if (!panel?.props.collapsible) {\r\n      return null;\r\n    }\r\n\r\n    const isCollapsed = (sizes[panelIndex] ?? 0) <= 1;\r\n    if (!isCollapsed) {\r\n      return null;\r\n    }\r\n\r\n    const neighborIndex = direction === 'start' ? panelIndex + 1 : panelIndex - 1;\r\n\r\n    // 折叠后面板展开的方向与折叠方向相反\r\n    const Icon =\r\n      resolvedOrientation === 'horizontal'\r\n        ? direction === 'start'\r\n          ? RightOutlined // 左面板折叠后，展开方向朝右\r\n          : LeftOutlined // 右面板折叠后，展开方向朝左\r\n        : direction === 'start'\r\n        ? DownOutlined\r\n        : UpOutlined;\r\n\r\n    return (\r\n      <button\r\n        aria-label=\"展开面板\"\r\n        title=\"展开面板\"\r\n        onClick={(event) => {\r\n          event.stopPropagation();\r\n          toggleCollapse(panelIndex, neighborIndex);\r\n        }}\r\n        style={{\r\n          alignItems: 'center',\r\n          background: '#fff',\r\n          border: '1px solid #d9d9d9',\r\n          borderRadius: 4,\r\n          color: '#595959',\r\n          cursor: 'pointer',\r\n          display: 'flex',\r\n          height: 20,\r\n          justifyContent: 'center',\r\n          padding: 0,\r\n          width: 20,\r\n          fontSize: 12,\r\n        }}\r\n        type=\"button\"\r\n      >\r\n        <Icon />\r\n      </button>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <div className={className} ref={rootRef} style={rootStyle}>\r\n      {panels.map((panel, index) => {\r\n        const isHidden = sizes[index] <= 1;\r\n\r\n        return (\r\n          <React.Fragment key={index}>\r\n            <div\r\n              style={{\r\n                background: index % 2 ? '#fff' : '#fafafa',\r\n                flex: `0 0 ${sizes[index] ?? 0}px`,\r\n                minHeight: 0,\r\n                minWidth: 0,\r\n                overflow: 'auto',\r\n                padding: isHidden ? 0 : 16,\r\n                transition: draggingIndex === null ? 'flex-basis 0.2s ease' : undefined,\r\n                ...panel.props.style,\r\n              }}\r\n            >\r\n              {!isHidden && panel.props.children}\r\n            </div>\r\n\r\n            {index < panels.length - 1 && (\r\n              <div\r\n                aria-orientation={resolvedOrientation}\r\n                onDoubleClick={resetSizes}\r\n                onKeyDown={(event) => {\r\n                  const step = event.shiftKey ? 40 : 10;\r\n                  const directionMap =\r\n                    resolvedOrientation === 'horizontal'\r\n                      ? { ArrowLeft: -step, ArrowRight: step }\r\n                      : { ArrowUp: -step, ArrowDown: step };\r\n                  const delta = directionMap[event.key as keyof typeof directionMap];\r\n                  if (delta !== undefined) {\r\n                    event.preventDefault();\r\n                    resizePair(index, delta);\r\n                  }\r\n                }}\r\n                onPointerDown={(event) => startResize(index, event)}\r\n                onPointerEnter={() => setHoveredIndex(index)}\r\n                onPointerLeave={() => setHoveredIndex(null)}\r\n                role=\"separator\"\r\n                style={{\r\n                  alignItems: 'center',\r\n                  background:\r\n                    hoveredIndex === index || draggingIndex === index ? '#e6f4ff' : '#f5f5f5',\r\n                  cursor: resolvedOrientation === 'horizontal' ? 'col-resize' : 'row-resize',\r\n                  display: 'flex',\r\n                  flex: `0 0 ${DRAGGER_SIZE}px`,\r\n                  justifyContent: 'center',\r\n                  outline: 'none',\r\n                  position: 'relative',\r\n                  userSelect: 'none',\r\n                  zIndex: 1,\r\n                }}\r\n                tabIndex={0}\r\n              >\r\n                <div\r\n                  style={{\r\n                    background:\r\n                      hoveredIndex === index || draggingIndex === index ? '#1677ff' : '#d9d9d9',\r\n                    borderRadius: 2,\r\n                    height: resolvedOrientation === 'horizontal' ? 48 : 2,\r\n                    width: resolvedOrientation === 'horizontal' ? 2 : 48,\r\n                  }}\r\n                />\r\n                <div\r\n                  style={{\r\n                    position: 'absolute',\r\n                    display: 'flex',\r\n                    flexDirection: resolvedOrientation === 'horizontal' ? 'column' : 'row',\r\n                    gap: 2,\r\n                    opacity:\r\n                      hoveredIndex === index ||\r\n                      (sizes[index] ?? 0) <= 1 ||\r\n                      (sizes[index + 1] ?? 0) <= 1\r\n                        ? 1\r\n                        : 0,\r\n                    transition: 'opacity 0.15s ease',\r\n                    pointerEvents:\r\n                      hoveredIndex === index ||\r\n                      (sizes[index] ?? 0) <= 1 ||\r\n                      (sizes[index + 1] ?? 0) <= 1\r\n                        ? 'auto'\r\n                        : 'none',\r\n                  }}\r\n                >\r\n                  {renderCollapseButton(index, index, 'start')}\r\n                  {renderCollapseButton(index, index + 1, 'end')}\r\n                  {renderExpandButton(index, 'start')}\r\n                  {renderExpandButton(index + 1, 'end')}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </React.Fragment>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nCustomSplitter.Panel = SplitterPanel;\r\n\r\nexport default CustomSplitter;\r\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime","React"]}

package/dist/index.css

@@ -0,0 +1,100 @@
+/* CollapseBox/index.less */
+.collapsible-wrapper {
+  position: relative;
+}
+.collapsible-wrapper.horizontal {
+  display: flex;
+  align-items: stretch;
+}
+.collapsible-wrapper.vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.collapsible-container {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
+}
+.collapsible-container.align-right {
+  margin-left: auto;
+}
+.collapsible-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 48px;
+  padding: 12px 16px;
+  background-color: #f9fafb;
+  border-bottom: 1px solid #d1d5db;
+}
+.collapsible-header h3 {
+  margin: 0;
+  color: #1f2937;
+  font-weight: 600;
+  font-size: 18px;
+}
+.collapsible-content {
+  box-sizing: border-box;
+  padding: 16px;
+  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
+}
+.toggle-button {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8c8c8c;
+  background-color: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 3px;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  transition: all 0.2s ease;
+  font-size: 10px;
+}
+.toggle-button:hover {
+  background-color: #e5e7eb;
+  color: #4b5563;
+  border-color: #d1d5db;
+}
+.toggle-button.button-right {
+  top: 50%;
+  right: -7px;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 48px;
+}
+.toggle-button.button-left {
+  top: 50%;
+  left: -7px;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 48px;
+}
+.toggle-button.button-bottom {
+  bottom: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48px;
+  height: 14px;
+}
+.toggle-button.button-top {
+  top: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48px;
+  height: 14px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../CollapseBox/index.less"],"sourcesContent":[".collapsible-wrapper {\n  position: relative;\n}\n.collapsible-wrapper.horizontal {\n  display: flex;\n  align-items: stretch;\n}\n.collapsible-wrapper.vertical {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.collapsible-container {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid #d1d5db;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n.collapsible-container.align-right {\n  margin-left: auto;\n}\n.collapsible-header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: 48px;\n  padding: 12px 16px;\n  background-color: #f9fafb;\n  border-bottom: 1px solid #d1d5db;\n}\n.collapsible-header h3 {\n  margin: 0;\n  color: #1f2937;\n  font-weight: 600;\n  font-size: 18px;\n}\n.collapsible-content {\n  box-sizing: border-box;\n  padding: 16px;\n  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;\n}\n.toggle-button {\n  position: absolute;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #8c8c8c;\n  background-color: #f3f4f6;\n  border: 1px solid #e5e7eb;\n  border-radius: 3px;\n  cursor: pointer;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);\n  transition: all 0.2s ease;\n  font-size: 10px;\n}\n.toggle-button:hover {\n  background-color: #e5e7eb;\n  color: #4b5563;\n  border-color: #d1d5db;\n}\n.toggle-button.button-right {\n  top: 50%;\n  right: -7px;\n  transform: translateY(-50%);\n  width: 14px;\n  height: 48px;\n}\n.toggle-button.button-left {\n  top: 50%;\n  left: -7px;\n  transform: translateY(-50%);\n  width: 14px;\n  height: 48px;\n}\n.toggle-button.button-bottom {\n  bottom: -7px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 48px;\n  height: 14px;\n}\n.toggle-button.button-top {\n  top: -7px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 48px;\n  height: 14px;\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,mBAGmB,CAAC;AACnB,WAAS;AACT,eAAa;AACf;AACA,CAPC,mBAOmB,CAAC;AACnB,WAAS;AACT,kBAAgB;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACV,aAAW;AACX,cAAY;AACZ,YAAU;AACV,oBAAkB;AAClB,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,MAAM,KAAK,WAAW,EAAE,OAAO,KAAK;AAClD;AACA,CAXC,qBAWqB,CAAC;AACrB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACV,OAAK;AACL,WAAS;AACT,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,cAAY;AACZ,UAAQ;AACR,WAAS,KAAK;AACd,oBAAkB;AAClB,iBAAe,IAAI,MAAM;AAC3B;AACA,CAbC,mBAamB;AAClB,UAAQ;AACR,SAAO;AACP,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,cAAY;AACZ,WAAS;AACT,cAAY,WAAW,KAAK,WAAW,EAAE,QAAQ,KAAK;AACxD;AACA,CAAC;AACC,YAAU;AACV,WAAS;AACT,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,oBAAkB;AAClB,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,UAAQ;AACR,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,IAAI,KAAK;AACrB,aAAW;AACb;AACA,CAfC,aAea;AACZ,oBAAkB;AAClB,SAAO;AACP,gBAAc;AAChB;AACA,CApBC,aAoBa,CAAC;AACb,OAAK;AACL,SAAO;AACP,aAAW,WAAW;AACtB,SAAO;AACP,UAAQ;AACV;AACA,CA3BC,aA2Ba,CAAC;AACb,OAAK;AACL,QAAM;AACN,aAAW,WAAW;AACtB,SAAO;AACP,UAAQ;AACV;AACA,CAlCC,aAkCa,CAAC;AACb,UAAQ;AACR,QAAM;AACN,aAAW,WAAW;AACtB,SAAO;AACP,UAAQ;AACV;AACA,CAzCC,aAyCa,CAAC;AACb,OAAK;AACL,QAAM;AACN,aAAW,WAAW;AACtB,SAAO;AACP,UAAQ;AACV;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+
+type CollapseBoxDirection = 'horizontal' | 'vertical';
+type CollapseBoxButtonPosition = 'left' | 'right' | 'top' | 'bottom';
+interface CollapseBoxProps {
+    children?: ReactNode;
+    title?: string;
+    direction?: CollapseBoxDirection;
+    buttonPosition?: CollapseBoxButtonPosition;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    contentPadding?: string;
+    headerHeight?: number;
+}
+declare const CollapsibleBox: ({ children, title, direction, buttonPosition, defaultWidth, defaultHeight, contentPadding, headerHeight, }: CollapseBoxProps) => React.JSX.Element;
+
+type SplitterSize = number | `${number}%`;
+type SplitterOrientation = 'horizontal' | 'vertical';
+type SplitterPanelProps = {
+    children?: ReactNode;
+    collapsible?: boolean;
+    defaultSize?: SplitterSize;
+    max?: SplitterSize;
+    min?: SplitterSize;
+    resizable?: boolean;
+    size?: SplitterSize;
+    style?: CSSProperties;
+};
+type SplitterProps = {
+    children: ReactNode;
+    className?: string;
+    lazy?: boolean;
+    onResize?: (sizes: number[]) => void;
+    onResizeEnd?: (sizes: number[]) => void;
+    onResizeStart?: (sizes: number[]) => void;
+    orientation?: SplitterOrientation;
+    style?: CSSProperties;
+    vertical?: boolean;
+};
+type SplitterComponent = React__default.FC<SplitterProps> & {
+    Panel: React__default.FC<SplitterPanelProps>;
+};
+declare const CustomSplitter: SplitterComponent;
+
+export { CollapsibleBox as CollapseBox, type CollapseBoxButtonPosition, type CollapseBoxDirection, type CollapseBoxProps, CustomSplitter as Splitter, type SplitterOrientation, type SplitterPanelProps, type SplitterProps, type SplitterSize };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+
+type CollapseBoxDirection = 'horizontal' | 'vertical';
+type CollapseBoxButtonPosition = 'left' | 'right' | 'top' | 'bottom';
+interface CollapseBoxProps {
+    children?: ReactNode;
+    title?: string;
+    direction?: CollapseBoxDirection;
+    buttonPosition?: CollapseBoxButtonPosition;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    contentPadding?: string;
+    headerHeight?: number;
+}
+declare const CollapsibleBox: ({ children, title, direction, buttonPosition, defaultWidth, defaultHeight, contentPadding, headerHeight, }: CollapseBoxProps) => React.JSX.Element;
+
+type SplitterSize = number | `${number}%`;
+type SplitterOrientation = 'horizontal' | 'vertical';
+type SplitterPanelProps = {
+    children?: ReactNode;
+    collapsible?: boolean;
+    defaultSize?: SplitterSize;
+    max?: SplitterSize;
+    min?: SplitterSize;
+    resizable?: boolean;
+    size?: SplitterSize;
+    style?: CSSProperties;
+};
+type SplitterProps = {
+    children: ReactNode;
+    className?: string;
+    lazy?: boolean;
+    onResize?: (sizes: number[]) => void;
+    onResizeEnd?: (sizes: number[]) => void;
+    onResizeStart?: (sizes: number[]) => void;
+    orientation?: SplitterOrientation;
+    style?: CSSProperties;
+    vertical?: boolean;
+};
+type SplitterComponent = React__default.FC<SplitterProps> & {
+    Panel: React__default.FC<SplitterPanelProps>;
+};
+declare const CustomSplitter: SplitterComponent;
+
+export { CollapsibleBox as CollapseBox, type CollapseBoxButtonPosition, type CollapseBoxDirection, type CollapseBoxProps, CustomSplitter as Splitter, type SplitterOrientation, type SplitterPanelProps, type SplitterProps, type SplitterSize };