analytica-frontend-lib/dist/ProgressBar/index.d.ts

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

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

/**
 * Progress bar size variants
 */
type ProgressBarSize = 'small' | 'medium';
/**
 * Progress bar color variants
 */
type ProgressBarVariant = 'blue' | 'green';
/**
 * Progress bar layout variants
 */
type ProgressBarLayout = 'default' | 'stacked' | 'compact';
/**
 * ProgressBar component props interface
 */
type ProgressBarProps = {
    /** Progress value between 0 and 100 */
    value: number;
    /** Maximum value (defaults to 100) */
    max?: number;
    /** Size variant of the progress bar */
    size?: ProgressBarSize;
    /** Color variant of the progress bar */
    variant?: ProgressBarVariant;
    /** Layout variant of the progress bar */
    layout?: ProgressBarLayout;
    /** Optional label to display */
    label?: ReactNode;
    /** Show percentage text */
    showPercentage?: boolean;
    /**
     * Show hit count (e.g., "28 de 30") instead of percentage
     *
     * PRIORITY: When both showHitCount and showPercentage are true,
     * showHitCount takes precedence (stacked and compact layouts only).
     * Default layout does not support showHitCount.
     */
    showHitCount?: boolean;
    /** Additional CSS classes */
    className?: string;
    /** Label CSS classes */
    labelClassName?: string;
    /** Percentage text CSS classes */
    percentageClassName?: string;
    /** Custom width for stacked layout (defaults to w-[380px]) */
    stackedWidth?: string;
    /** Custom height for stacked layout (defaults to h-[35px]) */
    stackedHeight?: string;
    /** Custom width for compact layout (defaults to w-[131px]) */
    compactWidth?: string;
    /** Custom height for compact layout (defaults to h-[24px]) */
    compactHeight?: string;
};
/**
 * ProgressBar component for Analytica Ensino platforms
 *
 * A progress bar component with size and color variants designed for tracking
 * activity progress (blue) and performance metrics (green).
 * Uses the Analytica Ensino Design System colors from styles.css with automatic
 * light/dark mode support. Includes Text component integration for consistent typography.
 *
 * CONTENT DISPLAY PRIORITY (Consistent across all layouts):
 * 1. showHitCount (highest) - "X de Y" format (stacked/compact only)
 * 2. showPercentage - "X%" format
 * 3. label (lowest) - Custom label text
 *
 * When multiple display options are enabled, higher priority options take precedence.
 *
 * @example
 * ```tsx
 * // Basic progress bar
 * <ProgressBar value={65} />
 *
 * // Activity progress (blue)
 * <ProgressBar variant="blue" value={45} label="Progress" showPercentage />
 *
 * // Performance metrics (green)
 * <ProgressBar variant="green" size="medium" value={85} label="Performance" />
 *
 * // Small size with custom max value
 * <ProgressBar size="small" value={3} max={5} showPercentage />
 *
 * // Stacked layout with fixed width and hit count
 * <ProgressBar layout="stacked" variant="green" value={28} max={30} label="Fáceis" showHitCount />
 *
 * // Compact layout for small cards
 * <ProgressBar layout="compact" variant="blue" value={70} label="Questão 08" />
 * ```
 */
declare const ProgressBar: ({ value, max, size, variant, layout, label, showPercentage, showHitCount, className, labelClassName, percentageClassName, stackedWidth, stackedHeight, compactWidth, compactHeight, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;

export { type ProgressBarProps, ProgressBar as default };