react-bracket-ui/dist/index.d.mts

A modern, feature-rich React component library for displaying single-elimination tournament brackets with drag-drop, zoom/pan, and error validation

import * as react_jsx_runtime from 'react/jsx-runtime';

interface Participant {
    id: string | number;
    name: string;
    score?: number;
    seed?: number;
}
interface Match {
    id: string | number;
    participant1?: Participant | null;
    participant2?: Participant | null;
    winner?: string | number | null;
    round: number;
    matchNumber?: number;
    nextMatchId?: string | number | null;
    hasError?: boolean;
    errorMessage?: string;
    /** Optional: match schedule (date/time), can be string or Date */
    schedule?: string | Date;
    /** True nếu là match ảo (invisible, chỉ để giữ vị trí layout) */
    isVirtual?: boolean;
}
interface BracketError {
    matchId: string | number;
    message: string;
    type: 'warning' | 'error';
}
interface DragDropResult {
    fromMatchId: string | number;
    toMatchId: string | number;
    participantId: string | number;
    participantSlot: 'participant1' | 'participant2';
}
interface BracketChangeEvent {
    type: 'drag-drop' | 'manual-edit';
    matches: Match[];
    dragDropResult?: DragDropResult;
}
interface BracketProps {
    matches: Match[];
    className?: string;
    style?: React.CSSProperties;
    enableDragDrop?: boolean;
    onBracketChange?: (event: BracketChangeEvent) => void;
    enableZoomPan?: boolean;
    minZoom?: number;
    maxZoom?: number;
    initialZoom?: number;
    errors?: BracketError[];
    onErrorClick?: (error: BracketError) => void;
    showRoundNames?: boolean;
    roundNames?: Record<number, string>;
    matchWidth?: number;
    matchHeight?: number;
    gap?: number;
    colors?: {
        primary?: string;
        secondary?: string;
        background?: string;
        error?: string;
        warning?: string;
        winner?: string;
    };
    /** Callback khi lịch thi đấu của một trận thay đổi */
    onScheduleChange?: (matchId: string | number, newSchedule: string) => void;
}

declare function Bracket({ matches, className, style, enableDragDrop, onBracketChange, enableZoomPan, minZoom, maxZoom, initialZoom, errors: externalErrors, onErrorClick, showRoundNames, roundNames, matchWidth, matchHeight, gap, colors: customColors, onScheduleChange, schedules }: BracketProps & {
    schedules?: Record<string | number, string | Date>;
}): react_jsx_runtime.JSX.Element;

/**
 * Validate bracket structure and return errors
 */
declare function validateBracket(matches: Match[]): BracketError[];
/**
 * Check if a specific match has errors
 */
declare function hasMatchError(matchId: string | number, errors: BracketError[]): boolean;
/**
 * Get error message for a specific match
 */
declare function getMatchErrorMessage(matchId: string | number, errors: BracketError[]): string | undefined;

export { Bracket, type BracketChangeEvent, type BracketError, type BracketProps, type DragDropResult, type Match, type Participant, getMatchErrorMessage, hasMatchError, validateBracket };