Function Divider

src/components/Divider.tsx:39–114

(props: DividerProps)

 * ```
 */
export function Divider(props: DividerProps) {
  const {
    direction,
    index,
    isDragging,
    disabled,
    onPointerDown,
    onKeyDown,
    className,
    style,
    currentSize,
    minSize,
    maxSize,
    children,
  } = props;

  const orientation = direction === 'horizontal' ? 'vertical' : 'horizontal';

  const defaultStyle: CSSProperties = {
    flex: 'none',
    position: 'relative',
    userSelect: 'none',
    touchAction: 'none',
    ...(direction === 'horizontal'
      ? {
          width: '1px',
          cursor: disabled ? 'default' : 'col-resize',
        }
      : {
          height: '1px',
          cursor: disabled ? 'default' : 'row-resize',
        }),
    ...(isDragging && {
      cursor: direction === 'horizontal' ? 'col-resize' : 'row-resize',
    }),
  };

  const combinedStyle: CSSProperties = {
    ...defaultStyle,
    ...style,
  };

  const combinedClassName = cn(
    DEFAULT_CLASSNAME,
    direction,
    isDragging && 'dragging',
    className
  );

  const label = getDividerLabel(index, direction);
  const instructions = getKeyboardInstructions(direction);

  // Don't pass Infinity to ARIA attributes - screen readers can't handle it
  const ariaValueMax =
    maxSize === undefined || maxSize === Infinity ? undefined : maxSize;

  return (
    <div