react-chessboard-ui 2.14.0 → 3.0.1

package/README.md

@@ -1,8 +1,12 @@
-# react-chessboard-ui ♟️
+# react-chessboard-ui
 
 [![NPM](https://img.shields.io/npm/v/react-chessboard-ui.svg)](https://www.npmjs.com/package/react-chessboard-ui)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+React chessboard UI with a built-in chess engine, FEN-based state control, legal move handling, drag-and-drop pieces, game-end callbacks, and styling hooks.
+
+Use it when you need a playable chessboard in a React app without combining a board renderer, a separate chess engine, and custom move/state glue yourself.
+
 <p align="center">
   <img src="./blob/default.png?raw=true" width="23%" alt="Default react-chessboard-ui board" />
   <img src="./blob/customization.png?raw=true" width="23%" alt="Customized react-chessboard-ui board" />
@@ -10,86 +14,168 @@
   <img src="./blob/all_queens.png?raw=true" width="23%" alt="React chessboard with custom pieces" />
 </p>
 
-An all-in-one React chessboard component with both the chess engine and UI included. Drop it into your React app and get a ready-to-use chessboard without wiring up separate chess logic, move validation, or board state tools. Control the board position with simple FEN notation and react to moves or game-end events through callbacks.
+## Features
 
-## 📘 **Full documentation**: [https://react-chessboard-ui.dev/](https://react-chessboard-ui.dev/)
+- **Board UI and chess logic in one package**: render the board, validate moves, and receive game events from one component.
+- **FEN-first state**: initialize positions, load puzzles, or render custom board sizes from FEN.
+- **Ready to play**: drag-and-drop pieces, legal move handling, turn switching, callbacks, and game-end detection are included.
+- **Customizable**: override square classes, piece rendering, sizes, highlights, arrows, and interaction behavior.
+- **No required CSS import**: package styles are injected automatically when `ChessBoard` is imported.
 
----
+## Installation
 
-## 🚀 Features
+```bash
+npm install react-chessboard-ui
+```
 
-- 🎯 Fully controlled via FEN strings
-- ♟️ Built-in chess engine and ready-made board UI
-- ✅ Move validation included
-- ♻️ React functional component with hooks support
-- 🎨 Customizable styles (via CSS or override)
-- ♟️ Game-end and move-change callbacks
-- 🧩 No extra chess packages or setup required
+```bash
+yarn add react-chessboard-ui
+```
 
----
+## Quick Start
 
-## Why react-chessboard-ui?
+```tsx
+import type { FC } from "react";
+import { ChessBoard } from "react-chessboard-ui";
 
-`react-chessboard-ui` is designed for developers who need a React chessboard, chess UI, and chess engine in one package. It is not just a board renderer: it provides drag-and-drop chess pieces, FEN-based position control, legal move handling, game-end detection, and customization options out of the box.
+export const App: FC = () => {
+  return (
+    <ChessBoard
+      FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+      onChange={(move) => {
+        console.log("Move:", move);
+      }}
+      onEndGame={(result) => {
+        console.log("Game ended:", result);
+      }}
+    />
+  );
+};
+```
 
----
+## Key Examples
 
-## 📦 Installation
+### Training Position
 
-Install via npm:
+```tsx
+import { ChessBoard } from "react-chessboard-ui";
 
-```bash
-npm install react-chessboard-ui
+export function TrainingBoard() {
+  return (
+    <ChessBoard
+      FEN="r1bqkbnr/pppp1ppp/2n5/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 2 3"
+      playerColor="white"
+      moveHighlight={[[2, 5], [3, 3]]}
+      arrows={[{ start: [2, 5], end: [3, 3], color: "#1d9bf0" }]}
+      onChange={(move) => console.log("User move:", move)}
+      onEndGame={console.log}
+    />
+  );
+}
 ```
 
-Or using yarn:
+### Custom Board Size From FEN
 
-```bash
-yarn add react-chessboard-ui
-```
+The board size is derived from the FEN rows. This example renders a 12x12 board:
 
----
+```tsx
+import { ChessBoard } from "react-chessboard-ui";
 
-## 💡 Usage Example
+export function CustomSizeBoard() {
+  return (
+    <ChessBoard
+      FEN="qqrnbqkbnrqq/pppppppppppp/12/12/12/12/12/12/12/12/PPPPPPPPPPPP/QQRNBQKBNRQQ w - - 0 1"
+      onChange={console.log}
+      onEndGame={console.log}
+    />
+  );
+}
+```
+<p align="center">
+  <img src="./blob/12x12.png?raw=true" width="70%" style="max-width: 450px" alt="Default react-chessboard-ui board" />
+</p>
+
+### Style the Board With CSS Classes
 
 ```tsx
-import React from 'react';
-import { ChessBoard } from 'react-chessboard-ui';
-import 'react-chessboard-ui/dist/index.css'; // Required CSS
+import { ChessBoard } from "react-chessboard-ui";
+import "./board.css";
 
-export const App = () => {
+export function StyledBoard() {
   return (
     <ChessBoard
       FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-      onChange={handleChangePosition}
-      onEndGame={handleEndGame}
+      config={{
+        squareSize: 72,
+        pieceSizePercent: 92,
+        lightSquareClassName: "light-square",
+        darkSquareClassName: "dark-square",
+        selectedSquareClassName: "selected-square",
+        squareHighlightClassName: "move-highlight",
+      }}
+      onChange={console.log}
+      onEndGame={console.log}
     />
   );
-};
+}
 ```
 
-## Full customizable
+```css
+.light-square {
+  background: #f7f7f2;
+}
 
-### 📘 **Documentation for customization**: [https://react-chessboard-ui.dev/properties/config/](https://react-chessboard-ui.dev/properties/config/)
+.dark-square {
+  background: #9aa77f;
+}
 
+.selected-square {
+  outline: 3px solid #1d9bf0;
+  outline-offset: -3px;
+}
 
----
+.move-highlight {
+  box-shadow: inset 0 0 0 4px rgba(29, 155, 240, 0.35);
+}
+```
 
-## 👥 Authors
+## API Overview
 
-Created by:
+| Prop | Type | Description |
+| --- | --- | --- |
+| `FEN` | `string` | Required. Board position in FEN notation. |
+| `onChange` | `(moveData: MoveData) => void` | Required. Called after a user move. |
+| `onEndGame` | `(result: GameResult) => void` | Required. Called when the engine detects a game result. |
+| `onClick` | `(data: ClickData) => void` | Called when a board cell is clicked. |
+| `change` | `ChangeMove` | Applies an external move to the board. |
+| `reversed` | `boolean` | Renders the board from the opposite side. |
+| `config` | `Partial<ChessBoardConfig>` | Board sizing, classes, piece map, and visual configuration. |
+| `playerColor` | `"white" \| "black"` | Restricts interaction to one color. |
+| `viewOnly` | `boolean` | Disables user moves. |
+| `moveHighlight` | `[SquarePos, SquarePos]` | Highlights a move path. |
+| `arrows` | `Array<{ start: number[]; end: number[]; color?: string }>` | Draws arrows on the board. |
+| `toggleTurn` | `boolean` | Enables or disables automatic turn switching. Defaults to `true`. |
 
-- [Tatiana Utbanova](https://www.linkedin.com/in/tatiana-utbanova-6415b8271/) - Design owner
-- [Alexander Utbanov](https://linkedin.com/in/alexander-utbanov-a9670a210/) - Code owner
+## FEN Notes
+
+- `FEN` controls the initial board state and can be replaced from React state.
+- A number in a FEN row means that many consecutive empty cells.
+- Standard 8x8 chess positions and larger custom boards are supported.
+
+## Documentation
 
----
+- Full documentation: [https://react-chessboard-ui.dev/](https://react-chessboard-ui.dev/)
+- Customization docs: [https://react-chessboard-ui.dev/properties/config/](https://react-chessboard-ui.dev/properties/config/)
 
-## 📄 License
+## Authors
 
-MIT © [react-chessboard-ui](https://github.com/)
+- [Tatiana Utbanova](https://www.linkedin.com/in/tatiana-utbanova-6415b8271/) - Design owner
+- [Alexander Utbanov](https://linkedin.com/in/alexander-utbanov-a9670a210/) - Code owner
 
----
+## License
 
-## 🧠 Keywords (for discoverability)
+MIT
+_________
+## Keywords
 
 `react` `react-chess` `react-chessboard` `react-chessboard-ui` `js-chess` `chess` `chessboard` `chessboard component` `chess engine`

package/dist/ChessBoard/Arrow.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
-interface ArrowProps {
-    start: number[];
-    end: number[];
-    color: string;
-}
-export declare const Arrow: FC<ArrowProps>;
-export {};
+import { FC } from 'react';
+interface ArrowProps {
+    start: number[];
+    end: number[];
+    color: string;
+}
+export declare const Arrow: FC<ArrowProps>;
+export {};

package/dist/ChessBoard/ArrowLayout.d.ts

@@ -1,15 +1,15 @@
-import { FC } from "react";
-import { CellPos } from "../JSChessEngine";
-import { ArrowCoords, ChessBoardConfig } from "./models";
-declare type ArrowLayoutType = {
-    startArrowCoord: CellPos;
-    arrowsCoords: ArrowCoords[];
-    externalArrowsCoords?: ArrowCoords[];
-    externalArrows?: (ArrowCoords & {
-        color?: string;
-    })[];
-    grabbingPos: CellPos;
-    boardConfig: ChessBoardConfig;
-};
-export declare const ArrowLayout: FC<ArrowLayoutType>;
-export {};
+import { FC } from 'react';
+import { CellPos } from '../JSChessEngine';
+import { ArrowCoords, ChessBoardConfig } from './models';
+type ArrowLayoutType = {
+    startArrowCoord: CellPos;
+    arrowsCoords: ArrowCoords[];
+    externalArrowsCoords?: ArrowCoords[];
+    externalArrows?: (ArrowCoords & {
+        color?: string;
+    })[];
+    grabbingPos: CellPos;
+    boardConfig: ChessBoardConfig;
+};
+export declare const ArrowLayout: FC<ArrowLayoutType>;
+export {};

package/dist/ChessBoard/ChessBoard.d.ts

@@ -1,22 +1,22 @@
-import { PieceColor, GameResult, MoveData, SquarePos } from "../JSChessEngine";
-import { FC } from "react";
-import { ArrowCoords, ChangeMove, ChessBoardConfig, ClickData } from "./models";
-declare type ChessBoardProps = {
-    FEN: string;
-    onChange: (moveData: MoveData) => void;
-    onEndGame: (result: GameResult) => void;
-    onClick?: (data: ClickData) => void;
-    change?: ChangeMove;
-    reversed?: boolean;
-    config?: Partial<ChessBoardConfig>;
-    playerColor?: PieceColor;
-    viewOnly?: boolean;
-    moveHighlight?: [SquarePos, SquarePos];
-    moveArrows?: ArrowCoords[];
-    arrows?: (ArrowCoords & {
-        color?: string;
-    })[];
-    toggleTurn?: boolean;
-};
-export declare const ChessBoard: FC<ChessBoardProps>;
-export {};
+import { PieceColor, GameResult, MoveData, SquarePos } from '../JSChessEngine';
+import { FC } from 'react';
+import { ArrowCoords, ChangeMove, ChessBoardConfig, ClickData } from './models';
+type ChessBoardProps = {
+    FEN: string;
+    onChange: (moveData: MoveData) => void;
+    onEndGame: (result: GameResult) => void;
+    onClick?: (data: ClickData) => void;
+    change?: ChangeMove;
+    reversed?: boolean;
+    config?: Partial<ChessBoardConfig>;
+    playerColor?: PieceColor;
+    viewOnly?: boolean;
+    moveHighlight?: [SquarePos, SquarePos];
+    moveArrows?: ArrowCoords[];
+    arrows?: (ArrowCoords & {
+        color?: string;
+    })[];
+    toggleTurn?: boolean;
+};
+export declare const ChessBoard: FC<ChessBoardProps>;
+export {};

package/dist/ChessBoard/ChessBoardCellsLayout.d.ts

@@ -1,11 +1,11 @@
-import { FC } from "react";
-import { ChessBoardConfig } from "./models";
-import { SquarePos } from "../JSChessEngine";
-declare type ChessBoardCellsLayoutProps = {
-    boardConfig: ChessBoardConfig;
-    size?: number;
-    movesTrail?: [SquarePos, SquarePos];
-    moveHighlight?: [SquarePos, SquarePos];
-};
-export declare const ChessBoardCellsLayout: FC<ChessBoardCellsLayoutProps>;
-export {};
+import { FC } from 'react';
+import { ChessBoardConfig } from './models';
+import { SquarePos } from '../JSChessEngine';
+type ChessBoardCellsLayoutProps = {
+    boardConfig: ChessBoardConfig;
+    size?: number;
+    movesTrail?: [SquarePos, SquarePos];
+    moveHighlight?: [SquarePos, SquarePos];
+};
+export declare const ChessBoardCellsLayout: FC<ChessBoardCellsLayoutProps>;
+export {};

package/dist/ChessBoard/ChessBoardControlLayout.d.ts

@@ -1,17 +1,17 @@
-import { FC } from "react";
-import { SquarePos } from "../JSChessEngine";
-import { ChessBoardConfig } from "./models";
-declare type ChessBoardControlLayoutProps = {
-    size?: number;
-    boardConfig: ChessBoardConfig;
-    onClick: (position: SquarePos) => void;
-    onGrabStart: (position: SquarePos) => void;
-    onGrabStartRight: (position: SquarePos) => void;
-    onGrabEnd: (position: SquarePos) => void;
-    onGrabEndRight: (position: SquarePos) => void;
-    onGrabbing: (x: number, y: number) => void;
-    onRightClick: (position: SquarePos) => void;
-    onGrabbingCell: (position: SquarePos) => void;
-};
-export declare const ChessBoardControlLayout: FC<ChessBoardControlLayoutProps>;
-export {};
+import { FC } from 'react';
+import { SquarePos } from '../JSChessEngine';
+import { ChessBoardConfig } from './models';
+type ChessBoardControlLayoutProps = {
+    size?: number;
+    boardConfig: ChessBoardConfig;
+    onClick: (position: SquarePos) => void;
+    onGrabStart: (position: SquarePos) => void;
+    onGrabStartRight: (position: SquarePos) => void;
+    onGrabEnd: (position: SquarePos) => void;
+    onGrabEndRight: (position: SquarePos) => void;
+    onGrabbing: (x: number, y: number) => void;
+    onRightClick: (position: SquarePos) => void;
+    onGrabbingCell: (position: SquarePos) => void;
+};
+export declare const ChessBoardControlLayout: FC<ChessBoardControlLayoutProps>;
+export {};

package/dist/ChessBoard/ChessBoardFiguresLayout.d.ts

@@ -1,12 +1,12 @@
-import { Cell } from "../JSChessEngine";
-import { FC } from "react";
-import { ChangeMove, ChessBoardConfig } from "./models";
-declare type ChessBoardFiguresLayoutProps = {
-    initialState: Cell[][];
-    change?: ChangeMove;
-    reversed?: boolean;
-    animated?: boolean;
-    boardConfig: ChessBoardConfig;
-};
-export declare const ChessBoardFiguresLayout: FC<ChessBoardFiguresLayoutProps>;
-export {};
+import { Cell } from '../JSChessEngine';
+import { FC } from 'react';
+import { ChangeMove, ChessBoardConfig } from './models';
+type ChessBoardFiguresLayoutProps = {
+    initialState: Cell[][];
+    change?: ChangeMove;
+    reversed?: boolean;
+    animated?: boolean;
+    boardConfig: ChessBoardConfig;
+};
+export declare const ChessBoardFiguresLayout: FC<ChessBoardFiguresLayoutProps>;
+export {};

package/dist/ChessBoard/ChessBoardInteractiveLayout.d.ts

@@ -1,15 +1,15 @@
-import { FC } from "react";
-import { SquarePos, Piece } from "../JSChessEngine";
-import { ChessBoardConfig } from "./models";
-declare type ChessBoardInteractiveLayoutProps = {
-    size?: number;
-    boardConfig: ChessBoardConfig;
-    selectedPos: SquarePos;
-    possibleMoves: SquarePos[];
-    markedCells: SquarePos[];
-    holdedFigure?: Piece;
-    grabbingPos: SquarePos;
-    onHasCheck: (cellPos: SquarePos) => boolean;
-};
-export declare const ChessBoardInteractiveLayout: FC<ChessBoardInteractiveLayoutProps>;
-export {};
+import { FC } from 'react';
+import { SquarePos, Piece } from '../JSChessEngine';
+import { ChessBoardConfig } from './models';
+type ChessBoardInteractiveLayoutProps = {
+    size?: number;
+    boardConfig: ChessBoardConfig;
+    selectedPos: SquarePos;
+    possibleMoves: SquarePos[];
+    markedCells: SquarePos[];
+    holdedFigure?: Piece;
+    grabbingPos: SquarePos;
+    onHasCheck: (cellPos: SquarePos) => boolean;
+};
+export declare const ChessBoardInteractiveLayout: FC<ChessBoardInteractiveLayoutProps>;
+export {};

package/dist/ChessBoard/FigurePicker.d.ts

@@ -1,11 +1,11 @@
-import { FC } from 'react';
-import { Piece, PieceColor } from '../JSChessEngine';
-import { ChessBoardConfig } from './models';
-interface FigurePickerProps {
-    boardConfig: ChessBoardConfig;
-    color: PieceColor;
-    forPawnTransform?: boolean;
-    onSelect: (figure: Piece) => void;
-}
-export declare const FigurePicker: FC<FigurePickerProps>;
-export {};
+import { FC } from 'react';
+import { Piece, PieceColor } from '../JSChessEngine';
+import { ChessBoardConfig } from './models';
+interface FigurePickerProps {
+    boardConfig: ChessBoardConfig;
+    color: PieceColor;
+    forPawnTransform?: boolean;
+    onSelect: (figure: Piece) => void;
+}
+export declare const FigurePicker: FC<FigurePickerProps>;
+export {};

package/dist/ChessBoard/HoldedFigure.d.ts

@@ -1,10 +1,10 @@
-import { CellPos, Figure } from "../JSChessEngine";
-import { FC } from "react";
-import { ChessBoardConfig } from "./models";
-declare type HoldedFigureProps = {
-    holdedFigure?: Figure;
-    grabbingPos: CellPos;
-    boardConfig: ChessBoardConfig;
-};
-export declare const HoldedFigure: FC<HoldedFigureProps>;
-export {};
+import { CellPos, Figure } from '../JSChessEngine';
+import { FC } from 'react';
+import { ChessBoardConfig } from './models';
+type HoldedFigureProps = {
+    holdedFigure?: Figure;
+    grabbingPos: CellPos;
+    boardConfig: ChessBoardConfig;
+};
+export declare const HoldedFigure: FC<HoldedFigureProps>;
+export {};

package/dist/ChessBoard/chessPieciesMap.d.ts

@@ -1,2 +1,2 @@
-import { ChessPiecesMap } from "./models";
-export declare const CHESS_PIECES_MAP: ChessPiecesMap;
+import { ChessPiecesMap } from './models';
+export declare const CHESS_PIECES_MAP: ChessPiecesMap;

package/dist/ChessBoard/constants.d.ts

@@ -1,26 +1,26 @@
-import { Piece } from "../JSChessEngine";
-import { ChessBoardConfig } from "./models";
-export declare const DEFAULT_FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
-export declare const DEFAULT_CIRCLE_MARK_COLOR = "#3697ce";
-export declare const DEFAULT_WHITE_CELL_COLOR: string;
-export declare const DEFAULT_BLACK_CELL_COLOR: string;
-export declare const DEFAULT_SELECTED_CELL_COLOR = "#e3f1fe";
-export declare const DEFAULT_SELECTED_CELL_BORDER = "3px solid #6ac2fd";
-export declare const DEFAULT_ARROW_COLOR = "#6ac2fd";
-export declare const DEFAULT_MARKED_CELL_COLOR = "#3697ce";
-export declare const DEFAULT_CHECKED_CELL_COLOR = "#e95b5c";
-export declare const DEFAULT_PIECES_MAP: import("./models").ChessPiecesMap;
-export declare const DEFAULT_SHOW_MOVES_TRAIL = true;
-export declare const DEFAULT_HIDE_PIECES_HANDLER: (figure: Piece, boardSize?: number) => void;
-export declare const DEFAULT_SQUARE_SIZE = 92;
-export declare const DEFAULT_PIECE_SIZE_PERCENT = 80;
-export declare const DEFAULT_HIDE_PIECE_EFFECT_CLASS_NAME: string;
-export declare const DEFAULT_LIGHT_SQUARE_CLASS_NAME: string;
-export declare const DEFAULT_DARK_SQUARE_CLASS_NAME: string;
-export declare const DEFAULT_PICKED_SQUARE_CLASS_NAME: string;
-export declare const DEFAULT_CHECKED_SQUARE_CLASS_NAME: string;
-export declare const DEFAULT_SQUARE_HIGLIGHT_CLASS_NAME: string;
-export declare const DEFAULT_SELECTED_SQUARE_CLASS_NAME: string;
-export declare const DEFAULT_HOLDED_PIECE_CLASS_NAME: string;
-export declare const DEFAULT_POSSIBLE_MOVE_MARK_CLASS_NAME: string;
-export declare const DEFAULT_CHESSBORD_CONFIG: ChessBoardConfig;
+import { Piece } from '../JSChessEngine';
+import { ChessBoardConfig } from './models';
+export declare const DEFAULT_FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
+export declare const DEFAULT_CIRCLE_MARK_COLOR = "#3697ce";
+export declare const DEFAULT_WHITE_CELL_COLOR: string;
+export declare const DEFAULT_BLACK_CELL_COLOR: string;
+export declare const DEFAULT_SELECTED_CELL_COLOR = "#e3f1fe";
+export declare const DEFAULT_SELECTED_CELL_BORDER = "3px solid #6ac2fd";
+export declare const DEFAULT_ARROW_COLOR = "#6ac2fd";
+export declare const DEFAULT_MARKED_CELL_COLOR = "#3697ce";
+export declare const DEFAULT_CHECKED_CELL_COLOR = "#e95b5c";
+export declare const DEFAULT_PIECES_MAP: import('./models').ChessPiecesMap;
+export declare const DEFAULT_SHOW_MOVES_TRAIL = true;
+export declare const DEFAULT_HIDE_PIECES_HANDLER: (figure: Piece, boardSize?: number) => void;
+export declare const DEFAULT_SQUARE_SIZE = 92;
+export declare const DEFAULT_PIECE_SIZE_PERCENT = 80;
+export declare const DEFAULT_HIDE_PIECE_EFFECT_CLASS_NAME: string;
+export declare const DEFAULT_LIGHT_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_DARK_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_PICKED_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_CHECKED_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_SQUARE_HIGLIGHT_CLASS_NAME: string;
+export declare const DEFAULT_SELECTED_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_HOLDED_PIECE_CLASS_NAME: string;
+export declare const DEFAULT_POSSIBLE_MOVE_MARK_CLASS_NAME: string;
+export declare const DEFAULT_CHESSBORD_CONFIG: ChessBoardConfig;

package/dist/ChessBoard/index.d.ts

@@ -1 +1 @@
-export * from './ChessBoard';
+export * from './ChessBoard';

package/dist/ChessBoard/models.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { SquarePos, Piece, MoveData, Cell, CellPos, FigureColor } from '../JSChessEngine';
+export interface ChessPiecesMap {
+    [key: string]: (size: string) => ReactElement;
+}
+export type ChessBoardConfig = {
+    squareSize: number;
+    pieceSizePercent: number;
+    lightSquareClassName: string;
+    darkSquareClassName: string;
+    pickedSquareClassName: string;
+    checkedSquareClassName: string;
+    hidePieceEffectClassName: string;
+    squareHighlightClassName: string;
+    selectedSquareClassName: string;
+    holdedPieceClassName: string;
+    possibleMoveMarkClassName: string;
+    factorForSizeCircleMark: number;
+    circleMarkColor: string;
+    arrowColor: string;
+    piecesMap: ChessPiecesMap;
+    showMovesTrail: boolean;
+    onHidePieces: (piece: Piece) => void;
+};
+export type ChangeMove = {
+    move: MoveData;
+    withTransition?: boolean;
+    attackedPos?: SquarePos;
+    transformTo?: Piece;
+};
+export type ArrowCoords = {
+    start: number[];
+    end: number[];
+};
+export type ClickData = {
+    cellData: Cell;
+    pos: CellPos;
+    currentColor: FigureColor;
+};