/**
 * SequenceBar Component
 *
 * A row of TraitSlot components forming the action sequence for the
 * Sequencer tier (ages 5-8). Kids drag ActionTiles from the palette
 * into these slots to build their sequence.
 *
 * @packageDocumentation
 */
import React from 'react';
import type { SlotItemData } from '../../TraitSlot';
export interface SequenceBarProps {
    /** The current sequence (sparse — undefined means empty slot) */
    slots: Array<SlotItemData | undefined>;
    /** Max number of slots */
    maxSlots: number;
    /** Called when an item is dropped into slot at index */
    onSlotDrop: (index: number, item: SlotItemData) => void;
    /** Called when a slot is cleared */
    onSlotRemove: (index: number) => void;
    /** Whether the sequence is currently playing (disable interaction) */
    playing?: boolean;
    /** Current step index during playback (-1 = not playing) */
    currentStep?: number;
    /** Category → color mapping */
    categoryColors?: Record<string, {
        bg: string;
        border: string;
    }>;
    /** Per-slot correctness feedback shown after a failed attempt */
    slotFeedback?: Array<'correct' | 'wrong' | null>;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Additional CSS classes */
    className?: string;
}
export declare function SequenceBar({ slots, maxSlots, onSlotDrop, onSlotRemove, playing, currentStep, categoryColors, slotFeedback, size, className, }: SequenceBarProps): React.JSX.Element;
export declare namespace SequenceBar {
    var displayName: string;
}
export default SequenceBar;
