analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
58 lines • 2.01 kB
TypeScript
import { ReactNode } from 'react';
/**
* Progress circle size variants
*/
type ProgressCircleSize = 'small' | 'medium';
/**
* Progress circle color variants
*/
type ProgressCircleVariant = 'blue' | 'green';
/**
* ProgressCircle component props interface
*/
export type ProgressCircleProps = {
/** Progress value between 0 and 100 */
value: number;
/** Maximum value (defaults to 100) */
max?: number;
/** Size variant of the progress circle */
size?: ProgressCircleSize;
/** Color variant of the progress circle */
variant?: ProgressCircleVariant;
/** Optional label to display below percentage */
label?: ReactNode;
/** Show percentage text */
showPercentage?: boolean;
/** Additional CSS classes */
className?: string;
/** Label CSS classes */
labelClassName?: string;
/** Percentage text CSS classes */
percentageClassName?: string;
};
/**
* ProgressCircle component for Analytica Ensino platforms
*
* A circular progress indicator 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.
*
* @example
* ```tsx
* // Basic progress circle
* <ProgressCircle value={65} />
*
* // Activity progress (blue)
* <ProgressCircle variant="blue" value={45} label="CONCLUÍDO" showPercentage />
*
* // Performance metrics (green)
* <ProgressCircle variant="green" size="medium" value={85} label="MÉDIA" />
*
* // Small size with custom max value
* <ProgressCircle size="small" value={3} max={5} showPercentage />
* ```
*/
declare const ProgressCircle: ({ value, max, size, variant, label, showPercentage, className, labelClassName, percentageClassName, }: ProgressCircleProps) => import("react/jsx-runtime").JSX.Element;
export default ProgressCircle;
//# sourceMappingURL=ProgressCircle.d.ts.map