react-trophies/dist/components/AchievementProgress.d.ts

Comprehensive achievement and trophy system for React apps with sound effects, notifications, theming, and visual components. Uses React, React-DOM, Sonner (toast notifications), Howler (sound effects), Zustand (state management), React-Confetti (celebrat

import React from 'react';
import { AchievementDetails } from '../types';
/**
 * Props for the AchievementProgress component
 */
export interface AchievementProgressProps {
    /** The achievement to display progress for */
    achievement: AchievementDetails;
    /** Current value towards the achievement */
    currentValue: number;
    /** Target value required to complete the achievement */
    targetValue?: number;
    /** Custom height for the progress bar */
    height?: number;
    /** Custom color for the filled part of the progress bar */
    barColor?: string;
    /** Custom color for the unfilled part of the progress bar */
    backgroundColor?: string;
    /** Whether to show percentage text */
    showPercentage?: boolean;
    /** Whether to show fraction text (e.g. "7/10") */
    showFraction?: boolean;
    /** Whether to animate the progress bar */
    animate?: boolean;
    /** Custom styles to apply to different parts of the component */
    customStyles?: {
        container?: React.CSSProperties;
        label?: React.CSSProperties;
        progressContainer?: React.CSSProperties;
        progressBar?: React.CSSProperties;
        progressText?: React.CSSProperties;
    };
    /** Called when the progress reaches 100% */
    onComplete?: (achievement: AchievementDetails) => void;
}
/**
 * AchievementProgress - Shows progress towards completing an achievement
 *
 * @example
 * ```tsx
 * <AchievementProgress
 *   achievement={achievement}
 *   currentValue={5}
 *   targetValue={10}
 *   showPercentage={true}
 *   showFraction={true}
 *   barColor="#4CAF50"
 * />
 * ```
 */
declare const AchievementProgress: React.FC<AchievementProgressProps>;
export default AchievementProgress;